@c8y/ngx-components 1021.31.4 → 1021.34.2

package/esm2022/widgets/definitions/index.mjs

@@ -1,5 +1,6 @@
 export const defaultWidgetIds = {
     APPLICATIONS: 'Applications',
+    ASSET_NOTES: 'Asset Notes',
     LEGACY_COCKPIT_WELCOME: 'Cockpit Welcome',
     COCKPIT_WELCOME: 'cockpit.welcome.widget',
     DATA_POINTS_TABLE: 'Data points table',
@@ -18,4 +19,4 @@ export const defaultWidgetIds = {
     LINEAR_GAUGE: 'KPI Linear Gauge',
     SILO: 'KPI Silo'
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi93aWRnZXRzL2RlZmluaXRpb25zL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBQyxNQUFNLGdCQUFnQixHQUFHO0lBQzlCLFlBQVksRUFBRSxjQUFjO0lBQzVCLHNCQUFzQixFQUFFLGlCQUFpQjtJQUN6QyxlQUFlLEVBQUUsd0JBQXdCO0lBQ3pDLGlCQUFpQixFQUFFLG1CQUFtQjtJQUN0Qyx5QkFBeUIsRUFBRSxpQ0FBaUM7SUFDNUQsS0FBSyxFQUFFLE9BQU87SUFDZCxHQUFHLEVBQUUsWUFBWTtJQUNqQixRQUFRLEVBQUUsVUFBVTtJQUNwQixnQkFBZ0IsRUFBRSxnQkFBZ0I7SUFDbEMsZ0JBQWdCLEVBQUUsWUFBWTtJQUM5QixHQUFHLEVBQUUsS0FBSztJQUNWLDZCQUE2QixFQUFFLDRCQUE0QjtJQUMzRCxVQUFVLEVBQUUsV0FBVztJQUN2QixVQUFVLEVBQUUsWUFBWTtJQUN4QixtQkFBbUIsRUFBRSxjQUFjO0lBQ25DLGFBQWEsRUFBRSxlQUFlO0lBQzlCLFlBQVksRUFBRSxrQkFBa0I7SUFDaEMsSUFBSSxFQUFFLFVBQVU7Q0FDUixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNvbnN0IGRlZmF1bHRXaWRnZXRJZHMgPSB7XG4gIEFQUExJQ0FUSU9OUzogJ0FwcGxpY2F0aW9ucycsXG4gIExFR0FDWV9DT0NLUElUX1dFTENPTUU6ICdDb2NrcGl0IFdlbGNvbWUnLFxuICBDT0NLUElUX1dFTENPTUU6ICdjb2NrcGl0LndlbGNvbWUud2lkZ2V0JyxcbiAgREFUQV9QT0lOVFNfVEFCTEU6ICdEYXRhIHBvaW50cyB0YWJsZScsXG4gIERFVklDRV9NQU5BR0VNRU5UX1dFTENPTUU6ICdkZXZpY2VtYW5hZ2VtZW50LndlbGNvbWUud2lkZ2V0JyxcbiAgSU1BR0U6ICdJbWFnZScsXG4gIEtQSTogJ2twaS53aWRnZXQnLFxuICBNQVJLRE9XTjogJ21hcmtkb3duJyxcbiAgSEVMUF9BTkRfU0VSVklDRTogJ0hlbHBBbmRTZXJ2aWNlJyxcbiAgVEhSRUVfRF9ST1RBVElPTjogJ3JvdGF0aW9uM2QnLFxuICBNQVA6ICdNYXAnLFxuICBERVZJQ0VfQ09OVFJPTF9NRVNTQUdFX1dJREdFVDogJ2RldmljZUNvbnRyb2xNZXNzYWdlV2lkZ2V0JyxcbiAgSU5GT19HQVVHRTogJ2luZm9HYXVnZScsXG4gIEFMQVJNX0xJU1Q6ICdBbGFybSBsaXN0JyxcbiAgQUxMX0NSSVRJQ0FMX0FMQVJNUzogJ0Fzc2V0IEFsYXJtcycsXG4gIFJFQ0VOVF9BTEFSTVM6ICdSZWNlbnQgQWxhcm1zJyxcbiAgTElORUFSX0dBVUdFOiAnS1BJIExpbmVhciBHYXVnZScsXG4gIFNJTE86ICdLUEkgU2lsbydcbn0gYXMgY29uc3Q7XG5cbmV4cG9ydCB0eXBlIERlZmF1bHRXaWRnZXRJZEtleXMgPSBrZXlvZiB0eXBlb2YgZGVmYXVsdFdpZGdldElkcztcbmV4cG9ydCB0eXBlIERlZmF1bHRXaWRnZXRJZFZhbHVlcyA9ICh0eXBlb2YgZGVmYXVsdFdpZGdldElkcylbRGVmYXVsdFdpZGdldElkS2V5c107XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi93aWRnZXRzL2RlZmluaXRpb25zL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBQyxNQUFNLGdCQUFnQixHQUFHO0lBQzlCLFlBQVksRUFBRSxjQUFjO0lBQzVCLFdBQVcsRUFBRSxhQUFhO0lBQzFCLHNCQUFzQixFQUFFLGlCQUFpQjtJQUN6QyxlQUFlLEVBQUUsd0JBQXdCO0lBQ3pDLGlCQUFpQixFQUFFLG1CQUFtQjtJQUN0Qyx5QkFBeUIsRUFBRSxpQ0FBaUM7SUFDNUQsS0FBSyxFQUFFLE9BQU87SUFDZCxHQUFHLEVBQUUsWUFBWTtJQUNqQixRQUFRLEVBQUUsVUFBVTtJQUNwQixnQkFBZ0IsRUFBRSxnQkFBZ0I7SUFDbEMsZ0JBQWdCLEVBQUUsWUFBWTtJQUM5QixHQUFHLEVBQUUsS0FBSztJQUNWLDZCQUE2QixFQUFFLDRCQUE0QjtJQUMzRCxVQUFVLEVBQUUsV0FBVztJQUN2QixVQUFVLEVBQUUsWUFBWTtJQUN4QixtQkFBbUIsRUFBRSxjQUFjO0lBQ25DLGFBQWEsRUFBRSxlQUFlO0lBQzlCLFlBQVksRUFBRSxrQkFBa0I7SUFDaEMsSUFBSSxFQUFFLFVBQVU7Q0FDUixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNvbnN0IGRlZmF1bHRXaWRnZXRJZHMgPSB7XG4gIEFQUExJQ0FUSU9OUzogJ0FwcGxpY2F0aW9ucycsXG4gIEFTU0VUX05PVEVTOiAnQXNzZXQgTm90ZXMnLFxuICBMRUdBQ1lfQ09DS1BJVF9XRUxDT01FOiAnQ29ja3BpdCBXZWxjb21lJyxcbiAgQ09DS1BJVF9XRUxDT01FOiAnY29ja3BpdC53ZWxjb21lLndpZGdldCcsXG4gIERBVEFfUE9JTlRTX1RBQkxFOiAnRGF0YSBwb2ludHMgdGFibGUnLFxuICBERVZJQ0VfTUFOQUdFTUVOVF9XRUxDT01FOiAnZGV2aWNlbWFuYWdlbWVudC53ZWxjb21lLndpZGdldCcsXG4gIElNQUdFOiAnSW1hZ2UnLFxuICBLUEk6ICdrcGkud2lkZ2V0JyxcbiAgTUFSS0RPV046ICdtYXJrZG93bicsXG4gIEhFTFBfQU5EX1NFUlZJQ0U6ICdIZWxwQW5kU2VydmljZScsXG4gIFRIUkVFX0RfUk9UQVRJT046ICdyb3RhdGlvbjNkJyxcbiAgTUFQOiAnTWFwJyxcbiAgREVWSUNFX0NPTlRST0xfTUVTU0FHRV9XSURHRVQ6ICdkZXZpY2VDb250cm9sTWVzc2FnZVdpZGdldCcsXG4gIElORk9fR0FVR0U6ICdpbmZvR2F1Z2UnLFxuICBBTEFSTV9MSVNUOiAnQWxhcm0gbGlzdCcsXG4gIEFMTF9DUklUSUNBTF9BTEFSTVM6ICdBc3NldCBBbGFybXMnLFxuICBSRUNFTlRfQUxBUk1TOiAnUmVjZW50IEFsYXJtcycsXG4gIExJTkVBUl9HQVVHRTogJ0tQSSBMaW5lYXIgR2F1Z2UnLFxuICBTSUxPOiAnS1BJIFNpbG8nXG59IGFzIGNvbnN0O1xuXG5leHBvcnQgdHlwZSBEZWZhdWx0V2lkZ2V0SWRLZXlzID0ga2V5b2YgdHlwZW9mIGRlZmF1bHRXaWRnZXRJZHM7XG5leHBvcnQgdHlwZSBEZWZhdWx0V2lkZ2V0SWRWYWx1ZXMgPSAodHlwZW9mIGRlZmF1bHRXaWRnZXRJZHMpW0RlZmF1bHRXaWRnZXRJZEtleXNdO1xuIl19

package/esm2022/widgets/implementations/asset-notes/asset-notes-widget.component.mjs

@@ -0,0 +1,67 @@
+import { CommonModule as NgCommonModule } from '@angular/common';
+import { Component, computed, inject, input, signal } from '@angular/core';
+import { FormsModule as NgFormsModule } from '@angular/forms';
+import { InventoryService } from '@c8y/client';
+import { AlertService, AppStateService, CommonModule, CoreModule, DatePipe, FormsModule, gettext } from '@c8y/ngx-components';
+import * as i0 from "@angular/core";
+import * as i1 from "@c8y/ngx-components";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+export class AssetNotesWidgetComponent {
+    constructor() {
+        this.inventory = inject(InventoryService);
+        this.appState = inject(AppStateService);
+        this.alertService = inject(AlertService);
+        this.datePipe = inject(DatePipe);
+        this.config = input();
+        this.notes = signal(null);
+        this.editable = signal(false);
+        this.isLoading = computed(() => this.notes()?.htmlContent === undefined);
+        this.FRAGMENT = 'c8y_ComponentConfig!assetNotes';
+        this.ngNonBindableTranslate = computed(() => ({
+            lastUpdated: this.datePipe.transform(this.notes()?.lastUpdated),
+            user: this.notes()?.user
+        }));
+    }
+    async ngOnInit() {
+        await this.loadNotes();
+    }
+    toggleEdit() {
+        this.editable.set(!this.editable());
+    }
+    async save() {
+        try {
+            const updatedNotes = {
+                ...this.notes(),
+                user: this.appState.currentUser.value.id,
+                lastUpdated: new Date().toISOString()
+            };
+            await this.inventory.update({
+                id: this.config().device.id,
+                [this.FRAGMENT]: updatedNotes
+            });
+            this.notes.set(updatedNotes);
+            this.editable.set(false);
+            this.alertService.success(gettext('Notes saved.'));
+        }
+        catch (error) {
+            this.alertService.addServerFailure(error);
+        }
+    }
+    async loadNotes() {
+        try {
+            const device = await this.inventory.detail(this.config().device.id);
+            this.notes.set(device.data[this.FRAGMENT] || { htmlContent: '' });
+        }
+        catch (error) {
+            this.alertService.addServerFailure(error);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AssetNotesWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: AssetNotesWidgetComponent, isStandalone: true, selector: "c8y-asset-notes", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"fit-h d-flex flex-wrap a-i-stretch\">\n  <i\n    class=\"c8y-icon c8y-icon-duocolor asset-notes-icon\"\n    [c8yIcon]=\"'c8y-notification'\"\n  ></i>\n\n  @if (!editable()) {\n    <div class=\"asset-notes-content\">\n      <c8y-loading *ngIf=\"isLoading()\"></c8y-loading>\n      <div class=\"text-break-word asset-notes-body\">\n        @if (notes()?.htmlContent && !isLoading()) {\n          <span\n            class=\"markdown-content d-inline-block\"\n            [innerHTML]=\"notes()?.htmlContent | markdownToHtml | async\"\n          ></span>\n        } @else if (!notes()?.htmlContent) {\n          <span>\n            {{ 'No notes yet.' | translate }}\n          </span>\n        }\n\n        <button\n          class=\"btn btn-link btn-sm\"\n          title=\"{{ 'Edit' | translate }}\"\n          type=\"button\"\n          (click)=\"toggleEdit()\"\n        >\n          <i c8yIcon=\"pencil\"></i>\n          {{ 'Edit' | translate }}\n        </button>\n      </div>\n    </div>\n    <div class=\"asset-notes-footer m-t-8\">\n      <small class=\"text-muted\">\n        <em\n          *ngIf=\"notes()?.lastUpdated\"\n          ngNonBindable\n          translate\n          [translateParams]=\"ngNonBindableTranslate()\"\n        >\n          {{ lastUpdated }} by {{ user }}\n        </em>\n      </small>\n    </div>\n  } @else {\n    <div class=\"fit-h flex-grow\">\n      <div class=\"d-flex a-i-stretch fit-h\">\n        <textarea\n          class=\"form-control fit-h text-monospace\"\n          [attr.aria-label]=\"'Notes' | translate\"\n          rows=\"5\"\n          [(ngModel)]=\"notes().htmlContent\"\n          c8y-code-editor\n        ></textarea>\n        <div class=\"input-group-btn a-s-center\">\n          <button\n            class=\"btn btn-dot\"\n            title=\"{{ 'Save' | translate }}\"\n            type=\"button\"\n            (click)=\"save()\"\n          >\n            <i c8yIcon=\"check\"></i>\n          </button>\n        </div>\n        <div class=\"input-group-btn a-s-center\">\n          <button\n            class=\"btn btn-dot\"\n            title=\"{{ 'Cancel' | translate }}\"\n            type=\"button\"\n            (click)=\"toggleEdit()\"\n          >\n            <i c8yIcon=\"times\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "component", type: i1.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: i1.MarkdownToHtmlPipe, name: "markdownToHtml" }, { kind: "ngmodule", type: NgCommonModule }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgFormsModule }, { kind: "ngmodule", type: FormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AssetNotesWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-asset-notes', standalone: true, imports: [CommonModule, NgCommonModule, CoreModule, NgFormsModule, FormsModule, DatePipe], template: "<div class=\"fit-h d-flex flex-wrap a-i-stretch\">\n  <i\n    class=\"c8y-icon c8y-icon-duocolor asset-notes-icon\"\n    [c8yIcon]=\"'c8y-notification'\"\n  ></i>\n\n  @if (!editable()) {\n    <div class=\"asset-notes-content\">\n      <c8y-loading *ngIf=\"isLoading()\"></c8y-loading>\n      <div class=\"text-break-word asset-notes-body\">\n        @if (notes()?.htmlContent && !isLoading()) {\n          <span\n            class=\"markdown-content d-inline-block\"\n            [innerHTML]=\"notes()?.htmlContent | markdownToHtml | async\"\n          ></span>\n        } @else if (!notes()?.htmlContent) {\n          <span>\n            {{ 'No notes yet.' | translate }}\n          </span>\n        }\n\n        <button\n          class=\"btn btn-link btn-sm\"\n          title=\"{{ 'Edit' | translate }}\"\n          type=\"button\"\n          (click)=\"toggleEdit()\"\n        >\n          <i c8yIcon=\"pencil\"></i>\n          {{ 'Edit' | translate }}\n        </button>\n      </div>\n    </div>\n    <div class=\"asset-notes-footer m-t-8\">\n      <small class=\"text-muted\">\n        <em\n          *ngIf=\"notes()?.lastUpdated\"\n          ngNonBindable\n          translate\n          [translateParams]=\"ngNonBindableTranslate()\"\n        >\n          {{ lastUpdated }} by {{ user }}\n        </em>\n      </small>\n    </div>\n  } @else {\n    <div class=\"fit-h flex-grow\">\n      <div class=\"d-flex a-i-stretch fit-h\">\n        <textarea\n          class=\"form-control fit-h text-monospace\"\n          [attr.aria-label]=\"'Notes' | translate\"\n          rows=\"5\"\n          [(ngModel)]=\"notes().htmlContent\"\n          c8y-code-editor\n        ></textarea>\n        <div class=\"input-group-btn a-s-center\">\n          <button\n            class=\"btn btn-dot\"\n            title=\"{{ 'Save' | translate }}\"\n            type=\"button\"\n            (click)=\"save()\"\n          >\n            <i c8yIcon=\"check\"></i>\n          </button>\n        </div>\n        <div class=\"input-group-btn a-s-center\">\n          <button\n            class=\"btn btn-dot\"\n            title=\"{{ 'Cancel' | translate }}\"\n            type=\"button\"\n            (click)=\"toggleEdit()\"\n          >\n            <i c8yIcon=\"times\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n" }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXNzZXQtbm90ZXMtd2lkZ2V0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3dpZGdldHMvaW1wbGVtZW50YXRpb25zL2Fzc2V0LW5vdGVzL2Fzc2V0LW5vdGVzLXdpZGdldC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi93aWRnZXRzL2ltcGxlbWVudGF0aW9ucy9hc3NldC1ub3Rlcy9hc3NldC1ub3Rlcy13aWRnZXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksSUFBSSxjQUFjLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUNqRSxPQUFPLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUF1QixNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDaEcsT0FBTyxFQUFFLFdBQVcsSUFBSSxhQUFhLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM5RCxPQUFPLEVBQWtCLGdCQUFnQixFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQy9ELE9BQU8sRUFDTCxZQUFZLEVBQ1osZUFBZSxFQUNmLFlBQVksRUFDWixVQUFVLEVBQ1YsUUFBUSxFQUNSLFdBQVcsRUFDWCxPQUFPLEVBQ1IsTUFBTSxxQkFBcUIsQ0FBQzs7Ozs7QUFjN0IsTUFBTSxPQUFPLHlCQUF5QjtJQU50QztRQU9VLGNBQVMsR0FBRyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQUNyQyxhQUFRLEdBQUcsTUFBTSxDQUFDLGVBQWUsQ0FBQyxDQUFDO1FBQ25DLGlCQUFZLEdBQUcsTUFBTSxDQUFDLFlBQVksQ0FBQyxDQUFDO1FBQ3BDLGFBQVEsR0FBRyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUM7UUFFcEMsV0FBTSxHQUFxRCxLQUFLLEVBQUUsQ0FBQztRQUVuRSxVQUFLLEdBQUcsTUFBTSxDQUFvQixJQUFJLENBQUMsQ0FBQztRQUN4QyxhQUFRLEdBQUcsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3pCLGNBQVMsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxFQUFFLFdBQVcsS0FBSyxTQUFTLENBQUMsQ0FBQztRQUVuRCxhQUFRLEdBQUcsZ0NBQWdDLENBQUM7UUFDN0QsMkJBQXNCLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUM7WUFDdkMsV0FBVyxFQUFFLElBQUksQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsRUFBRSxXQUFXLENBQUM7WUFDL0QsSUFBSSxFQUFFLElBQUksQ0FBQyxLQUFLLEVBQUUsRUFBRSxJQUFJO1NBQ3pCLENBQUMsQ0FBQyxDQUFDO0tBdUNMO0lBckNDLEtBQUssQ0FBQyxRQUFRO1FBQ1osTUFBTSxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDekIsQ0FBQztJQUVELFVBQVU7UUFDUixJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDO0lBQ3RDLENBQUM7SUFFRCxLQUFLLENBQUMsSUFBSTtRQUNSLElBQUksQ0FBQztZQUNILE1BQU0sWUFBWSxHQUFHO2dCQUNuQixHQUFHLElBQUksQ0FBQyxLQUFLLEVBQUU7Z0JBQ2YsSUFBSSxFQUFFLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxFQUFFO2dCQUN4QyxXQUFXLEVBQUUsSUFBSSxJQUFJLEVBQUUsQ0FBQyxXQUFXLEVBQUU7YUFDdEMsQ0FBQztZQUVGLE1BQU0sSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUM7Z0JBQzFCLEVBQUUsRUFBRSxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsTUFBTSxDQUFDLEVBQUU7Z0JBQzNCLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxFQUFFLFlBQVk7YUFDOUIsQ0FBQyxDQUFDO1lBRUgsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsWUFBWSxDQUFDLENBQUM7WUFDN0IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDekIsSUFBSSxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUM7UUFDckQsQ0FBQztRQUFDLE9BQU8sS0FBSyxFQUFFLENBQUM7WUFDZixJQUFJLENBQUMsWUFBWSxDQUFDLGdCQUFnQixDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzVDLENBQUM7SUFDSCxDQUFDO0lBRU8sS0FBSyxDQUFDLFNBQVM7UUFDckIsSUFBSSxDQUFDO1lBQ0gsTUFBTSxNQUFNLEdBQUcsTUFBTSxJQUFJLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBQyxDQUFDO1lBQ3BFLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsV0FBVyxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQUM7UUFDcEUsQ0FBQztRQUFDLE9BQU8sS0FBSyxFQUFFLENBQUM7WUFDZixJQUFJLENBQUMsWUFBWSxDQUFDLGdCQUFnQixDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzVDLENBQUM7SUFDSCxDQUFDOzhHQXREVSx5QkFBeUI7a0dBQXpCLHlCQUF5QixrTkMxQnRDLHN5RUE4RUEsMkNEdERZLFlBQVksK21CQUFFLGNBQWMsOEJBQUUsVUFBVSw4bUJBQUUsYUFBYSw4QkFBRSxXQUFXOzsyRkFFbkUseUJBQXlCO2tCQU5yQyxTQUFTOytCQUNFLGlCQUFpQixjQUVmLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxjQUFjLEVBQUUsVUFBVSxFQUFFLGFBQWEsRUFBRSxXQUFXLEVBQUUsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIGFzIE5nQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgY29tcHV0ZWQsIGluamVjdCwgaW5wdXQsIElucHV0U2lnbmFsLCBPbkluaXQsIHNpZ25hbCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9ybXNNb2R1bGUgYXMgTmdGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IElNYW5hZ2VkT2JqZWN0LCBJbnZlbnRvcnlTZXJ2aWNlIH0gZnJvbSAnQGM4eS9jbGllbnQnO1xuaW1wb3J0IHtcbiAgQWxlcnRTZXJ2aWNlLFxuICBBcHBTdGF0ZVNlcnZpY2UsXG4gIENvbW1vbk1vZHVsZSxcbiAgQ29yZU1vZHVsZSxcbiAgRGF0ZVBpcGUsXG4gIEZvcm1zTW9kdWxlLFxuICBnZXR0ZXh0XG59IGZyb20gJ0BjOHkvbmd4LWNvbXBvbmVudHMnO1xuXG5pbnRlcmZhY2UgQXNzZXROb3RlcyB7XG4gIHVzZXI6IHN0cmluZztcbiAgbGFzdFVwZGF0ZWQ6IHN0cmluZztcbiAgaHRtbENvbnRlbnQ6IHN0cmluZztcbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYzh5LWFzc2V0LW5vdGVzJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2Fzc2V0LW5vdGVzLXdpZGdldC5jb21wb25lbnQuaHRtbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIE5nQ29tbW9uTW9kdWxlLCBDb3JlTW9kdWxlLCBOZ0Zvcm1zTW9kdWxlLCBGb3Jtc01vZHVsZSwgRGF0ZVBpcGVdXG59KVxuZXhwb3J0IGNsYXNzIEFzc2V0Tm90ZXNXaWRnZXRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBwcml2YXRlIGludmVudG9yeSA9IGluamVjdChJbnZlbnRvcnlTZXJ2aWNlKTtcbiAgcHJpdmF0ZSBhcHBTdGF0ZSA9IGluamVjdChBcHBTdGF0ZVNlcnZpY2UpO1xuICBwcml2YXRlIGFsZXJ0U2VydmljZSA9IGluamVjdChBbGVydFNlcnZpY2UpO1xuICBwcml2YXRlIGRhdGVQaXBlID0gaW5qZWN0KERhdGVQaXBlKTtcblxuICBjb25maWc6IElucHV0U2lnbmFsPHsgZGV2aWNlOiBQYXJ0aWFsPElNYW5hZ2VkT2JqZWN0PiB9PiA9IGlucHV0KCk7XG5cbiAgbm90ZXMgPSBzaWduYWw8QXNzZXROb3RlcyB8IG51bGw+KG51bGwpO1xuICBlZGl0YWJsZSA9IHNpZ25hbChmYWxzZSk7XG4gIGlzTG9hZGluZyA9IGNvbXB1dGVkKCgpID0+IHRoaXMubm90ZXMoKT8uaHRtbENvbnRlbnQgPT09IHVuZGVmaW5lZCk7XG5cbiAgcHJpdmF0ZSByZWFkb25seSBGUkFHTUVOVCA9ICdjOHlfQ29tcG9uZW50Q29uZmlnIWFzc2V0Tm90ZXMnO1xuICBuZ05vbkJpbmRhYmxlVHJhbnNsYXRlID0gY29tcHV0ZWQoKCkgPT4gKHtcbiAgICBsYXN0VXBkYXRlZDogdGhpcy5kYXRlUGlwZS50cmFuc2Zvcm0odGhpcy5ub3RlcygpPy5sYXN0VXBkYXRlZCksXG4gICAgdXNlcjogdGhpcy5ub3RlcygpPy51c2VyXG4gIH0pKTtcblxuICBhc3luYyBuZ09uSW5pdCgpIHtcbiAgICBhd2FpdCB0aGlzLmxvYWROb3RlcygpO1xuICB9XG5cbiAgdG9nZ2xlRWRpdCgpIHtcbiAgICB0aGlzLmVkaXRhYmxlLnNldCghdGhpcy5lZGl0YWJsZSgpKTtcbiAgfVxuXG4gIGFzeW5jIHNhdmUoKSB7XG4gICAgdHJ5IHtcbiAgICAgIGNvbnN0IHVwZGF0ZWROb3RlcyA9IHtcbiAgICAgICAgLi4udGhpcy5ub3RlcygpLFxuICAgICAgICB1c2VyOiB0aGlzLmFwcFN0YXRlLmN1cnJlbnRVc2VyLnZhbHVlLmlkLFxuICAgICAgICBsYXN0VXBkYXRlZDogbmV3IERhdGUoKS50b0lTT1N0cmluZygpXG4gICAgICB9O1xuXG4gICAgICBhd2FpdCB0aGlzLmludmVudG9yeS51cGRhdGUoe1xuICAgICAgICBpZDogdGhpcy5jb25maWcoKS5kZXZpY2UuaWQsXG4gICAgICAgIFt0aGlzLkZSQUdNRU5UXTogdXBkYXRlZE5vdGVzXG4gICAgICB9KTtcblxuICAgICAgdGhpcy5ub3Rlcy5zZXQodXBkYXRlZE5vdGVzKTtcbiAgICAgIHRoaXMuZWRpdGFibGUuc2V0KGZhbHNlKTtcbiAgICAgIHRoaXMuYWxlcnRTZXJ2aWNlLnN1Y2Nlc3MoZ2V0dGV4dCgnTm90ZXMgc2F2ZWQuJykpO1xuICAgIH0gY2F0Y2ggKGVycm9yKSB7XG4gICAgICB0aGlzLmFsZXJ0U2VydmljZS5hZGRTZXJ2ZXJGYWlsdXJlKGVycm9yKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGFzeW5jIGxvYWROb3RlcygpIHtcbiAgICB0cnkge1xuICAgICAgY29uc3QgZGV2aWNlID0gYXdhaXQgdGhpcy5pbnZlbnRvcnkuZGV0YWlsKHRoaXMuY29uZmlnKCkuZGV2aWNlLmlkKTtcbiAgICAgIHRoaXMubm90ZXMuc2V0KGRldmljZS5kYXRhW3RoaXMuRlJBR01FTlRdIHx8IHsgaHRtbENvbnRlbnQ6ICcnIH0pO1xuICAgIH0gY2F0Y2ggKGVycm9yKSB7XG4gICAgICB0aGlzLmFsZXJ0U2VydmljZS5hZGRTZXJ2ZXJGYWlsdXJlKGVycm9yKTtcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJmaXQtaCBkLWZsZXggZmxleC13cmFwIGEtaS1zdHJldGNoXCI+XG4gIDxpXG4gICAgY2xhc3M9XCJjOHktaWNvbiBjOHktaWNvbi1kdW9jb2xvciBhc3NldC1ub3Rlcy1pY29uXCJcbiAgICBbYzh5SWNvbl09XCInYzh5LW5vdGlmaWNhdGlvbidcIlxuICA+PC9pPlxuXG4gIEBpZiAoIWVkaXRhYmxlKCkpIHtcbiAgICA8ZGl2IGNsYXNzPVwiYXNzZXQtbm90ZXMtY29udGVudFwiPlxuICAgICAgPGM4eS1sb2FkaW5nICpuZ0lmPVwiaXNMb2FkaW5nKClcIj48L2M4eS1sb2FkaW5nPlxuICAgICAgPGRpdiBjbGFzcz1cInRleHQtYnJlYWstd29yZCBhc3NldC1ub3Rlcy1ib2R5XCI+XG4gICAgICAgIEBpZiAobm90ZXMoKT8uaHRtbENvbnRlbnQgJiYgIWlzTG9hZGluZygpKSB7XG4gICAgICAgICAgPHNwYW5cbiAgICAgICAgICAgIGNsYXNzPVwibWFya2Rvd24tY29udGVudCBkLWlubGluZS1ibG9ja1wiXG4gICAgICAgICAgICBbaW5uZXJIVE1MXT1cIm5vdGVzKCk/Lmh0bWxDb250ZW50IHwgbWFya2Rvd25Ub0h0bWwgfCBhc3luY1wiXG4gICAgICAgICAgPjwvc3Bhbj5cbiAgICAgICAgfSBAZWxzZSBpZiAoIW5vdGVzKCk/Lmh0bWxDb250ZW50KSB7XG4gICAgICAgICAgPHNwYW4+XG4gICAgICAgICAgICB7eyAnTm8gbm90ZXMgeWV0LicgfCB0cmFuc2xhdGUgfX1cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgIH1cblxuICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgY2xhc3M9XCJidG4gYnRuLWxpbmsgYnRuLXNtXCJcbiAgICAgICAgICB0aXRsZT1cInt7ICdFZGl0JyB8IHRyYW5zbGF0ZSB9fVwiXG4gICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgKGNsaWNrKT1cInRvZ2dsZUVkaXQoKVwiXG4gICAgICAgID5cbiAgICAgICAgICA8aSBjOHlJY29uPVwicGVuY2lsXCI+PC9pPlxuICAgICAgICAgIHt7ICdFZGl0JyB8IHRyYW5zbGF0ZSB9fVxuICAgICAgICA8L2J1dHRvbj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJhc3NldC1ub3Rlcy1mb290ZXIgbS10LThcIj5cbiAgICAgIDxzbWFsbCBjbGFzcz1cInRleHQtbXV0ZWRcIj5cbiAgICAgICAgPGVtXG4gICAgICAgICAgKm5nSWY9XCJub3RlcygpPy5sYXN0VXBkYXRlZFwiXG4gICAgICAgICAgbmdOb25CaW5kYWJsZVxuICAgICAgICAgIHRyYW5zbGF0ZVxuICAgICAgICAgIFt0cmFuc2xhdGVQYXJhbXNdPVwibmdOb25CaW5kYWJsZVRyYW5zbGF0ZSgpXCJcbiAgICAgICAgPlxuICAgICAgICAgIHt7IGxhc3RVcGRhdGVkIH19IGJ5IHt7IHVzZXIgfX1cbiAgICAgICAgPC9lbT5cbiAgICAgIDwvc21hbGw+XG4gICAgPC9kaXY+XG4gIH0gQGVsc2Uge1xuICAgIDxkaXYgY2xhc3M9XCJmaXQtaCBmbGV4LWdyb3dcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJkLWZsZXggYS1pLXN0cmV0Y2ggZml0LWhcIj5cbiAgICAgICAgPHRleHRhcmVhXG4gICAgICAgICAgY2xhc3M9XCJmb3JtLWNvbnRyb2wgZml0LWggdGV4dC1tb25vc3BhY2VcIlxuICAgICAgICAgIFthdHRyLmFyaWEtbGFiZWxdPVwiJ05vdGVzJyB8IHRyYW5zbGF0ZVwiXG4gICAgICAgICAgcm93cz1cIjVcIlxuICAgICAgICAgIFsobmdNb2RlbCldPVwibm90ZXMoKS5odG1sQ29udGVudFwiXG4gICAgICAgICAgYzh5LWNvZGUtZWRpdG9yXG4gICAgICAgID48L3RleHRhcmVhPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiaW5wdXQtZ3JvdXAtYnRuIGEtcy1jZW50ZXJcIj5cbiAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICBjbGFzcz1cImJ0biBidG4tZG90XCJcbiAgICAgICAgICAgIHRpdGxlPVwie3sgJ1NhdmUnIHwgdHJhbnNsYXRlIH19XCJcbiAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgKGNsaWNrKT1cInNhdmUoKVwiXG4gICAgICAgICAgPlxuICAgICAgICAgICAgPGkgYzh5SWNvbj1cImNoZWNrXCI+PC9pPlxuICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImlucHV0LWdyb3VwLWJ0biBhLXMtY2VudGVyXCI+XG4gICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgY2xhc3M9XCJidG4gYnRuLWRvdFwiXG4gICAgICAgICAgICB0aXRsZT1cInt7ICdDYW5jZWwnIHwgdHJhbnNsYXRlIH19XCJcbiAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgKGNsaWNrKT1cInRvZ2dsZUVkaXQoKVwiXG4gICAgICAgICAgPlxuICAgICAgICAgICAgPGkgYzh5SWNvbj1cInRpbWVzXCI+PC9pPlxuICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICB9XG48L2Rpdj5cbiJdfQ==

package/esm2022/widgets/implementations/asset-notes/c8y-ngx-components-widgets-implementations-asset-notes.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYzh5LW5neC1jb21wb25lbnRzLXdpZGdldHMtaW1wbGVtZW50YXRpb25zLWFzc2V0LW5vdGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vd2lkZ2V0cy9pbXBsZW1lbnRhdGlvbnMvYXNzZXQtbm90ZXMvYzh5LW5neC1jb21wb25lbnRzLXdpZGdldHMtaW1wbGVtZW50YXRpb25zLWFzc2V0LW5vdGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19

package/esm2022/widgets/implementations/asset-notes/index.mjs

@@ -0,0 +1,2 @@
+export * from './asset-notes-widget.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi93aWRnZXRzL2ltcGxlbWVudGF0aW9ucy9hc3NldC1ub3Rlcy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLGdDQUFnQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9hc3NldC1ub3Rlcy13aWRnZXQuY29tcG9uZW50JztcbiJdfQ==

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

@@ -1685,6 +1685,7 @@ class AlarmsDateFilterComponent {
         this.DATE_FORMAT = 'short';
         this.DEFAULT_INTERVAL = 'none';
         this.updateQueryParams = true;
+        this.noFilterLabel = gettext('No date filter');
         this.destroy$ = new Subject();
         this.dateFilterChange = new EventEmitter();
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -1821,7 +1822,7 @@ class AlarmsDateFilterComponent {
                 useExisting: forwardRef(() => AlarmsDateFilterComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: BsDropdownDirective, descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex gap-16 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n  [formGroup]=\"form\"\n>\n  <div\n    class=\"dropdown flex-grow\"\n    c8yDropdownDirection\n    #dropDirection=\"bs-dropdown\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      attr.aria-label=\"{{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\"\n      tooltip=\"{{\n        form.value.currentDateContextInterval === 'none'\n          ? 'No date filter'\n          : (date[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date[1] | c8yDate: DATE_FORMAT)\n      }}\"\n      placement=\"top\"\n      container=\"body\"\n      data-cy=\"alarms-date-filter--date-picker-dropdown-button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"m-r-4\"\n        c8yIcon=\"schedule1\"\n      ></i>\n      <div class=\"d-col text-left fit-w\">\n        <span\n          class=\"text-12\"\n          data-cy=\"widget-time-context--selected-interval\"\n        >\n          {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}\n        </span>\n        <span\n          class=\"text-10 text-muted text-truncate\"\n          data-cy=\"alarms-date-filter--selected-time-range\"\n          *ngIf=\"form.controls.currentDateContextInterval.value !== 'none'\"\n        >\n          {{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\n        </span>\n      </div>\n      <span class=\"caret m-r-16 m-l-4\"></span>\n    </button>\n\n    <ul\n      class=\"dropdown-menu dropdown-menu--date-range\"\n      *dropdownMenu\n    >\n      <c8y-interval-picker\n        class=\"d-contents\"\n        formControlName=\"currentDateContextInterval\"\n        [INTERVALS]=\"INTERVALS\"\n      ></c8y-interval-picker>\n\n      <ng-container *ngIf=\"form.controls.currentDateContextInterval.value === 'custom'\">\n        <div class=\"p-l-16 p-r-16\">\n          <c8y-form-group\n            class=\"m-b-8\"\n            [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n          >\n            <label\n              [title]=\"'From`date`' | translate\"\n              for=\"temporaryUserSelectedFromDate\"\n              translate\n            >\n              From`date`\n            </label>\n            <c8y-date-time-picker\n              id=\"temporaryUserSelectedFromDate\"\n              [maxDate]=\"form.value.temporaryUserSelectedToDate\"\n              [placeholder]=\"'From`date`' | translate\"\n              [formControl]=\"form.controls.temporaryUserSelectedFromDate\"\n              [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n            ></c8y-date-time-picker>\n            <c8y-messages [show]=\"form.controls.temporaryUserSelectedFromDate.errors\">\n              <c8y-message\n                name=\"dateAfterRangeMax\"\n                [text]=\"'This date is after the latest allowed date.' | translate\"\n              ></c8y-message>\n              <c8y-message\n                name=\"invalidDateTime\"\n                [text]=\"'This date is invalid.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n\n          <c8y-form-group\n            class=\"m-b-8\"\n            [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n          >\n            <label\n              [title]=\"'To`date`' | translate\"\n              for=\"temporaryUserSelectedToDate\"\n              translate\n            >\n              To`date`\n            </label>\n            <c8y-date-time-picker\n              id=\"temporaryUserSelectedToDate\"\n              [minDate]=\"form.value.temporaryUserSelectedFromDate\"\n              [placeholder]=\"'To`date`' | translate\"\n              [formControl]=\"form.controls.temporaryUserSelectedToDate\"\n              [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n            ></c8y-date-time-picker>\n            <c8y-messages [show]=\"form.controls.temporaryUserSelectedToDate.errors\">\n              <c8y-message\n                name=\"dateBeforeRangeMin\"\n                [text]=\"'This date is before the earliest allowed date.' | translate\"\n              ></c8y-message>\n              <c8y-message\n                name=\"invalidDateTime\"\n                [text]=\"'This date is invalid.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n        </div>\n\n        <div class=\"p-16 d-flex gap-8 separator-top\">\n          <button\n            class=\"btn btn-primary btn-sm flex-grow\"\n            title=\"{{ 'Apply' | translate }}\"\n            type=\"button\"\n            (click)=\"applyDateFilter(); dropdown.isOpen = false\"\n            [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </ng-container>\n    </ul>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DropdownDirectionDirective, selector: "[dropdown][c8yBsDropdownDirection],[dropdown][c8yDropdownDirection]" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i3.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i3.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i9.IntervalPickerComponent, selector: "c8y-interval-picker", inputs: ["INTERVALS"] }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: BsDropdownDirective, descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex gap-16 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n  [formGroup]=\"form\"\n>\n  <div\n    class=\"dropdown flex-grow\"\n    c8yDropdownDirection\n    #dropDirection=\"bs-dropdown\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      attr.aria-label=\"{{\n        (form.value.currentDateContextInterval === 'none'\n          ? noFilterLabel\n          : (date[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date[1] | c8yDate: DATE_FORMAT)\n        ) | translate\n      }}\"\n      tooltip=\"{{\n        (form.value.currentDateContextInterval === 'none'\n          ? noFilterLabel\n          : (date[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date[1] | c8yDate: DATE_FORMAT)\n        ) | translate\n      }}\"\n      placement=\"top\"\n      container=\"body\"\n      data-cy=\"alarms-date-filter--date-picker-dropdown-button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"m-r-4\"\n        c8yIcon=\"schedule1\"\n      ></i>\n      <div class=\"d-col text-left fit-w\">\n        <span\n          class=\"text-12\"\n          data-cy=\"widget-time-context--selected-interval\"\n        >\n          {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}\n        </span>\n        <span\n          class=\"text-10 text-muted text-truncate\"\n          data-cy=\"alarms-date-filter--selected-time-range\"\n          *ngIf=\"form.controls.currentDateContextInterval.value !== 'none'\"\n        >\n          {{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\n        </span>\n      </div>\n      <span class=\"caret m-r-16 m-l-4\"></span>\n    </button>\n\n    <ul\n      class=\"dropdown-menu dropdown-menu--date-range\"\n      *dropdownMenu\n    >\n      <c8y-interval-picker\n        class=\"d-contents\"\n        formControlName=\"currentDateContextInterval\"\n        [INTERVALS]=\"INTERVALS\"\n      ></c8y-interval-picker>\n\n      <ng-container *ngIf=\"form.controls.currentDateContextInterval.value === 'custom'\">\n        <div class=\"p-l-16 p-r-16\">\n          <c8y-form-group\n            class=\"m-b-8\"\n            [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n          >\n            <label\n              [title]=\"'From`date`' | translate\"\n              for=\"temporaryUserSelectedFromDate\"\n              translate\n            >\n              From`date`\n            </label>\n            <c8y-date-time-picker\n              id=\"temporaryUserSelectedFromDate\"\n              [maxDate]=\"form.value.temporaryUserSelectedToDate\"\n              [placeholder]=\"'From`date`' | translate\"\n              [formControl]=\"form.controls.temporaryUserSelectedFromDate\"\n              [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n            ></c8y-date-time-picker>\n            <c8y-messages [show]=\"form.controls.temporaryUserSelectedFromDate.errors\">\n              <c8y-message\n                name=\"dateAfterRangeMax\"\n                [text]=\"'This date is after the latest allowed date.' | translate\"\n              ></c8y-message>\n              <c8y-message\n                name=\"invalidDateTime\"\n                [text]=\"'This date is invalid.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n\n          <c8y-form-group\n            class=\"m-b-8\"\n            [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n          >\n            <label\n              [title]=\"'To`date`' | translate\"\n              for=\"temporaryUserSelectedToDate\"\n              translate\n            >\n              To`date`\n            </label>\n            <c8y-date-time-picker\n              id=\"temporaryUserSelectedToDate\"\n              [minDate]=\"form.value.temporaryUserSelectedFromDate\"\n              [placeholder]=\"'To`date`' | translate\"\n              [formControl]=\"form.controls.temporaryUserSelectedToDate\"\n              [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n            ></c8y-date-time-picker>\n            <c8y-messages [show]=\"form.controls.temporaryUserSelectedToDate.errors\">\n              <c8y-message\n                name=\"dateBeforeRangeMin\"\n                [text]=\"'This date is before the earliest allowed date.' | translate\"\n              ></c8y-message>\n              <c8y-message\n                name=\"invalidDateTime\"\n                [text]=\"'This date is invalid.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n        </div>\n\n        <div class=\"p-16 d-flex gap-8 separator-top\">\n          <button\n            class=\"btn btn-primary btn-sm flex-grow\"\n            title=\"{{ 'Apply' | translate }}\"\n            type=\"button\"\n            (click)=\"applyDateFilter(); dropdown.isOpen = false\"\n            [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </ng-container>\n    </ul>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DropdownDirectionDirective, selector: "[dropdown][c8yBsDropdownDirection],[dropdown][c8yDropdownDirection]" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i3.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i3.MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "component", type: i3.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.DateTimePickerComponent, selector: "c8y-date-time-picker", inputs: ["minDate", "maxDate", "placeholder", "dateInputFormat", "adaptivePosition", "size", "dateType", "config"], outputs: ["onDateSelected"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i9.IntervalPickerComponent, selector: "c8y-interval-picker", inputs: ["INTERVALS"] }, { kind: "pipe", type: i3.DatePipe, name: "c8yDate" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsDateFilterComponent, decorators: [{
             type: Component,
@@ -1831,7 +1832,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                             useExisting: forwardRef(() => AlarmsDateFilterComponent),
                             multi: true
                         }
-                    ], template: "<form\n  class=\"d-flex gap-16 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n  [formGroup]=\"form\"\n>\n  <div\n    class=\"dropdown flex-grow\"\n    c8yDropdownDirection\n    #dropDirection=\"bs-dropdown\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      attr.aria-label=\"{{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\"\n      tooltip=\"{{\n        form.value.currentDateContextInterval === 'none'\n          ? 'No date filter'\n          : (date[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date[1] | c8yDate: DATE_FORMAT)\n      }}\"\n      placement=\"top\"\n      container=\"body\"\n      data-cy=\"alarms-date-filter--date-picker-dropdown-button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"m-r-4\"\n        c8yIcon=\"schedule1\"\n      ></i>\n      <div class=\"d-col text-left fit-w\">\n        <span\n          class=\"text-12\"\n          data-cy=\"widget-time-context--selected-interval\"\n        >\n          {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}\n        </span>\n        <span\n          class=\"text-10 text-muted text-truncate\"\n          data-cy=\"alarms-date-filter--selected-time-range\"\n          *ngIf=\"form.controls.currentDateContextInterval.value !== 'none'\"\n        >\n          {{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\n        </span>\n      </div>\n      <span class=\"caret m-r-16 m-l-4\"></span>\n    </button>\n\n    <ul\n      class=\"dropdown-menu dropdown-menu--date-range\"\n      *dropdownMenu\n    >\n      <c8y-interval-picker\n        class=\"d-contents\"\n        formControlName=\"currentDateContextInterval\"\n        [INTERVALS]=\"INTERVALS\"\n      ></c8y-interval-picker>\n\n      <ng-container *ngIf=\"form.controls.currentDateContextInterval.value === 'custom'\">\n        <div class=\"p-l-16 p-r-16\">\n          <c8y-form-group\n            class=\"m-b-8\"\n            [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n          >\n            <label\n              [title]=\"'From`date`' | translate\"\n              for=\"temporaryUserSelectedFromDate\"\n              translate\n            >\n              From`date`\n            </label>\n            <c8y-date-time-picker\n              id=\"temporaryUserSelectedFromDate\"\n              [maxDate]=\"form.value.temporaryUserSelectedToDate\"\n              [placeholder]=\"'From`date`' | translate\"\n              [formControl]=\"form.controls.temporaryUserSelectedFromDate\"\n              [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n            ></c8y-date-time-picker>\n            <c8y-messages [show]=\"form.controls.temporaryUserSelectedFromDate.errors\">\n              <c8y-message\n                name=\"dateAfterRangeMax\"\n                [text]=\"'This date is after the latest allowed date.' | translate\"\n              ></c8y-message>\n              <c8y-message\n                name=\"invalidDateTime\"\n                [text]=\"'This date is invalid.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n\n          <c8y-form-group\n            class=\"m-b-8\"\n            [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n          >\n            <label\n              [title]=\"'To`date`' | translate\"\n              for=\"temporaryUserSelectedToDate\"\n              translate\n            >\n              To`date`\n            </label>\n            <c8y-date-time-picker\n              id=\"temporaryUserSelectedToDate\"\n              [minDate]=\"form.value.temporaryUserSelectedFromDate\"\n              [placeholder]=\"'To`date`' | translate\"\n              [formControl]=\"form.controls.temporaryUserSelectedToDate\"\n              [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n            ></c8y-date-time-picker>\n            <c8y-messages [show]=\"form.controls.temporaryUserSelectedToDate.errors\">\n              <c8y-message\n                name=\"dateBeforeRangeMin\"\n                [text]=\"'This date is before the earliest allowed date.' | translate\"\n              ></c8y-message>\n              <c8y-message\n                name=\"invalidDateTime\"\n                [text]=\"'This date is invalid.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n        </div>\n\n        <div class=\"p-16 d-flex gap-8 separator-top\">\n          <button\n            class=\"btn btn-primary btn-sm flex-grow\"\n            title=\"{{ 'Apply' | translate }}\"\n            type=\"button\"\n            (click)=\"applyDateFilter(); dropdown.isOpen = false\"\n            [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </ng-container>\n    </ul>\n  </div>\n</form>\n" }]
+                    ], template: "<form\n  class=\"d-flex gap-16 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8\"\n  [formGroup]=\"form\"\n>\n  <div\n    class=\"dropdown flex-grow\"\n    c8yDropdownDirection\n    #dropDirection=\"bs-dropdown\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      attr.aria-label=\"{{\n        (form.value.currentDateContextInterval === 'none'\n          ? noFilterLabel\n          : (date[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date[1] | c8yDate: DATE_FORMAT)\n        ) | translate\n      }}\"\n      tooltip=\"{{\n        (form.value.currentDateContextInterval === 'none'\n          ? noFilterLabel\n          : (date[0] | c8yDate: DATE_FORMAT) + ' \u2014 ' + (date[1] | c8yDate: DATE_FORMAT)\n        ) | translate\n      }}\"\n      placement=\"top\"\n      container=\"body\"\n      data-cy=\"alarms-date-filter--date-picker-dropdown-button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"m-r-4\"\n        c8yIcon=\"schedule1\"\n      ></i>\n      <div class=\"d-col text-left fit-w\">\n        <span\n          class=\"text-12\"\n          data-cy=\"widget-time-context--selected-interval\"\n        >\n          {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}\n        </span>\n        <span\n          class=\"text-10 text-muted text-truncate\"\n          data-cy=\"alarms-date-filter--selected-time-range\"\n          *ngIf=\"form.controls.currentDateContextInterval.value !== 'none'\"\n        >\n          {{ date[0] | c8yDate: DATE_FORMAT }} \u2014 {{ date[1] | c8yDate: DATE_FORMAT }}\n        </span>\n      </div>\n      <span class=\"caret m-r-16 m-l-4\"></span>\n    </button>\n\n    <ul\n      class=\"dropdown-menu dropdown-menu--date-range\"\n      *dropdownMenu\n    >\n      <c8y-interval-picker\n        class=\"d-contents\"\n        formControlName=\"currentDateContextInterval\"\n        [INTERVALS]=\"INTERVALS\"\n      ></c8y-interval-picker>\n\n      <ng-container *ngIf=\"form.controls.currentDateContextInterval.value === 'custom'\">\n        <div class=\"p-l-16 p-r-16\">\n          <c8y-form-group\n            class=\"m-b-8\"\n            [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n          >\n            <label\n              [title]=\"'From`date`' | translate\"\n              for=\"temporaryUserSelectedFromDate\"\n              translate\n            >\n              From`date`\n            </label>\n            <c8y-date-time-picker\n              id=\"temporaryUserSelectedFromDate\"\n              [maxDate]=\"form.value.temporaryUserSelectedToDate\"\n              [placeholder]=\"'From`date`' | translate\"\n              [formControl]=\"form.controls.temporaryUserSelectedFromDate\"\n              [ngClass]=\"form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''\"\n            ></c8y-date-time-picker>\n            <c8y-messages [show]=\"form.controls.temporaryUserSelectedFromDate.errors\">\n              <c8y-message\n                name=\"dateAfterRangeMax\"\n                [text]=\"'This date is after the latest allowed date.' | translate\"\n              ></c8y-message>\n              <c8y-message\n                name=\"invalidDateTime\"\n                [text]=\"'This date is invalid.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n\n          <c8y-form-group\n            class=\"m-b-8\"\n            [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n          >\n            <label\n              [title]=\"'To`date`' | translate\"\n              for=\"temporaryUserSelectedToDate\"\n              translate\n            >\n              To`date`\n            </label>\n            <c8y-date-time-picker\n              id=\"temporaryUserSelectedToDate\"\n              [minDate]=\"form.value.temporaryUserSelectedFromDate\"\n              [placeholder]=\"'To`date`' | translate\"\n              [formControl]=\"form.controls.temporaryUserSelectedToDate\"\n              [ngClass]=\"form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''\"\n            ></c8y-date-time-picker>\n            <c8y-messages [show]=\"form.controls.temporaryUserSelectedToDate.errors\">\n              <c8y-message\n                name=\"dateBeforeRangeMin\"\n                [text]=\"'This date is before the earliest allowed date.' | translate\"\n              ></c8y-message>\n              <c8y-message\n                name=\"invalidDateTime\"\n                [text]=\"'This date is invalid.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n        </div>\n\n        <div class=\"p-16 d-flex gap-8 separator-top\">\n          <button\n            class=\"btn btn-primary btn-sm flex-grow\"\n            title=\"{{ 'Apply' | translate }}\"\n            type=\"button\"\n            (click)=\"applyDateFilter(); dropdown.isOpen = false\"\n            [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </ng-container>\n    </ul>\n  </div>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: AlarmsViewService }], propDecorators: { DEFAULT_INTERVAL: [{
                 type: Input
             }], updateQueryParams: [{
@@ -1976,11 +1977,11 @@ class AlarmsTypeFilterComponent {
         return activeFilters.map(filter => filter.filters.type).join(',');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsTypeFilterComponent, deps: [{ token: i1$3.AlarmEventSelectorService }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i3.ColorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmsTypeFilterComponent, selector: "c8y-alarms-type-filter", inputs: { alarms: "alarms", possibleFilters: "possibleFilters", activeFilters: "activeFilters" }, outputs: { onFilterChanged: "onFilterChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex a-i-center\">\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by Alarm types' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    (onHidden)=\"resetFilters()\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\">\n        <ng-container *ngIf=\"activeFilters.length > 0; else allTypes\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let filter of activeFilters\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation(); deselect(filter)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <span\n              class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n              [ngStyle]=\"{ 'background-color': filter.color }\"\n            >\n              <i\n                class=\"stroked-icon\"\n                c8yIcon=\"bell\"\n              ></i>\n            </span>\n            {{ filter.filters.type }}\n          </span>\n        </ng-container>\n        <ng-template #allTypes>\n          <span class=\"text-nowrap\">\n            {{ 'All alarm types' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last text-center\">\n        <button\n          class=\"btn-default btn\"\n          [title]=\"'Clear filters' | translate\"\n          *ngIf=\"activeFilters.length\"\n          (click)=\"deselectAll()\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n        <button\n          class=\"btn-default btn btn--caret\"\n          [title]=\"'Alarm types' | translate\"\n          data-cy=\"c8y-alarm-type-filter\"\n          dropdownToggle\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      style=\"max-width: unset; min-width: 250px\"\n      *dropdownMenu\n    >\n      <div class=\"p-16 bg-level-2\">\n        <div>\n          <p>\n            <i\n              class=\"text-info m-r-4\"\n              [c8yIcon]=\"'info-circle'\"\n            ></i>\n            <strong tanslate>The list below may not be complete.</strong>\n          </p>\n          <p tanslate>\n            Recent alarms are displayed below. Past alarms might not be shown. Optionally you can\n            add a custom alarm.\n          </p>\n        </div>\n      </div>\n      <c8y-list-group>\n        <div class=\"input-group p-t-16 p-b-16 p-r-32 p-l-32 separator-bottom\">\n          <input\n            class=\"form-control\"\n            placeholder=\"Custom alarm type\"\n            type=\"text\"\n            [(ngModel)]=\"customAlarmTypeInput\"\n            (keydown)=\"confirmWithEnter($event)\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn-dot text-primary\"\n              [attr.aria-label]=\"'Add custom alarm' | translate\"\n              tooltip=\"Add\"\n              placement=\"top\"\n              [delay]=\"500\"\n              (click)=\"addCustomAlarmType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n\n        <c8y-li\n          class=\"c8y-list__item__collapse--container-small cdk-drag\"\n          style=\"cursor: pointer\"\n          *ngFor=\"let alarmType of possibleFilters\"\n          (click)=\"toggleAlarmType(alarmType)\"\n        >\n          <c8y-li-checkbox\n            class=\"a-s-center m-t-4 p-r-0 p-l-0\"\n            [selected]=\"alarmType.__active\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"toggleAlarmType(alarmType); $event.stopPropagation()\"\n          ></c8y-li-checkbox>\n          <div class=\"d-flex a-i-center p-l-4\">\n            <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\">\n              <div class=\"c8y-colorpicker c8y-colorpicker--alarm\">\n                <span\n                  class=\"circle-icon-wrapper\"\n                  [ngStyle]=\"{ 'background-color': alarmType.color }\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    [c8yIcon]=\"'bell'\"\n                  ></i>\n                </span>\n              </div>\n            </div>\n            <span class=\"text-truncate text-12 flex-grow\">\n              {{ alarmType.label }}\n            </span>\n            <button\n              class=\"btn-dot btn-dot--danger\"\n              [attr.aria-label]=\"'Remove' | translate\"\n              tooltip=\"Remove\"\n              placement=\"top\"\n              *ngIf=\"alarmType.__target === null\"\n              [delay]=\"500\"\n              (click)=\"removeCustomAlarm(alarmType); $event.stopPropagation()\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n        </c8y-li>\n        <c8y-li *ngIf=\"possibleFilters.length === 0\">\n          <c8y-ui-empty-state\n            class=\"p-t-8\"\n            icon=\"c8y-alarm\"\n            [title]=\"'No alarm found' | translate\"\n            [subtitle]=\"\n              'There is no alarm to filter. You can still add a custom alarm.' | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n        </c8y-li>\n        <div class=\"sticky-bottom p-16\">\n          <button\n            class=\"btn btn-block btn-primary\"\n            [disabled]=\"possibleFilters.length === 0\"\n            (click)=\"applyFilterChange(); $event.stopPropagation(); filtersDropdown.hide()\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </c8y-list-group>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmsTypeFilterComponent, selector: "c8y-alarms-type-filter", inputs: { alarms: "alarms", possibleFilters: "possibleFilters", activeFilters: "activeFilters" }, outputs: { onFilterChanged: "onFilterChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex a-i-center\">\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by Alarm types' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    (onHidden)=\"resetFilters()\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\">\n        <ng-container *ngIf=\"activeFilters.length > 0; else allTypes\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let filter of activeFilters\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation(); deselect(filter)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <span\n              class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n              [ngStyle]=\"{ 'background-color': filter.color }\"\n            >\n              <i\n                class=\"stroked-icon\"\n                c8yIcon=\"bell\"\n              ></i>\n            </span>\n            {{ filter.filters.type }}\n          </span>\n        </ng-container>\n        <ng-template #allTypes>\n          <span class=\"text-nowrap\">\n            {{ 'All alarm types' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last text-center\">\n        <button\n          class=\"btn-default btn\"\n          [title]=\"'Clear filters' | translate\"\n          *ngIf=\"activeFilters.length\"\n          (click)=\"deselectAll()\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n        <button\n          class=\"btn-default btn btn--caret\"\n          [title]=\"'Alarm types' | translate\"\n          data-cy=\"c8y-alarm-type-filter\"\n          dropdownToggle\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      style=\"max-width: unset; min-width: 250px\"\n      *dropdownMenu\n    >\n      <div class=\"p-16 bg-level-2\">\n        <div>\n          <p>\n            <i\n              class=\"text-info m-r-4\"\n              [c8yIcon]=\"'info-circle'\"\n            ></i>\n            <strong tanslate>The list below may not be complete.</strong>\n          </p>\n          <p tanslate>\n            Recent alarms are displayed below. Past alarms might not be shown. Optionally you can\n            add a custom alarm.\n          </p>\n        </div>\n      </div>\n      <c8y-list-group>\n        <div class=\"input-group p-t-16 p-b-16 p-r-32 p-l-32 separator-bottom\">\n          <input\n            class=\"form-control\"\n            placeholder=\"'Custom alarm type' | translate\"\n            type=\"text\"\n            [(ngModel)]=\"customAlarmTypeInput\"\n            (keydown)=\"confirmWithEnter($event)\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn-dot text-primary\"\n              [attr.aria-label]=\"'Add custom alarm' | translate\"\n              tooltip=\"'Add' | translate\"\n              placement=\"top\"\n              [delay]=\"500\"\n              (click)=\"addCustomAlarmType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n\n        <c8y-li\n          class=\"c8y-list__item__collapse--container-small cdk-drag\"\n          style=\"cursor: pointer\"\n          *ngFor=\"let alarmType of possibleFilters\"\n          (click)=\"toggleAlarmType(alarmType)\"\n        >\n          <c8y-li-checkbox\n            class=\"a-s-center m-t-4 p-r-0 p-l-0\"\n            [selected]=\"alarmType.__active\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"toggleAlarmType(alarmType); $event.stopPropagation()\"\n          ></c8y-li-checkbox>\n          <div class=\"d-flex a-i-center p-l-4\">\n            <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\">\n              <div class=\"c8y-colorpicker c8y-colorpicker--alarm\">\n                <span\n                  class=\"circle-icon-wrapper\"\n                  [ngStyle]=\"{ 'background-color': alarmType.color }\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    [c8yIcon]=\"'bell'\"\n                  ></i>\n                </span>\n              </div>\n            </div>\n            <span class=\"text-truncate text-12 flex-grow\">\n              {{ alarmType.label }}\n            </span>\n            <button\n              class=\"btn-dot btn-dot--danger\"\n              [attr.aria-label]=\"'Remove' | translate\"\n              tooltip=\"'Remove' | translate\"\n              placement=\"top\"\n              *ngIf=\"alarmType.__target === null\"\n              [delay]=\"500\"\n              (click)=\"removeCustomAlarm(alarmType); $event.stopPropagation()\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n        </c8y-li>\n        <c8y-li *ngIf=\"possibleFilters.length === 0\">\n          <c8y-ui-empty-state\n            class=\"p-t-8\"\n            icon=\"c8y-alarm\"\n            [title]=\"'No alarm found' | translate\"\n            [subtitle]=\"\n              'There is no alarm to filter. You can still add a custom alarm.' | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n        </c8y-li>\n        <div class=\"sticky-bottom p-16\">\n          <button\n            class=\"btn btn-block btn-primary\"\n            [disabled]=\"possibleFilters.length === 0\"\n            (click)=\"applyFilterChange(); $event.stopPropagation(); filtersDropdown.hide()\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </c8y-list-group>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsTypeFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms-type-filter', template: "<div class=\"d-flex a-i-center\">\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by Alarm types' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    (onHidden)=\"resetFilters()\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\">\n        <ng-container *ngIf=\"activeFilters.length > 0; else allTypes\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let filter of activeFilters\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation(); deselect(filter)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <span\n              class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n              [ngStyle]=\"{ 'background-color': filter.color }\"\n            >\n              <i\n                class=\"stroked-icon\"\n                c8yIcon=\"bell\"\n              ></i>\n            </span>\n            {{ filter.filters.type }}\n          </span>\n        </ng-container>\n        <ng-template #allTypes>\n          <span class=\"text-nowrap\">\n            {{ 'All alarm types' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last text-center\">\n        <button\n          class=\"btn-default btn\"\n          [title]=\"'Clear filters' | translate\"\n          *ngIf=\"activeFilters.length\"\n          (click)=\"deselectAll()\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n        <button\n          class=\"btn-default btn btn--caret\"\n          [title]=\"'Alarm types' | translate\"\n          data-cy=\"c8y-alarm-type-filter\"\n          dropdownToggle\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      style=\"max-width: unset; min-width: 250px\"\n      *dropdownMenu\n    >\n      <div class=\"p-16 bg-level-2\">\n        <div>\n          <p>\n            <i\n              class=\"text-info m-r-4\"\n              [c8yIcon]=\"'info-circle'\"\n            ></i>\n            <strong tanslate>The list below may not be complete.</strong>\n          </p>\n          <p tanslate>\n            Recent alarms are displayed below. Past alarms might not be shown. Optionally you can\n            add a custom alarm.\n          </p>\n        </div>\n      </div>\n      <c8y-list-group>\n        <div class=\"input-group p-t-16 p-b-16 p-r-32 p-l-32 separator-bottom\">\n          <input\n            class=\"form-control\"\n            placeholder=\"Custom alarm type\"\n            type=\"text\"\n            [(ngModel)]=\"customAlarmTypeInput\"\n            (keydown)=\"confirmWithEnter($event)\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn-dot text-primary\"\n              [attr.aria-label]=\"'Add custom alarm' | translate\"\n              tooltip=\"Add\"\n              placement=\"top\"\n              [delay]=\"500\"\n              (click)=\"addCustomAlarmType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n\n        <c8y-li\n          class=\"c8y-list__item__collapse--container-small cdk-drag\"\n          style=\"cursor: pointer\"\n          *ngFor=\"let alarmType of possibleFilters\"\n          (click)=\"toggleAlarmType(alarmType)\"\n        >\n          <c8y-li-checkbox\n            class=\"a-s-center m-t-4 p-r-0 p-l-0\"\n            [selected]=\"alarmType.__active\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"toggleAlarmType(alarmType); $event.stopPropagation()\"\n          ></c8y-li-checkbox>\n          <div class=\"d-flex a-i-center p-l-4\">\n            <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\">\n              <div class=\"c8y-colorpicker c8y-colorpicker--alarm\">\n                <span\n                  class=\"circle-icon-wrapper\"\n                  [ngStyle]=\"{ 'background-color': alarmType.color }\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    [c8yIcon]=\"'bell'\"\n                  ></i>\n                </span>\n              </div>\n            </div>\n            <span class=\"text-truncate text-12 flex-grow\">\n              {{ alarmType.label }}\n            </span>\n            <button\n              class=\"btn-dot btn-dot--danger\"\n              [attr.aria-label]=\"'Remove' | translate\"\n              tooltip=\"Remove\"\n              placement=\"top\"\n              *ngIf=\"alarmType.__target === null\"\n              [delay]=\"500\"\n              (click)=\"removeCustomAlarm(alarmType); $event.stopPropagation()\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n        </c8y-li>\n        <c8y-li *ngIf=\"possibleFilters.length === 0\">\n          <c8y-ui-empty-state\n            class=\"p-t-8\"\n            icon=\"c8y-alarm\"\n            [title]=\"'No alarm found' | translate\"\n            [subtitle]=\"\n              'There is no alarm to filter. You can still add a custom alarm.' | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n        </c8y-li>\n        <div class=\"sticky-bottom p-16\">\n          <button\n            class=\"btn btn-block btn-primary\"\n            [disabled]=\"possibleFilters.length === 0\"\n            (click)=\"applyFilterChange(); $event.stopPropagation(); filtersDropdown.hide()\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </c8y-list-group>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-alarms-type-filter', template: "<div class=\"d-flex a-i-center\">\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by Alarm types' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    (onHidden)=\"resetFilters()\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\">\n        <ng-container *ngIf=\"activeFilters.length > 0; else allTypes\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let filter of activeFilters\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"$event.stopPropagation(); deselect(filter)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <span\n              class=\"circle-icon-wrapper circle-icon-wrapper--small\"\n              [ngStyle]=\"{ 'background-color': filter.color }\"\n            >\n              <i\n                class=\"stroked-icon\"\n                c8yIcon=\"bell\"\n              ></i>\n            </span>\n            {{ filter.filters.type }}\n          </span>\n        </ng-container>\n        <ng-template #allTypes>\n          <span class=\"text-nowrap\">\n            {{ 'All alarm types' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last text-center\">\n        <button\n          class=\"btn-default btn\"\n          [title]=\"'Clear filters' | translate\"\n          *ngIf=\"activeFilters.length\"\n          (click)=\"deselectAll()\"\n        >\n          <i c8yIcon=\"times\"></i>\n        </button>\n        <button\n          class=\"btn-default btn btn--caret\"\n          [title]=\"'Alarm types' | translate\"\n          data-cy=\"c8y-alarm-type-filter\"\n          dropdownToggle\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      style=\"max-width: unset; min-width: 250px\"\n      *dropdownMenu\n    >\n      <div class=\"p-16 bg-level-2\">\n        <div>\n          <p>\n            <i\n              class=\"text-info m-r-4\"\n              [c8yIcon]=\"'info-circle'\"\n            ></i>\n            <strong tanslate>The list below may not be complete.</strong>\n          </p>\n          <p tanslate>\n            Recent alarms are displayed below. Past alarms might not be shown. Optionally you can\n            add a custom alarm.\n          </p>\n        </div>\n      </div>\n      <c8y-list-group>\n        <div class=\"input-group p-t-16 p-b-16 p-r-32 p-l-32 separator-bottom\">\n          <input\n            class=\"form-control\"\n            placeholder=\"'Custom alarm type' | translate\"\n            type=\"text\"\n            [(ngModel)]=\"customAlarmTypeInput\"\n            (keydown)=\"confirmWithEnter($event)\"\n          />\n          <div class=\"input-group-btn\">\n            <button\n              class=\"btn-dot text-primary\"\n              [attr.aria-label]=\"'Add custom alarm' | translate\"\n              tooltip=\"'Add' | translate\"\n              placement=\"top\"\n              [delay]=\"500\"\n              (click)=\"addCustomAlarmType()\"\n            >\n              <i c8yIcon=\"plus-circle\"></i>\n            </button>\n          </div>\n        </div>\n\n        <c8y-li\n          class=\"c8y-list__item__collapse--container-small cdk-drag\"\n          style=\"cursor: pointer\"\n          *ngFor=\"let alarmType of possibleFilters\"\n          (click)=\"toggleAlarmType(alarmType)\"\n        >\n          <c8y-li-checkbox\n            class=\"a-s-center m-t-4 p-r-0 p-l-0\"\n            [selected]=\"alarmType.__active\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"toggleAlarmType(alarmType); $event.stopPropagation()\"\n          ></c8y-li-checkbox>\n          <div class=\"d-flex a-i-center p-l-4\">\n            <div class=\"c8y-list__item__colorpicker p-t-0 p-b-0 p-l-0\">\n              <div class=\"c8y-colorpicker c8y-colorpicker--alarm\">\n                <span\n                  class=\"circle-icon-wrapper\"\n                  [ngStyle]=\"{ 'background-color': alarmType.color }\"\n                >\n                  <i\n                    class=\"stroked-icon\"\n                    [c8yIcon]=\"'bell'\"\n                  ></i>\n                </span>\n              </div>\n            </div>\n            <span class=\"text-truncate text-12 flex-grow\">\n              {{ alarmType.label }}\n            </span>\n            <button\n              class=\"btn-dot btn-dot--danger\"\n              [attr.aria-label]=\"'Remove' | translate\"\n              tooltip=\"'Remove' | translate\"\n              placement=\"top\"\n              *ngIf=\"alarmType.__target === null\"\n              [delay]=\"500\"\n              (click)=\"removeCustomAlarm(alarmType); $event.stopPropagation()\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n        </c8y-li>\n        <c8y-li *ngIf=\"possibleFilters.length === 0\">\n          <c8y-ui-empty-state\n            class=\"p-t-8\"\n            icon=\"c8y-alarm\"\n            [title]=\"'No alarm found' | translate\"\n            [subtitle]=\"\n              'There is no alarm to filter. You can still add a custom alarm.' | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n        </c8y-li>\n        <div class=\"sticky-bottom p-16\">\n          <button\n            class=\"btn btn-block btn-primary\"\n            [disabled]=\"possibleFilters.length === 0\"\n            (click)=\"applyFilterChange(); $event.stopPropagation(); filtersDropdown.hide()\"\n            translate\n          >\n            Apply\n          </button>\n        </div>\n      </c8y-list-group>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$3.AlarmEventSelectorService }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i3.ColorService }], propDecorators: { alarms: [{
                 type: Input
             }], possibleFilters: [{