@c8y/ngx-components 1021.55.2 → 1021.56.4

package/fesm2022/c8y-ngx-components-widgets-implementations-alarms.mjs

@@ -5,13 +5,13 @@ import { FormControl, ControlContainer, NgForm, FormsModule as FormsModule$1, Re
 import * as i2 from '@c8y/client';
 import { Severity, AlarmStatus, SEVERITY_LABELS, ALARM_STATUS_LABELS } from '@c8y/client';
 import * as i2$1 from '@c8y/ngx-components';
-import { gettext, CountdownIntervalComponent, DismissAlertStrategy, DynamicComponentAlert, globalAutoRefreshLoading, AlarmRealtimeService, AlarmWithChildrenRealtimeService, CommonModule, CountdownIntervalModule, DocsModule, FormsModule } from '@c8y/ngx-components';
+import { gettext, IntervalBasedReload, CountdownIntervalComponent, DismissAlertStrategy, DynamicComponentAlert, globalAutoRefreshLoading, AlarmRealtimeService, AlarmWithChildrenRealtimeService, CommonModule, CountdownIntervalModule, DocsModule, FormsModule } from '@c8y/ngx-components';
 import * as i3 from '@c8y/ngx-components/alarms';
 import { ALARM_STATUS_ICON, DEFAULT_STATUS_VALUES, DEFAULT_SEVERITY_VALUES, AlarmsModule } from '@c8y/ngx-components/alarms';
 import * as i6 from '@ngx-translate/core';
 import { omit, isEqual, isEmpty } from 'lodash-es';
 import { BehaviorSubject, Subject } from 'rxjs';
-import { startWith, pairwise, debounceTime, tap, filter, takeUntil, skip } from 'rxjs/operators';
+import { startWith, pairwise, debounceTime, tap, takeUntil, skip } from 'rxjs/operators';
 import * as i7 from '@angular/common';
 import { CommonModule as CommonModule$1 } from '@angular/common';
 import * as i8 from 'ngx-bootstrap/popover';
@@ -744,16 +744,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
-class AlarmWidgetAlarmsReloadComponent {
+class AlarmWidgetAlarmsReloadComponent extends IntervalBasedReload {
     constructor(alarmsViewService, cdRef, translateService, widgetGlobalAutoRefreshService) {
+        super();
         this.alarmsViewService = alarmsViewService;
         this.cdRef = cdRef;
         this.translateService = translateService;
         this.widgetGlobalAutoRefreshService = widgetGlobalAutoRefreshService;
         this.REALTIME_UPDATE_ALARMS_MESSAGE = this.alarmsViewService.REALTIME_UPDATE_ALARMS_MESSAGE;
-        this.isDisabled = false;
         /**
-         * Indicates that a countdown cycle has ended.
+         * @inheritdoc
          */
         this.onCountdownEnded = new EventEmitter();
         /**
@@ -765,7 +765,7 @@ class AlarmWidgetAlarmsReloadComponent {
          */
         this.isNewAlarmMessageCleared = true;
         /**
-         * Indicates whether the countdown has been manually disabled by the user.
+         * @inheritdoc
          */
         this.manuallyDisabledCountdown = false;
     }
@@ -776,7 +776,7 @@ class AlarmWidgetAlarmsReloadComponent {
         }
         else {
             this.isIntervalRefreshToggleOn =
-                !this.isDisabled && (this.config.isAutoRefreshEnabled || !!this.refreshInterval);
+                !this.isRefreshDisabled && (this.config.isAutoRefreshEnabled || !!this.refreshInterval);
             this.updateCountdownButtonTooltipText();
         }
     }
@@ -797,7 +797,7 @@ class AlarmWidgetAlarmsReloadComponent {
         }
         if (isDisabled) {
             this.isIntervalRefreshToggleOn =
-                !this.isDisabled && (this.config.isAutoRefreshEnabled || !!this.refreshInterval);
+                !this.isRefreshDisabled && (this.config.isAutoRefreshEnabled || !!this.refreshInterval);
             this.updateCountdownButtonTooltipText(gettext('Disabled'));
         }
         if (!this.isIntervalRefresh ||
@@ -813,53 +813,12 @@ class AlarmWidgetAlarmsReloadComponent {
         }
     }
     /**
-     * This function listens for changes in the `isLoading` observable, filtering out any truthy values.
-     * Once a falsy value is detected (indicating that loading has finished), it attempts to start the countdown.
-     *
-     * IMPORTANT: If the widget's configuration (refreshInterval, check template) is not set prior to executing countdownIntervalComponent?.start,
-     * the countdown interval will not start!
-     */
-    startCountdown() {
-        this.countdownSubscription = this.isLoading
-            .pipe(filter(isLoading => !Boolean(isLoading)), tap(() => {
-            this.countdownIntervalComponent?.start();
-        }))
-            .subscribe();
-    }
-    /**
-     * Handles the toggle state of the countdown on button click.
-     *
-     * This method is triggered by a mouse event, typically a click on the countdown toggle button.
-     * It toggles `isIntervalRefreshToggleOn` to reflect the current state of the countdown timer.
-     *
-     * - If `isIntervalRefreshToggleOn` is set to false, indicating that the countdown should be stopped,
-     *   `disableCountdown` is called, and `manuallyDisabledCountdown` is set to true.
-     *
-     * - If `isIntervalRefreshToggleOn` is true and the countdown subscription is closed, indicating that
-     *   the countdown can be started, `enableCountdown` is called, and `manuallyDisabledCountdown`
-     *   is set to false.
-     *
-     * @param $event - The MouseEvent that triggered this method.
-     */
-    onToggleCountdownButtonState($event) {
-        $event.preventDefault();
-        this.isIntervalRefreshToggleOn = !this.isDisabled && !this.isIntervalRefreshToggleOn;
-        this.updateCountdownButtonTooltipText();
-        if (!this.isIntervalRefreshToggleOn) {
-            this.disableCountdown();
-            this.manuallyDisabledCountdown = true;
-            return;
-        }
-        const onRefreshToggleOn = this.isIntervalRefreshToggleOn && this.countdownSubscription.closed;
-        if (onRefreshToggleOn) {
-            this.enableCountdown();
-            this.manuallyDisabledCountdown = false;
-        }
-    }
-    /**
-     * Wrapper method where it's name better describes a context where it was called.
+     * @inheritdoc
      */
     countdownEnded() {
+        /**
+         * @inheritdoc
+         */
         this.autoRefreshList();
     }
     reload() {
@@ -905,35 +864,6 @@ class AlarmWidgetAlarmsReloadComponent {
             ? this.translateService.instant(gettext('Realtime active'))
             : this.translateService.instant(gettext('Realtime inactive'));
     }
-    /**
-     * Manages the countdown timer's visibility and state in response to user scrolling.
-     *
-     * This method toggles the countdown timer based on the user's scrolling behavior. It uses
-     * the `disableCountdown` and `enableCountdown` methods for handling the countdown state.
-     *
-     * - If the user is scrolling down while the countdown is visible (`isScrolling` is true and
-     *   `hideCountdown` is false), `disableCountdown` is called to stop and hide the countdown,
-     *   and `isIntervalRefreshToggleOn` is set to false.
-     *
-     * - If the user has stopped scrolling, the countdown subscription is closed, and the countdown
-     *   is hidden (`!isScrolling`, `countdownSubscription?.closed`, `hideCountdown`), `enableCountdown`
-     *   is called to show and restart the countdown, and `isIntervalRefreshToggleOn` is set to true.
-     */
-    handleScrolling() {
-        // Checks if the user has scrolled down while the countdown is visible
-        const onUserScrollDownHide = this.isScrolling && !this.hideCountdown;
-        if (onUserScrollDownHide) {
-            this.disableCountdown();
-            this.isIntervalRefreshToggleOn = false;
-            return;
-        }
-        // Checks if the user has stopped scrolling and the countdown is currently hidden
-        const onUserScrollTopShow = !this.isScrolling && this.countdownSubscription?.closed && this.hideCountdown;
-        if (onUserScrollTopShow) {
-            this.isIntervalRefreshToggleOn = true;
-            this.enableCountdown();
-        }
-    }
     /**
      * Enables and starts the countdown timer.
      *
@@ -949,20 +879,7 @@ class AlarmWidgetAlarmsReloadComponent {
         this.startCountdown();
     }
     /**
-     * Disables and hides the countdown timer.
-     *
-     * This method stops the ongoing countdown process by unsubscribing from `countdownSubscription`
-     * and stopping the `countdownIntervalComponent` if it exists. It then hides the countdown timer
-     * by setting `hideCountdown` to true. This method encapsulates the logic required to halt and
-     * conceal the countdown timer.
-     */
-    disableCountdown() {
-        this.countdownSubscription.unsubscribe();
-        this.countdownIntervalComponent?.stop();
-        this.hideCountdown = true;
-    }
-    /**
-     * Updates the countdown button tooltip text based on the state of the interval refresh toggle state.
+     * @inheritdoc
      */
     updateCountdownButtonTooltipText(customText) {
         if (customText) {
@@ -974,11 +891,11 @@ class AlarmWidgetAlarmsReloadComponent {
             : this.translateService.instant(gettext('Enable auto refresh'));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlarmWidgetAlarmsReloadComponent, deps: [{ token: i3.AlarmsViewService }, { token: i0.ChangeDetectorRef }, { token: i6.TranslateService }, { token: i2$1.WidgetGlobalAutoRefreshService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlarmWidgetAlarmsReloadComponent, selector: "c8y-alarm-widget-alarms-reload", inputs: { isIntervalRefresh: "isIntervalRefresh", refreshInterval: "refreshInterval", config: "config", isLoading: "isLoading", isScrolling: "isScrolling", isDisabled: "isDisabled" }, outputs: { onCountdownEnded: "onCountdownEnded", onRealTimeToggleChanged: "onRealTimeToggleChanged" }, viewQueries: [{ propertyName: "countdownIntervalComponent", first: true, predicate: CountdownIntervalComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"m-l-auto d-flex p-t-4 p-b-4\"\n  *ngIf=\"!globalAutoRefreshEnabled\"\n>\n  <div class=\"m-l-auto d-flex a-i-center\">\n    <label\n      class=\"m-b-0 m-r-8 text-label-small text-truncate flex-no-shrink\"\n      title=\" {{ 'Auto refresh' | translate }}\"\n      *ngIf=\"isIntervalRefresh && refreshInterval && config.isAutoRefreshEnabled\"\n    >\n      {{ 'Auto refresh' | translate }}\n    </label>\n    <div class=\"input-group\">\n      <label\n        class=\"toggle-countdown\"\n        [class.toggle-countdown-disabled]=\"isDisabled\"\n        [attr.aria-label]=\"toggleCountdownButtonTooltipText\"\n        [tooltip]=\"toggleCountdownButtonTooltipText\"\n        placement=\"bottom\"\n        *ngIf=\"isIntervalRefresh && refreshInterval && config.isAutoRefreshEnabled\"\n        [adaptivePosition]=\"false\"\n        [container]=\"'body'\"\n        [delay]=\"500\"\n      >\n        <input\n          type=\"checkbox\"\n          data-cy=\"c8y-alarms-widget--interval-toggle-button\"\n          (click)=\"onToggleCountdownButtonState($event)\"\n        />\n        <c8y-countdown-interval\n          *ngIf=\"isIntervalRefreshToggleOn\"\n          [countdownInterval]=\"refreshInterval\"\n          (countdownEnded)=\"countdownEnded()\"\n        ></c8y-countdown-interval>\n        <i\n          c8yIcon=\"pause\"\n          *ngIf=\"!isIntervalRefreshToggleOn\"\n        ></i>\n      </label>\n\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default\"\n          [attr.aria-label]=\"'Refresh' | translate\"\n          [tooltip]=\"\n            !isNewAlarmMessageCleared\n              ? (REALTIME_UPDATE_ALARMS_MESSAGE | translate)\n              : ('Refresh' | translate)\n          \"\n          placement=\"bottom\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          [container]=\"'body'\"\n          [delay]=\"500\"\n          [disabled]=\"isDisabled || (isLoading | async)\"\n          (click)=\"reload()\"\n          data-cy=\"c8y-alarms-widget--reload-button\"\n        >\n          <span\n            class=\"tag tag--info m-r-8\"\n            *ngIf=\"!isNewAlarmMessageCleared\"\n          >\n            {{ 'New alarms' | translate }}\n          </span>\n          <i\n            c8yIcon=\"refresh\"\n            [ngClass]=\"{ 'icon-spin': isLoading | async }\"\n          ></i>\n        </button>\n      </div>\n      <div\n        class=\"input-group-btn input-group-btn--last\"\n        *ngIf=\"!isIntervalRefresh\"\n      >\n        <button\n          class=\"c8y-realtime btn btn-default\"\n          [attr.aria-label]=\"realtimeIconTitle\"\n          [tooltip]=\"realtimeIconTitle\"\n          placement=\"bottom\"\n          type=\"button\"\n          [container]=\"'body'\"\n          (click)=\"toggleRealtimeState()\"\n          [disabled]=\"isDisabled\"\n        >\n          <span\n            class=\"c8y-pulse m-0\"\n            [ngClass]=\"{\n              active: isRealtimeToggleOn,\n              inactive: !isRealtimeToggleOn\n            }\"\n          ></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.CountdownIntervalComponent, selector: "c8y-countdown-interval", inputs: ["countdownInterval"], outputs: ["countdownEnded"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlarmWidgetAlarmsReloadComponent, selector: "c8y-alarm-widget-alarms-reload", inputs: { isIntervalRefresh: "isIntervalRefresh", refreshInterval: "refreshInterval", config: "config", isLoading: "isLoading", isScrolling: "isScrolling", isRefreshDisabled: "isRefreshDisabled" }, outputs: { onCountdownEnded: "onCountdownEnded", onRealTimeToggleChanged: "onRealTimeToggleChanged" }, viewQueries: [{ propertyName: "countdownIntervalComponent", first: true, predicate: CountdownIntervalComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"m-l-auto d-flex p-t-4 p-b-4\"\n  *ngIf=\"!globalAutoRefreshEnabled\"\n>\n  <div class=\"m-l-auto d-flex a-i-center\">\n    <label\n      class=\"m-b-0 m-r-8 text-label-small text-truncate flex-no-shrink\"\n      title=\" {{ 'Auto refresh' | translate }}\"\n      *ngIf=\"isIntervalRefresh && refreshInterval && config.isAutoRefreshEnabled\"\n    >\n      {{ 'Auto refresh' | translate }}\n    </label>\n    <div class=\"input-group\">\n      <label\n        class=\"toggle-countdown\"\n        [class.toggle-countdown-disabled]=\"isRefreshDisabled\"\n        [attr.aria-label]=\"toggleCountdownButtonTooltipText\"\n        [tooltip]=\"toggleCountdownButtonTooltipText\"\n        placement=\"bottom\"\n        *ngIf=\"isIntervalRefresh && refreshInterval && config.isAutoRefreshEnabled\"\n        [adaptivePosition]=\"false\"\n        [container]=\"'body'\"\n        [delay]=\"500\"\n      >\n        <input\n          type=\"checkbox\"\n          data-cy=\"c8y-alarms-widget--interval-toggle-button\"\n          (click)=\"onToggleCountdownButtonState($event)\"\n        />\n        <c8y-countdown-interval\n          *ngIf=\"isIntervalRefreshToggleOn\"\n          [countdownInterval]=\"refreshInterval\"\n          (countdownEnded)=\"countdownEnded()\"\n        ></c8y-countdown-interval>\n        <i\n          c8yIcon=\"pause\"\n          *ngIf=\"!isIntervalRefreshToggleOn\"\n        ></i>\n      </label>\n\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default\"\n          [attr.aria-label]=\"'Refresh' | translate\"\n          [tooltip]=\"\n            !isNewAlarmMessageCleared\n              ? (REALTIME_UPDATE_ALARMS_MESSAGE | translate)\n              : ('Refresh' | translate)\n          \"\n          placement=\"bottom\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          [container]=\"'body'\"\n          [delay]=\"500\"\n          [disabled]=\"isRefreshDisabled || (isLoading | async)\"\n          (click)=\"reload()\"\n          data-cy=\"c8y-alarms-widget--reload-button\"\n        >\n          <span\n            class=\"tag tag--info m-r-8\"\n            *ngIf=\"!isNewAlarmMessageCleared\"\n          >\n            {{ 'New alarms' | translate }}\n          </span>\n          <i\n            c8yIcon=\"refresh\"\n            [ngClass]=\"{ 'icon-spin': isLoading | async }\"\n          ></i>\n        </button>\n      </div>\n      <div\n        class=\"input-group-btn input-group-btn--last\"\n        *ngIf=\"!isIntervalRefresh\"\n      >\n        <button\n          class=\"c8y-realtime btn btn-default\"\n          [attr.aria-label]=\"realtimeIconTitle\"\n          [tooltip]=\"realtimeIconTitle\"\n          placement=\"bottom\"\n          type=\"button\"\n          [container]=\"'body'\"\n          (click)=\"toggleRealtimeState()\"\n          [disabled]=\"isRefreshDisabled\"\n        >\n          <span\n            class=\"c8y-pulse m-0\"\n            [ngClass]=\"{\n              active: isRealtimeToggleOn,\n              inactive: !isRealtimeToggleOn\n            }\"\n          ></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.CountdownIntervalComponent, selector: "c8y-countdown-interval", inputs: ["countdownInterval"], outputs: ["countdownEnded"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlarmWidgetAlarmsReloadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarm-widget-alarms-reload', template: "<div\n  class=\"m-l-auto d-flex p-t-4 p-b-4\"\n  *ngIf=\"!globalAutoRefreshEnabled\"\n>\n  <div class=\"m-l-auto d-flex a-i-center\">\n    <label\n      class=\"m-b-0 m-r-8 text-label-small text-truncate flex-no-shrink\"\n      title=\" {{ 'Auto refresh' | translate }}\"\n      *ngIf=\"isIntervalRefresh && refreshInterval && config.isAutoRefreshEnabled\"\n    >\n      {{ 'Auto refresh' | translate }}\n    </label>\n    <div class=\"input-group\">\n      <label\n        class=\"toggle-countdown\"\n        [class.toggle-countdown-disabled]=\"isDisabled\"\n        [attr.aria-label]=\"toggleCountdownButtonTooltipText\"\n        [tooltip]=\"toggleCountdownButtonTooltipText\"\n        placement=\"bottom\"\n        *ngIf=\"isIntervalRefresh && refreshInterval && config.isAutoRefreshEnabled\"\n        [adaptivePosition]=\"false\"\n        [container]=\"'body'\"\n        [delay]=\"500\"\n      >\n        <input\n          type=\"checkbox\"\n          data-cy=\"c8y-alarms-widget--interval-toggle-button\"\n          (click)=\"onToggleCountdownButtonState($event)\"\n        />\n        <c8y-countdown-interval\n          *ngIf=\"isIntervalRefreshToggleOn\"\n          [countdownInterval]=\"refreshInterval\"\n          (countdownEnded)=\"countdownEnded()\"\n        ></c8y-countdown-interval>\n        <i\n          c8yIcon=\"pause\"\n          *ngIf=\"!isIntervalRefreshToggleOn\"\n        ></i>\n      </label>\n\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default\"\n          [attr.aria-label]=\"'Refresh' | translate\"\n          [tooltip]=\"\n            !isNewAlarmMessageCleared\n              ? (REALTIME_UPDATE_ALARMS_MESSAGE | translate)\n              : ('Refresh' | translate)\n          \"\n          placement=\"bottom\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          [container]=\"'body'\"\n          [delay]=\"500\"\n          [disabled]=\"isDisabled || (isLoading | async)\"\n          (click)=\"reload()\"\n          data-cy=\"c8y-alarms-widget--reload-button\"\n        >\n          <span\n            class=\"tag tag--info m-r-8\"\n            *ngIf=\"!isNewAlarmMessageCleared\"\n          >\n            {{ 'New alarms' | translate }}\n          </span>\n          <i\n            c8yIcon=\"refresh\"\n            [ngClass]=\"{ 'icon-spin': isLoading | async }\"\n          ></i>\n        </button>\n      </div>\n      <div\n        class=\"input-group-btn input-group-btn--last\"\n        *ngIf=\"!isIntervalRefresh\"\n      >\n        <button\n          class=\"c8y-realtime btn btn-default\"\n          [attr.aria-label]=\"realtimeIconTitle\"\n          [tooltip]=\"realtimeIconTitle\"\n          placement=\"bottom\"\n          type=\"button\"\n          [container]=\"'body'\"\n          (click)=\"toggleRealtimeState()\"\n          [disabled]=\"isDisabled\"\n        >\n          <span\n            class=\"c8y-pulse m-0\"\n            [ngClass]=\"{\n              active: isRealtimeToggleOn,\n              inactive: !isRealtimeToggleOn\n            }\"\n          ></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-alarm-widget-alarms-reload', template: "<div\n  class=\"m-l-auto d-flex p-t-4 p-b-4\"\n  *ngIf=\"!globalAutoRefreshEnabled\"\n>\n  <div class=\"m-l-auto d-flex a-i-center\">\n    <label\n      class=\"m-b-0 m-r-8 text-label-small text-truncate flex-no-shrink\"\n      title=\" {{ 'Auto refresh' | translate }}\"\n      *ngIf=\"isIntervalRefresh && refreshInterval && config.isAutoRefreshEnabled\"\n    >\n      {{ 'Auto refresh' | translate }}\n    </label>\n    <div class=\"input-group\">\n      <label\n        class=\"toggle-countdown\"\n        [class.toggle-countdown-disabled]=\"isRefreshDisabled\"\n        [attr.aria-label]=\"toggleCountdownButtonTooltipText\"\n        [tooltip]=\"toggleCountdownButtonTooltipText\"\n        placement=\"bottom\"\n        *ngIf=\"isIntervalRefresh && refreshInterval && config.isAutoRefreshEnabled\"\n        [adaptivePosition]=\"false\"\n        [container]=\"'body'\"\n        [delay]=\"500\"\n      >\n        <input\n          type=\"checkbox\"\n          data-cy=\"c8y-alarms-widget--interval-toggle-button\"\n          (click)=\"onToggleCountdownButtonState($event)\"\n        />\n        <c8y-countdown-interval\n          *ngIf=\"isIntervalRefreshToggleOn\"\n          [countdownInterval]=\"refreshInterval\"\n          (countdownEnded)=\"countdownEnded()\"\n        ></c8y-countdown-interval>\n        <i\n          c8yIcon=\"pause\"\n          *ngIf=\"!isIntervalRefreshToggleOn\"\n        ></i>\n      </label>\n\n      <div class=\"input-group-btn\">\n        <button\n          class=\"btn btn-default\"\n          [attr.aria-label]=\"'Refresh' | translate\"\n          [tooltip]=\"\n            !isNewAlarmMessageCleared\n              ? (REALTIME_UPDATE_ALARMS_MESSAGE | translate)\n              : ('Refresh' | translate)\n          \"\n          placement=\"bottom\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          [container]=\"'body'\"\n          [delay]=\"500\"\n          [disabled]=\"isRefreshDisabled || (isLoading | async)\"\n          (click)=\"reload()\"\n          data-cy=\"c8y-alarms-widget--reload-button\"\n        >\n          <span\n            class=\"tag tag--info m-r-8\"\n            *ngIf=\"!isNewAlarmMessageCleared\"\n          >\n            {{ 'New alarms' | translate }}\n          </span>\n          <i\n            c8yIcon=\"refresh\"\n            [ngClass]=\"{ 'icon-spin': isLoading | async }\"\n          ></i>\n        </button>\n      </div>\n      <div\n        class=\"input-group-btn input-group-btn--last\"\n        *ngIf=\"!isIntervalRefresh\"\n      >\n        <button\n          class=\"c8y-realtime btn btn-default\"\n          [attr.aria-label]=\"realtimeIconTitle\"\n          [tooltip]=\"realtimeIconTitle\"\n          placement=\"bottom\"\n          type=\"button\"\n          [container]=\"'body'\"\n          (click)=\"toggleRealtimeState()\"\n          [disabled]=\"isRefreshDisabled\"\n        >\n          <span\n            class=\"c8y-pulse m-0\"\n            [ngClass]=\"{\n              active: isRealtimeToggleOn,\n              inactive: !isRealtimeToggleOn\n            }\"\n          ></span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i3.AlarmsViewService }, { type: i0.ChangeDetectorRef }, { type: i6.TranslateService }, { type: i2$1.WidgetGlobalAutoRefreshService }], propDecorators: { isIntervalRefresh: [{
                 type: Input
             }], refreshInterval: [{
@@ -989,7 +906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], isScrolling: [{
                 type: Input
-            }], isDisabled: [{
+            }], isRefreshDisabled: [{
                 type: Input
             }], onCountdownEnded: [{
                 type: Output
@@ -1211,11 +1128,11 @@ class AlarmListWidgetComponent {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlarmListWidgetComponent, deps: [{ token: AlarmWidgetService }, { token: i2$1.AlarmRealtimeService }, { token: i2.AlarmService }, { token: i3.AlarmsViewService }, { token: i2$1.AlarmWithChildrenRealtimeService }, { token: i2$1.DashboardChildComponent }, { token: i2$1.AlertService }, { token: i2$1.WidgetGlobalAutoRefreshService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlarmListWidgetComponent, selector: "c8y-alarm-list-widget", inputs: { config: "config" }, providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], viewQueries: [{ propertyName: "alarmWidgetAlarmsReloadComp", first: true, predicate: AlarmWidgetAlarmsReloadComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<c8y-alarms-list\n  #list\n  [alarms]=\"alarms$ | async\"\n  [navigationOptions]=\"{\n    alwaysNavigateToAllAlarms: !config.device,\n    allowNavigationToAlarmsView: true,\n    includeClearedQueryParams: true,\n    queryParamsHandling: ''\n  }\"\n  [isInitialLoading]=\"isLoading$ | async\"\n  [hasPermissions]=\"!isDisabled\"\n>\n  <c8y-alarms-date-filter\n    *ngIf=\"config.displayDateSelection\"\n    [updateQueryParams]=\"false\"\n    [date]=\"this.config.dateFilter\"\n    [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n    (dateFilterChange)=\"onDateFilterChange($event)\"\n  ></c8y-alarms-date-filter>\n  <c8y-alarm-widget-alarms-reload\n    class=\"d-contents\"\n    [isIntervalRefresh]=\"isIntervalRefresh\"\n    [refreshInterval]=\"refreshInterval\"\n    [config]=\"config\"\n    [isLoading]=\"isLoading$\"\n    [isScrolling]=\"list.isScrolling\"\n    [isDisabled]=\"isDisabled\"\n    (onCountdownEnded)=\"fetchAlarms()\"\n    (onRealTimeToggleChanged)=\"handleRealTimeToggleChange($event)\"\n  ></c8y-alarm-widget-alarms-reload>\n</c8y-alarms-list>\n", dependencies: [{ kind: "component", type: i3.AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: i3.AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", inputs: ["DEFAULT_INTERVAL", "updateQueryParams", "date"], outputs: ["dateFilterChange"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AlarmWidgetAlarmsReloadComponent, selector: "c8y-alarm-widget-alarms-reload", inputs: ["isIntervalRefresh", "refreshInterval", "config", "isLoading", "isScrolling", "isDisabled"], outputs: ["onCountdownEnded", "onRealTimeToggleChanged"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlarmListWidgetComponent, selector: "c8y-alarm-list-widget", inputs: { config: "config" }, providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], viewQueries: [{ propertyName: "alarmWidgetAlarmsReloadComp", first: true, predicate: AlarmWidgetAlarmsReloadComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<c8y-alarms-list\n  #list\n  [alarms]=\"alarms$ | async\"\n  [navigationOptions]=\"{\n    alwaysNavigateToAllAlarms: !config.device,\n    allowNavigationToAlarmsView: true,\n    includeClearedQueryParams: true,\n    queryParamsHandling: ''\n  }\"\n  [isInitialLoading]=\"isLoading$ | async\"\n  [hasPermissions]=\"!isDisabled\"\n>\n  <c8y-alarms-date-filter\n    *ngIf=\"config.displayDateSelection\"\n    [updateQueryParams]=\"false\"\n    [date]=\"this.config.dateFilter\"\n    [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n    (dateFilterChange)=\"onDateFilterChange($event)\"\n  ></c8y-alarms-date-filter>\n  <c8y-alarm-widget-alarms-reload\n    class=\"d-contents\"\n    [isIntervalRefresh]=\"isIntervalRefresh\"\n    [refreshInterval]=\"refreshInterval\"\n    [config]=\"config\"\n    [isLoading]=\"isLoading$\"\n    [isScrolling]=\"list.isScrolling\"\n    [isRefreshDisabled]=\"isDisabled\"\n    (onCountdownEnded)=\"fetchAlarms()\"\n    (onRealTimeToggleChanged)=\"handleRealTimeToggleChange($event)\"\n  ></c8y-alarm-widget-alarms-reload>\n</c8y-alarms-list>\n", dependencies: [{ kind: "component", type: i3.AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: i3.AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", inputs: ["DEFAULT_INTERVAL", "updateQueryParams", "date"], outputs: ["dateFilterChange"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AlarmWidgetAlarmsReloadComponent, selector: "c8y-alarm-widget-alarms-reload", inputs: ["isIntervalRefresh", "refreshInterval", "config", "isLoading", "isScrolling", "isRefreshDisabled"], outputs: ["onCountdownEnded", "onRealTimeToggleChanged"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlarmListWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarm-list-widget', providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], template: "<c8y-alarms-list\n  #list\n  [alarms]=\"alarms$ | async\"\n  [navigationOptions]=\"{\n    alwaysNavigateToAllAlarms: !config.device,\n    allowNavigationToAlarmsView: true,\n    includeClearedQueryParams: true,\n    queryParamsHandling: ''\n  }\"\n  [isInitialLoading]=\"isLoading$ | async\"\n  [hasPermissions]=\"!isDisabled\"\n>\n  <c8y-alarms-date-filter\n    *ngIf=\"config.displayDateSelection\"\n    [updateQueryParams]=\"false\"\n    [date]=\"this.config.dateFilter\"\n    [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n    (dateFilterChange)=\"onDateFilterChange($event)\"\n  ></c8y-alarms-date-filter>\n  <c8y-alarm-widget-alarms-reload\n    class=\"d-contents\"\n    [isIntervalRefresh]=\"isIntervalRefresh\"\n    [refreshInterval]=\"refreshInterval\"\n    [config]=\"config\"\n    [isLoading]=\"isLoading$\"\n    [isScrolling]=\"list.isScrolling\"\n    [isDisabled]=\"isDisabled\"\n    (onCountdownEnded)=\"fetchAlarms()\"\n    (onRealTimeToggleChanged)=\"handleRealTimeToggleChange($event)\"\n  ></c8y-alarm-widget-alarms-reload>\n</c8y-alarms-list>\n" }]
+            args: [{ selector: 'c8y-alarm-list-widget', providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], template: "<c8y-alarms-list\n  #list\n  [alarms]=\"alarms$ | async\"\n  [navigationOptions]=\"{\n    alwaysNavigateToAllAlarms: !config.device,\n    allowNavigationToAlarmsView: true,\n    includeClearedQueryParams: true,\n    queryParamsHandling: ''\n  }\"\n  [isInitialLoading]=\"isLoading$ | async\"\n  [hasPermissions]=\"!isDisabled\"\n>\n  <c8y-alarms-date-filter\n    *ngIf=\"config.displayDateSelection\"\n    [updateQueryParams]=\"false\"\n    [date]=\"this.config.dateFilter\"\n    [DEFAULT_INTERVAL]=\"config.interval || 'none'\"\n    (dateFilterChange)=\"onDateFilterChange($event)\"\n  ></c8y-alarms-date-filter>\n  <c8y-alarm-widget-alarms-reload\n    class=\"d-contents\"\n    [isIntervalRefresh]=\"isIntervalRefresh\"\n    [refreshInterval]=\"refreshInterval\"\n    [config]=\"config\"\n    [isLoading]=\"isLoading$\"\n    [isScrolling]=\"list.isScrolling\"\n    [isRefreshDisabled]=\"isDisabled\"\n    (onCountdownEnded)=\"fetchAlarms()\"\n    (onRealTimeToggleChanged)=\"handleRealTimeToggleChange($event)\"\n  ></c8y-alarm-widget-alarms-reload>\n</c8y-alarms-list>\n" }]
         }], ctorParameters: () => [{ type: AlarmWidgetService }, { type: i2$1.AlarmRealtimeService }, { type: i2.AlarmService }, { type: i3.AlarmsViewService }, { type: i2$1.AlarmWithChildrenRealtimeService }, { type: i2$1.DashboardChildComponent }, { type: i2$1.AlertService }, { type: i2$1.WidgetGlobalAutoRefreshService }], propDecorators: { config: [{
                 type: Input
             }], alarmWidgetAlarmsReloadComp: [{