npm - @c8y/ngx-components - Versions diffs - 1023.17.3 → 1023.17.8 - Mend

@c8y/ngx-components 1023.17.3 → 1023.17.8

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 (208) hide show

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

@@ -49,10 +49,10 @@ class AlarmDetailsButtonService {
         }
         return -item.priority;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmDetailsButtonService, deps: [{ token: i3.ServiceRegistry }, { token: i3.PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmDetailsButtonService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmDetailsButtonService, deps: [{ token: i3.ServiceRegistry }, { token: i3.PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmDetailsButtonService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmDetailsButtonService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmDetailsButtonService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i3.ServiceRegistry }, { type: i3.PluginsResolveService }] });
@@ -69,10 +69,10 @@ class AlarmDetailsButtonPipe {
     transform(alarm, source) {
         return this.alarmDetailsButtonService.get$(alarm, source);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmDetailsButtonPipe, deps: [{ token: AlarmDetailsButtonService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AlarmDetailsButtonPipe, isStandalone: true, name: "alarmDetailsButton" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmDetailsButtonPipe, deps: [{ token: AlarmDetailsButtonService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AlarmDetailsButtonPipe, isStandalone: true, name: "alarmDetailsButton" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmDetailsButtonPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmDetailsButtonPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -199,10 +199,10 @@ class AlarmDetailsService {
         return (this.permissions.hasAnyRole(ROLES_ALLOWING_SMART_RULE_CREATION[0]) &&
             this.permissions.hasAnyRole(ROLES_ALLOWING_SMART_RULE_CREATION[1]));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmDetailsService, deps: [{ token: i3.Permissions }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmDetailsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmDetailsService, deps: [{ token: i3.Permissions }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmDetailsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmDetailsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmDetailsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -242,10 +242,10 @@ class AlarmsActivityTrackerService {
                 .subscribe(() => this.resetInactivityTimer());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsActivityTrackerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsActivityTrackerService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmsActivityTrackerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmsActivityTrackerService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsActivityTrackerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmsActivityTrackerService, decorators: [{
             type: Injectable
         }] });
@@ -617,10 +617,10 @@ class AlarmsViewService {
             : statuses.filter(status => status !== 'CLEARED');
         return filteredStatuses.join(',');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsViewService, deps: [{ token: i2.AlarmService }, { token: i3.OptionsService }, { token: i3$1.DateTimeContextPickerService }, { token: i1.Router }, { token: i3.ContextRouteService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsViewService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmsViewService, deps: [{ token: i2.AlarmService }, { token: i3.OptionsService }, { token: i3$1.DateTimeContextPickerService }, { token: i1.Router }, { token: i3.ContextRouteService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmsViewService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsViewService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmsViewService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -659,10 +659,10 @@ class AuditChangesMessagePipe {
             newValue: this.translateService.instant(newValue)
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AuditChangesMessagePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AuditChangesMessagePipe, isStandalone: true, name: "auditChangesMessage" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AuditChangesMessagePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AuditChangesMessagePipe, isStandalone: true, name: "auditChangesMessage" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AuditChangesMessagePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AuditChangesMessagePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'auditChangesMessage' }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
@@ -1200,10 +1200,10 @@ class AlarmDetailsComponent {
         }
         this.alarmInfoSections = sections;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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: "17.0.0", version: "20.3.15", type: AlarmDetailsComponent, isStandalone: true, selector: "c8y-alarm-details", inputs: { selectedAlarm: "selectedAlarm", showSections: "showSections", hiddenSections: "hiddenSections", showActions: "showActions", hiddenActions: "hiddenActions", showExternalNavigation: "showExternalNavigation" }, host: { listeners: { "document:visibilitychange": "visibilityChange()" } }, providers: [AlarmsActivityTrackerService], usesOnChanges: true, ngImport: i0, template: "@if (selectedAlarm) {\n  <div\n    class=\"card-header p-24 m-b-16 bg-component separator-bottom sticky-top\"\n    style=\"margin: 0 -24px\"\n  >\n    <h4\n      class=\"m-0\"\n      data-cy=\"c8y-alarm-details-title\"\n    >\n      {{ selectedAlarm.text | translate }}\n    </h4>\n  </div>\n}\n\n<c8y-icon-panel [sections]=\"alarmInfoSections\">\n  @if (showSections && !hiddenSections?.source) {\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 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            @if (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            }\n          </p>\n        </div>\n      </div>\n    </div>\n  }\n\n  @if (showSections && !hiddenSections?.type) {\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\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          @if (selectedAlarm?.count > 1 && showSections && !hiddenSections?.occurrenceCount) {\n            <div\n              class=\"col-4 p-b-8\"\n              data-cy=\"c8y-alarm-details--number-of-occurrences-wrapper\"\n            >\n              <p class=\"text-label-small m-b-0 m-r-8\">\n                {{ 'Number of occurrences' | translate }}\n              </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          }\n          @if (selectedAlarm?.count > 1 && showSections && !hiddenSections?.firstOccurrence) {\n            <div\n              class=\"col-4 p-b-8\"\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                <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          }\n          @if (showSections && !hiddenSections?.lastOccurrence) {\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                <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          }\n        </div>\n      </div>\n    </div>\n  </div>\n\n  @if (customFragments && showSections && !hiddenSections?.customData) {\n    <div\n      class=\"col-xs-12 col-md-12 p-b-16\"\n      data-cy=\"c8y-alarm-details--custom-fragments-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\"\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  }\n</c8y-icon-panel>\n\n@if (showActions) {\n  <c8y-sv-details-actions [actions]=\"alarmActions\">\n    @for (button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async; track $index) {\n      <button\n        class=\"btn btn-default btn-sm no-swing\"\n        [title]=\"button.title | translate\"\n        type=\"button\"\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        @if (button.label) {\n          <span>{{ button.label | translate }}</span>\n        }\n      </button>\n    }\n  </c8y-sv-details-actions>\n}\n\n@if (showSections && !hiddenSections?.auditLogs) {\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>\n    <div class=\"legend form-block\">{{ 'Audit logs' | translate }}</div>\n\n    @if (isLoading || auditLog?.data.length) {\n      @if (isLoading) {\n        <c8y-loading></c8y-loading>\n      }\n\n      @if (!isLoading) {\n        <c8y-list-group data-cy=\"c8y-alarms-details--audit-logs\">\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                  @if (log.user) {\n                    <span class=\"m-r-16 small\">\n                      <span class=\"text-label-small\">\n                        {{ 'by`user`' | translate }}\n                      </span>\n                      {{ log.user }}\n                    </span>\n                  }\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      }\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"noAuditLogAvailable\"></ng-container>\n    }\n  </div>\n}\n", dependencies: [{ 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: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: "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: "component", type: SplitViewDetailsActionsComponent, selector: "c8y-sv-details-actions", inputs: ["actions"] }, { kind: "component", type: IconPanelComponent, selector: "c8y-icon-panel", inputs: ["sections", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { 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: AuditChangesMessagePipe, name: "auditChangesMessage" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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: "17.0.0", version: "20.3.16", type: AlarmDetailsComponent, isStandalone: true, selector: "c8y-alarm-details", inputs: { selectedAlarm: "selectedAlarm", showSections: "showSections", hiddenSections: "hiddenSections", showActions: "showActions", hiddenActions: "hiddenActions", showExternalNavigation: "showExternalNavigation" }, host: { listeners: { "document:visibilitychange": "visibilityChange()" } }, providers: [AlarmsActivityTrackerService], usesOnChanges: true, ngImport: i0, template: "@if (selectedAlarm) {\n  <div\n    class=\"card-header p-24 m-b-16 bg-component separator-bottom sticky-top\"\n    style=\"margin: 0 -24px\"\n  >\n    <h4\n      class=\"m-0\"\n      data-cy=\"c8y-alarm-details-title\"\n    >\n      {{ selectedAlarm.text | translate }}\n    </h4>\n  </div>\n}\n\n<c8y-icon-panel [sections]=\"alarmInfoSections\">\n  @if (showSections && !hiddenSections?.source) {\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 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            @if (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            }\n          </p>\n        </div>\n      </div>\n    </div>\n  }\n\n  @if (showSections && !hiddenSections?.type) {\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\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          @if (selectedAlarm?.count > 1 && showSections && !hiddenSections?.occurrenceCount) {\n            <div\n              class=\"col-4 p-b-8\"\n              data-cy=\"c8y-alarm-details--number-of-occurrences-wrapper\"\n            >\n              <p class=\"text-label-small m-b-0 m-r-8\">\n                {{ 'Number of occurrences' | translate }}\n              </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          }\n          @if (selectedAlarm?.count > 1 && showSections && !hiddenSections?.firstOccurrence) {\n            <div\n              class=\"col-4 p-b-8\"\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                <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          }\n          @if (showSections && !hiddenSections?.lastOccurrence) {\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                <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          }\n        </div>\n      </div>\n    </div>\n  </div>\n\n  @if (customFragments && showSections && !hiddenSections?.customData) {\n    <div\n      class=\"col-xs-12 col-md-12 p-b-16\"\n      data-cy=\"c8y-alarm-details--custom-fragments-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\"\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  }\n</c8y-icon-panel>\n\n@if (showActions) {\n  <c8y-sv-details-actions [actions]=\"alarmActions\">\n    @for (button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async; track $index) {\n      <button\n        class=\"btn btn-default btn-sm no-swing\"\n        [title]=\"button.title | translate\"\n        type=\"button\"\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        @if (button.label) {\n          <span>{{ button.label | translate }}</span>\n        }\n      </button>\n    }\n  </c8y-sv-details-actions>\n}\n\n@if (showSections && !hiddenSections?.auditLogs) {\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>\n    <div class=\"legend form-block\">{{ 'Audit logs' | translate }}</div>\n\n    @if (isLoading || auditLog?.data.length) {\n      @if (isLoading) {\n        <c8y-loading></c8y-loading>\n      }\n\n      @if (!isLoading) {\n        <c8y-list-group data-cy=\"c8y-alarms-details--audit-logs\">\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                  @if (log.user) {\n                    <span class=\"m-r-16 small\">\n                      <span class=\"text-label-small\">\n                        {{ 'by`user`' | translate }}\n                      </span>\n                      {{ log.user }}\n                    </span>\n                  }\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      }\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"noAuditLogAvailable\"></ng-container>\n    }\n  </div>\n}\n", dependencies: [{ 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: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: "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: "component", type: SplitViewDetailsActionsComponent, selector: "c8y-sv-details-actions", inputs: ["actions"] }, { kind: "component", type: IconPanelComponent, selector: "c8y-icon-panel", inputs: ["sections", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { 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: AuditChangesMessagePipe, name: "auditChangesMessage" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarm-details', providers: [AlarmsActivityTrackerService], imports: [
                         IconDirective,
@@ -1250,10 +1250,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }] } });
 class AlarmEmptyComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AlarmEmptyComponent, isStandalone: true, selector: "c8y-alarms-empty", ngImport: i0, template: "<div\n  class=\"p-24\"\n  data-cy=\"c8y-alarms-empty\"\n>\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  ></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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AlarmEmptyComponent, isStandalone: true, selector: "c8y-alarms-empty", ngImport: i0, template: "<div\n  class=\"p-24\"\n  data-cy=\"c8y-alarms-empty\"\n>\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  ></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: "20.3.15", ngImport: i0, type: AlarmEmptyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmEmptyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarms-empty', imports: [EmptyStateComponent, C8yTranslatePipe], template: "<div\n  class=\"p-24\"\n  data-cy=\"c8y-alarms-empty\"\n>\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  ></c8y-ui-empty-state>\n</div>\n" }]
         }] });
@@ -1274,10 +1274,10 @@ class AlarmInfoComponent {
             ViewContext.Group
         ]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmInfoComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i3.ContextRouteService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AlarmInfoComponent, isStandalone: true, selector: "c8y-alarm-info", ngImport: i0, template: "@if (!isContextRoute) {\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n}\n\n@if (selectedAlarm$ | async; as selectedAlarm) {\n  <div class=\"p-relative\">\n    <c8y-tabs-outlet\n      outletName=\"alarms\"\n      orientation=\"horizontal\"\n    ></c8y-tabs-outlet>\n  </div>\n\n  <c8y-alarm-details [selectedAlarm]=\"selectedAlarm\"></c8y-alarm-details>\n}\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { 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", "showSections", "hiddenSections", "showActions", "hiddenActions", "showExternalNavigation"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmInfoComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i3.ContextRouteService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AlarmInfoComponent, isStandalone: true, selector: "c8y-alarm-info", ngImport: i0, template: "@if (!isContextRoute) {\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n}\n\n@if (selectedAlarm$ | async; as selectedAlarm) {\n  <div class=\"p-relative\">\n    <c8y-tabs-outlet\n      outletName=\"alarms\"\n      orientation=\"horizontal\"\n    ></c8y-tabs-outlet>\n  </div>\n\n  <c8y-alarm-details [selectedAlarm]=\"selectedAlarm\"></c8y-alarm-details>\n}\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { 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", "showSections", "hiddenSections", "showActions", "hiddenActions", "showExternalNavigation"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarm-info', imports: [TitleComponent, TabsOutletComponent, AlarmDetailsComponent, C8yTranslatePipe, AsyncPipe], template: "@if (!isContextRoute) {\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n}\n\n@if (selectedAlarm$ | async; as selectedAlarm) {\n  <div class=\"p-relative\">\n    <c8y-tabs-outlet\n      outletName=\"alarms\"\n      orientation=\"horizontal\"\n    ></c8y-tabs-outlet>\n  </div>\n\n  <c8y-alarm-details [selectedAlarm]=\"selectedAlarm\"></c8y-alarm-details>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: i3.ContextRouteService }] });
@@ -1307,10 +1307,10 @@ class AlarmListIndicatorService {
         }
         return -item.priority;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmListIndicatorService, deps: [{ token: i3.ServiceRegistry }, { token: i3.PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmListIndicatorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmListIndicatorService, deps: [{ token: i3.ServiceRegistry }, { token: i3.PluginsResolveService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmListIndicatorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmListIndicatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmListIndicatorService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i3.ServiceRegistry }, { type: i3.PluginsResolveService }] });
@@ -1327,10 +1327,10 @@ class AlarmListIndicatorPipe {
     transform(alarm) {
         return this.alarmListIndicatorService.get$(alarm);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmListIndicatorPipe, deps: [{ token: AlarmListIndicatorService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AlarmListIndicatorPipe, isStandalone: true, name: "alarmListIndicator" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmListIndicatorPipe, deps: [{ token: AlarmListIndicatorService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AlarmListIndicatorPipe, isStandalone: true, name: "alarmListIndicator" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmListIndicatorPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmListIndicatorPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -1378,10 +1378,10 @@ class AlarmSeveritiesToTitlePipe {
     translateSeverityLabel(chip) {
         return this.translateService.instant(SEVERITY_LABELS[chip]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmSeveritiesToTitlePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AlarmSeveritiesToTitlePipe, isStandalone: true, name: "AlarmSeveritiesToTitle" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmSeveritiesToTitlePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AlarmSeveritiesToTitlePipe, isStandalone: true, name: "AlarmSeveritiesToTitle" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmSeveritiesToTitlePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmSeveritiesToTitlePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'AlarmSeveritiesToTitle' }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
@@ -1405,10 +1405,10 @@ class AlarmSeverityToIconPipe {
         const alarmSeverityMapped = Severity[alarmSeverity?.toUpperCase()];
         return ALARM_SEVERITY_ICON_MAP[alarmSeverityMapped] || HELP_ICON;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmSeverityToIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AlarmSeverityToIconPipe, isStandalone: true, name: "AlarmSeverityToIcon" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmSeverityToIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AlarmSeverityToIconPipe, isStandalone: true, name: "AlarmSeverityToIcon" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmSeverityToIconPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmSeverityToIconPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'AlarmSeverityToIcon',
@@ -1442,10 +1442,10 @@ class AlarmSeverityToIconClassPipe {
         }
         return `status icon-lg stroked-icon dlt-c8y-icon-${iconClassName} ${severityClassName}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmSeverityToIconClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AlarmSeverityToIconClassPipe, isStandalone: true, name: "AlarmSeverityToIconClass" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmSeverityToIconClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AlarmSeverityToIconClassPipe, isStandalone: true, name: "AlarmSeverityToIconClass" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmSeverityToIconClassPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmSeverityToIconClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'AlarmSeverityToIconClass',
@@ -1469,10 +1469,10 @@ class AlarmSeverityToLabelPipe {
         const alarmStatusMapped = SEVERITY_LABELS[alarmSeverity?.toUpperCase()];
         return this.translateService.instant(alarmStatusMapped ?? alarmSeverity);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmSeverityToLabelPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AlarmSeverityToLabelPipe, isStandalone: true, name: "AlarmSeverityToLabel" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmSeverityToLabelPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AlarmSeverityToLabelPipe, isStandalone: true, name: "AlarmSeverityToLabel" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmSeverityToLabelPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmSeverityToLabelPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'AlarmSeverityToLabel' }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
@@ -1495,10 +1495,10 @@ class AlarmStatusToIconPipe {
     transform(alarmStatus) {
         return AlarmIconMap[alarmStatus?.toUpperCase()] || HELP_ICON;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmStatusToIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AlarmStatusToIconPipe, isStandalone: true, name: "AlarmStatusToIcon" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmStatusToIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AlarmStatusToIconPipe, isStandalone: true, name: "AlarmStatusToIcon" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmStatusToIconPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmStatusToIconPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'AlarmStatusToIcon' }]
         }] });
@@ -1518,10 +1518,10 @@ class AlarmStatusToLabelPipe {
     transform(alarmStatus) {
         return this.translateService.instant(ALARM_STATUS_LABELS[alarmStatus?.toUpperCase()]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmStatusToLabelPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AlarmStatusToLabelPipe, isStandalone: true, name: "AlarmStatusToLabel" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmStatusToLabelPipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AlarmStatusToLabelPipe, isStandalone: true, name: "AlarmStatusToLabel" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmStatusToLabelPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmStatusToLabelPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'AlarmStatusToLabel' }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
@@ -1701,10 +1701,10 @@ class AlarmsFilterComponent {
             this.chips = Object.keys(defaultValues);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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: "17.0.0", version: "20.3.15", 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    container=\"body\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div\n        class=\"form-control d-flex a-i-center inner-scroll\"\n        style=\"min-width: 104px; padding-top: 0; padding-bottom: 0\"\n      >\n        @if (chips.length !== severitiesList.length) {\n          @for (chip of chips; track chip) {\n            <span\n              class=\"tag tag--info chip\"\n              [attr.data-cy]=\"'c8y-alarms-filter--chip-' + chip\"\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                [c8yIcon]=\"chip | AlarmSeverityToIcon\"\n                [attr.data-cy]=\"'c8y-alarms-filter--icon-' + chip\"\n                [ngClass]=\"chip | lowercase\"\n              ></i>\n              {{ SEVERITY_LABELS[chip] | translate }}\n            </span>\n          }\n        } @else {\n          <span\n            class=\"text-truncate\"\n            title=\"{{ 'All severities' | translate }}\"\n          >\n            {{ 'All severities' | translate }}\n          </span>\n        }\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      @for (severity of severitiesList; track severity) {\n        <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center\">\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          @if (alarmCounts[severity] || alarmCounts[severity] === 0) {\n            <div class=\"badge badge-info m-l-auto\">\n              @if (countLoading) {\n                <i\n                  class=\"icon-spin\"\n                  [c8yIcon]=\"'circle-o-notch'\"\n                ></i>\n              }\n              @if (!countLoading) {\n                <span [attr.data-cy]=\"'c8y-alarms-filter--' + severity + '-badge'\">\n                  {{ alarmCounts[severity] < 99 ? alarmCounts[severity] : '99+' }}\n                </span>\n              }\n            </div>\n          }\n        </li>\n      }\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      <li class=\"p-16 d-flex sticky-bottom separator-top\">\n        <button\n          class=\"btn btn-primary btn-sm flex-grow\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          data-cy=\"c8y-alarms-filter--apply\"\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          (click)=\"applyFilters(false); closeDropdown()\"\n          [disabled]=\"shouldDisableApplyButton$ | async\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </li>\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: 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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: "17.0.0", version: "20.3.16", 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    container=\"body\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div\n        class=\"form-control d-flex a-i-center inner-scroll\"\n        style=\"min-width: 104px; padding-top: 0; padding-bottom: 0\"\n      >\n        @if (chips.length !== severitiesList.length) {\n          @for (chip of chips; track chip) {\n            <span\n              class=\"tag tag--info chip\"\n              [attr.data-cy]=\"'c8y-alarms-filter--chip-' + chip\"\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                [c8yIcon]=\"chip | AlarmSeverityToIcon\"\n                [attr.data-cy]=\"'c8y-alarms-filter--icon-' + chip\"\n                [ngClass]=\"chip | lowercase\"\n              ></i>\n              {{ SEVERITY_LABELS[chip] | translate }}\n            </span>\n          }\n        } @else {\n          <span\n            class=\"text-truncate\"\n            title=\"{{ 'All severities' | translate }}\"\n          >\n            {{ 'All severities' | translate }}\n          </span>\n        }\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      @for (severity of severitiesList; track severity) {\n        <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center\">\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          @if (alarmCounts[severity] || alarmCounts[severity] === 0) {\n            <div class=\"badge badge-info m-l-auto\">\n              @if (countLoading) {\n                <i\n                  class=\"icon-spin\"\n                  [c8yIcon]=\"'circle-o-notch'\"\n                ></i>\n              }\n              @if (!countLoading) {\n                <span [attr.data-cy]=\"'c8y-alarms-filter--' + severity + '-badge'\">\n                  {{ alarmCounts[severity] < 99 ? alarmCounts[severity] : '99+' }}\n                </span>\n              }\n            </div>\n          }\n        </li>\n      }\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      <li class=\"p-16 d-flex sticky-bottom separator-top\">\n        <button\n          class=\"btn btn-primary btn-sm flex-grow\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          data-cy=\"c8y-alarms-filter--apply\"\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          (click)=\"applyFilters(false); closeDropdown()\"\n          [disabled]=\"shouldDisableApplyButton$ | async\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </li>\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: 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: "20.3.15", ngImport: i0, type: AlarmsFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmsFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarms-filter', imports: [
                         FormsModule,
@@ -1745,10 +1745,10 @@ class AlarmsIconComponent {
         this.iconBackgroundColor =
             this.typeFilters.find(filter => filter.filters.type === this.alarm.type)?.color || 'none';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmsIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", 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: "20.3.15", ngImport: i0, type: AlarmsIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmsIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarms-icon', imports: [
                         TooltipDirective,
@@ -1879,10 +1879,10 @@ class AlarmsIntervalRefreshComponent {
             !state && this.countdownIntervalComponent?.reset();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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: "20.3.15", 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", "config"], 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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: "20.3.16", 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", "config"], 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsIntervalRefreshComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmsIntervalRefreshComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarms-interval-refresh', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FormsModule,
@@ -2041,10 +2041,10 @@ class AlarmsListComponent {
         // done to get the first navigation
         this.activeChildParam$.subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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: "17.0.0", version: "20.3.15", type: AlarmsListComponent, isStandalone: true, selector: "c8y-alarms-list", inputs: { alarms: "alarms", hasPermissions: "hasPermissions", typeFilters: "typeFilters", loadMoreMode: "loadMoreMode", navigationOptions: "navigationOptions", isInitialLoading: "isInitialLoading", isInPreviewMode: "isInPreviewMode" }, outputs: { onSelectedAlarm: "onSelectedAlarm", onScrollingStateChange: "onScrollingStateChange" }, viewQueries: [{ propertyName: "svListComponent", first: true, predicate: ["scrollWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<c8y-sv-list\n  [emptyStateIcon]=\"'c8y-alert-idle'\"\n  [title]=\"'Alarms list' | translate\"\n  [emptyStateTitle]=\"'No alarms to display.' | translate\"\n  [loading]=\"isInitialLoading || isEmptyListLoading\"\n  [showEmptyState]=\"isEmptyListLoading && !isInitialLoading && hasPermissions\"\n  [docsUrl]=\"\n    '/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms'\n  \"\n  data-cy=\"c8y-alarms-list\"\n  #scrollWrapper\n>\n  <c8y-sv-header-actions>\n    <ng-content></ng-content>\n  </c8y-sv-header-actions>\n\n  <c8y-sv-alerts>\n    @if (\n      !isEmptyListLoading &&\n      (activeChildParam$ | async) &&\n      (activeAlarm$ | async)?.id !== (activeChildParam$ | async)\n    ) {\n      <div\n        class=\"alert alert-warning m-b-0\"\n        role=\"alert\"\n        translate\n      >\n        The selected alarm is not currently in the list, change your filter.\n      </div>\n    }\n  </c8y-sv-alerts>\n\n  <c8y-list-group class=\"c8y-list--timeline d-block p-r-16 p-t-16\">\n    <c8y-li-timeline\n      class=\"pointer c8y-list--timeline__item\"\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        container=\"body\"\n        data-cy=\"c8y-alarms-list--last-occurrence-date\"\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\n              [typeFilters]=\"typeFilters\"\n              [alarm]=\"alarm\"\n            ></c8y-alarms-icon>\n          </div>\n          @if (alarm.firstOccurrenceTime) {\n            <button\n              class=\"btn-clean text-center\"\n              [attr.aria-label]=\"\n                alarmBadgeTooltip\n                  | translate\n                    : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n              \"\n              [tooltip]=\"\n                alarmBadgeTooltip\n                  | translate\n                    : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n              \"\n              placement=\"right\"\n              container=\"body\"\n              type=\"button\"\n              data-cy=\"c8y-alarms-list--badge\"\n              (click)=\"$event.stopPropagation()\"\n              [delay]=\"500\"\n            >\n              @if (alarm.count > 1) {\n                <span class=\"badge badge-info\">\n                  {{ alarm.count }}\n                </span>\n              }\n            </button>\n          }\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\n                class=\"text-truncate-wrap p-b-4\"\n                data-cy=\"c8y-alarms-list--alarm-text\"\n              >\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                  @for (item of alarm | alarmListIndicator | async; track $index) {\n                    <div [title]=\"item.title | translate\">\n                      <i\n                        [class]=\"item.class\"\n                        [c8yIcon]=\"item.icon\"\n                      ></i>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n  </c8y-list-group>\n</c8y-sv-list>\n\n<ng-template #alertsA>\n  <c8y-dynamic-component-alerts [alerts]=\"alertAggregator\"></c8y-dynamic-component-alerts>\n</ng-template>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: "component", type: DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "component", type: SplitViewListComponent, selector: "c8y-sv-list", inputs: ["title", "loading", "showEmptyState", "emptyStateIcon", "emptyStateTitle", "emptyStateSubtitle", "docsUrl", "showTitle", "listOpacity"] }, { kind: "component", type: SplitViewHeaderActionsComponent, selector: "c8y-sv-header-actions" }, { kind: "component", type: SplitViewAlertsComponent, selector: "c8y-sv-alerts" }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: AlarmListIndicatorPipe, name: "alarmListIndicator" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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: "17.0.0", version: "20.3.16", type: AlarmsListComponent, isStandalone: true, selector: "c8y-alarms-list", inputs: { alarms: "alarms", hasPermissions: "hasPermissions", typeFilters: "typeFilters", loadMoreMode: "loadMoreMode", navigationOptions: "navigationOptions", isInitialLoading: "isInitialLoading", isInPreviewMode: "isInPreviewMode" }, outputs: { onSelectedAlarm: "onSelectedAlarm", onScrollingStateChange: "onScrollingStateChange" }, viewQueries: [{ propertyName: "svListComponent", first: true, predicate: ["scrollWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<c8y-sv-list\n  [emptyStateIcon]=\"'c8y-alert-idle'\"\n  [title]=\"'Alarms list' | translate\"\n  [emptyStateTitle]=\"'No alarms to display.' | translate\"\n  [loading]=\"isInitialLoading || isEmptyListLoading\"\n  [showEmptyState]=\"isEmptyListLoading && !isInitialLoading && hasPermissions\"\n  [docsUrl]=\"\n    '/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms'\n  \"\n  data-cy=\"c8y-alarms-list\"\n  #scrollWrapper\n>\n  <c8y-sv-header-actions>\n    <ng-content></ng-content>\n  </c8y-sv-header-actions>\n\n  <c8y-sv-alerts>\n    @if (\n      !isEmptyListLoading &&\n      (activeChildParam$ | async) &&\n      (activeAlarm$ | async)?.id !== (activeChildParam$ | async)\n    ) {\n      <div\n        class=\"alert alert-warning m-b-0\"\n        role=\"alert\"\n        translate\n      >\n        The selected alarm is not currently in the list, change your filter.\n      </div>\n    }\n  </c8y-sv-alerts>\n\n  <c8y-list-group class=\"c8y-list--timeline d-block p-r-16 p-t-16\">\n    <c8y-li-timeline\n      class=\"pointer c8y-list--timeline__item\"\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        container=\"body\"\n        data-cy=\"c8y-alarms-list--last-occurrence-date\"\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\n              [typeFilters]=\"typeFilters\"\n              [alarm]=\"alarm\"\n            ></c8y-alarms-icon>\n          </div>\n          @if (alarm.firstOccurrenceTime) {\n            <button\n              class=\"btn-clean text-center\"\n              [attr.aria-label]=\"\n                alarmBadgeTooltip\n                  | translate\n                    : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n              \"\n              [tooltip]=\"\n                alarmBadgeTooltip\n                  | translate\n                    : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n              \"\n              placement=\"right\"\n              container=\"body\"\n              type=\"button\"\n              data-cy=\"c8y-alarms-list--badge\"\n              (click)=\"$event.stopPropagation()\"\n              [delay]=\"500\"\n            >\n              @if (alarm.count > 1) {\n                <span class=\"badge badge-info\">\n                  {{ alarm.count }}\n                </span>\n              }\n            </button>\n          }\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\n                class=\"text-truncate-wrap p-b-4\"\n                data-cy=\"c8y-alarms-list--alarm-text\"\n              >\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                  @for (item of alarm | alarmListIndicator | async; track $index) {\n                    <div [title]=\"item.title | translate\">\n                      <i\n                        [class]=\"item.class\"\n                        [c8yIcon]=\"item.icon\"\n                      ></i>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n  </c8y-list-group>\n</c8y-sv-list>\n\n<ng-template #alertsA>\n  <c8y-dynamic-component-alerts [alerts]=\"alertAggregator\"></c8y-dynamic-component-alerts>\n</ng-template>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { 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: "component", type: DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "component", type: SplitViewListComponent, selector: "c8y-sv-list", inputs: ["title", "loading", "showEmptyState", "emptyStateIcon", "emptyStateTitle", "emptyStateSubtitle", "docsUrl", "showTitle", "listOpacity"] }, { kind: "component", type: SplitViewHeaderActionsComponent, selector: "c8y-sv-header-actions" }, { kind: "component", type: SplitViewAlertsComponent, selector: "c8y-sv-alerts" }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { 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: "20.3.15", ngImport: i0, type: AlarmsListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmsListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarms-list', imports: [
                         C8yTranslateDirective,
@@ -2232,8 +2232,8 @@ class AlarmsDateFilterComponent {
             currentDateContextInterval: context.interval || 'custom'
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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: "17.0.0", version: "20.3.15", type: AlarmsDateFilterComponent, isStandalone: true, selector: "c8y-alarms-date-filter", inputs: { DEFAULT_INTERVAL: "DEFAULT_INTERVAL", updateQueryParams: "updateQueryParams", date: "date" }, outputs: { dateFilterChange: "dateFilterChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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: "17.0.0", version: "20.3.16", 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),
@@ -2241,7 +2241,7 @@ class AlarmsDateFilterComponent {
             }
         ], 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    container=\"body\"\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        @if (form.controls.currentDateContextInterval.value !== 'none') {\n          <span\n            class=\"text-10 text-muted text-truncate\"\n            data-cy=\"alarms-date-filter--selected-time-range\"\n          >\n            {{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\n          </span>\n        }\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      @if (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      }\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: 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: 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: "20.3.15", ngImport: i0, type: AlarmsDateFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmsDateFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarms-date-filter', providers: [
                         {
@@ -2410,10 +2410,10 @@ class AlarmsTypeFilterComponent {
     getQueryParams(activeFilters) {
         return activeFilters.map(filter => filter.filters.type).join(',');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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: "17.0.0", version: "20.3.15", 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        @if (activeFilters.length > 0) {\n          @for (filter of activeFilters; track $index) {\n            <span\n              class=\"tag tag--info chip\"\n              style=\"max-width: 150px\"\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          }\n        } @else {\n          <span class=\"text-nowrap\">\n            {{ 'All alarm types' | translate }}\n          </span>\n        }\n      </div>\n      <div class=\"input-group-btn input-group-btn--last text-center\">\n        @if (activeFilters.length) {\n          <button\n            class=\"btn-default btn\"\n            [title]=\"'Clear filters' | translate\"\n            (click)=\"deselectAll()\"\n          >\n            <i c8yIcon=\"times\"></i>\n          </button>\n        }\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 translate>The list below may not be complete.</strong>\n          </p>\n          <p>\n            <span translate>\n              Recent alarms are displayed below but older ones may not be shown.\n            </span>\n            <span translate>Optionally, you can add a custom alarm.</span>\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        @for (alarmType of possibleFilters; track $index) {\n          <c8y-li\n            class=\"c8y-list__item__collapse--container-small cdk-drag\"\n            style=\"cursor: pointer\"\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              @if (alarmType.__target === null) {\n                <button\n                  class=\"btn-dot btn-dot--danger\"\n                  [attr.aria-label]=\"'Remove' | translate\"\n                  tooltip=\"'Remove' | translate\"\n                  placement=\"top\"\n                  [delay]=\"500\"\n                  (click)=\"removeCustomAlarm(alarmType); $event.stopPropagation()\"\n                >\n                  <i c8yIcon=\"minus-circle\"></i>\n                </button>\n              }\n            </div>\n          </c8y-li>\n        }\n        @if (possibleFilters.length === 0) {\n          <c8y-li>\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        }\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: 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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: "17.0.0", version: "20.3.16", 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        @if (activeFilters.length > 0) {\n          @for (filter of activeFilters; track $index) {\n            <span\n              class=\"tag tag--info chip\"\n              style=\"max-width: 150px\"\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          }\n        } @else {\n          <span class=\"text-nowrap\">\n            {{ 'All alarm types' | translate }}\n          </span>\n        }\n      </div>\n      <div class=\"input-group-btn input-group-btn--last text-center\">\n        @if (activeFilters.length) {\n          <button\n            class=\"btn-default btn\"\n            [title]=\"'Clear filters' | translate\"\n            (click)=\"deselectAll()\"\n          >\n            <i c8yIcon=\"times\"></i>\n          </button>\n        }\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 translate>The list below may not be complete.</strong>\n          </p>\n          <p>\n            <span translate>\n              Recent alarms are displayed below but older ones may not be shown.\n            </span>\n            <span translate>Optionally, you can add a custom alarm.</span>\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        @for (alarmType of possibleFilters; track $index) {\n          <c8y-li\n            class=\"c8y-list__item__collapse--container-small cdk-drag\"\n            style=\"cursor: pointer\"\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              @if (alarmType.__target === null) {\n                <button\n                  class=\"btn-dot btn-dot--danger\"\n                  [attr.aria-label]=\"'Remove' | translate\"\n                  tooltip=\"'Remove' | translate\"\n                  placement=\"top\"\n                  [delay]=\"500\"\n                  (click)=\"removeCustomAlarm(alarmType); $event.stopPropagation()\"\n                >\n                  <i c8yIcon=\"minus-circle\"></i>\n                </button>\n              }\n            </div>\n          </c8y-li>\n        }\n        @if (possibleFilters.length === 0) {\n          <c8y-li>\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        }\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: 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: "20.3.15", ngImport: i0, type: AlarmsTypeFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmsTypeFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarms-type-filter', imports: [
                         BsDropdownDirective,
@@ -2638,10 +2638,10 @@ class AlarmsComponent {
             this.contextSourceId = contextData?.id;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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: i3.GainsightService }, { token: AlarmsActivityTrackerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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: "<c8y-title>{{ TITLE | translate }}</c8y-title>\n<c8y-help\n  src=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n></c8y-help>\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<c8y-sv [resizableConfig]=\"{ trackId: 'alarms-split-view', collapsible: false }\">\n  <c8y-alarms-list\n    [isInitialLoading]=\"isLoading$ | async\"\n    [alarms]=\"alarms$ | async\"\n    [typeFilters]=\"typeFilters\"\n    (onScrollingStateChange)=\"changeInterval(!$event); isListScrolled.set($event)\"\n    (onSelectedAlarm)=\"changeInterval(false)\"\n    [hasPermissions]=\"!isDisabled\"\n  >\n    @if (isIntervalRefresh) {\n      <c8y-alarms-interval-refresh\n        [alarmsListLoading$]=\"isLoading$\"\n        [isIntervalToggleEnabled]=\"shouldShowIntervalToggle$ | async\"\n        (onCountdownEnded)=\"refresh()\"\n        [isDisabled]=\"isDisabled\"\n      ></c8y-alarms-interval-refresh>\n    } @else {\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          @if (isRealtimeActive | async) {\n            <span class=\"tag tag--info m-r-8\">\n              {{ 'New alarms' | translate }}\n            </span>\n          }\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    }\n  </c8y-alarms-list>\n\n  <c8y-sv-details\n    emptyStateIcon=\"alarm\"\n    [emptyStateTitle]=\"'No alarm selected' | translate\"\n    [emptyStateSubtitle]=\"'Select an alarm from the list to view its details.' | translate\"\n    (backClick)=\"handleBackClick()\"\n  >\n    <router-outlet></router-outlet>\n  </c8y-sv-details>\n</c8y-sv>\n", dependencies: [{ kind: "component", type: SplitViewComponent, selector: "c8y-sv", inputs: ["showDefaultRouterOutlet", "isResizable", "initialSelection", "resizableBreakpoint", "resizableConfig"], outputs: ["selectionChange"] }, { kind: "component", type: SplitViewDetailsComponent, selector: "c8y-sv-details", inputs: ["title", "ariaLabel", "cssClass", "emptyStateIcon", "emptyStateTitle", "emptyStateSubtitle"], outputs: ["backClick"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { 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: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "isInPreviewMode"], 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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: i3.GainsightService }, { token: AlarmsActivityTrackerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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: "<c8y-title>{{ TITLE | translate }}</c8y-title>\n<c8y-help\n  src=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n></c8y-help>\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<c8y-sv [resizableConfig]=\"{ trackId: 'alarms-split-view', collapsible: false }\">\n  <c8y-alarms-list\n    [isInitialLoading]=\"isLoading$ | async\"\n    [alarms]=\"alarms$ | async\"\n    [typeFilters]=\"typeFilters\"\n    (onScrollingStateChange)=\"changeInterval(!$event); isListScrolled.set($event)\"\n    (onSelectedAlarm)=\"changeInterval(false)\"\n    [hasPermissions]=\"!isDisabled\"\n  >\n    @if (isIntervalRefresh) {\n      <c8y-alarms-interval-refresh\n        [alarmsListLoading$]=\"isLoading$\"\n        [isIntervalToggleEnabled]=\"shouldShowIntervalToggle$ | async\"\n        (onCountdownEnded)=\"refresh()\"\n        [isDisabled]=\"isDisabled\"\n      ></c8y-alarms-interval-refresh>\n    } @else {\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          @if (isRealtimeActive | async) {\n            <span class=\"tag tag--info m-r-8\">\n              {{ 'New alarms' | translate }}\n            </span>\n          }\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    }\n  </c8y-alarms-list>\n\n  <c8y-sv-details\n    emptyStateIcon=\"alarm\"\n    [emptyStateTitle]=\"'No alarm selected' | translate\"\n    [emptyStateSubtitle]=\"'Select an alarm from the list to view its details.' | translate\"\n    (backClick)=\"handleBackClick()\"\n  >\n    <router-outlet></router-outlet>\n  </c8y-sv-details>\n</c8y-sv>\n", dependencies: [{ kind: "component", type: SplitViewComponent, selector: "c8y-sv", inputs: ["showDefaultRouterOutlet", "isResizable", "initialSelection", "resizableBreakpoint", "resizableConfig"], outputs: ["selectionChange"] }, { kind: "component", type: SplitViewDetailsComponent, selector: "c8y-sv-details", inputs: ["title", "ariaLabel", "cssClass", "emptyStateIcon", "emptyStateTitle", "emptyStateSubtitle"], outputs: ["backClick"] }, { kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { 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: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "isInPreviewMode"], 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: "20.3.15", ngImport: i0, type: AlarmsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-alarms', providers: [AlarmWithChildrenRealtimeService, AlarmsActivityTrackerService], imports: [
                         SplitViewComponent,
@@ -2720,8 +2720,8 @@ class AlarmsModule {
             ]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AlarmsModule, imports: [A11yModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AlarmsModule, imports: [A11yModule,
             BsDropdownModule,
             CommonModule,
             CoreModule,
@@ -2750,7 +2750,7 @@ class AlarmsModule {
             AlarmEmptyComponent,
             AlarmsDateFilterComponent,
             AlarmsTypeFilterComponent], exports: [AlarmsComponent, AlarmsListComponent, AlarmsFilterComponent, AlarmsDateFilterComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmsModule, providers: [
             TitleCasePipe,
             RelativeTimePipe,
             {
@@ -2780,7 +2780,7 @@ class AlarmsModule {
             AlarmsDateFilterComponent,
             AlarmsTypeFilterComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlarmsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlarmsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [AlarmsComponent, AlarmsListComponent, AlarmsFilterComponent, AlarmsDateFilterComponent],