npm - @c8y/ngx-components - Versions diffs - 1022.10.1 → 1022.13.0 - Mend

@c8y/ngx-components 1022.10.1 → 1022.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (695) hide show

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

@@ -3,27 +3,22 @@ import { Injectable, Pipe, InjectionToken, HostListener, Input, Optional, Compon
 import { combineLatest, Subject, BehaviorSubject, fromEvent, firstValueFrom, of, from, forkJoin, EMPTY, Observable, pipe, take, takeUntil as takeUntil$1, map as map$1 } from 'rxjs';
 import { filter, map, switchMap, startWith, debounceTime, takeUntil, distinctUntilChanged, catchError, finalize, tap, shareReplay, throttleTime } from 'rxjs/operators';
 import * as i3 from '@c8y/ngx-components';
-import { Permissions, gettext, ViewContext, SupportedApps, CountdownIntervalComponent, DynamicComponentAlertAggregator, DynamicComponentAlert, AlarmWithChildrenRealtimeService, RouterTabsResolver, ContextRouteGuard, ContextRouteComponent, hookNavigator, hookRoute, CommonModule, CoreModule, HeaderModule, C8yTranslateModule, DynamicComponentModule, RelativeTimePipe } from '@c8y/ngx-components';
+import { Permissions, gettext, ViewContext, SupportedApps, IconDirective, ProductExperienceDirective, EmptyStateComponent, LoadingComponent, ListGroupComponent, ForOfDirective, ListItemTimelineComponent, ListItemComponent, ListItemBodyComponent, C8yTranslatePipe, DatePipe, HumanizeAppNamePipe, AssetLinkPipe, TitleComponent, TabsOutletComponent, RequiredInputPlaceholderDirective, CountdownIntervalComponent, DynamicComponentAlertAggregator, DynamicComponentAlert, C8yTranslateDirective, ListItemIconComponent, GuideDocsComponent, GuideHrefDirective, DynamicComponentAlertsComponent, DropdownDirectionDirective, FormGroupComponent, DateTimePickerComponent, MessagesComponent, MessageDirective, ListItemCheckboxComponent, ActionBarItemComponent, HelpComponent, AlarmWithChildrenRealtimeService, RouterTabsResolver, ContextRouteGuard, ContextRouteComponent, hookNavigator, hookRoute, CommonModule, CoreModule, HeaderModule, C8yTranslateModule, 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 i1$1 from '@ngx-translate/core';
-import * as i8 from '@c8y/ngx-components/interval-picker';
 import { INTERVAL_TITLES, INTERVALS, IntervalPickerComponent } from '@c8y/ngx-components/interval-picker';
 import * as i1 from '@angular/router';
-import { NavigationEnd, RouterModule } from '@angular/router';
-import * as i4 from '@angular/common';
-import { DatePipe, TitleCasePipe } from '@angular/common';
-import * as i9 from 'ngx-bootstrap/popover';
-import { PopoverModule } from 'ngx-bootstrap/popover';
+import { RouterLink, NavigationEnd, RouterLinkActive, RouterOutlet, RouterModule } from '@angular/router';
+import { NgClass, NgIf, NgStyle, NgFor, AsyncPipe, LowerCasePipe, JsonPipe, TitleCasePipe } from '@angular/common';
+import { PopoverDirective, PopoverModule } from 'ngx-bootstrap/popover';
 import * as i1$2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i6 from 'ngx-bootstrap/dropdown';
-import { BsDropdownDirective, BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import * as i5 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
-import * as i5$1 from 'ngx-bootstrap/tooltip';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BsDropdownDirective, BsDropdownToggleDirective, BsDropdownMenuDirective, BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
+import * as i1$4 from 'ngx-bootstrap/tooltip';
+import { TooltipDirective, TooltipModule } from 'ngx-bootstrap/tooltip';
 import * as i1$3 from '@c8y/ngx-components/alarm-event-selector';
 import { AlarmEventSelectorModule } from '@c8y/ngx-components/alarm-event-selector';
@@ -703,14 +698,11 @@ class AlarmStatusToIconPipe {
         return AlarmIconMap[alarmStatus?.toUpperCase()] || HELP_ICON;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmStatusToIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AlarmStatusToIconPipe, isStandalone: false, name: "AlarmStatusToIcon" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AlarmStatusToIconPipe, isStandalone: true, name: "AlarmStatusToIcon" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmStatusToIconPipe, decorators: [{
             type: Pipe,
-            args: [{
-                    name: 'AlarmStatusToIcon',
-                    standalone: false
-                }]
+            args: [{ name: 'AlarmStatusToIcon' }]
         }] });
 /**
@@ -746,14 +738,11 @@ class AuditChangesMessagePipe {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AuditChangesMessagePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AuditChangesMessagePipe, isStandalone: false, name: "auditChangesMessage" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AuditChangesMessagePipe, isStandalone: true, name: "auditChangesMessage" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AuditChangesMessagePipe, decorators: [{
             type: Pipe,
-            args: [{
-                    name: 'auditChangesMessage',
-                    standalone: false
-                }]
+            args: [{ name: 'auditChangesMessage' }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
 class AlarmDetailsComponent {
@@ -1091,11 +1080,38 @@ class AlarmDetailsComponent {
         return customProperties;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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$1.TranslateService }, { token: i2.InventoryService }, { token: AlarmsViewService }, { token: i3.ColorService }, { token: i3.InterAppService }, { token: i3.GainsightService }, { token: AlarmsActivityTrackerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmDetailsComponent, isStandalone: false, selector: "c8y-alarm-details", inputs: { selectedAlarm: "selectedAlarm" }, host: { listeners: { "document:visibilitychange": "visibilityChange()" } }, providers: [AlarmsActivityTrackerService], 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\n      class=\"border-all fit-w d-flex\"\n      data-cy=\"c8y-alarm-details--status-section-wrapper\"\n    >\n      <div\n        class=\"p-8\"\n        data-cy=\"c8y-alarm-details--status-icon\"\n      >\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\n      class=\"border-all fit-w d-flex\"\n      data-cy=\"c8y-alarm-details--severity-section-wrapper\"\n    >\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\n    class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n    data-cy=\"c8y-alarm-details--source-wrapper\"\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 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$ | async\">\n            <button\n              class=\"btn-link p-0 text-left\"\n              title=\"{{\n                linkTitle\n                  | translate\n                    : { appName: userDeviceManagementApp$ | async | humanizeAppName | async }\n              }}\"\n              type=\"button\"\n              (click)=\"goToAlarmSource(selectedAlarm.id)\"\n              data-cy=\"alarm-details-device-management-link\"\n            >\n              {{ userDeviceManagementApp$ | async | humanizeAppName | async }}\n              <i c8yIcon=\"external-link\"></i>\n            </button>\n          </ng-container>\n        </p>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n    data-cy=\"c8y-alarm-details--severity-type-wrapper\"\n  >\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          data-cy=\"c8y-alarm-details--last-updated-icon\"\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\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n            data-cy=\"c8y-alarm-details--number-of-occurrences-wrapper\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Number of occurrences' | translate }}</p>\n            <p>\n              <span\n                class=\"badge badge-info\"\n                data-cy=\"c8y-alarm-details--badge\"\n              >\n                {{ selectedAlarm.count }}\n              </span>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n            data-cy=\"c8y-alarm-details--first-occurrence-wrapper\"\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\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Time in which the alarm was created. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            data-cy=\"c8y-alarm-details--last-updated-wrapper\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.lastUpdated | c8yDate: 'medium' }}\n\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Time in which the alarm was last updated. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\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    data-cy=\"c8y-alarm-details--custom-fragments-wrapper\"\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    data-cy=\"c8y-alarms-details--reload-audit-logs\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.RELOAD_AUDIT_LOGS\n    }\"\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    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action:\n        selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n          ? PRODUCT_EXPERIENCE_ALARMS.ACTIONS.ACKNOWLEDGE_ALARM\n          : PRODUCT_EXPERIENCE_ALARMS.ACTIONS.REACTIVATE_ALARM\n    }\"\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    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.CREATE_SMART_RULE\n    }\"\n    data-cy=\"c8y-alarms-details--create-smart-rule\"\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    data-cy=\"c8y-alarm-details--clear-alarm\"\n    (click)=\"onUpdateDetails(CLEARED_STATUS_VALUE)\"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.CLEAR_ALARM\n    }\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear`alarm`' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"button.title | translate\"\n    type=\"button\"\n    *ngFor=\"let button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async\"\n    [ngClass]=\"button.additionalButtonClasses\"\n    (click)=\"detailsButtonAction(button, selectedAlarm)\"\n    [disabled]=\"button.disabled\"\n  >\n    <i\n      [c8yIcon]=\"button.icon\"\n      [ngClass]=\"button.additionalIconClasses\"\n    ></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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i3.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: i9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i4.JsonPipe, name: "json" }, { kind: "pipe", type: i4.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: 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: "19.2.14", type: AlarmDetailsComponent, isStandalone: true, selector: "c8y-alarm-details", inputs: { selectedAlarm: "selectedAlarm" }, host: { listeners: { "document:visibilitychange": "visibilityChange()" } }, providers: [AlarmsActivityTrackerService], 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\n      class=\"border-all fit-w d-flex\"\n      data-cy=\"c8y-alarm-details--status-section-wrapper\"\n    >\n      <div\n        class=\"p-8\"\n        data-cy=\"c8y-alarm-details--status-icon\"\n      >\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\n      class=\"border-all fit-w d-flex\"\n      data-cy=\"c8y-alarm-details--severity-section-wrapper\"\n    >\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\n    class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n    data-cy=\"c8y-alarm-details--source-wrapper\"\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 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$ | async\">\n            <button\n              class=\"btn-link p-0 text-left\"\n              title=\"{{\n                linkTitle\n                  | translate\n                    : { appName: userDeviceManagementApp$ | async | humanizeAppName | async }\n              }}\"\n              type=\"button\"\n              (click)=\"goToAlarmSource(selectedAlarm.id)\"\n              data-cy=\"alarm-details-device-management-link\"\n            >\n              {{ userDeviceManagementApp$ | async | humanizeAppName | async }}\n              <i c8yIcon=\"external-link\"></i>\n            </button>\n          </ng-container>\n        </p>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n    data-cy=\"c8y-alarm-details--severity-type-wrapper\"\n  >\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          data-cy=\"c8y-alarm-details--last-updated-icon\"\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\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n            data-cy=\"c8y-alarm-details--number-of-occurrences-wrapper\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Number of occurrences' | translate }}</p>\n            <p>\n              <span\n                class=\"badge badge-info\"\n                data-cy=\"c8y-alarm-details--badge\"\n              >\n                {{ selectedAlarm.count }}\n              </span>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n            data-cy=\"c8y-alarm-details--first-occurrence-wrapper\"\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\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Time in which the alarm was created. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            data-cy=\"c8y-alarm-details--last-updated-wrapper\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.lastUpdated | c8yDate: 'medium' }}\n\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Time in which the alarm was last updated. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\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    data-cy=\"c8y-alarm-details--custom-fragments-wrapper\"\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    data-cy=\"c8y-alarms-details--reload-audit-logs\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.RELOAD_AUDIT_LOGS\n    }\"\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    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action:\n        selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n          ? PRODUCT_EXPERIENCE_ALARMS.ACTIONS.ACKNOWLEDGE_ALARM\n          : PRODUCT_EXPERIENCE_ALARMS.ACTIONS.REACTIVATE_ALARM\n    }\"\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    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.CREATE_SMART_RULE\n    }\"\n    data-cy=\"c8y-alarms-details--create-smart-rule\"\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    data-cy=\"c8y-alarm-details--clear-alarm\"\n    (click)=\"onUpdateDetails(CLEARED_STATUS_VALUE)\"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.CLEAR_ALARM\n    }\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear`alarm`' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"button.title | translate\"\n    type=\"button\"\n    *ngFor=\"let button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async\"\n    [ngClass]=\"button.additionalButtonClasses\"\n    (click)=\"detailsButtonAction(button, selectedAlarm)\"\n    [disabled]=\"button.disabled\"\n  >\n    <i\n      [c8yIcon]=\"button.icon\"\n      [ngClass]=\"button.additionalIconClasses\"\n    ></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 | c8yDate: 'mediumDate' }}\n      {{ log.creationTime | c8yDate: '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: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: 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: ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: AssetLinkPipe, name: "assetLink" }, { 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: "19.2.14", ngImport: i0, type: AlarmDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarm-details', standalone: false, providers: [AlarmsActivityTrackerService], 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\n      class=\"border-all fit-w d-flex\"\n      data-cy=\"c8y-alarm-details--status-section-wrapper\"\n    >\n      <div\n        class=\"p-8\"\n        data-cy=\"c8y-alarm-details--status-icon\"\n      >\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\n      class=\"border-all fit-w d-flex\"\n      data-cy=\"c8y-alarm-details--severity-section-wrapper\"\n    >\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\n    class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n    data-cy=\"c8y-alarm-details--source-wrapper\"\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 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$ | async\">\n            <button\n              class=\"btn-link p-0 text-left\"\n              title=\"{{\n                linkTitle\n                  | translate\n                    : { appName: userDeviceManagementApp$ | async | humanizeAppName | async }\n              }}\"\n              type=\"button\"\n              (click)=\"goToAlarmSource(selectedAlarm.id)\"\n              data-cy=\"alarm-details-device-management-link\"\n            >\n              {{ userDeviceManagementApp$ | async | humanizeAppName | async }}\n              <i c8yIcon=\"external-link\"></i>\n            </button>\n          </ng-container>\n        </p>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n    data-cy=\"c8y-alarm-details--severity-type-wrapper\"\n  >\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          data-cy=\"c8y-alarm-details--last-updated-icon\"\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\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n            data-cy=\"c8y-alarm-details--number-of-occurrences-wrapper\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Number of occurrences' | translate }}</p>\n            <p>\n              <span\n                class=\"badge badge-info\"\n                data-cy=\"c8y-alarm-details--badge\"\n              >\n                {{ selectedAlarm.count }}\n              </span>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n            data-cy=\"c8y-alarm-details--first-occurrence-wrapper\"\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\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Time in which the alarm was created. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            data-cy=\"c8y-alarm-details--last-updated-wrapper\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.lastUpdated | c8yDate: 'medium' }}\n\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Time in which the alarm was last updated. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\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    data-cy=\"c8y-alarm-details--custom-fragments-wrapper\"\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    data-cy=\"c8y-alarms-details--reload-audit-logs\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.RELOAD_AUDIT_LOGS\n    }\"\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    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action:\n        selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n          ? PRODUCT_EXPERIENCE_ALARMS.ACTIONS.ACKNOWLEDGE_ALARM\n          : PRODUCT_EXPERIENCE_ALARMS.ACTIONS.REACTIVATE_ALARM\n    }\"\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    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.CREATE_SMART_RULE\n    }\"\n    data-cy=\"c8y-alarms-details--create-smart-rule\"\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    data-cy=\"c8y-alarm-details--clear-alarm\"\n    (click)=\"onUpdateDetails(CLEARED_STATUS_VALUE)\"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.CLEAR_ALARM\n    }\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear`alarm`' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"button.title | translate\"\n    type=\"button\"\n    *ngFor=\"let button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async\"\n    [ngClass]=\"button.additionalButtonClasses\"\n    (click)=\"detailsButtonAction(button, selectedAlarm)\"\n    [disabled]=\"button.disabled\"\n  >\n    <i\n      [c8yIcon]=\"button.icon\"\n      [ngClass]=\"button.additionalIconClasses\"\n    ></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', providers: [AlarmsActivityTrackerService], imports: [
+                        IconDirective,
+                        NgClass,
+                        RouterLink,
+                        NgIf,
+                        NgStyle,
+                        PopoverDirective,
+                        ProductExperienceDirective,
+                        NgFor,
+                        EmptyStateComponent,
+                        LoadingComponent,
+                        ListGroupComponent,
+                        ForOfDirective,
+                        ListItemTimelineComponent,
+                        ListItemComponent,
+                        ListItemBodyComponent,
+                        C8yTranslatePipe,
+                        AsyncPipe,
+                        LowerCasePipe,
+                        JsonPipe,
+                        DatePipe,
+                        HumanizeAppNamePipe,
+                        AssetLinkPipe,
+                        AlarmDetailsButtonPipe,
+                        AlarmSeverityToIconPipe,
+                        AlarmStatusToIconPipe,
+                        AuditChangesMessagePipe
+                    ], 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\n      class=\"border-all fit-w d-flex\"\n      data-cy=\"c8y-alarm-details--status-section-wrapper\"\n    >\n      <div\n        class=\"p-8\"\n        data-cy=\"c8y-alarm-details--status-icon\"\n      >\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\n      class=\"border-all fit-w d-flex\"\n      data-cy=\"c8y-alarm-details--severity-section-wrapper\"\n    >\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\n    class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n    data-cy=\"c8y-alarm-details--source-wrapper\"\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 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$ | async\">\n            <button\n              class=\"btn-link p-0 text-left\"\n              title=\"{{\n                linkTitle\n                  | translate\n                    : { appName: userDeviceManagementApp$ | async | humanizeAppName | async }\n              }}\"\n              type=\"button\"\n              (click)=\"goToAlarmSource(selectedAlarm.id)\"\n              data-cy=\"alarm-details-device-management-link\"\n            >\n              {{ userDeviceManagementApp$ | async | humanizeAppName | async }}\n              <i c8yIcon=\"external-link\"></i>\n            </button>\n          </ng-container>\n        </p>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n    data-cy=\"c8y-alarm-details--severity-type-wrapper\"\n  >\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          data-cy=\"c8y-alarm-details--last-updated-icon\"\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\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n            data-cy=\"c8y-alarm-details--number-of-occurrences-wrapper\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Number of occurrences' | translate }}</p>\n            <p>\n              <span\n                class=\"badge badge-info\"\n                data-cy=\"c8y-alarm-details--badge\"\n              >\n                {{ selectedAlarm.count }}\n              </span>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n            data-cy=\"c8y-alarm-details--first-occurrence-wrapper\"\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\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Time in which the alarm was created. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            data-cy=\"c8y-alarm-details--last-updated-wrapper\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.lastUpdated | c8yDate: 'medium' }}\n\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Time in which the alarm was last updated. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\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    data-cy=\"c8y-alarm-details--custom-fragments-wrapper\"\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    data-cy=\"c8y-alarms-details--reload-audit-logs\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.RELOAD_AUDIT_LOGS\n    }\"\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    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action:\n        selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n          ? PRODUCT_EXPERIENCE_ALARMS.ACTIONS.ACKNOWLEDGE_ALARM\n          : PRODUCT_EXPERIENCE_ALARMS.ACTIONS.REACTIVATE_ALARM\n    }\"\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    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.CREATE_SMART_RULE\n    }\"\n    data-cy=\"c8y-alarms-details--create-smart-rule\"\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    data-cy=\"c8y-alarm-details--clear-alarm\"\n    (click)=\"onUpdateDetails(CLEARED_STATUS_VALUE)\"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE\"\n    c8yProductExperience\n    [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n    [actionData]=\"{\n      component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARM_DETAILS,\n      action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.CLEAR_ALARM\n    }\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear`alarm`' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"button.title | translate\"\n    type=\"button\"\n    *ngFor=\"let button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async\"\n    [ngClass]=\"button.additionalButtonClasses\"\n    (click)=\"detailsButtonAction(button, selectedAlarm)\"\n    [disabled]=\"button.disabled\"\n  >\n    <i\n      [c8yIcon]=\"button.icon\"\n      [ngClass]=\"button.additionalIconClasses\"\n    ></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 | c8yDate: 'mediumDate' }}\n      {{ log.creationTime | c8yDate: '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$1.TranslateService }, { type: i2.InventoryService }, { type: AlarmsViewService }, { type: i3.ColorService }, { type: i3.InterAppService }, { type: i3.GainsightService }, { type: AlarmsActivityTrackerService }], propDecorators: { selectedAlarm: [{
@@ -1107,11 +1123,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class AlarmEmptyComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmEmptyComponent, isStandalone: false, selector: "c8y-alarms-empty", ngImport: i0, template: "<div class=\"p-24 hidden-sm\" data-cy=\"c8y-alarms-empty\">\n  <c8y-ui-empty-state\n    [icon]=\"'alarm'\"\n    [title]=\"'No alarm selected' | translate\"\n    [subtitle]=\"'Select an alarm from the list to view its details.' | translate\"\n    [horizontal]=\"true\"\n  ></c8y-ui-empty-state>\n</div>\n", dependencies: [{ kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmEmptyComponent, isStandalone: true, selector: "c8y-alarms-empty", ngImport: i0, template: "<div class=\"p-24 hidden-sm\" data-cy=\"c8y-alarms-empty\">\n  <c8y-ui-empty-state\n    [icon]=\"'alarm'\"\n    [title]=\"'No alarm selected' | translate\"\n    [subtitle]=\"'Select an alarm from the list to view its details.' | translate\"\n    [horizontal]=\"true\"\n  ></c8y-ui-empty-state>\n</div>\n", dependencies: [{ kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmEmptyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms-empty', standalone: false, template: "<div class=\"p-24 hidden-sm\" data-cy=\"c8y-alarms-empty\">\n  <c8y-ui-empty-state\n    [icon]=\"'alarm'\"\n    [title]=\"'No alarm selected' | translate\"\n    [subtitle]=\"'Select an alarm from the list to view its details.' | translate\"\n    [horizontal]=\"true\"\n  ></c8y-ui-empty-state>\n</div>\n" }]
+            args: [{ selector: 'c8y-alarms-empty', imports: [EmptyStateComponent, C8yTranslatePipe], template: "<div class=\"p-24 hidden-sm\" data-cy=\"c8y-alarms-empty\">\n  <c8y-ui-empty-state\n    [icon]=\"'alarm'\"\n    [title]=\"'No alarm selected' | translate\"\n    [subtitle]=\"'Select an alarm from the list to view its details.' | translate\"\n    [horizontal]=\"true\"\n  ></c8y-ui-empty-state>\n</div>\n" }]
         }] });
 class AlarmInfoComponent {
@@ -1135,11 +1151,19 @@ class AlarmInfoComponent {
         this.alarmsViewService.closeDetailsView$.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmInfoComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i3.ContextRouteService }, { token: AlarmsViewService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmInfoComponent, isStandalone: false, 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        data-cy=\"c8y-alarms-info--back\"\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>\n    <div class=\"p-relative\">\n      <c8y-tabs-outlet\n        outletName=\"alarms\"\n        orientation=\"horizontal\"\n      ></c8y-tabs-outlet>\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: i4.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", "openFirstTab", "hasHeader"] }, { kind: "component", type: AlarmDetailsComponent, selector: "c8y-alarm-details", inputs: ["selectedAlarm"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmInfoComponent, isStandalone: true, 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        data-cy=\"c8y-alarms-info--back\"\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>\n    <div class=\"p-relative\">\n      <c8y-tabs-outlet\n        outletName=\"alarms\"\n        orientation=\"horizontal\"\n      ></c8y-tabs-outlet>\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "component", type: AlarmDetailsComponent, selector: "c8y-alarm-details", inputs: ["selectedAlarm"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarm-info', standalone: false, 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        data-cy=\"c8y-alarms-info--back\"\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>\n    <div class=\"p-relative\">\n      <c8y-tabs-outlet\n        outletName=\"alarms\"\n        orientation=\"horizontal\"\n      ></c8y-tabs-outlet>\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" }]
+            args: [{ selector: 'c8y-alarm-info', imports: [
+                        NgIf,
+                        TitleComponent,
+                        IconDirective,
+                        TabsOutletComponent,
+                        AlarmDetailsComponent,
+                        C8yTranslatePipe,
+                        AsyncPipe
+                    ], 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        data-cy=\"c8y-alarms-info--back\"\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>\n    <div class=\"p-relative\">\n      <c8y-tabs-outlet\n        outletName=\"alarms\"\n        orientation=\"horizontal\"\n      ></c8y-tabs-outlet>\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.ActivatedRoute }, { type: i1.Router }, { type: i3.ContextRouteService }, { type: AlarmsViewService }] });
 /**
@@ -1239,14 +1263,11 @@ class AlarmSeveritiesToTitlePipe {
         return this.translateService.instant(SEVERITY_LABELS[chip]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmSeveritiesToTitlePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AlarmSeveritiesToTitlePipe, isStandalone: false, name: "AlarmSeveritiesToTitle" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AlarmSeveritiesToTitlePipe, isStandalone: true, name: "AlarmSeveritiesToTitle" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmSeveritiesToTitlePipe, decorators: [{
             type: Pipe,
-            args: [{
-                    name: 'AlarmSeveritiesToTitle',
-                    standalone: false
-                }]
+            args: [{ name: 'AlarmSeveritiesToTitle' }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
 /**
@@ -1266,14 +1287,11 @@ class AlarmSeverityToLabelPipe {
         return this.translateService.instant(alarmStatusMapped ?? alarmSeverity);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmSeverityToLabelPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AlarmSeverityToLabelPipe, isStandalone: false, name: "AlarmSeverityToLabel" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AlarmSeverityToLabelPipe, isStandalone: true, name: "AlarmSeverityToLabel" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmSeverityToLabelPipe, decorators: [{
             type: Pipe,
-            args: [{
-                    name: 'AlarmSeverityToLabel',
-                    standalone: false
-                }]
+            args: [{ name: 'AlarmSeverityToLabel' }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
 /**
@@ -1292,14 +1310,11 @@ class AlarmStatusToLabelPipe {
         return this.translateService.instant(ALARM_STATUS_LABELS[alarmStatus?.toUpperCase()]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmStatusToLabelPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AlarmStatusToLabelPipe, isStandalone: false, name: "AlarmStatusToLabel" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AlarmStatusToLabelPipe, isStandalone: true, name: "AlarmStatusToLabel" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmStatusToLabelPipe, decorators: [{
             type: Pipe,
-            args: [{
-                    name: 'AlarmStatusToLabel',
-                    standalone: false
-                }]
+            args: [{ name: 'AlarmStatusToLabel' }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
 class AlarmsFilterComponent {
@@ -1478,11 +1493,29 @@ class AlarmsFilterComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsFilterComponent, deps: [{ token: i1$2.FormBuilder }, { token: AlarmsViewService }, { token: i3.AlertService }, { token: i1.Router }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmsFilterComponent, isStandalone: false, selector: "c8y-alarms-filter", inputs: { contextSourceId: "contextSourceId" }, outputs: { onFilterApplied: "onFilterApplied" }, viewQueries: [{ propertyName: "filtersDropdown", first: true, predicate: ["filtersDropdown"], descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by severity' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\" style=\"min-width: 104px; padding-top: 0; padding-bottom: 0;\">\n        <ng-container *ngIf=\"chips.length !== severitiesList.length; else allAlarms\">\n          <span\n            class=\"tag tag--info chip\"\n            [attr.data-cy]=\"'c8y-alarms-filter--chip-' + chip\"\n            *ngFor=\"let chip of chips\"\n          >\n           <button\n             class=\"btn btn-xs btn-clean text-10\"\n             title=\"{{ 'Remove' | translate }}\"\n             type=\"button\"\n             data-cy=\"c8y-alarms-filter--remove-chip\"\n             c8yProductExperience\n             [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n             [actionData]=\"{\n                component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARMS_FILTER,\n                action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.REMOVE_CHIP_FILTER,\n                filterValues: {\n                  severities: formGroup.value,\n                  showCleared: showCleared\n                }\n              }\"\n             (click)=\"deselectChip(chip); $event.stopPropagation()\"\n           >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <i\n              class=\"status stroked-icon icon-12\"\n              [attr.data-cy]=\"'c8y-alarms-filter--icon-' + chip\"\n              [c8yIcon]=\"chip | AlarmSeverityToIcon\"\n              [ngClass]=\"chip | lowercase\"\n            ></i>\n            {{ SEVERITY_LABELS[chip] | translate }}\n          </span>\n        </ng-container>\n        <ng-template #allAlarms>\n          <span class=\"text-truncate\" title=\"{{ 'All severities' | translate }}\">\n            {{ 'All severities' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last\">\n        <button\n          class=\"btn-default btn btn--caret\"\n          title=\"{{ chips | AlarmSeveritiesToTitle }}\"\n          data-cy=\"c8y-alarms-filter\"\n          dropdownToggle\n          (click)=\"resetForm()\"\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <ul\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center sticky-top separator-bottom\">\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"'All' | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            data-cy=\"c8y-alarms-filter--all\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"allChanged($event)\"\n            [ngModel]=\"isEachCheckboxSelected$ | async\"\n            [indeterminate]=\"isIndeterminate$ | async\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"'bell'\"\n          ></i>\n          <span class=\"m-l-8\">{{ 'All' | translate }}</span>\n        </label>\n      </li>\n      <li\n        class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center\"\n        *ngFor=\"let severity of severitiesList\"\n      >\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"SEVERITY_LABELS[severity] | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            [attr.data-cy]=\"'c8y-alarms-filter--' + severity\"\n            [formControlName]=\"severity\"\n            [value]=\"severity\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"severity | AlarmSeverityToIcon\"\n            [ngClass]=\"severity | lowercase\"\n          ></i>\n          <span class=\"m-l-8\">{{ SEVERITY_LABELS[severity] | translate }}</span>\n        </label>\n        <!-- badge -->\n        <div\n          class=\"badge badge-info m-l-auto\"\n          *ngIf=\"alarmCounts[severity] || alarmCounts[severity] === 0\"\n        >\n          <i\n            class=\"icon-spin\"\n            [c8yIcon]=\"'circle-o-notch'\"\n            *ngIf=\"countLoading\"\n          ></i>\n          <span\n            *ngIf=\"!countLoading\"\n            [attr.data-cy]=\"'c8y-alarms-filter--' + severity + '-badge'\"\n          >\n            {{ alarmCounts[severity] < 99 ? alarmCounts[severity] : '99+' }}\n          </span>\n        </div>\n      </li>\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center separator-top\">\n        <label\n          class=\"c8y-switch\"\n          [attr.aria-label]=\"'Show cleared alarms' | translate\"\n          [attr.data-cy]=\"'c8y-alarms-filter--cleared'\"\n        >\n          <input\n            type=\"checkbox\"\n            #showClearedCheckbox\n            [ngModelOptions]=\"{ standalone: true }\"\n            [(ngModel)]=\"showCleared\"\n            (click)=\"markSeveritiesAsTouched(); updateAlarmsCount(showClearedCheckbox.checked)\"\n          />\n          <span></span>\n          <span\n            class=\"text-truncate\"\n            title=\"{{ 'Show cleared alarms' | translate }}\"\n          >\n            {{ 'Show cleared alarms' | translate }}\n          </span>\n        </label>\n      </li>\n\n      <div class=\"p-16 d-flex sticky-bottom separator-top\">\n        <button\n          data-cy=\"c8y-alarms-filter--apply\"\n          class=\"btn btn-primary btn-sm flex-grow\"\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n          [actionData]=\"{\n            component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARMS_FILTER,\n            action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.APPLY_FILTER,\n            filterValues: {\n              severities: formGroup.value,\n              showCleared: showCleared\n            }\n          }\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          (click)=\"applyFilters(false); closeDropdown()\"\n          [disabled]=\"shouldDisableApplyButton$ | async\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </ul>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i3.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: AlarmSeverityToIconPipe, name: "AlarmSeverityToIcon" }, { kind: "pipe", type: AlarmSeveritiesToTitlePipe, name: "AlarmSeveritiesToTitle" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmsFilterComponent, isStandalone: true, selector: "c8y-alarms-filter", inputs: { contextSourceId: "contextSourceId" }, outputs: { onFilterApplied: "onFilterApplied" }, viewQueries: [{ propertyName: "filtersDropdown", first: true, predicate: ["filtersDropdown"], descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by severity' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\" style=\"min-width: 104px; padding-top: 0; padding-bottom: 0;\">\n        <ng-container *ngIf=\"chips.length !== severitiesList.length; else allAlarms\">\n          <span\n            class=\"tag tag--info chip\"\n            [attr.data-cy]=\"'c8y-alarms-filter--chip-' + chip\"\n            *ngFor=\"let chip of chips\"\n          >\n           <button\n             class=\"btn btn-xs btn-clean text-10\"\n             title=\"{{ 'Remove' | translate }}\"\n             type=\"button\"\n             data-cy=\"c8y-alarms-filter--remove-chip\"\n             c8yProductExperience\n             [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n             [actionData]=\"{\n                component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARMS_FILTER,\n                action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.REMOVE_CHIP_FILTER,\n                filterValues: {\n                  severities: formGroup.value,\n                  showCleared: showCleared\n                }\n              }\"\n             (click)=\"deselectChip(chip); $event.stopPropagation()\"\n           >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <i\n              class=\"status stroked-icon icon-12\"\n              [attr.data-cy]=\"'c8y-alarms-filter--icon-' + chip\"\n              [c8yIcon]=\"chip | AlarmSeverityToIcon\"\n              [ngClass]=\"chip | lowercase\"\n            ></i>\n            {{ SEVERITY_LABELS[chip] | translate }}\n          </span>\n        </ng-container>\n        <ng-template #allAlarms>\n          <span class=\"text-truncate\" title=\"{{ 'All severities' | translate }}\">\n            {{ 'All severities' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last\">\n        <button\n          class=\"btn-default btn btn--caret\"\n          title=\"{{ chips | AlarmSeveritiesToTitle }}\"\n          data-cy=\"c8y-alarms-filter\"\n          dropdownToggle\n          (click)=\"resetForm()\"\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <ul\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center sticky-top separator-bottom\">\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"'All' | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            data-cy=\"c8y-alarms-filter--all\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"allChanged($event)\"\n            [ngModel]=\"isEachCheckboxSelected$ | async\"\n            [indeterminate]=\"isIndeterminate$ | async\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"'bell'\"\n          ></i>\n          <span class=\"m-l-8\">{{ 'All' | translate }}</span>\n        </label>\n      </li>\n      <li\n        class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center\"\n        *ngFor=\"let severity of severitiesList\"\n      >\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"SEVERITY_LABELS[severity] | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            [attr.data-cy]=\"'c8y-alarms-filter--' + severity\"\n            [formControlName]=\"severity\"\n            [value]=\"severity\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"severity | AlarmSeverityToIcon\"\n            [ngClass]=\"severity | lowercase\"\n          ></i>\n          <span class=\"m-l-8\">{{ SEVERITY_LABELS[severity] | translate }}</span>\n        </label>\n        <!-- badge -->\n        <div\n          class=\"badge badge-info m-l-auto\"\n          *ngIf=\"alarmCounts[severity] || alarmCounts[severity] === 0\"\n        >\n          <i\n            class=\"icon-spin\"\n            [c8yIcon]=\"'circle-o-notch'\"\n            *ngIf=\"countLoading\"\n          ></i>\n          <span\n            *ngIf=\"!countLoading\"\n            [attr.data-cy]=\"'c8y-alarms-filter--' + severity + '-badge'\"\n          >\n            {{ alarmCounts[severity] < 99 ? alarmCounts[severity] : '99+' }}\n          </span>\n        </div>\n      </li>\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center separator-top\">\n        <label\n          class=\"c8y-switch\"\n          [attr.aria-label]=\"'Show cleared alarms' | translate\"\n          [attr.data-cy]=\"'c8y-alarms-filter--cleared'\"\n        >\n          <input\n            type=\"checkbox\"\n            #showClearedCheckbox\n            [ngModelOptions]=\"{ standalone: true }\"\n            [(ngModel)]=\"showCleared\"\n            (click)=\"markSeveritiesAsTouched(); updateAlarmsCount(showClearedCheckbox.checked)\"\n          />\n          <span></span>\n          <span\n            class=\"text-truncate\"\n            title=\"{{ 'Show cleared alarms' | translate }}\"\n          >\n            {{ 'Show cleared alarms' | translate }}\n          </span>\n        </label>\n      </li>\n\n      <div class=\"p-16 d-flex sticky-bottom separator-top\">\n        <button\n          data-cy=\"c8y-alarms-filter--apply\"\n          class=\"btn btn-primary btn-sm flex-grow\"\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n          [actionData]=\"{\n            component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARMS_FILTER,\n            action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.APPLY_FILTER,\n            filterValues: {\n              severities: formGroup.value,\n              showCleared: showCleared\n            }\n          }\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          (click)=\"applyFilters(false); closeDropdown()\"\n          [disabled]=\"shouldDisableApplyButton$ | async\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </ul>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: AlarmSeverityToIconPipe, name: "AlarmSeverityToIcon" }, { kind: "pipe", type: AlarmSeveritiesToTitlePipe, name: "AlarmSeveritiesToTitle" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms-filter', standalone: false, template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by severity' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\" style=\"min-width: 104px; padding-top: 0; padding-bottom: 0;\">\n        <ng-container *ngIf=\"chips.length !== severitiesList.length; else allAlarms\">\n          <span\n            class=\"tag tag--info chip\"\n            [attr.data-cy]=\"'c8y-alarms-filter--chip-' + chip\"\n            *ngFor=\"let chip of chips\"\n          >\n           <button\n             class=\"btn btn-xs btn-clean text-10\"\n             title=\"{{ 'Remove' | translate }}\"\n             type=\"button\"\n             data-cy=\"c8y-alarms-filter--remove-chip\"\n             c8yProductExperience\n             [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n             [actionData]=\"{\n                component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARMS_FILTER,\n                action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.REMOVE_CHIP_FILTER,\n                filterValues: {\n                  severities: formGroup.value,\n                  showCleared: showCleared\n                }\n              }\"\n             (click)=\"deselectChip(chip); $event.stopPropagation()\"\n           >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <i\n              class=\"status stroked-icon icon-12\"\n              [attr.data-cy]=\"'c8y-alarms-filter--icon-' + chip\"\n              [c8yIcon]=\"chip | AlarmSeverityToIcon\"\n              [ngClass]=\"chip | lowercase\"\n            ></i>\n            {{ SEVERITY_LABELS[chip] | translate }}\n          </span>\n        </ng-container>\n        <ng-template #allAlarms>\n          <span class=\"text-truncate\" title=\"{{ 'All severities' | translate }}\">\n            {{ 'All severities' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last\">\n        <button\n          class=\"btn-default btn btn--caret\"\n          title=\"{{ chips | AlarmSeveritiesToTitle }}\"\n          data-cy=\"c8y-alarms-filter\"\n          dropdownToggle\n          (click)=\"resetForm()\"\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <ul\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center sticky-top separator-bottom\">\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"'All' | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            data-cy=\"c8y-alarms-filter--all\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"allChanged($event)\"\n            [ngModel]=\"isEachCheckboxSelected$ | async\"\n            [indeterminate]=\"isIndeterminate$ | async\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"'bell'\"\n          ></i>\n          <span class=\"m-l-8\">{{ 'All' | translate }}</span>\n        </label>\n      </li>\n      <li\n        class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center\"\n        *ngFor=\"let severity of severitiesList\"\n      >\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"SEVERITY_LABELS[severity] | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            [attr.data-cy]=\"'c8y-alarms-filter--' + severity\"\n            [formControlName]=\"severity\"\n            [value]=\"severity\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"severity | AlarmSeverityToIcon\"\n            [ngClass]=\"severity | lowercase\"\n          ></i>\n          <span class=\"m-l-8\">{{ SEVERITY_LABELS[severity] | translate }}</span>\n        </label>\n        <!-- badge -->\n        <div\n          class=\"badge badge-info m-l-auto\"\n          *ngIf=\"alarmCounts[severity] || alarmCounts[severity] === 0\"\n        >\n          <i\n            class=\"icon-spin\"\n            [c8yIcon]=\"'circle-o-notch'\"\n            *ngIf=\"countLoading\"\n          ></i>\n          <span\n            *ngIf=\"!countLoading\"\n            [attr.data-cy]=\"'c8y-alarms-filter--' + severity + '-badge'\"\n          >\n            {{ alarmCounts[severity] < 99 ? alarmCounts[severity] : '99+' }}\n          </span>\n        </div>\n      </li>\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center separator-top\">\n        <label\n          class=\"c8y-switch\"\n          [attr.aria-label]=\"'Show cleared alarms' | translate\"\n          [attr.data-cy]=\"'c8y-alarms-filter--cleared'\"\n        >\n          <input\n            type=\"checkbox\"\n            #showClearedCheckbox\n            [ngModelOptions]=\"{ standalone: true }\"\n            [(ngModel)]=\"showCleared\"\n            (click)=\"markSeveritiesAsTouched(); updateAlarmsCount(showClearedCheckbox.checked)\"\n          />\n          <span></span>\n          <span\n            class=\"text-truncate\"\n            title=\"{{ 'Show cleared alarms' | translate }}\"\n          >\n            {{ 'Show cleared alarms' | translate }}\n          </span>\n        </label>\n      </li>\n\n      <div class=\"p-16 d-flex sticky-bottom separator-top\">\n        <button\n          data-cy=\"c8y-alarms-filter--apply\"\n          class=\"btn btn-primary btn-sm flex-grow\"\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n          [actionData]=\"{\n            component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARMS_FILTER,\n            action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.APPLY_FILTER,\n            filterValues: {\n              severities: formGroup.value,\n              showCleared: showCleared\n            }\n          }\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          (click)=\"applyFilters(false); closeDropdown()\"\n          [disabled]=\"shouldDisableApplyButton$ | async\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </ul>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'c8y-alarms-filter', imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        BsDropdownDirective,
+                        CdkTrapFocus,
+                        NgIf,
+                        NgFor,
+                        ProductExperienceDirective,
+                        IconDirective,
+                        NgClass,
+                        BsDropdownToggleDirective,
+                        BsDropdownMenuDirective,
+                        RequiredInputPlaceholderDirective,
+                        C8yTranslatePipe,
+                        AsyncPipe,
+                        LowerCasePipe,
+                        AlarmSeverityToIconPipe,
+                        AlarmSeveritiesToTitlePipe
+                    ], template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by severity' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\" style=\"min-width: 104px; padding-top: 0; padding-bottom: 0;\">\n        <ng-container *ngIf=\"chips.length !== severitiesList.length; else allAlarms\">\n          <span\n            class=\"tag tag--info chip\"\n            [attr.data-cy]=\"'c8y-alarms-filter--chip-' + chip\"\n            *ngFor=\"let chip of chips\"\n          >\n           <button\n             class=\"btn btn-xs btn-clean text-10\"\n             title=\"{{ 'Remove' | translate }}\"\n             type=\"button\"\n             data-cy=\"c8y-alarms-filter--remove-chip\"\n             c8yProductExperience\n             [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n             [actionData]=\"{\n                component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARMS_FILTER,\n                action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.REMOVE_CHIP_FILTER,\n                filterValues: {\n                  severities: formGroup.value,\n                  showCleared: showCleared\n                }\n              }\"\n             (click)=\"deselectChip(chip); $event.stopPropagation()\"\n           >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <i\n              class=\"status stroked-icon icon-12\"\n              [attr.data-cy]=\"'c8y-alarms-filter--icon-' + chip\"\n              [c8yIcon]=\"chip | AlarmSeverityToIcon\"\n              [ngClass]=\"chip | lowercase\"\n            ></i>\n            {{ SEVERITY_LABELS[chip] | translate }}\n          </span>\n        </ng-container>\n        <ng-template #allAlarms>\n          <span class=\"text-truncate\" title=\"{{ 'All severities' | translate }}\">\n            {{ 'All severities' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last\">\n        <button\n          class=\"btn-default btn btn--caret\"\n          title=\"{{ chips | AlarmSeveritiesToTitle }}\"\n          data-cy=\"c8y-alarms-filter\"\n          dropdownToggle\n          (click)=\"resetForm()\"\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <ul\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center sticky-top separator-bottom\">\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"'All' | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            data-cy=\"c8y-alarms-filter--all\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"allChanged($event)\"\n            [ngModel]=\"isEachCheckboxSelected$ | async\"\n            [indeterminate]=\"isIndeterminate$ | async\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"'bell'\"\n          ></i>\n          <span class=\"m-l-8\">{{ 'All' | translate }}</span>\n        </label>\n      </li>\n      <li\n        class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center\"\n        *ngFor=\"let severity of severitiesList\"\n      >\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"SEVERITY_LABELS[severity] | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            [attr.data-cy]=\"'c8y-alarms-filter--' + severity\"\n            [formControlName]=\"severity\"\n            [value]=\"severity\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"severity | AlarmSeverityToIcon\"\n            [ngClass]=\"severity | lowercase\"\n          ></i>\n          <span class=\"m-l-8\">{{ SEVERITY_LABELS[severity] | translate }}</span>\n        </label>\n        <!-- badge -->\n        <div\n          class=\"badge badge-info m-l-auto\"\n          *ngIf=\"alarmCounts[severity] || alarmCounts[severity] === 0\"\n        >\n          <i\n            class=\"icon-spin\"\n            [c8yIcon]=\"'circle-o-notch'\"\n            *ngIf=\"countLoading\"\n          ></i>\n          <span\n            *ngIf=\"!countLoading\"\n            [attr.data-cy]=\"'c8y-alarms-filter--' + severity + '-badge'\"\n          >\n            {{ alarmCounts[severity] < 99 ? alarmCounts[severity] : '99+' }}\n          </span>\n        </div>\n      </li>\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center separator-top\">\n        <label\n          class=\"c8y-switch\"\n          [attr.aria-label]=\"'Show cleared alarms' | translate\"\n          [attr.data-cy]=\"'c8y-alarms-filter--cleared'\"\n        >\n          <input\n            type=\"checkbox\"\n            #showClearedCheckbox\n            [ngModelOptions]=\"{ standalone: true }\"\n            [(ngModel)]=\"showCleared\"\n            (click)=\"markSeveritiesAsTouched(); updateAlarmsCount(showClearedCheckbox.checked)\"\n          />\n          <span></span>\n          <span\n            class=\"text-truncate\"\n            title=\"{{ 'Show cleared alarms' | translate }}\"\n          >\n            {{ 'Show cleared alarms' | translate }}\n          </span>\n        </label>\n      </li>\n\n      <div class=\"p-16 d-flex sticky-bottom separator-top\">\n        <button\n          data-cy=\"c8y-alarms-filter--apply\"\n          class=\"btn btn-primary btn-sm flex-grow\"\n          c8yProductExperience\n          [actionName]=\"PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS\"\n          [actionData]=\"{\n            component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARMS_FILTER,\n            action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.APPLY_FILTER,\n            filterValues: {\n              severities: formGroup.value,\n              showCleared: showCleared\n            }\n          }\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          (click)=\"applyFilters(false); closeDropdown()\"\n          [disabled]=\"shouldDisableApplyButton$ | async\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </ul>\n  </div>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: AlarmsViewService }, { type: i3.AlertService }, { type: i1.Router }, { type: i1.ActivatedRoute }], propDecorators: { contextSourceId: [{
                 type: Input
             }], onFilterApplied: [{
@@ -1506,11 +1539,22 @@ class AlarmsIconComponent {
             this.typeFilters.find(filter => filter.filters.type === this.alarm.type)?.color || 'none';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmsIconComponent, isStandalone: false, selector: "c8y-alarms-icon", inputs: { alarm: "alarm", typeFilters: "typeFilters" }, ngImport: i0, template: "<button\n  class=\"btn-clean severity\"\n  [attr.aria-label]=\"\n    alarmSeverityLabel | translate: { alarmSeverity: alarm.severity | AlarmSeverityToLabel }\n  \"\n  [tooltip]=\"\n    alarmSeverityLabel | translate: { alarmSeverity: alarm.severity | AlarmSeverityToLabel }\n  \"\n  placement=\"right\"\n  container=\"body\"\n  type=\"button\"\n  (click)=\"$event.stopPropagation()\"\n  [delay]=\"500\"\n>\n  <i\n    class=\"status stroked-icon\"\n    [c8yIcon]=\"alarm.severity | AlarmSeverityToIcon\"\n    [ngClass]=\"alarm.severity | lowercase\"\n  ></i>\n</button>\n<button\n  class=\"btn-clean status\"\n  [ngStyle]=\"{ 'background-color': iconBackgroundColor }\"\n  [attr.aria-label]=\"\n    alarmStatusLabel | translate: { alarmStatus: alarm.status | AlarmStatusToLabel }\n  \"\n  [tooltip]=\"\n    (alarmStatusLabel | translate: { alarmStatus: alarm.status | AlarmStatusToLabel }) +\n    '\\n' +\n    (alarmStatusType | translate: { alarmType: alarm.type })\n  \"\n  placement=\"right\"\n  container=\"body\"\n  type=\"button\"\n  [ngClass]=\"{ 'circle-icon-wrapper': isFilterApplied }\"\n  data-cy=\"c8y-alarms-icon--status-icon\"\n  (click)=\"$event.stopPropagation()\"\n  [delay]=\"500\"\n>\n  <i\n    [c8yIcon]=\"alarm.status | AlarmStatusToIcon\"\n    [ngClass]=\"{ 'stroked-icon': isFilterApplied }\"\n  ></i>\n</button>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: AlarmSeverityToIconPipe, name: "AlarmSeverityToIcon" }, { kind: "pipe", type: AlarmStatusToIconPipe, name: "AlarmStatusToIcon" }, { kind: "pipe", type: AlarmSeverityToLabelPipe, name: "AlarmSeverityToLabel" }, { kind: "pipe", type: AlarmStatusToLabelPipe, name: "AlarmStatusToLabel" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmsIconComponent, isStandalone: true, selector: "c8y-alarms-icon", inputs: { alarm: "alarm", typeFilters: "typeFilters" }, ngImport: i0, template: "<button\n  class=\"btn-clean severity\"\n  [attr.aria-label]=\"\n    alarmSeverityLabel | translate: { alarmSeverity: alarm.severity | AlarmSeverityToLabel }\n  \"\n  [tooltip]=\"\n    alarmSeverityLabel | translate: { alarmSeverity: alarm.severity | AlarmSeverityToLabel }\n  \"\n  placement=\"right\"\n  container=\"body\"\n  type=\"button\"\n  (click)=\"$event.stopPropagation()\"\n  [delay]=\"500\"\n>\n  <i\n    class=\"status stroked-icon\"\n    [c8yIcon]=\"alarm.severity | AlarmSeverityToIcon\"\n    [ngClass]=\"alarm.severity | lowercase\"\n  ></i>\n</button>\n<button\n  class=\"btn-clean status\"\n  [ngStyle]=\"{ 'background-color': iconBackgroundColor }\"\n  [attr.aria-label]=\"\n    alarmStatusLabel | translate: { alarmStatus: alarm.status | AlarmStatusToLabel }\n  \"\n  [tooltip]=\"\n    (alarmStatusLabel | translate: { alarmStatus: alarm.status | AlarmStatusToLabel }) +\n    '\\n' +\n    (alarmStatusType | translate: { alarmType: alarm.type })\n  \"\n  placement=\"right\"\n  container=\"body\"\n  type=\"button\"\n  [ngClass]=\"{ 'circle-icon-wrapper': isFilterApplied }\"\n  data-cy=\"c8y-alarms-icon--status-icon\"\n  (click)=\"$event.stopPropagation()\"\n  [delay]=\"500\"\n>\n  <i\n    [c8yIcon]=\"alarm.status | AlarmStatusToIcon\"\n    [ngClass]=\"{ 'stroked-icon': isFilterApplied }\"\n  ></i>\n</button>\n", dependencies: [{ kind: "directive", type: 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: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: AlarmSeverityToIconPipe, name: "AlarmSeverityToIcon" }, { kind: "pipe", type: AlarmStatusToIconPipe, name: "AlarmStatusToIcon" }, { kind: "pipe", type: AlarmSeverityToLabelPipe, name: "AlarmSeverityToLabel" }, { kind: "pipe", type: AlarmStatusToLabelPipe, name: "AlarmStatusToLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms-icon', standalone: false, template: "<button\n  class=\"btn-clean severity\"\n  [attr.aria-label]=\"\n    alarmSeverityLabel | translate: { alarmSeverity: alarm.severity | AlarmSeverityToLabel }\n  \"\n  [tooltip]=\"\n    alarmSeverityLabel | translate: { alarmSeverity: alarm.severity | AlarmSeverityToLabel }\n  \"\n  placement=\"right\"\n  container=\"body\"\n  type=\"button\"\n  (click)=\"$event.stopPropagation()\"\n  [delay]=\"500\"\n>\n  <i\n    class=\"status stroked-icon\"\n    [c8yIcon]=\"alarm.severity | AlarmSeverityToIcon\"\n    [ngClass]=\"alarm.severity | lowercase\"\n  ></i>\n</button>\n<button\n  class=\"btn-clean status\"\n  [ngStyle]=\"{ 'background-color': iconBackgroundColor }\"\n  [attr.aria-label]=\"\n    alarmStatusLabel | translate: { alarmStatus: alarm.status | AlarmStatusToLabel }\n  \"\n  [tooltip]=\"\n    (alarmStatusLabel | translate: { alarmStatus: alarm.status | AlarmStatusToLabel }) +\n    '\\n' +\n    (alarmStatusType | translate: { alarmType: alarm.type })\n  \"\n  placement=\"right\"\n  container=\"body\"\n  type=\"button\"\n  [ngClass]=\"{ 'circle-icon-wrapper': isFilterApplied }\"\n  data-cy=\"c8y-alarms-icon--status-icon\"\n  (click)=\"$event.stopPropagation()\"\n  [delay]=\"500\"\n>\n  <i\n    [c8yIcon]=\"alarm.status | AlarmStatusToIcon\"\n    [ngClass]=\"{ 'stroked-icon': isFilterApplied }\"\n  ></i>\n</button>\n" }]
+            args: [{ selector: 'c8y-alarms-icon', imports: [
+                        TooltipDirective,
+                        IconDirective,
+                        NgClass,
+                        NgStyle,
+                        C8yTranslatePipe,
+                        LowerCasePipe,
+                        AlarmSeverityToIconPipe,
+                        AlarmStatusToIconPipe,
+                        AlarmSeverityToLabelPipe,
+                        AlarmStatusToLabelPipe
+                    ], template: "<button\n  class=\"btn-clean severity\"\n  [attr.aria-label]=\"\n    alarmSeverityLabel | translate: { alarmSeverity: alarm.severity | AlarmSeverityToLabel }\n  \"\n  [tooltip]=\"\n    alarmSeverityLabel | translate: { alarmSeverity: alarm.severity | AlarmSeverityToLabel }\n  \"\n  placement=\"right\"\n  container=\"body\"\n  type=\"button\"\n  (click)=\"$event.stopPropagation()\"\n  [delay]=\"500\"\n>\n  <i\n    class=\"status stroked-icon\"\n    [c8yIcon]=\"alarm.severity | AlarmSeverityToIcon\"\n    [ngClass]=\"alarm.severity | lowercase\"\n  ></i>\n</button>\n<button\n  class=\"btn-clean status\"\n  [ngStyle]=\"{ 'background-color': iconBackgroundColor }\"\n  [attr.aria-label]=\"\n    alarmStatusLabel | translate: { alarmStatus: alarm.status | AlarmStatusToLabel }\n  \"\n  [tooltip]=\"\n    (alarmStatusLabel | translate: { alarmStatus: alarm.status | AlarmStatusToLabel }) +\n    '\\n' +\n    (alarmStatusType | translate: { alarmType: alarm.type })\n  \"\n  placement=\"right\"\n  container=\"body\"\n  type=\"button\"\n  [ngClass]=\"{ 'circle-icon-wrapper': isFilterApplied }\"\n  data-cy=\"c8y-alarms-icon--status-icon\"\n  (click)=\"$event.stopPropagation()\"\n  [delay]=\"500\"\n>\n  <i\n    [c8yIcon]=\"alarm.status | AlarmStatusToIcon\"\n    [ngClass]=\"{ 'stroked-icon': isFilterApplied }\"\n  ></i>\n</button>\n" }]
         }], propDecorators: { alarm: [{
                 type: Input
             }], typeFilters: [{
@@ -1629,11 +1673,23 @@ class AlarmsIntervalRefreshComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsIntervalRefreshComponent, deps: [{ token: i1$2.FormBuilder }, { token: AlarmsViewService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmsIntervalRefreshComponent, isStandalone: false, selector: "c8y-alarms-interval-refresh", inputs: { isDisabled: "isDisabled", alarmsListLoading$: "alarmsListLoading$", isIntervalToggleEnabled: "isIntervalToggleEnabled" }, outputs: { onCountdownEnded: "onCountdownEnded" }, viewQueries: [{ propertyName: "countdownIntervalComponent", first: true, predicate: CountdownIntervalComponent, descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex a-i-center fit-w fit-h\"\n  [formGroup]=\"toggleIntervalForm\"\n>\n  <label class=\"m-b-0 m-r-8 text-normal text-muted flex-no-shrink\">\n    {{ 'Auto refresh' | translate }}\n  </label>\n  <div class=\"input-group\">\n    <label\n      class=\"toggle-countdown\"\n      [class.toggle-countdown-disabled]=\"isDisabled\"\n      [attr.aria-label]=\"getTooltip() | translate\"\n      [tooltip]=\"getTooltip() | translate\"\n      placement=\"bottom\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      data-cy=\"c8y-alarms-interval-refresh--toggle-countdown\"\n    >\n      <input\n        type=\"checkbox\"\n        data-cy=\"c8y-alarms-interval-toggle\"\n        formControlName=\"intervalToggle\"\n        (click)=\"trackUserClickOnIntervalToggle($event.target)\"\n      />\n      <c8y-countdown-interval\n        *ngIf=\"isIntervalToggleEnabled\"\n        [countdownInterval]=\"toggleIntervalForm.value.refreshInterval\"\n        (countdownEnded)=\"onCountdownEnded.emit()\"\n      ></c8y-countdown-interval>\n      <i\n        data-cy=\"c8y-alarms-interval-refresh--pause\"\n        c8yIcon=\"pause\"\n        *ngIf=\"!isIntervalToggleEnabled\"\n      ></i>\n    </label>\n    <div\n      class=\"c8y-select-wrapper\"\n      *ngIf=\"!isDisabled\"\n    >\n      <select\n        class=\"form-control text-12\"\n        [attr.aria-label]=\"'Refresh interval in seconds' | translate\"\n        [tooltip]=\"'Refresh interval in seconds' | translate\"\n        placement=\"bottom\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n        [container]=\"'body'\"\n        formControlName=\"refreshInterval\"\n        data-cy=\"c8y-alarms-interval-refresh--selector\"\n      >\n        <option\n          [disabled]=\"isDisabled\"\n          *ngFor=\"let refreshInterval of refreshIntervalsInMilliseconds\"\n          [ngValue]=\"refreshInterval\"\n          [attr.data-cy]=\"'c8y-interval-' + refreshInterval\"\n        >\n          {{ SECONDS_UNTIL_REFRESH | translate: { seconds: refreshInterval / 1000 } }}\n        </option>\n      </select>\n      <span></span>\n    </div>\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default\"\n        style=\"border-left: 0\"\n        [attr.aria-label]=\"'Refresh' | translate\"\n        [tooltip]=\"'Refresh' | translate\"\n        placement=\"bottom\"\n        type=\"button\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n        [disabled]=\"isDisabled || (alarmsListLoading$ | async)\"\n        (click)=\"onCountdownEnded.emit()\"\n        data-cy=\"c8y-alarms-interval-refresh--btn\"\n      >\n        <i\n          c8yIcon=\"refresh\"\n          [ngClass]=\"{ 'icon-spin': alarmsListLoading$ | async }\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.CountdownIntervalComponent, selector: "c8y-countdown-interval", inputs: ["countdownInterval"], outputs: ["countdownEnded"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmsIntervalRefreshComponent, isStandalone: true, selector: "c8y-alarms-interval-refresh", inputs: { isDisabled: "isDisabled", alarmsListLoading$: "alarmsListLoading$", isIntervalToggleEnabled: "isIntervalToggleEnabled" }, outputs: { onCountdownEnded: "onCountdownEnded" }, viewQueries: [{ propertyName: "countdownIntervalComponent", first: true, predicate: CountdownIntervalComponent, descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex a-i-center fit-w fit-h\"\n  [formGroup]=\"toggleIntervalForm\"\n>\n  <label class=\"m-b-0 m-r-8 text-normal text-muted flex-no-shrink\">\n    {{ 'Auto refresh' | translate }}\n  </label>\n  <div class=\"input-group\">\n    <label\n      class=\"toggle-countdown\"\n      [class.toggle-countdown-disabled]=\"isDisabled\"\n      [attr.aria-label]=\"getTooltip() | translate\"\n      [tooltip]=\"getTooltip() | translate\"\n      placement=\"bottom\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      data-cy=\"c8y-alarms-interval-refresh--toggle-countdown\"\n    >\n      <input\n        type=\"checkbox\"\n        data-cy=\"c8y-alarms-interval-toggle\"\n        formControlName=\"intervalToggle\"\n        (click)=\"trackUserClickOnIntervalToggle($event.target)\"\n      />\n      <c8y-countdown-interval\n        *ngIf=\"isIntervalToggleEnabled\"\n        [countdownInterval]=\"toggleIntervalForm.value.refreshInterval\"\n        (countdownEnded)=\"onCountdownEnded.emit()\"\n      ></c8y-countdown-interval>\n      <i\n        data-cy=\"c8y-alarms-interval-refresh--pause\"\n        c8yIcon=\"pause\"\n        *ngIf=\"!isIntervalToggleEnabled\"\n      ></i>\n    </label>\n    <div\n      class=\"c8y-select-wrapper\"\n      *ngIf=\"!isDisabled\"\n    >\n      <select\n        class=\"form-control text-12\"\n        [attr.aria-label]=\"'Refresh interval in seconds' | translate\"\n        [tooltip]=\"'Refresh interval in seconds' | translate\"\n        placement=\"bottom\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n        [container]=\"'body'\"\n        formControlName=\"refreshInterval\"\n        data-cy=\"c8y-alarms-interval-refresh--selector\"\n      >\n        <option\n          [disabled]=\"isDisabled\"\n          *ngFor=\"let refreshInterval of refreshIntervalsInMilliseconds\"\n          [ngValue]=\"refreshInterval\"\n          [attr.data-cy]=\"'c8y-interval-' + refreshInterval\"\n        >\n          {{ SECONDS_UNTIL_REFRESH | translate: { seconds: refreshInterval / 1000 } }}\n        </option>\n      </select>\n      <span></span>\n    </div>\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default\"\n        style=\"border-left: 0\"\n        [attr.aria-label]=\"'Refresh' | translate\"\n        [tooltip]=\"'Refresh' | translate\"\n        placement=\"bottom\"\n        type=\"button\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n        [disabled]=\"isDisabled || (alarmsListLoading$ | async)\"\n        (click)=\"onCountdownEnded.emit()\"\n        data-cy=\"c8y-alarms-interval-refresh--btn\"\n      >\n        <i\n          c8yIcon=\"refresh\"\n          [ngClass]=\"{ 'icon-spin': alarmsListLoading$ | async }\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: 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: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CountdownIntervalComponent, selector: "c8y-countdown-interval", inputs: ["countdownInterval"], outputs: ["countdownEnded"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsIntervalRefreshComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms-interval-refresh', standalone: false, template: "<form\n  class=\"d-flex a-i-center fit-w fit-h\"\n  [formGroup]=\"toggleIntervalForm\"\n>\n  <label class=\"m-b-0 m-r-8 text-normal text-muted flex-no-shrink\">\n    {{ 'Auto refresh' | translate }}\n  </label>\n  <div class=\"input-group\">\n    <label\n      class=\"toggle-countdown\"\n      [class.toggle-countdown-disabled]=\"isDisabled\"\n      [attr.aria-label]=\"getTooltip() | translate\"\n      [tooltip]=\"getTooltip() | translate\"\n      placement=\"bottom\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      data-cy=\"c8y-alarms-interval-refresh--toggle-countdown\"\n    >\n      <input\n        type=\"checkbox\"\n        data-cy=\"c8y-alarms-interval-toggle\"\n        formControlName=\"intervalToggle\"\n        (click)=\"trackUserClickOnIntervalToggle($event.target)\"\n      />\n      <c8y-countdown-interval\n        *ngIf=\"isIntervalToggleEnabled\"\n        [countdownInterval]=\"toggleIntervalForm.value.refreshInterval\"\n        (countdownEnded)=\"onCountdownEnded.emit()\"\n      ></c8y-countdown-interval>\n      <i\n        data-cy=\"c8y-alarms-interval-refresh--pause\"\n        c8yIcon=\"pause\"\n        *ngIf=\"!isIntervalToggleEnabled\"\n      ></i>\n    </label>\n    <div\n      class=\"c8y-select-wrapper\"\n      *ngIf=\"!isDisabled\"\n    >\n      <select\n        class=\"form-control text-12\"\n        [attr.aria-label]=\"'Refresh interval in seconds' | translate\"\n        [tooltip]=\"'Refresh interval in seconds' | translate\"\n        placement=\"bottom\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n        [container]=\"'body'\"\n        formControlName=\"refreshInterval\"\n        data-cy=\"c8y-alarms-interval-refresh--selector\"\n      >\n        <option\n          [disabled]=\"isDisabled\"\n          *ngFor=\"let refreshInterval of refreshIntervalsInMilliseconds\"\n          [ngValue]=\"refreshInterval\"\n          [attr.data-cy]=\"'c8y-interval-' + refreshInterval\"\n        >\n          {{ SECONDS_UNTIL_REFRESH | translate: { seconds: refreshInterval / 1000 } }}\n        </option>\n      </select>\n      <span></span>\n    </div>\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default\"\n        style=\"border-left: 0\"\n        [attr.aria-label]=\"'Refresh' | translate\"\n        [tooltip]=\"'Refresh' | translate\"\n        placement=\"bottom\"\n        type=\"button\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n        [disabled]=\"isDisabled || (alarmsListLoading$ | async)\"\n        (click)=\"onCountdownEnded.emit()\"\n        data-cy=\"c8y-alarms-interval-refresh--btn\"\n      >\n        <i\n          c8yIcon=\"refresh\"\n          [ngClass]=\"{ 'icon-spin': alarmsListLoading$ | async }\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'c8y-alarms-interval-refresh', imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TooltipDirective,
+                        RequiredInputPlaceholderDirective,
+                        NgIf,
+                        CountdownIntervalComponent,
+                        IconDirective,
+                        NgFor,
+                        NgClass,
+                        C8yTranslatePipe,
+                        AsyncPipe
+                    ], template: "<form\n  class=\"d-flex a-i-center fit-w fit-h\"\n  [formGroup]=\"toggleIntervalForm\"\n>\n  <label class=\"m-b-0 m-r-8 text-normal text-muted flex-no-shrink\">\n    {{ 'Auto refresh' | translate }}\n  </label>\n  <div class=\"input-group\">\n    <label\n      class=\"toggle-countdown\"\n      [class.toggle-countdown-disabled]=\"isDisabled\"\n      [attr.aria-label]=\"getTooltip() | translate\"\n      [tooltip]=\"getTooltip() | translate\"\n      placement=\"bottom\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      data-cy=\"c8y-alarms-interval-refresh--toggle-countdown\"\n    >\n      <input\n        type=\"checkbox\"\n        data-cy=\"c8y-alarms-interval-toggle\"\n        formControlName=\"intervalToggle\"\n        (click)=\"trackUserClickOnIntervalToggle($event.target)\"\n      />\n      <c8y-countdown-interval\n        *ngIf=\"isIntervalToggleEnabled\"\n        [countdownInterval]=\"toggleIntervalForm.value.refreshInterval\"\n        (countdownEnded)=\"onCountdownEnded.emit()\"\n      ></c8y-countdown-interval>\n      <i\n        data-cy=\"c8y-alarms-interval-refresh--pause\"\n        c8yIcon=\"pause\"\n        *ngIf=\"!isIntervalToggleEnabled\"\n      ></i>\n    </label>\n    <div\n      class=\"c8y-select-wrapper\"\n      *ngIf=\"!isDisabled\"\n    >\n      <select\n        class=\"form-control text-12\"\n        [attr.aria-label]=\"'Refresh interval in seconds' | translate\"\n        [tooltip]=\"'Refresh interval in seconds' | translate\"\n        placement=\"bottom\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n        [container]=\"'body'\"\n        formControlName=\"refreshInterval\"\n        data-cy=\"c8y-alarms-interval-refresh--selector\"\n      >\n        <option\n          [disabled]=\"isDisabled\"\n          *ngFor=\"let refreshInterval of refreshIntervalsInMilliseconds\"\n          [ngValue]=\"refreshInterval\"\n          [attr.data-cy]=\"'c8y-interval-' + refreshInterval\"\n        >\n          {{ SECONDS_UNTIL_REFRESH | translate: { seconds: refreshInterval / 1000 } }}\n        </option>\n      </select>\n      <span></span>\n    </div>\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default\"\n        style=\"border-left: 0\"\n        [attr.aria-label]=\"'Refresh' | translate\"\n        [tooltip]=\"'Refresh' | translate\"\n        placement=\"bottom\"\n        type=\"button\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n        [disabled]=\"isDisabled || (alarmsListLoading$ | async)\"\n        (click)=\"onCountdownEnded.emit()\"\n        data-cy=\"c8y-alarms-interval-refresh--btn\"\n      >\n        <i\n          c8yIcon=\"refresh\"\n          [ngClass]=\"{ 'icon-spin': alarmsListLoading$ | async }\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: AlarmsViewService }], propDecorators: { isDisabled: [{
                 type: Input
             }], alarmsListLoading$: [{
@@ -1781,11 +1837,37 @@ class AlarmsListComponent {
         this.activeChildParam$.subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsListComponent, deps: [{ token: i1.ActivatedRoute }, { token: AlarmsViewService }, { token: i3.ContextRouteService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmsListComponent, isStandalone: false, 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        data-cy=\"c8y-alarms-list--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-alarms-list--group\"\n  >\n    <c8y-li-timeline\n      class=\"pointer\"\n      role=\"button\"\n      data-cy=\"c8y-alarms-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        data-cy=\"c8y-alarms-list--last-occurrence-date\"\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            data-cy=\"c8y-alarms-list--badge\"\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\" data-cy=\"c8y-alarms-list--alarm-text\">\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                  data-cy=\"c8y-alarms-list--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\n      data-cy=\"c8y-alarms-list--c8y-loading\"\n      *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=\"c8y-alarms-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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.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: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }, { kind: "pipe", type: AlarmListIndicatorPipe, name: "alarmListIndicator" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmsListComponent, isStandalone: true, 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        data-cy=\"c8y-alarms-list--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-alarms-list--group\"\n  >\n    <c8y-li-timeline\n      class=\"pointer\"\n      role=\"button\"\n      data-cy=\"c8y-alarms-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        data-cy=\"c8y-alarms-list--last-occurrence-date\"\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            data-cy=\"c8y-alarms-list--badge\"\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\" data-cy=\"c8y-alarms-list--alarm-text\">\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                  data-cy=\"c8y-alarms-list--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\n      data-cy=\"c8y-alarms-list--c8y-loading\"\n      *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=\"c8y-alarms-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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: 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: ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: 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: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: AlarmsIconComponent, selector: "c8y-alarms-icon", inputs: ["alarm", "typeFilters"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: AlarmListIndicatorPipe, name: "alarmListIndicator" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms-list', standalone: false, 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        data-cy=\"c8y-alarms-list--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-alarms-list--group\"\n  >\n    <c8y-li-timeline\n      class=\"pointer\"\n      role=\"button\"\n      data-cy=\"c8y-alarms-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        data-cy=\"c8y-alarms-list--last-occurrence-date\"\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            data-cy=\"c8y-alarms-list--badge\"\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\" data-cy=\"c8y-alarms-list--alarm-text\">\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                  data-cy=\"c8y-alarms-list--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\n      data-cy=\"c8y-alarms-list--c8y-loading\"\n      *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=\"c8y-alarms-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', imports: [
+                        NgClass,
+                        NgIf,
+                        C8yTranslateDirective,
+                        ListGroupComponent,
+                        NgStyle,
+                        ForOfDirective,
+                        ListItemTimelineComponent,
+                        RouterLinkActive,
+                        RouterLink,
+                        TooltipDirective,
+                        ListItemComponent,
+                        ListItemIconComponent,
+                        AlarmsIconComponent,
+                        ListItemBodyComponent,
+                        IconDirective,
+                        NgFor,
+                        LoadingComponent,
+                        EmptyStateComponent,
+                        GuideDocsComponent,
+                        GuideHrefDirective,
+                        DynamicComponentAlertsComponent,
+                        C8yTranslatePipe,
+                        AsyncPipe,
+                        DatePipe,
+                        AlarmListIndicatorPipe
+                    ], 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        data-cy=\"c8y-alarms-list--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-alarms-list--group\"\n  >\n    <c8y-li-timeline\n      class=\"pointer\"\n      role=\"button\"\n      data-cy=\"c8y-alarms-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        data-cy=\"c8y-alarms-list--last-occurrence-date\"\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            data-cy=\"c8y-alarms-list--badge\"\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\" data-cy=\"c8y-alarms-list--alarm-text\">\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                  data-cy=\"c8y-alarms-list--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\n      data-cy=\"c8y-alarms-list--c8y-loading\"\n      *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=\"c8y-alarms-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.ActivatedRoute }, { type: AlarmsViewService }, { type: i3.ContextRouteService }, { type: i1.Router }], propDecorators: { alarms: [{
                 type: Input
             }], hasPermissions: [{
@@ -1951,13 +2033,13 @@ class AlarmsDateFilterComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsDateFilterComponent, deps: [{ token: i1$2.FormBuilder }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: AlarmsViewService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmsDateFilterComponent, isStandalone: false, selector: "c8y-alarms-date-filter", inputs: { DEFAULT_INTERVAL: "DEFAULT_INTERVAL", updateQueryParams: "updateQueryParams", date: "date" }, outputs: { dateFilterChange: "dateFilterChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmsDateFilterComponent, isStandalone: true, selector: "c8y-alarms-date-filter", inputs: { DEFAULT_INTERVAL: "DEFAULT_INTERVAL", updateQueryParams: "updateQueryParams", date: "date" }, outputs: { dateFilterChange: "dateFilterChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AlarmsDateFilterComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: BsDropdownDirective, descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex gap-16 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n  [formGroup]=\"form\"\n>\n  <div\n    class=\"dropdown flex-grow\"\n    c8yDropdownDirection\n    #dropDirection=\"bs-dropdown\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      attr.aria-label=\"{{\n        (form.value.currentDateContextInterval === 'none'\n          ? noFilterLabel\n          : (date[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date[1] | c8yDate: DATE_FORMAT)\n        ) | translate\n      }}\"\n      tooltip=\"{{\n        (form.value.currentDateContextInterval === 'none'\n          ? noFilterLabel\n          : (date[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date[1] | c8yDate: DATE_FORMAT)\n        ) | translate\n      }}\"\n      placement=\"top\"\n      container=\"body\"\n      data-cy=\"alarms-date-filter--date-picker-dropdown-button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"m-r-4\"\n        c8yIcon=\"schedule1\"\n      ></i>\n      <div class=\"d-col text-left fit-w\">\n        <span\n          class=\"text-12\"\n          data-cy=\"widget-time-context--selected-interval\"\n        >\n          {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}\n        </span>\n        <span\n          class=\"text-10 text-muted text-truncate\"\n          data-cy=\"alarms-date-filter--selected-time-range\"\n          *ngIf=\"form.controls.currentDateContextInterval.value !== 'none'\"\n        >\n          {{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\n        </span>\n      </div>\n      <span class=\"caret m-r-16 m-l-4\"></span>\n    </button>\n\n    <ul\n      class=\"dropdown-menu dropdown-menu--date-range\"\n      *dropdownMenu\n    >\n      <c8y-interval-picker\n        class=\"d-contents\"\n        formControlName=\"currentDateContextInterval\"\n        [INTERVALS]=\"INTERVALS\"\n      ></c8y-interval-picker>\n\n      <ng-container *ngIf=\"form.controls.currentDateContextInterval.value === 'custom'\">\n        <div class=\"p-l-16 p-r-16\">\n          <c8y-form-group\n            class=\"m-b-8\"\n            [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n          >\n            <label\n              [title]=\"'From`date`' | translate\"\n              for=\"temporaryUserSelectedFromDate\"\n              translate\n            >\n              From`date`\n            </label>\n            <c8y-date-time-picker\n              id=\"temporaryUserSelectedFromDate\"\n              [maxDate]=\"form.value.temporaryUserSelectedToDate\"\n              [placeholder]=\"'From`date`' | translate\"\n              [formControl]=\"form.controls.temporaryUserSelectedFromDate\"\n              [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n            ></c8y-date-time-picker>\n            <c8y-messages [show]=\"form.controls.temporaryUserSelectedFromDate.errors\">\n              <c8y-message\n                name=\"dateAfterRangeMax\"\n                [text]=\"'This date is after the latest allowed date.' | translate\"\n              ></c8y-message>\n              <c8y-message\n                name=\"invalidDateTime\"\n                [text]=\"'This date is invalid.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n\n          <c8y-form-group\n            class=\"m-b-8\"\n            [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n          >\n            <label\n              [title]=\"'To`date`' | translate\"\n              for=\"temporaryUserSelectedToDate\"\n              translate\n            >\n              To`date`\n            </label>\n            <c8y-date-time-picker\n              id=\"temporaryUserSelectedToDate\"\n              [minDate]=\"form.value.temporaryUserSelectedFromDate\"\n              [placeholder]=\"'To`date`' | translate\"\n              [formControl]=\"form.controls.temporaryUserSelectedToDate\"\n              [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n            ></c8y-date-time-picker>\n            <c8y-messages [show]=\"form.controls.temporaryUserSelectedToDate.errors\">\n              <c8y-message\n                name=\"dateBeforeRangeMin\"\n                [text]=\"'This date is before the earliest allowed date.' | translate\"\n              ></c8y-message>\n              <c8y-message\n                name=\"invalidDateTime\"\n                [text]=\"'This date is invalid.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n        </div>\n\n        <div class=\"p-16 d-flex gap-8 separator-top\">\n          <button\n            class=\"btn btn-primary btn-sm flex-grow\"\n            title=\"{{ 'Apply' | translate }}\"\n            type=\"button\"\n            (click)=\"applyDateFilter(); dropdown.isOpen = false\"\n            [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </ng-container>\n    </ul>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DropdownDirectionDirective, selector: "[dropdown][c8yBsDropdownDirection],[dropdown][c8yDropdownDirection]" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i3.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i3.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { 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: "component", type: i8.IntervalPickerComponent, selector: "c8y-interval-picker", inputs: ["INTERVALS"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }] }); }
+        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: BsDropdownDirective, descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex gap-16 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n  [formGroup]=\"form\"\n>\n  <div\n    class=\"dropdown flex-grow\"\n    c8yDropdownDirection\n    #dropDirection=\"bs-dropdown\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      attr.aria-label=\"{{\n        (form.value.currentDateContextInterval === 'none'\n          ? noFilterLabel\n          : (date[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date[1] | c8yDate: DATE_FORMAT)\n        ) | translate\n      }}\"\n      tooltip=\"{{\n        (form.value.currentDateContextInterval === 'none'\n          ? noFilterLabel\n          : (date[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date[1] | c8yDate: DATE_FORMAT)\n        ) | translate\n      }}\"\n      placement=\"top\"\n      container=\"body\"\n      data-cy=\"alarms-date-filter--date-picker-dropdown-button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"m-r-4\"\n        c8yIcon=\"schedule1\"\n      ></i>\n      <div class=\"d-col text-left fit-w\">\n        <span\n          class=\"text-12\"\n          data-cy=\"widget-time-context--selected-interval\"\n        >\n          {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}\n        </span>\n        <span\n          class=\"text-10 text-muted text-truncate\"\n          data-cy=\"alarms-date-filter--selected-time-range\"\n          *ngIf=\"form.controls.currentDateContextInterval.value !== 'none'\"\n        >\n          {{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\n        </span>\n      </div>\n      <span class=\"caret m-r-16 m-l-4\"></span>\n    </button>\n\n    <ul\n      class=\"dropdown-menu dropdown-menu--date-range\"\n      *dropdownMenu\n    >\n      <c8y-interval-picker\n        class=\"d-contents\"\n        formControlName=\"currentDateContextInterval\"\n        [INTERVALS]=\"INTERVALS\"\n      ></c8y-interval-picker>\n\n      <ng-container *ngIf=\"form.controls.currentDateContextInterval.value === 'custom'\">\n        <div class=\"p-l-16 p-r-16\">\n          <c8y-form-group\n            class=\"m-b-8\"\n            [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n          >\n            <label\n              [title]=\"'From`date`' | translate\"\n              for=\"temporaryUserSelectedFromDate\"\n              translate\n            >\n              From`date`\n            </label>\n            <c8y-date-time-picker\n              id=\"temporaryUserSelectedFromDate\"\n              [maxDate]=\"form.value.temporaryUserSelectedToDate\"\n              [placeholder]=\"'From`date`' | translate\"\n              [formControl]=\"form.controls.temporaryUserSelectedFromDate\"\n              [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n            ></c8y-date-time-picker>\n            <c8y-messages [show]=\"form.controls.temporaryUserSelectedFromDate.errors\">\n              <c8y-message\n                name=\"dateAfterRangeMax\"\n                [text]=\"'This date is after the latest allowed date.' | translate\"\n              ></c8y-message>\n              <c8y-message\n                name=\"invalidDateTime\"\n                [text]=\"'This date is invalid.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n\n          <c8y-form-group\n            class=\"m-b-8\"\n            [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n          >\n            <label\n              [title]=\"'To`date`' | translate\"\n              for=\"temporaryUserSelectedToDate\"\n              translate\n            >\n              To`date`\n            </label>\n            <c8y-date-time-picker\n              id=\"temporaryUserSelectedToDate\"\n              [minDate]=\"form.value.temporaryUserSelectedFromDate\"\n              [placeholder]=\"'To`date`' | translate\"\n              [formControl]=\"form.controls.temporaryUserSelectedToDate\"\n              [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n            ></c8y-date-time-picker>\n            <c8y-messages [show]=\"form.controls.temporaryUserSelectedToDate.errors\">\n              <c8y-message\n                name=\"dateBeforeRangeMin\"\n                [text]=\"'This date is before the earliest allowed date.' | translate\"\n              ></c8y-message>\n              <c8y-message\n                name=\"invalidDateTime\"\n                [text]=\"'This date is invalid.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n        </div>\n\n        <div class=\"p-16 d-flex gap-8 separator-top\">\n          <button\n            class=\"btn btn-primary btn-sm flex-grow\"\n            title=\"{{ 'Apply' | translate }}\"\n            type=\"button\"\n            (click)=\"applyDateFilter(); dropdown.isOpen = false\"\n            [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </ng-container>\n    </ul>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: DropdownDirectionDirective, selector: "[dropdown][c8yBsDropdownDirection],[dropdown][c8yDropdownDirection]" }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: 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: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "component", type: IntervalPickerComponent, selector: "c8y-interval-picker", inputs: ["INTERVALS"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsDateFilterComponent, decorators: [{
             type: Component,
@@ -1967,7 +2049,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => AlarmsDateFilterComponent),
                             multi: true
                         }
-                    ], standalone: false, template: "<form\n  class=\"d-flex gap-16 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n  [formGroup]=\"form\"\n>\n  <div\n    class=\"dropdown flex-grow\"\n    c8yDropdownDirection\n    #dropDirection=\"bs-dropdown\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      attr.aria-label=\"{{\n        (form.value.currentDateContextInterval === 'none'\n          ? noFilterLabel\n          : (date[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date[1] | c8yDate: DATE_FORMAT)\n        ) | translate\n      }}\"\n      tooltip=\"{{\n        (form.value.currentDateContextInterval === 'none'\n          ? noFilterLabel\n          : (date[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date[1] | c8yDate: DATE_FORMAT)\n        ) | translate\n      }}\"\n      placement=\"top\"\n      container=\"body\"\n      data-cy=\"alarms-date-filter--date-picker-dropdown-button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"m-r-4\"\n        c8yIcon=\"schedule1\"\n      ></i>\n      <div class=\"d-col text-left fit-w\">\n        <span\n          class=\"text-12\"\n          data-cy=\"widget-time-context--selected-interval\"\n        >\n          {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}\n        </span>\n        <span\n          class=\"text-10 text-muted text-truncate\"\n          data-cy=\"alarms-date-filter--selected-time-range\"\n          *ngIf=\"form.controls.currentDateContextInterval.value !== 'none'\"\n        >\n          {{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\n        </span>\n      </div>\n      <span class=\"caret m-r-16 m-l-4\"></span>\n    </button>\n\n    <ul\n      class=\"dropdown-menu dropdown-menu--date-range\"\n      *dropdownMenu\n    >\n      <c8y-interval-picker\n        class=\"d-contents\"\n        formControlName=\"currentDateContextInterval\"\n        [INTERVALS]=\"INTERVALS\"\n      ></c8y-interval-picker>\n\n      <ng-container *ngIf=\"form.controls.currentDateContextInterval.value === 'custom'\">\n        <div class=\"p-l-16 p-r-16\">\n          <c8y-form-group\n            class=\"m-b-8\"\n            [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n          >\n            <label\n              [title]=\"'From`date`' | translate\"\n              for=\"temporaryUserSelectedFromDate\"\n              translate\n            >\n              From`date`\n            </label>\n            <c8y-date-time-picker\n              id=\"temporaryUserSelectedFromDate\"\n              [maxDate]=\"form.value.temporaryUserSelectedToDate\"\n              [placeholder]=\"'From`date`' | translate\"\n              [formControl]=\"form.controls.temporaryUserSelectedFromDate\"\n              [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n            ></c8y-date-time-picker>\n            <c8y-messages [show]=\"form.controls.temporaryUserSelectedFromDate.errors\">\n              <c8y-message\n                name=\"dateAfterRangeMax\"\n                [text]=\"'This date is after the latest allowed date.' | translate\"\n              ></c8y-message>\n              <c8y-message\n                name=\"invalidDateTime\"\n                [text]=\"'This date is invalid.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n\n          <c8y-form-group\n            class=\"m-b-8\"\n            [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n          >\n            <label\n              [title]=\"'To`date`' | translate\"\n              for=\"temporaryUserSelectedToDate\"\n              translate\n            >\n              To`date`\n            </label>\n            <c8y-date-time-picker\n              id=\"temporaryUserSelectedToDate\"\n              [minDate]=\"form.value.temporaryUserSelectedFromDate\"\n              [placeholder]=\"'To`date`' | translate\"\n              [formControl]=\"form.controls.temporaryUserSelectedToDate\"\n              [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n            ></c8y-date-time-picker>\n            <c8y-messages [show]=\"form.controls.temporaryUserSelectedToDate.errors\">\n              <c8y-message\n                name=\"dateBeforeRangeMin\"\n                [text]=\"'This date is before the earliest allowed date.' | translate\"\n              ></c8y-message>\n              <c8y-message\n                name=\"invalidDateTime\"\n                [text]=\"'This date is invalid.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n        </div>\n\n        <div class=\"p-16 d-flex gap-8 separator-top\">\n          <button\n            class=\"btn btn-primary btn-sm flex-grow\"\n            title=\"{{ 'Apply' | translate }}\"\n            type=\"button\"\n            (click)=\"applyDateFilter(); dropdown.isOpen = false\"\n            [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </ng-container>\n    </ul>\n  </div>\n</form>\n" }]
+                    ], imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        BsDropdownDirective,
+                        DropdownDirectionDirective,
+                        BsDropdownToggleDirective,
+                        TooltipDirective,
+                        IconDirective,
+                        NgIf,
+                        BsDropdownMenuDirective,
+                        IntervalPickerComponent,
+                        FormGroupComponent,
+                        NgClass,
+                        C8yTranslateDirective,
+                        DateTimePickerComponent,
+                        MessagesComponent,
+                        MessageDirective,
+                        C8yTranslatePipe,
+                        DatePipe
+                    ], template: "<form\n  class=\"d-flex gap-16 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n  [formGroup]=\"form\"\n>\n  <div\n    class=\"dropdown flex-grow\"\n    c8yDropdownDirection\n    #dropDirection=\"bs-dropdown\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      attr.aria-label=\"{{\n        (form.value.currentDateContextInterval === 'none'\n          ? noFilterLabel\n          : (date[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date[1] | c8yDate: DATE_FORMAT)\n        ) | translate\n      }}\"\n      tooltip=\"{{\n        (form.value.currentDateContextInterval === 'none'\n          ? noFilterLabel\n          : (date[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date[1] | c8yDate: DATE_FORMAT)\n        ) | translate\n      }}\"\n      placement=\"top\"\n      container=\"body\"\n      data-cy=\"alarms-date-filter--date-picker-dropdown-button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"m-r-4\"\n        c8yIcon=\"schedule1\"\n      ></i>\n      <div class=\"d-col text-left fit-w\">\n        <span\n          class=\"text-12\"\n          data-cy=\"widget-time-context--selected-interval\"\n        >\n          {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}\n        </span>\n        <span\n          class=\"text-10 text-muted text-truncate\"\n          data-cy=\"alarms-date-filter--selected-time-range\"\n          *ngIf=\"form.controls.currentDateContextInterval.value !== 'none'\"\n        >\n          {{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\n        </span>\n      </div>\n      <span class=\"caret m-r-16 m-l-4\"></span>\n    </button>\n\n    <ul\n      class=\"dropdown-menu dropdown-menu--date-range\"\n      *dropdownMenu\n    >\n      <c8y-interval-picker\n        class=\"d-contents\"\n        formControlName=\"currentDateContextInterval\"\n        [INTERVALS]=\"INTERVALS\"\n      ></c8y-interval-picker>\n\n      <ng-container *ngIf=\"form.controls.currentDateContextInterval.value === 'custom'\">\n        <div class=\"p-l-16 p-r-16\">\n          <c8y-form-group\n            class=\"m-b-8\"\n            [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n          >\n            <label\n              [title]=\"'From`date`' | translate\"\n              for=\"temporaryUserSelectedFromDate\"\n              translate\n            >\n              From`date`\n            </label>\n            <c8y-date-time-picker\n              id=\"temporaryUserSelectedFromDate\"\n              [maxDate]=\"form.value.temporaryUserSelectedToDate\"\n              [placeholder]=\"'From`date`' | translate\"\n              [formControl]=\"form.controls.temporaryUserSelectedFromDate\"\n              [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n            ></c8y-date-time-picker>\n            <c8y-messages [show]=\"form.controls.temporaryUserSelectedFromDate.errors\">\n              <c8y-message\n                name=\"dateAfterRangeMax\"\n                [text]=\"'This date is after the latest allowed date.' | translate\"\n              ></c8y-message>\n              <c8y-message\n                name=\"invalidDateTime\"\n                [text]=\"'This date is invalid.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n\n          <c8y-form-group\n            class=\"m-b-8\"\n            [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n          >\n            <label\n              [title]=\"'To`date`' | translate\"\n              for=\"temporaryUserSelectedToDate\"\n              translate\n            >\n              To`date`\n            </label>\n            <c8y-date-time-picker\n              id=\"temporaryUserSelectedToDate\"\n              [minDate]=\"form.value.temporaryUserSelectedFromDate\"\n              [placeholder]=\"'To`date`' | translate\"\n              [formControl]=\"form.controls.temporaryUserSelectedToDate\"\n              [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n            ></c8y-date-time-picker>\n            <c8y-messages [show]=\"form.controls.temporaryUserSelectedToDate.errors\">\n              <c8y-message\n                name=\"dateBeforeRangeMin\"\n                [text]=\"'This date is before the earliest allowed date.' | translate\"\n              ></c8y-message>\n              <c8y-message\n                name=\"invalidDateTime\"\n                [text]=\"'This date is invalid.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n        </div>\n\n        <div class=\"p-16 d-flex gap-8 separator-top\">\n          <button\n            class=\"btn btn-primary btn-sm flex-grow\"\n            title=\"{{ 'Apply' | translate }}\"\n            type=\"button\"\n            (click)=\"applyDateFilter(); dropdown.isOpen = false\"\n            [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </ng-container>\n    </ul>\n  </div>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: AlarmsViewService }], propDecorators: { DEFAULT_INTERVAL: [{
                 type: Input
             }], updateQueryParams: [{
@@ -2112,11 +2213,28 @@ class AlarmsTypeFilterComponent {
         return activeFilters.map(filter => filter.filters.type).join(',');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsTypeFilterComponent, deps: [{ token: i1$3.AlarmEventSelectorService }, { token: i1.ActivatedRoute }, { token: i1.Router }, { token: i3.ColorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmsTypeFilterComponent, isStandalone: false, selector: "c8y-alarms-type-filter", inputs: { alarms: "alarms", possibleFilters: "possibleFilters", activeFilters: "activeFilters" }, outputs: { onFilterChanged: "onFilterChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex a-i-center\">\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by alarm types' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    (onHidden)=\"resetFilters()\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\">\n        <ng-container *ngIf=\"activeFilters.length > 0; else allTypes\">\n          <span\n            class=\"tag tag--info chip\"\n            style=\"max-width: 150px\"\n            *ngFor=\"let filter of activeFilters\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation(); deselect(filter)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <span\n              class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n              [ngStyle]=\"{ 'background-color': filter.color }\"\n            >\n              <i\n                class=\"stroked-icon\"\n                c8yIcon=\"bell\"\n              ></i>\n            </span>\n            <span\n              class=\"text-truncate text-12 flex-grow\"\n              [title]=\"filter.filters.type\"\n              [attr.aria-label]=\"filter.filters.type\"\n            >\n              {{ filter.filters.type }}\n            </span>\n          </span>\n        </ng-container>\n        <ng-template #allTypes>\n          <span class=\"text-nowrap\">\n            {{ 'All alarm types' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last text-center\">\n        <button\n          class=\"btn-default btn\"\n          [title]=\"'Clear filters' | translate\"\n          *ngIf=\"activeFilters.length\"\n          (click)=\"deselectAll()\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n        <button\n          class=\"btn-default btn btn--caret\"\n          [title]=\"'Alarm types' | translate\"\n          data-cy=\"c8y-alarm-type-filter\"\n          dropdownToggle\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      style=\"min-width: 250px\"\n      *dropdownMenu\n    >\n      <div class=\"p-16 bg-level-2\">\n        <div>\n          <p>\n            <i\n              class=\"text-info m-r-4\"\n              [c8yIcon]=\"'info-circle'\"\n            ></i>\n            <strong tanslate>The list below may not be complete.</strong>\n          </p>\n          <p tanslate>\n            Recent alarms are displayed below. Past alarms might not be shown. Optionally you can\n            add a custom alarm.\n          </p>\n        </div>\n      </div>\n      <c8y-list-group>\n        <div class=\"input-group p-t-16 p-b-16 p-r-32 p-l-32 separator-bottom\">\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            [placeholder]=\"'Custom alarm type' | translate\"\n            [(ngModel)]=\"customAlarmTypeInput\"\n            (keydown)=\"confirmWithEnter($event)\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn-dot text-primary\"\n              [attr.aria-label]=\"'Add custom alarm' | translate\"\n              [tooltip]=\"'Add' | translate\"\n              placement=\"top\"\n              [delay]=\"500\"\n              (click)=\"addCustomAlarmType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n\n        <c8y-li\n          class=\"c8y-list__item__collapse--container-small cdk-drag\"\n          style=\"cursor: pointer\"\n          *ngFor=\"let alarmType of possibleFilters\"\n          (click)=\"toggleAlarmType(alarmType)\"\n        >\n          <c8y-li-checkbox\n            class=\"a-s-center m-t-4 p-r-0 p-l-0\"\n            [selected]=\"alarmType.__active\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"toggleAlarmType(alarmType); $event.stopPropagation()\"\n          ></c8y-li-checkbox>\n          <div class=\"d-flex a-i-center p-l-4\">\n            <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\">\n              <div class=\"c8y-colorpicker c8y-colorpicker--alarm\">\n                <span\n                  class=\"circle-icon-wrapper\"\n                  [ngStyle]=\"{ 'background-color': alarmType.color }\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    [c8yIcon]=\"'bell'\"\n                  ></i>\n                </span>\n              </div>\n            </div>\n            <span\n              class=\"text-truncate text-12 flex-grow\"\n              [title]=\"alarmType.label\"\n              [attr.aria-label]=\"alarmType.label\"\n            >\n              {{ alarmType.label }}\n            </span>\n            <button\n              class=\"btn-dot btn-dot--danger\"\n              [attr.aria-label]=\"'Remove' | translate\"\n              tooltip=\"'Remove' | translate\"\n              placement=\"top\"\n              *ngIf=\"alarmType.__target === null\"\n              [delay]=\"500\"\n              (click)=\"removeCustomAlarm(alarmType); $event.stopPropagation()\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n        </c8y-li>\n        <c8y-li *ngIf=\"possibleFilters.length === 0\">\n          <c8y-ui-empty-state\n            class=\"p-t-8\"\n            icon=\"c8y-alarm\"\n            [title]=\"'No alarm found' | translate\"\n            [subtitle]=\"\n              'There is no alarm to filter. You can still add a custom alarm.' | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n        </c8y-li>\n        <div class=\"sticky-bottom p-16\">\n          <button\n            class=\"btn btn-block btn-primary\"\n            [disabled]=\"possibleFilters.length === 0\"\n            (click)=\"applyFilterChange(); $event.stopPropagation(); filtersDropdown.hide()\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </c8y-list-group>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { 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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmsTypeFilterComponent, isStandalone: true, selector: "c8y-alarms-type-filter", inputs: { alarms: "alarms", possibleFilters: "possibleFilters", activeFilters: "activeFilters" }, outputs: { onFilterChanged: "onFilterChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex a-i-center\">\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by alarm types' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    (onHidden)=\"resetFilters()\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\">\n        <ng-container *ngIf=\"activeFilters.length > 0; else allTypes\">\n          <span\n            class=\"tag tag--info chip\"\n            style=\"max-width: 150px\"\n            *ngFor=\"let filter of activeFilters\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation(); deselect(filter)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <span\n              class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n              [ngStyle]=\"{ 'background-color': filter.color }\"\n            >\n              <i\n                class=\"stroked-icon\"\n                c8yIcon=\"bell\"\n              ></i>\n            </span>\n            <span\n              class=\"text-truncate text-12 flex-grow\"\n              [title]=\"filter.filters.type\"\n              [attr.aria-label]=\"filter.filters.type\"\n            >\n              {{ filter.filters.type }}\n            </span>\n          </span>\n        </ng-container>\n        <ng-template #allTypes>\n          <span class=\"text-nowrap\">\n            {{ 'All alarm types' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last text-center\">\n        <button\n          class=\"btn-default btn\"\n          [title]=\"'Clear filters' | translate\"\n          *ngIf=\"activeFilters.length\"\n          (click)=\"deselectAll()\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n        <button\n          class=\"btn-default btn btn--caret\"\n          [title]=\"'Alarm types' | translate\"\n          data-cy=\"c8y-alarm-type-filter\"\n          dropdownToggle\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      style=\"min-width: 250px\"\n      *dropdownMenu\n    >\n      <div class=\"p-16 bg-level-2\">\n        <div>\n          <p>\n            <i\n              class=\"text-info m-r-4\"\n              [c8yIcon]=\"'info-circle'\"\n            ></i>\n            <strong tanslate>The list below may not be complete.</strong>\n          </p>\n          <p tanslate>\n            Recent alarms are displayed below. Past alarms might not be shown. Optionally you can\n            add a custom alarm.\n          </p>\n        </div>\n      </div>\n      <c8y-list-group>\n        <div class=\"input-group p-t-16 p-b-16 p-r-32 p-l-32 separator-bottom\">\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            [placeholder]=\"'Custom alarm type' | translate\"\n            [(ngModel)]=\"customAlarmTypeInput\"\n            (keydown)=\"confirmWithEnter($event)\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn-dot text-primary\"\n              [attr.aria-label]=\"'Add custom alarm' | translate\"\n              [tooltip]=\"'Add' | translate\"\n              placement=\"top\"\n              [delay]=\"500\"\n              (click)=\"addCustomAlarmType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n\n        <c8y-li\n          class=\"c8y-list__item__collapse--container-small cdk-drag\"\n          style=\"cursor: pointer\"\n          *ngFor=\"let alarmType of possibleFilters\"\n          (click)=\"toggleAlarmType(alarmType)\"\n        >\n          <c8y-li-checkbox\n            class=\"a-s-center m-t-4 p-r-0 p-l-0\"\n            [selected]=\"alarmType.__active\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"toggleAlarmType(alarmType); $event.stopPropagation()\"\n          ></c8y-li-checkbox>\n          <div class=\"d-flex a-i-center p-l-4\">\n            <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\">\n              <div class=\"c8y-colorpicker c8y-colorpicker--alarm\">\n                <span\n                  class=\"circle-icon-wrapper\"\n                  [ngStyle]=\"{ 'background-color': alarmType.color }\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    [c8yIcon]=\"'bell'\"\n                  ></i>\n                </span>\n              </div>\n            </div>\n            <span\n              class=\"text-truncate text-12 flex-grow\"\n              [title]=\"alarmType.label\"\n              [attr.aria-label]=\"alarmType.label\"\n            >\n              {{ alarmType.label }}\n            </span>\n            <button\n              class=\"btn-dot btn-dot--danger\"\n              [attr.aria-label]=\"'Remove' | translate\"\n              tooltip=\"'Remove' | translate\"\n              placement=\"top\"\n              *ngIf=\"alarmType.__target === null\"\n              [delay]=\"500\"\n              (click)=\"removeCustomAlarm(alarmType); $event.stopPropagation()\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n        </c8y-li>\n        <c8y-li *ngIf=\"possibleFilters.length === 0\">\n          <c8y-ui-empty-state\n            class=\"p-t-8\"\n            icon=\"c8y-alarm\"\n            [title]=\"'No alarm found' | translate\"\n            [subtitle]=\"\n              'There is no alarm to filter. You can still add a custom alarm.' | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n        </c8y-li>\n        <div class=\"sticky-bottom p-16\">\n          <button\n            class=\"btn btn-block btn-primary\"\n            [disabled]=\"possibleFilters.length === 0\"\n            (click)=\"applyFilterChange(); $event.stopPropagation(); filtersDropdown.hide()\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </c8y-list-group>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 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: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsTypeFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms-type-filter', standalone: false, template: "<div class=\"d-flex a-i-center\">\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by alarm types' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    (onHidden)=\"resetFilters()\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\">\n        <ng-container *ngIf=\"activeFilters.length > 0; else allTypes\">\n          <span\n            class=\"tag tag--info chip\"\n            style=\"max-width: 150px\"\n            *ngFor=\"let filter of activeFilters\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation(); deselect(filter)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <span\n              class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n              [ngStyle]=\"{ 'background-color': filter.color }\"\n            >\n              <i\n                class=\"stroked-icon\"\n                c8yIcon=\"bell\"\n              ></i>\n            </span>\n            <span\n              class=\"text-truncate text-12 flex-grow\"\n              [title]=\"filter.filters.type\"\n              [attr.aria-label]=\"filter.filters.type\"\n            >\n              {{ filter.filters.type }}\n            </span>\n          </span>\n        </ng-container>\n        <ng-template #allTypes>\n          <span class=\"text-nowrap\">\n            {{ 'All alarm types' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last text-center\">\n        <button\n          class=\"btn-default btn\"\n          [title]=\"'Clear filters' | translate\"\n          *ngIf=\"activeFilters.length\"\n          (click)=\"deselectAll()\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n        <button\n          class=\"btn-default btn btn--caret\"\n          [title]=\"'Alarm types' | translate\"\n          data-cy=\"c8y-alarm-type-filter\"\n          dropdownToggle\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      style=\"min-width: 250px\"\n      *dropdownMenu\n    >\n      <div class=\"p-16 bg-level-2\">\n        <div>\n          <p>\n            <i\n              class=\"text-info m-r-4\"\n              [c8yIcon]=\"'info-circle'\"\n            ></i>\n            <strong tanslate>The list below may not be complete.</strong>\n          </p>\n          <p tanslate>\n            Recent alarms are displayed below. Past alarms might not be shown. Optionally you can\n            add a custom alarm.\n          </p>\n        </div>\n      </div>\n      <c8y-list-group>\n        <div class=\"input-group p-t-16 p-b-16 p-r-32 p-l-32 separator-bottom\">\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            [placeholder]=\"'Custom alarm type' | translate\"\n            [(ngModel)]=\"customAlarmTypeInput\"\n            (keydown)=\"confirmWithEnter($event)\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn-dot text-primary\"\n              [attr.aria-label]=\"'Add custom alarm' | translate\"\n              [tooltip]=\"'Add' | translate\"\n              placement=\"top\"\n              [delay]=\"500\"\n              (click)=\"addCustomAlarmType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n\n        <c8y-li\n          class=\"c8y-list__item__collapse--container-small cdk-drag\"\n          style=\"cursor: pointer\"\n          *ngFor=\"let alarmType of possibleFilters\"\n          (click)=\"toggleAlarmType(alarmType)\"\n        >\n          <c8y-li-checkbox\n            class=\"a-s-center m-t-4 p-r-0 p-l-0\"\n            [selected]=\"alarmType.__active\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"toggleAlarmType(alarmType); $event.stopPropagation()\"\n          ></c8y-li-checkbox>\n          <div class=\"d-flex a-i-center p-l-4\">\n            <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\">\n              <div class=\"c8y-colorpicker c8y-colorpicker--alarm\">\n                <span\n                  class=\"circle-icon-wrapper\"\n                  [ngStyle]=\"{ 'background-color': alarmType.color }\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    [c8yIcon]=\"'bell'\"\n                  ></i>\n                </span>\n              </div>\n            </div>\n            <span\n              class=\"text-truncate text-12 flex-grow\"\n              [title]=\"alarmType.label\"\n              [attr.aria-label]=\"alarmType.label\"\n            >\n              {{ alarmType.label }}\n            </span>\n            <button\n              class=\"btn-dot btn-dot--danger\"\n              [attr.aria-label]=\"'Remove' | translate\"\n              tooltip=\"'Remove' | translate\"\n              placement=\"top\"\n              *ngIf=\"alarmType.__target === null\"\n              [delay]=\"500\"\n              (click)=\"removeCustomAlarm(alarmType); $event.stopPropagation()\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n        </c8y-li>\n        <c8y-li *ngIf=\"possibleFilters.length === 0\">\n          <c8y-ui-empty-state\n            class=\"p-t-8\"\n            icon=\"c8y-alarm\"\n            [title]=\"'No alarm found' | translate\"\n            [subtitle]=\"\n              'There is no alarm to filter. You can still add a custom alarm.' | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n        </c8y-li>\n        <div class=\"sticky-bottom p-16\">\n          <button\n            class=\"btn btn-block btn-primary\"\n            [disabled]=\"possibleFilters.length === 0\"\n            (click)=\"applyFilterChange(); $event.stopPropagation(); filtersDropdown.hide()\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </c8y-list-group>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-alarms-type-filter', imports: [
+                        BsDropdownDirective,
+                        CdkTrapFocus,
+                        NgIf,
+                        NgFor,
+                        IconDirective,
+                        NgStyle,
+                        BsDropdownToggleDirective,
+                        BsDropdownMenuDirective,
+                        ListGroupComponent,
+                        FormsModule,
+                        TooltipDirective,
+                        ListItemComponent,
+                        ListItemCheckboxComponent,
+                        EmptyStateComponent,
+                        C8yTranslateDirective,
+                        C8yTranslatePipe
+                    ], template: "<div class=\"d-flex a-i-center\">\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by alarm types' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    (onHidden)=\"resetFilters()\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\">\n        <ng-container *ngIf=\"activeFilters.length > 0; else allTypes\">\n          <span\n            class=\"tag tag--info chip\"\n            style=\"max-width: 150px\"\n            *ngFor=\"let filter of activeFilters\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation(); deselect(filter)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <span\n              class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n              [ngStyle]=\"{ 'background-color': filter.color }\"\n            >\n              <i\n                class=\"stroked-icon\"\n                c8yIcon=\"bell\"\n              ></i>\n            </span>\n            <span\n              class=\"text-truncate text-12 flex-grow\"\n              [title]=\"filter.filters.type\"\n              [attr.aria-label]=\"filter.filters.type\"\n            >\n              {{ filter.filters.type }}\n            </span>\n          </span>\n        </ng-container>\n        <ng-template #allTypes>\n          <span class=\"text-nowrap\">\n            {{ 'All alarm types' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last text-center\">\n        <button\n          class=\"btn-default btn\"\n          [title]=\"'Clear filters' | translate\"\n          *ngIf=\"activeFilters.length\"\n          (click)=\"deselectAll()\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n        <button\n          class=\"btn-default btn btn--caret\"\n          [title]=\"'Alarm types' | translate\"\n          data-cy=\"c8y-alarm-type-filter\"\n          dropdownToggle\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      style=\"min-width: 250px\"\n      *dropdownMenu\n    >\n      <div class=\"p-16 bg-level-2\">\n        <div>\n          <p>\n            <i\n              class=\"text-info m-r-4\"\n              [c8yIcon]=\"'info-circle'\"\n            ></i>\n            <strong tanslate>The list below may not be complete.</strong>\n          </p>\n          <p tanslate>\n            Recent alarms are displayed below. Past alarms might not be shown. Optionally you can\n            add a custom alarm.\n          </p>\n        </div>\n      </div>\n      <c8y-list-group>\n        <div class=\"input-group p-t-16 p-b-16 p-r-32 p-l-32 separator-bottom\">\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            [placeholder]=\"'Custom alarm type' | translate\"\n            [(ngModel)]=\"customAlarmTypeInput\"\n            (keydown)=\"confirmWithEnter($event)\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn-dot text-primary\"\n              [attr.aria-label]=\"'Add custom alarm' | translate\"\n              [tooltip]=\"'Add' | translate\"\n              placement=\"top\"\n              [delay]=\"500\"\n              (click)=\"addCustomAlarmType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n\n        <c8y-li\n          class=\"c8y-list__item__collapse--container-small cdk-drag\"\n          style=\"cursor: pointer\"\n          *ngFor=\"let alarmType of possibleFilters\"\n          (click)=\"toggleAlarmType(alarmType)\"\n        >\n          <c8y-li-checkbox\n            class=\"a-s-center m-t-4 p-r-0 p-l-0\"\n            [selected]=\"alarmType.__active\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"toggleAlarmType(alarmType); $event.stopPropagation()\"\n          ></c8y-li-checkbox>\n          <div class=\"d-flex a-i-center p-l-4\">\n            <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\">\n              <div class=\"c8y-colorpicker c8y-colorpicker--alarm\">\n                <span\n                  class=\"circle-icon-wrapper\"\n                  [ngStyle]=\"{ 'background-color': alarmType.color }\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    [c8yIcon]=\"'bell'\"\n                  ></i>\n                </span>\n              </div>\n            </div>\n            <span\n              class=\"text-truncate text-12 flex-grow\"\n              [title]=\"alarmType.label\"\n              [attr.aria-label]=\"alarmType.label\"\n            >\n              {{ alarmType.label }}\n            </span>\n            <button\n              class=\"btn-dot btn-dot--danger\"\n              [attr.aria-label]=\"'Remove' | translate\"\n              tooltip=\"'Remove' | translate\"\n              placement=\"top\"\n              *ngIf=\"alarmType.__target === null\"\n              [delay]=\"500\"\n              (click)=\"removeCustomAlarm(alarmType); $event.stopPropagation()\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n        </c8y-li>\n        <c8y-li *ngIf=\"possibleFilters.length === 0\">\n          <c8y-ui-empty-state\n            class=\"p-t-8\"\n            icon=\"c8y-alarm\"\n            [title]=\"'No alarm found' | translate\"\n            [subtitle]=\"\n              'There is no alarm to filter. You can still add a custom alarm.' | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n        </c8y-li>\n        <div class=\"sticky-bottom p-16\">\n          <button\n            class=\"btn btn-block btn-primary\"\n            [disabled]=\"possibleFilters.length === 0\"\n            (click)=\"applyFilterChange(); $event.stopPropagation(); filtersDropdown.hide()\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </c8y-list-group>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$3.AlarmEventSelectorService }, { type: i1.ActivatedRoute }, { type: i1.Router }, { type: i3.ColorService }], propDecorators: { alarms: [{
                 type: Input
             }], possibleFilters: [{
@@ -2323,11 +2441,27 @@ class AlarmsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsComponent, deps: [{ token: i1.ActivatedRoute }, { token: AlarmsViewService }, { token: i3.AlarmWithChildrenRealtimeService }, { token: i3.AlertService }, { token: i3.ContextRouteService }, { token: i3.ModalService }, { token: i1$1.TranslateService }, { token: i1.Router }, { token: i3.GainsightService }, { token: AlarmsActivityTrackerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmsComponent, isStandalone: false, selector: "c8y-alarms", host: { listeners: { "document:visibilitychange": "visibilityChange()" } }, providers: [AlarmWithChildrenRealtimeService, AlarmsActivityTrackerService], 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    class=\"d-block fit-w\"\n    [contextSourceId]=\"contextSourceId\"\n    (onFilterApplied)=\"applyFormFilters($event)\"\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    class=\"d-block fit-w\"\n    [alarms]=\"alarms$ | async\"\n    (onFilterChanged)=\"applyTypeFilters($event)\"\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      data-cy=\"c8y-alarms--realtime-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); isListScrolled.set($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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.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.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], 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", inputs: ["DEFAULT_INTERVAL", "updateQueryParams", "date"], outputs: ["dateFilterChange"] }, { kind: "component", type: AlarmsTypeFilterComponent, selector: "c8y-alarms-type-filter", inputs: ["alarms", "possibleFilters", "activeFilters"], outputs: ["onFilterChanged"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlarmsComponent, isStandalone: true, selector: "c8y-alarms", host: { listeners: { "document:visibilitychange": "visibilityChange()" } }, providers: [AlarmWithChildrenRealtimeService, AlarmsActivityTrackerService], 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    class=\"d-block fit-w\"\n    [contextSourceId]=\"contextSourceId\"\n    (onFilterApplied)=\"applyFormFilters($event)\"\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    class=\"d-block fit-w\"\n    [alarms]=\"alarms$ | async\"\n    (onFilterChanged)=\"applyTypeFilters($event)\"\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      data-cy=\"c8y-alarms--realtime-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); isListScrolled.set($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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { kind: "component", type: AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", inputs: ["DEFAULT_INTERVAL", "updateQueryParams", "date"], outputs: ["dateFilterChange"] }, { kind: "component", type: AlarmsTypeFilterComponent, selector: "c8y-alarms-type-filter", inputs: ["alarms", "possibleFilters", "activeFilters"], outputs: ["onFilterChanged"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: AlarmsIntervalRefreshComponent, selector: "c8y-alarms-interval-refresh", inputs: ["isDisabled", "alarmsListLoading$", "isIntervalToggleEnabled"], outputs: ["onCountdownEnded"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms', standalone: false, providers: [AlarmWithChildrenRealtimeService, AlarmsActivityTrackerService], 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    class=\"d-block fit-w\"\n    [contextSourceId]=\"contextSourceId\"\n    (onFilterApplied)=\"applyFormFilters($event)\"\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    class=\"d-block fit-w\"\n    [alarms]=\"alarms$ | async\"\n    (onFilterChanged)=\"applyTypeFilters($event)\"\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      data-cy=\"c8y-alarms--realtime-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); isListScrolled.set($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" }]
+            args: [{ selector: 'c8y-alarms', providers: [AlarmWithChildrenRealtimeService, AlarmsActivityTrackerService], imports: [
+                        NgIf,
+                        TitleComponent,
+                        ActionBarItemComponent,
+                        AlarmsFilterComponent,
+                        AlarmsDateFilterComponent,
+                        AlarmsTypeFilterComponent,
+                        IconDirective,
+                        TooltipDirective,
+                        NgClass,
+                        HelpComponent,
+                        AlarmsListComponent,
+                        AlarmsIntervalRefreshComponent,
+                        RouterOutlet,
+                        C8yTranslatePipe,
+                        AsyncPipe
+                    ], 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    class=\"d-block fit-w\"\n    [contextSourceId]=\"contextSourceId\"\n    (onFilterApplied)=\"applyFormFilters($event)\"\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    class=\"d-block fit-w\"\n    [alarms]=\"alarms$ | async\"\n    (onFilterChanged)=\"applyTypeFilters($event)\"\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      data-cy=\"c8y-alarms--realtime-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); isListScrolled.set($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" }]
         }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: AlarmsViewService }, { type: i3.AlarmWithChildrenRealtimeService }, { type: i3.AlertService }, { type: i3.ContextRouteService }, { type: i3.ModalService }, { type: i1$1.TranslateService }, { type: i1.Router }, { type: i3.GainsightService }, { type: AlarmsActivityTrackerService }], propDecorators: { alarmIntervalRefreshComponent: [{
                 type: ViewChild,
                 args: [AlarmsIntervalRefreshComponent]
@@ -2385,7 +2519,21 @@ class AlarmsModule {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AlarmsModule, declarations: [AlarmDetailsComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: AlarmsModule, imports: [A11yModule,
+            BsDropdownModule,
+            CommonModule,
+            CoreModule,
+            HeaderModule,
+            PopoverModule, i1$4.TooltipModule, C8yTranslateModule,
+            RouterModule,
+            AlarmEventSelectorModule,
+            RouterModule,
+            AlarmListIndicatorPipe,
+            AlarmDetailsButtonPipe,
+            AlarmSeverityToIconPipe,
+            DynamicComponentModule,
+            IntervalPickerComponent,
+            AlarmDetailsComponent,
             AlarmInfoComponent,
             AlarmsComponent,
             AlarmSeveritiesToTitlePipe,
@@ -2399,22 +2547,8 @@ class AlarmsModule {
             AlarmStatusToLabelPipe,
             AlarmEmptyComponent,
             AlarmsDateFilterComponent,
-            AlarmsTypeFilterComponent], imports: [A11yModule,
-            BsDropdownModule,
-            CommonModule,
-            CoreModule,
-            HeaderModule,
-            PopoverModule, i5$1.TooltipModule, C8yTranslateModule,
-            RouterModule,
-            AlarmEventSelectorModule,
-            RouterModule,
-            AlarmListIndicatorPipe,
-            AlarmDetailsButtonPipe,
-            AlarmSeverityToIconPipe,
-            DynamicComponentModule,
-            IntervalPickerComponent], exports: [AlarmsComponent, AlarmsListComponent, AlarmsFilterComponent, AlarmsDateFilterComponent] }); }
+            AlarmsTypeFilterComponent], exports: [AlarmsComponent, AlarmsListComponent, AlarmsFilterComponent, AlarmsDateFilterComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsModule, providers: [
-            DatePipe,
             TitleCasePipe,
             RelativeTimePipe,
             {
@@ -2433,31 +2567,22 @@ class AlarmsModule {
             AlarmEventSelectorModule,
             RouterModule,
             DynamicComponentModule,
-            IntervalPickerComponent] }); }
+            IntervalPickerComponent,
+            AlarmDetailsComponent,
+            AlarmInfoComponent,
+            AlarmsComponent,
+            AlarmsFilterComponent,
+            AlarmsIntervalRefreshComponent,
+            AlarmsListComponent,
+            AlarmEmptyComponent,
+            AlarmsDateFilterComponent,
+            AlarmsTypeFilterComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlarmsModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        AlarmDetailsComponent,
-                        AlarmInfoComponent,
-                        AlarmsComponent,
-                        AlarmSeveritiesToTitlePipe,
-                        AlarmsFilterComponent,
-                        AlarmsIconComponent,
-                        AlarmsIntervalRefreshComponent,
-                        AlarmsListComponent,
-                        AlarmStatusToIconPipe,
-                        AuditChangesMessagePipe,
-                        AlarmSeverityToLabelPipe,
-                        AlarmStatusToLabelPipe,
-                        AlarmEmptyComponent,
-                        AlarmsDateFilterComponent,
-                        AlarmsTypeFilterComponent
-                    ],
                     exports: [AlarmsComponent, AlarmsListComponent, AlarmsFilterComponent, AlarmsDateFilterComponent],
                     providers: [
-                        DatePipe,
                         TitleCasePipe,
                         RelativeTimePipe,
                         {
@@ -2481,7 +2606,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         AlarmDetailsButtonPipe,
                         AlarmSeverityToIconPipe,
                         DynamicComponentModule,
-                        IntervalPickerComponent
+                        IntervalPickerComponent,
+                        AlarmDetailsComponent,
+                        AlarmInfoComponent,
+                        AlarmsComponent,
+                        AlarmSeveritiesToTitlePipe,
+                        AlarmsFilterComponent,
+                        AlarmsIconComponent,
+                        AlarmsIntervalRefreshComponent,
+                        AlarmsListComponent,
+                        AlarmStatusToIconPipe,
+                        AuditChangesMessagePipe,
+                        AlarmSeverityToLabelPipe,
+                        AlarmStatusToLabelPipe,
+                        AlarmEmptyComponent,
+                        AlarmsDateFilterComponent,
+                        AlarmsTypeFilterComponent
                     ]
                 }]
         }] });