@c8y/ngx-components 1021.62.9 → 1021.64.0

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

@@ -963,11 +963,11 @@ class AlarmDetailsComponent {
         return customProperties;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlarmDetailsComponent, deps: [{ token: AlarmDetailsService }, { token: i2.AlarmService }, { token: i3.AlertService }, { token: i3.AppStateService }, { token: i2.AuditService }, { token: i3.RelativeTimePipe }, { token: Ng1SmartRulesUpgradeService, optional: true }, { token: i1.TranslateService }, { token: i2.InventoryService }, { token: AlarmsViewService }, { token: i3.ColorService }, { token: i3.InterAppService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlarmDetailsComponent, selector: "c8y-alarm-details", inputs: { selectedAlarm: "selectedAlarm" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex row tight-grid flex-wrap a-i-stretch\">\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 c8y-icon\"\n          [c8yIcon]=\"selectedAlarm.status | AlarmStatusToIcon\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Status' | translate }}</p>\n        <p class=\"small\">{{ statusMessage }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          [c8yIcon]=\"selectedAlarm.severity | AlarmSeverityToIcon\"\n          [ngClass]=\"selectedAlarm.severity?.toString() | lowercase\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Severity' | translate }}</p>\n        <p class=\"small\">{{ SEVERITY_LABELS[selectedAlarm.severity] | translate }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          c8yIcon=\"contactless-payment\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Source' | translate }}</p>\n        <p class=\"small\">\n          <button\n            class=\"btn-link text-muted p-0 m-r-8 text-left\"\n            title=\"{{ selectedAlarm.source.name }}\"\n            type=\"button\"\n            routerLink=\"{{ selectedAlarmMO | assetLink }}\"\n          >\n            <small class=\"icon-flex\">\n              <i c8yIcon=\"exchange\"></i>\n              {{ selectedAlarm.source.name || selectedAlarm.source.id }}\n            </small>\n          </button>\n          <ng-container *ngIf=\"showSourceNavigationLink$ | async\">\n            <button\n              class=\"btn-link p-0 text-left\"\n              title=\"{{\n                linkTitle\n                  | translate\n                    : { appName: userDeviceManagementApp$ | async | humanizeAppName | async }\n              }}\"\n              type=\"button\"\n              (click)=\"goToAlarmSource(selectedAlarm.id)\"\n              data-cy=\"alarm-details-device-management-link\"\n            >\n              {{ userDeviceManagementApp$ | async | humanizeAppName | async }}\n              <i c8yIcon=\"external-link\"></i>\n            </button>\n          </ng-container>\n        </p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <span\n          class=\"circle-icon-wrapper\"\n          [ngStyle]=\"{ 'background-color': typeColor }\"\n        >\n          <i\n            class=\"stroked-icon\"\n            c8yIcon=\"bell\"\n          ></i>\n        </span>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8 min-width-0\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Type' | translate }}</p>\n        <p\n          class=\"small text-truncate\"\n          title=\"{{ selectedAlarm.type }}\"\n        >\n          <code>{{ selectedAlarm.type }}</code>\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"col-xs-12 col-md-12 p-b-16\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"calendar\"\n          data-cy=\"c8y-alarm-details--last-updated-icon\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-0 p-r-8 flex-grow\">\n        <div class=\"content-flex-50\">\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Number of occurrences' | translate }}</p>\n            <p>\n              <span class=\"badge badge-info\">{{ selectedAlarm.count }}</span>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'First occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.creationTime | c8yDate: 'medium' }}\n\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Time in which the alarm was created. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            data-cy=\"c8y-alarm-details--last-updated-wrapper\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.lastUpdated | c8yDate: 'medium' }}\n\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Time in which the alarm was last updated. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"col-xs-12 col-md-12 p-b-16\"\n    *ngIf=\"customFragments\"\n  >\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"outgoing-data\"\n        ></i>\n      </div>\n      <div\n        class=\"p-t-8 p-b-0 p-r-8 flex-grow\"\n        data-cy=\"alarm-details-custom-data\"\n      >\n        <p class=\"text-label-small m-b-4 m-r-8\">{{ 'Custom data' | translate }}</p>\n        <pre><code>{{ customFragments | json }}</code></pre>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"d-flex flex-wrap gap-8\">\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Reload audit logs' | translate\"\n    type=\"submit\"\n    (click)=\"reloadAuditLog(true, true)\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': isLoading }\"\n    ></i>\n    {{ 'Reload audit logs' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    \"\n    type=\"submit\"\n    (click)=\"\n      onUpdateDetails(\n        selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n          ? ACKNOWLEDGED_STATUS_VALUE\n          : ACTIVE_STATUS_VALUE\n      )\n    \"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE || isAlarmStatusChanging\"\n  >\n    <i\n      [c8yIcon]=\"selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE ? BELL_SLASH_ICON : BELL_ICON\"\n    ></i>\n    {{\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Create smart rule' | translate\"\n    type=\"submit\"\n    *ngIf=\"isCreateSmartRulesButtonAvailable\"\n    (click)=\"createSmartRule()\"\n  >\n    <i c8yIcon=\"c8y-icon c8y-icon-smart-rules\"></i>\n    {{ 'Create smart rule' | translate }}\n  </button>\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Clear`alarm`' | translate\"\n    type=\"submit\"\n    (click)=\"onUpdateDetails(CLEARED_STATUS_VALUE)\"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear`alarm`' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"button.title | translate\"\n    type=\"button\"\n    *ngFor=\"let button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async\"\n    [ngClass]=\"button.additionalButtonClasses\"\n    (click)=\"detailsButtonAction(button, selectedAlarm)\"\n    [disabled]=\"button.disabled\"\n  >\n    <i\n      [c8yIcon]=\"button.icon\"\n      [ngClass]=\"button.additionalIconClasses\"\n    ></i>\n    <span *ngIf=\"button.label\">{{ button.label | translate }}</span>\n  </button>\n</div>\n\n<ng-template #noAuditLogAvailable>\n  <div class=\"p-16\">\n    <c8y-ui-empty-state\n      [icon]=\"'archive'\"\n      [title]=\"'No audit logs found.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-template>\n\n<div class=\"legend form-block\">{{ 'Audit logs' | translate }}</div>\n\n<ng-container *ngIf=\"isLoading || auditLog?.data.length; else noAuditLogAvailable\">\n  <c8y-loading *ngIf=\"isLoading\"></c8y-loading>\n\n  <c8y-list-group\n    data-cy=\"c8y-alarms-details--audit-logs\"\n    *ngIf=\"!isLoading\"\n  >\n    <c8y-li-timeline *c8yFor=\"let log of auditLog; loadMore: 'hidden'\">\n      {{ log.creationTime | date: 'mediumDate' }}\n      {{ log.creationTime | date: 'mediumTime' }}\n      <c8y-li>\n        <c8y-li-body>\n          <p class=\"text-truncate-wrap separator-bottom p-b-4\">\n            {{ log | auditChangesMessage }}\n          </p>\n          <div class=\"c8y-list__item__footer\">\n            <span\n              class=\"m-r-16 small\"\n              *ngIf=\"log.user\"\n            >\n              <span class=\"text-label-small\">\n                {{ 'by`user`' | translate }}\n              </span>\n              {{ log.user }}\n            </span>\n            <span class=\"small\">\n              <span class=\"text-label-small\">\n                {{ 'device time' | translate }}\n              </span>\n              {{ log.time | c8yDate: 'medium' }}\n            </span>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n  </c8y-list-group>\n</ng-container>\n", dependencies: [{ kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i3.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i7.JsonPipe, name: "json" }, { kind: "pipe", type: i7.DatePipe, name: "date" }, { kind: "pipe", type: i3.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }, { kind: "pipe", type: i3.AssetLinkPipe, name: "assetLink" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AlarmDetailsButtonPipe, name: "alarmDetailsButton" }, { kind: "pipe", type: AlarmSeverityToIconPipe, name: "AlarmSeverityToIcon" }, { kind: "pipe", type: AlarmStatusToIconPipe, name: "AlarmStatusToIcon" }, { kind: "pipe", type: AuditChangesMessagePipe, name: "auditChangesMessage" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlarmDetailsComponent, selector: "c8y-alarm-details", inputs: { selectedAlarm: "selectedAlarm" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex row tight-grid flex-wrap a-i-stretch\">\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div\n      class=\"border-all fit-w d-flex\"\n      data-cy=\"c8y-alarm-details--status-section-wrapper\"\n    >\n      <div\n        class=\"p-8\"\n        data-cy=\"c8y-alarm-details--status-icon\"\n      >\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 c8y-icon\"\n          [c8yIcon]=\"selectedAlarm.status | AlarmStatusToIcon\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Status' | translate }}</p>\n        <p class=\"small\">{{ statusMessage }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div\n      class=\"border-all fit-w d-flex\"\n      data-cy=\"c8y-alarm-details--severity-section-wrapper\"\n    >\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          [c8yIcon]=\"selectedAlarm.severity | AlarmSeverityToIcon\"\n          [ngClass]=\"selectedAlarm.severity?.toString() | lowercase\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Severity' | translate }}</p>\n        <p class=\"small\">{{ SEVERITY_LABELS[selectedAlarm.severity] | translate }}</p>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n    data-cy=\"c8y-alarm-details--source-wrapper\"\n  >\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          c8yIcon=\"contactless-payment\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Source' | translate }}</p>\n        <p class=\"small\">\n          <button\n            class=\"btn-link text-muted p-0 m-r-8 text-left\"\n            title=\"{{ selectedAlarm.source.name }}\"\n            type=\"button\"\n            routerLink=\"{{ selectedAlarmMO | assetLink }}\"\n          >\n            <small class=\"icon-flex\">\n              <i c8yIcon=\"exchange\"></i>\n              {{ selectedAlarm.source.name || selectedAlarm.source.id }}\n            </small>\n          </button>\n          <ng-container *ngIf=\"showSourceNavigationLink$ | async\">\n            <button\n              class=\"btn-link p-0 text-left\"\n              title=\"{{\n                linkTitle\n                  | translate\n                    : { appName: userDeviceManagementApp$ | async | humanizeAppName | async }\n              }}\"\n              type=\"button\"\n              (click)=\"goToAlarmSource(selectedAlarm.id)\"\n              data-cy=\"alarm-details-device-management-link\"\n            >\n              {{ userDeviceManagementApp$ | async | humanizeAppName | async }}\n              <i c8yIcon=\"external-link\"></i>\n            </button>\n          </ng-container>\n        </p>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n    data-cy=\"c8y-alarm-details--severity-type-wrapper\"\n  >\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <span\n          class=\"circle-icon-wrapper\"\n          [ngStyle]=\"{ 'background-color': typeColor }\"\n        >\n          <i\n            class=\"stroked-icon\"\n            c8yIcon=\"bell\"\n          ></i>\n        </span>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8 min-width-0\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Type' | translate }}</p>\n        <p\n          class=\"small text-truncate\"\n          title=\"{{ selectedAlarm.type }}\"\n        >\n          <code>{{ selectedAlarm.type }}</code>\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"col-xs-12 col-md-12 p-b-16\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          data-cy=\"c8y-alarm-details--last-updated-icon\"\n          c8yIcon=\"calendar\"\n          data-cy=\"c8y-alarm-details--last-updated-icon\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-0 p-r-8 flex-grow\">\n        <div class=\"content-flex-50\">\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n            data-cy=\"c8y-alarm-details--number-of-occurrences-wrapper\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Number of occurrences' | translate }}</p>\n            <p>\n              <span data-cy=\"c8y-alarm-details--badge\" class=\"badge badge-info\">{{ selectedAlarm.count }}</span>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n            data-cy=\"c8y-alarm-details--first-occurrence-wrapper\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'First occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.creationTime | c8yDate: 'medium' }}\n\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Time in which the alarm was created. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            data-cy=\"c8y-alarm-details--last-updated-wrapper\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.lastUpdated | c8yDate: 'medium' }}\n\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Time in which the alarm was last updated. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"col-xs-12 col-md-12 p-b-16\"\n    data-cy=\"c8y-alarm-details--custom-fragments-wrapper\"\n    *ngIf=\"customFragments\"\n  >\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"outgoing-data\"\n        ></i>\n      </div>\n      <div\n        class=\"p-t-8 p-b-0 p-r-8 flex-grow\"\n        data-cy=\"alarm-details-custom-data\"\n      >\n        <p class=\"text-label-small m-b-4 m-r-8\">{{ 'Custom data' | translate }}</p>\n        <pre><code>{{ customFragments | json }}</code></pre>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"d-flex flex-wrap gap-8\">\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Reload audit logs' | translate\"\n    type=\"submit\"\n    (click)=\"reloadAuditLog(true, true)\"\n    data-cy=\"c8y-alarms-details--reload-audit-logs\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': isLoading }\"\n    ></i>\n    {{ 'Reload audit logs' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    \"\n    type=\"submit\"\n    (click)=\"\n      onUpdateDetails(\n        selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n          ? ACKNOWLEDGED_STATUS_VALUE\n          : ACTIVE_STATUS_VALUE\n      )\n    \"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE || isAlarmStatusChanging\"\n  >\n    <i\n      [c8yIcon]=\"selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE ? BELL_SLASH_ICON : BELL_ICON\"\n    ></i>\n    {{\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Create smart rule' | translate\"\n    type=\"submit\"\n    *ngIf=\"isCreateSmartRulesButtonAvailable\"\n    (click)=\"createSmartRule()\"\n    data-cy=\"c8y-alarms-details--create-smart-rule\"\n  >\n    <i c8yIcon=\"c8y-icon c8y-icon-smart-rules\"></i>\n    {{ 'Create smart rule' | translate }}\n  </button>\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Clear`alarm`' | translate\"\n    type=\"submit\"\n    data-cy=\"c8y-alarm-details--clear-alarm\"\n    (click)=\"onUpdateDetails(CLEARED_STATUS_VALUE)\"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear`alarm`' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"button.title | translate\"\n    type=\"button\"\n    *ngFor=\"let button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async\"\n    [ngClass]=\"button.additionalButtonClasses\"\n    (click)=\"detailsButtonAction(button, selectedAlarm)\"\n    [disabled]=\"button.disabled\"\n  >\n    <i\n      [c8yIcon]=\"button.icon\"\n      [ngClass]=\"button.additionalIconClasses\"\n    ></i>\n    <span *ngIf=\"button.label\">{{ button.label | translate }}</span>\n  </button>\n</div>\n\n<ng-template #noAuditLogAvailable>\n  <div class=\"p-16\">\n    <c8y-ui-empty-state\n      [icon]=\"'archive'\"\n      [title]=\"'No audit logs found.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-template>\n\n<div class=\"legend form-block\">{{ 'Audit logs' | translate }}</div>\n\n<ng-container *ngIf=\"isLoading || auditLog?.data.length; else noAuditLogAvailable\">\n  <c8y-loading *ngIf=\"isLoading\"></c8y-loading>\n\n  <c8y-list-group\n    data-cy=\"c8y-alarms-details--audit-logs\"\n    *ngIf=\"!isLoading\"\n  >\n    <c8y-li-timeline *c8yFor=\"let log of auditLog; loadMore: 'hidden'\">\n      {{ log.creationTime | date: 'mediumDate' }}\n      {{ log.creationTime | date: 'mediumTime' }}\n      <c8y-li>\n        <c8y-li-body>\n          <p class=\"text-truncate-wrap separator-bottom p-b-4\">\n            {{ log | auditChangesMessage }}\n          </p>\n          <div class=\"c8y-list__item__footer\">\n            <span\n              class=\"m-r-16 small\"\n              *ngIf=\"log.user\"\n            >\n              <span class=\"text-label-small\">\n                {{ 'by`user`' | translate }}\n              </span>\n              {{ log.user }}\n            </span>\n            <span class=\"small\">\n              <span class=\"text-label-small\">\n                {{ 'device time' | translate }}\n              </span>\n              {{ log.time | c8yDate: 'medium' }}\n            </span>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n  </c8y-list-group>\n</ng-container>\n", dependencies: [{ kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i3.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i7.JsonPipe, name: "json" }, { kind: "pipe", type: i7.DatePipe, name: "date" }, { kind: "pipe", type: i3.HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }, { kind: "pipe", type: i3.AssetLinkPipe, name: "assetLink" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AlarmDetailsButtonPipe, name: "alarmDetailsButton" }, { kind: "pipe", type: AlarmSeverityToIconPipe, name: "AlarmSeverityToIcon" }, { kind: "pipe", type: AlarmStatusToIconPipe, name: "AlarmStatusToIcon" }, { kind: "pipe", type: AuditChangesMessagePipe, name: "auditChangesMessage" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlarmDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarm-details', template: "<div class=\"d-flex row tight-grid flex-wrap a-i-stretch\">\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 c8y-icon\"\n          [c8yIcon]=\"selectedAlarm.status | AlarmStatusToIcon\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Status' | translate }}</p>\n        <p class=\"small\">{{ statusMessage }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          [c8yIcon]=\"selectedAlarm.severity | AlarmSeverityToIcon\"\n          [ngClass]=\"selectedAlarm.severity?.toString() | lowercase\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Severity' | translate }}</p>\n        <p class=\"small\">{{ SEVERITY_LABELS[selectedAlarm.severity] | translate }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          c8yIcon=\"contactless-payment\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Source' | translate }}</p>\n        <p class=\"small\">\n          <button\n            class=\"btn-link text-muted p-0 m-r-8 text-left\"\n            title=\"{{ selectedAlarm.source.name }}\"\n            type=\"button\"\n            routerLink=\"{{ selectedAlarmMO | assetLink }}\"\n          >\n            <small class=\"icon-flex\">\n              <i c8yIcon=\"exchange\"></i>\n              {{ selectedAlarm.source.name || selectedAlarm.source.id }}\n            </small>\n          </button>\n          <ng-container *ngIf=\"showSourceNavigationLink$ | async\">\n            <button\n              class=\"btn-link p-0 text-left\"\n              title=\"{{\n                linkTitle\n                  | translate\n                    : { appName: userDeviceManagementApp$ | async | humanizeAppName | async }\n              }}\"\n              type=\"button\"\n              (click)=\"goToAlarmSource(selectedAlarm.id)\"\n              data-cy=\"alarm-details-device-management-link\"\n            >\n              {{ userDeviceManagementApp$ | async | humanizeAppName | async }}\n              <i c8yIcon=\"external-link\"></i>\n            </button>\n          </ng-container>\n        </p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <span\n          class=\"circle-icon-wrapper\"\n          [ngStyle]=\"{ 'background-color': typeColor }\"\n        >\n          <i\n            class=\"stroked-icon\"\n            c8yIcon=\"bell\"\n          ></i>\n        </span>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8 min-width-0\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Type' | translate }}</p>\n        <p\n          class=\"small text-truncate\"\n          title=\"{{ selectedAlarm.type }}\"\n        >\n          <code>{{ selectedAlarm.type }}</code>\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"col-xs-12 col-md-12 p-b-16\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"calendar\"\n          data-cy=\"c8y-alarm-details--last-updated-icon\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-0 p-r-8 flex-grow\">\n        <div class=\"content-flex-50\">\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Number of occurrences' | translate }}</p>\n            <p>\n              <span class=\"badge badge-info\">{{ selectedAlarm.count }}</span>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'First occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.creationTime | c8yDate: 'medium' }}\n\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Time in which the alarm was created. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            data-cy=\"c8y-alarm-details--last-updated-wrapper\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.lastUpdated | c8yDate: 'medium' }}\n\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Time in which the alarm was last updated. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"col-xs-12 col-md-12 p-b-16\"\n    *ngIf=\"customFragments\"\n  >\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"outgoing-data\"\n        ></i>\n      </div>\n      <div\n        class=\"p-t-8 p-b-0 p-r-8 flex-grow\"\n        data-cy=\"alarm-details-custom-data\"\n      >\n        <p class=\"text-label-small m-b-4 m-r-8\">{{ 'Custom data' | translate }}</p>\n        <pre><code>{{ customFragments | json }}</code></pre>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"d-flex flex-wrap gap-8\">\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Reload audit logs' | translate\"\n    type=\"submit\"\n    (click)=\"reloadAuditLog(true, true)\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': isLoading }\"\n    ></i>\n    {{ 'Reload audit logs' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    \"\n    type=\"submit\"\n    (click)=\"\n      onUpdateDetails(\n        selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n          ? ACKNOWLEDGED_STATUS_VALUE\n          : ACTIVE_STATUS_VALUE\n      )\n    \"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE || isAlarmStatusChanging\"\n  >\n    <i\n      [c8yIcon]=\"selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE ? BELL_SLASH_ICON : BELL_ICON\"\n    ></i>\n    {{\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Create smart rule' | translate\"\n    type=\"submit\"\n    *ngIf=\"isCreateSmartRulesButtonAvailable\"\n    (click)=\"createSmartRule()\"\n  >\n    <i c8yIcon=\"c8y-icon c8y-icon-smart-rules\"></i>\n    {{ 'Create smart rule' | translate }}\n  </button>\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Clear`alarm`' | translate\"\n    type=\"submit\"\n    (click)=\"onUpdateDetails(CLEARED_STATUS_VALUE)\"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear`alarm`' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"button.title | translate\"\n    type=\"button\"\n    *ngFor=\"let button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async\"\n    [ngClass]=\"button.additionalButtonClasses\"\n    (click)=\"detailsButtonAction(button, selectedAlarm)\"\n    [disabled]=\"button.disabled\"\n  >\n    <i\n      [c8yIcon]=\"button.icon\"\n      [ngClass]=\"button.additionalIconClasses\"\n    ></i>\n    <span *ngIf=\"button.label\">{{ button.label | translate }}</span>\n  </button>\n</div>\n\n<ng-template #noAuditLogAvailable>\n  <div class=\"p-16\">\n    <c8y-ui-empty-state\n      [icon]=\"'archive'\"\n      [title]=\"'No audit logs found.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-template>\n\n<div class=\"legend form-block\">{{ 'Audit logs' | translate }}</div>\n\n<ng-container *ngIf=\"isLoading || auditLog?.data.length; else noAuditLogAvailable\">\n  <c8y-loading *ngIf=\"isLoading\"></c8y-loading>\n\n  <c8y-list-group\n    data-cy=\"c8y-alarms-details--audit-logs\"\n    *ngIf=\"!isLoading\"\n  >\n    <c8y-li-timeline *c8yFor=\"let log of auditLog; loadMore: 'hidden'\">\n      {{ log.creationTime | date: 'mediumDate' }}\n      {{ log.creationTime | date: 'mediumTime' }}\n      <c8y-li>\n        <c8y-li-body>\n          <p class=\"text-truncate-wrap separator-bottom p-b-4\">\n            {{ log | auditChangesMessage }}\n          </p>\n          <div class=\"c8y-list__item__footer\">\n            <span\n              class=\"m-r-16 small\"\n              *ngIf=\"log.user\"\n            >\n              <span class=\"text-label-small\">\n                {{ 'by`user`' | translate }}\n              </span>\n              {{ log.user }}\n            </span>\n            <span class=\"small\">\n              <span class=\"text-label-small\">\n                {{ 'device time' | translate }}\n              </span>\n              {{ log.time | c8yDate: 'medium' }}\n            </span>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n  </c8y-list-group>\n</ng-container>\n" }]
+            args: [{ selector: 'c8y-alarm-details', template: "<div class=\"d-flex row tight-grid flex-wrap a-i-stretch\">\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div\n      class=\"border-all fit-w d-flex\"\n      data-cy=\"c8y-alarm-details--status-section-wrapper\"\n    >\n      <div\n        class=\"p-8\"\n        data-cy=\"c8y-alarm-details--status-icon\"\n      >\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 c8y-icon\"\n          [c8yIcon]=\"selectedAlarm.status | AlarmStatusToIcon\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Status' | translate }}</p>\n        <p class=\"small\">{{ statusMessage }}</p>\n      </div>\n    </div>\n  </div>\n  <div class=\"col-xs-12 col-md-6 d-flex p-b-8\">\n    <div\n      class=\"border-all fit-w d-flex\"\n      data-cy=\"c8y-alarm-details--severity-section-wrapper\"\n    >\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          [c8yIcon]=\"selectedAlarm.severity | AlarmSeverityToIcon\"\n          [ngClass]=\"selectedAlarm.severity?.toString() | lowercase\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Severity' | translate }}</p>\n        <p class=\"small\">{{ SEVERITY_LABELS[selectedAlarm.severity] | translate }}</p>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n    data-cy=\"c8y-alarm-details--source-wrapper\"\n  >\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4 stroked-icon status\"\n          c8yIcon=\"contactless-payment\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Source' | translate }}</p>\n        <p class=\"small\">\n          <button\n            class=\"btn-link text-muted p-0 m-r-8 text-left\"\n            title=\"{{ selectedAlarm.source.name }}\"\n            type=\"button\"\n            routerLink=\"{{ selectedAlarmMO | assetLink }}\"\n          >\n            <small class=\"icon-flex\">\n              <i c8yIcon=\"exchange\"></i>\n              {{ selectedAlarm.source.name || selectedAlarm.source.id }}\n            </small>\n          </button>\n          <ng-container *ngIf=\"showSourceNavigationLink$ | async\">\n            <button\n              class=\"btn-link p-0 text-left\"\n              title=\"{{\n                linkTitle\n                  | translate\n                    : { appName: userDeviceManagementApp$ | async | humanizeAppName | async }\n              }}\"\n              type=\"button\"\n              (click)=\"goToAlarmSource(selectedAlarm.id)\"\n              data-cy=\"alarm-details-device-management-link\"\n            >\n              {{ userDeviceManagementApp$ | async | humanizeAppName | async }}\n              <i c8yIcon=\"external-link\"></i>\n            </button>\n          </ng-container>\n        </p>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n    data-cy=\"c8y-alarm-details--severity-type-wrapper\"\n  >\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <span\n          class=\"circle-icon-wrapper\"\n          [ngStyle]=\"{ 'background-color': typeColor }\"\n        >\n          <i\n            class=\"stroked-icon\"\n            c8yIcon=\"bell\"\n          ></i>\n        </span>\n      </div>\n      <div class=\"p-t-8 p-b-8 p-r-8 min-width-0\">\n        <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Type' | translate }}</p>\n        <p\n          class=\"small text-truncate\"\n          title=\"{{ selectedAlarm.type }}\"\n        >\n          <code>{{ selectedAlarm.type }}</code>\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"col-xs-12 col-md-12 p-b-16\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          data-cy=\"c8y-alarm-details--last-updated-icon\"\n          c8yIcon=\"calendar\"\n          data-cy=\"c8y-alarm-details--last-updated-icon\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-0 p-r-8 flex-grow\">\n        <div class=\"content-flex-50\">\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n            data-cy=\"c8y-alarm-details--number-of-occurrences-wrapper\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Number of occurrences' | translate }}</p>\n            <p>\n              <span data-cy=\"c8y-alarm-details--badge\" class=\"badge badge-info\">{{ selectedAlarm.count }}</span>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            *ngIf=\"selectedAlarm.count > 1\"\n            data-cy=\"c8y-alarm-details--first-occurrence-wrapper\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'First occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.creationTime | c8yDate: 'medium' }}\n\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Time in which the alarm was created. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </p>\n          </div>\n          <div\n            class=\"col-4 p-b-8\"\n            data-cy=\"c8y-alarm-details--last-updated-wrapper\"\n          >\n            <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last occurrence' | translate }}</p>\n            <p class=\"small\">\n              {{ selectedAlarm.lastUpdated | c8yDate: 'medium' }}\n\n              <button\n                class=\"btn-help btn-help--sm\"\n                [attr.aria-label]=\"'Help' | translate\"\n                popover=\"{{\n                  'Time in which the alarm was last updated. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                    | translate\n                }}\"\n                placement=\"right\"\n                triggers=\"focus\"\n                container=\"body\"\n                type=\"button\"\n              ></button>\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"col-xs-12 col-md-12 p-b-16\"\n    data-cy=\"c8y-alarm-details--custom-fragments-wrapper\"\n    *ngIf=\"customFragments\"\n  >\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"outgoing-data\"\n        ></i>\n      </div>\n      <div\n        class=\"p-t-8 p-b-0 p-r-8 flex-grow\"\n        data-cy=\"alarm-details-custom-data\"\n      >\n        <p class=\"text-label-small m-b-4 m-r-8\">{{ 'Custom data' | translate }}</p>\n        <pre><code>{{ customFragments | json }}</code></pre>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"d-flex flex-wrap gap-8\">\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Reload audit logs' | translate\"\n    type=\"submit\"\n    (click)=\"reloadAuditLog(true, true)\"\n    data-cy=\"c8y-alarms-details--reload-audit-logs\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': isLoading }\"\n    ></i>\n    {{ 'Reload audit logs' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    \"\n    type=\"submit\"\n    (click)=\"\n      onUpdateDetails(\n        selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n          ? ACKNOWLEDGED_STATUS_VALUE\n          : ACTIVE_STATUS_VALUE\n      )\n    \"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE || isAlarmStatusChanging\"\n  >\n    <i\n      [c8yIcon]=\"selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE ? BELL_SLASH_ICON : BELL_ICON\"\n    ></i>\n    {{\n      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE\n        ? (ACKNOWLEDGE_LABEL | translate)\n        : (REACTIVATE_LABEL | translate)\n    }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Create smart rule' | translate\"\n    type=\"submit\"\n    *ngIf=\"isCreateSmartRulesButtonAvailable\"\n    (click)=\"createSmartRule()\"\n    data-cy=\"c8y-alarms-details--create-smart-rule\"\n  >\n    <i c8yIcon=\"c8y-icon c8y-icon-smart-rules\"></i>\n    {{ 'Create smart rule' | translate }}\n  </button>\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"'Clear`alarm`' | translate\"\n    type=\"submit\"\n    data-cy=\"c8y-alarm-details--clear-alarm\"\n    (click)=\"onUpdateDetails(CLEARED_STATUS_VALUE)\"\n    [disabled]=\"selectedAlarm.status === CLEARED_STATUS_VALUE\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear`alarm`' | translate }}\n  </button>\n\n  <button\n    class=\"btn btn-default btn-sm\"\n    [title]=\"button.title | translate\"\n    type=\"button\"\n    *ngFor=\"let button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async\"\n    [ngClass]=\"button.additionalButtonClasses\"\n    (click)=\"detailsButtonAction(button, selectedAlarm)\"\n    [disabled]=\"button.disabled\"\n  >\n    <i\n      [c8yIcon]=\"button.icon\"\n      [ngClass]=\"button.additionalIconClasses\"\n    ></i>\n    <span *ngIf=\"button.label\">{{ button.label | translate }}</span>\n  </button>\n</div>\n\n<ng-template #noAuditLogAvailable>\n  <div class=\"p-16\">\n    <c8y-ui-empty-state\n      [icon]=\"'archive'\"\n      [title]=\"'No audit logs found.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  </div>\n</ng-template>\n\n<div class=\"legend form-block\">{{ 'Audit logs' | translate }}</div>\n\n<ng-container *ngIf=\"isLoading || auditLog?.data.length; else noAuditLogAvailable\">\n  <c8y-loading *ngIf=\"isLoading\"></c8y-loading>\n\n  <c8y-list-group\n    data-cy=\"c8y-alarms-details--audit-logs\"\n    *ngIf=\"!isLoading\"\n  >\n    <c8y-li-timeline *c8yFor=\"let log of auditLog; loadMore: 'hidden'\">\n      {{ log.creationTime | date: 'mediumDate' }}\n      {{ log.creationTime | date: 'mediumTime' }}\n      <c8y-li>\n        <c8y-li-body>\n          <p class=\"text-truncate-wrap separator-bottom p-b-4\">\n            {{ log | auditChangesMessage }}\n          </p>\n          <div class=\"c8y-list__item__footer\">\n            <span\n              class=\"m-r-16 small\"\n              *ngIf=\"log.user\"\n            >\n              <span class=\"text-label-small\">\n                {{ 'by`user`' | translate }}\n              </span>\n              {{ log.user }}\n            </span>\n            <span class=\"small\">\n              <span class=\"text-label-small\">\n                {{ 'device time' | translate }}\n              </span>\n              {{ log.time | c8yDate: 'medium' }}\n            </span>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n  </c8y-list-group>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: AlarmDetailsService }, { type: i2.AlarmService }, { type: i3.AlertService }, { type: i3.AppStateService }, { type: i2.AuditService }, { type: i3.RelativeTimePipe }, { type: Ng1SmartRulesUpgradeService, decorators: [{
                     type: Optional
                 }] }, { type: i1.TranslateService }, { type: i2.InventoryService }, { type: AlarmsViewService }, { type: i3.ColorService }, { type: i3.InterAppService }], propDecorators: { selectedAlarm: [{
@@ -1345,11 +1345,11 @@ class AlarmsFilterComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlarmsFilterComponent, deps: [{ token: i1$2.FormBuilder }, { token: AlarmsViewService }, { token: i3.AlertService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: { contextSourceId: "contextSourceId" }, outputs: { onFilterApplied: "onFilterApplied" }, viewQueries: [{ propertyName: "filtersDropdown", first: true, predicate: ["filtersDropdown"], descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by severity' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\" style=\"min-width: 104px; padding-top: 0; padding-bottom: 0;\">\n        <ng-container *ngIf=\"chips.length !== severitiesList.length; else allAlarms\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let chip of chips\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (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              [ngClass]=\"chip | lowercase\"\n            ></i>\n            {{ SEVERITY_LABELS[chip] | translate }}\n          </span>\n        </ng-container>\n        <ng-template #allAlarms>\n          <span class=\"text-truncate\" title=\"{{ 'All severities' | translate }}\">\n            {{ 'All severities' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last\">\n        <button\n          class=\"btn-default btn btn--caret\"\n          title=\"{{ chips | AlarmSeveritiesToTitle }}\"\n          data-cy=\"c8y-alarm-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-alarm-filter--all\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"allChanged($event)\"\n            [ngModel]=\"isEachCheckboxSelected$ | async\"\n            [indeterminate]=\"isIndeterminate$ | async\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"'bell'\"\n          ></i>\n          <span class=\"m-l-8\">{{ 'All' | translate }}</span>\n        </label>\n      </li>\n      <li\n        class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center\"\n        *ngFor=\"let severity of severitiesList\"\n      >\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"SEVERITY_LABELS[severity] | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            [attr.data-cy]=\"'c8y-alarm-filter--' + severity\"\n            [formControlName]=\"severity\"\n            [value]=\"severity\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"severity | AlarmSeverityToIcon\"\n            [ngClass]=\"severity | lowercase\"\n          ></i>\n          <span class=\"m-l-8\">{{ SEVERITY_LABELS[severity] | translate }}</span>\n        </label>\n        <!-- badge -->\n        <div\n          class=\"badge badge-info m-l-auto\"\n          *ngIf=\"alarmCounts[severity] || alarmCounts[severity] === 0\"\n        >\n          <i\n            class=\"icon-spin\"\n            [c8yIcon]=\"'circle-o-notch'\"\n            *ngIf=\"countLoading\"\n          ></i>\n          <span\n            *ngIf=\"!countLoading\"\n            [attr.data-cy]=\"severity + '-badge'\"\n          >\n            {{ alarmCounts[severity] < 99 ? alarmCounts[severity] : '99+' }}\n          </span>\n        </div>\n      </li>\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center separator-top\">\n        <label\n          class=\"c8y-switch\"\n          [attr.aria-label]=\"'Show cleared alarms' | translate\"\n          [attr.data-cy]=\"'c8y-alarms-filter--cleared'\"\n        >\n          <input\n            type=\"checkbox\"\n            #showClearedCheckbox\n            [ngModelOptions]=\"{ standalone: true }\"\n            [(ngModel)]=\"showCleared\"\n            (click)=\"markSeveritiesAsTouched(); updateAlarmsCount(showClearedCheckbox.checked)\"\n          />\n          <span></span>\n          <span\n            class=\"text-truncate\"\n            title=\"{{ 'Show cleared alarms' | translate }}\"\n          >\n            {{ 'Show cleared alarms' | translate }}\n          </span>\n        </label>\n      </li>\n\n      <div class=\"p-16 d-flex sticky-bottom separator-top\">\n        <button\n          [attr.data-cy]=\"'c8y-alarms-filter--apply'\"\n          class=\"btn btn-primary btn-sm flex-grow\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          (click)=\"applyFilters(false); closeDropdown()\"\n          [disabled]=\"shouldDisableApplyButton$ | async\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </ul>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AlarmSeverityToIconPipe, name: "AlarmSeverityToIcon" }, { kind: "pipe", type: AlarmSeveritiesToTitlePipe, name: "AlarmSeveritiesToTitle" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: { contextSourceId: "contextSourceId" }, outputs: { onFilterApplied: "onFilterApplied" }, viewQueries: [{ propertyName: "filtersDropdown", first: true, predicate: ["filtersDropdown"], descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by severity' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\" style=\"min-width: 104px; padding-top: 0; padding-bottom: 0;\">\n        <ng-container *ngIf=\"chips.length !== severitiesList.length; else allAlarms\">\n          <span\n            class=\"tag tag--info chip\"\n            [attr.data-cy]=\"'c8y-alarms-filter--chip-' + chip\"\n            *ngFor=\"let chip of chips\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              data-cy=\"c8y-alarms-filter--remove-chip\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"deselectChip(chip); $event.stopPropagation()\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <i\n              class=\"status stroked-icon icon-12\"\n              [attr.data-cy]=\"'c8y-alarms-filter--icon-' + chip\"\n              [c8yIcon]=\"chip | AlarmSeverityToIcon\"\n              [ngClass]=\"chip | lowercase\"\n            ></i>\n            {{ SEVERITY_LABELS[chip] | translate }}\n          </span>\n        </ng-container>\n        <ng-template #allAlarms>\n          <span class=\"text-truncate\" title=\"{{ 'All severities' | translate }}\">\n            {{ 'All severities' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last\">\n        <button\n          class=\"btn-default btn btn--caret\"\n          title=\"{{ chips | AlarmSeveritiesToTitle }}\"\n          data-cy=\"c8y-alarms-filter\"\n          dropdownToggle\n          (click)=\"resetForm()\"\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <ul\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center sticky-top separator-bottom\">\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"'All' | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            data-cy=\"c8y-alarms-filter--all\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"allChanged($event)\"\n            [ngModel]=\"isEachCheckboxSelected$ | async\"\n            [indeterminate]=\"isIndeterminate$ | async\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"'bell'\"\n          ></i>\n          <span class=\"m-l-8\">{{ 'All' | translate }}</span>\n        </label>\n      </li>\n      <li\n        class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center\"\n        *ngFor=\"let severity of severitiesList\"\n      >\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"SEVERITY_LABELS[severity] | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            [attr.data-cy]=\"'c8y-alarms-filter--' + severity\"\n            [formControlName]=\"severity\"\n            [value]=\"severity\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"severity | AlarmSeverityToIcon\"\n            [ngClass]=\"severity | lowercase\"\n          ></i>\n          <span class=\"m-l-8\">{{ SEVERITY_LABELS[severity] | translate }}</span>\n        </label>\n        <!-- badge -->\n        <div\n          class=\"badge badge-info m-l-auto\"\n          *ngIf=\"alarmCounts[severity] || alarmCounts[severity] === 0\"\n        >\n          <i\n            class=\"icon-spin\"\n            [c8yIcon]=\"'circle-o-notch'\"\n            *ngIf=\"countLoading\"\n          ></i>\n          <span\n            *ngIf=\"!countLoading\"\n            [attr.data-cy]=\"'c8y-alarms-filter--' + severity + '-badge'\"\n          >\n            {{ alarmCounts[severity] < 99 ? alarmCounts[severity] : '99+' }}\n          </span>\n        </div>\n      </li>\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center separator-top\">\n        <label\n          class=\"c8y-switch\"\n          [attr.aria-label]=\"'Show cleared alarms' | translate\"\n          [attr.data-cy]=\"'c8y-alarms-filter--cleared'\"\n        >\n          <input\n            type=\"checkbox\"\n            #showClearedCheckbox\n            [ngModelOptions]=\"{ standalone: true }\"\n            [(ngModel)]=\"showCleared\"\n            (click)=\"markSeveritiesAsTouched(); updateAlarmsCount(showClearedCheckbox.checked)\"\n          />\n          <span></span>\n          <span\n            class=\"text-truncate\"\n            title=\"{{ 'Show cleared alarms' | translate }}\"\n          >\n            {{ 'Show cleared alarms' | translate }}\n          </span>\n        </label>\n      </li>\n\n      <div class=\"p-16 d-flex sticky-bottom separator-top\">\n        <button\n          data-cy=\"c8y-alarms-filter--apply\"\n          class=\"btn btn-primary btn-sm flex-grow\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          (click)=\"applyFilters(false); closeDropdown()\"\n          [disabled]=\"shouldDisableApplyButton$ | async\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </ul>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AlarmSeverityToIconPipe, name: "AlarmSeverityToIcon" }, { kind: "pipe", type: AlarmSeveritiesToTitlePipe, name: "AlarmSeveritiesToTitle" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlarmsFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms-filter', template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by severity' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\" style=\"min-width: 104px; padding-top: 0; padding-bottom: 0;\">\n        <ng-container *ngIf=\"chips.length !== severitiesList.length; else allAlarms\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let chip of chips\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (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              [ngClass]=\"chip | lowercase\"\n            ></i>\n            {{ SEVERITY_LABELS[chip] | translate }}\n          </span>\n        </ng-container>\n        <ng-template #allAlarms>\n          <span class=\"text-truncate\" title=\"{{ 'All severities' | translate }}\">\n            {{ 'All severities' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last\">\n        <button\n          class=\"btn-default btn btn--caret\"\n          title=\"{{ chips | AlarmSeveritiesToTitle }}\"\n          data-cy=\"c8y-alarm-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-alarm-filter--all\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"allChanged($event)\"\n            [ngModel]=\"isEachCheckboxSelected$ | async\"\n            [indeterminate]=\"isIndeterminate$ | async\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"'bell'\"\n          ></i>\n          <span class=\"m-l-8\">{{ 'All' | translate }}</span>\n        </label>\n      </li>\n      <li\n        class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center\"\n        *ngFor=\"let severity of severitiesList\"\n      >\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"SEVERITY_LABELS[severity] | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            [attr.data-cy]=\"'c8y-alarm-filter--' + severity\"\n            [formControlName]=\"severity\"\n            [value]=\"severity\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"severity | AlarmSeverityToIcon\"\n            [ngClass]=\"severity | lowercase\"\n          ></i>\n          <span class=\"m-l-8\">{{ SEVERITY_LABELS[severity] | translate }}</span>\n        </label>\n        <!-- badge -->\n        <div\n          class=\"badge badge-info m-l-auto\"\n          *ngIf=\"alarmCounts[severity] || alarmCounts[severity] === 0\"\n        >\n          <i\n            class=\"icon-spin\"\n            [c8yIcon]=\"'circle-o-notch'\"\n            *ngIf=\"countLoading\"\n          ></i>\n          <span\n            *ngIf=\"!countLoading\"\n            [attr.data-cy]=\"severity + '-badge'\"\n          >\n            {{ alarmCounts[severity] < 99 ? alarmCounts[severity] : '99+' }}\n          </span>\n        </div>\n      </li>\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center separator-top\">\n        <label\n          class=\"c8y-switch\"\n          [attr.aria-label]=\"'Show cleared alarms' | translate\"\n          [attr.data-cy]=\"'c8y-alarms-filter--cleared'\"\n        >\n          <input\n            type=\"checkbox\"\n            #showClearedCheckbox\n            [ngModelOptions]=\"{ standalone: true }\"\n            [(ngModel)]=\"showCleared\"\n            (click)=\"markSeveritiesAsTouched(); updateAlarmsCount(showClearedCheckbox.checked)\"\n          />\n          <span></span>\n          <span\n            class=\"text-truncate\"\n            title=\"{{ 'Show cleared alarms' | translate }}\"\n          >\n            {{ 'Show cleared alarms' | translate }}\n          </span>\n        </label>\n      </li>\n\n      <div class=\"p-16 d-flex sticky-bottom separator-top\">\n        <button\n          [attr.data-cy]=\"'c8y-alarms-filter--apply'\"\n          class=\"btn btn-primary btn-sm flex-grow\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          (click)=\"applyFilters(false); closeDropdown()\"\n          [disabled]=\"shouldDisableApplyButton$ | async\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </ul>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'c8y-alarms-filter', template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by severity' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\" style=\"min-width: 104px; padding-top: 0; padding-bottom: 0;\">\n        <ng-container *ngIf=\"chips.length !== severitiesList.length; else allAlarms\">\n          <span\n            class=\"tag tag--info chip\"\n            [attr.data-cy]=\"'c8y-alarms-filter--chip-' + chip\"\n            *ngFor=\"let chip of chips\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              data-cy=\"c8y-alarms-filter--remove-chip\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"deselectChip(chip); $event.stopPropagation()\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <i\n              class=\"status stroked-icon icon-12\"\n              [attr.data-cy]=\"'c8y-alarms-filter--icon-' + chip\"\n              [c8yIcon]=\"chip | AlarmSeverityToIcon\"\n              [ngClass]=\"chip | lowercase\"\n            ></i>\n            {{ SEVERITY_LABELS[chip] | translate }}\n          </span>\n        </ng-container>\n        <ng-template #allAlarms>\n          <span class=\"text-truncate\" title=\"{{ 'All severities' | translate }}\">\n            {{ 'All severities' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last\">\n        <button\n          class=\"btn-default btn btn--caret\"\n          title=\"{{ chips | AlarmSeveritiesToTitle }}\"\n          data-cy=\"c8y-alarms-filter\"\n          dropdownToggle\n          (click)=\"resetForm()\"\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <ul\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center sticky-top separator-bottom\">\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"'All' | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            data-cy=\"c8y-alarms-filter--all\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"allChanged($event)\"\n            [ngModel]=\"isEachCheckboxSelected$ | async\"\n            [indeterminate]=\"isIndeterminate$ | async\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"'bell'\"\n          ></i>\n          <span class=\"m-l-8\">{{ 'All' | translate }}</span>\n        </label>\n      </li>\n      <li\n        class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center\"\n        *ngFor=\"let severity of severitiesList\"\n      >\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"SEVERITY_LABELS[severity] | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            [attr.data-cy]=\"'c8y-alarms-filter--' + severity\"\n            [formControlName]=\"severity\"\n            [value]=\"severity\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"severity | AlarmSeverityToIcon\"\n            [ngClass]=\"severity | lowercase\"\n          ></i>\n          <span class=\"m-l-8\">{{ SEVERITY_LABELS[severity] | translate }}</span>\n        </label>\n        <!-- badge -->\n        <div\n          class=\"badge badge-info m-l-auto\"\n          *ngIf=\"alarmCounts[severity] || alarmCounts[severity] === 0\"\n        >\n          <i\n            class=\"icon-spin\"\n            [c8yIcon]=\"'circle-o-notch'\"\n            *ngIf=\"countLoading\"\n          ></i>\n          <span\n            *ngIf=\"!countLoading\"\n            [attr.data-cy]=\"'c8y-alarms-filter--' + severity + '-badge'\"\n          >\n            {{ alarmCounts[severity] < 99 ? alarmCounts[severity] : '99+' }}\n          </span>\n        </div>\n      </li>\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center separator-top\">\n        <label\n          class=\"c8y-switch\"\n          [attr.aria-label]=\"'Show cleared alarms' | translate\"\n          [attr.data-cy]=\"'c8y-alarms-filter--cleared'\"\n        >\n          <input\n            type=\"checkbox\"\n            #showClearedCheckbox\n            [ngModelOptions]=\"{ standalone: true }\"\n            [(ngModel)]=\"showCleared\"\n            (click)=\"markSeveritiesAsTouched(); updateAlarmsCount(showClearedCheckbox.checked)\"\n          />\n          <span></span>\n          <span\n            class=\"text-truncate\"\n            title=\"{{ 'Show cleared alarms' | translate }}\"\n          >\n            {{ 'Show cleared alarms' | translate }}\n          </span>\n        </label>\n      </li>\n\n      <div class=\"p-16 d-flex sticky-bottom separator-top\">\n        <button\n          data-cy=\"c8y-alarms-filter--apply\"\n          class=\"btn btn-primary btn-sm flex-grow\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          (click)=\"applyFilters(false); closeDropdown()\"\n          [disabled]=\"shouldDisableApplyButton$ | async\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </ul>\n  </div>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: AlarmsViewService }, { type: i3.AlertService }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }], propDecorators: { contextSourceId: [{
                 type: Input
             }], onFilterApplied: [{
@@ -1373,11 +1373,11 @@ class AlarmsIconComponent {
             this.typeFilters.find(filter => filter.filters.type === this.alarm.type)?.color || 'none';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlarmsIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlarmsIconComponent, 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  (click)=\"$event.stopPropagation()\"\n  [delay]=\"500\"\n>\n  <i\n    [c8yIcon]=\"alarm.status | AlarmStatusToIcon\"\n    [ngClass]=\"{ 'stroked-icon': isFilterApplied }\"\n  ></i>\n</button>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i7.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AlarmSeverityToIconPipe, name: "AlarmSeverityToIcon" }, { kind: "pipe", type: AlarmStatusToIconPipe, name: "AlarmStatusToIcon" }, { kind: "pipe", type: AlarmSeverityToLabelPipe, name: "AlarmSeverityToLabel" }, { kind: "pipe", type: AlarmStatusToLabelPipe, name: "AlarmStatusToLabel" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlarmsIconComponent, selector: "c8y-alarms-icon", inputs: { alarm: "alarm", typeFilters: "typeFilters" }, ngImport: i0, template: "<button\n  class=\"btn-clean severity\"\n  [attr.aria-label]=\"\n    alarmSeverityLabel | translate: { alarmSeverity: alarm.severity | AlarmSeverityToLabel }\n  \"\n  [tooltip]=\"\n    alarmSeverityLabel | translate: { alarmSeverity: alarm.severity | AlarmSeverityToLabel }\n  \"\n  placement=\"right\"\n  container=\"body\"\n  type=\"button\"\n  (click)=\"$event.stopPropagation()\"\n  [delay]=\"500\"\n>\n  <i\n    class=\"status stroked-icon\"\n    [c8yIcon]=\"alarm.severity | AlarmSeverityToIcon\"\n    [ngClass]=\"alarm.severity | lowercase\"\n  ></i>\n</button>\n<button\n  class=\"btn-clean status\"\n  [ngStyle]=\"{ 'background-color': iconBackgroundColor }\"\n  [attr.aria-label]=\"\n    alarmStatusLabel | translate: { alarmStatus: alarm.status | AlarmStatusToLabel }\n  \"\n  [tooltip]=\"\n    (alarmStatusLabel | translate: { alarmStatus: alarm.status | AlarmStatusToLabel }) +\n    '\\n' +\n    (alarmStatusType | translate: { alarmType: alarm.type })\n  \"\n  placement=\"right\"\n  container=\"body\"\n  type=\"button\"\n  [ngClass]=\"{ 'circle-icon-wrapper': isFilterApplied }\"\n  data-cy=\"c8y-alarms-icon--status-icon\"\n  (click)=\"$event.stopPropagation()\"\n  [delay]=\"500\"\n>\n  <i\n    [c8yIcon]=\"alarm.status | AlarmStatusToIcon\"\n    [ngClass]=\"{ 'stroked-icon': isFilterApplied }\"\n  ></i>\n</button>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i7.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { 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: "18.2.13", ngImport: i0, type: AlarmsIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms-icon', 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  (click)=\"$event.stopPropagation()\"\n  [delay]=\"500\"\n>\n  <i\n    [c8yIcon]=\"alarm.status | AlarmStatusToIcon\"\n    [ngClass]=\"{ 'stroked-icon': isFilterApplied }\"\n  ></i>\n</button>\n" }]
+            args: [{ selector: 'c8y-alarms-icon', template: "<button\n  class=\"btn-clean severity\"\n  [attr.aria-label]=\"\n    alarmSeverityLabel | translate: { alarmSeverity: alarm.severity | AlarmSeverityToLabel }\n  \"\n  [tooltip]=\"\n    alarmSeverityLabel | translate: { alarmSeverity: alarm.severity | AlarmSeverityToLabel }\n  \"\n  placement=\"right\"\n  container=\"body\"\n  type=\"button\"\n  (click)=\"$event.stopPropagation()\"\n  [delay]=\"500\"\n>\n  <i\n    class=\"status stroked-icon\"\n    [c8yIcon]=\"alarm.severity | AlarmSeverityToIcon\"\n    [ngClass]=\"alarm.severity | lowercase\"\n  ></i>\n</button>\n<button\n  class=\"btn-clean status\"\n  [ngStyle]=\"{ 'background-color': iconBackgroundColor }\"\n  [attr.aria-label]=\"\n    alarmStatusLabel | translate: { alarmStatus: alarm.status | AlarmStatusToLabel }\n  \"\n  [tooltip]=\"\n    (alarmStatusLabel | translate: { alarmStatus: alarm.status | AlarmStatusToLabel }) +\n    '\\n' +\n    (alarmStatusType | translate: { alarmType: alarm.type })\n  \"\n  placement=\"right\"\n  container=\"body\"\n  type=\"button\"\n  [ngClass]=\"{ 'circle-icon-wrapper': isFilterApplied }\"\n  data-cy=\"c8y-alarms-icon--status-icon\"\n  (click)=\"$event.stopPropagation()\"\n  [delay]=\"500\"\n>\n  <i\n    [c8yIcon]=\"alarm.status | AlarmStatusToIcon\"\n    [ngClass]=\"{ 'stroked-icon': isFilterApplied }\"\n  ></i>\n</button>\n" }]
         }], propDecorators: { alarm: [{
                 type: Input
             }], typeFilters: [{
@@ -1496,11 +1496,11 @@ class AlarmsIntervalRefreshComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", type: AlarmsIntervalRefreshComponent, 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    >\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        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-selector\"\n      >\n        <option\n          [disabled]=\"isDisabled\"\n          *ngFor=\"let refreshInterval of refreshIntervalsInMilliseconds\"\n          [ngValue]=\"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-reload-button\"\n      >\n        <i\n          c8yIcon=\"refresh\"\n          [ngClass]=\"{ 'icon-spin': alarmsListLoading$ | async }\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.CountdownIntervalComponent, selector: "c8y-countdown-interval", inputs: ["countdownInterval"], outputs: ["countdownEnded"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlarmsIntervalRefreshComponent, selector: "c8y-alarms-interval-refresh", inputs: { isDisabled: "isDisabled", alarmsListLoading$: "alarmsListLoading$", isIntervalToggleEnabled: "isIntervalToggleEnabled" }, outputs: { onCountdownEnded: "onCountdownEnded" }, viewQueries: [{ propertyName: "countdownIntervalComponent", first: true, predicate: CountdownIntervalComponent, descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex a-i-center fit-w fit-h\"\n  [formGroup]=\"toggleIntervalForm\"\n>\n  <label class=\"m-b-0 m-r-8 text-normal text-muted flex-no-shrink\">\n    {{ 'Auto refresh' | translate }}\n  </label>\n  <div class=\"input-group\">\n    <label\n      class=\"toggle-countdown\"\n      [class.toggle-countdown-disabled]=\"isDisabled\"\n      [attr.aria-label]=\"getTooltip() | translate\"\n      [tooltip]=\"getTooltip() | translate\"\n      placement=\"bottom\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      data-cy=\"c8y-alarms-interval-refresh--toggle-countdown\"\n    >\n      <input\n        type=\"checkbox\"\n        data-cy=\"c8y-alarms-interval-toggle\"\n        formControlName=\"intervalToggle\"\n        (click)=\"trackUserClickOnIntervalToggle($event.target)\"\n      />\n      <c8y-countdown-interval\n        *ngIf=\"isIntervalToggleEnabled\"\n        [countdownInterval]=\"toggleIntervalForm.value.refreshInterval\"\n        (countdownEnded)=\"onCountdownEnded.emit()\"\n      ></c8y-countdown-interval>\n      <i\n        data-cy=\"c8y-alarms-interval-refresh--pause\"\n        c8yIcon=\"pause\"\n        *ngIf=\"!isIntervalToggleEnabled\"\n      ></i>\n    </label>\n    <div\n      class=\"c8y-select-wrapper\"\n      *ngIf=\"!isDisabled\"\n    >\n      <select\n        class=\"form-control text-12\"\n        [attr.aria-label]=\"'Refresh interval in seconds' | translate\"\n        [tooltip]=\"'Refresh interval in seconds' | translate\"\n        placement=\"bottom\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n        [container]=\"'body'\"\n        formControlName=\"refreshInterval\"\n        data-cy=\"c8y-alarms-interval-refresh--selector\"\n      >\n        <option\n          [disabled]=\"isDisabled\"\n          *ngFor=\"let refreshInterval of refreshIntervalsInMilliseconds\"\n          [ngValue]=\"refreshInterval\"\n          [attr.data-cy]=\"'c8y-interval-' + refreshInterval\"\n        >\n          {{ SECONDS_UNTIL_REFRESH | translate: { seconds: refreshInterval / 1000 } }}\n        </option>\n      </select>\n      <span></span>\n    </div>\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default\"\n        style=\"border-left: 0\"\n        [attr.aria-label]=\"'Refresh' | translate\"\n        [tooltip]=\"'Refresh' | translate\"\n        placement=\"bottom\"\n        type=\"button\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n        [disabled]=\"isDisabled || (alarmsListLoading$ | async)\"\n        (click)=\"onCountdownEnded.emit()\"\n        data-cy=\"c8y-alarms-interval-refresh--btn\"\n      >\n        <i\n          c8yIcon=\"refresh\"\n          [ngClass]=\"{ 'icon-spin': alarmsListLoading$ | async }\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.CountdownIntervalComponent, selector: "c8y-countdown-interval", inputs: ["countdownInterval"], outputs: ["countdownEnded"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlarmsIntervalRefreshComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms-interval-refresh', 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    >\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        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-selector\"\n      >\n        <option\n          [disabled]=\"isDisabled\"\n          *ngFor=\"let refreshInterval of refreshIntervalsInMilliseconds\"\n          [ngValue]=\"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-reload-button\"\n      >\n        <i\n          c8yIcon=\"refresh\"\n          [ngClass]=\"{ 'icon-spin': alarmsListLoading$ | async }\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'c8y-alarms-interval-refresh', template: "<form\n  class=\"d-flex a-i-center fit-w fit-h\"\n  [formGroup]=\"toggleIntervalForm\"\n>\n  <label class=\"m-b-0 m-r-8 text-normal text-muted flex-no-shrink\">\n    {{ 'Auto refresh' | translate }}\n  </label>\n  <div class=\"input-group\">\n    <label\n      class=\"toggle-countdown\"\n      [class.toggle-countdown-disabled]=\"isDisabled\"\n      [attr.aria-label]=\"getTooltip() | translate\"\n      [tooltip]=\"getTooltip() | translate\"\n      placement=\"bottom\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      data-cy=\"c8y-alarms-interval-refresh--toggle-countdown\"\n    >\n      <input\n        type=\"checkbox\"\n        data-cy=\"c8y-alarms-interval-toggle\"\n        formControlName=\"intervalToggle\"\n        (click)=\"trackUserClickOnIntervalToggle($event.target)\"\n      />\n      <c8y-countdown-interval\n        *ngIf=\"isIntervalToggleEnabled\"\n        [countdownInterval]=\"toggleIntervalForm.value.refreshInterval\"\n        (countdownEnded)=\"onCountdownEnded.emit()\"\n      ></c8y-countdown-interval>\n      <i\n        data-cy=\"c8y-alarms-interval-refresh--pause\"\n        c8yIcon=\"pause\"\n        *ngIf=\"!isIntervalToggleEnabled\"\n      ></i>\n    </label>\n    <div\n      class=\"c8y-select-wrapper\"\n      *ngIf=\"!isDisabled\"\n    >\n      <select\n        class=\"form-control text-12\"\n        [attr.aria-label]=\"'Refresh interval in seconds' | translate\"\n        [tooltip]=\"'Refresh interval in seconds' | translate\"\n        placement=\"bottom\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n        [container]=\"'body'\"\n        formControlName=\"refreshInterval\"\n        data-cy=\"c8y-alarms-interval-refresh--selector\"\n      >\n        <option\n          [disabled]=\"isDisabled\"\n          *ngFor=\"let refreshInterval of refreshIntervalsInMilliseconds\"\n          [ngValue]=\"refreshInterval\"\n          [attr.data-cy]=\"'c8y-interval-' + refreshInterval\"\n        >\n          {{ SECONDS_UNTIL_REFRESH | translate: { seconds: refreshInterval / 1000 } }}\n        </option>\n      </select>\n      <span></span>\n    </div>\n    <div class=\"input-group-btn\">\n      <button\n        class=\"btn btn-default\"\n        style=\"border-left: 0\"\n        [attr.aria-label]=\"'Refresh' | translate\"\n        [tooltip]=\"'Refresh' | translate\"\n        placement=\"bottom\"\n        type=\"button\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n        [disabled]=\"isDisabled || (alarmsListLoading$ | async)\"\n        (click)=\"onCountdownEnded.emit()\"\n        data-cy=\"c8y-alarms-interval-refresh--btn\"\n      >\n        <i\n          c8yIcon=\"refresh\"\n          [ngClass]=\"{ 'icon-spin': alarmsListLoading$ | async }\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: AlarmsViewService }], propDecorators: { isDisabled: [{
                 type: Input
             }], alarmsListLoading$: [{
@@ -1648,11 +1648,11 @@ class AlarmsListComponent {
         this.activeChildParam$.subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlarmsListComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: AlarmsViewService }, { token: i3.ContextRouteService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: { alarms: "alarms", hasPermissions: "hasPermissions", typeFilters: "typeFilters", loadMoreMode: "loadMoreMode", navigationOptions: "navigationOptions", isInitialLoading: "isInitialLoading", splitView: "splitView" }, outputs: { onSelectedAlarm: "onSelectedAlarm", onScrollingStateChange: "onScrollingStateChange" }, viewQueries: [{ propertyName: "innerScrollWrapper", first: true, predicate: ["scrollWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"inner-scroll\"\n  [ngClass]=\"{ 'split-view__list bg-level-1': splitView, 'bg-component': !splitView }\"\n  data-cy=\"c8y-alarms-list\"\n  #scrollWrapper\n>\n  <div\n    class=\"flex-wrap flex-no-shrink sticky-top m-b-16\"\n    [ngClass]=\"{\n      'separator-bottom card-header p-b-0': splitView,\n      'd-flex fit-w separator-top-bottom widget-bar p-l-16 p-r-16':\n        !splitView && navigationOptions.allowNavigationToAlarmsView\n    }\"\n  >\n    <div\n      class=\"h4 card-title\"\n      *ngIf=\"splitView\"\n    >\n      {{ 'Alarms list' | translate }}\n    </div>\n    <div\n      [ngClass]=\"{ 'fit-w d-flex a-i-center gap-16': !splitView, 'fit-h-20 m-l-auto': splitView }\"\n    >\n      <ng-content></ng-content>\n    </div>\n    <!--  Loading -->\n    <div\n      class=\"fit-w overflow-hidden\"\n      [ngClass]=\"{ 'p-t-16': splitView }\"\n    >\n      <div\n        class=\"loading-bar\"\n        style=\"z-index: 101\"\n        [ngClass]=\"{ active: isInitialLoading && !isEmptyListLoading }\"\n      ></div>\n    </div>\n\n    <div\n      class=\"alert alert-warning\"\n      role=\"alert\"\n      translate\n      *ngIf=\"\n        !isEmptyListLoading &&\n        (activeChildParam$ | async) &&\n        (activeAlarm$ | async)?.id !== (activeChildParam$ | async)\n      \"\n    >\n      The selected alarm is not currently in the list, change your filter.\n    </div>\n  </div>\n  <c8y-list-group\n    class=\"p-r-16 interactive\"\n    [ngStyle]=\"{ opacity: isInitialLoading && !isEmptyListLoading ? 0.2 : 1 }\"\n    style=\"transition: opacity 0.15s linear\"\n    data-cy=\"c8y-alarm-list--group\"\n  >\n    <c8y-li-timeline\n      class=\"pointer\"\n      role=\"button\"\n      data-cy=\"c8y-alarm-list--timeline-repeat\"\n      *c8yFor=\"let alarm of alarms; let i = index; pipe: mapAlarmLink; loadMore: loadMoreMode\"\n      [routerLink]=\"navigationOptions.allowNavigationToAlarmsView ? alarm.link : null\"\n      routerLinkActive=\"active\"\n      [queryParamsHandling]=\"navigationOptions.queryParamsHandling\"\n      (isActiveChange)=\"activeRouteChanged($event, liScrollAnchor, alarm)\"\n      (click)=\"onAlarmOpen(alarm)\"\n      [queryParams]=\"\n        navigationOptions.includeClearedQueryParams\n          ? { showCleared: alarm.status === 'CLEARED' }\n          : {}\n      \"\n    >\n      <span\n        [attr.aria-label]=\"alarmLastOccurrenceLabel | translate\"\n        [tooltip]=\"alarmLastOccurrenceLabel | translate\"\n        placement=\"right\"\n        container=\"body\"\n        [delay]=\"500\"\n      >\n        {{ alarm.time | c8yDate: 'mediumDate' }}\n        {{ alarm.time | c8yDate: 'mediumTime' }}\n      </span>\n      <c8y-li\n        style=\"scroll-margin-top: 56px\"\n        #liScrollAnchor\n      >\n        <c8y-li-icon class=\"a-s-start\">\n          <div class=\"alarm-icons\">\n            <c8y-alarms-icon [typeFilters]=\"typeFilters\" [alarm]=\"alarm\"></c8y-alarms-icon>\n          </div>\n          <button\n            class=\"btn-clean text-center\"\n            [attr.aria-label]=\"\n              alarmBadgeTooltip\n                | translate\n                  : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n            \"\n            [tooltip]=\"\n              alarmBadgeTooltip\n                | translate\n                  : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n            \"\n            placement=\"right\"\n            container=\"body\"\n            type=\"button\"\n            *ngIf=\"alarm.firstOccurrenceTime\"\n            (click)=\"$event.stopPropagation()\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"badge badge-info\"\n              *ngIf=\"alarm.count > 1\"\n            >\n              {{ alarm.count }}\n            </span>\n          </button>\n        </c8y-li-icon>\n        <c8y-li-body class=\"a-s-stretch\">\n          <div class=\"d-flex a-i-start fit-h\">\n            <div class=\"min-width-0 flex-grow\">\n              <p class=\"text-truncate-wrap p-b-4\">\n                {{ alarm.text | translate }}\n              </p>\n              <div class=\"d-flex\">\n                <p\n                  class=\"small text-muted text-truncate flex-grow\"\n                  [title]=\"alarm.source.name\"\n                >\n                  <i [c8yIcon]=\"'exchange'\"></i>\n                  {{ alarm.source.name }}\n                </p>\n                <div class=\"d-flex\">\n                  <div\n                    [title]=\"item.title | translate\"\n                    *ngFor=\"let item of alarm | alarmListIndicator | async\"\n                  >\n                    <i\n                      [class]=\"item.class\"\n                      [c8yIcon]=\"item.icon\"\n                    ></i>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n    <c8y-loading *ngIf=\"isInitialLoading && isEmptyListLoading\"></c8y-loading>\n    <div\n      class=\"p-relative p-l-24\"\n      *ngIf=\"isEmptyListLoading && !isInitialLoading\"\n    >\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-alert-idle'\"\n        [title]=\"'No alarms to display.' | translate\"\n        data-cy=\"alarm-list--empty-state\"\n        *ngIf=\"hasPermissions; else alertsA\"\n      >\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a\n              c8y-guide-href=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n            >\n              user documentation\n            </a>\n            .\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  </c8y-list-group>\n</div>\n\n<ng-template #alertsA>\n  <c8y-dynamic-component-alerts [alerts]=\"alertAggregator\"></c8y-dynamic-component-alerts>\n</ng-template>\n", dependencies: [{ kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: i3.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i3.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "component", type: i3.DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i3.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i3.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: AlarmsIconComponent, selector: "c8y-alarms-icon", inputs: ["alarm", "typeFilters"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AlarmListIndicatorPipe, name: "alarmListIndicator" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: { alarms: "alarms", hasPermissions: "hasPermissions", typeFilters: "typeFilters", loadMoreMode: "loadMoreMode", navigationOptions: "navigationOptions", isInitialLoading: "isInitialLoading", splitView: "splitView" }, outputs: { onSelectedAlarm: "onSelectedAlarm", onScrollingStateChange: "onScrollingStateChange" }, viewQueries: [{ propertyName: "innerScrollWrapper", first: true, predicate: ["scrollWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"inner-scroll\"\n  [ngClass]=\"{ 'split-view__list bg-level-1': splitView, 'bg-component': !splitView }\"\n  data-cy=\"c8y-alarms-list\"\n  #scrollWrapper\n>\n  <div\n    class=\"flex-wrap flex-no-shrink sticky-top m-b-16\"\n    [ngClass]=\"{\n      'separator-bottom card-header p-b-0': splitView,\n      'd-flex fit-w separator-top-bottom widget-bar p-l-16 p-r-16':\n        !splitView && navigationOptions.allowNavigationToAlarmsView\n    }\"\n  >\n    <div\n      class=\"h4 card-title\"\n      *ngIf=\"splitView\"\n    >\n      {{ 'Alarms list' | translate }}\n    </div>\n    <div\n      [ngClass]=\"{ 'fit-w d-flex a-i-center gap-16': !splitView, 'fit-h-20 m-l-auto': splitView }\"\n    >\n      <ng-content></ng-content>\n    </div>\n    <!--  Loading -->\n    <div\n      class=\"fit-w overflow-hidden\"\n      [ngClass]=\"{ 'p-t-16': splitView }\"\n    >\n      <div\n        class=\"loading-bar\"\n        data-cy=\"c8y-alarms-list--loading-bar\"\n        style=\"z-index: 101\"\n        [ngClass]=\"{ active: isInitialLoading && !isEmptyListLoading }\"\n      ></div>\n    </div>\n\n    <div\n      class=\"alert alert-warning\"\n      role=\"alert\"\n      translate\n      *ngIf=\"\n        !isEmptyListLoading &&\n        (activeChildParam$ | async) &&\n        (activeAlarm$ | async)?.id !== (activeChildParam$ | async)\n      \"\n    >\n      The selected alarm is not currently in the list, change your filter.\n    </div>\n  </div>\n  <c8y-list-group\n    class=\"p-r-16 interactive\"\n    [ngStyle]=\"{ opacity: isInitialLoading && !isEmptyListLoading ? 0.2 : 1 }\"\n    style=\"transition: opacity 0.15s linear\"\n    data-cy=\"c8y-alarms-list--group\"\n  >\n    <c8y-li-timeline\n      class=\"pointer\"\n      role=\"button\"\n      data-cy=\"c8y-alarms-list--timeline-repeat\"\n      *c8yFor=\"let alarm of alarms; let i = index; pipe: mapAlarmLink; loadMore: loadMoreMode\"\n      [routerLink]=\"navigationOptions.allowNavigationToAlarmsView ? alarm.link : null\"\n      routerLinkActive=\"active\"\n      [queryParamsHandling]=\"navigationOptions.queryParamsHandling\"\n      (isActiveChange)=\"activeRouteChanged($event, liScrollAnchor, alarm)\"\n      (click)=\"onAlarmOpen(alarm)\"\n      [queryParams]=\"\n        navigationOptions.includeClearedQueryParams\n          ? { showCleared: alarm.status === 'CLEARED' }\n          : {}\n      \"\n    >\n      <span\n        [attr.aria-label]=\"alarmLastOccurrenceLabel | translate\"\n        [tooltip]=\"alarmLastOccurrenceLabel | translate\"\n        placement=\"right\"\n        data-cy=\"c8y-alarms-list--last-occurrence-date\"\n        container=\"body\"\n        [delay]=\"500\"\n      >\n        {{ alarm.time | c8yDate: 'mediumDate' }}\n        {{ alarm.time | c8yDate: 'mediumTime' }}\n      </span>\n      <c8y-li\n        style=\"scroll-margin-top: 56px\"\n        #liScrollAnchor\n      >\n        <c8y-li-icon class=\"a-s-start\">\n          <div class=\"alarm-icons\">\n            <c8y-alarms-icon [typeFilters]=\"typeFilters\" [alarm]=\"alarm\"></c8y-alarms-icon>\n          </div>\n          <button\n            class=\"btn-clean text-center\"\n            data-cy=\"c8y-alarms-list--badge\"\n            [attr.aria-label]=\"\n              alarmBadgeTooltip\n                | translate\n                  : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n            \"\n            [tooltip]=\"\n              alarmBadgeTooltip\n                | translate\n                  : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n            \"\n            placement=\"right\"\n            container=\"body\"\n            type=\"button\"\n            *ngIf=\"alarm.firstOccurrenceTime\"\n            (click)=\"$event.stopPropagation()\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"badge badge-info\"\n              *ngIf=\"alarm.count > 1\"\n            >\n              {{ alarm.count }}\n            </span>\n          </button>\n        </c8y-li-icon>\n        <c8y-li-body class=\"a-s-stretch\">\n          <div class=\"d-flex a-i-start fit-h\">\n            <div class=\"min-width-0 flex-grow\">\n              <p class=\"text-truncate-wrap p-b-4\" data-cy=\"c8y-alarms-list--alarm-text\">\n                {{ alarm.text | translate }}\n              </p>\n              <div class=\"d-flex\">\n                <p\n                  class=\"small text-muted text-truncate flex-grow\"\n                  [title]=\"alarm.source.name\"\n                  data-cy=\"c8y-alarms-list--alarm-source-name\"\n                >\n                  <i [c8yIcon]=\"'exchange'\"></i>\n                  {{ alarm.source.name }}\n                </p>\n                <div class=\"d-flex\">\n                  <div\n                    [title]=\"item.title | translate\"\n                    *ngFor=\"let item of alarm | alarmListIndicator | async\"\n                  >\n                    <i\n                      [class]=\"item.class\"\n                      [c8yIcon]=\"item.icon\"\n                    ></i>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n    <c8y-loading\n      data-cy=\"c8y-alarms-list--c8y-loading\"\n      *ngIf=\"isInitialLoading && isEmptyListLoading\"></c8y-loading>\n    <div\n      class=\"p-relative p-l-24\"\n      *ngIf=\"isEmptyListLoading && !isInitialLoading\"\n    >\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-alert-idle'\"\n        [title]=\"'No alarms to display.' | translate\"\n        data-cy=\"c8y-alarms-list--empty-state\"\n        *ngIf=\"hasPermissions; else alertsA\"\n      >\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a\n              c8y-guide-href=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n            >\n              user documentation\n            </a>\n            .\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  </c8y-list-group>\n</div>\n\n<ng-template #alertsA>\n  <c8y-dynamic-component-alerts [alerts]=\"alertAggregator\"></c8y-dynamic-component-alerts>\n</ng-template>\n", dependencies: [{ kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: i3.GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "component", type: i3.GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "component", type: i3.DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i3.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: i3.ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: AlarmsIconComponent, selector: "c8y-alarms-icon", inputs: ["alarm", "typeFilters"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AlarmListIndicatorPipe, name: "alarmListIndicator" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlarmsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms-list', template: "<div\n  class=\"inner-scroll\"\n  [ngClass]=\"{ 'split-view__list bg-level-1': splitView, 'bg-component': !splitView }\"\n  data-cy=\"c8y-alarms-list\"\n  #scrollWrapper\n>\n  <div\n    class=\"flex-wrap flex-no-shrink sticky-top m-b-16\"\n    [ngClass]=\"{\n      'separator-bottom card-header p-b-0': splitView,\n      'd-flex fit-w separator-top-bottom widget-bar p-l-16 p-r-16':\n        !splitView && navigationOptions.allowNavigationToAlarmsView\n    }\"\n  >\n    <div\n      class=\"h4 card-title\"\n      *ngIf=\"splitView\"\n    >\n      {{ 'Alarms list' | translate }}\n    </div>\n    <div\n      [ngClass]=\"{ 'fit-w d-flex a-i-center gap-16': !splitView, 'fit-h-20 m-l-auto': splitView }\"\n    >\n      <ng-content></ng-content>\n    </div>\n    <!--  Loading -->\n    <div\n      class=\"fit-w overflow-hidden\"\n      [ngClass]=\"{ 'p-t-16': splitView }\"\n    >\n      <div\n        class=\"loading-bar\"\n        style=\"z-index: 101\"\n        [ngClass]=\"{ active: isInitialLoading && !isEmptyListLoading }\"\n      ></div>\n    </div>\n\n    <div\n      class=\"alert alert-warning\"\n      role=\"alert\"\n      translate\n      *ngIf=\"\n        !isEmptyListLoading &&\n        (activeChildParam$ | async) &&\n        (activeAlarm$ | async)?.id !== (activeChildParam$ | async)\n      \"\n    >\n      The selected alarm is not currently in the list, change your filter.\n    </div>\n  </div>\n  <c8y-list-group\n    class=\"p-r-16 interactive\"\n    [ngStyle]=\"{ opacity: isInitialLoading && !isEmptyListLoading ? 0.2 : 1 }\"\n    style=\"transition: opacity 0.15s linear\"\n    data-cy=\"c8y-alarm-list--group\"\n  >\n    <c8y-li-timeline\n      class=\"pointer\"\n      role=\"button\"\n      data-cy=\"c8y-alarm-list--timeline-repeat\"\n      *c8yFor=\"let alarm of alarms; let i = index; pipe: mapAlarmLink; loadMore: loadMoreMode\"\n      [routerLink]=\"navigationOptions.allowNavigationToAlarmsView ? alarm.link : null\"\n      routerLinkActive=\"active\"\n      [queryParamsHandling]=\"navigationOptions.queryParamsHandling\"\n      (isActiveChange)=\"activeRouteChanged($event, liScrollAnchor, alarm)\"\n      (click)=\"onAlarmOpen(alarm)\"\n      [queryParams]=\"\n        navigationOptions.includeClearedQueryParams\n          ? { showCleared: alarm.status === 'CLEARED' }\n          : {}\n      \"\n    >\n      <span\n        [attr.aria-label]=\"alarmLastOccurrenceLabel | translate\"\n        [tooltip]=\"alarmLastOccurrenceLabel | translate\"\n        placement=\"right\"\n        container=\"body\"\n        [delay]=\"500\"\n      >\n        {{ alarm.time | c8yDate: 'mediumDate' }}\n        {{ alarm.time | c8yDate: 'mediumTime' }}\n      </span>\n      <c8y-li\n        style=\"scroll-margin-top: 56px\"\n        #liScrollAnchor\n      >\n        <c8y-li-icon class=\"a-s-start\">\n          <div class=\"alarm-icons\">\n            <c8y-alarms-icon [typeFilters]=\"typeFilters\" [alarm]=\"alarm\"></c8y-alarms-icon>\n          </div>\n          <button\n            class=\"btn-clean text-center\"\n            [attr.aria-label]=\"\n              alarmBadgeTooltip\n                | translate\n                  : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n            \"\n            [tooltip]=\"\n              alarmBadgeTooltip\n                | translate\n                  : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n            \"\n            placement=\"right\"\n            container=\"body\"\n            type=\"button\"\n            *ngIf=\"alarm.firstOccurrenceTime\"\n            (click)=\"$event.stopPropagation()\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"badge badge-info\"\n              *ngIf=\"alarm.count > 1\"\n            >\n              {{ alarm.count }}\n            </span>\n          </button>\n        </c8y-li-icon>\n        <c8y-li-body class=\"a-s-stretch\">\n          <div class=\"d-flex a-i-start fit-h\">\n            <div class=\"min-width-0 flex-grow\">\n              <p class=\"text-truncate-wrap p-b-4\">\n                {{ alarm.text | translate }}\n              </p>\n              <div class=\"d-flex\">\n                <p\n                  class=\"small text-muted text-truncate flex-grow\"\n                  [title]=\"alarm.source.name\"\n                >\n                  <i [c8yIcon]=\"'exchange'\"></i>\n                  {{ alarm.source.name }}\n                </p>\n                <div class=\"d-flex\">\n                  <div\n                    [title]=\"item.title | translate\"\n                    *ngFor=\"let item of alarm | alarmListIndicator | async\"\n                  >\n                    <i\n                      [class]=\"item.class\"\n                      [c8yIcon]=\"item.icon\"\n                    ></i>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n    <c8y-loading *ngIf=\"isInitialLoading && isEmptyListLoading\"></c8y-loading>\n    <div\n      class=\"p-relative p-l-24\"\n      *ngIf=\"isEmptyListLoading && !isInitialLoading\"\n    >\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-alert-idle'\"\n        [title]=\"'No alarms to display.' | translate\"\n        data-cy=\"alarm-list--empty-state\"\n        *ngIf=\"hasPermissions; else alertsA\"\n      >\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a\n              c8y-guide-href=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n            >\n              user documentation\n            </a>\n            .\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  </c8y-list-group>\n</div>\n\n<ng-template #alertsA>\n  <c8y-dynamic-component-alerts [alerts]=\"alertAggregator\"></c8y-dynamic-component-alerts>\n</ng-template>\n" }]
+            args: [{ selector: 'c8y-alarms-list', template: "<div\n  class=\"inner-scroll\"\n  [ngClass]=\"{ 'split-view__list bg-level-1': splitView, 'bg-component': !splitView }\"\n  data-cy=\"c8y-alarms-list\"\n  #scrollWrapper\n>\n  <div\n    class=\"flex-wrap flex-no-shrink sticky-top m-b-16\"\n    [ngClass]=\"{\n      'separator-bottom card-header p-b-0': splitView,\n      'd-flex fit-w separator-top-bottom widget-bar p-l-16 p-r-16':\n        !splitView && navigationOptions.allowNavigationToAlarmsView\n    }\"\n  >\n    <div\n      class=\"h4 card-title\"\n      *ngIf=\"splitView\"\n    >\n      {{ 'Alarms list' | translate }}\n    </div>\n    <div\n      [ngClass]=\"{ 'fit-w d-flex a-i-center gap-16': !splitView, 'fit-h-20 m-l-auto': splitView }\"\n    >\n      <ng-content></ng-content>\n    </div>\n    <!--  Loading -->\n    <div\n      class=\"fit-w overflow-hidden\"\n      [ngClass]=\"{ 'p-t-16': splitView }\"\n    >\n      <div\n        class=\"loading-bar\"\n        data-cy=\"c8y-alarms-list--loading-bar\"\n        style=\"z-index: 101\"\n        [ngClass]=\"{ active: isInitialLoading && !isEmptyListLoading }\"\n      ></div>\n    </div>\n\n    <div\n      class=\"alert alert-warning\"\n      role=\"alert\"\n      translate\n      *ngIf=\"\n        !isEmptyListLoading &&\n        (activeChildParam$ | async) &&\n        (activeAlarm$ | async)?.id !== (activeChildParam$ | async)\n      \"\n    >\n      The selected alarm is not currently in the list, change your filter.\n    </div>\n  </div>\n  <c8y-list-group\n    class=\"p-r-16 interactive\"\n    [ngStyle]=\"{ opacity: isInitialLoading && !isEmptyListLoading ? 0.2 : 1 }\"\n    style=\"transition: opacity 0.15s linear\"\n    data-cy=\"c8y-alarms-list--group\"\n  >\n    <c8y-li-timeline\n      class=\"pointer\"\n      role=\"button\"\n      data-cy=\"c8y-alarms-list--timeline-repeat\"\n      *c8yFor=\"let alarm of alarms; let i = index; pipe: mapAlarmLink; loadMore: loadMoreMode\"\n      [routerLink]=\"navigationOptions.allowNavigationToAlarmsView ? alarm.link : null\"\n      routerLinkActive=\"active\"\n      [queryParamsHandling]=\"navigationOptions.queryParamsHandling\"\n      (isActiveChange)=\"activeRouteChanged($event, liScrollAnchor, alarm)\"\n      (click)=\"onAlarmOpen(alarm)\"\n      [queryParams]=\"\n        navigationOptions.includeClearedQueryParams\n          ? { showCleared: alarm.status === 'CLEARED' }\n          : {}\n      \"\n    >\n      <span\n        [attr.aria-label]=\"alarmLastOccurrenceLabel | translate\"\n        [tooltip]=\"alarmLastOccurrenceLabel | translate\"\n        placement=\"right\"\n        data-cy=\"c8y-alarms-list--last-occurrence-date\"\n        container=\"body\"\n        [delay]=\"500\"\n      >\n        {{ alarm.time | c8yDate: 'mediumDate' }}\n        {{ alarm.time | c8yDate: 'mediumTime' }}\n      </span>\n      <c8y-li\n        style=\"scroll-margin-top: 56px\"\n        #liScrollAnchor\n      >\n        <c8y-li-icon class=\"a-s-start\">\n          <div class=\"alarm-icons\">\n            <c8y-alarms-icon [typeFilters]=\"typeFilters\" [alarm]=\"alarm\"></c8y-alarms-icon>\n          </div>\n          <button\n            class=\"btn-clean text-center\"\n            data-cy=\"c8y-alarms-list--badge\"\n            [attr.aria-label]=\"\n              alarmBadgeTooltip\n                | translate\n                  : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n            \"\n            [tooltip]=\"\n              alarmBadgeTooltip\n                | translate\n                  : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n            \"\n            placement=\"right\"\n            container=\"body\"\n            type=\"button\"\n            *ngIf=\"alarm.firstOccurrenceTime\"\n            (click)=\"$event.stopPropagation()\"\n            [delay]=\"500\"\n          >\n            <span\n              class=\"badge badge-info\"\n              *ngIf=\"alarm.count > 1\"\n            >\n              {{ alarm.count }}\n            </span>\n          </button>\n        </c8y-li-icon>\n        <c8y-li-body class=\"a-s-stretch\">\n          <div class=\"d-flex a-i-start fit-h\">\n            <div class=\"min-width-0 flex-grow\">\n              <p class=\"text-truncate-wrap p-b-4\" data-cy=\"c8y-alarms-list--alarm-text\">\n                {{ alarm.text | translate }}\n              </p>\n              <div class=\"d-flex\">\n                <p\n                  class=\"small text-muted text-truncate flex-grow\"\n                  [title]=\"alarm.source.name\"\n                  data-cy=\"c8y-alarms-list--alarm-source-name\"\n                >\n                  <i [c8yIcon]=\"'exchange'\"></i>\n                  {{ alarm.source.name }}\n                </p>\n                <div class=\"d-flex\">\n                  <div\n                    [title]=\"item.title | translate\"\n                    *ngFor=\"let item of alarm | alarmListIndicator | async\"\n                  >\n                    <i\n                      [class]=\"item.class\"\n                      [c8yIcon]=\"item.icon\"\n                    ></i>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n    <c8y-loading\n      data-cy=\"c8y-alarms-list--c8y-loading\"\n      *ngIf=\"isInitialLoading && isEmptyListLoading\"></c8y-loading>\n    <div\n      class=\"p-relative p-l-24\"\n      *ngIf=\"isEmptyListLoading && !isInitialLoading\"\n    >\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-alert-idle'\"\n        [title]=\"'No alarms to display.' | translate\"\n        data-cy=\"c8y-alarms-list--empty-state\"\n        *ngIf=\"hasPermissions; else alertsA\"\n      >\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a\n              c8y-guide-href=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n            >\n              user documentation\n            </a>\n            .\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  </c8y-list-group>\n</div>\n\n<ng-template #alertsA>\n  <c8y-dynamic-component-alerts [alerts]=\"alertAggregator\"></c8y-dynamic-component-alerts>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: AlarmsViewService }, { type: i3.ContextRouteService }, { type: i1$1.Router }], propDecorators: { alarms: [{
                 type: Input
             }], hasPermissions: [{
@@ -2159,11 +2159,11 @@ class AlarmsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlarmsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: AlarmsViewService }, { token: i3.AlarmWithChildrenRealtimeService }, { token: i3.AlertService }, { token: i3.ContextRouteService }, { token: i3.ModalService }, { token: i1.TranslateService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlarmsComponent, selector: "c8y-alarms", providers: [AlarmWithChildrenRealtimeService], viewQueries: [{ propertyName: "alarmIntervalRefreshComponent", first: true, predicate: AlarmsIntervalRefreshComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"(activatedRoute.data | async)?.title\">\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n</ng-container>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-filter\n    class=\"d-block fit-w\"\n    [contextSourceId]=\"contextSourceId\"\n    (onFilterApplied)=\"applyFormFilters($event)\"\n  ></c8y-alarms-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-date-filter (dateFilterChange)=\"applyFormFilters($event)\"></c8y-alarms-date-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-alarms-type-filter\n    class=\"d-block fit-w\"\n    [alarms]=\"alarms$ | async\"\n    (onFilterChanged)=\"applyTypeFilters($event)\"\n  ></c8y-alarms-type-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"0\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Clear all alarms' | translate\"\n    type=\"button\"\n    (click)=\"clearAll()\"\n    data-cy=\"c8y-alarms-view--clear-all-button\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear all`alarms`' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<!--Realtime button-->\n<ng-template #realtimeRefresh>\n  <div class=\"input-group-btn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      [attr.aria-label]=\"'Refresh' | translate\"\n      [tooltip]=\"\n        (isRealtimeActive | async)\n          ? (NEW_REALTIME_ALARM_MESSAGE | translate)\n          : (REFRESH_LABEL | translate)\n      \"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      [disabled]=\"isLoading$ | async\"\n      (click)=\"refresh()\"\n    >\n      <span\n        class=\"tag tag--info m-r-8\"\n        *ngIf=\"isRealtimeActive | async\"\n      >\n        {{ 'New alarms' | translate }}\n      </span>\n      <i\n        c8yIcon=\"refresh\"\n        [ngClass]=\"{ 'icon-spin': isLoading$ | async }\"\n      ></i>\n    </button>\n    <button\n      class=\"c8y-realtime btn btn-default btn-sm\"\n      [attr.aria-label]=\"realtimeIconTitle\"\n      [tooltip]=\"realtimeIconTitle\"\n      placement=\"bottom\"\n      type=\"button\"\n      data-cy=\"c8y-alarms--realtime-button\"\n      [container]=\"'body'\"\n      (click)=\"toggleRealtimeState()\"\n    >\n      <span\n        class=\"c8y-pulse m-0\"\n        [ngClass]=\"{\n          active: isRealtimeToggleOn,\n          inactive: !isRealtimeToggleOn\n        }\"\n      ></span>\n    </button>\n  </div>\n</ng-template>\n\n<c8y-help\n  src=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n></c8y-help>\n\n<div class=\"card content-fullpage split-view--5-7 grid__row--1\">\n  <c8y-alarms-list\n    class=\"d-contents\"\n    [isInitialLoading]=\"isLoading$ | async\"\n    [alarms]=\"alarms$ | async\"\n    [typeFilters]=\"typeFilters\"\n    (onScrollingStateChange)=\"changeInterval(!$event)\"\n    (onSelectedAlarm)=\"changeInterval(false)\"\n    [splitView]=\"true\"\n    [hasPermissions]=\"!isDisabled\"\n  >\n    <ng-container *ngIf=\"isIntervalRefresh; else realtimeRefresh\">\n      <c8y-alarms-interval-refresh\n        [alarmsListLoading$]=\"isLoading$\"\n        [isIntervalToggleEnabled]=\"shouldShowIntervalToggle$ | async\"\n        (onCountdownEnded)=\"refresh()\"\n        [isDisabled]=\"isDisabled\"\n      ></c8y-alarms-interval-refresh>\n    </ng-container>\n  </c8y-alarms-list>\n\n  <router-outlet class=\"d-contents\"></router-outlet>\n</div>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { kind: "component", type: AlarmsIntervalRefreshComponent, selector: "c8y-alarms-interval-refresh", inputs: ["isDisabled", "alarmsListLoading$", "isIntervalToggleEnabled"], outputs: ["onCountdownEnded"] }, { kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", inputs: ["DEFAULT_INTERVAL", "updateQueryParams", "date"], outputs: ["dateFilterChange"] }, { kind: "component", type: AlarmsTypeFilterComponent, selector: "c8y-alarms-type-filter", inputs: ["alarms", "possibleFilters", "activeFilters"], outputs: ["onFilterChanged"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlarmsComponent, selector: "c8y-alarms", providers: [AlarmWithChildrenRealtimeService], viewQueries: [{ propertyName: "alarmIntervalRefreshComponent", first: true, predicate: AlarmsIntervalRefreshComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"(activatedRoute.data | async)?.title\">\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n</ng-container>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-filter\n    class=\"d-block fit-w\"\n    [contextSourceId]=\"contextSourceId\"\n    (onFilterApplied)=\"applyFormFilters($event)\"\n  ></c8y-alarms-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-date-filter (dateFilterChange)=\"applyFormFilters($event)\"></c8y-alarms-date-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-alarms-type-filter\n    class=\"d-block fit-w\"\n    [alarms]=\"alarms$ | async\"\n    (onFilterChanged)=\"applyTypeFilters($event)\"\n  ></c8y-alarms-type-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"0\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Clear all alarms' | translate\"\n    type=\"button\"\n    (click)=\"clearAll()\"\n    data-cy=\"c8y-alarms-view--clear-all-button\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear all`alarms`' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<!--Realtime button-->\n<ng-template #realtimeRefresh>\n  <div class=\"input-group-btn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      [attr.aria-label]=\"'Refresh' | translate\"\n      [tooltip]=\"\n        (isRealtimeActive | async)\n          ? (NEW_REALTIME_ALARM_MESSAGE | translate)\n          : (REFRESH_LABEL | translate)\n      \"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      [disabled]=\"isLoading$ | async\"\n      (click)=\"refresh()\"\n    >\n      <span\n        class=\"tag tag--info m-r-8\"\n        *ngIf=\"isRealtimeActive | async\"\n      >\n        {{ 'New alarms' | translate }}\n      </span>\n      <i\n        c8yIcon=\"refresh\"\n        [ngClass]=\"{ 'icon-spin': isLoading$ | async }\"\n      ></i>\n    </button>\n    <button\n      class=\"c8y-realtime btn btn-default btn-sm\"\n      [attr.aria-label]=\"realtimeIconTitle\"\n      [tooltip]=\"realtimeIconTitle\"\n      data-cy=\"c8y-alarms--realtime-button\"\n      placement=\"bottom\"\n      type=\"button\"\n      data-cy=\"c8y-alarms--realtime-button\"\n      [container]=\"'body'\"\n      (click)=\"toggleRealtimeState()\"\n    >\n      <span\n        class=\"c8y-pulse m-0\"\n        [ngClass]=\"{\n          active: isRealtimeToggleOn,\n          inactive: !isRealtimeToggleOn\n        }\"\n      ></span>\n    </button>\n  </div>\n</ng-template>\n\n<c8y-help\n  src=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n></c8y-help>\n\n<div class=\"card content-fullpage split-view--5-7 grid__row--1\">\n  <c8y-alarms-list\n    class=\"d-contents\"\n    [isInitialLoading]=\"isLoading$ | async\"\n    [alarms]=\"alarms$ | async\"\n    [typeFilters]=\"typeFilters\"\n    (onScrollingStateChange)=\"changeInterval(!$event)\"\n    (onSelectedAlarm)=\"changeInterval(false)\"\n    [splitView]=\"true\"\n    [hasPermissions]=\"!isDisabled\"\n  >\n    <ng-container *ngIf=\"isIntervalRefresh; else realtimeRefresh\">\n      <c8y-alarms-interval-refresh\n        [alarmsListLoading$]=\"isLoading$\"\n        [isIntervalToggleEnabled]=\"shouldShowIntervalToggle$ | async\"\n        (onCountdownEnded)=\"refresh()\"\n        [isDisabled]=\"isDisabled\"\n      ></c8y-alarms-interval-refresh>\n    </ng-container>\n  </c8y-alarms-list>\n\n  <router-outlet class=\"d-contents\"></router-outlet>\n</div>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { kind: "component", type: AlarmsIntervalRefreshComponent, selector: "c8y-alarms-interval-refresh", inputs: ["isDisabled", "alarmsListLoading$", "isIntervalToggleEnabled"], outputs: ["onCountdownEnded"] }, { kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", inputs: ["DEFAULT_INTERVAL", "updateQueryParams", "date"], outputs: ["dateFilterChange"] }, { kind: "component", type: AlarmsTypeFilterComponent, selector: "c8y-alarms-type-filter", inputs: ["alarms", "possibleFilters", "activeFilters"], outputs: ["onFilterChanged"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlarmsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms', providers: [AlarmWithChildrenRealtimeService], template: "<ng-container *ngIf=\"(activatedRoute.data | async)?.title\">\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n</ng-container>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-filter\n    class=\"d-block fit-w\"\n    [contextSourceId]=\"contextSourceId\"\n    (onFilterApplied)=\"applyFormFilters($event)\"\n  ></c8y-alarms-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-date-filter (dateFilterChange)=\"applyFormFilters($event)\"></c8y-alarms-date-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-alarms-type-filter\n    class=\"d-block fit-w\"\n    [alarms]=\"alarms$ | async\"\n    (onFilterChanged)=\"applyTypeFilters($event)\"\n  ></c8y-alarms-type-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"0\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Clear all alarms' | translate\"\n    type=\"button\"\n    (click)=\"clearAll()\"\n    data-cy=\"c8y-alarms-view--clear-all-button\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear all`alarms`' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<!--Realtime button-->\n<ng-template #realtimeRefresh>\n  <div class=\"input-group-btn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      [attr.aria-label]=\"'Refresh' | translate\"\n      [tooltip]=\"\n        (isRealtimeActive | async)\n          ? (NEW_REALTIME_ALARM_MESSAGE | translate)\n          : (REFRESH_LABEL | translate)\n      \"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      [disabled]=\"isLoading$ | async\"\n      (click)=\"refresh()\"\n    >\n      <span\n        class=\"tag tag--info m-r-8\"\n        *ngIf=\"isRealtimeActive | async\"\n      >\n        {{ 'New alarms' | translate }}\n      </span>\n      <i\n        c8yIcon=\"refresh\"\n        [ngClass]=\"{ 'icon-spin': isLoading$ | async }\"\n      ></i>\n    </button>\n    <button\n      class=\"c8y-realtime btn btn-default btn-sm\"\n      [attr.aria-label]=\"realtimeIconTitle\"\n      [tooltip]=\"realtimeIconTitle\"\n      placement=\"bottom\"\n      type=\"button\"\n      data-cy=\"c8y-alarms--realtime-button\"\n      [container]=\"'body'\"\n      (click)=\"toggleRealtimeState()\"\n    >\n      <span\n        class=\"c8y-pulse m-0\"\n        [ngClass]=\"{\n          active: isRealtimeToggleOn,\n          inactive: !isRealtimeToggleOn\n        }\"\n      ></span>\n    </button>\n  </div>\n</ng-template>\n\n<c8y-help\n  src=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n></c8y-help>\n\n<div class=\"card content-fullpage split-view--5-7 grid__row--1\">\n  <c8y-alarms-list\n    class=\"d-contents\"\n    [isInitialLoading]=\"isLoading$ | async\"\n    [alarms]=\"alarms$ | async\"\n    [typeFilters]=\"typeFilters\"\n    (onScrollingStateChange)=\"changeInterval(!$event)\"\n    (onSelectedAlarm)=\"changeInterval(false)\"\n    [splitView]=\"true\"\n    [hasPermissions]=\"!isDisabled\"\n  >\n    <ng-container *ngIf=\"isIntervalRefresh; else realtimeRefresh\">\n      <c8y-alarms-interval-refresh\n        [alarmsListLoading$]=\"isLoading$\"\n        [isIntervalToggleEnabled]=\"shouldShowIntervalToggle$ | async\"\n        (onCountdownEnded)=\"refresh()\"\n        [isDisabled]=\"isDisabled\"\n      ></c8y-alarms-interval-refresh>\n    </ng-container>\n  </c8y-alarms-list>\n\n  <router-outlet class=\"d-contents\"></router-outlet>\n</div>\n" }]
+            args: [{ selector: 'c8y-alarms', providers: [AlarmWithChildrenRealtimeService], template: "<ng-container *ngIf=\"(activatedRoute.data | async)?.title\">\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n</ng-container>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-filter\n    class=\"d-block fit-w\"\n    [contextSourceId]=\"contextSourceId\"\n    (onFilterApplied)=\"applyFormFilters($event)\"\n  ></c8y-alarms-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-date-filter (dateFilterChange)=\"applyFormFilters($event)\"></c8y-alarms-date-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-alarms-type-filter\n    class=\"d-block fit-w\"\n    [alarms]=\"alarms$ | async\"\n    (onFilterChanged)=\"applyTypeFilters($event)\"\n  ></c8y-alarms-type-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"0\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Clear all alarms' | translate\"\n    type=\"button\"\n    (click)=\"clearAll()\"\n    data-cy=\"c8y-alarms-view--clear-all-button\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear all`alarms`' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<!--Realtime button-->\n<ng-template #realtimeRefresh>\n  <div class=\"input-group-btn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      [attr.aria-label]=\"'Refresh' | translate\"\n      [tooltip]=\"\n        (isRealtimeActive | async)\n          ? (NEW_REALTIME_ALARM_MESSAGE | translate)\n          : (REFRESH_LABEL | translate)\n      \"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      [disabled]=\"isLoading$ | async\"\n      (click)=\"refresh()\"\n    >\n      <span\n        class=\"tag tag--info m-r-8\"\n        *ngIf=\"isRealtimeActive | async\"\n      >\n        {{ 'New alarms' | translate }}\n      </span>\n      <i\n        c8yIcon=\"refresh\"\n        [ngClass]=\"{ 'icon-spin': isLoading$ | async }\"\n      ></i>\n    </button>\n    <button\n      class=\"c8y-realtime btn btn-default btn-sm\"\n      [attr.aria-label]=\"realtimeIconTitle\"\n      [tooltip]=\"realtimeIconTitle\"\n      data-cy=\"c8y-alarms--realtime-button\"\n      placement=\"bottom\"\n      type=\"button\"\n      data-cy=\"c8y-alarms--realtime-button\"\n      [container]=\"'body'\"\n      (click)=\"toggleRealtimeState()\"\n    >\n      <span\n        class=\"c8y-pulse m-0\"\n        [ngClass]=\"{\n          active: isRealtimeToggleOn,\n          inactive: !isRealtimeToggleOn\n        }\"\n      ></span>\n    </button>\n  </div>\n</ng-template>\n\n<c8y-help\n  src=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n></c8y-help>\n\n<div class=\"card content-fullpage split-view--5-7 grid__row--1\">\n  <c8y-alarms-list\n    class=\"d-contents\"\n    [isInitialLoading]=\"isLoading$ | async\"\n    [alarms]=\"alarms$ | async\"\n    [typeFilters]=\"typeFilters\"\n    (onScrollingStateChange)=\"changeInterval(!$event)\"\n    (onSelectedAlarm)=\"changeInterval(false)\"\n    [splitView]=\"true\"\n    [hasPermissions]=\"!isDisabled\"\n  >\n    <ng-container *ngIf=\"isIntervalRefresh; else realtimeRefresh\">\n      <c8y-alarms-interval-refresh\n        [alarmsListLoading$]=\"isLoading$\"\n        [isIntervalToggleEnabled]=\"shouldShowIntervalToggle$ | async\"\n        (onCountdownEnded)=\"refresh()\"\n        [isDisabled]=\"isDisabled\"\n      ></c8y-alarms-interval-refresh>\n    </ng-container>\n  </c8y-alarms-list>\n\n  <router-outlet class=\"d-contents\"></router-outlet>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: AlarmsViewService }, { type: i3.AlarmWithChildrenRealtimeService }, { type: i3.AlertService }, { type: i3.ContextRouteService }, { type: i3.ModalService }, { type: i1.TranslateService }, { type: i1$1.Router }], propDecorators: { alarmIntervalRefreshComponent: [{
                 type: ViewChild,
                 args: [AlarmsIntervalRefreshComponent]