@c8y/ngx-components 1023.71.1 → 1023.75.1

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

@@ -1,11 +1,33 @@
-import { gettext } from '@c8y/ngx-components/gettext';
+import { JsonPipe, KeyValuePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable } from '@angular/core';
+import { inject, Injectable, signal, computed, DestroyRef, ChangeDetectionStrategy, Component, Pipe, input, output, viewChild, effect, untracked, ElementRef, ViewChildren } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, RouterLink, Router, NavigationEnd, RouterLinkActive, RouterOutlet } from '@angular/router';
+import * as i1 from '@c8y/client';
+import { EventBinaryService, EventService, InventoryService } from '@c8y/client';
+import { FilesService, GenericFileIconPipe, AlertService, ColorService, IconDirective, IconPanelComponent, LoadingComponent, AssetLinkPipe, C8yTranslatePipe, DatePipe, HumanizePipe, ViewContext, ContextRouteService, FormGroupComponent, C8yTranslateDirective, DateTimePickerComponent, MessagesComponent, MessageDirective, CountdownIntervalComponent, ForOfDirective, ListGroupComponent, ListItemBodyComponent, ListItemComponent, ListItemIconComponent, ListItemTimelineComponent, SplitViewAlertsComponent, SplitViewHeaderActionsComponent, SplitViewListComponent, EmptyStateComponent, TitleComponent, HelpComponent, ActionBarItemComponent, SplitViewComponent, SplitViewDetailsComponent } from '@c8y/ngx-components';
+import { gettext } from '@c8y/ngx-components/gettext';
+import { saveAs } from 'file-saver';
+import { PopoverDirective } from 'ngx-bootstrap/popover';
 import { pickBy, has, without, difference, keys, includes } from 'lodash-es';
