@c8y/ngx-components 1021.13.3 → 1021.22.0

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

@@ -1,20 +1,20 @@
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, Pipe, Component, Optional, Input, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
+import { Injectable, Pipe, InjectionToken, Component, Optional, Input, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
+import { combineLatest, firstValueFrom, map as map$1, shareReplay, Subject, BehaviorSubject, of, from, forkJoin, EMPTY, Observable, pipe, fromEvent, takeUntil as takeUntil$1 } from 'rxjs';
+import { filter, map, switchMap, startWith, takeUntil, catchError, finalize, tap, debounceTime, distinctUntilChanged, shareReplay as shareReplay$1, throttleTime } from 'rxjs/operators';
+import * as i3 from '@c8y/ngx-components';
+import { Permissions, gettext, ViewContext, CountdownIntervalComponent, DynamicComponentAlertAggregator, DynamicComponentAlert, AlarmWithChildrenRealtimeService, ContextRouteComponent, ContextRouteGuard, RouterTabsResolver, hookNavigator, hookRoute, CommonModule, CoreModule, HeaderModule, DynamicComponentModule, RelativeTimePipe } from '@c8y/ngx-components';
+import { sortBy, cloneDeep } from 'lodash-es';
 import * as i2 from '@c8y/client';
 import { AlarmStatus, Severity, ALARM_STATUS_LABELS, SEVERITY_LABELS } from '@c8y/client';
-import * as i3 from '@c8y/ngx-components';
-import { Permissions, gettext, ViewContext, CountdownIntervalComponent, DynamicComponentAlertAggregator, DynamicComponentAlert, AlarmWithChildrenRealtimeService, hookNavigator, hookRoute, CommonModule, CoreModule, HeaderModule, DynamicComponentModule, RelativeTimePipe } from '@c8y/ngx-components';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { sortBy, cloneDeep } from 'lodash-es';
-import { firstValueFrom, map, shareReplay, Subject, BehaviorSubject, combineLatest, tap, switchMap as switchMap$1, takeUntil, from, forkJoin, EMPTY, Observable, pipe, fromEvent } from 'rxjs';
 import * as i8 from '@c8y/ngx-components/interval-picker';
 import { INTERVAL_TITLES, INTERVALS, IntervalPickerComponent } from '@c8y/ngx-components/interval-picker';
 import * as i7 from '@angular/common';
 import { DatePipe, TitleCasePipe } from '@angular/common';
 import * as i1$1 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
-import { filter, map as map$1, switchMap, startWith, takeUntil as takeUntil$1, catchError, finalize, tap as tap$1, debounceTime, distinctUntilChanged, shareReplay as shareReplay$1, throttleTime } from 'rxjs/operators';
 import * as i1$2 from '@angular/forms';
 import { FormControl } from '@angular/forms';
 import * as i6 from 'ngx-bootstrap/dropdown';
@@ -27,6 +27,63 @@ import * as i2$1 from '@c8y/ngx-components/alarm-event-selector';
 import { AlarmEventSelectorModule } from '@c8y/ngx-components/alarm-event-selector';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 
+/**
+ * A service to retrieve custom buttons for the alarm details view.
+ */
+class AlarmDetailsButtonService {
+    constructor(serviceRegistry, pluginsResolver) {
+        this.serviceRegistry = serviceRegistry;
+        this.pluginsResolver = pluginsResolver;
+    }
+    get$(alarm, source) {
+        const providers$ = this.pluginsResolver.allPluginsLoaded$.pipe(filter(Boolean), map(() => {
+            return this.serviceRegistry.get('alarmDetailsButton');
+        }));
+        return providers$.pipe(switchMap(providers => {
+            const observables$ = providers.map(provider => provider.getAlarmDetailsButton$(alarm, source).pipe(startWith(false)));
+            return combineLatest(observables$);
+        }), map(indicators => {
+            return indicators.filter(Boolean);
+        }), map(indicators => sortBy(indicators, this.byPriority)));
+    }
+    byPriority(item) {
+        if (item.priority === undefined) {
+            return 0;
+        }
+        return -item.priority;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonService, deps: [{ token: i3.ServiceRegistry }, { token: i3.PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i3.ServiceRegistry }, { type: i3.PluginsResolveService }] });
+
+/**
+ * A pipe to provide custom buttons for the alarm details view.
+ *
+ * Will call `get$()` method of `AlarmDetailsButtonService` to get the custom buttons for the provided alarm.
+ */
+class AlarmDetailsButtonPipe {
+    constructor(alarmDetailsButtonService) {
+        this.alarmDetailsButtonService = alarmDetailsButtonService;
+    }
+    transform(alarm, source) {
+        return this.alarmDetailsButtonService.get$(alarm, source);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonPipe, deps: [{ token: AlarmDetailsButtonService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonPipe, isStandalone: true, name: "alarmDetailsButton" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'alarmDetailsButton',
+                    pure: true
+                }]
+        }], ctorParameters: () => [{ type: AlarmDetailsButtonService }] });
+
 class AlarmDetailsService {
     constructor(stateService, permissions) {
         this.stateService = stateService;
@@ -149,7 +206,7 @@ class AlarmDetailsService {
      * @returns A promise that resolves to the requested application or undefined if the application is not found.
      */
     async getApplication(applicationKey) {
-        return await firstValueFrom(this.stateService.currentAppsOfUser.pipe(map(apps => apps.find(app => app.key === applicationKey)), shareReplay(1)));
+        return await firstValueFrom(this.stateService.currentAppsOfUser.pipe(map$1(apps => apps.find(app => app.key === applicationKey)), shareReplay(1)));
     }
     checkIfHasAnyRoleAllowingToCreateSmartRule() {
         const ROLES_ALLOWING_SMART_RULE_CREATION = [
@@ -286,6 +343,7 @@ class AlarmsViewService {
         this.optionsService = optionsService;
         this.ALARM_REFRESH_TYPE_KEY = 'alarmsRefreshType';
         this.DEFAULT_INTERVAL_VALUE = 30_000;
+        this.DEFAULT_REFRESH_OPTION_VALUE = 'interval';
         this.DEFAULT_INTERVAL_VALUES = [5_000, 10_000, 15_000, 30_000, 60_000];
         this.REALTIME_UPDATE_ALARMS_MESSAGE = gettext('The list was updated, click to refresh.');
         this.reloadAlarmsList$ = new Subject();
@@ -507,63 +565,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i2.AlarmService }, { type: i3.OptionsService }] });
 
-/**
- * A service to retrieve custom buttons for the alarm details view.
- */
-class AlarmDetailsButtonService {
-    constructor(serviceRegistry, pluginsResolver) {
-        this.serviceRegistry = serviceRegistry;
-        this.pluginsResolver = pluginsResolver;
-    }
-    get$(alarm, source) {
-        const providers$ = this.pluginsResolver.allPluginsLoaded$.pipe(filter(Boolean), map$1(() => {
-            return this.serviceRegistry.get('alarmDetailsButton');
-        }));
-        return providers$.pipe(switchMap(providers => {
-            const observables$ = providers.map(provider => provider.getAlarmDetailsButton$(alarm, source).pipe(startWith(false)));
-            return combineLatest(observables$);
-        }), map$1(indicators => {
-            return indicators.filter(Boolean);
-        }), map$1(indicators => sortBy(indicators, this.byPriority)));
-    }
-    byPriority(item) {
-        if (item.priority === undefined) {
-            return 0;
-        }
-        return -item.priority;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonService, deps: [{ token: i3.ServiceRegistry }, { token: i3.PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i3.ServiceRegistry }, { type: i3.PluginsResolveService }] });
-
-/**
- * A pipe to provide custom buttons for the alarm details view.
- *
- * Will call `get$()` method of `AlarmDetailsButtonService` to get the custom buttons for the provided alarm.
- */
-class AlarmDetailsButtonPipe {
-    constructor(alarmDetailsButtonService) {
-        this.alarmDetailsButtonService = alarmDetailsButtonService;
-    }
-    transform(alarm, source) {
-        return this.alarmDetailsButtonService.get$(alarm, source);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonPipe, deps: [{ token: AlarmDetailsButtonService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonPipe, isStandalone: true, name: "alarmDetailsButton" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsButtonPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: true,
-                    name: 'alarmDetailsButton',
-                    pure: true
-                }]
-        }], ctorParameters: () => [{ type: AlarmDetailsButtonService }] });
-
 /**
  * Pipe for transforming alarm severity types into corresponding icons.
  *
@@ -702,10 +703,12 @@ class AlarmDetailsComponent {
         this.customFragments = null;
     }
     async ngOnInit() {
+        const isSmartRulesServiceSubscribed = !!(await this.alarmDetailsService.getApplication(this.alarmDetailsService.SMART_RULES_APPLICATION_KEY));
+        const hasAnyRoleAllowingToCreateSmartRule = this.alarmDetailsService.checkIfHasAnyRoleAllowingToCreateSmartRule();
         this.isCreateSmartRulesButtonAvailable =
             !!this.ng1SmartRulesUpgradeService &&
-                this.isSmartRulesServiceSubscribed &&
-                this.hasAnyRoleAllowingToCreateSmartRule;
+                isSmartRulesServiceSubscribed &&
+                hasAnyRoleAllowingToCreateSmartRule;
         this.userDeviceManagementApp = await this.alarmDetailsService.getApplication(this.alarmDetailsService.DEVICE_MANAGEMENT_APPLICATION_KEY);
         this.showSourceNavigationLink =
             !!this.userDeviceManagementApp && !this.isDeviceManagementView();
@@ -980,19 +983,15 @@ class AlarmDetailsComponent {
         return customProperties;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsComponent, deps: [{ token: AlarmDetailsService }, { token: i2.AlarmService }, { token: i3.AlertService }, { token: i3.AppStateService }, { token: i2.AuditService }, { token: i3.RelativeTimePipe }, { token: Ng1SmartRulesUpgradeService, optional: true }, { token: i1.TranslateService }, { token: i2.InventoryService }, { token: AlarmsViewService }, { token: i3.ColorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmDetailsComponent, selector: "c8y-alarm-details", inputs: { selectedAlarm: "selectedAlarm", hasAnyRoleAllowingToCreateSmartRule: "hasAnyRoleAllowingToCreateSmartRule", isSmartRulesServiceSubscribed: "isSmartRulesServiceSubscribed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex row tight-grid flex-wrap a-i-stretch\">\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 c8y-icon\"\n          [c8yIcon]=\"selectedAlarm.status | AlarmStatusToIcon\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Status' | translate }}</p>\n        <p class=\"small\">{{ statusMessage }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          [c8yIcon]=\"selectedAlarm.severity | AlarmSeverityToIcon\"\n          [ngClass]=\"selectedAlarm.severity?.toString() | lowercase\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Severity' | translate }}</p>\n        <p class=\"small\">{{ SEVERITY_LABELS[selectedAlarm.severity] | translate }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          c8yIcon=\"contactless-payment\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Source' | translate }}</p>\n        <p class=\"small\">\n          <button\n            class=\"btn-link text-muted p-0 m-r-8\"\n            title=\"{{ selectedAlarm.source.name }}\"\n            type=\"button\"\n            routerLink=\"{{ selectedAlarmMO | assetLink }}\"\n          >\n            <small class=\"icon-flex\">\n              <i c8yIcon=\"exchange\"></i>\n              {{ selectedAlarm.source.name || selectedAlarm.source.id }}\n            </small>\n          </button>\n          <ng-container *ngIf=\"showSourceNavigationLink\">\n            <button\n              class=\"btn-link p-0\"\n              title=\"{{\n                linkTitle\n                  | translate: { appName: userDeviceManagementApp | humanizeAppName | async }\n              }}\"\n              type=\"button\"\n              (click)=\"goToAlarmSource(selectedAlarm.id)\"\n              data-cy=\"alarm-details-device-management-link\"\n            >\n              {{ userDeviceManagementApp | humanizeAppName | async }}\n              <i c8yIcon=\"external-link\"></i>\n            </button>\n          </ng-container>\n        </p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <span\n          class=\"circle-icon-wrapper\"\n          [ngStyle]=\"{ 'background-color': typeColor }\"\n        >\n          <i\n            class=\"stroked-icon\"\n            c8yIcon=\"bell\"\n          ></i>\n        </span>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8 min-width-0\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Type' | translate }}</p>\n        <p\n          class=\"small text-truncate\"\n          title=\"{{ selectedAlarm.type }}\"\n        >\n          <code>{{ selectedAlarm.type }}</code>\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"col-xs-12 col-md-12 p-b-16\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"calendar\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-0 p-r-8 flex-grow\">\n        <div class=\"content-flex-50\">\n          <div class=\"col-4 p-b-8\">\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last updated' | translate }}</p>\n            <p class=\"small\">\n              {{ lastUpdated | c8yDate: 'medium' }}\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Number of occurrences' | translate }}</p>\n            <p>\n              <span class=\"badge badge-info\">{{ selectedAlarm.count }}</span>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'First occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.creationTime | c8yDate: 'medium' }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"col-xs-12 col-md-12 p-b-16\"\n    *ngIf=\"customFragments\"\n  >\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"outgoing-data\"\n        ></i>\n      </div>\n      <div\n        class=\"p-t-8 p-b-0 p-r-8 flex-grow\"\n        data-cy=\"alarm-details-custom-data\"\n      >\n        <p class=\"text-label-small m-b-4 m-r-8\">{{ 'Custom data' | translate }}</p>\n        <pre><code>{{ customFragments | json }}</code></pre>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"d-flex flex-wrap gap-8\">\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Reload audit logs' | translate\"\n    type=\"submit\"\n    (click)=\"reloadAuditLog(true, true)\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': isLoading }\"\n    ></i>\n    {{ 'Reload audit logs' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    \"\n    type=\"submit\"\n    (click)=\"\n      onUpdateDetails(\n        selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n          ? ACKNOWLEDGED_STATUS_VALUE\n          : ACTIVE_STATUS_VALUE\n      )\n    \"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE || isAlarmStatusChanging\"\n  >\n    <i\n      [c8yIcon]=\"selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE ? BELL_SLASH_ICON : BELL_ICON\"\n    ></i>\n    {{\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Create smart rule' | translate\"\n    type=\"submit\"\n    *ngIf=\"isCreateSmartRulesButtonAvailable\"\n    (click)=\"createSmartRule()\"\n  >\n    <i c8yIcon=\"c8y-icon c8y-icon-smart-rules\"></i>\n    {{ 'Create smart rule' | translate }}\n  </button>\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Clear`alarm`' | translate\"\n    type=\"submit\"\n    (click)=\"onUpdateDetails(CLEARED_STATUS_VALUE)\"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear`alarm`' | translate }}\n  </button>\n\n  <button\n    *ngFor=\"let button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async\"\n    class=\"btn btn-default btn-sm\"\n    [ngClass]=\"button.additionalButtonClasses\"\n    [title]=\"button.title | translate\"\n    type=\"button\"\n    (click)=\"detailsButtonAction(button, selectedAlarm)\"\n    [disabled]=\"button.disabled\"\n  >\n    <i [ngClass]=\"button.additionalIconClasses\" [c8yIcon]=\"button.icon\"></i>\n    <span *ngIf=\"button.label\">{{ button.label | translate }}</span>\n  </button>\n</div>\n\n<ng-template #noAuditLogAvailable>\n  <div class=\"p-16\">\n    <c8y-ui-empty-state\n      [icon]=\"'archive'\"\n      [title]=\"'No audit logs found.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-template>\n\n<div class=\"legend form-block\">{{ 'Audit logs' | translate }}</div>\n\n<ng-container *ngIf=\"isLoading || auditLog?.data.length; else noAuditLogAvailable\">\n  <c8y-loading *ngIf=\"isLoading\"></c8y-loading>\n\n  <c8y-list-group\n    data-cy=\"c8y-alarms-details--audit-logs\"\n    *ngIf=\"!isLoading\"\n  >\n    <c8y-li-timeline *c8yFor=\"let log of auditLog; loadMore: 'hidden'\">\n      {{ log.creationTime | date: 'mediumDate' }}\n      {{ log.creationTime | date: 'mediumTime' }}\n      <c8y-li>\n        <c8y-li-body>\n          <p class=\"text-truncate-wrap separator-bottom p-b-4\">\n            {{ log | auditChangesMessage }}\n          </p>\n          <div class=\"c8y-list__item__footer\">\n            <span\n              class=\"m-r-16 small\"\n              *ngIf=\"log.user\"\n            >\n              <span class=\"text-label-small\">\n                {{ 'by`user`' | translate }}\n              </span>\n              {{ log.user }}\n            </span>\n            <span class=\"small\">\n              <span class=\"text-label-small\">\n                {{ 'device time' | translate }}\n              </span>\n              {{ log.time | c8yDate: 'medium' }}\n            </span>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n  </c8y-list-group>\n</ng-container>\n", dependencies: [{ kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.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: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i3.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i7.JsonPipe, name: "json" }, { kind: "pipe", type: i7.DatePipe, name: "date" }, { kind: "pipe", type: i3.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }, { kind: "pipe", type: i3.AssetLinkPipe, name: "assetLink" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AlarmDetailsButtonPipe, name: "alarmDetailsButton" }, { kind: "pipe", type: AlarmSeverityToIconPipe, name: "AlarmSeverityToIcon" }, { kind: "pipe", type: AlarmStatusToIconPipe, name: "AlarmStatusToIcon" }, { kind: "pipe", type: AuditChangesMessagePipe, name: "auditChangesMessage" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmDetailsComponent, selector: "c8y-alarm-details", inputs: { selectedAlarm: "selectedAlarm" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex row tight-grid flex-wrap a-i-stretch\">\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 c8y-icon\"\n          [c8yIcon]=\"selectedAlarm.status | AlarmStatusToIcon\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Status' | translate }}</p>\n        <p class=\"small\">{{ statusMessage }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          [c8yIcon]=\"selectedAlarm.severity | AlarmSeverityToIcon\"\n          [ngClass]=\"selectedAlarm.severity?.toString() | lowercase\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Severity' | translate }}</p>\n        <p class=\"small\">{{ SEVERITY_LABELS[selectedAlarm.severity] | translate }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          c8yIcon=\"contactless-payment\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Source' | translate }}</p>\n        <p class=\"small\">\n          <button\n            class=\"btn-link text-muted p-0 m-r-8 text-left\"\n            title=\"{{ selectedAlarm.source.name }}\"\n            type=\"button\"\n            routerLink=\"{{ selectedAlarmMO | assetLink }}\"\n          >\n            <small class=\"icon-flex\">\n              <i c8yIcon=\"exchange\"></i>\n              {{ selectedAlarm.source.name || selectedAlarm.source.id }}\n            </small>\n          </button>\n          <ng-container *ngIf=\"showSourceNavigationLink\">\n            <button\n              class=\"btn-link p-0 text-left\"\n              title=\"{{\n                linkTitle\n                  | translate: { appName: userDeviceManagementApp | humanizeAppName | async }\n              }}\"\n              type=\"button\"\n              (click)=\"goToAlarmSource(selectedAlarm.id)\"\n              data-cy=\"alarm-details-device-management-link\"\n            >\n              {{ userDeviceManagementApp | humanizeAppName | async }}\n              <i c8yIcon=\"external-link\"></i>\n            </button>\n          </ng-container>\n        </p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <span\n          class=\"circle-icon-wrapper\"\n          [ngStyle]=\"{ 'background-color': typeColor }\"\n        >\n          <i\n            class=\"stroked-icon\"\n            c8yIcon=\"bell\"\n          ></i>\n        </span>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8 min-width-0\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Type' | translate }}</p>\n        <p\n          class=\"small text-truncate\"\n          title=\"{{ selectedAlarm.type }}\"\n        >\n          <code>{{ selectedAlarm.type }}</code>\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"col-xs-12 col-md-12 p-b-16\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"calendar\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-0 p-r-8 flex-grow\">\n        <div class=\"content-flex-50\">\n          <div class=\"col-4 p-b-8\">\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last updated' | translate }}</p>\n            <p class=\"small\">\n              {{ lastUpdated | c8yDate: 'medium' }}\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Number of occurrences' | translate }}</p>\n            <p>\n              <span class=\"badge badge-info\">{{ selectedAlarm.count }}</span>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'First occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.creationTime | c8yDate: 'medium' }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"col-xs-12 col-md-12 p-b-16\"\n    *ngIf=\"customFragments\"\n  >\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"outgoing-data\"\n        ></i>\n      </div>\n      <div\n        class=\"p-t-8 p-b-0 p-r-8 flex-grow\"\n        data-cy=\"alarm-details-custom-data\"\n      >\n        <p class=\"text-label-small m-b-4 m-r-8\">{{ 'Custom data' | translate }}</p>\n        <pre><code>{{ customFragments | json }}</code></pre>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"d-flex flex-wrap gap-8\">\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Reload audit logs' | translate\"\n    type=\"submit\"\n    (click)=\"reloadAuditLog(true, true)\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': isLoading }\"\n    ></i>\n    {{ 'Reload audit logs' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    \"\n    type=\"submit\"\n    (click)=\"\n      onUpdateDetails(\n        selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n          ? ACKNOWLEDGED_STATUS_VALUE\n          : ACTIVE_STATUS_VALUE\n      )\n    \"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE || isAlarmStatusChanging\"\n  >\n    <i\n      [c8yIcon]=\"selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE ? BELL_SLASH_ICON : BELL_ICON\"\n    ></i>\n    {{\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Create smart rule' | translate\"\n    type=\"submit\"\n    *ngIf=\"isCreateSmartRulesButtonAvailable\"\n    (click)=\"createSmartRule()\"\n  >\n    <i c8yIcon=\"c8y-icon c8y-icon-smart-rules\"></i>\n    {{ 'Create smart rule' | translate }}\n  </button>\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Clear`alarm`' | translate\"\n    type=\"submit\"\n    (click)=\"onUpdateDetails(CLEARED_STATUS_VALUE)\"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear`alarm`' | translate }}\n  </button>\n\n  <button\n    *ngFor=\"let button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async\"\n    class=\"btn btn-default btn-sm\"\n    [ngClass]=\"button.additionalButtonClasses\"\n    [title]=\"button.title | translate\"\n    type=\"button\"\n    (click)=\"detailsButtonAction(button, selectedAlarm)\"\n    [disabled]=\"button.disabled\"\n  >\n    <i [ngClass]=\"button.additionalIconClasses\" [c8yIcon]=\"button.icon\"></i>\n    <span *ngIf=\"button.label\">{{ button.label | translate }}</span>\n  </button>\n</div>\n\n<ng-template #noAuditLogAvailable>\n  <div class=\"p-16\">\n    <c8y-ui-empty-state\n      [icon]=\"'archive'\"\n      [title]=\"'No audit logs found.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-template>\n\n<div class=\"legend form-block\">{{ 'Audit logs' | translate }}</div>\n\n<ng-container *ngIf=\"isLoading || auditLog?.data.length; else noAuditLogAvailable\">\n  <c8y-loading *ngIf=\"isLoading\"></c8y-loading>\n\n  <c8y-list-group\n    data-cy=\"c8y-alarms-details--audit-logs\"\n    *ngIf=\"!isLoading\"\n  >\n    <c8y-li-timeline *c8yFor=\"let log of auditLog; loadMore: 'hidden'\">\n      {{ log.creationTime | date: 'mediumDate' }}\n      {{ log.creationTime | date: 'mediumTime' }}\n      <c8y-li>\n        <c8y-li-body>\n          <p class=\"text-truncate-wrap separator-bottom p-b-4\">\n            {{ log | auditChangesMessage }}\n          </p>\n          <div class=\"c8y-list__item__footer\">\n            <span\n              class=\"m-r-16 small\"\n              *ngIf=\"log.user\"\n            >\n              <span class=\"text-label-small\">\n                {{ 'by`user`' | translate }}\n              </span>\n              {{ log.user }}\n            </span>\n            <span class=\"small\">\n              <span class=\"text-label-small\">\n                {{ 'device time' | translate }}\n              </span>\n              {{ log.time | c8yDate: 'medium' }}\n            </span>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n  </c8y-list-group>\n</ng-container>\n", dependencies: [{ kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.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: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i3.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i7.JsonPipe, name: "json" }, { kind: "pipe", type: i7.DatePipe, name: "date" }, { kind: "pipe", type: i3.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }, { kind: "pipe", type: i3.AssetLinkPipe, name: "assetLink" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AlarmDetailsButtonPipe, name: "alarmDetailsButton" }, { kind: "pipe", type: AlarmSeverityToIconPipe, name: "AlarmSeverityToIcon" }, { kind: "pipe", type: AlarmStatusToIconPipe, name: "AlarmStatusToIcon" }, { kind: "pipe", type: AuditChangesMessagePipe, name: "auditChangesMessage" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarm-details', template: "<div class=\"d-flex row tight-grid flex-wrap a-i-stretch\">\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 c8y-icon\"\n          [c8yIcon]=\"selectedAlarm.status | AlarmStatusToIcon\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Status' | translate }}</p>\n        <p class=\"small\">{{ statusMessage }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          [c8yIcon]=\"selectedAlarm.severity | AlarmSeverityToIcon\"\n          [ngClass]=\"selectedAlarm.severity?.toString() | lowercase\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Severity' | translate }}</p>\n        <p class=\"small\">{{ SEVERITY_LABELS[selectedAlarm.severity] | translate }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          c8yIcon=\"contactless-payment\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Source' | translate }}</p>\n        <p class=\"small\">\n          <button\n            class=\"btn-link text-muted p-0 m-r-8\"\n            title=\"{{ selectedAlarm.source.name }}\"\n            type=\"button\"\n            routerLink=\"{{ selectedAlarmMO | assetLink }}\"\n          >\n            <small class=\"icon-flex\">\n              <i c8yIcon=\"exchange\"></i>\n              {{ selectedAlarm.source.name || selectedAlarm.source.id }}\n            </small>\n          </button>\n          <ng-container *ngIf=\"showSourceNavigationLink\">\n            <button\n              class=\"btn-link p-0\"\n              title=\"{{\n                linkTitle\n                  | translate: { appName: userDeviceManagementApp | humanizeAppName | async }\n              }}\"\n              type=\"button\"\n              (click)=\"goToAlarmSource(selectedAlarm.id)\"\n              data-cy=\"alarm-details-device-management-link\"\n            >\n              {{ userDeviceManagementApp | humanizeAppName | async }}\n              <i c8yIcon=\"external-link\"></i>\n            </button>\n          </ng-container>\n        </p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <span\n          class=\"circle-icon-wrapper\"\n          [ngStyle]=\"{ 'background-color': typeColor }\"\n        >\n          <i\n            class=\"stroked-icon\"\n            c8yIcon=\"bell\"\n          ></i>\n        </span>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8 min-width-0\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Type' | translate }}</p>\n        <p\n          class=\"small text-truncate\"\n          title=\"{{ selectedAlarm.type }}\"\n        >\n          <code>{{ selectedAlarm.type }}</code>\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"col-xs-12 col-md-12 p-b-16\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"calendar\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-0 p-r-8 flex-grow\">\n        <div class=\"content-flex-50\">\n          <div class=\"col-4 p-b-8\">\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last updated' | translate }}</p>\n            <p class=\"small\">\n              {{ lastUpdated | c8yDate: 'medium' }}\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Number of occurrences' | translate }}</p>\n            <p>\n              <span class=\"badge badge-info\">{{ selectedAlarm.count }}</span>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'First occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.creationTime | c8yDate: 'medium' }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"col-xs-12 col-md-12 p-b-16\"\n    *ngIf=\"customFragments\"\n  >\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"outgoing-data\"\n        ></i>\n      </div>\n      <div\n        class=\"p-t-8 p-b-0 p-r-8 flex-grow\"\n        data-cy=\"alarm-details-custom-data\"\n      >\n        <p class=\"text-label-small m-b-4 m-r-8\">{{ 'Custom data' | translate }}</p>\n        <pre><code>{{ customFragments | json }}</code></pre>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"d-flex flex-wrap gap-8\">\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Reload audit logs' | translate\"\n    type=\"submit\"\n    (click)=\"reloadAuditLog(true, true)\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': isLoading }\"\n    ></i>\n    {{ 'Reload audit logs' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    \"\n    type=\"submit\"\n    (click)=\"\n      onUpdateDetails(\n        selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n          ? ACKNOWLEDGED_STATUS_VALUE\n          : ACTIVE_STATUS_VALUE\n      )\n    \"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE || isAlarmStatusChanging\"\n  >\n    <i\n      [c8yIcon]=\"selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE ? BELL_SLASH_ICON : BELL_ICON\"\n    ></i>\n    {{\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Create smart rule' | translate\"\n    type=\"submit\"\n    *ngIf=\"isCreateSmartRulesButtonAvailable\"\n    (click)=\"createSmartRule()\"\n  >\n    <i c8yIcon=\"c8y-icon c8y-icon-smart-rules\"></i>\n    {{ 'Create smart rule' | translate }}\n  </button>\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Clear`alarm`' | translate\"\n    type=\"submit\"\n    (click)=\"onUpdateDetails(CLEARED_STATUS_VALUE)\"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear`alarm`' | translate }}\n  </button>\n\n  <button\n    *ngFor=\"let button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async\"\n    class=\"btn btn-default btn-sm\"\n    [ngClass]=\"button.additionalButtonClasses\"\n    [title]=\"button.title | translate\"\n    type=\"button\"\n    (click)=\"detailsButtonAction(button, selectedAlarm)\"\n    [disabled]=\"button.disabled\"\n  >\n    <i [ngClass]=\"button.additionalIconClasses\" [c8yIcon]=\"button.icon\"></i>\n    <span *ngIf=\"button.label\">{{ button.label | translate }}</span>\n  </button>\n</div>\n\n<ng-template #noAuditLogAvailable>\n  <div class=\"p-16\">\n    <c8y-ui-empty-state\n      [icon]=\"'archive'\"\n      [title]=\"'No audit logs found.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-template>\n\n<div class=\"legend form-block\">{{ 'Audit logs' | translate }}</div>\n\n<ng-container *ngIf=\"isLoading || auditLog?.data.length; else noAuditLogAvailable\">\n  <c8y-loading *ngIf=\"isLoading\"></c8y-loading>\n\n  <c8y-list-group\n    data-cy=\"c8y-alarms-details--audit-logs\"\n    *ngIf=\"!isLoading\"\n  >\n    <c8y-li-timeline *c8yFor=\"let log of auditLog; loadMore: 'hidden'\">\n      {{ log.creationTime | date: 'mediumDate' }}\n      {{ log.creationTime | date: 'mediumTime' }}\n      <c8y-li>\n        <c8y-li-body>\n          <p class=\"text-truncate-wrap separator-bottom p-b-4\">\n            {{ log | auditChangesMessage }}\n          </p>\n          <div class=\"c8y-list__item__footer\">\n            <span\n              class=\"m-r-16 small\"\n              *ngIf=\"log.user\"\n            >\n              <span class=\"text-label-small\">\n                {{ 'by`user`' | translate }}\n              </span>\n              {{ log.user }}\n            </span>\n            <span class=\"small\">\n              <span class=\"text-label-small\">\n                {{ 'device time' | translate }}\n              </span>\n              {{ log.time | c8yDate: 'medium' }}\n            </span>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n  </c8y-list-group>\n</ng-container>\n" }]
+            args: [{ selector: 'c8y-alarm-details', template: "<div class=\"d-flex row tight-grid flex-wrap a-i-stretch\">\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 c8y-icon\"\n          [c8yIcon]=\"selectedAlarm.status | AlarmStatusToIcon\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Status' | translate }}</p>\n        <p class=\"small\">{{ statusMessage }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          [c8yIcon]=\"selectedAlarm.severity | AlarmSeverityToIcon\"\n          [ngClass]=\"selectedAlarm.severity?.toString() | lowercase\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Severity' | translate }}</p>\n        <p class=\"small\">{{ SEVERITY_LABELS[selectedAlarm.severity] | translate }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          c8yIcon=\"contactless-payment\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Source' | translate }}</p>\n        <p class=\"small\">\n          <button\n            class=\"btn-link text-muted p-0 m-r-8 text-left\"\n            title=\"{{ selectedAlarm.source.name }}\"\n            type=\"button\"\n            routerLink=\"{{ selectedAlarmMO | assetLink }}\"\n          >\n            <small class=\"icon-flex\">\n              <i c8yIcon=\"exchange\"></i>\n              {{ selectedAlarm.source.name || selectedAlarm.source.id }}\n            </small>\n          </button>\n          <ng-container *ngIf=\"showSourceNavigationLink\">\n            <button\n              class=\"btn-link p-0 text-left\"\n              title=\"{{\n                linkTitle\n                  | translate: { appName: userDeviceManagementApp | humanizeAppName | async }\n              }}\"\n              type=\"button\"\n              (click)=\"goToAlarmSource(selectedAlarm.id)\"\n              data-cy=\"alarm-details-device-management-link\"\n            >\n              {{ userDeviceManagementApp | humanizeAppName | async }}\n              <i c8yIcon=\"external-link\"></i>\n            </button>\n          </ng-container>\n        </p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <span\n          class=\"circle-icon-wrapper\"\n          [ngStyle]=\"{ 'background-color': typeColor }\"\n        >\n          <i\n            class=\"stroked-icon\"\n            c8yIcon=\"bell\"\n          ></i>\n        </span>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8 min-width-0\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Type' | translate }}</p>\n        <p\n          class=\"small text-truncate\"\n          title=\"{{ selectedAlarm.type }}\"\n        >\n          <code>{{ selectedAlarm.type }}</code>\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"col-xs-12 col-md-12 p-b-16\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"calendar\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-0 p-r-8 flex-grow\">\n        <div class=\"content-flex-50\">\n          <div class=\"col-4 p-b-8\">\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last updated' | translate }}</p>\n            <p class=\"small\">\n              {{ lastUpdated | c8yDate: 'medium' }}\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Number of occurrences' | translate }}</p>\n            <p>\n              <span class=\"badge badge-info\">{{ selectedAlarm.count }}</span>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'First occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.creationTime | c8yDate: 'medium' }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"col-xs-12 col-md-12 p-b-16\"\n    *ngIf=\"customFragments\"\n  >\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"outgoing-data\"\n        ></i>\n      </div>\n      <div\n        class=\"p-t-8 p-b-0 p-r-8 flex-grow\"\n        data-cy=\"alarm-details-custom-data\"\n      >\n        <p class=\"text-label-small m-b-4 m-r-8\">{{ 'Custom data' | translate }}</p>\n        <pre><code>{{ customFragments | json }}</code></pre>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"d-flex flex-wrap gap-8\">\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Reload audit logs' | translate\"\n    type=\"submit\"\n    (click)=\"reloadAuditLog(true, true)\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': isLoading }\"\n    ></i>\n    {{ 'Reload audit logs' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    \"\n    type=\"submit\"\n    (click)=\"\n      onUpdateDetails(\n        selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n          ? ACKNOWLEDGED_STATUS_VALUE\n          : ACTIVE_STATUS_VALUE\n      )\n    \"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE || isAlarmStatusChanging\"\n  >\n    <i\n      [c8yIcon]=\"selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE ? BELL_SLASH_ICON : BELL_ICON\"\n    ></i>\n    {{\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Create smart rule' | translate\"\n    type=\"submit\"\n    *ngIf=\"isCreateSmartRulesButtonAvailable\"\n    (click)=\"createSmartRule()\"\n  >\n    <i c8yIcon=\"c8y-icon c8y-icon-smart-rules\"></i>\n    {{ 'Create smart rule' | translate }}\n  </button>\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Clear`alarm`' | translate\"\n    type=\"submit\"\n    (click)=\"onUpdateDetails(CLEARED_STATUS_VALUE)\"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear`alarm`' | translate }}\n  </button>\n\n  <button\n    *ngFor=\"let button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async\"\n    class=\"btn btn-default btn-sm\"\n    [ngClass]=\"button.additionalButtonClasses\"\n    [title]=\"button.title | translate\"\n    type=\"button\"\n    (click)=\"detailsButtonAction(button, selectedAlarm)\"\n    [disabled]=\"button.disabled\"\n  >\n    <i [ngClass]=\"button.additionalIconClasses\" [c8yIcon]=\"button.icon\"></i>\n    <span *ngIf=\"button.label\">{{ button.label | translate }}</span>\n  </button>\n</div>\n\n<ng-template #noAuditLogAvailable>\n  <div class=\"p-16\">\n    <c8y-ui-empty-state\n      [icon]=\"'archive'\"\n      [title]=\"'No audit logs found.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-template>\n\n<div class=\"legend form-block\">{{ 'Audit logs' | translate }}</div>\n\n<ng-container *ngIf=\"isLoading || auditLog?.data.length; else noAuditLogAvailable\">\n  <c8y-loading *ngIf=\"isLoading\"></c8y-loading>\n\n  <c8y-list-group\n    data-cy=\"c8y-alarms-details--audit-logs\"\n    *ngIf=\"!isLoading\"\n  >\n    <c8y-li-timeline *c8yFor=\"let log of auditLog; loadMore: 'hidden'\">\n      {{ log.creationTime | date: 'mediumDate' }}\n      {{ log.creationTime | date: 'mediumTime' }}\n      <c8y-li>\n        <c8y-li-body>\n          <p class=\"text-truncate-wrap separator-bottom p-b-4\">\n            {{ log | auditChangesMessage }}\n          </p>\n          <div class=\"c8y-list__item__footer\">\n            <span\n              class=\"m-r-16 small\"\n              *ngIf=\"log.user\"\n            >\n              <span class=\"text-label-small\">\n                {{ 'by`user`' | translate }}\n              </span>\n              {{ log.user }}\n            </span>\n            <span class=\"small\">\n              <span class=\"text-label-small\">\n                {{ 'device time' | translate }}\n              </span>\n              {{ log.time | c8yDate: 'medium' }}\n            </span>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n  </c8y-list-group>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: AlarmDetailsService }, { type: i2.AlarmService }, { type: i3.AlertService }, { type: i3.AppStateService }, { type: i2.AuditService }, { type: i3.RelativeTimePipe }, { type: Ng1SmartRulesUpgradeService, decorators: [{
                     type: Optional
                 }] }, { type: i1.TranslateService }, { type: i2.InventoryService }, { type: AlarmsViewService }, { type: i3.ColorService }], propDecorators: { selectedAlarm: [{
                 type: Input
-            }], hasAnyRoleAllowingToCreateSmartRule: [{
-                type: Input
-            }], isSmartRulesServiceSubscribed: [{
-                type: Input
             }] } });
 
 class AlarmEmptyComponent {
@@ -1005,40 +1004,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
         }] });
 
 class AlarmInfoComponent {
-    constructor(alarmDetailsService, activatedRoute, alarmsService, router, contextRouteService, alarmsViewService) {
-        this.alarmDetailsService = alarmDetailsService;
+    constructor(activatedRoute, router, contextRouteService, alarmsViewService) {
         this.activatedRoute = activatedRoute;
-        this.alarmsService = alarmsService;
         this.router = router;
         this.contextRouteService = contextRouteService;
         this.alarmsViewService = alarmsViewService;
-        this.destroy$ = new Subject();
-    }
-    ngOnInit() {
-        this.selectedAlarm$ = this.activatedRoute.params.pipe(tap(() => (this.isLoading = true)), switchMap$1(params => this.alarmsService.detail(params.id)), map(alarmResult => alarmResult.data), tap(() => this.loadingDone()), shareReplay(), takeUntil(this.destroy$));
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+        this.isContextRoute = false;
+        this.TITLE = gettext('Alarms');
     }
-    async loadingDone() {
-        this.isSmartRulesServiceSubscribed = !!(await this.alarmDetailsService.getApplication(this.alarmDetailsService.SMART_RULES_APPLICATION_KEY));
-        this.hasAnyRoleAllowingToCreateSmartRule =
-            this.alarmDetailsService.checkIfHasAnyRoleAllowingToCreateSmartRule();
-        this.isLoading = false;
+    async ngOnInit() {
+        const contextData = this.contextRouteService.getContextData(this.activatedRoute);
+        this.selectedAlarm$ = of(contextData.contextData);
+        this.isContextRoute = this.contextRouteService.isContextRoute(this.router.url, [
+            ViewContext.Device,
+            ViewContext.Group
+        ]);
     }
     back() {
         const contextData = this.contextRouteService.getContextData(this.activatedRoute);
         const backLink = this.alarmsViewService.getRouterNavigationArray(contextData);
         this.router.navigate(backLink, { queryParamsHandling: 'preserve' });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmInfoComponent, deps: [{ token: AlarmDetailsService }, { token: i1$1.ActivatedRoute }, { token: i2.AlarmService }, { token: i1$1.Router }, { token: i3.ContextRouteService }, { token: AlarmsViewService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmInfoComponent, selector: "c8y-alarm-info", ngImport: i0, template: "<div\n  class=\"inner-scroll split-view__detail split-view__detail--selected\"\n  *ngIf=\"selectedAlarm$ | async\"\n>\n  <div\n    class=\"card-header gap-16 d-block-xs d-block-sm p-l-24 p-r-24 p-t-16 separator sticky-top bg-component\"\n  >\n    <button\n      class=\"btn btn-clean text-primary visible-sm visible-xs\"\n      [title]=\"'Back' | translate\"\n      (click)=\"back()\"\n    >\n      <i c8yIcon=\"chevron-left\"></i>\n      <span>{{ 'Back' | translate }}</span>\n    </button>\n\n    <div class=\"flex-no-shrink a-s-start\"></div>\n    <div class=\"flex-grow d-col\">\n      <div class=\"text-break-word flex-grow text-16\">\n        {{ (selectedAlarm$ | async)?.text | translate }}\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"card-block overflow-visible p-l-24 p-r-24\"\n    *ngIf=\"!isLoading; else loading\"\n  >\n    <c8y-alarm-details\n      [isSmartRulesServiceSubscribed]=\"isSmartRulesServiceSubscribed\"\n      [hasAnyRoleAllowingToCreateSmartRule]=\"hasAnyRoleAllowingToCreateSmartRule\"\n      [selectedAlarm]=\"selectedAlarm$ | async\"\n    ></c8y-alarm-details>\n  </div>\n  <ng-template #loading>\n    <div class=\"d-flex d-col a-i-center j-c-center fit-h\">\n      <c8y-loading></c8y-loading>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: AlarmDetailsComponent, selector: "c8y-alarm-details", inputs: ["selectedAlarm", "hasAnyRoleAllowingToCreateSmartRule", "isSmartRulesServiceSubscribed"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmInfoComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i3.ContextRouteService }, { token: AlarmsViewService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmInfoComponent, selector: "c8y-alarm-info", ngImport: i0, template: "<ng-container *ngIf=\"!isContextRoute\">\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n</ng-container>\n\n<div\n  class=\"inner-scroll split-view__detail split-view__detail--selected\"\n  *ngIf=\"selectedAlarm$ | async\"\n>\n  <div class=\"sticky-top bg-component\">\n    <div class=\"card-header gap-16 d-block-xs d-block-sm p-l-24 p-r-24 p-t-16 separator\">\n      <button\n        class=\"btn btn-clean text-primary visible-sm visible-xs\"\n        [title]=\"'Back' | translate\"\n        (click)=\"back()\"\n      >\n        <i c8yIcon=\"chevron-left\"></i>\n        <span>{{ 'Back' | translate }}</span>\n      </button>\n\n      <div class=\"flex-no-shrink a-s-start\"></div>\n      <div class=\"flex-grow d-col\">\n        <div\n          class=\"text-break-word flex-grow text-16\"\n          data-cy=\"c8y-alarms-info--title\"\n        >\n          {{ (selectedAlarm$ | async)?.text | translate }}\n        </div>\n      </div>\n      <div class=\"p-relative\">\n        <c8y-tabs-outlet\n          outletName=\"alarms\"\n          orientation=\"horizontal\"\n        ></c8y-tabs-outlet>\n      </div>\n    </div>\n    <div class=\"card-block overflow-visible p-l-24 p-r-24\">\n      <c8y-alarm-details [selectedAlarm]=\"selectedAlarm$ | async\"></c8y-alarm-details>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3.TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "hasHeader"] }, { kind: "component", type: AlarmDetailsComponent, selector: "c8y-alarm-details", inputs: ["selectedAlarm"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarm-info', template: "<div\n  class=\"inner-scroll split-view__detail split-view__detail--selected\"\n  *ngIf=\"selectedAlarm$ | async\"\n>\n  <div\n    class=\"card-header gap-16 d-block-xs d-block-sm p-l-24 p-r-24 p-t-16 separator sticky-top bg-component\"\n  >\n    <button\n      class=\"btn btn-clean text-primary visible-sm visible-xs\"\n      [title]=\"'Back' | translate\"\n      (click)=\"back()\"\n    >\n      <i c8yIcon=\"chevron-left\"></i>\n      <span>{{ 'Back' | translate }}</span>\n    </button>\n\n    <div class=\"flex-no-shrink a-s-start\"></div>\n    <div class=\"flex-grow d-col\">\n      <div class=\"text-break-word flex-grow text-16\">\n        {{ (selectedAlarm$ | async)?.text | translate }}\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"card-block overflow-visible p-l-24 p-r-24\"\n    *ngIf=\"!isLoading; else loading\"\n  >\n    <c8y-alarm-details\n      [isSmartRulesServiceSubscribed]=\"isSmartRulesServiceSubscribed\"\n      [hasAnyRoleAllowingToCreateSmartRule]=\"hasAnyRoleAllowingToCreateSmartRule\"\n      [selectedAlarm]=\"selectedAlarm$ | async\"\n    ></c8y-alarm-details>\n  </div>\n  <ng-template #loading>\n    <div class=\"d-flex d-col a-i-center j-c-center fit-h\">\n      <c8y-loading></c8y-loading>\n    </div>\n  </ng-template>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: AlarmDetailsService }, { type: i1$1.ActivatedRoute }, { type: i2.AlarmService }, { type: i1$1.Router }, { type: i3.ContextRouteService }, { type: AlarmsViewService }] });
+            args: [{ selector: 'c8y-alarm-info', template: "<ng-container *ngIf=\"!isContextRoute\">\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n</ng-container>\n\n<div\n  class=\"inner-scroll split-view__detail split-view__detail--selected\"\n  *ngIf=\"selectedAlarm$ | async\"\n>\n  <div class=\"sticky-top bg-component\">\n    <div class=\"card-header gap-16 d-block-xs d-block-sm p-l-24 p-r-24 p-t-16 separator\">\n      <button\n        class=\"btn btn-clean text-primary visible-sm visible-xs\"\n        [title]=\"'Back' | translate\"\n        (click)=\"back()\"\n      >\n        <i c8yIcon=\"chevron-left\"></i>\n        <span>{{ 'Back' | translate }}</span>\n      </button>\n\n      <div class=\"flex-no-shrink a-s-start\"></div>\n      <div class=\"flex-grow d-col\">\n        <div\n          class=\"text-break-word flex-grow text-16\"\n          data-cy=\"c8y-alarms-info--title\"\n        >\n          {{ (selectedAlarm$ | async)?.text | translate }}\n        </div>\n      </div>\n      <div class=\"p-relative\">\n        <c8y-tabs-outlet\n          outletName=\"alarms\"\n          orientation=\"horizontal\"\n        ></c8y-tabs-outlet>\n      </div>\n    </div>\n    <div class=\"card-block overflow-visible p-l-24 p-r-24\">\n      <c8y-alarm-details [selectedAlarm]=\"selectedAlarm$ | async\"></c8y-alarm-details>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i3.ContextRouteService }, { type: AlarmsViewService }] });
+
+/**
+ * A service to retrieve custom indicators for the alarm list view.
+ */
+class AlarmListIndicatorService {
+    constructor(serviceRegistry, pluginsResolver) {
+        this.serviceRegistry = serviceRegistry;
+        this.pluginsResolver = pluginsResolver;
+    }
+    get$(alarm) {
+        const providers$ = this.pluginsResolver.allPluginsLoaded$.pipe(filter(Boolean), map(() => {
+            return this.serviceRegistry.get('alarmListIndicator');
+        }));
+        return providers$.pipe(switchMap(providers => {
+            const observables$ = providers.map(provider => provider.getAlarmListIndicator$(alarm).pipe(startWith(false)));
+            return combineLatest(observables$);
+        }), map(indicators => {
+            return indicators.filter(Boolean);
+        }), map(indicators => sortBy(indicators, this.byPriority)));
+    }
+    byPriority(item) {
+        if (item.priority === undefined) {
+            return 0;
+        }
+        return -item.priority;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorService, deps: [{ token: i3.ServiceRegistry }, { token: i3.PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i3.ServiceRegistry }, { type: i3.PluginsResolveService }] });
+
+/**
+ * A pipe to provide custom indicators for the alarm list view.
+ *
+ * Will call `get$()` method of `AlarmListIndicatorService` to get the custom indicators for the provided alarm.
+ */
+class AlarmListIndicatorPipe {
+    constructor(alarmListIndicatorService) {
+        this.alarmListIndicatorService = alarmListIndicatorService;
+    }
+    transform(alarm) {
+        return this.alarmListIndicatorService.get$(alarm);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorPipe, deps: [{ token: AlarmListIndicatorService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorPipe, isStandalone: true, name: "alarmListIndicator" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'alarmListIndicator',
+                    pure: true
+                }]
+        }], ctorParameters: () => [{ type: AlarmListIndicatorService }] });
 
 /**
  * Pipe for transforming an array of alarm severity types into a comma-separated string.
@@ -1164,7 +1214,7 @@ class AlarmsFilterComponent {
         this.destroy$ = new Subject();
     }
     ngOnInit() {
-        this.activatedRoute.queryParams.pipe(takeUntil$1(this.destroy$)).subscribe(params => {
+        this.activatedRoute.queryParams.pipe(takeUntil(this.destroy$)).subscribe(params => {
             this.showCleared = params.showCleared === 'true';
             this.formGroup.setValue({
                 [Severity.CRITICAL]: params[Severity.CRITICAL] === 'true',
@@ -1183,7 +1233,7 @@ class AlarmsFilterComponent {
     }
     ngAfterViewInit() {
         this.filtersDropdown.isOpenChange
-            .pipe(takeUntil$1(this.destroy$), filter(Boolean))
+            .pipe(takeUntil(this.destroy$), filter(Boolean))
             .subscribe(() => this.updateAlarmsCount());
     }
     ngOnDestroy() {
@@ -1289,19 +1339,19 @@ class AlarmsFilterComponent {
         this.shouldDisableApplyButton$ = this.createDisableApplyButtonStream();
     }
     createAllSelectedStream(formValue$) {
-        return formValue$.pipe(map$1(severities => Object.values(severities).every(Boolean)));
+        return formValue$.pipe(map(severities => Object.values(severities).every(Boolean)));
     }
     createIndeterminateStream(formValue$) {
-        return formValue$.pipe(map$1(severities => Object.values(severities).some(Boolean) && !Object.values(severities).every(Boolean)));
+        return formValue$.pipe(map(severities => Object.values(severities).some(Boolean) && !Object.values(severities).every(Boolean)));
     }
     trackAllCheckboxesDisabled(formValue$) {
-        formValue$.pipe(takeUntil$1(this.destroy$)).subscribe(severities => {
+        formValue$.pipe(takeUntil(this.destroy$)).subscribe(severities => {
             const areAllDisabled = Object.values(severities).every(value => !value);
             this.isNoneCheckboxSelected$.next(areAllDisabled);
         });
     }
     createDisableApplyButtonStream() {
-        return combineLatest([this.isNoneCheckboxSelected$, this.severitiesTouched$]).pipe(map$1(([allCheckboxesAreDisabled, severitiesTouched]) => allCheckboxesAreDisabled || !severitiesTouched));
+        return combineLatest([this.isNoneCheckboxSelected$, this.severitiesTouched$]).pipe(map(([allCheckboxesAreDisabled, severitiesTouched]) => allCheckboxesAreDisabled || !severitiesTouched));
     }
     updateChipsAndDefaultValues() {
         const severityFilter = this.formGroup;
@@ -1443,7 +1493,7 @@ class AlarmsIntervalRefreshComponent {
     onIntervalToggleChange() {
         this.toggleIntervalForm
             .get('intervalToggle')
-            .valueChanges.pipe(takeUntil$1(this.destroy$), filter(Boolean))
+            .valueChanges.pipe(takeUntil(this.destroy$), filter(Boolean))
             .subscribe(() => setTimeout(() => this.startCountdown()));
     }
     initForm() {
@@ -1455,12 +1505,12 @@ class AlarmsIntervalRefreshComponent {
     listenToRefreshIntervalChange() {
         this.toggleIntervalForm
             .get('refreshInterval')
-            .valueChanges.pipe(takeUntil$1(this.destroy$))
+            .valueChanges.pipe(takeUntil(this.destroy$))
             .subscribe(() => this.resetCountdown());
     }
     listenOnLoadingChanges() {
         this.alarmsListLoading$
-            .pipe(tap$1(() => this.countdownIntervalComponent?.stop()))
+            .pipe(tap(() => this.countdownIntervalComponent?.stop()))
             .subscribe(state => {
             !state && this.countdownIntervalComponent?.reset();
         });
@@ -1484,63 +1534,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 args: [CountdownIntervalComponent]
             }] } });
 
-/**
- * A service to retrieve custom indicators for the alarm list view.
- */
-class AlarmListIndicatorService {
-    constructor(serviceRegistry, pluginsResolver) {
-        this.serviceRegistry = serviceRegistry;
-        this.pluginsResolver = pluginsResolver;
-    }
-    get$(alarm) {
-        const providers$ = this.pluginsResolver.allPluginsLoaded$.pipe(filter(Boolean), map$1(() => {
-            return this.serviceRegistry.get('alarmListIndicator');
-        }));
-        return providers$.pipe(switchMap(providers => {
-            const observables$ = providers.map(provider => provider.getAlarmListIndicator$(alarm).pipe(startWith(false)));
-            return combineLatest(observables$);
-        }), map$1(indicators => {
-            return indicators.filter(Boolean);
-        }), map$1(indicators => sortBy(indicators, this.byPriority)));
-    }
-    byPriority(item) {
-        if (item.priority === undefined) {
-            return 0;
-        }
-        return -item.priority;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorService, deps: [{ token: i3.ServiceRegistry }, { token: i3.PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i3.ServiceRegistry }, { type: i3.PluginsResolveService }] });
-
-/**
- * A pipe to provide custom indicators for the alarm list view.
- *
- * Will call `get$()` method of `AlarmListIndicatorService` to get the custom indicators for the provided alarm.
- */
-class AlarmListIndicatorPipe {
-    constructor(alarmListIndicatorService) {
-        this.alarmListIndicatorService = alarmListIndicatorService;
-    }
-    transform(alarm) {
-        return this.alarmListIndicatorService.get$(alarm);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorPipe, deps: [{ token: AlarmListIndicatorService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorPipe, isStandalone: true, name: "alarmListIndicator" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmListIndicatorPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: true,
-                    name: 'alarmListIndicator',
-                    pure: true
-                }]
-        }], ctorParameters: () => [{ type: AlarmListIndicatorService }] });
-
 class AlarmsListComponent {
     constructor(activatedRoute, alarmsViewService, contextRouteService, router) {
         this.activatedRoute = activatedRoute;
@@ -1563,21 +1556,10 @@ class AlarmsListComponent {
          * clicks on an alarm.
          */
         this.navigationOptions = {
-            /**
-             * Defines if the alarm should navigate to a detail view when clicked.
-             */
             allowNavigationToAlarmsView: true,
-            /**
-             * Defines if the component should try to determine the context to navigate
-             * to the correct alarm detail view or not. If set to true, the component will
-             * not try to determine the context and will always navigate to the all alarms view.
-             */
             alwaysNavigateToAllAlarms: false,
-            /**
-             * Defines if the cleared query parameter should be included in the navigation if
-             * the alarm is cleared.
-             */
-            includeClearedQueryParams: false
+            includeClearedQueryParams: false,
+            queryParamsHandling: 'merge'
         };
         /**
          * Controls the visibility of the loading bar
@@ -1614,7 +1596,7 @@ class AlarmsListComponent {
          */
         this.isEmptyListLoading = true;
         this.alertAggregator = new DynamicComponentAlertAggregator();
-        this.mapAlarmLink = pipe(map$1((alarms) => alarms.map((alarm) => {
+        this.mapAlarmLink = pipe(map((alarms) => alarms.map((alarm) => {
             alarm.link = this.getRouterLink(alarm);
             return alarm;
         })));
@@ -1654,7 +1636,7 @@ class AlarmsListComponent {
         if (this.alarmsViewService.isIntervalRefresh()) {
             const scrollElement = this.innerScrollWrapper.nativeElement;
             fromEvent(scrollElement, 'scroll')
-                .pipe(takeUntil$1(this.destroy$), debounceTime(300))
+                .pipe(takeUntil(this.destroy$), debounceTime(300))
                 .subscribe((event) => {
                 const target = event.target;
                 this.isScrolling = this.shouldCountdownIntervalBeHidden(target);
@@ -1681,16 +1663,16 @@ class AlarmsListComponent {
         return scrollTopPixels > this.HIDE_INTERVAL_COUNTDOWN_SCROLL;
     }
     verifyIfFiltersMatchingAlarm() {
-        this.activeChildParam$ = this.router.events.pipe(filter(e => e instanceof NavigationEnd && this.activatedRoute.children.length > 0), switchMap(() => this.activatedRoute.children[0].params), map$1(params => params.id), distinctUntilChanged(), shareReplay$1(), takeUntil$1(this.destroy$));
+        this.activeChildParam$ = this.router.events.pipe(filter(e => e instanceof NavigationEnd && this.activatedRoute.children.length > 0), switchMap(() => this.activatedRoute.children[0].params), map(params => params.id), distinctUntilChanged(), shareReplay$1(), takeUntil(this.destroy$));
         // done to get the first navigation
         this.activeChildParam$.subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsListComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: AlarmsViewService }, { token: i3.ContextRouteService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: { alarms: "alarms", hasPermissions: "hasPermissions", typeFilters: "typeFilters", loadMoreMode: "loadMoreMode", navigationOptions: "navigationOptions", isInitialLoading: "isInitialLoading", splitView: "splitView" }, outputs: { onSelectedAlarm: "onSelectedAlarm", onScrollingStateChange: "onScrollingStateChange" }, viewQueries: [{ propertyName: "innerScrollWrapper", first: true, predicate: ["scrollWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"inner-scroll\"\n  [ngClass]=\"{ 'split-view__list bg-level-1': splitView, 'bg-component': !splitView }\"\n  data-cy=\"c8y-alarms-list\"\n  #scrollWrapper\n>\n  <div\n    class=\"flex-wrap flex-no-shrink sticky-top m-b-16\"\n    [ngClass]=\"{\n      'separator-bottom card-header p-b-0': splitView,\n      'd-flex fit-w separator-top-bottom widget-bar p-l-16 p-r-16':\n        !splitView && navigationOptions.allowNavigationToAlarmsView\n    }\"\n  >\n    <div\n      class=\"h4 card-title\"\n      *ngIf=\"splitView\"\n    >\n      {{ 'Alarms list' | translate }}\n    </div>\n    <div\n      [ngClass]=\"{ 'fit-w d-flex a-i-center gap-16': !splitView, 'fit-h-20 m-l-auto': splitView }\"\n    >\n      <ng-content></ng-content>\n    </div>\n    <!--  Loading -->\n    <div\n      class=\"fit-w overflow-hidden\"\n      [ngClass]=\"{ 'p-t-16': splitView }\"\n    >\n      <div\n        class=\"loading-bar\"\n        style=\"z-index: 101\"\n        [ngClass]=\"{ active: isInitialLoading && !isEmptyListLoading }\"\n      ></div>\n    </div>\n\n    <div\n      class=\"alert alert-warning\"\n      role=\"alert\"\n      translate\n      *ngIf=\"\n        !isEmptyListLoading &&\n        (activeChildParam$ | async) &&\n        (activeAlarm$ | async)?.id !== (activeChildParam$ | async)\n      \"\n    >\n      The selected alarm is not currently in the list, change your filter.\n    </div>\n  </div>\n  <c8y-list-group\n    class=\"p-r-16 interactive\"\n    [ngStyle]=\"{ opacity: isInitialLoading && !isEmptyListLoading ? 0.2 : 1 }\"\n    style=\"transition: opacity 0.15s linear\"\n    data-cy=\"c8y-alarm-list--group\"\n  >\n    <c8y-li-timeline\n      class=\"pointer\"\n      role=\"button\"\n      data-cy=\"c8y-alarm-list--timeline-repeat\"\n      *c8yFor=\"let alarm of alarms; let i = index; pipe: mapAlarmLink; loadMore: loadMoreMode\"\n      [routerLink]=\"navigationOptions.allowNavigationToAlarmsView ? alarm.link : null\"\n      routerLinkActive=\"active\"\n      queryParamsHandling=\"merge\"\n      (isActiveChange)=\"activeRouteChanged($event, liScrollAnchor, alarm)\"\n      (click)=\"onAlarmOpen(alarm)\"\n      [queryParams]=\"\n        navigationOptions.includeClearedQueryParams\n          ? { showCleared: alarm.status === 'CLEARED' }\n          : {}\n      \"\n    >\n      <span\n        [attr.aria-label]=\"alarmLastOccurrenceLabel | translate\"\n        [tooltip]=\"alarmLastOccurrenceLabel | translate\"\n        placement=\"right\"\n        container=\"body\"\n        [delay]=\"500\"\n      >\n        {{ alarm.time | c8yDate: 'mediumDate' }}\n        {{ alarm.time | c8yDate: 'mediumTime' }}\n      </span>\n      <c8y-li\n        style=\"scroll-margin-top: 56px\"\n        #liScrollAnchor\n      >\n        <c8y-li-icon class=\"a-s-start\">\n          <div class=\"alarm-icons\">\n            <c8y-alarms-icon [typeFilters]=\"typeFilters\" [alarm]=\"alarm\"></c8y-alarms-icon>\n          </div>\n          <button\n            class=\"btn-clean text-center\"\n            [attr.aria-label]=\"\n              alarmBadgeTooltip\n                | translate\n                  : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n            \"\n            [tooltip]=\"\n              alarmBadgeTooltip\n                | translate\n                  : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n            \"\n            placement=\"right\"\n            container=\"body\"\n            type=\"button\"\n            *ngIf=\"alarm.firstOccurrenceTime\"\n            (click)=\"$event.stopPropagation()\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"badge badge-info\"\n              *ngIf=\"alarm.count > 1\"\n            >\n              {{ alarm.count }}\n            </span>\n          </button>\n        </c8y-li-icon>\n        <c8y-li-body class=\"a-s-stretch\">\n          <div class=\"d-flex a-i-start fit-h\">\n            <div class=\"min-width-0 flex-grow\">\n              <p class=\"text-truncate-wrap p-b-4\">\n                {{ alarm.text | translate }}\n              </p>\n              <div class=\"d-flex\">\n                <p\n                  class=\"small text-muted text-truncate flex-grow\"\n                  [title]=\"alarm.source.name\"\n                >\n                  <i [c8yIcon]=\"'exchange'\"></i>\n                  {{ alarm.source.name }}\n                </p>\n                <div class=\"d-flex\">\n                  <div\n                    [title]=\"item.title | translate\"\n                    *ngFor=\"let item of alarm | alarmListIndicator | async\"\n                  >\n                    <i\n                      [class]=\"item.class\"\n                      [c8yIcon]=\"item.icon\"\n                    ></i>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n    <c8y-loading *ngIf=\"isInitialLoading && isEmptyListLoading\"></c8y-loading>\n    <div\n      class=\"p-relative p-l-24\"\n      *ngIf=\"isEmptyListLoading && !isInitialLoading\"\n    >\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-alert-idle'\"\n        [title]=\"'No alarms to display.' | translate\"\n        data-cy=\"alarm-list--empty-state\"\n        *ngIf=\"hasPermissions; else alertsA\"\n      >\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a\n              c8y-guide-href=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n            >\n              user documentation\n            </a>\n            .\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  </c8y-list-group>\n</div>\n\n<ng-template #alertsA>\n  <c8y-dynamic-component-alerts [alerts]=\"alertAggregator\"></c8y-dynamic-component-alerts>\n</ng-template>\n", dependencies: [{ kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: i3.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i3.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "component", type: i3.DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i3.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i3.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { 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: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: AlarmsIconComponent, selector: "c8y-alarms-icon", inputs: ["alarm", "typeFilters"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AlarmListIndicatorPipe, name: "alarmListIndicator" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: { alarms: "alarms", hasPermissions: "hasPermissions", typeFilters: "typeFilters", loadMoreMode: "loadMoreMode", navigationOptions: "navigationOptions", isInitialLoading: "isInitialLoading", splitView: "splitView" }, outputs: { onSelectedAlarm: "onSelectedAlarm", onScrollingStateChange: "onScrollingStateChange" }, viewQueries: [{ propertyName: "innerScrollWrapper", first: true, predicate: ["scrollWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"inner-scroll\"\n  [ngClass]=\"{ 'split-view__list bg-level-1': splitView, 'bg-component': !splitView }\"\n  data-cy=\"c8y-alarms-list\"\n  #scrollWrapper\n>\n  <div\n    class=\"flex-wrap flex-no-shrink sticky-top m-b-16\"\n    [ngClass]=\"{\n      'separator-bottom card-header p-b-0': splitView,\n      'd-flex fit-w separator-top-bottom widget-bar p-l-16 p-r-16':\n        !splitView && navigationOptions.allowNavigationToAlarmsView\n    }\"\n  >\n    <div\n      class=\"h4 card-title\"\n      *ngIf=\"splitView\"\n    >\n      {{ 'Alarms list' | translate }}\n    </div>\n    <div\n      [ngClass]=\"{ 'fit-w d-flex a-i-center gap-16': !splitView, 'fit-h-20 m-l-auto': splitView }\"\n    >\n      <ng-content></ng-content>\n    </div>\n    <!--  Loading -->\n    <div\n      class=\"fit-w overflow-hidden\"\n      [ngClass]=\"{ 'p-t-16': splitView }\"\n    >\n      <div\n        class=\"loading-bar\"\n        style=\"z-index: 101\"\n        [ngClass]=\"{ active: isInitialLoading && !isEmptyListLoading }\"\n      ></div>\n    </div>\n\n    <div\n      class=\"alert alert-warning\"\n      role=\"alert\"\n      translate\n      *ngIf=\"\n        !isEmptyListLoading &&\n        (activeChildParam$ | async) &&\n        (activeAlarm$ | async)?.id !== (activeChildParam$ | async)\n      \"\n    >\n      The selected alarm is not currently in the list, change your filter.\n    </div>\n  </div>\n  <c8y-list-group\n    class=\"p-r-16 interactive\"\n    [ngStyle]=\"{ opacity: isInitialLoading && !isEmptyListLoading ? 0.2 : 1 }\"\n    style=\"transition: opacity 0.15s linear\"\n    data-cy=\"c8y-alarm-list--group\"\n  >\n    <c8y-li-timeline\n      class=\"pointer\"\n      role=\"button\"\n      data-cy=\"c8y-alarm-list--timeline-repeat\"\n      *c8yFor=\"let alarm of alarms; let i = index; pipe: mapAlarmLink; loadMore: loadMoreMode\"\n      [routerLink]=\"navigationOptions.allowNavigationToAlarmsView ? alarm.link : null\"\n      routerLinkActive=\"active\"\n      [queryParamsHandling]=\"navigationOptions.queryParamsHandling\"\n      (isActiveChange)=\"activeRouteChanged($event, liScrollAnchor, alarm)\"\n      (click)=\"onAlarmOpen(alarm)\"\n      [queryParams]=\"\n        navigationOptions.includeClearedQueryParams\n          ? { showCleared: alarm.status === 'CLEARED' }\n          : {}\n      \"\n    >\n      <span\n        [attr.aria-label]=\"alarmLastOccurrenceLabel | translate\"\n        [tooltip]=\"alarmLastOccurrenceLabel | translate\"\n        placement=\"right\"\n        container=\"body\"\n        [delay]=\"500\"\n      >\n        {{ alarm.time | c8yDate: 'mediumDate' }}\n        {{ alarm.time | c8yDate: 'mediumTime' }}\n      </span>\n      <c8y-li\n        style=\"scroll-margin-top: 56px\"\n        #liScrollAnchor\n      >\n        <c8y-li-icon class=\"a-s-start\">\n          <div class=\"alarm-icons\">\n            <c8y-alarms-icon [typeFilters]=\"typeFilters\" [alarm]=\"alarm\"></c8y-alarms-icon>\n          </div>\n          <button\n            class=\"btn-clean text-center\"\n            [attr.aria-label]=\"\n              alarmBadgeTooltip\n                | translate\n                  : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n            \"\n            [tooltip]=\"\n              alarmBadgeTooltip\n                | translate\n                  : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n            \"\n            placement=\"right\"\n            container=\"body\"\n            type=\"button\"\n            *ngIf=\"alarm.firstOccurrenceTime\"\n            (click)=\"$event.stopPropagation()\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"badge badge-info\"\n              *ngIf=\"alarm.count > 1\"\n            >\n              {{ alarm.count }}\n            </span>\n          </button>\n        </c8y-li-icon>\n        <c8y-li-body class=\"a-s-stretch\">\n          <div class=\"d-flex a-i-start fit-h\">\n            <div class=\"min-width-0 flex-grow\">\n              <p class=\"text-truncate-wrap p-b-4\">\n                {{ alarm.text | translate }}\n              </p>\n              <div class=\"d-flex\">\n                <p\n                  class=\"small text-muted text-truncate flex-grow\"\n                  [title]=\"alarm.source.name\"\n                >\n                  <i [c8yIcon]=\"'exchange'\"></i>\n                  {{ alarm.source.name }}\n                </p>\n                <div class=\"d-flex\">\n                  <div\n                    [title]=\"item.title | translate\"\n                    *ngFor=\"let item of alarm | alarmListIndicator | async\"\n                  >\n                    <i\n                      [class]=\"item.class\"\n                      [c8yIcon]=\"item.icon\"\n                    ></i>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n    <c8y-loading *ngIf=\"isInitialLoading && isEmptyListLoading\"></c8y-loading>\n    <div\n      class=\"p-relative p-l-24\"\n      *ngIf=\"isEmptyListLoading && !isInitialLoading\"\n    >\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-alert-idle'\"\n        [title]=\"'No alarms to display.' | translate\"\n        data-cy=\"alarm-list--empty-state\"\n        *ngIf=\"hasPermissions; else alertsA\"\n      >\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a\n              c8y-guide-href=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n            >\n              user documentation\n            </a>\n            .\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  </c8y-list-group>\n</div>\n\n<ng-template #alertsA>\n  <c8y-dynamic-component-alerts [alerts]=\"alertAggregator\"></c8y-dynamic-component-alerts>\n</ng-template>\n", dependencies: [{ kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: i3.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i3.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "component", type: i3.DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i3.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i3.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { 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: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: AlarmsIconComponent, selector: "c8y-alarms-icon", inputs: ["alarm", "typeFilters"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AlarmListIndicatorPipe, name: "alarmListIndicator" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms-list', template: "<div\n  class=\"inner-scroll\"\n  [ngClass]=\"{ 'split-view__list bg-level-1': splitView, 'bg-component': !splitView }\"\n  data-cy=\"c8y-alarms-list\"\n  #scrollWrapper\n>\n  <div\n    class=\"flex-wrap flex-no-shrink sticky-top m-b-16\"\n    [ngClass]=\"{\n      'separator-bottom card-header p-b-0': splitView,\n      'd-flex fit-w separator-top-bottom widget-bar p-l-16 p-r-16':\n        !splitView && navigationOptions.allowNavigationToAlarmsView\n    }\"\n  >\n    <div\n      class=\"h4 card-title\"\n      *ngIf=\"splitView\"\n    >\n      {{ 'Alarms list' | translate }}\n    </div>\n    <div\n      [ngClass]=\"{ 'fit-w d-flex a-i-center gap-16': !splitView, 'fit-h-20 m-l-auto': splitView }\"\n    >\n      <ng-content></ng-content>\n    </div>\n    <!--  Loading -->\n    <div\n      class=\"fit-w overflow-hidden\"\n      [ngClass]=\"{ 'p-t-16': splitView }\"\n    >\n      <div\n        class=\"loading-bar\"\n        style=\"z-index: 101\"\n        [ngClass]=\"{ active: isInitialLoading && !isEmptyListLoading }\"\n      ></div>\n    </div>\n\n    <div\n      class=\"alert alert-warning\"\n      role=\"alert\"\n      translate\n      *ngIf=\"\n        !isEmptyListLoading &&\n        (activeChildParam$ | async) &&\n        (activeAlarm$ | async)?.id !== (activeChildParam$ | async)\n      \"\n    >\n      The selected alarm is not currently in the list, change your filter.\n    </div>\n  </div>\n  <c8y-list-group\n    class=\"p-r-16 interactive\"\n    [ngStyle]=\"{ opacity: isInitialLoading && !isEmptyListLoading ? 0.2 : 1 }\"\n    style=\"transition: opacity 0.15s linear\"\n    data-cy=\"c8y-alarm-list--group\"\n  >\n    <c8y-li-timeline\n      class=\"pointer\"\n      role=\"button\"\n      data-cy=\"c8y-alarm-list--timeline-repeat\"\n      *c8yFor=\"let alarm of alarms; let i = index; pipe: mapAlarmLink; loadMore: loadMoreMode\"\n      [routerLink]=\"navigationOptions.allowNavigationToAlarmsView ? alarm.link : null\"\n      routerLinkActive=\"active\"\n      queryParamsHandling=\"merge\"\n      (isActiveChange)=\"activeRouteChanged($event, liScrollAnchor, alarm)\"\n      (click)=\"onAlarmOpen(alarm)\"\n      [queryParams]=\"\n        navigationOptions.includeClearedQueryParams\n          ? { showCleared: alarm.status === 'CLEARED' }\n          : {}\n      \"\n    >\n      <span\n        [attr.aria-label]=\"alarmLastOccurrenceLabel | translate\"\n        [tooltip]=\"alarmLastOccurrenceLabel | translate\"\n        placement=\"right\"\n        container=\"body\"\n        [delay]=\"500\"\n      >\n        {{ alarm.time | c8yDate: 'mediumDate' }}\n        {{ alarm.time | c8yDate: 'mediumTime' }}\n      </span>\n      <c8y-li\n        style=\"scroll-margin-top: 56px\"\n        #liScrollAnchor\n      >\n        <c8y-li-icon class=\"a-s-start\">\n          <div class=\"alarm-icons\">\n            <c8y-alarms-icon [typeFilters]=\"typeFilters\" [alarm]=\"alarm\"></c8y-alarms-icon>\n          </div>\n          <button\n            class=\"btn-clean text-center\"\n            [attr.aria-label]=\"\n              alarmBadgeTooltip\n                | translate\n                  : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n            \"\n            [tooltip]=\"\n              alarmBadgeTooltip\n                | translate\n                  : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n            \"\n            placement=\"right\"\n            container=\"body\"\n            type=\"button\"\n            *ngIf=\"alarm.firstOccurrenceTime\"\n            (click)=\"$event.stopPropagation()\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"badge badge-info\"\n              *ngIf=\"alarm.count > 1\"\n            >\n              {{ alarm.count }}\n            </span>\n          </button>\n        </c8y-li-icon>\n        <c8y-li-body class=\"a-s-stretch\">\n          <div class=\"d-flex a-i-start fit-h\">\n            <div class=\"min-width-0 flex-grow\">\n              <p class=\"text-truncate-wrap p-b-4\">\n                {{ alarm.text | translate }}\n              </p>\n              <div class=\"d-flex\">\n                <p\n                  class=\"small text-muted text-truncate flex-grow\"\n                  [title]=\"alarm.source.name\"\n                >\n                  <i [c8yIcon]=\"'exchange'\"></i>\n                  {{ alarm.source.name }}\n                </p>\n                <div class=\"d-flex\">\n                  <div\n                    [title]=\"item.title | translate\"\n                    *ngFor=\"let item of alarm | alarmListIndicator | async\"\n                  >\n                    <i\n                      [class]=\"item.class\"\n                      [c8yIcon]=\"item.icon\"\n                    ></i>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n    <c8y-loading *ngIf=\"isInitialLoading && isEmptyListLoading\"></c8y-loading>\n    <div\n      class=\"p-relative p-l-24\"\n      *ngIf=\"isEmptyListLoading && !isInitialLoading\"\n    >\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-alert-idle'\"\n        [title]=\"'No alarms to display.' | translate\"\n        data-cy=\"alarm-list--empty-state\"\n        *ngIf=\"hasPermissions; else alertsA\"\n      >\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a\n              c8y-guide-href=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n            >\n              user documentation\n            </a>\n            .\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  </c8y-list-group>\n</div>\n\n<ng-template #alertsA>\n  <c8y-dynamic-component-alerts [alerts]=\"alertAggregator\"></c8y-dynamic-component-alerts>\n</ng-template>\n" }]
+            args: [{ selector: 'c8y-alarms-list', template: "<div\n  class=\"inner-scroll\"\n  [ngClass]=\"{ 'split-view__list bg-level-1': splitView, 'bg-component': !splitView }\"\n  data-cy=\"c8y-alarms-list\"\n  #scrollWrapper\n>\n  <div\n    class=\"flex-wrap flex-no-shrink sticky-top m-b-16\"\n    [ngClass]=\"{\n      'separator-bottom card-header p-b-0': splitView,\n      'd-flex fit-w separator-top-bottom widget-bar p-l-16 p-r-16':\n        !splitView && navigationOptions.allowNavigationToAlarmsView\n    }\"\n  >\n    <div\n      class=\"h4 card-title\"\n      *ngIf=\"splitView\"\n    >\n      {{ 'Alarms list' | translate }}\n    </div>\n    <div\n      [ngClass]=\"{ 'fit-w d-flex a-i-center gap-16': !splitView, 'fit-h-20 m-l-auto': splitView }\"\n    >\n      <ng-content></ng-content>\n    </div>\n    <!--  Loading -->\n    <div\n      class=\"fit-w overflow-hidden\"\n      [ngClass]=\"{ 'p-t-16': splitView }\"\n    >\n      <div\n        class=\"loading-bar\"\n        style=\"z-index: 101\"\n        [ngClass]=\"{ active: isInitialLoading && !isEmptyListLoading }\"\n      ></div>\n    </div>\n\n    <div\n      class=\"alert alert-warning\"\n      role=\"alert\"\n      translate\n      *ngIf=\"\n        !isEmptyListLoading &&\n        (activeChildParam$ | async) &&\n        (activeAlarm$ | async)?.id !== (activeChildParam$ | async)\n      \"\n    >\n      The selected alarm is not currently in the list, change your filter.\n    </div>\n  </div>\n  <c8y-list-group\n    class=\"p-r-16 interactive\"\n    [ngStyle]=\"{ opacity: isInitialLoading && !isEmptyListLoading ? 0.2 : 1 }\"\n    style=\"transition: opacity 0.15s linear\"\n    data-cy=\"c8y-alarm-list--group\"\n  >\n    <c8y-li-timeline\n      class=\"pointer\"\n      role=\"button\"\n      data-cy=\"c8y-alarm-list--timeline-repeat\"\n      *c8yFor=\"let alarm of alarms; let i = index; pipe: mapAlarmLink; loadMore: loadMoreMode\"\n      [routerLink]=\"navigationOptions.allowNavigationToAlarmsView ? alarm.link : null\"\n      routerLinkActive=\"active\"\n      [queryParamsHandling]=\"navigationOptions.queryParamsHandling\"\n      (isActiveChange)=\"activeRouteChanged($event, liScrollAnchor, alarm)\"\n      (click)=\"onAlarmOpen(alarm)\"\n      [queryParams]=\"\n        navigationOptions.includeClearedQueryParams\n          ? { showCleared: alarm.status === 'CLEARED' }\n          : {}\n      \"\n    >\n      <span\n        [attr.aria-label]=\"alarmLastOccurrenceLabel | translate\"\n        [tooltip]=\"alarmLastOccurrenceLabel | translate\"\n        placement=\"right\"\n        container=\"body\"\n        [delay]=\"500\"\n      >\n        {{ alarm.time | c8yDate: 'mediumDate' }}\n        {{ alarm.time | c8yDate: 'mediumTime' }}\n      </span>\n      <c8y-li\n        style=\"scroll-margin-top: 56px\"\n        #liScrollAnchor\n      >\n        <c8y-li-icon class=\"a-s-start\">\n          <div class=\"alarm-icons\">\n            <c8y-alarms-icon [typeFilters]=\"typeFilters\" [alarm]=\"alarm\"></c8y-alarms-icon>\n          </div>\n          <button\n            class=\"btn-clean text-center\"\n            [attr.aria-label]=\"\n              alarmBadgeTooltip\n                | translate\n                  : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n            \"\n            [tooltip]=\"\n              alarmBadgeTooltip\n                | translate\n                  : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n            \"\n            placement=\"right\"\n            container=\"body\"\n            type=\"button\"\n            *ngIf=\"alarm.firstOccurrenceTime\"\n            (click)=\"$event.stopPropagation()\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"badge badge-info\"\n              *ngIf=\"alarm.count > 1\"\n            >\n              {{ alarm.count }}\n            </span>\n          </button>\n        </c8y-li-icon>\n        <c8y-li-body class=\"a-s-stretch\">\n          <div class=\"d-flex a-i-start fit-h\">\n            <div class=\"min-width-0 flex-grow\">\n              <p class=\"text-truncate-wrap p-b-4\">\n                {{ alarm.text | translate }}\n              </p>\n              <div class=\"d-flex\">\n                <p\n                  class=\"small text-muted text-truncate flex-grow\"\n                  [title]=\"alarm.source.name\"\n                >\n                  <i [c8yIcon]=\"'exchange'\"></i>\n                  {{ alarm.source.name }}\n                </p>\n                <div class=\"d-flex\">\n                  <div\n                    [title]=\"item.title | translate\"\n                    *ngFor=\"let item of alarm | alarmListIndicator | async\"\n                  >\n                    <i\n                      [class]=\"item.class\"\n                      [c8yIcon]=\"item.icon\"\n                    ></i>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n    <c8y-loading *ngIf=\"isInitialLoading && isEmptyListLoading\"></c8y-loading>\n    <div\n      class=\"p-relative p-l-24\"\n      *ngIf=\"isEmptyListLoading && !isInitialLoading\"\n    >\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-alert-idle'\"\n        [title]=\"'No alarms to display.' | translate\"\n        data-cy=\"alarm-list--empty-state\"\n        *ngIf=\"hasPermissions; else alertsA\"\n      >\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a\n              c8y-guide-href=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n            >\n              user documentation\n            </a>\n            .\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  </c8y-list-group>\n</div>\n\n<ng-template #alertsA>\n  <c8y-dynamic-component-alerts [alerts]=\"alertAggregator\"></c8y-dynamic-component-alerts>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: AlarmsViewService }, { type: i3.ContextRouteService }, { type: i1$1.Router }], propDecorators: { alarms: [{
                 type: Input
             }], hasPermissions: [{
@@ -1733,7 +1715,7 @@ class AlarmsDateFilterComponent {
             this.form.value.currentDateContextFromDate,
             this.form.value.currentDateContextToDate
         ];
-        this.activatedRoute.queryParams.pipe(takeUntil(this.destroy$)).subscribe(params => {
+        this.activatedRoute.queryParams.pipe(takeUntil$1(this.destroy$)).subscribe(params => {
             this.showCleared = params.showCleared === 'true';
             this.severityOptions = {
                 [Severity.CRITICAL]: params.critical === 'true',
@@ -1796,7 +1778,7 @@ class AlarmsDateFilterComponent {
     }
     subscribeToIntervalChange() {
         this.form.controls.currentDateContextInterval.valueChanges
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil$1(this.destroy$))
             .subscribe(interval => {
             if (interval === 'custom') {
                 this.form.patchValue({
@@ -1855,14 +1837,14 @@ class AlarmsTypeFilterComponent {
     }
     ngOnInit() {
         this.activatedRoute.queryParams
-            .pipe(map$1(params => {
+            .pipe(map(params => {
             const alarms = this.formGroup.get(this.formControlName).value;
             return this.getActiveAlarmFiltersFromQueryParameter(alarms, params[this.queryParamName]);
-        }), takeUntil$1(this.destroy$))
+        }), takeUntil(this.destroy$))
             .subscribe((alarmFilters) => this.formGroup.get(this.formControlName).patchValue(alarmFilters));
         this.formGroup
             .get(this.formControlName)
-            .valueChanges.pipe(takeUntil$1(this.destroy$))
+            .valueChanges.pipe(takeUntil(this.destroy$))
             .subscribe((alarmFilters) => this.applyFilterChange(alarmFilters));
     }
     ngOnChanges(changes) {
@@ -1990,7 +1972,7 @@ class AlarmsComponent {
             this.handleLegacyRealtime();
         }
         this.alarmsViewService.reloadAlarmsList$
-            .pipe(debounceTime(this.WAIT_TIME_AVOID_MULTIPLE_REQUEST_BY_PARAM_CHANGE), takeUntil$1(this.destroy$))
+            .pipe(debounceTime(this.WAIT_TIME_AVOID_MULTIPLE_REQUEST_BY_PARAM_CHANGE), takeUntil(this.destroy$))
             .subscribe(() => {
             this.updateAlarms();
         });
@@ -2097,7 +2079,7 @@ class AlarmsComponent {
     subscribeToRealtimeUpdates() {
         this.alarmWithChildrenRealtimeService
             .onAll$(this.contextSourceId)
-            .pipe(takeUntil$1(this.destroy$), throttleTime(THROTTLE_REALTIME_REFRESH, undefined, { trailing: true }))
+            .pipe(takeUntil(this.destroy$), throttleTime(THROTTLE_REALTIME_REFRESH, undefined, { trailing: true }))
             .subscribe(() => {
             if (this.isRealtimeToggleOn) {
                 this.refresh();
@@ -2108,7 +2090,14 @@ class AlarmsComponent {
         });
     }
     initializeContextSourceId() {
-        this.contextSourceId = this.contextRouteService.getContextData(this.activatedRoute)?.contextData?.id;
+        const routeContext = this.contextRouteService.getContextData(this.activatedRoute);
+        if (!routeContext) {
+            return;
+        }
+        const { context, contextData } = routeContext;
+        if ([ViewContext.Device, ViewContext.Group].includes(context)) {
+            this.contextSourceId = contextData?.id;
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: AlarmsViewService }, { token: i3.AlarmWithChildrenRealtimeService }, { token: i3.AlertService }, { token: i3.ContextRouteService }, { token: i3.ModalService }, { token: i1.TranslateService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmsComponent, selector: "c8y-alarms", providers: [AlarmWithChildrenRealtimeService], viewQueries: [{ propertyName: "alarmIntervalRefreshComponent", first: true, predicate: AlarmsIntervalRefreshComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"(activatedRoute.data | async)?.title\">\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n</ng-container>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-filter\n    [contextSourceId]=\"contextSourceId\"\n    (onFilterApplied)=\"applyFormFilters($event)\"\n    class=\"d-block fit-w\"\n  ></c8y-alarms-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item \n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-date-filter (dateFilterChange)=\"applyFormFilters($event)\"></c8y-alarms-date-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-alarms-type-filter\n    [alarms]=\"alarms$ | async\"\n    (onFilterChanged)=\"applyTypeFilters($event)\"\n    class=\"d-block fit-w\"\n  ></c8y-alarms-type-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"0\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Clear all alarms' | translate\"\n    type=\"button\"\n    (click)=\"clearAll()\"\n    data-cy=\"c8y-alarms-view--clear-all-button\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear all`alarms`' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<!--Realtime button-->\n<ng-template #realtimeRefresh>\n  <div class=\"input-group-btn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      [attr.aria-label]=\"'Refresh' | translate\"\n      [tooltip]=\"\n        (isRealtimeActive | async)\n          ? (NEW_REALTIME_ALARM_MESSAGE | translate)\n          : (REFRESH_LABEL | translate)\n      \"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      [disabled]=\"isLoading$ | async\"\n      (click)=\"refresh()\"\n    >\n      <span\n        class=\"tag tag--info m-r-8\"\n        *ngIf=\"isRealtimeActive | async\"\n      >\n        {{ 'New alarms' | translate }}\n      </span>\n      <i\n        c8yIcon=\"refresh\"\n        [ngClass]=\"{ 'icon-spin': isLoading$ | async }\"\n      ></i>\n    </button>\n    <button\n      class=\"c8y-realtime btn btn-default btn-sm\"\n      [attr.aria-label]=\"realtimeIconTitle\"\n      [tooltip]=\"realtimeIconTitle\"\n      placement=\"bottom\"\n      type=\"button\"\n      [container]=\"'body'\"\n      (click)=\"toggleRealtimeState()\"\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</ng-template>\n\n<c8y-help\n  src=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n></c8y-help>\n\n<div class=\"card content-fullpage split-view--5-7 grid__row--1\">\n  <c8y-alarms-list\n    class=\"d-contents\"\n    [isInitialLoading]=\"isLoading$ | async\"\n    [alarms]=\"alarms$ | async\"\n    [typeFilters]=\"typeFilters\"\n    (onScrollingStateChange)=\"changeInterval(!$event)\"\n    (onSelectedAlarm)=\"changeInterval(false)\"\n    [splitView]=\"true\"\n    [hasPermissions]=\"!isDisabled\"\n  >\n    <ng-container *ngIf=\"isIntervalRefresh; else realtimeRefresh\">\n      <c8y-alarms-interval-refresh\n        [alarmsListLoading$]=\"isLoading$\"\n        [isIntervalToggleEnabled]=\"shouldShowIntervalToggle$ | async\"\n        (onCountdownEnded)=\"refresh()\"\n        [isDisabled]=\"isDisabled\"\n      ></c8y-alarms-interval-refresh>\n    </ng-container>\n  </c8y-alarms-list>\n\n  <router-outlet class=\"d-contents\"></router-outlet>\n</div>\n", dependencies: [{ kind: "directive", type: i3.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: i3.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { 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: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { kind: "component", type: AlarmsIntervalRefreshComponent, selector: "c8y-alarms-interval-refresh", inputs: ["isDisabled", "alarmsListLoading$", "isIntervalToggleEnabled"], outputs: ["onCountdownEnded"] }, { kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", outputs: ["dateFilterChange"] }, { kind: "component", type: AlarmsTypeFilterComponent, selector: "c8y-alarms-type-filter", inputs: ["alarms"], outputs: ["onFilterChanged"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
@@ -2121,6 +2110,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 args: [AlarmsIntervalRefreshComponent]
             }] } });
 
+function getViewContextRoutes(contexts) {
+    return contexts.map(context => ({
+        context,
+        path: 'details',
+        icon: 'bell',
+        label: gettext('Details'),
+        component: AlarmInfoComponent,
+        tabsOutlet: 'alarms'
+    }));
+}
+function getChildrenForViewContext(context) {
+    return [
+        {
+            path: '',
+            component: AlarmEmptyComponent
+        },
+        {
+            path: ':id',
+            rootContext: context,
+            component: ContextRouteComponent,
+            canActivate: [ContextRouteGuard],
+            data: { context, contextData: {} },
+            resolve: {
+                tabs: RouterTabsResolver
+            }
+        }
+    ];
+}
+
 const defaultAlarmsConfig = {
     hybrid: true
 };
@@ -2246,5 +2264,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ALARMS_MODULE_CONFIG, ALARMS_PATH, ALARM_DEFAULT_PROPERTIES, ALARM_SEVERITY_ICON, ALARM_SEVERITY_ICON_MAP, ALARM_STATUS_ICON, AlarmDetailsButtonPipe, AlarmDetailsButtonService, AlarmDetailsComponent, AlarmDetailsService, AlarmEmptyComponent, AlarmIconMap, AlarmInfoComponent, AlarmListIndicatorPipe, AlarmListIndicatorService, AlarmSeveritiesToTitlePipe, AlarmSeverityToIconPipe, AlarmSeverityToLabelPipe, AlarmStatusToIconPipe, AlarmStatusToLabelPipe, AlarmsComponent, AlarmsFilterComponent, AlarmsIconComponent, AlarmsIntervalRefreshComponent, AlarmsListComponent, AlarmsModule, AlarmsViewService, AuditChangesMessagePipe, DEFAULT_ALARM_COUNTS, DEFAULT_SEVERITY_VALUES, DEFAULT_STATUS_VALUES, HELP_ICON, INTERVALS_EXTENDED, INTERVAL_TITLES_EXTENDED, Ng1SmartRulesUpgradeService, SmartRulesUpgradeServiceFactory, THROTTLE_REALTIME_REFRESH, smartRulesUpgradeServiceProvider };
+export { ALARMS_MODULE_CONFIG, ALARMS_PATH, ALARM_DEFAULT_PROPERTIES, ALARM_SEVERITY_ICON, ALARM_SEVERITY_ICON_MAP, ALARM_STATUS_ICON, AlarmDetailsButtonPipe, AlarmDetailsButtonService, AlarmDetailsComponent, AlarmDetailsService, AlarmEmptyComponent, AlarmIconMap, AlarmInfoComponent, AlarmListIndicatorPipe, AlarmListIndicatorService, AlarmSeveritiesToTitlePipe, AlarmSeverityToIconPipe, AlarmSeverityToLabelPipe, AlarmStatusToIconPipe, AlarmStatusToLabelPipe, AlarmsComponent, AlarmsFilterComponent, AlarmsIconComponent, AlarmsIntervalRefreshComponent, AlarmsListComponent, AlarmsModule, AlarmsViewService, AuditChangesMessagePipe, DEFAULT_ALARM_COUNTS, DEFAULT_SEVERITY_VALUES, DEFAULT_STATUS_VALUES, HELP_ICON, INTERVALS_EXTENDED, INTERVAL_TITLES_EXTENDED, Ng1SmartRulesUpgradeService, SmartRulesUpgradeServiceFactory, THROTTLE_REALTIME_REFRESH, getChildrenForViewContext, getViewContextRoutes, smartRulesUpgradeServiceProvider };
 //# sourceMappingURL=c8y-ngx-components-alarms.mjs.map