@c8y/ngx-components 1024.20.8 → 1024.21.3

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

@@ -1203,7 +1203,7 @@ class AlarmDetailsComponent {
         this.alarmInfoSections = sections;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AlarmDetailsComponent, deps: [{ token: AlarmDetailsService }, { token: i2.AlarmService }, { token: i3.AlertService }, { token: i3.AppStateService }, { token: i2.AuditService }, { token: i3.RelativeTimePipe }, { token: Ng1SmartRulesUpgradeService, optional: true }, { token: i1$1.TranslateService }, { token: i2.InventoryService }, { token: AlarmsViewService }, { token: i3.ColorService }, { token: i3.InterAppService }, { token: i3.GainsightService }, { token: AlarmsActivityTrackerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: AlarmDetailsComponent, isStandalone: true, selector: "c8y-alarm-details", inputs: { selectedAlarm: "selectedAlarm", showSections: "showSections", hiddenSections: "hiddenSections", showActions: "showActions", hiddenActions: "hiddenActions", showExternalNavigation: "showExternalNavigation" }, host: { listeners: { "document:visibilitychange": "visibilityChange()" } }, providers: [AlarmsActivityTrackerService], usesOnChanges: true, ngImport: i0, template: "@if (selectedAlarm) {\n  <div\n    class=\"card-header p-24 m-b-16 bg-component separator-bottom sticky-top\"\n    style=\"margin: 0 -24px\"\n  >\n    <h4\n      class=\"m-0\"\n      data-cy=\"c8y-alarm-details-title\"\n      [innerHTML]=\"selectedAlarm.text | translate | markdownToHtml | async\"\n    ></h4>\n  </div>\n}\n\n<c8y-icon-panel [sections]=\"alarmInfoSections\">\n  @if (showSections && !hiddenSections?.source) {\n    <div\n      class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n      data-cy=\"c8y-alarm-details--source-wrapper\"\n    >\n      <div class=\"border-all fit-w d-flex\">\n        <div class=\"p-8\">\n          <i\n            class=\"icon-24 m-t-4 stroked-icon status\"\n            c8yIcon=\"contactless-payment\"\n          ></i>\n        </div>\n        <div class=\"p-t-8 p-b-8 p-r-8\">\n          <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Source' | translate }}</p>\n          <p class=\"small\">\n            <button\n              class=\"btn-link text-muted p-0 m-r-8 text-left\"\n              title=\"{{ selectedAlarm?.source?.name }}\"\n              type=\"button\"\n              routerLink=\"{{ selectedAlarmMO | assetLink }}\"\n            >\n              <small class=\"icon-flex\">\n                <i c8yIcon=\"exchange\"></i>\n                {{ selectedAlarm?.source?.name || selectedAlarm?.source?.id }}\n              </small>\n            </button>\n            @if (showSourceNavigationLink$ | async) {\n              <button\n                class=\"btn-link p-0 text-left\"\n                title=\"{{\n                  linkTitle\n                    | translate\n                      : { appName: userDeviceManagementApp$ | async | humanizeAppName | async }\n                }}\"\n                type=\"button\"\n                (click)=\"goToAlarmSource(selectedAlarm?.id)\"\n                data-cy=\"alarm-details-device-management-link\"\n              >\n                {{ userDeviceManagementApp$ | async | humanizeAppName | async }}\n                <i c8yIcon=\"external-link\"></i>\n              </button>\n            }\n          </p>\n        </div>\n      </div>\n    </div>\n  }\n\n  @if (showSections && !hiddenSections?.type) {\n    <div\n      class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n      data-cy=\"c8y-alarm-details--severity-type-wrapper\"\n    >\n      <div class=\"border-all fit-w d-flex\">\n        <div class=\"p-8\">\n          <span\n            class=\"circle-icon-wrapper\"\n            [ngStyle]=\"{ 'background-color': typeColor }\"\n          >\n            <i\n              class=\"stroked-icon\"\n              c8yIcon=\"bell\"\n            ></i>\n          </span>\n        </div>\n        <div class=\"p-t-8 p-b-8 p-r-8 min-width-0\">\n          <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Type' | translate }}</p>\n          <p\n            class=\"small text-truncate\"\n            title=\"{{ selectedAlarm?.type }}\"\n          >\n            <code>{{ selectedAlarm?.type }}</code>\n          </p>\n        </div>\n      </div>\n    </div>\n  }\n\n  <div class=\"col-xs-12 col-md-12 p-b-16\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"calendar\"\n          data-cy=\"c8y-alarm-details--last-updated-icon\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-0 p-r-8 flex-grow\">\n        <div class=\"content-flex-50\">\n          @if (selectedAlarm?.count > 1 && showSections && !hiddenSections?.occurrenceCount) {\n            <div\n              class=\"col-4 p-b-8\"\n              data-cy=\"c8y-alarm-details--number-of-occurrences-wrapper\"\n            >\n              <p class=\"text-label-small m-b-0 m-r-8\">\n                {{ 'Number of occurrences' | translate }}\n              </p>\n              <p>\n                <span\n                  class=\"badge badge-info\"\n                  data-cy=\"c8y-alarm-details--badge\"\n                >\n                  {{ selectedAlarm?.count }}\n                </span>\n              </p>\n            </div>\n          }\n          @if (selectedAlarm?.count > 1 && showSections && !hiddenSections?.firstOccurrence) {\n            <div\n              class=\"col-4 p-b-8\"\n              data-cy=\"c8y-alarm-details--first-occurrence-wrapper\"\n            >\n              <p class=\"text-label-small m-b-0 m-r-8\">{{ 'First occurrence' | translate }}</p>\n              <p class=\"small\">\n                {{ selectedAlarm?.creationTime | c8yDate: 'medium' }}\n                <button\n                  class=\"btn-help btn-help--sm\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  popover=\"{{\n                    'Time in which the alarm was created. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                      | translate\n                  }}\"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                ></button>\n              </p>\n            </div>\n          }\n          @if (showSections && !hiddenSections?.lastOccurrence) {\n            <div\n              class=\"col-4 p-b-8\"\n              data-cy=\"c8y-alarm-details--last-updated-wrapper\"\n            >\n              <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last occurrence' | translate }}</p>\n              <p class=\"small\">\n                {{ selectedAlarm?.lastUpdated | c8yDate: 'medium' }}\n                <button\n                  class=\"btn-help btn-help--sm\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  popover=\"{{\n                    'Time in which the alarm was last updated. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                      | translate\n                  }}\"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                ></button>\n              </p>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n\n  @if (customFragments && showSections && !hiddenSections?.customData) {\n    <div\n      class=\"col-xs-12 col-md-12 p-b-16\"\n      data-cy=\"c8y-alarm-details--custom-fragments-wrapper\"\n    >\n      <div class=\"border-all fit-w d-flex\">\n        <div class=\"p-8\">\n          <i\n            class=\"icon-24 text-gray-dark m-t-4\"\n            c8yIcon=\"outgoing-data\"\n          ></i>\n        </div>\n        <div\n          class=\"p-t-8 p-b-0 p-r-8 flex-grow min-width-0\"\n          data-cy=\"alarm-details-custom-data\"\n        >\n          <p class=\"text-label-small m-b-4 m-r-8\">{{ 'Custom data' | translate }}</p>\n          <pre><code>{{ customFragments | json }}</code></pre>\n        </div>\n      </div>\n    </div>\n  }\n</c8y-icon-panel>\n\n@if (showActions) {\n  <c8y-sv-details-actions [actions]=\"alarmActions\">\n    @for (button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async; track $index) {\n      <button\n        class=\"btn btn-default btn-sm no-swing\"\n        [title]=\"button.title | translate\"\n        type=\"button\"\n        [ngClass]=\"button.additionalButtonClasses\"\n        (click)=\"detailsButtonAction(button, selectedAlarm!)\"\n        [disabled]=\"button.disabled\"\n      >\n        <i\n          [c8yIcon]=\"button.icon\"\n          [ngClass]=\"button.additionalIconClasses\"\n        ></i>\n        @if (button.label) {\n          <span>{{ button.label | translate }}</span>\n        }\n      </button>\n    }\n  </c8y-sv-details-actions>\n}\n\n@if (showSections && !hiddenSections?.auditLogs) {\n  <ng-template #noAuditLogAvailable>\n    <div class=\"p-16\">\n      <c8y-ui-empty-state\n        [icon]=\"'archive'\"\n        [title]=\"'No audit logs found.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    </div>\n  </ng-template>\n\n  <div>\n    <div class=\"legend form-block\">{{ 'Audit logs' | translate }}</div>\n\n    @if (isLoading || auditLog?.data.length) {\n      @if (isLoading) {\n        <c8y-loading></c8y-loading>\n      }\n\n      @if (!isLoading) {\n        <c8y-list-group data-cy=\"c8y-alarms-details--audit-logs\">\n          <c8y-li-timeline *c8yFor=\"let log of auditLog; loadMore: 'hidden'\">\n            {{ log.creationTime | c8yDate: 'mediumDate' }}\n            {{ log.creationTime | c8yDate: 'mediumTime' }}\n            <c8y-li>\n              <c8y-li-body>\n                <p class=\"text-truncate-wrap separator-bottom p-b-4\">\n                  {{ log | auditChangesMessage }}\n                </p>\n                <div class=\"c8y-list__item__footer\">\n                  @if (log.user) {\n                    <span class=\"m-r-16 small\">\n                      <span class=\"text-label-small\">\n                        {{ 'by`user`' | translate }}\n                      </span>\n                      {{ log.user }}\n                    </span>\n                  }\n                  <span class=\"small\">\n                    <span class=\"text-label-small\">\n                      {{ 'device time' | translate }}\n                    </span>\n                    {{ log.time | c8yDate: 'medium' }}\n                  </span>\n                </div>\n              </c8y-li-body>\n            </c8y-li>\n          </c8y-li-timeline>\n        </c8y-list-group>\n      }\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"noAuditLogAvailable\"></ng-container>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: SplitViewDetailsActionsComponent, selector: "c8y-sv-details-actions", inputs: ["actions"] }, { kind: "component", type: IconPanelComponent, selector: "c8y-icon-panel", inputs: ["sections", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: AssetLinkPipe, name: "assetLink" }, { kind: "pipe", type: AlarmDetailsButtonPipe, name: "alarmDetailsButton" }, { kind: "pipe", type: AuditChangesMessagePipe, name: "auditChangesMessage" }, { kind: "pipe", type: MarkdownToHtmlPipe, name: "markdownToHtml" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: AlarmDetailsComponent, isStandalone: true, selector: "c8y-alarm-details", inputs: { selectedAlarm: "selectedAlarm", showSections: "showSections", hiddenSections: "hiddenSections", showActions: "showActions", hiddenActions: "hiddenActions", showExternalNavigation: "showExternalNavigation" }, host: { listeners: { "document:visibilitychange": "visibilityChange()" } }, providers: [AlarmsActivityTrackerService], usesOnChanges: true, ngImport: i0, template: "@if (selectedAlarm) {\n  <div\n    class=\"card-header p-24 m-b-16 bg-component separator-bottom sticky-top\"\n    style=\"margin: 0 -24px\"\n  >\n    <h4\n      class=\"m-0\"\n      data-cy=\"c8y-alarm-details-title\"\n      [innerHTML]=\"selectedAlarm.text | translate | markdownToHtml | async\"\n    ></h4>\n  </div>\n}\n\n<c8y-icon-panel [sections]=\"alarmInfoSections\">\n  @if (showSections && !hiddenSections?.source) {\n    <div\n      class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n      data-cy=\"c8y-alarm-details--source-wrapper\"\n    >\n      <div class=\"border-all fit-w d-flex\">\n        <div class=\"p-8\">\n          <i\n            class=\"icon-24 m-t-4 stroked-icon status\"\n            c8yIcon=\"contactless-payment\"\n          ></i>\n        </div>\n        <div class=\"p-t-8 p-b-8 p-r-8\">\n          <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Source' | translate }}</p>\n          <p class=\"small\">\n            <button\n              class=\"btn-link text-muted p-0 m-r-8 text-left\"\n              title=\"{{ selectedAlarm?.source?.name }}\"\n              type=\"button\"\n              routerLink=\"{{ selectedAlarmMO | assetLink }}\"\n            >\n              <small class=\"icon-flex\">\n                <i c8yIcon=\"exchange\"></i>\n                {{ selectedAlarm?.source?.name || selectedAlarm?.source?.id }}\n              </small>\n            </button>\n            @if (showSourceNavigationLink$ | async) {\n              <button\n                class=\"btn-link p-0 text-left\"\n                title=\"{{\n                  linkTitle\n                    | translate\n                      : { appName: userDeviceManagementApp$ | async | humanizeAppName | async }\n                }}\"\n                type=\"button\"\n                (click)=\"goToAlarmSource(selectedAlarm?.id)\"\n                data-cy=\"alarm-details-device-management-link\"\n              >\n                {{ userDeviceManagementApp$ | async | humanizeAppName | async }}\n                <i c8yIcon=\"external-link\"></i>\n              </button>\n            }\n          </p>\n        </div>\n      </div>\n    </div>\n  }\n\n  @if (showSections && !hiddenSections?.type) {\n    <div\n      class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n      data-cy=\"c8y-alarm-details--severity-type-wrapper\"\n    >\n      <div class=\"border-all fit-w d-flex\">\n        <div class=\"p-8\">\n          <span\n            class=\"circle-icon-wrapper\"\n            [ngStyle]=\"{ 'background-color': typeColor }\"\n          >\n            <i\n              class=\"stroked-icon\"\n              c8yIcon=\"bell\"\n            ></i>\n          </span>\n        </div>\n        <div class=\"p-t-8 p-b-8 p-r-8 min-width-0\">\n          <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Type' | translate }}</p>\n          <p\n            class=\"small text-truncate\"\n            title=\"{{ selectedAlarm?.type }}\"\n          >\n            <code>{{ selectedAlarm?.type }}</code>\n          </p>\n        </div>\n      </div>\n    </div>\n  }\n\n  <div class=\"col-xs-12 col-md-12 p-b-16\">\n    <div class=\"border-all fit-w d-flex\">\n      <div class=\"p-8\">\n        <i\n          class=\"icon-24 text-gray-dark m-t-4\"\n          c8yIcon=\"calendar\"\n          data-cy=\"c8y-alarm-details--last-updated-icon\"\n        ></i>\n      </div>\n      <div class=\"p-t-8 p-b-0 p-r-8 flex-grow\">\n        <div class=\"content-flex-50\">\n          @if (selectedAlarm?.count > 1 && showSections && !hiddenSections?.occurrenceCount) {\n            <div\n              class=\"col-4 p-b-8\"\n              data-cy=\"c8y-alarm-details--number-of-occurrences-wrapper\"\n            >\n              <p class=\"text-label-small m-b-0 m-r-8\">\n                {{ 'Number of occurrences' | translate }}\n              </p>\n              <p>\n                <span\n                  class=\"badge badge-info\"\n                  data-cy=\"c8y-alarm-details--badge\"\n                >\n                  {{ selectedAlarm?.count }}\n                </span>\n              </p>\n            </div>\n          }\n          @if (selectedAlarm?.count > 1 && showSections && !hiddenSections?.firstOccurrence) {\n            <div\n              class=\"col-4 p-b-8\"\n              data-cy=\"c8y-alarm-details--first-occurrence-wrapper\"\n            >\n              <p class=\"text-label-small m-b-0 m-r-8\">{{ 'First occurrence' | translate }}</p>\n              <p class=\"small\">\n                {{ selectedAlarm?.creationTime | c8yDate: 'medium' }}\n                <button\n                  class=\"btn-help btn-help--sm\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  popover=\"{{\n                    'Time in which the alarm was created. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                      | translate\n                  }}\"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                ></button>\n              </p>\n            </div>\n          }\n          @if (showSections && !hiddenSections?.lastOccurrence) {\n            <div\n              class=\"col-4 p-b-8\"\n              data-cy=\"c8y-alarm-details--last-updated-wrapper\"\n            >\n              <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Last occurrence' | translate }}</p>\n              <p class=\"small\">\n                {{ selectedAlarm?.lastUpdated | c8yDate: 'medium' }}\n                <button\n                  class=\"btn-help btn-help--sm\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  popover=\"{{\n                    'Time in which the alarm was last updated. The time shown corresponds to the server\\'s time. Device time can be different from server time.'\n                      | translate\n                  }}\"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                ></button>\n              </p>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n\n  @if (customFragments && showSections && !hiddenSections?.customData) {\n    <div\n      class=\"col-xs-12 col-md-12 p-b-16\"\n      data-cy=\"c8y-alarm-details--custom-fragments-wrapper\"\n    >\n      <div class=\"border-all fit-w d-flex\">\n        <div class=\"p-8\">\n          <i\n            class=\"icon-24 text-gray-dark m-t-4\"\n            c8yIcon=\"outgoing-data\"\n          ></i>\n        </div>\n        <div\n          class=\"p-t-8 p-b-0 p-r-8 flex-grow min-width-0\"\n          data-cy=\"alarm-details-custom-data\"\n        >\n          <p class=\"text-label-small m-b-4 m-r-8\">{{ 'Custom data' | translate }}</p>\n          <pre><code>{{ customFragments | json }}</code></pre>\n        </div>\n      </div>\n    </div>\n  }\n</c8y-icon-panel>\n\n@if (showActions) {\n  <c8y-sv-details-actions [actions]=\"alarmActions\">\n    @for (button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async; track $index) {\n      <button\n        class=\"btn btn-default btn-sm no-swing\"\n        [title]=\"button.title | translate\"\n        type=\"button\"\n        [ngClass]=\"button.additionalButtonClasses\"\n        (click)=\"detailsButtonAction(button, selectedAlarm!)\"\n        [disabled]=\"button.disabled\"\n      >\n        <i\n          [c8yIcon]=\"button.icon\"\n          [ngClass]=\"button.additionalIconClasses\"\n        ></i>\n        @if (button.label) {\n          <span>{{ button.label | translate }}</span>\n        }\n      </button>\n    }\n  </c8y-sv-details-actions>\n}\n\n@if (showSections && !hiddenSections?.auditLogs) {\n  <ng-template #noAuditLogAvailable>\n    <div class=\"p-16\">\n      <c8y-ui-empty-state\n        [icon]=\"'archive'\"\n        [title]=\"'No audit logs found.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    </div>\n  </ng-template>\n\n  <div>\n    <div class=\"legend form-block\">{{ 'Audit logs' | translate }}</div>\n\n    @if (isLoading || auditLog?.data.length) {\n      @if (isLoading) {\n        <c8y-loading></c8y-loading>\n      }\n\n      @if (!isLoading) {\n        <c8y-list-group data-cy=\"c8y-alarms-details--audit-logs\">\n          <c8y-li-timeline *c8yFor=\"let log of auditLog; loadMore: 'hidden'\">\n            {{ log.creationTime | c8yDate: 'mediumDate' }}\n            {{ log.creationTime | c8yDate: 'mediumTime' }}\n            <c8y-li>\n              <c8y-li-body>\n                <p class=\"text-truncate-wrap separator-bottom p-b-4\">\n                  {{ log | auditChangesMessage }}\n                </p>\n                <div class=\"c8y-list__item__footer\">\n                  @if (log.user) {\n                    <span class=\"m-r-16 small\">\n                      <span class=\"text-label-small\">\n                        {{ 'by`user`' | translate }}\n                      </span>\n                      {{ log.user }}\n                    </span>\n                  }\n                  <span class=\"small\">\n                    <span class=\"text-label-small\">\n                      {{ 'device time' | translate }}\n                    </span>\n                    {{ log.time | c8yDate: 'medium' }}\n                  </span>\n                </div>\n              </c8y-li-body>\n            </c8y-li>\n          </c8y-li-timeline>\n        </c8y-list-group>\n      }\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"noAuditLogAvailable\"></ng-container>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable", "selectOnClick"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: SplitViewDetailsActionsComponent, selector: "c8y-sv-details-actions", inputs: ["actions"] }, { kind: "component", type: IconPanelComponent, selector: "c8y-icon-panel", inputs: ["sections", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: AssetLinkPipe, name: "assetLink" }, { kind: "pipe", type: AlarmDetailsButtonPipe, name: "alarmDetailsButton" }, { kind: "pipe", type: AuditChangesMessagePipe, name: "auditChangesMessage" }, { kind: "pipe", type: MarkdownToHtmlPipe, name: "markdownToHtml" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AlarmDetailsComponent, decorators: [{
             type: Component,
@@ -2054,7 +2054,7 @@ class AlarmsListComponent {
         this.activeChildParam$.subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AlarmsListComponent, deps: [{ token: i1.ActivatedRoute }, { token: AlarmsViewService }, { token: i3.ContextRouteService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: AlarmsListComponent, isStandalone: true, selector: "c8y-alarms-list", inputs: { alarms: "alarms", hasPermissions: "hasPermissions", typeFilters: "typeFilters", loadMoreMode: "loadMoreMode", navigationOptions: "navigationOptions", isInitialLoading: "isInitialLoading", isInPreviewMode: "isInPreviewMode" }, outputs: { onSelectedAlarm: "onSelectedAlarm", onScrollingStateChange: "onScrollingStateChange" }, viewQueries: [{ propertyName: "svListComponent", first: true, predicate: ["scrollWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<c8y-sv-list\n  [emptyStateIcon]=\"'c8y-alert-idle'\"\n  [title]=\"'Alarms list' | translate\"\n  [emptyStateTitle]=\"'No alarms to display.' | translate\"\n  [loading]=\"isInitialLoading || isEmptyListLoading\"\n  [showEmptyState]=\"isEmptyListLoading && !isInitialLoading && hasPermissions\"\n  [docsUrl]=\"\n    '/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms'\n  \"\n  data-cy=\"c8y-alarms-list\"\n  #scrollWrapper\n>\n  <c8y-sv-header-actions>\n    <ng-content></ng-content>\n  </c8y-sv-header-actions>\n\n  <c8y-sv-alerts>\n    @if (\n      !isEmptyListLoading &&\n      (activeChildParam$ | async) &&\n      (activeAlarm$ | async)?.id !== (activeChildParam$ | async)\n    ) {\n      <div\n        class=\"alert alert-warning m-b-0\"\n        role=\"alert\"\n        translate\n      >\n        The selected alarm is not currently in the list, change your filter.\n      </div>\n    }\n  </c8y-sv-alerts>\n\n  <c8y-list-group class=\"c8y-list--timeline d-block p-r-16 p-t-16\">\n    <c8y-li-timeline\n      class=\"pointer c8y-list--timeline__item\"\n      role=\"button\"\n      data-cy=\"c8y-alarms-list--timeline-repeat\"\n      *c8yFor=\"let alarm of alarms; let i = index; pipe: mapAlarmLink; loadMore: loadMoreMode\"\n      [routerLink]=\"navigationOptions.allowNavigationToAlarmsView ? alarm.link : null\"\n      routerLinkActive=\"active\"\n      [queryParamsHandling]=\"navigationOptions.queryParamsHandling\"\n      (isActiveChange)=\"activeRouteChanged($event, liScrollAnchor, alarm)\"\n      (click)=\"onAlarmOpen(alarm)\"\n      [queryParams]=\"\n        navigationOptions.includeClearedQueryParams\n          ? { showCleared: alarm.status === 'CLEARED' }\n          : {}\n      \"\n    >\n      <span\n        [attr.aria-label]=\"alarmLastOccurrenceLabel | translate\"\n        [tooltip]=\"alarmLastOccurrenceLabel | translate\"\n        placement=\"right\"\n        container=\"body\"\n        data-cy=\"c8y-alarms-list--last-occurrence-date\"\n        [delay]=\"500\"\n      >\n        {{ alarm.time | c8yDate: 'mediumDate' }}\n        {{ alarm.time | c8yDate: 'mediumTime' }}\n      </span>\n      <c8y-li\n        style=\"scroll-margin-top: 56px\"\n        #liScrollAnchor\n      >\n        <c8y-li-icon class=\"a-s-start\">\n          <div class=\"alarm-icons\">\n            <c8y-alarms-icon\n              [typeFilters]=\"typeFilters\"\n              [alarm]=\"alarm\"\n            ></c8y-alarms-icon>\n          </div>\n          @if (alarm.firstOccurrenceTime) {\n            <button\n              class=\"btn-clean text-center\"\n              [attr.aria-label]=\"\n                alarmBadgeTooltip\n                  | translate\n                    : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n              \"\n              [tooltip]=\"\n                alarmBadgeTooltip\n                  | translate\n                    : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n              \"\n              placement=\"right\"\n              container=\"body\"\n              type=\"button\"\n              data-cy=\"c8y-alarms-list--badge\"\n              (click)=\"$event.stopPropagation()\"\n              [delay]=\"500\"\n            >\n              @if (alarm.count > 1) {\n                <span class=\"badge badge-info\">\n                  {{ alarm.count }}\n                </span>\n              }\n            </button>\n          }\n        </c8y-li-icon>\n        <c8y-li-body class=\"a-s-stretch\">\n          <div class=\"d-flex a-i-start fit-h\">\n            <div class=\"min-width-0 flex-grow\">\n              <p\n                class=\"text-truncate-wrap p-b-4\"\n                data-cy=\"c8y-alarms-list--alarm-text\"\n              >\n                {{ alarm.text | translate }}\n              </p>\n              <div class=\"d-flex\">\n                <p\n                  class=\"small text-muted text-truncate flex-grow\"\n                  [title]=\"alarm.source.name\"\n                  data-cy=\"c8y-alarms-list--alarm-source-name\"\n                >\n                  <i [c8yIcon]=\"'exchange'\"></i>\n                  {{ alarm.source.name }}\n                </p>\n                <div class=\"d-flex\">\n                  @for (item of alarm | alarmListIndicator | async; track $index) {\n                    <div [title]=\"item.title | translate\">\n                      <i\n                        [class]=\"item.class\"\n                        [c8yIcon]=\"item.icon\"\n                      ></i>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n  </c8y-list-group>\n</c8y-sv-list>\n\n<ng-template #alertsA>\n  <c8y-dynamic-component-alerts [alerts]=\"alertAggregator\"></c8y-dynamic-component-alerts>\n</ng-template>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: AlarmsIconComponent, selector: "c8y-alarms-icon", inputs: ["alarm", "typeFilters"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "component", type: SplitViewListComponent, selector: "c8y-sv-list", inputs: ["title", "loading", "showEmptyState", "emptyStateIcon", "emptyStateTitle", "emptyStateSubtitle", "docsUrl", "showTitle", "listOpacity"] }, { kind: "component", type: SplitViewHeaderActionsComponent, selector: "c8y-sv-header-actions" }, { kind: "component", type: SplitViewAlertsComponent, selector: "c8y-sv-alerts" }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: AlarmListIndicatorPipe, name: "alarmListIndicator" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: AlarmsListComponent, isStandalone: true, selector: "c8y-alarms-list", inputs: { alarms: "alarms", hasPermissions: "hasPermissions", typeFilters: "typeFilters", loadMoreMode: "loadMoreMode", navigationOptions: "navigationOptions", isInitialLoading: "isInitialLoading", isInPreviewMode: "isInPreviewMode" }, outputs: { onSelectedAlarm: "onSelectedAlarm", onScrollingStateChange: "onScrollingStateChange" }, viewQueries: [{ propertyName: "svListComponent", first: true, predicate: ["scrollWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<c8y-sv-list\n  [emptyStateIcon]=\"'c8y-alert-idle'\"\n  [title]=\"'Alarms list' | translate\"\n  [emptyStateTitle]=\"'No alarms to display.' | translate\"\n  [loading]=\"isInitialLoading || isEmptyListLoading\"\n  [showEmptyState]=\"isEmptyListLoading && !isInitialLoading && hasPermissions\"\n  [docsUrl]=\"\n    '/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms'\n  \"\n  data-cy=\"c8y-alarms-list\"\n  #scrollWrapper\n>\n  <c8y-sv-header-actions>\n    <ng-content></ng-content>\n  </c8y-sv-header-actions>\n\n  <c8y-sv-alerts>\n    @if (\n      !isEmptyListLoading &&\n      (activeChildParam$ | async) &&\n      (activeAlarm$ | async)?.id !== (activeChildParam$ | async)\n    ) {\n      <div\n        class=\"alert alert-warning m-b-0\"\n        role=\"alert\"\n        translate\n      >\n        The selected alarm is not currently in the list, change your filter.\n      </div>\n    }\n  </c8y-sv-alerts>\n\n  <c8y-list-group class=\"c8y-list--timeline d-block p-r-16 p-t-16\">\n    <c8y-li-timeline\n      class=\"pointer c8y-list--timeline__item\"\n      role=\"button\"\n      data-cy=\"c8y-alarms-list--timeline-repeat\"\n      *c8yFor=\"let alarm of alarms; let i = index; pipe: mapAlarmLink; loadMore: loadMoreMode\"\n      [routerLink]=\"navigationOptions.allowNavigationToAlarmsView ? alarm.link : null\"\n      routerLinkActive=\"active\"\n      [queryParamsHandling]=\"navigationOptions.queryParamsHandling\"\n      (isActiveChange)=\"activeRouteChanged($event, liScrollAnchor, alarm)\"\n      (click)=\"onAlarmOpen(alarm)\"\n      [queryParams]=\"\n        navigationOptions.includeClearedQueryParams\n          ? { showCleared: alarm.status === 'CLEARED' }\n          : {}\n      \"\n    >\n      <span\n        [attr.aria-label]=\"alarmLastOccurrenceLabel | translate\"\n        [tooltip]=\"alarmLastOccurrenceLabel | translate\"\n        placement=\"right\"\n        container=\"body\"\n        data-cy=\"c8y-alarms-list--last-occurrence-date\"\n        [delay]=\"500\"\n      >\n        {{ alarm.time | c8yDate: 'mediumDate' }}\n        {{ alarm.time | c8yDate: 'mediumTime' }}\n      </span>\n      <c8y-li\n        style=\"scroll-margin-top: 56px\"\n        #liScrollAnchor\n      >\n        <c8y-li-icon class=\"a-s-start\">\n          <div class=\"alarm-icons\">\n            <c8y-alarms-icon\n              [typeFilters]=\"typeFilters\"\n              [alarm]=\"alarm\"\n            ></c8y-alarms-icon>\n          </div>\n          @if (alarm.firstOccurrenceTime) {\n            <button\n              class=\"btn-clean text-center\"\n              [attr.aria-label]=\"\n                alarmBadgeTooltip\n                  | translate\n                    : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n              \"\n              [tooltip]=\"\n                alarmBadgeTooltip\n                  | translate\n                    : { alarmFirstOccurrenceTime: alarm.firstOccurrenceTime | c8yDate: 'medium' }\n              \"\n              placement=\"right\"\n              container=\"body\"\n              type=\"button\"\n              data-cy=\"c8y-alarms-list--badge\"\n              (click)=\"$event.stopPropagation()\"\n              [delay]=\"500\"\n            >\n              @if (alarm.count > 1) {\n                <span class=\"badge badge-info\">\n                  {{ alarm.count }}\n                </span>\n              }\n            </button>\n          }\n        </c8y-li-icon>\n        <c8y-li-body class=\"a-s-stretch\">\n          <div class=\"d-flex a-i-start fit-h\">\n            <div class=\"min-width-0 flex-grow\">\n              <p\n                class=\"text-truncate-wrap p-b-4\"\n                data-cy=\"c8y-alarms-list--alarm-text\"\n              >\n                {{ alarm.text | translate }}\n              </p>\n              <div class=\"d-flex\">\n                <p\n                  class=\"small text-muted text-truncate flex-grow\"\n                  [title]=\"alarm.source.name\"\n                  data-cy=\"c8y-alarms-list--alarm-source-name\"\n                >\n                  <i [c8yIcon]=\"'exchange'\"></i>\n                  {{ alarm.source.name }}\n                </p>\n                <div class=\"d-flex\">\n                  @for (item of alarm | alarmListIndicator | async; track $index) {\n                    <div [title]=\"item.title | translate\">\n                      <i\n                        [class]=\"item.class\"\n                        [c8yIcon]=\"item.icon\"\n                      ></i>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n  </c8y-list-group>\n</c8y-sv-list>\n\n<ng-template #alertsA>\n  <c8y-dynamic-component-alerts [alerts]=\"alertAggregator\"></c8y-dynamic-component-alerts>\n</ng-template>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable", "selectOnClick"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: AlarmsIconComponent, selector: "c8y-alarms-icon", inputs: ["alarm", "typeFilters"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: DynamicComponentAlertsComponent, selector: "c8y-dynamic-component-alerts", inputs: ["alerts"] }, { kind: "component", type: SplitViewListComponent, selector: "c8y-sv-list", inputs: ["title", "loading", "showEmptyState", "emptyStateIcon", "emptyStateTitle", "emptyStateSubtitle", "docsUrl", "showTitle", "listOpacity"] }, { kind: "component", type: SplitViewHeaderActionsComponent, selector: "c8y-sv-header-actions" }, { kind: "component", type: SplitViewAlertsComponent, selector: "c8y-sv-alerts" }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: AlarmListIndicatorPipe, name: "alarmListIndicator" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AlarmsListComponent, decorators: [{
             type: Component,
@@ -2423,7 +2423,7 @@ class AlarmsTypeFilterComponent {
         return activeFilters.map(filter => filter.filters.type).join(',');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AlarmsTypeFilterComponent, deps: [{ token: i1$3.AlarmEventSelectorService }, { token: i1.ActivatedRoute }, { token: i1.Router }, { token: i3.ColorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: AlarmsTypeFilterComponent, isStandalone: true, selector: "c8y-alarms-type-filter", inputs: { alarms: "alarms", possibleFilters: "possibleFilters", activeFilters: "activeFilters" }, outputs: { onFilterChanged: "onFilterChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex a-i-center\">\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by alarm types' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    (onHidden)=\"resetFilters()\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\">\n        @if (activeFilters.length > 0) {\n          @for (filter of activeFilters; track $index) {\n            <span\n              class=\"tag tag--info chip\"\n              style=\"max-width: 150px\"\n            >\n              <button\n                class=\"btn btn-xs btn-clean text-10\"\n                title=\"{{ 'Remove' | translate }}\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation(); deselect(filter)\"\n              >\n                <i c8yIcon=\"times\"></i>\n              </button>\n              <span\n                class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n                [ngStyle]=\"{ 'background-color': filter.color }\"\n              >\n                <i\n                  class=\"stroked-icon\"\n                  c8yIcon=\"bell\"\n                ></i>\n              </span>\n              <span\n                class=\"text-truncate text-12 flex-grow\"\n                [title]=\"filter.filters.type\"\n                [attr.aria-label]=\"filter.filters.type\"\n              >\n                {{ filter.filters.type }}\n              </span>\n            </span>\n          }\n        } @else {\n          <span class=\"text-nowrap\">\n            {{ 'All alarm types' | translate }}\n          </span>\n        }\n      </div>\n      <div class=\"input-group-btn input-group-btn--last text-center\">\n        @if (activeFilters.length) {\n          <button\n            class=\"btn-default btn\"\n            [title]=\"'Clear filters' | translate\"\n            (click)=\"deselectAll()\"\n          >\n            <i c8yIcon=\"times\"></i>\n          </button>\n        }\n        <button\n          class=\"btn-default btn btn--caret\"\n          [title]=\"'Alarm types' | translate\"\n          data-cy=\"c8y-alarm-type-filter\"\n          dropdownToggle\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      style=\"min-width: 250px\"\n      *dropdownMenu\n    >\n      <div class=\"p-16 bg-level-2\">\n        <div>\n          <p>\n            <i\n              class=\"text-info m-r-4\"\n              [c8yIcon]=\"'info-circle'\"\n            ></i>\n            <strong translate>The list below may not be complete.</strong>\n          </p>\n          <p>\n            <span translate>\n              Recent alarms are displayed below but older ones may not be shown.\n            </span>\n            <span translate>Optionally, you can add a custom alarm.</span>\n          </p>\n        </div>\n      </div>\n      <c8y-list-group>\n        <div class=\"input-group p-t-16 p-b-16 p-r-32 p-l-32 separator-bottom\">\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            [placeholder]=\"'Custom alarm type' | translate\"\n            [(ngModel)]=\"customAlarmTypeInput\"\n            (keydown)=\"confirmWithEnter($event)\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn-dot text-primary\"\n              [attr.aria-label]=\"'Add custom alarm' | translate\"\n              [tooltip]=\"'Add' | translate\"\n              placement=\"top\"\n              [delay]=\"500\"\n              (click)=\"addCustomAlarmType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n\n        @for (alarmType of possibleFilters; track $index) {\n          <c8y-li\n            class=\"c8y-list__item__collapse--container-small cdk-drag\"\n            style=\"cursor: pointer\"\n            (click)=\"toggleAlarmType(alarmType)\"\n          >\n            <c8y-li-checkbox\n              class=\"a-s-center m-t-4 p-r-0 p-l-0\"\n              [selected]=\"alarmType.__active\"\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"toggleAlarmType(alarmType); $event.stopPropagation()\"\n            ></c8y-li-checkbox>\n            <div class=\"d-flex a-i-center p-l-4\">\n              <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\">\n                <div class=\"c8y-colorpicker c8y-colorpicker--alarm\">\n                  <span\n                    class=\"circle-icon-wrapper\"\n                    [ngStyle]=\"{ 'background-color': alarmType.color }\"\n                  >\n                    <i\n                      class=\"stroked-icon\"\n                      [c8yIcon]=\"'bell'\"\n                    ></i>\n                  </span>\n                </div>\n              </div>\n              <span\n                class=\"text-truncate text-12 flex-grow\"\n                [title]=\"alarmType.label\"\n                [attr.aria-label]=\"alarmType.label\"\n              >\n                {{ alarmType.label }}\n              </span>\n              @if (alarmType.__target === null) {\n                <button\n                  class=\"btn-dot btn-dot--danger\"\n                  [attr.aria-label]=\"'Remove' | translate\"\n                  tooltip=\"'Remove' | translate\"\n                  placement=\"top\"\n                  [delay]=\"500\"\n                  (click)=\"removeCustomAlarm(alarmType); $event.stopPropagation()\"\n                >\n                  <i c8yIcon=\"minus-circle\"></i>\n                </button>\n              }\n            </div>\n          </c8y-li>\n        }\n        @if (possibleFilters.length === 0) {\n          <c8y-li>\n            <c8y-ui-empty-state\n              class=\"p-t-8\"\n              icon=\"c8y-alarm\"\n              [title]=\"'No alarm found' | translate\"\n              [subtitle]=\"\n                'There is no alarm to filter. You can still add a custom alarm.' | translate\n              \"\n              [horizontal]=\"true\"\n            ></c8y-ui-empty-state>\n          </c8y-li>\n        }\n        <div class=\"sticky-bottom p-16\">\n          <button\n            class=\"btn btn-block btn-primary\"\n            [disabled]=\"possibleFilters.length === 0\"\n            (click)=\"applyFilterChange(); $event.stopPropagation(); filtersDropdown.hide()\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </c8y-list-group>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: AlarmsTypeFilterComponent, isStandalone: true, selector: "c8y-alarms-type-filter", inputs: { alarms: "alarms", possibleFilters: "possibleFilters", activeFilters: "activeFilters" }, outputs: { onFilterChanged: "onFilterChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex a-i-center\">\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by alarm types' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    (onHidden)=\"resetFilters()\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\">\n        @if (activeFilters.length > 0) {\n          @for (filter of activeFilters; track $index) {\n            <span\n              class=\"tag tag--info chip\"\n              style=\"max-width: 150px\"\n            >\n              <button\n                class=\"btn btn-xs btn-clean text-10\"\n                title=\"{{ 'Remove' | translate }}\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation(); deselect(filter)\"\n              >\n                <i c8yIcon=\"times\"></i>\n              </button>\n              <span\n                class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n                [ngStyle]=\"{ 'background-color': filter.color }\"\n              >\n                <i\n                  class=\"stroked-icon\"\n                  c8yIcon=\"bell\"\n                ></i>\n              </span>\n              <span\n                class=\"text-truncate text-12 flex-grow\"\n                [title]=\"filter.filters.type\"\n                [attr.aria-label]=\"filter.filters.type\"\n              >\n                {{ filter.filters.type }}\n              </span>\n            </span>\n          }\n        } @else {\n          <span class=\"text-nowrap\">\n            {{ 'All alarm types' | translate }}\n          </span>\n        }\n      </div>\n      <div class=\"input-group-btn input-group-btn--last text-center\">\n        @if (activeFilters.length) {\n          <button\n            class=\"btn-default btn\"\n            [title]=\"'Clear filters' | translate\"\n            (click)=\"deselectAll()\"\n          >\n            <i c8yIcon=\"times\"></i>\n          </button>\n        }\n        <button\n          class=\"btn-default btn btn--caret\"\n          [title]=\"'Alarm types' | translate\"\n          data-cy=\"c8y-alarm-type-filter\"\n          dropdownToggle\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      style=\"min-width: 250px\"\n      *dropdownMenu\n    >\n      <div class=\"p-16 bg-level-2\">\n        <div>\n          <p>\n            <i\n              class=\"text-info m-r-4\"\n              [c8yIcon]=\"'info-circle'\"\n            ></i>\n            <strong translate>The list below may not be complete.</strong>\n          </p>\n          <p>\n            <span translate>\n              Recent alarms are displayed below but older ones may not be shown.\n            </span>\n            <span translate>Optionally, you can add a custom alarm.</span>\n          </p>\n        </div>\n      </div>\n      <c8y-list-group>\n        <div class=\"input-group p-t-16 p-b-16 p-r-32 p-l-32 separator-bottom\">\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            [placeholder]=\"'Custom alarm type' | translate\"\n            [(ngModel)]=\"customAlarmTypeInput\"\n            (keydown)=\"confirmWithEnter($event)\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn-dot text-primary\"\n              [attr.aria-label]=\"'Add custom alarm' | translate\"\n              [tooltip]=\"'Add' | translate\"\n              placement=\"top\"\n              [delay]=\"500\"\n              (click)=\"addCustomAlarmType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n\n        @for (alarmType of possibleFilters; track $index) {\n          <c8y-li\n            class=\"c8y-list__item__collapse--container-small cdk-drag\"\n            style=\"cursor: pointer\"\n            (click)=\"toggleAlarmType(alarmType)\"\n          >\n            <c8y-li-checkbox\n              class=\"a-s-center m-t-4 p-r-0 p-l-0\"\n              [selected]=\"alarmType.__active\"\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"toggleAlarmType(alarmType); $event.stopPropagation()\"\n            ></c8y-li-checkbox>\n            <div class=\"d-flex a-i-center p-l-4\">\n              <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\">\n                <div class=\"c8y-colorpicker c8y-colorpicker--alarm\">\n                  <span\n                    class=\"circle-icon-wrapper\"\n                    [ngStyle]=\"{ 'background-color': alarmType.color }\"\n                  >\n                    <i\n                      class=\"stroked-icon\"\n                      [c8yIcon]=\"'bell'\"\n                    ></i>\n                  </span>\n                </div>\n              </div>\n              <span\n                class=\"text-truncate text-12 flex-grow\"\n                [title]=\"alarmType.label\"\n                [attr.aria-label]=\"alarmType.label\"\n              >\n                {{ alarmType.label }}\n              </span>\n              @if (alarmType.__target === null) {\n                <button\n                  class=\"btn-dot btn-dot--danger\"\n                  [attr.aria-label]=\"'Remove' | translate\"\n                  tooltip=\"'Remove' | translate\"\n                  placement=\"top\"\n                  [delay]=\"500\"\n                  (click)=\"removeCustomAlarm(alarmType); $event.stopPropagation()\"\n                >\n                  <i c8yIcon=\"minus-circle\"></i>\n                </button>\n              }\n            </div>\n          </c8y-li>\n        }\n        @if (possibleFilters.length === 0) {\n          <c8y-li>\n            <c8y-ui-empty-state\n              class=\"p-t-8\"\n              icon=\"c8y-alarm\"\n              [title]=\"'No alarm found' | translate\"\n              [subtitle]=\"\n                'There is no alarm to filter. You can still add a custom alarm.' | translate\n              \"\n              [horizontal]=\"true\"\n            ></c8y-ui-empty-state>\n          </c8y-li>\n        }\n        <div class=\"sticky-bottom p-16\">\n          <button\n            class=\"btn btn-block btn-primary\"\n            [disabled]=\"possibleFilters.length === 0\"\n            (click)=\"applyFilterChange(); $event.stopPropagation(); filtersDropdown.hide()\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </c8y-list-group>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable", "selectOnClick"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AlarmsTypeFilterComponent, decorators: [{
             type: Component,