+import { INTERVAL_TITLES, INTERVALS, IntervalPickerComponent } from '@c8y/ngx-components/interval-picker';
+import * as i2 from '@c8y/ngx-components/global-context';
+import { Subject, take, timer, fromEvent } from 'rxjs';
+import { filter, switchMap, map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
+import * as i1$1 from '@angular/forms';
+import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BsDropdownDirective, BsDropdownToggleDirective, BsDropdownMenuDirective } from 'ngx-bootstrap/dropdown';
+import { TooltipDirective } from 'ngx-bootstrap/tooltip';
+import * as i1$2 from '@c8y/ngx-components/file-preview';
+import { FilePreviewModule } from '@c8y/ngx-components/file-preview';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { AlarmEventSelectorService } from '@c8y/ngx-components/alarm-event-selector';
 
 const EVENT_RESERVED_KEYS = [
     'creationTime',
     'id',
+    'lastUpdated',
     'self',
     'source',
     'text',
@@ -15,16 +37,71 @@ const EVENT_RESERVED_KEYS = [
 ];
 const EVENT_STANDARD_KEYS = {
     type: gettext('Type'),
-    text: gettext('Text')
+    text: gettext('Text'),
+    lastUpdated: gettext('Last updated')
 };
+const EVENTS_PATH = 'events';
+/**
+ * Extended interval titles with an additional title for the case when no date is selected.
+ */
+const INTERVAL_TITLES_EXTENDED = {
+    ...INTERVAL_TITLES,
+    none: gettext('No date filter')
+};
+const INTERVALS_EXTENDED = [
+    {
+        id: 'none',
+        title: gettext('No date filter')
+    },
+    ...INTERVALS
+];
 
+const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'];
 class EventsService {
+    constructor() {
+        this.filesService = inject(FilesService);
+        this.fileIconPipe = new GenericFileIconPipe(this.filesService);
+    }
+    resolveFileIcon(fileName) {
+        const extension = this.filesService.getFileExtension(fileName);
+        if (!extension) {
+            return 'file-o';
+        }
+        const genericType = this.fileIconPipe.getGenericType({ name: fileName });
+        return this.fileIconPipe.getIcon(genericType);
+    }
     getStandardKeys(event) {
         return pickBy(EVENT_STANDARD_KEYS, (_, key) => has(event, key));
     }
     getNonStandardKeys(event, excluding = []) {
         return without(difference(this.getKeys(event), keys(this.getStandardKeys(event))), ...excluding);
     }
+    isImageBinary(binaryInfo) {
+        if (!binaryInfo?.name) {
+            return false;
+        }
+        const extension = this.filesService.getFileExtension(binaryInfo.name);
+        return extension ? IMAGE_EXTENSIONS.includes(extension) : false;
+    }
+    getCustomFragments(event) {
+        const nonStandardKeys = this.getNonStandardKeys(event);
+        if (nonStandardKeys.length === 0) {
+            return null;
+        }
+        const fragments = {};
+        for (const key of nonStandardKeys) {
+            fragments[key] = event[key];
+        }
+        return fragments;
+    }
+    arrayBufferToBase64(buffer) {
+        const bytes = new Uint8Array(buffer);
+        const chunks = [];
+        for (let i = 0; i < bytes.length; i += 8192) {
+            chunks.push(String.fromCharCode(...bytes.subarray(i, i + 8192)));
+        }
+        return btoa(chunks.join(''));
+    }
     getKeys(managedObject) {
         return Object.keys({ ...managedObject }).filter(key => !includes(EVENT_RESERVED_KEYS, key));
     }
@@ -36,9 +113,1008 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+class EventDetailsComponent {
+    constructor() {
+        this.CREATION_TIME_HELP_TEXT = gettext("Time in which the event was created on the server. The time shown corresponds to the server's time.");
+        this.EVENT_ICON = 'online1';
+        this.TIME_HELP_TEXT = gettext('Time in which the event was created on the device. Device time can be different from server time.');
+        this.binaryPreviewLoading = signal(false, ...(ngDevMode ? [{ debugName: "binaryPreviewLoading" }] : []));
+        this.binaryPreviewUrl = signal(null, ...(ngDevMode ? [{ debugName: "binaryPreviewUrl" }] : []));
+        this.binaryPreviewFailed = signal(false, ...(ngDevMode ? [{ debugName: "binaryPreviewFailed" }] : []));
+        this.customFragments = signal(null, ...(ngDevMode ? [{ debugName: "customFragments" }] : []));
+        this.isDownloading = signal(false, ...(ngDevMode ? [{ debugName: "isDownloading" }] : []));
+        this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.selectedEvent = signal(null, ...(ngDevMode ? [{ debugName: "selectedEvent" }] : []));
+        this.selectedEventSource = signal(null, ...(ngDevMode ? [{ debugName: "selectedEventSource" }] : []));
+        this.typeColor = signal('', ...(ngDevMode ? [{ debugName: "typeColor" }] : []));
+        this.binaryInfo = computed(() => this.selectedEvent()?.['c8y_IsBinary'] ?? null, ...(ngDevMode ? [{ debugName: "binaryInfo" }] : []));
+        this.hasBinary = computed(() => !!this.binaryInfo(), ...(ngDevMode ? [{ debugName: "hasBinary" }] : []));
+        this.canDownload = computed(() => this.binaryInfo()?.length !== undefined, ...(ngDevMode ? [{ debugName: "canDownload" }] : []));
+        this.binaryIcon = computed(() => {
+            const info = this.binaryInfo();
+            if (!info?.name) {
+                return 'file-o';
+            }
+            return this.eventsService.resolveFileIcon(info.name);
+        }, ...(ngDevMode ? [{ debugName: "binaryIcon" }] : []));
+        this.activatedRoute = inject(ActivatedRoute);
+        this.alertService = inject(AlertService);
+        this.colorService = inject(ColorService);
+        this.destroyRef = inject(DestroyRef);
+        this.eventBinaryService = inject(EventBinaryService);
+        this.eventService = inject(EventService);
+        this.eventsService = inject(EventsService);
+        this.inventoryService = inject(InventoryService);
+    }
+    ngOnInit() {
+        this.activatedRoute.params.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(params => {
+            if (params['id']) {
+                void this.loadEventDetails(params['id']);
+            }
+        });
+    }
+    isComplexValue(value) {
+        return typeof value === 'object' && value !== null;
+    }
+    async downloadBinary() {
+        const event = this.selectedEvent();
+        const binaryInfo = this.binaryInfo();
+        if (!event || !binaryInfo) {
+            return;
+        }
+        try {
+            this.isDownloading.set(true);
+            const response = await this.eventBinaryService.download(event);
+            const arrayBuffer = await response.arrayBuffer();
+            const contentType = response.headers.get('Content-Type') || 'application/octet-stream';
+            const blob = new Blob([arrayBuffer], { type: contentType });
+            saveAs(blob, binaryInfo.name || 'attachment');
+        }
+        catch (error) {
+            this.alertService.addServerFailure(error);
+        }
+        finally {
+            this.isDownloading.set(false);
+        }
+    }
+    async loadEventDetails(eventId) {
+        try {
+            this.isLoading.set(true);
+            this.binaryPreviewUrl.set(null);
+            this.binaryPreviewFailed.set(false);
+            const { data: event } = await this.eventService.detail(eventId);
+            this.selectedEvent.set(event);
+            const [source, color] = await Promise.all([
+                this.loadEventSource(event.source?.id),
+                this.colorService.generateColor(event.type)
+            ]);
+            this.selectedEventSource.set(source);
+            this.typeColor.set(color);
+            this.customFragments.set(this.eventsService.getCustomFragments(event));
+            if (event['c8y_IsBinary'] && this.eventsService.isImageBinary(event['c8y_IsBinary'])) {
+                void this.loadBinaryPreview(event);
+            }
+        }
+        catch (error) {
+            this.alertService.addServerFailure(error);
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    async loadEventSource(sourceId) {
+        if (!sourceId) {
+            return null;
+        }
+        try {
+            const { data } = await this.inventoryService.detail(sourceId);
+            return data;
+        }
+        catch {
+            return null;
+        }
+    }
+    async loadBinaryPreview(event) {
+        try {
+            this.binaryPreviewLoading.set(true);
+            const response = await this.eventBinaryService.download(event);
+            const arrayBuffer = await response.arrayBuffer();
+            const contentType = response.headers.get('Content-Type') || 'image/png';
+            const base64 = this.eventsService.arrayBufferToBase64(arrayBuffer);
+            this.binaryPreviewUrl.set(`data:${contentType};base64,${base64}`);
+        }
+        catch {
+            this.binaryPreviewFailed.set(true);
+        }
+        finally {
+            this.binaryPreviewLoading.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: EventDetailsComponent, isStandalone: true, selector: "c8y-event-details", ngImport: i0, template: "@if (isLoading()) {\n  <c8y-loading />\n} @else if (selectedEvent(); as event) {\n  <!-- Header with event text -->\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-event-details-title\"\n    >\n      {{ event.text | translate }}\n    </h4>\n  </div>\n\n  <c8y-icon-panel [sections]=\"[]\">\n    <!-- Source section -->\n    <div\n      class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n      data-cy=\"c8y-event-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 min-width-0\">\n          <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Source' | translate }}</p>\n          <p class=\"small\">\n            @if (selectedEventSource(); as source) {\n              <button\n                class=\"btn-link p-0 m-r-8 text-left text-truncate\"\n                [title]=\"source.name || event.source?.id\"\n                type=\"button\"\n                [routerLink]=\"source | assetLink\"\n              >\n                <i c8yIcon=\"exchange\"></i>\n                {{ source.name || event.source?.id }}\n              </button>\n            } @else {\n              <span class=\"text-muted\">{{ event.source?.id }}</span>\n            }\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Type section -->\n    <div\n      class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n      data-cy=\"c8y-event-details--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            [style.background-color]=\"typeColor()\"\n          >\n            <i\n              class=\"stroked-icon\"\n              [c8yIcon]=\"EVENT_ICON\"\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]=\"event.type\"\n          >\n            <code>{{ event.type }}</code>\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Time, Server creation time, and Last updated -->\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-event-details--calendar-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            <!-- Device time -->\n            <div\n              class=\"col-4 p-b-8\"\n              data-cy=\"c8y-event-details--time-wrapper\"\n            >\n              <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Time' | translate }}</p>\n              <p class=\"small\">\n                {{ event.time | c8yDate: 'medium' }}\n                <button\n                  class=\"btn-help btn-help--sm\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  [popover]=\"TIME_HELP_TEXT | translate\"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                ></button>\n              </p>\n            </div>\n            <!-- Server creation time -->\n            <div\n              class=\"col-4 p-b-8\"\n              data-cy=\"c8y-event-details--creation-time-wrapper\"\n            >\n              <p class=\"text-label-small m-b-0 m-r-8\">\n                {{ 'Server creation time' | translate }}\n              </p>\n              <p class=\"small\">\n                {{ event.creationTime | c8yDate: 'medium' }}\n                <button\n                  class=\"btn-help btn-help--sm\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  [popover]=\"CREATION_TIME_HELP_TEXT | translate\"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                ></button>\n              </p>\n            </div>\n            <!-- Last updated -->\n            @if (event['lastUpdated']) {\n              <div\n                class=\"col-4 p-b-8\"\n                data-cy=\"c8y-event-details--last-updated-wrapper\"\n              >\n                <p class=\"text-label-small m-b-0 m-r-8\">\n                  {{ 'Last updated' | translate }}\n                </p>\n                <p class=\"small\">\n                  {{ event['lastUpdated'] | c8yDate: 'medium' }}\n                </p>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Custom fragments section -->\n    @if (customFragments(); as fragments) {\n      <div\n        class=\"col-xs-12 col-md-12 p-b-16\"\n        data-cy=\"c8y-event-details--custom-fragments-wrapper\"\n      >\n        <div class=\"border-all fit-w d-flex\">\n          <div class=\"p-8\">\n            <i\n              class=\"icon-24 text-gray-dark m-t-4\"\n              c8yIcon=\"outgoing-data\"\n            ></i>\n          </div>\n          <div\n            class=\"p-t-8 p-b-0 p-r-8 flex-grow\"\n            data-cy=\"event-details-custom-data\"\n          >\n            <ul class=\"list-unstyled small m-b-0\">\n              @for (item of fragments | keyvalue; track item.key) {\n                <li\n                  class=\"p-t-4 p-b-4 separator-bottom\"\n                  data-cy=\"event-details-custom-data-item\"\n                >\n                  <label class=\"small m-b-4 text-label-small d-block\">\n                    {{ item.key | humanize }}\n                  </label>\n                  @if (isComplexValue(item.value)) {\n                    <pre class=\"m-b-0\"><code>{{ item.value | json }}</code></pre>\n                  } @else {\n                    <span>{{ item.value }}</span>\n                  }\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Attachment section -->\n    @if (hasBinary()) {\n      <div\n        class=\"col-xs-12 col-md-12 p-b-16\"\n        data-cy=\"c8y-event-details--attachment-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]=\"binaryIcon()\"\n            ></i>\n          </div>\n          <div class=\"p-t-8 p-b-8 p-r-8 flex-grow\">\n            <p class=\"text-label-small m-b-4 m-r-8\">{{ 'Attachment' | translate }}</p>\n\n            <!-- Image preview -->\n            @if (binaryPreviewLoading()) {\n              <div class=\"m-b-16\">\n                <c8y-loading></c8y-loading>\n              </div>\n            } @else if (binaryPreviewUrl(); as previewUrl) {\n              @let imgAltText = 'Attachment preview' | translate;\n              <div class=\"m-b-16\">\n                <img\n                  class=\"max-width-100\"\n                  [src]=\"previewUrl\"\n                  [alt]=\"binaryInfo()?.name || imgAltText\"\n                  data-cy=\"c8y-event-details--attachment-preview\"\n                />\n              </div>\n            } @else if (binaryPreviewFailed()) {\n              <p\n                class=\"text-muted small m-b-8\"\n                translate\n              >\n                Preview unavailable.\n              </p>\n            }\n\n            <!-- Download button -->\n            @if (canDownload()) {\n              <button\n                class=\"btn btn-primary btn-xs\"\n                [title]=\"'Download' | translate\"\n                [attr.aria-busy]=\"isDownloading()\"\n                type=\"button\"\n                [disabled]=\"isDownloading()\"\n                (click)=\"downloadBinary()\"\n                data-cy=\"c8y-event-details--download-btn\"\n              >\n                <i [c8yIcon]=\"isDownloading() ? 'spinner' : 'download'\"></i>\n                <span>{{ 'Download' | translate }}</span>\n              </button>\n            }\n          </div>\n        </div>\n      </div>\n    }\n  </c8y-icon-panel>\n}\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: IconPanelComponent, selector: "c8y-icon-panel", inputs: ["sections", "ariaLabel"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: AssetLinkPipe, name: "assetLink" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-event-details', imports: [
+                        AssetLinkPipe,
+                        C8yTranslatePipe,
+                        DatePipe,
+                        HumanizePipe,
+                        IconDirective,
+                        IconPanelComponent,
+                        JsonPipe,
+                        KeyValuePipe,
+                        LoadingComponent,
+                        PopoverDirective,
+                        RouterLink
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isLoading()) {\n  <c8y-loading />\n} @else if (selectedEvent(); as event) {\n  <!-- Header with event text -->\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-event-details-title\"\n    >\n      {{ event.text | translate }}\n    </h4>\n  </div>\n\n  <c8y-icon-panel [sections]=\"[]\">\n    <!-- Source section -->\n    <div\n      class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n      data-cy=\"c8y-event-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 min-width-0\">\n          <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Source' | translate }}</p>\n          <p class=\"small\">\n            @if (selectedEventSource(); as source) {\n              <button\n                class=\"btn-link p-0 m-r-8 text-left text-truncate\"\n                [title]=\"source.name || event.source?.id\"\n                type=\"button\"\n                [routerLink]=\"source | assetLink\"\n              >\n                <i c8yIcon=\"exchange\"></i>\n                {{ source.name || event.source?.id }}\n              </button>\n            } @else {\n              <span class=\"text-muted\">{{ event.source?.id }}</span>\n            }\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Type section -->\n    <div\n      class=\"col-xs-12 col-md-6 d-flex p-b-8\"\n      data-cy=\"c8y-event-details--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            [style.background-color]=\"typeColor()\"\n          >\n            <i\n              class=\"stroked-icon\"\n              [c8yIcon]=\"EVENT_ICON\"\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]=\"event.type\"\n          >\n            <code>{{ event.type }}</code>\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Time, Server creation time, and Last updated -->\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-event-details--calendar-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            <!-- Device time -->\n            <div\n              class=\"col-4 p-b-8\"\n              data-cy=\"c8y-event-details--time-wrapper\"\n            >\n              <p class=\"text-label-small m-b-0 m-r-8\">{{ 'Time' | translate }}</p>\n              <p class=\"small\">\n                {{ event.time | c8yDate: 'medium' }}\n                <button\n                  class=\"btn-help btn-help--sm\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  [popover]=\"TIME_HELP_TEXT | translate\"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                ></button>\n              </p>\n            </div>\n            <!-- Server creation time -->\n            <div\n              class=\"col-4 p-b-8\"\n              data-cy=\"c8y-event-details--creation-time-wrapper\"\n            >\n              <p class=\"text-label-small m-b-0 m-r-8\">\n                {{ 'Server creation time' | translate }}\n              </p>\n              <p class=\"small\">\n                {{ event.creationTime | c8yDate: 'medium' }}\n                <button\n                  class=\"btn-help btn-help--sm\"\n                  [attr.aria-label]=\"'Help' | translate\"\n                  [popover]=\"CREATION_TIME_HELP_TEXT | translate\"\n                  placement=\"right\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  type=\"button\"\n                ></button>\n              </p>\n            </div>\n            <!-- Last updated -->\n            @if (event['lastUpdated']) {\n              <div\n                class=\"col-4 p-b-8\"\n                data-cy=\"c8y-event-details--last-updated-wrapper\"\n              >\n                <p class=\"text-label-small m-b-0 m-r-8\">\n                  {{ 'Last updated' | translate }}\n                </p>\n                <p class=\"small\">\n                  {{ event['lastUpdated'] | c8yDate: 'medium' }}\n                </p>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Custom fragments section -->\n    @if (customFragments(); as fragments) {\n      <div\n        class=\"col-xs-12 col-md-12 p-b-16\"\n        data-cy=\"c8y-event-details--custom-fragments-wrapper\"\n      >\n        <div class=\"border-all fit-w d-flex\">\n          <div class=\"p-8\">\n            <i\n              class=\"icon-24 text-gray-dark m-t-4\"\n              c8yIcon=\"outgoing-data\"\n            ></i>\n          </div>\n          <div\n            class=\"p-t-8 p-b-0 p-r-8 flex-grow\"\n            data-cy=\"event-details-custom-data\"\n          >\n            <ul class=\"list-unstyled small m-b-0\">\n              @for (item of fragments | keyvalue; track item.key) {\n                <li\n                  class=\"p-t-4 p-b-4 separator-bottom\"\n                  data-cy=\"event-details-custom-data-item\"\n                >\n                  <label class=\"small m-b-4 text-label-small d-block\">\n                    {{ item.key | humanize }}\n                  </label>\n                  @if (isComplexValue(item.value)) {\n                    <pre class=\"m-b-0\"><code>{{ item.value | json }}</code></pre>\n                  } @else {\n                    <span>{{ item.value }}</span>\n                  }\n                </li>\n              }\n            </ul>\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Attachment section -->\n    @if (hasBinary()) {\n      <div\n        class=\"col-xs-12 col-md-12 p-b-16\"\n        data-cy=\"c8y-event-details--attachment-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]=\"binaryIcon()\"\n            ></i>\n          </div>\n          <div class=\"p-t-8 p-b-8 p-r-8 flex-grow\">\n            <p class=\"text-label-small m-b-4 m-r-8\">{{ 'Attachment' | translate }}</p>\n\n            <!-- Image preview -->\n            @if (binaryPreviewLoading()) {\n              <div class=\"m-b-16\">\n                <c8y-loading></c8y-loading>\n              </div>\n            } @else if (binaryPreviewUrl(); as previewUrl) {\n              @let imgAltText = 'Attachment preview' | translate;\n              <div class=\"m-b-16\">\n                <img\n                  class=\"max-width-100\"\n                  [src]=\"previewUrl\"\n                  [alt]=\"binaryInfo()?.name || imgAltText\"\n                  data-cy=\"c8y-event-details--attachment-preview\"\n                />\n              </div>\n            } @else if (binaryPreviewFailed()) {\n              <p\n                class=\"text-muted small m-b-8\"\n                translate\n              >\n                Preview unavailable.\n              </p>\n            }\n\n            <!-- Download button -->\n            @if (canDownload()) {\n              <button\n                class=\"btn btn-primary btn-xs\"\n                [title]=\"'Download' | translate\"\n                [attr.aria-busy]=\"isDownloading()\"\n                type=\"button\"\n                [disabled]=\"isDownloading()\"\n                (click)=\"downloadBinary()\"\n                data-cy=\"c8y-event-details--download-btn\"\n              >\n                <i [c8yIcon]=\"isDownloading() ? 'spinner' : 'download'\"></i>\n                <span>{{ 'Download' | translate }}</span>\n              </button>\n            }\n          </div>\n        </div>\n      </div>\n    }\n  </c8y-icon-panel>\n}\n" }]
+        }] });
+
+const DEFAULT_EVENT_ICON = 'online1';
+class EventIconPipe {
+    constructor() {
+        this.eventsService = inject(EventsService);
+    }
+    transform(event) {
+        const binaryInfo = event['c8y_IsBinary'];
+        return binaryInfo?.name
+            ? this.eventsService.resolveFileIcon(binaryInfo.name)
+            : DEFAULT_EVENT_ICON;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: EventIconPipe, isStandalone: true, name: "eventIcon" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventIconPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'eventIcon',
+                    standalone: true
+                }]
+        }] });
+
+class EventIsImagePipe {
+    constructor() {
+        this.eventsService = inject(EventsService);
+    }
+    transform(event) {
+        return this.eventsService.isImageBinary(event['c8y_IsBinary']);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventIsImagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: EventIsImagePipe, isStandalone: true, name: "eventIsImage" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventIsImagePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'eventIsImage',
+                    standalone: true
+                }]
+        }] });
+
+class EventsViewService {
+    constructor(eventService, dateTimeContextPickerService) {
+        this.eventService = eventService;
+        this.dateTimeContextPickerService = dateTimeContextPickerService;
+        this.DEFAULT_PAGE_SIZE = 50;
+        this.DEFAULT_REFRESH_INTERVAL = 30_000;
+        this.reloadEventsList$ = new Subject();
+    }
+    /**
+     * Emits a subject to trigger events list reload.
+     */
+    updateEventsList() {
+        this.reloadEventsList$.next();
+    }
+    /**
+     * Retrieves a list of events with optional filters.
+     */
+    async retrieveEvents(filter) {
+        const queryFilter = {
+            pageSize: filter?.pageSize ?? this.DEFAULT_PAGE_SIZE,
+            withTotalPages: true
+        };
+        if (filter?.source) {
+            queryFilter['source'] = filter.source;
+            queryFilter['withSourceChildren'] = filter.withSourceChildren ?? true;
+        }
+        if (filter?.type) {
+            queryFilter['type'] = filter.type;
+        }
+        if (filter?.dateFrom) {
+            queryFilter['dateFrom'] = filter.dateFrom.toISOString();
+        }
+        if (filter?.dateTo) {
+            queryFilter['dateTo'] = filter.dateTo.toISOString();
+        }
+        return this.eventService.list(queryFilter);
+    }
+    /**
+     * Returns the correct link based on the provided context data.
+     */
+    getRouterLink(contextData, event) {
+        let detailUrl = `/${EVENTS_PATH}`;
+        if (event) {
+            detailUrl = `/${EVENTS_PATH}/${event.id}`;
+        }
+        if (!contextData) {
+            return detailUrl;
+        }
+        switch (contextData.context) {
+            case ViewContext.Device:
+                return `/device/${contextData.contextData.id}${detailUrl}`;
+            case ViewContext.Group:
+                return `/group/${contextData.contextData.id}${detailUrl}`;
+            default:
+                return detailUrl;
+        }
+    }
+    /**
+     * Returns the correct from and to dates based on the selected interval
+     * @param intervalId the selected interval. E.g. 'none', 'hours', 'custom' ...
+     * @returns The calculated date context based on the selected interval.
+     */
+    buildEventsFilter(params) {
+        const dateFrom = params.dateTimeContext?.dateFrom ?? params.dateRange?.[0];
+        const dateTo = params.dateTimeContext?.dateTo ?? params.dateRange?.[1];
+        return {
+            ...(params.source && {
+                source: params.source,
+                withSourceChildren: params.withSourceChildren ?? true
+            }),
+            ...(params.type && { type: params.type }),
+            ...(dateFrom && { dateFrom: new Date(dateFrom) }),
+            ...(dateTo && { dateTo: new Date(dateTo) })
+        };
+    }
+    getDateTimeContextByInterval(intervalId) {
+        return this.dateTimeContextPickerService.getDateTimeContextByInterval(intervalId);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventsViewService, deps: [{ token: i1.EventService }, { token: i2.DateTimeContextPickerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventsViewService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventsViewService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.EventService }, { type: i2.DateTimeContextPickerService }] });
+
+class EventRouterLinkPipe {
+    constructor() {
+        this.activatedRoute = inject(ActivatedRoute);
+        this.contextRouteService = inject(ContextRouteService);
+        this.eventsViewService = inject(EventsViewService);
+    }
+    transform(event, alwaysNavigateToAllEvents = false) {
+        if (alwaysNavigateToAllEvents) {
+            return this.eventsViewService.getRouterLink(null, event);
+        }
+        const contextData = this.contextRouteService.getContextData(this.activatedRoute);
+        return this.eventsViewService.getRouterLink(contextData, event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventRouterLinkPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: EventRouterLinkPipe, isStandalone: true, name: "eventRouterLink" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventRouterLinkPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'eventRouterLink',
+                    standalone: true
+                }]
+        }] });
+
+class EventsDateFilterComponent {
+    constructor() {
+        this.INTERVALS = INTERVALS_EXTENDED;
+        this.INTERVAL_TITLES = INTERVAL_TITLES_EXTENDED;
+        this.DATE_FORMAT = 'short';
+        this.defaultInterval = input('none', ...(ngDevMode ? [{ debugName: "defaultInterval" }] : []));
+        this.updateQueryParams = input(true, ...(ngDevMode ? [{ debugName: "updateQueryParams" }] : []));
+        this.date = signal(undefined, ...(ngDevMode ? [{ debugName: "date" }] : []));
+        this.noFilterLabel = gettext('No date filter');
+        this.dateFilterChange = output();
+        this.dropdown = viewChild(BsDropdownDirective, ...(ngDevMode ? [{ debugName: "dropdown" }] : []));
+        this.activatedRoute = inject(ActivatedRoute);
+        this.destroyRef = inject(DestroyRef);
+        this.eventsViewService = inject(EventsViewService);
+        this.formBuilder = inject(FormBuilder);
+        this.router = inject(Router);
+    }
+    ngOnInit() {
+        const context = this.getDefaultContext();
+        this.form = this.createForm(context);
+        this.date.set([
+            this.form.value.currentDateContextFromDate,
+            this.form.value.currentDateContextToDate
+        ]);
+        this.activatedRoute.queryParams
+            .pipe(take(1), takeUntilDestroyed(this.destroyRef))
+            .subscribe(params => {
+            if (!params.interval) {
+                return;
+            }
+            if (params.interval !== 'custom') {
+                this.updateDateTime(params.interval);
+            }
+            else {
+                this.form.patchValue({
+                    currentDateContextInterval: params.interval,
+                    temporaryUserSelectedFromDate: params.dateFrom,
+                    temporaryUserSelectedToDate: params.dateTo
+                });
+                this.date.set([params.dateFrom, params.dateTo]);
+            }
+        });
+        this.subscribeToIntervalChange();
+    }
+    applyDateFilter() {
+        const interval = this.form.value.currentDateContextInterval;
+        const isNoDateFilter = interval === 'none';
+        const combinedFormEvent = {
+            interval,
+            selectedDates: isNoDateFilter
+                ? undefined
+                : [
+                    new Date(this.form.value.temporaryUserSelectedFromDate),
+                    new Date(this.form.value.temporaryUserSelectedToDate)
+                ]
+        };
+        // needed for custom interval
+        this.date.set([
+            this.form.value.temporaryUserSelectedFromDate,
+            this.form.value.temporaryUserSelectedToDate
+        ]);
+        this.router.navigate([], {
+            relativeTo: this.activatedRoute,
+            queryParams: {
+                interval,
+                dateFrom: isNoDateFilter ? null : combinedFormEvent.selectedDates[0].toISOString(),
+                dateTo: isNoDateFilter ? null : combinedFormEvent.selectedDates[1].toISOString()
+            },
+            queryParamsHandling: 'merge'
+        });
+        this.dateFilterChange.emit(combinedFormEvent);
+    }
+    updateDateTime(interval) {
+        const date = this.eventsViewService.getDateTimeContextByInterval(interval);
+        const dropdown = this.dropdown();
+        if (dropdown) {
+            dropdown.isOpen = false;
+        }
+        this.date.set(date.map(d => d.toISOString()));
+        this.form.patchValue({
+            temporaryUserSelectedFromDate: date[0].toISOString(),
+            temporaryUserSelectedToDate: date[1].toISOString(),
+            currentDateContextInterval: interval
+        }, { emitEvent: false });
+        this.applyDateFilter();
+    }
+    getDefaultContext() {
+        return {
+            date: this.eventsViewService.getDateTimeContextByInterval(this.defaultInterval()),
+            interval: this.defaultInterval()
+        };
+    }
+    subscribeToIntervalChange() {
+        this.form.controls.currentDateContextInterval.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(interval => {
+            if (interval === 'custom') {
+                this.form.patchValue({
+                    temporaryUserSelectedFromDate: this.form.controls.temporaryUserSelectedFromDate.value === new Date(0).toISOString()
+                        ? this.form.controls.currentDateContextToDate.value
+                        : this.form.controls.temporaryUserSelectedFromDate.value,
+                    currentDateContextInterval: interval
+                }, { emitEvent: false });
+                return;
+            }
+            this.updateDateTime(interval);
+        });
+    }
+    createForm(context) {
+        return this.formBuilder.group({
+            temporaryUserSelectedFromDate: context.date[0].toISOString(),
+            temporaryUserSelectedToDate: context.date[1].toISOString(),
+            currentDateContextFromDate: context.date[0].toISOString(),
+            currentDateContextToDate: context.date[1].toISOString(),
+            currentDateContextInterval: context.interval || 'custom'
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventsDateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: EventsDateFilterComponent, isStandalone: true, selector: "c8y-events-date-filter", inputs: { defaultInterval: { classPropertyName: "defaultInterval", publicName: "defaultInterval", isSignal: true, isRequired: false, transformFunction: null }, updateQueryParams: { classPropertyName: "updateQueryParams", publicName: "updateQueryParams", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateFilterChange: "dateFilterChange" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: BsDropdownDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<form\n  class=\"d-flex gap-16 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n  [formGroup]=\"form\"\n>\n  <div\n    class=\"dropdown flex-grow\"\n    #dropDirection=\"bs-dropdown\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      attr.aria-label=\"{{\n        (form.value.currentDateContextInterval === 'none'\n          ? noFilterLabel\n          : (date()?.[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date()?.[1] | c8yDate: DATE_FORMAT)\n        ) | translate\n      }}\"\n      tooltip=\"{{\n        (form.value.currentDateContextInterval === 'none'\n          ? noFilterLabel\n          : (date()?.[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date()?.[1] | c8yDate: DATE_FORMAT)\n        ) | translate\n      }}\"\n      placement=\"top\"\n      container=\"body\"\n      data-cy=\"events-date-filter--date-picker-dropdown-button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"m-r-4\"\n        c8yIcon=\"schedule1\"\n      ></i>\n      <div class=\"d-col text-left fit-w\">\n        <span\n          class=\"text-12\"\n          data-cy=\"widget-time-context--selected-interval\"\n        >\n          {{\n            INTERVAL_TITLES[form.controls.currentDateContextInterval.value ?? 'none'] | translate\n          }}\n        </span>\n        @if (form.controls.currentDateContextInterval.value !== 'none') {\n          <span\n            class=\"text-10 text-muted text-truncate\"\n            data-cy=\"events-date-filter--selected-time-range\"\n          >\n            {{ date()?.[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date()?.[1] | c8yDate: DATE_FORMAT }}\n          </span>\n        }\n      </div>\n      <span class=\"caret m-r-16 m-l-4\"></span>\n    </button>\n\n    <ul\n      class=\"dropdown-menu dropdown-menu--date-range\"\n      *dropdownMenu\n    >\n      <c8y-interval-picker\n        class=\"d-contents\"\n        formControlName=\"currentDateContextInterval\"\n        [INTERVALS]=\"INTERVALS\"\n      ></c8y-interval-picker>\n\n      @if (form.controls.currentDateContextInterval.value === 'custom') {\n        <div class=\"p-l-16 p-r-16\">\n          <c8y-form-group\n            class=\"m-b-8\"\n            [class.has-error]=\"form.controls.temporaryUserSelectedFromDate.errors\"\n          >\n            <label\n              [title]=\"'From`date`' | translate\"\n              for=\"temporaryUserSelectedFromDate\"\n              translate\n            >\n              From`date`\n            </label>\n            <c8y-date-time-picker\n              [class.has-error]=\"form.controls.temporaryUserSelectedFromDate.errors\"\n              id=\"temporaryUserSelectedFromDate\"\n              [maxDate]=\"form.value.temporaryUserSelectedToDate ?? ''\"\n              [placeholder]=\"'From`date`' | translate\"\n              [formControl]=\"form.controls.temporaryUserSelectedFromDate\"\n            ></c8y-date-time-picker>\n            <c8y-messages [show]=\"form.controls.temporaryUserSelectedFromDate.errors ?? {}\">\n              <c8y-message\n                name=\"dateAfterRangeMax\"\n                [text]=\"'This date is after the latest allowed date.' | translate\"\n              ></c8y-message>\n              <c8y-message\n                name=\"invalidDateTime\"\n                [text]=\"'This date is invalid.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n\n          <c8y-form-group\n            class=\"m-b-8\"\n            [class.has-error]=\"form.controls.temporaryUserSelectedToDate.errors\"\n          >\n            <label\n              [title]=\"'To`date`' | translate\"\n              for=\"temporaryUserSelectedToDate\"\n              translate\n            >\n              To`date`\n            </label>\n            <c8y-date-time-picker\n              [class.has-error]=\"form.controls.temporaryUserSelectedToDate.errors\"\n              id=\"temporaryUserSelectedToDate\"\n              [minDate]=\"form.value.temporaryUserSelectedFromDate ?? ''\"\n              [placeholder]=\"'To`date`' | translate\"\n              [formControl]=\"form.controls.temporaryUserSelectedToDate\"\n            ></c8y-date-time-picker>\n            <c8y-messages [show]=\"form.controls.temporaryUserSelectedToDate.errors ?? {}\">\n              <c8y-message\n                name=\"dateBeforeRangeMin\"\n                [text]=\"'This date is before the earliest allowed date.' | translate\"\n              ></c8y-message>\n              <c8y-message\n                name=\"invalidDateTime\"\n                [text]=\"'This date is invalid.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n        </div>\n\n        <div class=\"p-16 d-flex gap-8 separator-top\">\n          <button\n            class=\"btn btn-primary btn-sm flex-grow\"\n            title=\"{{ 'Apply' | translate }}\"\n            type=\"button\"\n            data-cy=\"events-date-filter--apply-button\"\n            (click)=\"applyDateFilter(); dropDirection.isOpen = false\"\n            [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      }\n    </ul>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "component", type: IntervalPickerComponent, selector: "c8y-interval-picker", inputs: ["INTERVALS"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventsDateFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-events-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        BsDropdownDirective,
+                        BsDropdownToggleDirective,
+                        TooltipDirective,
+                        IconDirective,
+                        BsDropdownMenuDirective,
+                        IntervalPickerComponent,
+                        FormGroupComponent,
+                        C8yTranslateDirective,
+                        DateTimePickerComponent,
+                        MessagesComponent,
+                        MessageDirective,
+                        C8yTranslatePipe,
+                        DatePipe
+                    ], template: "<form\n  class=\"d-flex gap-16 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n  [formGroup]=\"form\"\n>\n  <div\n    class=\"dropdown flex-grow\"\n    #dropDirection=\"bs-dropdown\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      attr.aria-label=\"{{\n        (form.value.currentDateContextInterval === 'none'\n          ? noFilterLabel\n          : (date()?.[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date()?.[1] | c8yDate: DATE_FORMAT)\n        ) | translate\n      }}\"\n      tooltip=\"{{\n        (form.value.currentDateContextInterval === 'none'\n          ? noFilterLabel\n          : (date()?.[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date()?.[1] | c8yDate: DATE_FORMAT)\n        ) | translate\n      }}\"\n      placement=\"top\"\n      container=\"body\"\n      data-cy=\"events-date-filter--date-picker-dropdown-button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"m-r-4\"\n        c8yIcon=\"schedule1\"\n      ></i>\n      <div class=\"d-col text-left fit-w\">\n        <span\n          class=\"text-12\"\n          data-cy=\"widget-time-context--selected-interval\"\n        >\n          {{\n            INTERVAL_TITLES[form.controls.currentDateContextInterval.value ?? 'none'] | translate\n          }}\n        </span>\n        @if (form.controls.currentDateContextInterval.value !== 'none') {\n          <span\n            class=\"text-10 text-muted text-truncate\"\n            data-cy=\"events-date-filter--selected-time-range\"\n          >\n            {{ date()?.[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date()?.[1] | c8yDate: DATE_FORMAT }}\n          </span>\n        }\n      </div>\n      <span class=\"caret m-r-16 m-l-4\"></span>\n    </button>\n\n    <ul\n      class=\"dropdown-menu dropdown-menu--date-range\"\n      *dropdownMenu\n    >\n      <c8y-interval-picker\n        class=\"d-contents\"\n        formControlName=\"currentDateContextInterval\"\n        [INTERVALS]=\"INTERVALS\"\n      ></c8y-interval-picker>\n\n      @if (form.controls.currentDateContextInterval.value === 'custom') {\n        <div class=\"p-l-16 p-r-16\">\n          <c8y-form-group\n            class=\"m-b-8\"\n            [class.has-error]=\"form.controls.temporaryUserSelectedFromDate.errors\"\n          >\n            <label\n              [title]=\"'From`date`' | translate\"\n              for=\"temporaryUserSelectedFromDate\"\n              translate\n            >\n              From`date`\n            </label>\n            <c8y-date-time-picker\n              [class.has-error]=\"form.controls.temporaryUserSelectedFromDate.errors\"\n              id=\"temporaryUserSelectedFromDate\"\n              [maxDate]=\"form.value.temporaryUserSelectedToDate ?? ''\"\n              [placeholder]=\"'From`date`' | translate\"\n              [formControl]=\"form.controls.temporaryUserSelectedFromDate\"\n            ></c8y-date-time-picker>\n            <c8y-messages [show]=\"form.controls.temporaryUserSelectedFromDate.errors ?? {}\">\n              <c8y-message\n                name=\"dateAfterRangeMax\"\n                [text]=\"'This date is after the latest allowed date.' | translate\"\n              ></c8y-message>\n              <c8y-message\n                name=\"invalidDateTime\"\n                [text]=\"'This date is invalid.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n\n          <c8y-form-group\n            class=\"m-b-8\"\n            [class.has-error]=\"form.controls.temporaryUserSelectedToDate.errors\"\n          >\n            <label\n              [title]=\"'To`date`' | translate\"\n              for=\"temporaryUserSelectedToDate\"\n              translate\n            >\n              To`date`\n            </label>\n            <c8y-date-time-picker\n              [class.has-error]=\"form.controls.temporaryUserSelectedToDate.errors\"\n              id=\"temporaryUserSelectedToDate\"\n              [minDate]=\"form.value.temporaryUserSelectedFromDate ?? ''\"\n              [placeholder]=\"'To`date`' | translate\"\n              [formControl]=\"form.controls.temporaryUserSelectedToDate\"\n            ></c8y-date-time-picker>\n            <c8y-messages [show]=\"form.controls.temporaryUserSelectedToDate.errors ?? {}\">\n              <c8y-message\n                name=\"dateBeforeRangeMin\"\n                [text]=\"'This date is before the earliest allowed date.' | translate\"\n              ></c8y-message>\n              <c8y-message\n                name=\"invalidDateTime\"\n                [text]=\"'This date is invalid.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n        </div>\n\n        <div class=\"p-16 d-flex gap-8 separator-top\">\n          <button\n            class=\"btn btn-primary btn-sm flex-grow\"\n            title=\"{{ 'Apply' | translate }}\"\n            type=\"button\"\n            data-cy=\"events-date-filter--apply-button\"\n            (click)=\"applyDateFilter(); dropDirection.isOpen = false\"\n            [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      }\n    </ul>\n  </div>\n</form>\n" }]
+        }], propDecorators: { defaultInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultInterval", required: false }] }], updateQueryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateQueryParams", required: false }] }], dateFilterChange: [{ type: i0.Output, args: ["dateFilterChange"] }], dropdown: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BsDropdownDirective), { isSignal: true }] }] } });
+
+class EventsIntervalRefreshComponent {
+    constructor() {
+        this.DEFAULT_INTERVAL_VALUES = [5_000, 10_000, 15_000, 30_000, 60_000];
+        this.DEFAULT_INTERVAL_VALUE = 30_000;
+        this.DISABLE_AUTO_REFRESH = gettext('Disable auto refresh');
+        this.ENABLE_AUTO_REFRESH = gettext('Enable auto refresh');
+        this.SECONDS_UNTIL_REFRESH = gettext('{{ seconds }} s');
+        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+        this.isIntervalToggleEnabled = input(true, ...(ngDevMode ? [{ debugName: "isIntervalToggleEnabled" }] : []));
+        this.onCountdownEnded = output();
+        this.countdownIntervalComponent = viewChild(CountdownIntervalComponent, ...(ngDevMode ? [{ debugName: "countdownIntervalComponent" }] : []));
+        this.fb = inject(FormBuilder);
+        this.toggleIntervalForm = this.initForm();
+        this.destroyRef = inject(DestroyRef);
+        this.doesUserCheckedIntervalToggle = false;
+        effect(() => {
+            const externalValue = this.isIntervalToggleEnabled();
+            const intervalEnabledControl = this.toggleIntervalForm.get('intervalEnabled');
+            const shouldUpdate = !intervalEnabledControl.dirty || (this.doesUserCheckedIntervalToggle && externalValue);
+            if (shouldUpdate && intervalEnabledControl.value !== externalValue) {
+                intervalEnabledControl.setValue(externalValue);
+            }
+        });
+        effect(() => {
+            const loading = this.isLoading();
+            untracked(() => {
+                if (loading) {
+                    this.countdownIntervalComponent()?.stop();
+                }
+                else {
+                    this.countdownIntervalComponent()?.reset();
+                }
+            });
+        });
+    }
+    get isToggleEnabled() {
+        return !this.isDisabled() && this.toggleIntervalForm.get('intervalEnabled').value;
+    }
+    ngAfterViewInit() {
+        this.onIntervalToggleChange();
+        this.listenToRefreshIntervalChange();
+    }
+    resetCountdown() {
+        this.countdownIntervalComponent()?.reset();
+    }
+    trackUserClickOnIntervalToggle(target) {
+        this.doesUserCheckedIntervalToggle = target.checked;
+    }
+    getTooltip() {
+        return this.isDisabled()
+            ? gettext('Disabled')
+            : this.isToggleEnabled
+                ? this.DISABLE_AUTO_REFRESH
+                : this.ENABLE_AUTO_REFRESH;
+    }
+    startCountdown() {
+        this.countdownIntervalComponent()?.start();
+    }
+    onIntervalToggleChange() {
+        this.toggleIntervalForm
+            .get('intervalEnabled')
+            .valueChanges.pipe(takeUntilDestroyed(this.destroyRef), filter(Boolean))
+            .subscribe(() => setTimeout(() => this.startCountdown()));
+    }
+    initForm() {
+        return this.fb.group({
+            intervalEnabled: true,
+            refreshInterval: this.DEFAULT_INTERVAL_VALUE
+        });
+    }
+    listenToRefreshIntervalChange() {
+        this.toggleIntervalForm
+            .get('refreshInterval')
+            .valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.resetCountdown());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventsIntervalRefreshComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: EventsIntervalRefreshComponent, isStandalone: true, selector: "c8y-events-interval-refresh", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isIntervalToggleEnabled: { classPropertyName: "isIntervalToggleEnabled", publicName: "isIntervalToggleEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCountdownEnded: "onCountdownEnded" }, viewQueries: [{ propertyName: "countdownIntervalComponent", first: true, predicate: CountdownIntervalComponent, descendants: true, isSignal: 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-events-interval-refresh--toggle-countdown\"\n    >\n      <input\n        type=\"checkbox\"\n        data-cy=\"c8y-events-interval-toggle\"\n        formControlName=\"intervalEnabled\"\n        (click)=\"trackUserClickOnIntervalToggle($event.target)\"\n      />\n      @if (isToggleEnabled) {\n        <c8y-countdown-interval\n          [countdownInterval]=\"toggleIntervalForm.value.refreshInterval ?? DEFAULT_INTERVAL_VALUE\"\n          (countdownEnded)=\"onCountdownEnded.emit()\"\n        />\n      } @else {\n        <i\n          c8yIcon=\"pause\"\n          data-cy=\"c8y-events-interval-refresh--pause\"\n        ></i>\n      }\n    </label>\n    @if (!isDisabled()) {\n      <div class=\"c8y-select-wrapper\">\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-events-interval-refresh--selector\"\n        >\n          @for (refreshInterval of DEFAULT_INTERVAL_VALUES; track refreshInterval) {\n            <option\n              [disabled]=\"isDisabled()\"\n              [ngValue]=\"refreshInterval\"\n              [attr.data-cy]=\"'c8y-interval-' + refreshInterval\"\n            >\n              {{ SECONDS_UNTIL_REFRESH | translate: { seconds: refreshInterval / 1000 } }}\n            </option>\n          }\n        </select>\n        <span></span>\n      </div>\n    }\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() || isLoading()\"\n        (click)=\"onCountdownEnded.emit()\"\n        data-cy=\"c8y-events-interval-refresh--btn\"\n      >\n        <i\n          [class.icon-spin]=\"isLoading()\"\n          c8yIcon=\"refresh\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: CountdownIntervalComponent, selector: "c8y-countdown-interval", inputs: ["countdownInterval", "config"], outputs: ["countdownEnded"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventsIntervalRefreshComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-events-interval-refresh', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TooltipDirective,
+                        CountdownIntervalComponent,
+                        IconDirective,
+                        C8yTranslatePipe
+                    ], 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-events-interval-refresh--toggle-countdown\"\n    >\n      <input\n        type=\"checkbox\"\n        data-cy=\"c8y-events-interval-toggle\"\n        formControlName=\"intervalEnabled\"\n        (click)=\"trackUserClickOnIntervalToggle($event.target)\"\n      />\n      @if (isToggleEnabled) {\n        <c8y-countdown-interval\n          [countdownInterval]=\"toggleIntervalForm.value.refreshInterval ?? DEFAULT_INTERVAL_VALUE\"\n          (countdownEnded)=\"onCountdownEnded.emit()\"\n        />\n      } @else {\n        <i\n          c8yIcon=\"pause\"\n          data-cy=\"c8y-events-interval-refresh--pause\"\n        ></i>\n      }\n    </label>\n    @if (!isDisabled()) {\n      <div class=\"c8y-select-wrapper\">\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-events-interval-refresh--selector\"\n        >\n          @for (refreshInterval of DEFAULT_INTERVAL_VALUES; track refreshInterval) {\n            <option\n              [disabled]=\"isDisabled()\"\n              [ngValue]=\"refreshInterval\"\n              [attr.data-cy]=\"'c8y-interval-' + refreshInterval\"\n            >\n              {{ SECONDS_UNTIL_REFRESH | translate: { seconds: refreshInterval / 1000 } }}\n            </option>\n          }\n        </select>\n        <span></span>\n      </div>\n    }\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() || isLoading()\"\n        (click)=\"onCountdownEnded.emit()\"\n        data-cy=\"c8y-events-interval-refresh--btn\"\n      >\n        <i\n          [class.icon-spin]=\"isLoading()\"\n          c8yIcon=\"refresh\"\n        ></i>\n      </button>\n    </div>\n  </div>\n</form>\n" }]
+        }], ctorParameters: () => [], propDecorators: { isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isIntervalToggleEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isIntervalToggleEnabled", required: false }] }], onCountdownEnded: [{ type: i0.Output, args: ["onCountdownEnded"] }], countdownIntervalComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CountdownIntervalComponent), { isSignal: true }] }] } });
+
+class EventsListComponent {
+    constructor() {
+        this.EMPTY_STATE_TITLE = gettext('No events to display.');
+        this.LIST_TITLE = gettext('Events list');
+        /**
+         * The paginated result list of events to display.
+         */
+        this.events = input(...(ngDevMode ? [undefined, { debugName: "events" }] : []));
+        /**
+         * Whether the events are currently being fetched.
+         */
+        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        /**
+         * Controls the "load more" button behavior at the bottom of the list.
+         */
+        this.loadMoreMode = input('hidden', ...(ngDevMode ? [{ debugName: "loadMoreMode" }] : []));
+        /**
+         * Whether to show a file preview button for image events.
+         */
+        this.showPreview = input(false, ...(ngDevMode ? [{ debugName: "showPreview" }] : []));
+        /**
+         * Defines options for how the events list should navigate when a user clicks on an event.
+         */
+        this.navigationOptions = input({
+            allowNavigationToEventsView: true,
+            alwaysNavigateToAllEvents: false,
+            queryParamsHandling: 'merge'
+        }, ...(ngDevMode ? [{ debugName: "navigationOptions" }] : []));
+        /**
+         * Emits `true` when the list is scrolled past the threshold, `false` when scrolled back.
+         * Used to hide the countdown interval refresh control.
+         */
+        this.onScrollingStateChange = output();
+        /**
+         * Emits `true` when a file preview is opened, `false` when closed.
+         */
+        this.onPreviewStateChange = output();
+        /**
+         * Emits the event that was clicked by the user.
+         */
+        this.onSelectedEvent = output();
+        this.activeEvent = signal(null, ...(ngDevMode ? [{ debugName: "activeEvent" }] : []));
+        this.activeChildParamId = signal(null, ...(ngDevMode ? [{ debugName: "activeChildParamId" }] : []));
+        this.pendingActiveCheck = signal(true, ...(ngDevMode ? [{ debugName: "pendingActiveCheck" }] : []));
+        this.showEmptyState = computed(() => !!this.events() && !this.events()?.data?.length && !this.isLoading(), ...(ngDevMode ? [{ debugName: "showEmptyState" }] : []));
+        this.showFilterWarning = computed(() => !this.pendingActiveCheck() &&
+            !!this.activeChildParamId() &&
+            this.activeEvent()?.id !== this.activeChildParamId(), ...(ngDevMode ? [{ debugName: "showFilterWarning" }] : []));
+        this.svListComponent = viewChild('scrollWrapper', ...(ngDevMode ? [{ debugName: "svListComponent" }] : []));
+        this.isPreviewOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPreviewOpen" }] : []));
+        /** Scroll threshold in pixels after which the countdown interval is hidden. */
+        this.HIDE_INTERVAL_COUNTDOWN_SCROLL = 50;
+        this.activatedRoute = inject(ActivatedRoute);
+        this.bsModalService = inject(BsModalService);
+        this.destroyRef = inject(DestroyRef);
+        this.eventBinaryService = inject(EventBinaryService);
+        this.router = inject(Router);
+        this.setupActiveChildParamTracking();
+        this.setupPreviewModalCloseListener();
+        effect(() => {
+            this.events();
+            untracked(() => {
+                this.activeEvent.set(null);
+                this.pendingActiveCheck.set(true);
+                if (this.activeChildParamId()) {
+                    // Wait for routerLinkActive to confirm the match via activeRouteChanged.
+                    // Fallback clears pending state so warning can show if event is not in the list.
+                    timer(500)
+                        .pipe(takeUntilDestroyed(this.destroyRef))
+                        .subscribe(() => this.pendingActiveCheck.set(false));
+                }
+                else {
+                    this.pendingActiveCheck.set(false);
+                }
+            });
+        });
+    }
+    ngAfterViewInit() {
+        this.setupScrollListener();
+    }
+    onEventClick(event) {
+        this.onSelectedEvent.emit(event);
+    }
+    activeRouteChanged(isActive, scrollAnchor, event) {
+        if (isActive) {
+            scrollAnchor.element.nativeElement.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest'
+            });
+            this.activeEvent.set(event);
+            this.pendingActiveCheck.set(false);
+        }
+    }
+    onPreviewClick(mouseEvent) {
+        mouseEvent.stopPropagation();
+        this.isPreviewOpen.set(true);
+        this.onPreviewStateChange.emit(true);
+    }
+    toBinaryMo(event) {
+        const binaryInfo = event['c8y_IsBinary'];
+        return {
+            id: `${event.id}`,
+            name: binaryInfo?.name ?? event.text,
+            contentType: binaryInfo?.type ?? 'application/octet-stream',
+            type: binaryInfo?.type ?? 'application/octet-stream',
+            length: 0,
+            c8y_IsBinary: {}
+        };
+    }
+    getEventDownloadFn(event) {
+        return () => this.eventBinaryService.download(event);
+    }
+    setupPreviewModalCloseListener() {
+        this.bsModalService.onHidden
+            .pipe(filter(() => this.isPreviewOpen()), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.isPreviewOpen.set(false);
+            this.onPreviewStateChange.emit(false);
+        });
+    }
+    setupActiveChildParamTracking() {
+        this.router.events
+            .pipe(filter(e => e instanceof NavigationEnd && this.activatedRoute.children.length > 0), switchMap(() => this.activatedRoute.children[0].params), map(params => params['id']), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+            .subscribe(id => this.activeChildParamId.set(id ?? null));
+    }
+    setupScrollListener() {
+        const scrollElement = this.svListComponent()?.innerScrollDiv?.nativeElement;
+        if (scrollElement) {
+            fromEvent(scrollElement, 'scroll')
+                .pipe(takeUntilDestroyed(this.destroyRef), debounceTime(300))
+                .subscribe((scrollEvent) => {
+                if (!(scrollEvent.target instanceof HTMLElement)) {
+                    return;
+                }
+                const isScrolledPastThreshold = this.shouldCountdownIntervalBeHidden(scrollEvent.target);
+                this.onScrollingStateChange.emit(isScrolledPastThreshold);
+            });
+        }
+    }
+    shouldCountdownIntervalBeHidden(target) {
+        return target.scrollTop > this.HIDE_INTERVAL_COUNTDOWN_SCROLL;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: EventsListComponent, isStandalone: true, selector: "c8y-events-list", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, loadMoreMode: { classPropertyName: "loadMoreMode", publicName: "loadMoreMode", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, navigationOptions: { classPropertyName: "navigationOptions", publicName: "navigationOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScrollingStateChange: "onScrollingStateChange", onPreviewStateChange: "onPreviewStateChange", onSelectedEvent: "onSelectedEvent" }, viewQueries: [{ propertyName: "svListComponent", first: true, predicate: ["scrollWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<c8y-sv-list\n  [emptyStateIcon]=\"'online1'\"\n  [title]=\"LIST_TITLE | translate\"\n  [emptyStateTitle]=\"EMPTY_STATE_TITLE | translate\"\n  #scrollWrapper\n  [loading]=\"isLoading()\"\n  [showEmptyState]=\"showEmptyState()\"\n  [docsUrl]=\"\n    '/docs/device-management-application/monitoring-and-controlling-devices/#to-view-events'\n  \"\n  data-cy=\"c8y-events-list\"\n>\n  <c8y-sv-header-actions>\n    <ng-content />\n  </c8y-sv-header-actions>\n\n  <c8y-sv-alerts>\n    @if (showFilterWarning()) {\n      <div\n        class=\"alert alert-warning m-b-0\"\n        role=\"alert\"\n        translate\n      >\n        The selected event 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    @let navOpts = navigationOptions();\n    <c8y-li-timeline\n      class=\"pointer c8y-list--timeline__item\"\n      role=\"button\"\n      data-cy=\"c8y-events-list--timeline-item\"\n      *c8yFor=\"let event of events()!; loadMore: loadMoreMode()\"\n      [routerLink]=\"\n        navOpts.allowNavigationToEventsView\n          ? (event | eventRouterLink: navOpts.alwaysNavigateToAllEvents)\n          : null\n      \"\n      [queryParamsHandling]=\"navOpts.queryParamsHandling\"\n      routerLinkActive=\"active\"\n      (isActiveChange)=\"activeRouteChanged($event, liScrollAnchor, event)\"\n      (click)=\"onEventClick(event)\"\n    >\n      <!-- Date column -->\n      <span data-cy=\"c8y-events-list--event-date\">\n        {{ event.time | c8yDate: 'mediumDate' }}\n        {{ event.time | c8yDate: 'mediumTime' }}\n      </span>\n\n      <c8y-li\n        style=\"scroll-margin-top: 56px\"\n        #liScrollAnchor\n      >\n        <c8y-li-icon class=\"a-s-start\">\n          <i [c8yIcon]=\"event | eventIcon\"></i>\n        </c8y-li-icon>\n\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              <!-- Event column (text) -->\n              <p\n                class=\"text-truncate-wrap p-b-4\"\n                data-cy=\"c8y-events-list--event-text\"\n              >\n                {{ event.text | translate }}\n              </p>\n\n              <!-- Source column -->\n              <p\n                class=\"small text-muted text-truncate\"\n                [title]=\"event.source?.name\"\n                data-cy=\"c8y-events-list--event-source\"\n              >\n                <i [c8yIcon]=\"'exchange'\"></i>\n                {{ event.source?.name }}\n              </p>\n            </div>\n            @if (showPreview() && (event | eventIsImage)) {\n              <c8y-file-preview\n                data-cy=\"c8y-events-list--image-preview\"\n                (click)=\"onPreviewClick($event)\"\n                [mo]=\"toBinaryMo(event)\"\n                [downloadFn]=\"getEventDownloadFn(event)\"\n              >\n                <button\n                  class=\"btn btn-default btn-icon btn-xs\"\n                  [title]=\"'Preview' | translate\"\n                  type=\"button\"\n                  customButton\n                  data-cy=\"c8y-events-list--preview-btn\"\n                >\n                  <i c8yIcon=\"search\"></i>\n                </button>\n              </c8y-file-preview>\n            }\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n  </c8y-list-group>\n</c8y-sv-list>\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: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { 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: ListItemTimelineComponent, selector: "c8y-list-item-timeline, c8y-li-timeline" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: FilePreviewModule }, { kind: "component", type: i1$2.FilePreviewComponent, selector: "c8y-file-preview", inputs: ["mo", "downloadFn"] }, { kind: "component", type: SplitViewAlertsComponent, selector: "c8y-sv-alerts" }, { kind: "component", type: SplitViewHeaderActionsComponent, selector: "c8y-sv-header-actions" }, { kind: "component", type: SplitViewListComponent, selector: "c8y-sv-list", inputs: ["title", "loading", "showEmptyState", "emptyStateIcon", "emptyStateTitle", "emptyStateSubtitle", "docsUrl", "showTitle", "listOpacity"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: EventIconPipe, name: "eventIcon" }, { kind: "pipe", type: EventIsImagePipe, name: "eventIsImage" }, { kind: "pipe", type: EventRouterLinkPipe, name: "eventRouterLink" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventsListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-events-list', imports: [
+                        C8yTranslateDirective,
+                        C8yTranslatePipe,
+                        DatePipe,
+                        EventIconPipe,
+                        EventIsImagePipe,
+                        EventRouterLinkPipe,
+                        ForOfDirective,
+                        IconDirective,
+                        ListGroupComponent,
+                        ListItemBodyComponent,
+                        ListItemComponent,
+                        ListItemIconComponent,
+                        ListItemTimelineComponent,
+                        RouterLink,
+                        RouterLinkActive,
+                        FilePreviewModule,
+                        SplitViewAlertsComponent,
+                        SplitViewHeaderActionsComponent,
+                        SplitViewListComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<c8y-sv-list\n  [emptyStateIcon]=\"'online1'\"\n  [title]=\"LIST_TITLE | translate\"\n  [emptyStateTitle]=\"EMPTY_STATE_TITLE | translate\"\n  #scrollWrapper\n  [loading]=\"isLoading()\"\n  [showEmptyState]=\"showEmptyState()\"\n  [docsUrl]=\"\n    '/docs/device-management-application/monitoring-and-controlling-devices/#to-view-events'\n  \"\n  data-cy=\"c8y-events-list\"\n>\n  <c8y-sv-header-actions>\n    <ng-content />\n  </c8y-sv-header-actions>\n\n  <c8y-sv-alerts>\n    @if (showFilterWarning()) {\n      <div\n        class=\"alert alert-warning m-b-0\"\n        role=\"alert\"\n        translate\n      >\n        The selected event 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    @let navOpts = navigationOptions();\n    <c8y-li-timeline\n      class=\"pointer c8y-list--timeline__item\"\n      role=\"button\"\n      data-cy=\"c8y-events-list--timeline-item\"\n      *c8yFor=\"let event of events()!; loadMore: loadMoreMode()\"\n      [routerLink]=\"\n        navOpts.allowNavigationToEventsView\n          ? (event | eventRouterLink: navOpts.alwaysNavigateToAllEvents)\n          : null\n      \"\n      [queryParamsHandling]=\"navOpts.queryParamsHandling\"\n      routerLinkActive=\"active\"\n      (isActiveChange)=\"activeRouteChanged($event, liScrollAnchor, event)\"\n      (click)=\"onEventClick(event)\"\n    >\n      <!-- Date column -->\n      <span data-cy=\"c8y-events-list--event-date\">\n        {{ event.time | c8yDate: 'mediumDate' }}\n        {{ event.time | c8yDate: 'mediumTime' }}\n      </span>\n\n      <c8y-li\n        style=\"scroll-margin-top: 56px\"\n        #liScrollAnchor\n      >\n        <c8y-li-icon class=\"a-s-start\">\n          <i [c8yIcon]=\"event | eventIcon\"></i>\n        </c8y-li-icon>\n\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              <!-- Event column (text) -->\n              <p\n                class=\"text-truncate-wrap p-b-4\"\n                data-cy=\"c8y-events-list--event-text\"\n              >\n                {{ event.text | translate }}\n              </p>\n\n              <!-- Source column -->\n              <p\n                class=\"small text-muted text-truncate\"\n                [title]=\"event.source?.name\"\n                data-cy=\"c8y-events-list--event-source\"\n              >\n                <i [c8yIcon]=\"'exchange'\"></i>\n                {{ event.source?.name }}\n              </p>\n            </div>\n            @if (showPreview() && (event | eventIsImage)) {\n              <c8y-file-preview\n                data-cy=\"c8y-events-list--image-preview\"\n                (click)=\"onPreviewClick($event)\"\n                [mo]=\"toBinaryMo(event)\"\n                [downloadFn]=\"getEventDownloadFn(event)\"\n              >\n                <button\n                  class=\"btn btn-default btn-icon btn-xs\"\n                  [title]=\"'Preview' | translate\"\n                  type=\"button\"\n                  customButton\n                  data-cy=\"c8y-events-list--preview-btn\"\n                >\n                  <i c8yIcon=\"search\"></i>\n                </button>\n              </c8y-file-preview>\n            }\n          </div>\n        </c8y-li-body>\n      </c8y-li>\n    </c8y-li-timeline>\n  </c8y-list-group>\n</c8y-sv-list>\n" }]
+        }], ctorParameters: () => [], propDecorators: { events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], loadMoreMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreMode", required: false }] }], showPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreview", required: false }] }], navigationOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationOptions", required: false }] }], onScrollingStateChange: [{ type: i0.Output, args: ["onScrollingStateChange"] }], onPreviewStateChange: [{ type: i0.Output, args: ["onPreviewStateChange"] }], onSelectedEvent: [{ type: i0.Output, args: ["onSelectedEvent"] }], svListComponent: [{ type: i0.ViewChild, args: ['scrollWrapper', { isSignal: true }] }] } });
+
+class EventsTypeFilterComponent {
+    constructor() {
+        /** The latest page of events used to derive available filter types. */
+        this.events = input(...(ngDevMode ? [undefined, { debugName: "events" }] : []));
+        /** Emits the selected {@link EventDetails} when the active filter changes, or `null` when cleared. */
+        this.onFilterChanged = output();
+        this.possibleFilters = signal([], ...(ngDevMode ? [{ debugName: "possibleFilters" }] : []));
+        this.activeFilter = signal(null, ...(ngDevMode ? [{ debugName: "activeFilter" }] : []));
+        this.customEventTypeInput = signal('', ...(ngDevMode ? [{ debugName: "customEventTypeInput" }] : []));
+        this.isCustomEventTypeInputInvalid = computed(() => !this.customEventTypeInput().trim(), ...(ngDevMode ? [{ debugName: "isCustomEventTypeInputInvalid" }] : []));
+        this.queryParamName = 'eventTypeFilter';
+        /**
+         * localStorage key storing user-added custom event types.
+         * Schema: `EventDetails[]` serialised as JSON (only entries where `__target === null`).
+         */
+        this.STORAGE_ACCESS_KEY = 'customEventTypes';
+        this.activatedRoute = inject(ActivatedRoute);
+        this.alarmEventSelectorService = inject(AlarmEventSelectorService);
+        this.colorService = inject(ColorService);
+        this.destroyRef = inject(DestroyRef);
+        this.router = inject(Router);
+        this.currentQueryParam = '';
+        effect(() => {
+            const eventsResult = this.events();
+            if (eventsResult) {
+                untracked(() => {
+                    if (!this.activeFilter()) {
+                        this.setPossibleFilters()
+                            .then(() => this.applyFilterChange())
+                            // eslint-disable-next-line no-console
+                            .catch(err => console.error('[EventsTypeFilter] Failed to load filters', err));
+                    }
+                });
+            }
+        });
+    }
+    ngOnInit() {
+        this.setQueryParameterObservable();
+    }
+    setQueryParameterObservable() {
+        this.activatedRoute.queryParams
+            .pipe(map(params => {
+            const events = this.possibleFilters();
+            const possibleFilters = this.setActiveEventFiltersFromQueryParameter(events, params[this.queryParamName]);
+            return possibleFilters;
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe((possibleFilters) => {
+            this.possibleFilters.set(possibleFilters);
+            this.applyFilterChange();
+        });
+    }
+    selectEventType(eventType) {
+        this.possibleFilters.update(filters => filters.map(f => ({ ...f, __active: f.filters.type === eventType.filters.type })));
+    }
+    /** Selects an event type, applies the filter, and closes the dropdown in one action. */
+    selectAndClose(eventType, dropdown) {
+        this.selectEventType(eventType);
+        this.applyFilterChange();
+        dropdown.hide();
+    }
+    deselect() {
+        this.possibleFilters.update(filters => filters.map(f => ({ ...f, __active: false })));
+        this.applyFilterChange();
+    }
+    applyFilterChange() {
+        const active = this.possibleFilters().find((eventFilter) => eventFilter.__active);
+        const newQueryParam = active?.filters.type ?? '';
+        const hasChanged = newQueryParam !== this.currentQueryParam;
+        if (hasChanged) {
+            this.activeFilter.set(active ?? null);
+            this.onFilterChanged.emit(this.activeFilter());
+            this.router.navigate([], {
+                queryParams: {
+                    [this.queryParamName]: newQueryParam || null
+                },
+                queryParamsHandling: 'merge'
+            });
+            this.currentQueryParam = newQueryParam;
+        }
+    }
+    restoreActiveFilter() {
+        const activeType = this.activeFilter()?.filters.type;
+        this.possibleFilters.update(filters => filters.map(f => ({ ...f, __active: f.filters.type === activeType })));
+    }
+    removeCustomEvent(eventDetails) {
+        const wasActive = eventDetails.filters.type === this.activeFilter()?.filters.type;
+        this.possibleFilters.update(filters => filters.filter(f => f.filters.type !== eventDetails.filters.type));
+        this.storeCustomEventTypes();
+        if (wasActive) {
+            this.applyFilterChange();
+        }
+    }
+    navigateOption(event, step) {
+        event.preventDefault();
+        const items = this.optionItems.toArray();
+        const focused = document.activeElement;
+        const currentIndex = items.findIndex(item => item.nativeElement === focused);
+        const nextIndex = (currentIndex + step + items.length) % items.length;
+        items[nextIndex]?.nativeElement.focus();
+    }
+    confirmWithEnter(event) {
+        if (event.key === 'Enter') {
+            this.addCustomEventType();
+        }
+    }
+    async addCustomEventType() {
+        const inputValue = this.customEventTypeInput().trim();
+        if (!inputValue) {
+            return;
+        }
+        let color;
+        try {
+            color = await this.colorService.generateColor(inputValue);
+        }
+        catch {
+            color = '#000000';
+        }
+        const newFilter = {
+            label: inputValue,
+            color,
+            filters: { type: inputValue },
+            timelineType: 'EVENT',
+            __active: true,
+            __target: null
+        };
+        this.possibleFilters.update(filters => [
+            newFilter,
+            ...filters.map(f => ({ ...f, __active: false }))
+        ]);
+        this.customEventTypeInput.set('');
+        this.storeCustomEventTypes();
+        this.applyFilterChange();
+    }
+    storeCustomEventTypes() {
+        try {
+            const customTypes = this.possibleFilters().filter((filter) => !filter.__target);
+            window.localStorage.setItem(this.STORAGE_ACCESS_KEY, JSON.stringify(customTypes));
+        }
+        catch {
+            // localStorage may be unavailable or quota exceeded — skip persistence silently
+        }
+    }
+    getCustomEventTypeFromStorage() {
+        try {
+            const types = window.localStorage.getItem(this.STORAGE_ACCESS_KEY);
+            return types ? JSON.parse(types) : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    async setPossibleFilters() {
+        const queryParameters = this.activatedRoute.snapshot.queryParamMap.get(this.queryParamName);
+        const eventsData = this.events()?.data ?? [];
+        const eventTypesFromCurrentlyShownEvents = await this.alarmEventSelectorService.getUniqueEventsOnly(eventsData);
+        const customEventTypesFromLocalStorage = this.getCustomEventTypeFromStorage();
+        const selectableEventTypes = this.setActiveEventFiltersFromQueryParameter([...customEventTypesFromLocalStorage, ...eventTypesFromCurrentlyShownEvents], queryParameters);
+        this.possibleFilters.set(selectableEventTypes);
+    }
+    setActiveEventFiltersFromQueryParameter(eventFilters, filterTypeQuery = '') {
+        const selectedType = filterTypeQuery ?? '';
+        return eventFilters.map((event) => ({
+            ...event,
+            __active: event.filters.type === selectedType
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventsTypeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: EventsTypeFilterComponent, isStandalone: true, selector: "c8y-events-type-filter", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFilterChanged: "onFilterChanged" }, viewQueries: [{ propertyName: "optionItems", predicate: ["optionItem"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"d-flex a-i-center\">\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by event types' | translate }}\"\n    dropdown\n    [insideClick]=\"true\"\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    (onHidden)=\"restoreActiveFilter()\"\n  >\n    <div class=\"input-group fit-w\">\n      @let active = activeFilter();\n      <div\n        class=\"form-control d-flex a-i-center inner-scroll\"\n        role=\"status\"\n      >\n        @if (active) {\n          <span\n            class=\"text-truncate\"\n            style=\"max-width: 150px !important\"\n            [title]=\"active.filters.type\"\n          >\n            {{ active.filters.type }}\n          </span>\n        } @else {\n          <span class=\"text-nowrap\">\n            {{ 'All event types' | translate }}\n          </span>\n        }\n      </div>\n      @if (active) {\n        <div class=\"input-group-btn text-center\">\n          <button\n            class=\"btn-default btn\"\n            [title]=\"'Clear filter' | translate\"\n            [attr.aria-label]=\"'Clear filter' | translate\"\n            (click)=\"deselect()\"\n          >\n            <i\n              c8yIcon=\"times\"\n              aria-hidden=\"true\"\n            ></i>\n          </button>\n        </div>\n      }\n      <div class=\"input-group-btn input-group-btn--last\">\n        <button\n          class=\"btn-default m-l-0 btn btn--caret\"\n          [attr.aria-label]=\"'Event types' | translate\"\n          [attr.aria-haspopup]=\"'listbox'\"\n          [attr.aria-expanded]=\"filtersDropdown.isOpen\"\n          [attr.aria-controls]=\"'event-types-listbox'\"\n          data-cy=\"c8y-event-type-filter\"\n          dropdownToggle\n        >\n          <i\n            class=\"caret\"\n            aria-hidden=\"true\"\n          ></i>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <div\n        class=\"p-16 bg-level-2\"\n        style=\"min-width: 250px\"\n      >\n        <div>\n          <p class=\"icon-flex\">\n            <i\n              class=\"text-info m-r-4\"\n              [c8yIcon]=\"'info-circle'\"\n              aria-hidden=\"true\"\n            ></i>\n            <strong translate>The list may be incomplete</strong>\n          </p>\n          <p class=\"text-12\">\n            <span translate>\n              Recent events are displayed below, but older ones may not be shown.\n            </span>\n            <span translate>Optionally, you can add a custom event type.</span>\n          </p>\n        </div>\n      </div>\n      <div class=\"input-group p-16 separator-bottom\">\n        <input\n          class=\"form-control\"\n          [attr.aria-label]=\"'Custom event type' | translate\"\n          type=\"text\"\n          [placeholder]=\"'Custom event type' | translate\"\n          [ngModel]=\"customEventTypeInput()\"\n          (ngModelChange)=\"customEventTypeInput.set($event)\"\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 event' | translate\"\n            [tooltip]=\"'Add' | translate\"\n            placement=\"top\"\n            [delay]=\"500\"\n            [disabled]=\"isCustomEventTypeInputInvalid()\"\n            (click)=\"addCustomEventType()\"\n          >\n            <i\n              c8yIcon=\"plus-circle\"\n              aria-hidden=\"true\"\n            ></i>\n          </button>\n        </div>\n      </div>\n      <c8y-list-group\n        [attr.aria-label]=\"'Event types' | translate\"\n        id=\"event-types-listbox\"\n        role=\"listbox\"\n      >\n        @for (eventType of possibleFilters(); track eventType.filters.type) {\n          <c8y-li\n            class=\"pointer p-0\"\n            tabindex=\"0\"\n            [attr.aria-selected]=\"eventType.__active\"\n            role=\"option\"\n            [active]=\"eventType.__active\"\n            #optionItem\n            (keydown.arrowdown)=\"navigateOption($event, 1)\"\n            (keydown.arrowup)=\"navigateOption($event, -1)\"\n            (keydown.enter)=\"selectAndClose(eventType, filtersDropdown)\"\n            (click)=\"selectAndClose(eventType, filtersDropdown)\"\n          >\n            <div class=\"d-flex gap-8 a-i-center flex-grow p-t-4 p-b-4\">\n              <span\n                class=\"circle-icon-wrapper\"\n                [style.background-color]=\"eventType.color\"\n              >\n                <i\n                  class=\"stroked-icon\"\n                  [c8yIcon]=\"'online1'\"\n                  aria-hidden=\"true\"\n                ></i>\n              </span>\n              <span\n                class=\"text-truncate text-12 flex-grow\"\n                [title]=\"eventType.label\"\n                [attr.aria-label]=\"eventType.label\"\n              >\n                {{ eventType.label }}\n              </span>\n              @if (eventType.__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)=\"removeCustomEvent(eventType); $event.stopPropagation()\"\n                >\n                  <i\n                    c8yIcon=\"minus-circle\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </button>\n              }\n            </div>\n          </c8y-li>\n        }\n        @if (possibleFilters().length === 0) {\n          <c8y-li aria-live=\"polite\">\n            <c8y-ui-empty-state\n              class=\"p-t-8\"\n              icon=\"online1\"\n              [title]=\"'No events found' | translate\"\n              [subtitle]=\"\n                'There are no events to filter. You can still add a custom event type.' | translate\n              \"\n              [horizontal]=\"true\"\n            />\n          </c8y-li>\n        }\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: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: 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.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventsTypeFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-events-type-filter', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        BsDropdownDirective,
+                        BsDropdownToggleDirective,
+                        BsDropdownMenuDirective,
+                        CdkTrapFocus,
+                        IconDirective,
+                        ListGroupComponent,
+                        ListItemComponent,
+                        FormsModule,
+                        TooltipDirective,
+                        EmptyStateComponent,
+                        C8yTranslateDirective,
+                        C8yTranslatePipe
+                    ], template: "<div class=\"d-flex a-i-center\">\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by event types' | translate }}\"\n    dropdown\n    [insideClick]=\"true\"\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    (onHidden)=\"restoreActiveFilter()\"\n  >\n    <div class=\"input-group fit-w\">\n      @let active = activeFilter();\n      <div\n        class=\"form-control d-flex a-i-center inner-scroll\"\n        role=\"status\"\n      >\n        @if (active) {\n          <span\n            class=\"text-truncate\"\n            style=\"max-width: 150px !important\"\n            [title]=\"active.filters.type\"\n          >\n            {{ active.filters.type }}\n          </span>\n        } @else {\n          <span class=\"text-nowrap\">\n            {{ 'All event types' | translate }}\n          </span>\n        }\n      </div>\n      @if (active) {\n        <div class=\"input-group-btn text-center\">\n          <button\n            class=\"btn-default btn\"\n            [title]=\"'Clear filter' | translate\"\n            [attr.aria-label]=\"'Clear filter' | translate\"\n            (click)=\"deselect()\"\n          >\n            <i\n              c8yIcon=\"times\"\n              aria-hidden=\"true\"\n            ></i>\n          </button>\n        </div>\n      }\n      <div class=\"input-group-btn input-group-btn--last\">\n        <button\n          class=\"btn-default m-l-0 btn btn--caret\"\n          [attr.aria-label]=\"'Event types' | translate\"\n          [attr.aria-haspopup]=\"'listbox'\"\n          [attr.aria-expanded]=\"filtersDropdown.isOpen\"\n          [attr.aria-controls]=\"'event-types-listbox'\"\n          data-cy=\"c8y-event-type-filter\"\n          dropdownToggle\n        >\n          <i\n            class=\"caret\"\n            aria-hidden=\"true\"\n          ></i>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <div\n        class=\"p-16 bg-level-2\"\n        style=\"min-width: 250px\"\n      >\n        <div>\n          <p class=\"icon-flex\">\n            <i\n              class=\"text-info m-r-4\"\n              [c8yIcon]=\"'info-circle'\"\n              aria-hidden=\"true\"\n            ></i>\n            <strong translate>The list may be incomplete</strong>\n          </p>\n          <p class=\"text-12\">\n            <span translate>\n              Recent events are displayed below, but older ones may not be shown.\n            </span>\n            <span translate>Optionally, you can add a custom event type.</span>\n          </p>\n        </div>\n      </div>\n      <div class=\"input-group p-16 separator-bottom\">\n        <input\n          class=\"form-control\"\n          [attr.aria-label]=\"'Custom event type' | translate\"\n          type=\"text\"\n          [placeholder]=\"'Custom event type' | translate\"\n          [ngModel]=\"customEventTypeInput()\"\n          (ngModelChange)=\"customEventTypeInput.set($event)\"\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 event' | translate\"\n            [tooltip]=\"'Add' | translate\"\n            placement=\"top\"\n            [delay]=\"500\"\n            [disabled]=\"isCustomEventTypeInputInvalid()\"\n            (click)=\"addCustomEventType()\"\n          >\n            <i\n              c8yIcon=\"plus-circle\"\n              aria-hidden=\"true\"\n            ></i>\n          </button>\n        </div>\n      </div>\n      <c8y-list-group\n        [attr.aria-label]=\"'Event types' | translate\"\n        id=\"event-types-listbox\"\n        role=\"listbox\"\n      >\n        @for (eventType of possibleFilters(); track eventType.filters.type) {\n          <c8y-li\n            class=\"pointer p-0\"\n            tabindex=\"0\"\n            [attr.aria-selected]=\"eventType.__active\"\n            role=\"option\"\n            [active]=\"eventType.__active\"\n            #optionItem\n            (keydown.arrowdown)=\"navigateOption($event, 1)\"\n            (keydown.arrowup)=\"navigateOption($event, -1)\"\n            (keydown.enter)=\"selectAndClose(eventType, filtersDropdown)\"\n            (click)=\"selectAndClose(eventType, filtersDropdown)\"\n          >\n            <div class=\"d-flex gap-8 a-i-center flex-grow p-t-4 p-b-4\">\n              <span\n                class=\"circle-icon-wrapper\"\n                [style.background-color]=\"eventType.color\"\n              >\n                <i\n                  class=\"stroked-icon\"\n                  [c8yIcon]=\"'online1'\"\n                  aria-hidden=\"true\"\n                ></i>\n              </span>\n              <span\n                class=\"text-truncate text-12 flex-grow\"\n                [title]=\"eventType.label\"\n                [attr.aria-label]=\"eventType.label\"\n              >\n                {{ eventType.label }}\n              </span>\n              @if (eventType.__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)=\"removeCustomEvent(eventType); $event.stopPropagation()\"\n                >\n                  <i\n                    c8yIcon=\"minus-circle\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </button>\n              }\n            </div>\n          </c8y-li>\n        }\n        @if (possibleFilters().length === 0) {\n          <c8y-li aria-live=\"polite\">\n            <c8y-ui-empty-state\n              class=\"p-t-8\"\n              icon=\"online1\"\n              [title]=\"'No events found' | translate\"\n              [subtitle]=\"\n                'There are no events to filter. You can still add a custom event type.' | translate\n              \"\n              [horizontal]=\"true\"\n            />\n          </c8y-li>\n        }\n      </c8y-list-group>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { optionItems: [{
+                type: ViewChildren,
+                args: ['optionItem', { read: ElementRef }]
+            }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], onFilterChanged: [{ type: i0.Output, args: ["onFilterChanged"] }] } });
+
+class EventsComponent {
+    constructor() {
+        this.TITLE = gettext('Events');
+        this.events = signal(null, ...(ngDevMode ? [{ debugName: "events" }] : []));
+        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.shouldShowIntervalToggle = signal(true, ...(ngDevMode ? [{ debugName: "shouldShowIntervalToggle" }] : []));
+        this.contextSourceId = null;
+        this.isListScrolled = signal(false, ...(ngDevMode ? [{ debugName: "isListScrolled" }] : []));
+        this.typeFilter = null;
+        this.dateFilter = null;
+        this.dateInterval = null;
+        this.activatedRoute = inject(ActivatedRoute);
+        this.alertService = inject(AlertService);
+        this.contextRouteService = inject(ContextRouteService);
+        this.destroyRef = inject(DestroyRef);
+        this.eventsViewService = inject(EventsViewService);
+        this.initializeContextSourceId();
+    }
+    ngOnInit() {
+        this.setupEventListReload();
+        // Pause interval if already in detail view
+        const isInDetailView = !!this.activatedRoute.children[0]?.snapshot.params['id'];
+        if (isInDetailView) {
+            this.changeInterval(false);
+        }
+        // Initial load
+        this.eventsViewService.updateEventsList();
+    }
+    refresh() {
+        this.eventsViewService.updateEventsList();
+    }
+    changeInterval(value = true) {
+        this.shouldShowIntervalToggle.set(value);
+    }
+    onScrollingStateChange(isScrolling) {
+        this.isListScrolled.set(isScrolling);
+        this.changeInterval(!isScrolling);
+    }
+    onPreviewStateChange(isOpen) {
+        if (isOpen || !this.isListScrolled()) {
+            this.changeInterval(!isOpen);
+        }
+    }
+    onEventSelected() {
+        this.changeInterval(false);
+    }
+    applyTypeFilter(filter) {
+        this.typeFilter = filter;
+        this.refresh();
+    }
+    applyDateFilter(filter) {
+        this.dateInterval = filter.interval ?? null;
+        this.dateFilter = filter.selectedDates ?? null;
+        this.refresh();
+    }
+    setupEventListReload() {
+        this.eventsViewService.reloadEventsList$
+            .pipe(debounceTime(100), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.loadEvents());
+    }
+    async loadEvents() {
+        try {
+            this.isLoading.set(true);
+            const filter = this.eventsViewService.buildEventsFilter({
+                source: this.contextSourceId,
+                type: this.typeFilter?.filters.type ?? null,
+                dateRange: this.resolveCurrentDateRange()
+            });
+            const events = await this.eventsViewService.retrieveEvents(filter);
+            this.events.set(events);
+        }
+        catch (error) {
+            this.alertService.addServerFailure(error);
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    resolveCurrentDateRange() {
+        if (!this.dateInterval || this.dateInterval === 'none') {
+            return null;
+        }
+        if (this.dateInterval === 'custom') {
+            return this.dateFilter;
+        }
+        return this.eventsViewService.getDateTimeContextByInterval(this.dateInterval);
+    }
+    initializeContextSourceId() {
+        const routeContext = this.contextRouteService.getContextData(this.activatedRoute);
+        if (!routeContext) {
+            return;
+        }
+        const { context, contextData } = routeContext;
+        if ([ViewContext.Device, ViewContext.Group].includes(context)) {
+            this.contextSourceId = contextData?.id;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: EventsComponent, isStandalone: true, selector: "c8y-events", ngImport: i0, template: "<c8y-title>{{ TITLE | translate }}</c8y-title>\n<c8y-help\n  src=\"/docs/device-management-application/monitoring-and-controlling-devices/#troubleshooting-devices\"\n></c8y-help>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-events-type-filter\n    [events]=\"events()\"\n    (onFilterChanged)=\"applyTypeFilter($event)\"\n  />\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-events-date-filter (dateFilterChange)=\"applyDateFilter($event)\" />\n</c8y-action-bar-item>\n\n<c8y-sv [resizableConfig]=\"{ trackId: 'events-split-view', collapsible: false }\">\n  <c8y-events-list\n    [events]=\"events()\"\n    [isLoading]=\"isLoading()\"\n    (onScrollingStateChange)=\"onScrollingStateChange($event)\"\n    (onPreviewStateChange)=\"onPreviewStateChange($event)\"\n    (onSelectedEvent)=\"onEventSelected()\"\n  >\n    <c8y-events-interval-refresh\n      [isLoading]=\"isLoading()\"\n      [isIntervalToggleEnabled]=\"shouldShowIntervalToggle()\"\n      (onCountdownEnded)=\"refresh()\"\n    />\n  </c8y-events-list>\n\n  <c8y-sv-details\n    emptyStateIcon=\"online1\"\n    [emptyStateTitle]=\"'No event selected' | translate\"\n    [emptyStateSubtitle]=\"'Select an event from the list to view its details.' | translate\"\n  >\n    <router-outlet />\n  </c8y-sv-details>\n</c8y-sv>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: SplitViewComponent, selector: "c8y-sv", inputs: ["showDefaultRouterOutlet", "isResizable", "initialSelection", "resizableBreakpoint", "resizableConfig"], outputs: ["selectionChange"] }, { kind: "component", type: SplitViewDetailsComponent, selector: "c8y-sv-details", inputs: ["title", "ariaLabel", "cssClass", "emptyStateIcon", "emptyStateTitle", "emptyStateSubtitle"], outputs: ["backClick"] }, { kind: "component", type: EventsListComponent, selector: "c8y-events-list", inputs: ["events", "isLoading", "loadMoreMode", "showPreview", "navigationOptions"], outputs: ["onScrollingStateChange", "onPreviewStateChange", "onSelectedEvent"] }, { kind: "component", type: EventsDateFilterComponent, selector: "c8y-events-date-filter", inputs: ["defaultInterval", "updateQueryParams"], outputs: ["dateFilterChange"] }, { kind: "component", type: EventsIntervalRefreshComponent, selector: "c8y-events-interval-refresh", inputs: ["isLoading", "isDisabled", "isIntervalToggleEnabled"], outputs: ["onCountdownEnded"] }, { kind: "component", type: EventsTypeFilterComponent, selector: "c8y-events-type-filter", inputs: ["events"], outputs: ["onFilterChanged"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EventsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-events', imports: [
+                        C8yTranslatePipe,
+                        TitleComponent,
+                        HelpComponent,
+                        ActionBarItemComponent,
+                        SplitViewComponent,
+                        SplitViewDetailsComponent,
+                        EventsListComponent,
+                        EventsDateFilterComponent,
+                        EventsIntervalRefreshComponent,
+                        EventsTypeFilterComponent,
+                        RouterOutlet
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<c8y-title>{{ TITLE | translate }}</c8y-title>\n<c8y-help\n  src=\"/docs/device-management-application/monitoring-and-controlling-devices/#troubleshooting-devices\"\n></c8y-help>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-events-type-filter\n    [events]=\"events()\"\n    (onFilterChanged)=\"applyTypeFilter($event)\"\n  />\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-events-date-filter (dateFilterChange)=\"applyDateFilter($event)\" />\n</c8y-action-bar-item>\n\n<c8y-sv [resizableConfig]=\"{ trackId: 'events-split-view', collapsible: false }\">\n  <c8y-events-list\n    [events]=\"events()\"\n    [isLoading]=\"isLoading()\"\n    (onScrollingStateChange)=\"onScrollingStateChange($event)\"\n    (onPreviewStateChange)=\"onPreviewStateChange($event)\"\n    (onSelectedEvent)=\"onEventSelected()\"\n  >\n    <c8y-events-interval-refresh\n      [isLoading]=\"isLoading()\"\n      [isIntervalToggleEnabled]=\"shouldShowIntervalToggle()\"\n      (onCountdownEnded)=\"refresh()\"\n    />\n  </c8y-events-list>\n\n  <c8y-sv-details\n    emptyStateIcon=\"online1\"\n    [emptyStateTitle]=\"'No event selected' | translate\"\n    [emptyStateSubtitle]=\"'Select an event from the list to view its details.' | translate\"\n  >\n    <router-outlet />\n  </c8y-sv-details>\n</c8y-sv>\n" }]
+        }], ctorParameters: () => [] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { EVENT_RESERVED_KEYS, EVENT_STANDARD_KEYS, EventsService };
+export { EVENTS_PATH, EVENT_RESERVED_KEYS, EVENT_STANDARD_KEYS, EventDetailsComponent, EventIconPipe, EventIsImagePipe, EventRouterLinkPipe, EventsComponent, EventsDateFilterComponent, EventsIntervalRefreshComponent, EventsListComponent, EventsService, EventsTypeFilterComponent, EventsViewService, INTERVALS_EXTENDED, INTERVAL_TITLES_EXTENDED };
 //# sourceMappingURL=c8y-ngx-components-events.mjs.map