@c8y/ngx-components 1021.13.3 → 1021.21.0

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

@@ -4,14 +4,14 @@ import * as i5 from '@angular/forms';
 import { FormControl, ControlContainer, NgForm, FormsModule as FormsModule$1, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@c8y/client';
 import { Severity, AlarmStatus, SEVERITY_LABELS, ALARM_STATUS_LABELS } from '@c8y/client';
-import * as i4 from '@c8y/ngx-components';
-import { gettext, CountdownIntervalComponent, AlarmRealtimeService, AlarmWithChildrenRealtimeService, CommonModule, CountdownIntervalModule, DocsModule, FormsModule } from '@c8y/ngx-components';
+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 * as i1 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, filter, tap, takeUntil } from 'rxjs/operators';
+import { startWith, pairwise, debounceTime, tap, filter, 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';
@@ -34,6 +34,7 @@ const ALARM_ORDER_LABELS = {
 };
 const ASSET_ALARMS_WIDGET_ID = 'Asset Alarms';
 const RECENT_ALARMS_WIDGET_ID = 'Recent Alarms';
+const GLOBAL_INTERVAL_OPTION = 'global-interval';
 
 const DEFAULT_PAGE_SIZE = 20;
 class AlarmWidgetService {
@@ -445,8 +446,8 @@ class AlarmListWidgetConfigComponent {
         this.BELL_ICON = ALARM_STATUS_ICON.BELL;
         this.C8Y_ALERT_IDLE_ICON = ALARM_STATUS_ICON.ALERT_IDLE;
         this.ALARM_ORDER_LABELS = ALARM_ORDER_LABELS;
+        this.GLOBAL_INTERVAL_OPTION = GLOBAL_INTERVAL_OPTION;
         this.alarms$ = new BehaviorSubject(null);
-        this.refreshOptionsDetails = [];
         this.orderList = Object.values(ALARM_ORDER_VALUES);
         this.severityList = Object.keys(SEVERITY_LABELS);
         /**
@@ -459,9 +460,12 @@ class AlarmListWidgetConfigComponent {
             ? this.translateService.instant(gettext('Realtime'))
             : this.translateService.instant(gettext('Auto refresh'));
         this.refreshTypePopoverMessage = this.config.isRealtime
-            ? this.translateService.instant(gettext('Change the state of realtime refresh.'))
+            ? this.translateService.instant(gettext('Change the default state of realtime refresh.'))
             : this.translateService.instant(gettext('Change the state of interval automatic refresh and set the refresh frequency.'));
         this.initializeForm();
+        if (!this.config.isRealtime) {
+            this.updateConfigBasedOnRefreshOption();
+        }
         this.config.isRealtime = !this.alarmsViewService.isIntervalRefresh();
         const isWidgetWithExistingConfig = this.config.order && this.config.severities && this.config.status;
         if (isWidgetWithExistingConfig) {
@@ -512,17 +516,17 @@ class AlarmListWidgetConfigComponent {
     addType() {
         this.types.push(this.formBuilder.control(''));
     }
+    updateRefreshOption() {
+        this.config.refreshOption = this.refreshOption;
+        this.formGroup.controls.refreshOption.setValue(this.refreshOption);
+        const isGlobalInterval = this.refreshOption === GLOBAL_INTERVAL_OPTION;
+        this.config.widgetInstanceGlobalAutoRefreshContext = isGlobalInterval;
+        this.formGroup.controls.widgetInstanceGlobalAutoRefreshContext.setValue(isGlobalInterval);
+        this.updateConfigBasedOnRefreshOption();
+    }
     get types() {
         return this.formGroup.get('types');
     }
-    updateRefreshIntervals() {
-        if (this.config.isRealtime) {
-            return;
-        }
-        this.formGroup.get('isAutoRefreshEnabled').value
-            ? this.formGroup.get('refreshInterval').disable()
-            : this.formGroup.get('refreshInterval').enable();
-    }
     filterEmptyTypes(types) {
         return types.filter((element) => element !== '' && element !== null);
     }
@@ -547,6 +551,7 @@ class AlarmListWidgetConfigComponent {
         this.form.form.addControl('config', this.formGroup);
         this.formGroup.patchValue(this.config);
         this.initializeTypes(this.config.types);
+        this.refreshOption = this.config.refreshOption ?? 'interval';
     }
     createForm() {
         return this.formBuilder.group({
@@ -566,7 +571,9 @@ class AlarmListWidgetConfigComponent {
                     disabled: this.isAutorefershDisabled()
                 })
                 : new FormControl(undefined),
-            device: this.config.device ? new FormControl(this.config.device) : new FormControl(undefined)
+            device: this.config.device ? new FormControl(this.config.device) : new FormControl(undefined),
+            refreshOption: this.config.isRealtime ? null : 'interval',
+            widgetInstanceGlobalAutoRefreshContext: this.config.refreshOption === GLOBAL_INTERVAL_OPTION
         });
     }
     isAutorefershDisabled() {
@@ -634,31 +641,36 @@ class AlarmListWidgetConfigComponent {
         const currentConfigCopy = omit(currentConfig, 'isAutoRefreshEnabled', 'refreshInterval');
         return isEqual(prevConfigCopy, currentConfigCopy);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListWidgetConfigComponent, deps: [{ token: AlarmWidgetService }, { token: i2.AlarmService }, { token: i1.AlarmsViewService }, { token: i4.AlertService }, { token: i5.NgForm }, { token: i5.FormBuilder }, { token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmListWidgetConfigComponent, selector: "c8y-alarm-list-widget-config", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"p-l-24 p-r-24\"\n  [style.pointer-events]=\"'auto'\"\n  [style.opacity]=\"1\"\n></div>\n\n<form\n  class=\"row\"\n  [formGroup]=\"formGroup\"\n>\n  <div class=\"col-md-6\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>\n      <c8y-form-group class=\"m-b-0\">\n        <div\n          class=\"d-flex m-b-8 a-i-center\"\n          *ngFor=\"let order of orderList; let i = index\"\n        >\n          <label\n            class=\"c8y-radio gap-4\"\n            title=\"{{ ALARM_ORDER_LABELS[order] | translate }}\"\n          >\n            <input\n              type=\"radio\"\n              [value]=\"order\"\n              formControlName=\"order\"\n            />\n            <span class=\"a-s-center\"></span>\n            <span class=\"text-truncate\">{{ ALARM_ORDER_LABELS[order] | translate }}</span>\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"order | sortingDescriptionPopoverMessage | translate\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n            [adaptivePosition]=\"true\"\n          ></button>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"severities\"\n    >\n      <legend>{{ 'Severities' | translate }}</legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.severities.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.severities.hasError('required')\n        }\"\n      >\n        <ng-container *ngFor=\"let severityOption of severityList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"SEVERITY_LABELS[severityOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"severityOption\"\n              [name]=\"severityOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <ng-container *ngIf=\"{ result: severityOption | severityIcon } as severityIcon\">\n              <i\n                class=\"a-s-center m-r-4 icon-20 {{ severityIcon.result.iconClass }}\"\n                [c8yIcon]=\"severityIcon.result.c8yIcon\"\n              ></i>\n            </ng-container>\n            <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.severities.hasError('required')\">\n            {{ 'Select at least one severity.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n\n  <div class=\"col-md-6\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"status\"\n    >\n      <legend>{{ 'Status' | translate }}</legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.status.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.status.hasError('required')\n        }\"\n      >\n        <ng-container *ngFor=\"let statusOption of statusList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"STATUS_LABELS[statusOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"statusOption\"\n              [name]=\"statusOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <i\n              class=\"a-s-center m-l-4 m-r-4 text-gray-dark c8y-icon icon-20\"\n              [c8yIcon]=\"\n                statusOption === CLEARED_STATUS_VALUE\n                  ? C8Y_ALERT_IDLE_ICON\n                  : statusOption === ACKNOWLEDGE_STATUS_VALUE\n                    ? BELL_SLASH_ICON\n                    : BELL_ICON\n              \"\n            ></i>\n            <span>{{ STATUS_LABELS[statusOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.status.hasError('required')\">\n            {{ 'Select at least one status.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Child devices' | translate }}</legend>\n      <c8y-form-group class=\"m-b-8\">\n        <label\n          class=\"c8y-switch\"\n          [title]=\"'Show alarms from child devices' | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            formControlName=\"showAlarmsForChildren\"\n          />\n          <span></span>\n          <span>{{ 'Show alarms' | translate }}</span>\n          <span class=\"sr-only\">{{ 'Show alarms' | translate }}</span>\n        </label>\n      </c8y-form-group>\n    </fieldset>\n\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Types' | translate }}</legend>\n      <c8y-form-group\n        class=\"m-b-8\"\n        formArrayName=\"types\"\n      >\n        <div\n          class=\"input-group\"\n          *ngFor=\"let type of types.controls; let i = index\"\n        >\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }\"\n            [formControlName]=\"i\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn btn-dot btn-dot--danger m-l-auto\"\n              [title]=\"'Remove' | translate\"\n              type=\"button\"\n              (click)=\"removeType(i)\"\n              [disabled]=\"types.controls?.length === 1 && !type.value\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n          <div\n            class=\"input-group-btn\"\n            *ngIf=\"i === types.controls.length - 1\"\n          >\n            <button\n              class=\"btn btn-dot btn-dot--primary m-l-auto\"\n              [title]=\"'Add alarm type' | translate\"\n              type=\"button\"\n              (click)=\"addType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n    <fieldset class=\"c8y-fieldset\">\n      <legend class=\"d-flex\">\n        {{ refreshTypeTitle }}\n        <button\n          class=\"btn-help btn-help--sm\"\n          [attr.aria-label]=\"'Help' | translate\"\n          [popover]=\"refreshTypePopoverMessage\"\n          placement=\"top\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          [adaptivePosition]=\"true\"\n        ></button>\n      </legend>\n      <c8y-form-group class=\"m-b-8 form-group-sm\">\n        <div class=\"d-flex gap-8 a-i-center\">\n          <label class=\"c8y-switch\">\n            <input\n              id=\"refreshToggle\"\n              name=\"isAutoRefreshEnabled\"\n              type=\"checkbox\"\n              formControlName=\"isAutoRefreshEnabled\"\n              (click)=\"updateRefreshIntervals()\"\n            />\n            <span></span>\n            <span class=\"sr-only\">{{ 'Auto refresh' | translate }}</span>\n          </label>\n          <ng-container *ngIf=\"!config.isRealtime\">\n            <label\n              class=\"m-b-0\"\n              for=\"refreshInterval\"\n            >\n              {{ 'Interval' | translate }}\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control text-12\"\n                [title]=\"'Refresh interval in seconds' | translate\"\n                id=\"refreshInterval\"\n                formControlName=\"refreshInterval\"\n              >\n                <option\n                  *ngFor=\"let refreshInterval of REFRESH_INTERVAL_IN_MILLISECONDS\"\n                  [ngValue]=\"refreshInterval\"\n                >\n                  {{ '{{ seconds }} s' | translate: { seconds: refreshInterval / 1000 } }}\n                </option>\n              </select>\n            </div>\n          </ng-container>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n</form>\n\n<div class=\"legend form-block m-b-0\">{{ 'Preview`of an alarm list`' | translate }}</div>\n<c8y-alarms-list\n  [alarms]=\"alarms$ | async\"\n  [isInitialLoading]=\"isLoading\"\n  [navigationOptions]=\"{\n    allowNavigationToAlarmsView: false,\n    alwaysNavigateToAllAlarms: false,\n    includeClearedQueryParams: false\n  }\"\n></c8y-alarms-list>\n", dependencies: [{ kind: "component", type: i1.AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "directive", type: i4.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i4.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i4.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i4.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: SeverityIconPipe, name: "severityIcon" }, { kind: "pipe", type: SortingDescriptionPopoverMessagePipe, name: "sortingDescriptionPopoverMessage" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
+    updateConfigBasedOnRefreshOption() {
+        const isInterval = this.refreshOption === 'interval';
+        this.config.isAutoRefreshEnabled = isInterval;
+        this.formGroup.controls.isAutoRefreshEnabled.setValue(isInterval);
+        isInterval
+            ? this.formGroup.get('refreshInterval').enable()
+            : this.formGroup.get('refreshInterval').disable();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListWidgetConfigComponent, deps: [{ token: AlarmWidgetService }, { token: i2.AlarmService }, { token: i1.AlarmsViewService }, { token: i2$1.AlertService }, { token: i5.NgForm }, { token: i5.FormBuilder }, { token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmListWidgetConfigComponent, selector: "c8y-alarm-list-widget-config", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"p-l-24 p-r-24\"\n  [style.pointer-events]=\"'auto'\"\n  [style.opacity]=\"1\"\n></div>\n\n<form\n  class=\"row\"\n  [formGroup]=\"formGroup\"\n>\n  <div class=\"col-md-6\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>\n      <c8y-form-group class=\"m-b-0\">\n        <div\n          class=\"d-flex m-b-8 a-i-center\"\n          *ngFor=\"let order of orderList; let i = index\"\n        >\n          <label\n            class=\"c8y-radio gap-4\"\n            title=\"{{ ALARM_ORDER_LABELS[order] | translate }}\"\n          >\n            <input\n              type=\"radio\"\n              [value]=\"order\"\n              formControlName=\"order\"\n            />\n            <span class=\"a-s-center\"></span>\n            <span class=\"text-truncate\">{{ ALARM_ORDER_LABELS[order] | translate }}</span>\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"order | sortingDescriptionPopoverMessage | translate\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n            [adaptivePosition]=\"true\"\n          ></button>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"severities\"\n    >\n      <legend>{{ 'Severities' | translate }}</legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.severities.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.severities.hasError('required')\n        }\"\n      >\n        <ng-container *ngFor=\"let severityOption of severityList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"SEVERITY_LABELS[severityOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"severityOption\"\n              [name]=\"severityOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <ng-container *ngIf=\"{ result: severityOption | severityIcon } as severityIcon\">\n              <i\n                class=\"a-s-center m-r-4 icon-20 {{ severityIcon.result.iconClass }}\"\n                [c8yIcon]=\"severityIcon.result.c8yIcon\"\n              ></i>\n            </ng-container>\n            <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.severities.hasError('required')\">\n            {{ 'Select at least one severity.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n\n  <div class=\"col-md-6\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"status\"\n    >\n      <legend>{{ 'Status' | translate }}</legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.status.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.status.hasError('required')\n        }\"\n      >\n        <ng-container *ngFor=\"let statusOption of statusList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"STATUS_LABELS[statusOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"statusOption\"\n              [name]=\"statusOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <i\n              class=\"a-s-center m-l-4 m-r-4 text-gray-dark c8y-icon icon-20\"\n              [c8yIcon]=\"\n                statusOption === CLEARED_STATUS_VALUE\n                  ? C8Y_ALERT_IDLE_ICON\n                  : statusOption === ACKNOWLEDGE_STATUS_VALUE\n                    ? BELL_SLASH_ICON\n                    : BELL_ICON\n              \"\n            ></i>\n            <span>{{ STATUS_LABELS[statusOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.status.hasError('required')\">\n            {{ 'Select at least one status.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Child devices' | translate }}</legend>\n      <c8y-form-group class=\"m-b-8\">\n        <label\n          class=\"c8y-switch\"\n          [title]=\"'Show alarms from child devices' | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            formControlName=\"showAlarmsForChildren\"\n          />\n          <span></span>\n          <span>{{ 'Show alarms' | translate }}</span>\n          <span class=\"sr-only\">{{ 'Show alarms' | translate }}</span>\n        </label>\n      </c8y-form-group>\n    </fieldset>\n\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Types' | translate }}</legend>\n      <c8y-form-group\n        class=\"m-b-8\"\n        formArrayName=\"types\"\n      >\n        <div\n          class=\"input-group\"\n          *ngFor=\"let type of types.controls; let i = index\"\n        >\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }\"\n            [formControlName]=\"i\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn btn-dot btn-dot--danger m-l-auto\"\n              [title]=\"'Remove' | translate\"\n              type=\"button\"\n              (click)=\"removeType(i)\"\n              [disabled]=\"types.controls?.length === 1 && !type.value\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n          <div\n            class=\"input-group-btn\"\n            *ngIf=\"i === types.controls.length - 1\"\n          >\n            <button\n              class=\"btn btn-dot btn-dot--primary m-l-auto\"\n              [title]=\"'Add alarm type' | translate\"\n              type=\"button\"\n              (click)=\"addType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n    <fieldset class=\"c8y-fieldset\">\n      <legend class=\"d-flex\">\n        {{ refreshTypeTitle }}\n        <button\n          class=\"btn-help btn-help--sm\"\n          [attr.aria-label]=\"'Help' | translate\"\n          [popover]=\"refreshTypePopoverMessage\"\n          placement=\"top\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          [adaptivePosition]=\"true\"\n        ></button>\n      </legend>\n      <c8y-form-group class=\"m-b-8 form-group-sm\">\n        <div class=\"d-flex gap-8 a-i-center\">\n          <ng-template #realtime>\n            <label class=\"c8y-switch\">\n              <input\n                id=\"refreshToggle\"\n                name=\"isAutoRefreshEnabled\"\n                type=\"checkbox\"\n                formControlName=\"isAutoRefreshEnabled\"\n              />\n              <span></span>\n              <span class=\"sr-only\">{{ 'Realtime refresh' | translate }}</span>\n            </label>\n          </ng-template>\n          <div\n            class=\"c8y-select-wrapper\"\n            *ngIf=\"!config.isRealtime; else realtime\"\n          >\n            <select\n              class=\"form-control\"\n              title=\"{{ 'Refresh options`options for refreshing a view`' | translate }}\"\n              [(ngModel)]=\"refreshOption\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (change)=\"updateRefreshOption()\"\n            >\n              <option value=\"none\">\n                {{ 'No automatic refresh' | translate }}\n              </option>\n              <option\n                [title]=\"'Refreshing after the given interval' | translate\"\n                value=\"interval\"\n              >\n                {{ 'Use refresh interval' | translate }}\n              </option>\n              <option\n                [title]=\"'Refreshing after the given interval, synchronized globally' | translate\"\n                value=\"global-interval\"\n              >\n                {{ 'Use global refresh interval' | translate }}\n              </option>\n            </select>\n          </div>\n          <ng-container\n            *ngIf=\"!config.isRealtime && config.refreshOption !== GLOBAL_INTERVAL_OPTION\"\n          >\n            <label\n              class=\"m-b-0\"\n              for=\"refreshInterval\"\n            >\n              {{ 'Interval' | translate }}\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control text-12\"\n                [title]=\"'Refresh interval in seconds' | translate\"\n                id=\"refreshInterval\"\n                formControlName=\"refreshInterval\"\n              >\n                <option\n                  *ngFor=\"let refreshInterval of REFRESH_INTERVAL_IN_MILLISECONDS\"\n                  [ngValue]=\"refreshInterval\"\n                >\n                  {{ '{{ seconds }} s' | translate: { seconds: refreshInterval / 1000 } }}\n                </option>\n              </select>\n            </div>\n          </ng-container>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n</form>\n\n<div class=\"legend form-block m-b-0\">{{ 'Preview`of an alarm list`' | translate }}</div>\n<c8y-alarms-list\n  [alarms]=\"alarms$ | async\"\n  [isInitialLoading]=\"isLoading\"\n  [navigationOptions]=\"{\n    allowNavigationToAlarmsView: false,\n    alwaysNavigateToAllAlarms: false,\n    includeClearedQueryParams: false,\n    queryParamsHandling: 'merge'\n  }\"\n></c8y-alarms-list>\n", dependencies: [{ kind: "component", type: i1.AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "directive", type: i2$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2$1.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i2$1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i2$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: SeverityIconPipe, name: "severityIcon" }, { kind: "pipe", type: SortingDescriptionPopoverMessagePipe, name: "sortingDescriptionPopoverMessage" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListWidgetConfigComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarm-list-widget-config', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<div\n  class=\"p-l-24 p-r-24\"\n  [style.pointer-events]=\"'auto'\"\n  [style.opacity]=\"1\"\n></div>\n\n<form\n  class=\"row\"\n  [formGroup]=\"formGroup\"\n>\n  <div class=\"col-md-6\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>\n      <c8y-form-group class=\"m-b-0\">\n        <div\n          class=\"d-flex m-b-8 a-i-center\"\n          *ngFor=\"let order of orderList; let i = index\"\n        >\n          <label\n            class=\"c8y-radio gap-4\"\n            title=\"{{ ALARM_ORDER_LABELS[order] | translate }}\"\n          >\n            <input\n              type=\"radio\"\n              [value]=\"order\"\n              formControlName=\"order\"\n            />\n            <span class=\"a-s-center\"></span>\n            <span class=\"text-truncate\">{{ ALARM_ORDER_LABELS[order] | translate }}</span>\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"order | sortingDescriptionPopoverMessage | translate\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n            [adaptivePosition]=\"true\"\n          ></button>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"severities\"\n    >\n      <legend>{{ 'Severities' | translate }}</legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.severities.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.severities.hasError('required')\n        }\"\n      >\n        <ng-container *ngFor=\"let severityOption of severityList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"SEVERITY_LABELS[severityOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"severityOption\"\n              [name]=\"severityOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <ng-container *ngIf=\"{ result: severityOption | severityIcon } as severityIcon\">\n              <i\n                class=\"a-s-center m-r-4 icon-20 {{ severityIcon.result.iconClass }}\"\n                [c8yIcon]=\"severityIcon.result.c8yIcon\"\n              ></i>\n            </ng-container>\n            <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.severities.hasError('required')\">\n            {{ 'Select at least one severity.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n\n  <div class=\"col-md-6\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"status\"\n    >\n      <legend>{{ 'Status' | translate }}</legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.status.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.status.hasError('required')\n        }\"\n      >\n        <ng-container *ngFor=\"let statusOption of statusList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"STATUS_LABELS[statusOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"statusOption\"\n              [name]=\"statusOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <i\n              class=\"a-s-center m-l-4 m-r-4 text-gray-dark c8y-icon icon-20\"\n              [c8yIcon]=\"\n                statusOption === CLEARED_STATUS_VALUE\n                  ? C8Y_ALERT_IDLE_ICON\n                  : statusOption === ACKNOWLEDGE_STATUS_VALUE\n                    ? BELL_SLASH_ICON\n                    : BELL_ICON\n              \"\n            ></i>\n            <span>{{ STATUS_LABELS[statusOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.status.hasError('required')\">\n            {{ 'Select at least one status.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Child devices' | translate }}</legend>\n      <c8y-form-group class=\"m-b-8\">\n        <label\n          class=\"c8y-switch\"\n          [title]=\"'Show alarms from child devices' | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            formControlName=\"showAlarmsForChildren\"\n          />\n          <span></span>\n          <span>{{ 'Show alarms' | translate }}</span>\n          <span class=\"sr-only\">{{ 'Show alarms' | translate }}</span>\n        </label>\n      </c8y-form-group>\n    </fieldset>\n\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Types' | translate }}</legend>\n      <c8y-form-group\n        class=\"m-b-8\"\n        formArrayName=\"types\"\n      >\n        <div\n          class=\"input-group\"\n          *ngFor=\"let type of types.controls; let i = index\"\n        >\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }\"\n            [formControlName]=\"i\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn btn-dot btn-dot--danger m-l-auto\"\n              [title]=\"'Remove' | translate\"\n              type=\"button\"\n              (click)=\"removeType(i)\"\n              [disabled]=\"types.controls?.length === 1 && !type.value\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n          <div\n            class=\"input-group-btn\"\n            *ngIf=\"i === types.controls.length - 1\"\n          >\n            <button\n              class=\"btn btn-dot btn-dot--primary m-l-auto\"\n              [title]=\"'Add alarm type' | translate\"\n              type=\"button\"\n              (click)=\"addType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n    <fieldset class=\"c8y-fieldset\">\n      <legend class=\"d-flex\">\n        {{ refreshTypeTitle }}\n        <button\n          class=\"btn-help btn-help--sm\"\n          [attr.aria-label]=\"'Help' | translate\"\n          [popover]=\"refreshTypePopoverMessage\"\n          placement=\"top\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          [adaptivePosition]=\"true\"\n        ></button>\n      </legend>\n      <c8y-form-group class=\"m-b-8 form-group-sm\">\n        <div class=\"d-flex gap-8 a-i-center\">\n          <label class=\"c8y-switch\">\n            <input\n              id=\"refreshToggle\"\n              name=\"isAutoRefreshEnabled\"\n              type=\"checkbox\"\n              formControlName=\"isAutoRefreshEnabled\"\n              (click)=\"updateRefreshIntervals()\"\n            />\n            <span></span>\n            <span class=\"sr-only\">{{ 'Auto refresh' | translate }}</span>\n          </label>\n          <ng-container *ngIf=\"!config.isRealtime\">\n            <label\n              class=\"m-b-0\"\n              for=\"refreshInterval\"\n            >\n              {{ 'Interval' | translate }}\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control text-12\"\n                [title]=\"'Refresh interval in seconds' | translate\"\n                id=\"refreshInterval\"\n                formControlName=\"refreshInterval\"\n              >\n                <option\n                  *ngFor=\"let refreshInterval of REFRESH_INTERVAL_IN_MILLISECONDS\"\n                  [ngValue]=\"refreshInterval\"\n                >\n                  {{ '{{ seconds }} s' | translate: { seconds: refreshInterval / 1000 } }}\n                </option>\n              </select>\n            </div>\n          </ng-container>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n</form>\n\n<div class=\"legend form-block m-b-0\">{{ 'Preview`of an alarm list`' | translate }}</div>\n<c8y-alarms-list\n  [alarms]=\"alarms$ | async\"\n  [isInitialLoading]=\"isLoading\"\n  [navigationOptions]=\"{\n    allowNavigationToAlarmsView: false,\n    alwaysNavigateToAllAlarms: false,\n    includeClearedQueryParams: false\n  }\"\n></c8y-alarms-list>\n" }]
-        }], ctorParameters: () => [{ type: AlarmWidgetService }, { type: i2.AlarmService }, { type: i1.AlarmsViewService }, { type: i4.AlertService }, { type: i5.NgForm }, { type: i5.FormBuilder }, { type: i6.TranslateService }], propDecorators: { config: [{
+            args: [{ selector: 'c8y-alarm-list-widget-config', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<div\n  class=\"p-l-24 p-r-24\"\n  [style.pointer-events]=\"'auto'\"\n  [style.opacity]=\"1\"\n></div>\n\n<form\n  class=\"row\"\n  [formGroup]=\"formGroup\"\n>\n  <div class=\"col-md-6\">\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>\n      <c8y-form-group class=\"m-b-0\">\n        <div\n          class=\"d-flex m-b-8 a-i-center\"\n          *ngFor=\"let order of orderList; let i = index\"\n        >\n          <label\n            class=\"c8y-radio gap-4\"\n            title=\"{{ ALARM_ORDER_LABELS[order] | translate }}\"\n          >\n            <input\n              type=\"radio\"\n              [value]=\"order\"\n              formControlName=\"order\"\n            />\n            <span class=\"a-s-center\"></span>\n            <span class=\"text-truncate\">{{ ALARM_ORDER_LABELS[order] | translate }}</span>\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"order | sortingDescriptionPopoverMessage | translate\"\n            placement=\"right\"\n            triggers=\"focus\"\n            container=\"body\"\n            type=\"button\"\n            [adaptivePosition]=\"true\"\n          ></button>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"severities\"\n    >\n      <legend>{{ 'Severities' | translate }}</legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.severities.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.severities.hasError('required')\n        }\"\n      >\n        <ng-container *ngFor=\"let severityOption of severityList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"SEVERITY_LABELS[severityOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"severityOption\"\n              [name]=\"severityOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <ng-container *ngIf=\"{ result: severityOption | severityIcon } as severityIcon\">\n              <i\n                class=\"a-s-center m-r-4 icon-20 {{ severityIcon.result.iconClass }}\"\n                [c8yIcon]=\"severityIcon.result.c8yIcon\"\n              ></i>\n            </ng-container>\n            <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.severities.hasError('required')\">\n            {{ 'Select at least one severity.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n\n  <div class=\"col-md-6\">\n    <fieldset\n      class=\"c8y-fieldset\"\n      formArrayName=\"status\"\n    >\n      <legend>{{ 'Status' | translate }}</legend>\n      <c8y-form-group\n        [hasError]=\"formGroup.controls.status.hasError('required')\"\n        [ngClass]=\"{\n          'm-b-8': !formGroup.controls.status.hasError('required')\n        }\"\n      >\n        <ng-container *ngFor=\"let statusOption of statusList\">\n          <label\n            class=\"c8y-checkbox m-t-0 gap-4\"\n            [title]=\"STATUS_LABELS[statusOption] | translate\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"statusOption\"\n              [name]=\"statusOption\"\n            />\n            <span class=\"a-s-center\"></span>\n            <i\n              class=\"a-s-center m-l-4 m-r-4 text-gray-dark c8y-icon icon-20\"\n              [c8yIcon]=\"\n                statusOption === CLEARED_STATUS_VALUE\n                  ? C8Y_ALERT_IDLE_ICON\n                  : statusOption === ACKNOWLEDGE_STATUS_VALUE\n                    ? BELL_SLASH_ICON\n                    : BELL_ICON\n              \"\n            ></i>\n            <span>{{ STATUS_LABELS[statusOption] | translate }}</span>\n          </label>\n        </ng-container>\n        <c8y-messages>\n          <c8y-message *ngIf=\"formGroup.controls.status.hasError('required')\">\n            {{ 'Select at least one status.' | translate }}\n          </c8y-message>\n        </c8y-messages>\n      </c8y-form-group>\n    </fieldset>\n\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Child devices' | translate }}</legend>\n      <c8y-form-group class=\"m-b-8\">\n        <label\n          class=\"c8y-switch\"\n          [title]=\"'Show alarms from child devices' | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            formControlName=\"showAlarmsForChildren\"\n          />\n          <span></span>\n          <span>{{ 'Show alarms' | translate }}</span>\n          <span class=\"sr-only\">{{ 'Show alarms' | translate }}</span>\n        </label>\n      </c8y-form-group>\n    </fieldset>\n\n    <fieldset class=\"c8y-fieldset\">\n      <legend>{{ 'Types' | translate }}</legend>\n      <c8y-form-group\n        class=\"m-b-8\"\n        formArrayName=\"types\"\n      >\n        <div\n          class=\"input-group\"\n          *ngFor=\"let type of types.controls; let i = index\"\n        >\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }\"\n            [formControlName]=\"i\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn btn-dot btn-dot--danger m-l-auto\"\n              [title]=\"'Remove' | translate\"\n              type=\"button\"\n              (click)=\"removeType(i)\"\n              [disabled]=\"types.controls?.length === 1 && !type.value\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n          <div\n            class=\"input-group-btn\"\n            *ngIf=\"i === types.controls.length - 1\"\n          >\n            <button\n              class=\"btn btn-dot btn-dot--primary m-l-auto\"\n              [title]=\"'Add alarm type' | translate\"\n              type=\"button\"\n              (click)=\"addType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n    <fieldset class=\"c8y-fieldset\">\n      <legend class=\"d-flex\">\n        {{ refreshTypeTitle }}\n        <button\n          class=\"btn-help btn-help--sm\"\n          [attr.aria-label]=\"'Help' | translate\"\n          [popover]=\"refreshTypePopoverMessage\"\n          placement=\"top\"\n          triggers=\"focus\"\n          container=\"body\"\n          type=\"button\"\n          [adaptivePosition]=\"true\"\n        ></button>\n      </legend>\n      <c8y-form-group class=\"m-b-8 form-group-sm\">\n        <div class=\"d-flex gap-8 a-i-center\">\n          <ng-template #realtime>\n            <label class=\"c8y-switch\">\n              <input\n                id=\"refreshToggle\"\n                name=\"isAutoRefreshEnabled\"\n                type=\"checkbox\"\n                formControlName=\"isAutoRefreshEnabled\"\n              />\n              <span></span>\n              <span class=\"sr-only\">{{ 'Realtime refresh' | translate }}</span>\n            </label>\n          </ng-template>\n          <div\n            class=\"c8y-select-wrapper\"\n            *ngIf=\"!config.isRealtime; else realtime\"\n          >\n            <select\n              class=\"form-control\"\n              title=\"{{ 'Refresh options`options for refreshing a view`' | translate }}\"\n              [(ngModel)]=\"refreshOption\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (change)=\"updateRefreshOption()\"\n            >\n              <option value=\"none\">\n                {{ 'No automatic refresh' | translate }}\n              </option>\n              <option\n                [title]=\"'Refreshing after the given interval' | translate\"\n                value=\"interval\"\n              >\n                {{ 'Use refresh interval' | translate }}\n              </option>\n              <option\n                [title]=\"'Refreshing after the given interval, synchronized globally' | translate\"\n                value=\"global-interval\"\n              >\n                {{ 'Use global refresh interval' | translate }}\n              </option>\n            </select>\n          </div>\n          <ng-container\n            *ngIf=\"!config.isRealtime && config.refreshOption !== GLOBAL_INTERVAL_OPTION\"\n          >\n            <label\n              class=\"m-b-0\"\n              for=\"refreshInterval\"\n            >\n              {{ 'Interval' | translate }}\n            </label>\n            <div class=\"c8y-select-wrapper\">\n              <select\n                class=\"form-control text-12\"\n                [title]=\"'Refresh interval in seconds' | translate\"\n                id=\"refreshInterval\"\n                formControlName=\"refreshInterval\"\n              >\n                <option\n                  *ngFor=\"let refreshInterval of REFRESH_INTERVAL_IN_MILLISECONDS\"\n                  [ngValue]=\"refreshInterval\"\n                >\n                  {{ '{{ seconds }} s' | translate: { seconds: refreshInterval / 1000 } }}\n                </option>\n              </select>\n            </div>\n          </ng-container>\n        </div>\n      </c8y-form-group>\n    </fieldset>\n  </div>\n</form>\n\n<div class=\"legend form-block m-b-0\">{{ 'Preview`of an alarm list`' | translate }}</div>\n<c8y-alarms-list\n  [alarms]=\"alarms$ | async\"\n  [isInitialLoading]=\"isLoading\"\n  [navigationOptions]=\"{\n    allowNavigationToAlarmsView: false,\n    alwaysNavigateToAllAlarms: false,\n    includeClearedQueryParams: false,\n    queryParamsHandling: 'merge'\n  }\"\n></c8y-alarms-list>\n" }]
+        }], ctorParameters: () => [{ type: AlarmWidgetService }, { type: i2.AlarmService }, { type: i1.AlarmsViewService }, { type: i2$1.AlertService }, { type: i5.NgForm }, { type: i5.FormBuilder }, { type: i6.TranslateService }], propDecorators: { config: [{
                 type: Input
             }] } });
 
 class AlarmWidgetAlarmsReloadComponent {
-    constructor(alarmsViewService, cdRef, translateService) {
+    constructor(alarmsViewService, cdRef, translateService, widgetGlobalAutoRefreshService) {
         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.
          */
         this.onCountdownEnded = new EventEmitter();
-        /**
-         * Emitted to indicate that the new realtime alarm was handled.
-         */
-        this.onResetNewAlarmsState = new EventEmitter();
         /**
          * Emitted to indicate that the widgets realtime button state has changed.
          */
@@ -684,20 +696,25 @@ class AlarmWidgetAlarmsReloadComponent {
         }
     }
     ngAfterViewInit() {
-        if (this.isIntervalRefresh && !!this.refreshInterval) {
+        if (this.isIntervalRefresh && this.refreshInterval) {
             this.startCountdown();
         }
+        if (this.globalAutoRefreshEnabled) {
+            this.widgetGlobalAutoRefreshService.countdownActions.countdownEnded$
+                .pipe(tap(() => this.onCountdownEnded.emit()))
+                .subscribe();
+        }
     }
     ngOnChanges(changes) {
-        const { isDisabled } = changes;
+        const { isDisabled, config } = changes;
+        if (config) {
+            this.globalAutoRefreshEnabled = this.config.refreshOption === GLOBAL_INTERVAL_OPTION;
+        }
         if (isDisabled) {
             this.isIntervalRefreshToggleOn =
                 !this.isDisabled && (this.config.isAutoRefreshEnabled || !!this.refreshInterval);
             this.updateCountdownButtonTooltipText(gettext('Disabled'));
         }
-        if (this.isNewAlarms) {
-            this.isNewAlarmMessageCleared = false;
-        }
         if (!this.isIntervalRefresh ||
             this.manuallyDisabledCountdown ||
             !this.config.isAutoRefreshEnabled) {
@@ -765,7 +782,6 @@ class AlarmWidgetAlarmsReloadComponent {
             this.autoRefreshList();
         }
         else {
-            this.onResetNewAlarmsState.emit(false);
             this.onCountdownEnded.emit();
             this.isNewAlarmMessageCleared = true;
         }
@@ -872,13 +888,13 @@ class AlarmWidgetAlarmsReloadComponent {
             ? this.translateService.instant(gettext('Disable auto refresh'))
             : this.translateService.instant(gettext('Enable auto refresh'));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmWidgetAlarmsReloadComponent, deps: [{ token: i1.AlarmsViewService }, { token: i0.ChangeDetectorRef }, { token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmWidgetAlarmsReloadComponent, selector: "c8y-alarm-widget-alarms-reload", inputs: { isIntervalRefresh: "isIntervalRefresh", refreshInterval: "refreshInterval", config: "config", isLoading: "isLoading", isNewAlarms: "isNewAlarms", isScrolling: "isScrolling", isDisabled: "isDisabled" }, outputs: { onCountdownEnded: "onCountdownEnded", onResetNewAlarmsState: "onResetNewAlarmsState", onRealTimeToggleChanged: "onRealTimeToggleChanged" }, viewQueries: [{ propertyName: "countdownIntervalComponent", first: true, predicate: CountdownIntervalComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"m-l-auto d-flex p-t-4 p-b-4\">\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: i4.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: i4.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: i4.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmWidgetAlarmsReloadComponent, deps: [{ token: i1.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.9", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmWidgetAlarmsReloadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarm-widget-alarms-reload', template: "<div class=\"m-l-auto d-flex p-t-4 p-b-4\">\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" }]
-        }], ctorParameters: () => [{ type: i1.AlarmsViewService }, { type: i0.ChangeDetectorRef }, { type: i6.TranslateService }], propDecorators: { isIntervalRefresh: [{
+            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" }]
+        }], ctorParameters: () => [{ type: i1.AlarmsViewService }, { type: i0.ChangeDetectorRef }, { type: i6.TranslateService }, { type: i2$1.WidgetGlobalAutoRefreshService }], propDecorators: { isIntervalRefresh: [{
                 type: Input
             }], refreshInterval: [{
                 type: Input
@@ -886,16 +902,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: Input
             }], isLoading: [{
                 type: Input
-            }], isNewAlarms: [{
-                type: Input
             }], isScrolling: [{
                 type: Input
             }], isDisabled: [{
                 type: Input
             }], onCountdownEnded: [{
                 type: Output
-            }], onResetNewAlarmsState: [{
-                type: Output
             }], onRealTimeToggleChanged: [{
                 type: Output
             }], countdownIntervalComponent: [{
@@ -907,14 +919,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
  * To ensure backward compatibility, legacy widgets will be converted to the new implementation.
  */
 class AlarmListWidgetComponent {
-    constructor(alarmWidgetService, alarmRealtimeService, alarmService, alarmsViewService, alarmWithChildrenRealtimeService, alertService, dashboardChild) {
+    constructor(alarmWidgetService, alarmRealtimeService, alarmService, alarmsViewService, alarmWithChildrenRealtimeService, dashboardChild, alertService, widgetGlobalAutoRefresh) {
         this.alarmWidgetService = alarmWidgetService;
         this.alarmRealtimeService = alarmRealtimeService;
         this.alarmService = alarmService;
         this.alarmsViewService = alarmsViewService;
         this.alarmWithChildrenRealtimeService = alarmWithChildrenRealtimeService;
-        this.alertService = alertService;
         this.dashboardChild = dashboardChild;
+        this.alertService = alertService;
+        this.widgetGlobalAutoRefresh = widgetGlobalAutoRefresh;
         /**
          * Represents current alarms.
          */
@@ -922,29 +935,35 @@ class AlarmListWidgetComponent {
         /**
          * Current isLoading state. Based on it next countdown cycle is being started.
          */
-        this.isLoading = new BehaviorSubject(true);
-        /**
-         * Indicates if a new realtime alarm appeared.
-         */
-        this.isNewAlarms = false;
+        this.isLoading$ = new BehaviorSubject(true);
+        this.TIMEOUT_ERROR_TEXT = gettext('The request is taking longer than usual. We apologize for the inconvenience.');
+        this.SERVER_ERROR_TEXT = gettext('Server error occurred.');
         this.unsubscribe$ = new Subject();
+        this.destroy$ = new Subject();
         this.isDisabled = false;
         this.isIntervalRefresh = this.alarmsViewService.isIntervalRefresh();
     }
     async ngOnInit() {
+        this.alerts.setAlertGroupDismissStrategy('warning', DismissAlertStrategy.TEMPORARY_OR_PERMANENT);
         if (this.alarmWidgetService.isOldAlarmConfigStructure(this.config)) {
             const mappedConfig = this.alarmWidgetService.mapToNewConfigStructure(this.config, this.isIntervalRefresh);
             Object.assign(this.config, mappedConfig);
         }
-        const isLegacyWidgetWithoutConfiguration = isEmpty(this.dashboardChild['data']?.config);
+        if (this.config.widgetInstanceGlobalAutoRefreshContext && !this.config.isRealtime) {
+            this.handleGlobalRefreshLoading();
+        }
+        const _config = this.dashboardChild['data']?.config;
+        const isLegacyWidgetWithoutConfiguration = isEmpty(_config) || isEqual(_config, { displaySettings: { globalAutoRefreshContext: true } });
         if (isLegacyWidgetWithoutConfiguration) {
             this.setLegacyRecentOrCriticalAlarmWidgetConfig();
         }
         this.updateWidgetRefreshMode();
         this.refreshInterval = !!this.config?.refreshInterval && this.config?.refreshInterval;
         await this.fetchAlarms();
-        if (!this.isIntervalRefresh && this.config.isAutoRefreshEnabled) {
-            this.handleRealtimeAlarms(this.config, true);
+    }
+    ngAfterViewInit() {
+        if (!this.isIntervalRefresh && this.config.refreshOption === 'interval') {
+            this.handleRealtimeAlarms(this.config, this.alarmWidgetAlarmsReloadComp.isRealtimeToggleOn);
         }
     }
     ngOnDestroy() {
@@ -952,13 +971,15 @@ class AlarmListWidgetComponent {
             this.unsubscribe$.next();
             this.unsubscribe$.complete();
         }
+        this.destroy$.next();
+        this.destroy$.complete();
+        if (this.config.widgetInstanceGlobalAutoRefreshContext && this.isLoading$.value) {
+            this.widgetGlobalAutoRefresh.decrementLoading();
+        }
     }
     async fetchAlarms() {
         this.alarms$.next(await this.getAlarms());
     }
-    resetNewAlarmsState() {
-        this.isNewAlarms = false;
-    }
     handleRealTimeToggleChange(isRealtimeToggleOn) {
         if (!isRealtimeToggleOn) {
             this.unsubscribe$.next();
@@ -982,18 +1003,29 @@ class AlarmListWidgetComponent {
         if (this.config.isRealtime) {
             // Switching widget to realtime mode
             this.config.refreshInterval = null;
+            this.config.refreshOption = null;
+            this.config.widgetInstanceGlobalAutoRefreshContext = false;
+            this.config.isAutoRefreshEnabled = true;
         }
         else {
             // Switching widget to interval mode
             this.config.refreshInterval = this.alarmsViewService.DEFAULT_INTERVAL_VALUE;
+            this.config.refreshOption = this.alarmsViewService.DEFAULT_REFRESH_OPTION_VALUE;
+            this.config.widgetInstanceGlobalAutoRefreshContext = false;
         }
     }
     async getAlarms() {
         try {
-            this.isLoading.next(true);
+            this.isLoading$.next(true);
             return await this.alarmService.list(this.alarmWidgetService.mapConfigToQueryFilter(this.config));
         }
         catch (error) {
+            this.alerts.addAlerts(new DynamicComponentAlert({
+                type: 'warning',
+                text: error?.name === 'TimeoutError'
+                    ? this.TIMEOUT_ERROR_TEXT
+                    : error?.message ?? this.SERVER_ERROR_TEXT
+            }));
             if (error?.res?.status === 403) {
                 this.isDisabled = true;
                 return;
@@ -1001,7 +1033,7 @@ class AlarmListWidgetComponent {
             this.alertService.addServerFailure(error);
         }
         finally {
-            this.isLoading.next(false);
+            this.isLoading$.next(false);
         }
     }
     /**
@@ -1013,15 +1045,18 @@ class AlarmListWidgetComponent {
      * to indicate the presence of new alarms.
      *
      * @param config - The configuration settings of the alarm list widget.
+     * @param isRealtimeToggleOn - A flag indicating whether the realtime toggle is on. If true, the alarm list will be refreshed.
+     * If false, the presence of new alarms will be displayed as "New Alarms" entry on widget refresh button, but the list won't be refreshed automatically.
      */
     handleRealtimeAlarms(config, isRealtimeToggleOn) {
         const callback = (data) => {
             if (this.alarmWidgetService.filterAlarmsByStatusSeverityAndType(data, this.alarms$.value.data, config)) {
                 if (isRealtimeToggleOn) {
                     this.fetchAlarms();
+                    this.alarmWidgetAlarmsReloadComp.isNewAlarmMessageCleared = true;
                 }
                 else {
-                    this.isNewAlarms = true;
+                    this.alarmWidgetAlarmsReloadComp.isNewAlarmMessageCleared = false;
                 }
             }
         };
@@ -1061,14 +1096,22 @@ class AlarmListWidgetComponent {
             Object.assign(this.config, predefinedConfig);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListWidgetComponent, deps: [{ token: AlarmWidgetService }, { token: i4.AlarmRealtimeService }, { token: i2.AlarmService }, { token: i1.AlarmsViewService }, { token: i4.AlarmWithChildrenRealtimeService }, { token: i4.AlertService }, { token: i4.DashboardChildComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmListWidgetComponent, selector: "c8y-alarm-list-widget", inputs: { config: "config" }, providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], ngImport: i0, template: "<c8y-alarms-list\n  #list\n  [alarms]=\"alarms$ | async\"\n  [navigationOptions]=\"{\n    allowNavigationToAlarmsView: true,\n    alwaysNavigateToAllAlarms: !config.device,\n    includeClearedQueryParams: true\n  }\"\n  [isInitialLoading]=\"isLoading | async\"\n  [hasPermissions]=\"!isDisabled\"\n>\n  <c8y-alarm-widget-alarms-reload\n    class=\"d-contents\"\n    [isNewAlarms]=\"isNewAlarms\"\n    [isIntervalRefresh]=\"isIntervalRefresh\"\n    [refreshInterval]=\"refreshInterval\"\n    [config]=\"config\"\n    [isLoading]=\"isLoading\"\n    [isScrolling]=\"list.isScrolling\"\n    [isDisabled]=\"isDisabled\"\n    (onCountdownEnded)=\"fetchAlarms()\"\n    (onResetNewAlarmsState)=\"resetNewAlarmsState()\"\n    (onRealTimeToggleChanged)=\"handleRealTimeToggleChange($event)\"\n  ></c8y-alarm-widget-alarms-reload>\n</c8y-alarms-list>\n", dependencies: [{ kind: "component", type: i1.AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: AlarmWidgetAlarmsReloadComponent, selector: "c8y-alarm-widget-alarms-reload", inputs: ["isIntervalRefresh", "refreshInterval", "config", "isLoading", "isNewAlarms", "isScrolling", "isDisabled"], outputs: ["onCountdownEnded", "onResetNewAlarmsState", "onRealTimeToggleChanged"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }] }); }
+    handleGlobalRefreshLoading() {
+        this.isLoading$
+            .pipe(skip(1), globalAutoRefreshLoading(this.widgetGlobalAutoRefresh), takeUntil(this.destroy$))
+            .subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListWidgetComponent, deps: [{ token: AlarmWidgetService }, { token: i2$1.AlarmRealtimeService }, { token: i2.AlarmService }, { token: i1.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.9", type: AlarmListWidgetComponent, selector: "c8y-alarm-list-widget", inputs: { config: "config" }, providers: [AlarmRealtimeService, AlarmWithChildrenRealtimeService], viewQueries: [{ propertyName: "alarmWidgetAlarmsReloadComp", first: true, predicate: AlarmWidgetAlarmsReloadComponent, descendants: 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-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: i1.AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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    allowNavigationToAlarmsView: true,\n    alwaysNavigateToAllAlarms: !config.device,\n    includeClearedQueryParams: true\n  }\"\n  [isInitialLoading]=\"isLoading | async\"\n  [hasPermissions]=\"!isDisabled\"\n>\n  <c8y-alarm-widget-alarms-reload\n    class=\"d-contents\"\n    [isNewAlarms]=\"isNewAlarms\"\n    [isIntervalRefresh]=\"isIntervalRefresh\"\n    [refreshInterval]=\"refreshInterval\"\n    [config]=\"config\"\n    [isLoading]=\"isLoading\"\n    [isScrolling]=\"list.isScrolling\"\n    [isDisabled]=\"isDisabled\"\n    (onCountdownEnded)=\"fetchAlarms()\"\n    (onResetNewAlarmsState)=\"resetNewAlarmsState()\"\n    (onRealTimeToggleChanged)=\"handleRealTimeToggleChange($event)\"\n  ></c8y-alarm-widget-alarms-reload>\n</c8y-alarms-list>\n" }]
-        }], ctorParameters: () => [{ type: AlarmWidgetService }, { type: i4.AlarmRealtimeService }, { type: i2.AlarmService }, { type: i1.AlarmsViewService }, { type: i4.AlarmWithChildrenRealtimeService }, { type: i4.AlertService }, { type: i4.DashboardChildComponent }], propDecorators: { config: [{
+            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-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" }]
+        }], ctorParameters: () => [{ type: AlarmWidgetService }, { type: i2$1.AlarmRealtimeService }, { type: i2.AlarmService }, { type: i1.AlarmsViewService }, { type: i2$1.AlarmWithChildrenRealtimeService }, { type: i2$1.DashboardChildComponent }, { type: i2$1.AlertService }, { type: i2$1.WidgetGlobalAutoRefreshService }], propDecorators: { config: [{
                 type: Input
+            }], alarmWidgetAlarmsReloadComp: [{
+                type: ViewChild,
+                args: [AlarmWidgetAlarmsReloadComponent]
             }] } });
 
 class AlarmsWidgetModule {
@@ -1129,5 +1172,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ALARM_ORDER_LABELS, ALARM_ORDER_VALUES, ASSET_ALARMS_WIDGET_ID, AlarmListWidgetComponent, AlarmListWidgetConfigComponent, AlarmWidgetAlarmsReloadComponent, AlarmWidgetService, AlarmsWidgetModule, DEFAULT_PAGE_SIZE, RECENT_ALARMS_WIDGET_ID, SeverityIconPipe, SortingDescriptionPopoverMessagePipe };
+export { ALARM_ORDER_LABELS, ALARM_ORDER_VALUES, ASSET_ALARMS_WIDGET_ID, AlarmListWidgetComponent, AlarmListWidgetConfigComponent, AlarmWidgetAlarmsReloadComponent, AlarmWidgetService, AlarmsWidgetModule, DEFAULT_PAGE_SIZE, GLOBAL_INTERVAL_OPTION, RECENT_ALARMS_WIDGET_ID, SeverityIconPipe, SortingDescriptionPopoverMessagePipe };
 //# sourceMappingURL=c8y-ngx-components-widgets-implementations-alarms.mjs.map