@c8y/ngx-components 1021.11.1 → 1021.13.3

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

@@ -8,6 +8,8 @@ import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { sortBy, cloneDeep } from 'lodash-es';
 import { firstValueFrom, map, shareReplay, Subject, BehaviorSubject, combineLatest, tap, switchMap as switchMap$1, takeUntil, from, forkJoin, EMPTY, Observable, pipe, fromEvent } from 'rxjs';
+import * as i8 from '@c8y/ngx-components/interval-picker';
+import { INTERVAL_TITLES, INTERVALS, IntervalPickerComponent } from '@c8y/ngx-components/interval-picker';
 import * as i7 from '@angular/common';
 import { DatePipe, TitleCasePipe } from '@angular/common';
 import * as i1$1 from '@angular/router';
@@ -16,7 +18,7 @@ import { filter, map as map$1, switchMap, startWith, takeUntil as takeUntil$1, c
 import * as i1$2 from '@angular/forms';
 import { FormControl } from '@angular/forms';
 import * as i6 from 'ngx-bootstrap/dropdown';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { BsDropdownDirective, BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import * as i5 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i5$1 from 'ngx-bootstrap/tooltip';
@@ -202,6 +204,20 @@ const ALARM_SEVERITY_ICON_MAP = {
     [Severity.MINOR]: ALARM_SEVERITY_ICON.HIGH_PRIORITY,
     [Severity.WARNING]: ALARM_SEVERITY_ICON.CIRCLE
 };
+/**
+ * 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 DEFAULT_ALARM_COUNTS = { CRITICAL: 0, MAJOR: 0, MINOR: 0, WARNING: 0 };
 const DEFAULT_SEVERITY_VALUES = {
     [Severity.CRITICAL]: true,
@@ -289,11 +305,12 @@ class AlarmsViewService {
      *
      * @param severities an array of severities to filter the alarms.
      * @param showCleared flag indicating whether to show cleared alarms. Defaults to false.
+     * @param selectedDates an array of two dates to filter alarms by creation and last update dates.
      * @param filter additional query filters for retrieving alarms.
      *
      * @returns A promise that resolves to a list of alarms satisfying the specified filters.
      */
-    retrieveAlarms(severities, showCleared = false, filter) {
+    retrieveFilteredAlarms(severities, showCleared = false, selectedDates, filter) {
         const severitiesQuery = this.getSeverityQueryParameter(severities);
         const statusesQuery = this.getStatusQueryParameter(showCleared);
         const _filter = {
@@ -301,10 +318,22 @@ class AlarmsViewService {
             withTotalPages: true,
             ...(severitiesQuery && { severity: severitiesQuery }),
             ...(statusesQuery && { status: statusesQuery }),
+            ...(selectedDates && {
+                lastUpdatedFrom: selectedDates[0].toISOString(),
+                createdTo: selectedDates[1].toISOString()
+            }),
             ...filter
         };
         return this.alarmService.list(_filter);
     }
+    retrieveAlarmsByDate(dates) {
+        return this.alarmService.list({
+            lastUpdatedFrom: dates[0].toISOString(),
+            createdTo: dates[1].toISOString(),
+            pageSize: 50,
+            withTotalPages: true
+        });
+    }
     /**
      * Updates the state to enable or disable intervals.
      * @param value - A boolean value to indicate whether to enable intervals.
@@ -1143,6 +1172,9 @@ class AlarmsFilterComponent {
                 [Severity.MINOR]: params[Severity.MINOR] === 'true',
                 [Severity.WARNING]: params[Severity.WARNING] === 'true'
             });
+            if (params.lastUpdatedFrom) {
+                this.selectedDates = [new Date(params.lastUpdatedFrom), new Date(params.createdTo)];
+            }
             this.applyFilters(true, false);
         });
         this.trackCheckboxStateWithFormChanges();
@@ -1170,7 +1202,8 @@ class AlarmsFilterComponent {
         this.updateChipsAndDefaultValues();
         const combinedFormEvent = {
             showCleared: this.showCleared,
-            severityOptions: this.formGroup.value
+            severityOptions: this.formGroup.value,
+            selectedDates: this.selectedDates
         };
         if (emit) {
             this.onFilterApplied.emit(combinedFormEvent);
@@ -1181,7 +1214,9 @@ class AlarmsFilterComponent {
             this.router.navigate([], {
                 queryParams: {
                     showCleared: combinedFormEvent.showCleared,
-                    ...combinedFormEvent.severityOptions
+                    ...combinedFormEvent.severityOptions,
+                    lastUpdatedFrom: combinedFormEvent.selectedDates?.[0]?.toISOString(),
+                    createdTo: combinedFormEvent.selectedDates?.[1]?.toISOString()
                 },
                 queryParamsHandling: 'merge'
             });
@@ -1280,11 +1315,11 @@ class AlarmsFilterComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsFilterComponent, deps: [{ token: i1$2.FormBuilder }, { token: AlarmsViewService }, { token: i3.AlertService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: { contextSourceId: "contextSourceId" }, outputs: { onFilterApplied: "onFilterApplied" }, viewQueries: [{ propertyName: "filtersDropdown", first: true, predicate: ["filtersDropdown"], descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <label class=\"flex-no-shrink m-b-0\">\n    {{ 'Alarms severity' | translate }}\n  </label>\n  <div\n    class=\"dropdown\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\">\n        <ng-container *ngIf=\"chips.length !== severitiesList.length; else allAlarms\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let chip of chips\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"deselectChip(chip); $event.stopPropagation()\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <i\n              class=\"status stroked-icon icon-12\"\n              [c8yIcon]=\"chip | AlarmSeverityToIcon\"\n              [ngClass]=\"chip | lowercase\"\n            ></i>\n            {{ SEVERITY_LABELS[chip] | translate }}\n          </span>\n        </ng-container>\n        <ng-template #allAlarms>\n          {{ 'All severities' | translate }}\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last\">\n        <button\n          class=\"btn-default btn btn--caret\"\n          title=\"{{ chips | AlarmSeveritiesToTitle }}\"\n          data-cy=\"c8y-alarm-filter\"\n          dropdownToggle\n          (click)=\"resetForm()\"\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <ul\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center sticky-top separator-bottom\">\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"'All' | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            data-cy=\"c8y-alarm-filter--all\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"allChanged($event)\"\n            [ngModel]=\"isEachCheckboxSelected$ | async\"\n            [indeterminate]=\"isIndeterminate$ | async\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"'bell'\"\n          ></i>\n          <span class=\"m-l-8\">{{ 'All' | translate }}</span>\n        </label>\n      </li>\n      <li\n        class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center\"\n        *ngFor=\"let severity of severitiesList\"\n      >\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"SEVERITY_LABELS[severity] | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            [attr.data-cy]=\"'c8y-alarm-filter--' + severity\"\n            [formControlName]=\"severity\"\n            [value]=\"severity\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"severity | AlarmSeverityToIcon\"\n            [ngClass]=\"severity | lowercase\"\n          ></i>\n          <span class=\"m-l-8\">{{ SEVERITY_LABELS[severity] | translate }}</span>\n        </label>\n        <!-- badge -->\n        <div\n          class=\"badge badge-info m-l-auto\"\n          *ngIf=\"alarmCounts[severity] || alarmCounts[severity] === 0\"\n        >\n          <i\n            class=\"icon-spin\"\n            [c8yIcon]=\"'circle-o-notch'\"\n            *ngIf=\"countLoading\"\n          ></i>\n          <span\n            *ngIf=\"!countLoading\"\n            [attr.data-cy]=\"severity + '-badge'\"\n          >\n            {{ alarmCounts[severity] < 99 ? alarmCounts[severity] : '99+' }}\n          </span>\n        </div>\n      </li>\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center separator-top\">\n        <label\n          class=\"c8y-switch\"\n          [attr.aria-label]=\"'Show cleared alarms' | translate\"\n          [attr.data-cy]=\"'c8y-alarms-filter--cleared'\"\n        >\n          <input\n            type=\"checkbox\"\n            #showClearedCheckbox\n            [ngModelOptions]=\"{ standalone: true }\"\n            [(ngModel)]=\"showCleared\"\n            (click)=\"markSeveritiesAsTouched(); updateAlarmsCount(showClearedCheckbox.checked)\"\n          />\n          <span></span>\n          <span\n            class=\"text-truncate\"\n            title=\"{{ 'Show cleared alarms' | translate }}\"\n          >\n            {{ 'Show cleared alarms' | translate }}\n          </span>\n        </label>\n      </li>\n\n      <div class=\"p-16 d-flex sticky-bottom separator-top\">\n        <button\n          [attr.data-cy]=\"'c8y-alarms-filter--apply'\"\n          class=\"btn btn-primary btn-sm flex-grow\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          (click)=\"applyFilters(false); closeDropdown()\"\n          [disabled]=\"shouldDisableApplyButton$ | async\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </ul>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AlarmSeverityToIconPipe, name: "AlarmSeverityToIcon" }, { kind: "pipe", type: AlarmSeveritiesToTitlePipe, name: "AlarmSeveritiesToTitle" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: { contextSourceId: "contextSourceId" }, outputs: { onFilterApplied: "onFilterApplied" }, viewQueries: [{ propertyName: "filtersDropdown", first: true, predicate: ["filtersDropdown"], descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by severity' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\" style=\"min-width: 104px;\">\n        <ng-container *ngIf=\"chips.length !== severitiesList.length; else allAlarms\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let chip of chips\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"deselectChip(chip); $event.stopPropagation()\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <i\n              class=\"status stroked-icon icon-12\"\n              [c8yIcon]=\"chip | AlarmSeverityToIcon\"\n              [ngClass]=\"chip | lowercase\"\n            ></i>\n            {{ SEVERITY_LABELS[chip] | translate }}\n          </span>\n        </ng-container>\n        <ng-template #allAlarms>\n          <span class=\"text-truncate\" title=\"{{ 'All severities' | translate }}\">\n            {{ 'All severities' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last\">\n        <button\n          class=\"btn-default btn btn--caret\"\n          title=\"{{ chips | AlarmSeveritiesToTitle }}\"\n          data-cy=\"c8y-alarm-filter\"\n          dropdownToggle\n          (click)=\"resetForm()\"\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <ul\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center sticky-top separator-bottom\">\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"'All' | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            data-cy=\"c8y-alarm-filter--all\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"allChanged($event)\"\n            [ngModel]=\"isEachCheckboxSelected$ | async\"\n            [indeterminate]=\"isIndeterminate$ | async\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"'bell'\"\n          ></i>\n          <span class=\"m-l-8\">{{ 'All' | translate }}</span>\n        </label>\n      </li>\n      <li\n        class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center\"\n        *ngFor=\"let severity of severitiesList\"\n      >\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"SEVERITY_LABELS[severity] | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            [attr.data-cy]=\"'c8y-alarm-filter--' + severity\"\n            [formControlName]=\"severity\"\n            [value]=\"severity\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"severity | AlarmSeverityToIcon\"\n            [ngClass]=\"severity | lowercase\"\n          ></i>\n          <span class=\"m-l-8\">{{ SEVERITY_LABELS[severity] | translate }}</span>\n        </label>\n        <!-- badge -->\n        <div\n          class=\"badge badge-info m-l-auto\"\n          *ngIf=\"alarmCounts[severity] || alarmCounts[severity] === 0\"\n        >\n          <i\n            class=\"icon-spin\"\n            [c8yIcon]=\"'circle-o-notch'\"\n            *ngIf=\"countLoading\"\n          ></i>\n          <span\n            *ngIf=\"!countLoading\"\n            [attr.data-cy]=\"severity + '-badge'\"\n          >\n            {{ alarmCounts[severity] < 99 ? alarmCounts[severity] : '99+' }}\n          </span>\n        </div>\n      </li>\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center separator-top\">\n        <label\n          class=\"c8y-switch\"\n          [attr.aria-label]=\"'Show cleared alarms' | translate\"\n          [attr.data-cy]=\"'c8y-alarms-filter--cleared'\"\n        >\n          <input\n            type=\"checkbox\"\n            #showClearedCheckbox\n            [ngModelOptions]=\"{ standalone: true }\"\n            [(ngModel)]=\"showCleared\"\n            (click)=\"markSeveritiesAsTouched(); updateAlarmsCount(showClearedCheckbox.checked)\"\n          />\n          <span></span>\n          <span\n            class=\"text-truncate\"\n            title=\"{{ 'Show cleared alarms' | translate }}\"\n          >\n            {{ 'Show cleared alarms' | translate }}\n          </span>\n        </label>\n      </li>\n\n      <div class=\"p-16 d-flex sticky-bottom separator-top\">\n        <button\n          [attr.data-cy]=\"'c8y-alarms-filter--apply'\"\n          class=\"btn btn-primary btn-sm flex-grow\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          (click)=\"applyFilters(false); closeDropdown()\"\n          [disabled]=\"shouldDisableApplyButton$ | async\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </ul>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AlarmSeverityToIconPipe, name: "AlarmSeverityToIcon" }, { kind: "pipe", type: AlarmSeveritiesToTitlePipe, name: "AlarmSeveritiesToTitle" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms-filter', template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <label class=\"flex-no-shrink m-b-0\">\n    {{ 'Alarms severity' | translate }}\n  </label>\n  <div\n    class=\"dropdown\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\">\n        <ng-container *ngIf=\"chips.length !== severitiesList.length; else allAlarms\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let chip of chips\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"deselectChip(chip); $event.stopPropagation()\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <i\n              class=\"status stroked-icon icon-12\"\n              [c8yIcon]=\"chip | AlarmSeverityToIcon\"\n              [ngClass]=\"chip | lowercase\"\n            ></i>\n            {{ SEVERITY_LABELS[chip] | translate }}\n          </span>\n        </ng-container>\n        <ng-template #allAlarms>\n          {{ 'All severities' | translate }}\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last\">\n        <button\n          class=\"btn-default btn btn--caret\"\n          title=\"{{ chips | AlarmSeveritiesToTitle }}\"\n          data-cy=\"c8y-alarm-filter\"\n          dropdownToggle\n          (click)=\"resetForm()\"\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <ul\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center sticky-top separator-bottom\">\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"'All' | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            data-cy=\"c8y-alarm-filter--all\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"allChanged($event)\"\n            [ngModel]=\"isEachCheckboxSelected$ | async\"\n            [indeterminate]=\"isIndeterminate$ | async\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"'bell'\"\n          ></i>\n          <span class=\"m-l-8\">{{ 'All' | translate }}</span>\n        </label>\n      </li>\n      <li\n        class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center\"\n        *ngFor=\"let severity of severitiesList\"\n      >\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"SEVERITY_LABELS[severity] | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            [attr.data-cy]=\"'c8y-alarm-filter--' + severity\"\n            [formControlName]=\"severity\"\n            [value]=\"severity\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"severity | AlarmSeverityToIcon\"\n            [ngClass]=\"severity | lowercase\"\n          ></i>\n          <span class=\"m-l-8\">{{ SEVERITY_LABELS[severity] | translate }}</span>\n        </label>\n        <!-- badge -->\n        <div\n          class=\"badge badge-info m-l-auto\"\n          *ngIf=\"alarmCounts[severity] || alarmCounts[severity] === 0\"\n        >\n          <i\n            class=\"icon-spin\"\n            [c8yIcon]=\"'circle-o-notch'\"\n            *ngIf=\"countLoading\"\n          ></i>\n          <span\n            *ngIf=\"!countLoading\"\n            [attr.data-cy]=\"severity + '-badge'\"\n          >\n            {{ alarmCounts[severity] < 99 ? alarmCounts[severity] : '99+' }}\n          </span>\n        </div>\n      </li>\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center separator-top\">\n        <label\n          class=\"c8y-switch\"\n          [attr.aria-label]=\"'Show cleared alarms' | translate\"\n          [attr.data-cy]=\"'c8y-alarms-filter--cleared'\"\n        >\n          <input\n            type=\"checkbox\"\n            #showClearedCheckbox\n            [ngModelOptions]=\"{ standalone: true }\"\n            [(ngModel)]=\"showCleared\"\n            (click)=\"markSeveritiesAsTouched(); updateAlarmsCount(showClearedCheckbox.checked)\"\n          />\n          <span></span>\n          <span\n            class=\"text-truncate\"\n            title=\"{{ 'Show cleared alarms' | translate }}\"\n          >\n            {{ 'Show cleared alarms' | translate }}\n          </span>\n        </label>\n      </li>\n\n      <div class=\"p-16 d-flex sticky-bottom separator-top\">\n        <button\n          [attr.data-cy]=\"'c8y-alarms-filter--apply'\"\n          class=\"btn btn-primary btn-sm flex-grow\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          (click)=\"applyFilters(false); closeDropdown()\"\n          [disabled]=\"shouldDisableApplyButton$ | async\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </ul>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'c8y-alarms-filter', template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by severity' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\" style=\"min-width: 104px;\">\n        <ng-container *ngIf=\"chips.length !== severitiesList.length; else allAlarms\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngFor=\"let chip of chips\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"deselectChip(chip); $event.stopPropagation()\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            <i\n              class=\"status stroked-icon icon-12\"\n              [c8yIcon]=\"chip | AlarmSeverityToIcon\"\n              [ngClass]=\"chip | lowercase\"\n            ></i>\n            {{ SEVERITY_LABELS[chip] | translate }}\n          </span>\n        </ng-container>\n        <ng-template #allAlarms>\n          <span class=\"text-truncate\" title=\"{{ 'All severities' | translate }}\">\n            {{ 'All severities' | translate }}\n          </span>\n        </ng-template>\n      </div>\n      <div class=\"input-group-btn input-group-btn--last\">\n        <button\n          class=\"btn-default btn btn--caret\"\n          title=\"{{ chips | AlarmSeveritiesToTitle }}\"\n          data-cy=\"c8y-alarm-filter\"\n          dropdownToggle\n          (click)=\"resetForm()\"\n        >\n          <i class=\"caret\"></i>\n        </button>\n      </div>\n    </div>\n    <ul\n      class=\"dropdown-menu dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center sticky-top separator-bottom\">\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"'All' | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            data-cy=\"c8y-alarm-filter--all\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"allChanged($event)\"\n            [ngModel]=\"isEachCheckboxSelected$ | async\"\n            [indeterminate]=\"isIndeterminate$ | async\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"'bell'\"\n          ></i>\n          <span class=\"m-l-8\">{{ 'All' | translate }}</span>\n        </label>\n      </li>\n      <li\n        class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center\"\n        *ngFor=\"let severity of severitiesList\"\n      >\n        <label\n          class=\"c8y-checkbox d-flex a-i-center\"\n          [title]=\"SEVERITY_LABELS[severity] | translate\"\n        >\n          <input\n            type=\"checkbox\"\n            [attr.data-cy]=\"'c8y-alarm-filter--' + severity\"\n            [formControlName]=\"severity\"\n            [value]=\"severity\"\n            (click)=\"markSeveritiesAsTouched()\"\n          />\n          <span></span>\n          <i\n            class=\"status stroked-icon m-l-8 icon-20\"\n            [c8yIcon]=\"severity | AlarmSeverityToIcon\"\n            [ngClass]=\"severity | lowercase\"\n          ></i>\n          <span class=\"m-l-8\">{{ SEVERITY_LABELS[severity] | translate }}</span>\n        </label>\n        <!-- badge -->\n        <div\n          class=\"badge badge-info m-l-auto\"\n          *ngIf=\"alarmCounts[severity] || alarmCounts[severity] === 0\"\n        >\n          <i\n            class=\"icon-spin\"\n            [c8yIcon]=\"'circle-o-notch'\"\n            *ngIf=\"countLoading\"\n          ></i>\n          <span\n            *ngIf=\"!countLoading\"\n            [attr.data-cy]=\"severity + '-badge'\"\n          >\n            {{ alarmCounts[severity] < 99 ? alarmCounts[severity] : '99+' }}\n          </span>\n        </div>\n      </li>\n      <li class=\"p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center separator-top\">\n        <label\n          class=\"c8y-switch\"\n          [attr.aria-label]=\"'Show cleared alarms' | translate\"\n          [attr.data-cy]=\"'c8y-alarms-filter--cleared'\"\n        >\n          <input\n            type=\"checkbox\"\n            #showClearedCheckbox\n            [ngModelOptions]=\"{ standalone: true }\"\n            [(ngModel)]=\"showCleared\"\n            (click)=\"markSeveritiesAsTouched(); updateAlarmsCount(showClearedCheckbox.checked)\"\n          />\n          <span></span>\n          <span\n            class=\"text-truncate\"\n            title=\"{{ 'Show cleared alarms' | translate }}\"\n          >\n            {{ 'Show cleared alarms' | translate }}\n          </span>\n        </label>\n      </li>\n\n      <div class=\"p-16 d-flex sticky-bottom separator-top\">\n        <button\n          [attr.data-cy]=\"'c8y-alarms-filter--apply'\"\n          class=\"btn btn-primary btn-sm flex-grow\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          (click)=\"applyFilters(false); closeDropdown()\"\n          [disabled]=\"shouldDisableApplyButton$ | async\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </ul>\n  </div>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: AlarmsViewService }, { type: i3.AlertService }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }], propDecorators: { contextSourceId: [{
                 type: Input
             }], onFilterApplied: [{
@@ -1679,6 +1714,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 args: ['scrollWrapper']
             }] } });
 
+class AlarmsDateFilterComponent {
+    constructor(formBuilder, router, activatedRoute) {
+        this.formBuilder = formBuilder;
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+        this.DEFAULT_INTERVAL = 'none';
+        this.INTERVALS = INTERVALS_EXTENDED;
+        this.INTERVAL_TITLES = INTERVAL_TITLES_EXTENDED;
+        this.DATE_FORMAT = 'short';
+        this.destroy$ = new Subject();
+        this.dateFilterChange = new EventEmitter();
+    }
+    ngOnInit() {
+        const context = this.getDefaultContext();
+        this.form = this.createForm(context);
+        this.date = [
+            this.form.value.currentDateContextFromDate,
+            this.form.value.currentDateContextToDate
+        ];
+        this.activatedRoute.queryParams.pipe(takeUntil(this.destroy$)).subscribe(params => {
+            this.showCleared = params.showCleared === 'true';
+            this.severityOptions = {
+                [Severity.CRITICAL]: params.critical === 'true',
+                [Severity.MAJOR]: params.major === 'true',
+                [Severity.MINOR]: params.minor === 'true',
+                [Severity.WARNING]: params.warning === 'true'
+            };
+            if (params.typeFilters) {
+                this.typeFilters = params.typeFilters;
+            }
+        });
+        this.subscribeToIntervalChange();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    applyDateFilter() {
+        const combinedFormEvent = {
+            showCleared: this.showCleared,
+            severityOptions: this.severityOptions,
+            typeFilters: this.typeFilters,
+            selectedDates: [
+                new Date(this.form.value.temporaryUserSelectedFromDate),
+                new Date(this.form.value.temporaryUserSelectedToDate)
+            ]
+        };
+        // needed for custom interval
+        this.date = [
+            this.form.value.temporaryUserSelectedFromDate,
+            this.form.value.temporaryUserSelectedToDate
+        ];
+        this.router.navigate([], {
+            relativeTo: this.activatedRoute,
+            queryParams: {
+                showCleared: combinedFormEvent.showCleared,
+                ...combinedFormEvent.severityOptions,
+                typeFilters: this.typeFilters,
+                lastUpdatedFrom: combinedFormEvent.selectedDates[0].toISOString(),
+                createdTo: combinedFormEvent.selectedDates[1].toISOString()
+            }
+        });
+        this.dateFilterChange.emit(combinedFormEvent);
+    }
+    getDefaultContext() {
+        const defaultStartDate = 'months';
+        return {
+            date: this.getDateTimeContextByInterval(defaultStartDate),
+            interval: this.DEFAULT_INTERVAL
+        };
+    }
+    getDateTimeContextByInterval(intervalId) {
+        const interval = INTERVALS_EXTENDED.find(({ id }) => id === intervalId);
+        if (interval.id === 'none') {
+            return [new Date(0), new Date()];
+        }
+        const dateTo = new Date();
+        const dateFrom = new Date(dateTo.valueOf() - interval.timespanInMs);
+        return [dateFrom, dateTo];
+    }
+    subscribeToIntervalChange() {
+        this.form.controls.currentDateContextInterval.valueChanges
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(interval => {
+            if (interval === 'custom') {
+                this.form.patchValue({
+                    temporaryUserSelectedFromDate: this.form.controls.currentDateContextFromDate.value
+                }, { emitEvent: false });
+                return;
+            }
+            const date = this.getDateTimeContextByInterval(interval);
+            this.dropdown.isOpen = false;
+            this.date = date.map(d => d.toISOString());
+            this.form.patchValue({
+                temporaryUserSelectedFromDate: date[0].toISOString(),
+                temporaryUserSelectedToDate: date[1].toISOString(),
+                currentDateContextInterval: interval
+            }, { emitEvent: false });
+            this.applyDateFilter();
+        });
+    }
+    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: "18.2.9", ngImport: i0, type: AlarmsDateFilterComponent, deps: [{ token: i1$2.FormBuilder }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", outputs: { dateFilterChange: "dateFilterChange" }, 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    <div\n      class=\"dropdown flex-grow\"\n      #dropdown=\"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 {{\n          date[1] | c8yDate: DATE_FORMAT\n        }}\"\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 class=\"text-12 text-truncate\">\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 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 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 || form.value.realtime\"\n              translate\n            >\n              Apply\n            </button>\n          </div>\n        </ng-container>\n      </ul>\n    </div>\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: 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: i8.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,
+            args: [{ selector: 'c8y-alarms-date-filter', 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    <div\n      class=\"dropdown flex-grow\"\n      #dropdown=\"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 {{\n          date[1] | c8yDate: DATE_FORMAT\n        }}\"\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 class=\"text-12 text-truncate\">\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 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 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 || form.value.realtime\"\n              translate\n            >\n              Apply\n            </button>\n          </div>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }], propDecorators: { dateFilterChange: [{
+                type: Output
+            }], dropdown: [{
+                type: ViewChild,
+                args: [BsDropdownDirective]
+            }] } });
+
 class AlarmsTypeFilterComponent {
     constructor(formBuilder, alarmEventSelectorService, activatedRoute, router) {
         this.formBuilder = formBuilder;
@@ -1784,11 +1942,11 @@ class AlarmsTypeFilterComponent {
         return [...alarmFilters, ...missingFilters];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsTypeFilterComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.AlarmEventSelectorService }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }], 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" }, outputs: { onFilterChanged: "onFilterChanged" }, usesOnChanges: true, ngImport: i0, template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <label class=\"m-b-0 flex-no-shrink\">\n    {{ 'Alarm types' | translate }}\n  </label>\n  <div\n    class=\"dropdown\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\">\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          {{ 'All alarm types' | translate }}\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: 100%; min-width: 250px\"\n      *dropdownMenu\n    >\n      <c8y-alarm-event-selection-list\n        [title]=\"'Alarm type filter' | translate\"\n        [attr.name]=\"formControlName\"\n        [config]=\"{\n          title: 'Alarm type filter' | translate,\n          allowChangingContext: false\n        }\"\n        [inline]=\"true\"\n        [hideSource]=\"true\"\n        [addButtonLabel]=\"'Manage alarm types' | translate\"\n        [canEdit]=\"false\"\n        [canDragAndDrop]=\"false\"\n        [canRemove]=\"false\"\n        [timelineType]=\"'ALARM'\"\n        [activeToggleAsSwitch]=\"false\"\n        [formControlName]=\"formControlName\"\n      >\n        <c8y-ui-empty-state\n          class=\"p-t-8\"\n          icon=\"c8y-alarm\"\n          [title]=\"'No alarm found' | translate\"\n          [subtitle]=\"'There is no alarm to filter. You can still add a custom alarm.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </c8y-alarm-event-selection-list>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.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.ɵ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: "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: i2$1.AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "config"] }, { 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" }, outputs: { onFilterChanged: "onFilterChanged" }, usesOnChanges: true, ngImport: i0, template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by Alarm types' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\">\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      <c8y-alarm-event-selection-list\n        [title]=\"'Alarm type filter' | translate\"\n        [attr.name]=\"formControlName\"\n        [config]=\"{\n          title: 'Alarm type filter' | translate,\n          allowChangingContext: false\n        }\"\n        [inline]=\"true\"\n        [hideSource]=\"true\"\n        [addButtonLabel]=\"'Manage alarm types' | translate\"\n        [canEdit]=\"false\"\n        [canDragAndDrop]=\"false\"\n        [canRemove]=\"false\"\n        [timelineType]=\"'ALARM'\"\n        [activeToggleAsSwitch]=\"false\"\n        [formControlName]=\"formControlName\"\n      >\n        <c8y-ui-empty-state\n          class=\"p-t-8\"\n          icon=\"c8y-alarm\"\n          [title]=\"'No alarm found' | translate\"\n          [subtitle]=\"'There is no alarm to filter. You can still add a custom alarm.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </c8y-alarm-event-selection-list>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: i3.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.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.ɵ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: "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: i2$1.AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "config"] }, { 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: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <label class=\"m-b-0 flex-no-shrink\">\n    {{ 'Alarm types' | translate }}\n  </label>\n  <div\n    class=\"dropdown\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\">\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          {{ 'All alarm types' | translate }}\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: 100%; min-width: 250px\"\n      *dropdownMenu\n    >\n      <c8y-alarm-event-selection-list\n        [title]=\"'Alarm type filter' | translate\"\n        [attr.name]=\"formControlName\"\n        [config]=\"{\n          title: 'Alarm type filter' | translate,\n          allowChangingContext: false\n        }\"\n        [inline]=\"true\"\n        [hideSource]=\"true\"\n        [addButtonLabel]=\"'Manage alarm types' | translate\"\n        [canEdit]=\"false\"\n        [canDragAndDrop]=\"false\"\n        [canRemove]=\"false\"\n        [timelineType]=\"'ALARM'\"\n        [activeToggleAsSwitch]=\"false\"\n        [formControlName]=\"formControlName\"\n      >\n        <c8y-ui-empty-state\n          class=\"p-t-8\"\n          icon=\"c8y-alarm\"\n          [title]=\"'No alarm found' | translate\"\n          [subtitle]=\"'There is no alarm to filter. You can still add a custom alarm.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </c8y-alarm-event-selection-list>\n    </div>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'c8y-alarms-type-filter', template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"dropdown\"\n    title=\"{{ 'Filter by Alarm types' | translate }}\"\n    dropdown\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group fit-w\">\n      <div class=\"form-control d-flex a-i-center inner-scroll\">\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      <c8y-alarm-event-selection-list\n        [title]=\"'Alarm type filter' | translate\"\n        [attr.name]=\"formControlName\"\n        [config]=\"{\n          title: 'Alarm type filter' | translate,\n          allowChangingContext: false\n        }\"\n        [inline]=\"true\"\n        [hideSource]=\"true\"\n        [addButtonLabel]=\"'Manage alarm types' | translate\"\n        [canEdit]=\"false\"\n        [canDragAndDrop]=\"false\"\n        [canRemove]=\"false\"\n        [timelineType]=\"'ALARM'\"\n        [activeToggleAsSwitch]=\"false\"\n        [formControlName]=\"formControlName\"\n      >\n        <c8y-ui-empty-state\n          class=\"p-t-8\"\n          icon=\"c8y-alarm\"\n          [title]=\"'No alarm found' | translate\"\n          [subtitle]=\"'There is no alarm to filter. You can still add a custom alarm.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      </c8y-alarm-event-selection-list>\n    </div>\n  </div>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i2$1.AlarmEventSelectorService }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }], propDecorators: { alarms: [{
                 type: Input
             }], onFilterChanged: [{
@@ -1846,13 +2004,18 @@ class AlarmsComponent {
         this.alarmsViewService.reloadAlarmsList$.next();
         this.isRealtimeActive.next(false);
     }
-    applyFormFilters({ severityOptions, showCleared }) {
+    applyFormFilters({ severityOptions, showCleared, selectedDates }) {
         this.severityOptions = severityOptions;
         this.showCleared = showCleared;
+        this.selectedDates = selectedDates;
         this.selectedSeverities = this.alarmsViewService.updateSelectedSeverities(this.severityOptions);
         this.alarmsViewService.reloadAlarmsList$.next();
         this.isRealtimeActive.next(false);
     }
+    async applyDateFilter(selectedDates) {
+        this.alarms$.next(await this.alarmsViewService.retrieveAlarmsByDate(selectedDates));
+        this.isRealtimeActive.next(false);
+    }
     async clearAll() {
         try {
             const translatedBody = this.translateService.instant(gettext('Do you really want to clear all alarms of selected severities?'));
@@ -1915,7 +2078,7 @@ class AlarmsComponent {
             if (this.typeFilters.length > 0) {
                 additionalFilter.type = this.typeFilters.map(({ filters }) => filters.type).join(',');
             }
-            return await this.alarmsViewService.retrieveAlarms(this.selectedSeverities, this.showCleared, additionalFilter);
+            return await this.alarmsViewService.retrieveFilteredAlarms(this.selectedSeverities, this.showCleared, this.selectedDates, additionalFilter);
         }
         catch (error) {
             if (error?.res?.status === 403) {
@@ -1948,11 +2111,11 @@ class AlarmsComponent {
         this.contextSourceId = this.contextRouteService.getContextData(this.activatedRoute)?.contextData?.id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: AlarmsViewService }, { token: i3.AlarmWithChildrenRealtimeService }, { token: i3.AlertService }, { token: i3.ContextRouteService }, { token: i3.ModalService }, { token: i1.TranslateService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmsComponent, selector: "c8y-alarms", providers: [AlarmWithChildrenRealtimeService], viewQueries: [{ propertyName: "alarmIntervalRefreshComponent", first: true, predicate: AlarmsIntervalRefreshComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"(activatedRoute.data | async)?.title\">\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n</ng-container>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-alarms-filter\n    [contextSourceId]=\"contextSourceId\"\n    (onFilterApplied)=\"applyFormFilters($event)\"\n    class=\"d-block fit-w\"\n  ></c8y-alarms-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-alarms-type-filter\n    [alarms]=\"alarms$ | async\"\n    (onFilterChanged)=\"applyTypeFilters($event)\"\n    class=\"d-block fit-w\"\n  ></c8y-alarms-type-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"0\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Clear all alarms' | translate\"\n    type=\"button\"\n    (click)=\"clearAll()\"\n    data-cy=\"c8y-alarms-view--clear-all-button\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear all`alarms`' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<!--Realtime button-->\n<ng-template #realtimeRefresh>\n  <div class=\"input-group-btn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      [attr.aria-label]=\"'Refresh' | translate\"\n      [tooltip]=\"\n        (isRealtimeActive | async)\n          ? (NEW_REALTIME_ALARM_MESSAGE | translate)\n          : (REFRESH_LABEL | translate)\n      \"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      [disabled]=\"isLoading$ | async\"\n      (click)=\"refresh()\"\n    >\n      <span\n        class=\"tag tag--info m-r-8\"\n        *ngIf=\"isRealtimeActive | async\"\n      >\n        {{ 'New alarms' | translate }}\n      </span>\n      <i\n        c8yIcon=\"refresh\"\n        [ngClass]=\"{ 'icon-spin': isLoading$ | async }\"\n      ></i>\n    </button>\n    <button\n      class=\"c8y-realtime btn btn-default btn-sm\"\n      [attr.aria-label]=\"realtimeIconTitle\"\n      [tooltip]=\"realtimeIconTitle\"\n      placement=\"bottom\"\n      type=\"button\"\n      [container]=\"'body'\"\n      (click)=\"toggleRealtimeState()\"\n    >\n      <span\n        class=\"c8y-pulse m-0\"\n        [ngClass]=\"{\n          active: isRealtimeToggleOn,\n          inactive: !isRealtimeToggleOn\n        }\"\n      ></span>\n    </button>\n  </div>\n</ng-template>\n\n<c8y-help\n  src=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n></c8y-help>\n\n<div class=\"card content-fullpage split-view--5-7 grid__row--1\">\n  <c8y-alarms-list\n    class=\"d-contents\"\n    [isInitialLoading]=\"isLoading$ | async\"\n    [alarms]=\"alarms$ | async\"\n    [typeFilters]=\"typeFilters\"\n    (onScrollingStateChange)=\"changeInterval(!$event)\"\n    (onSelectedAlarm)=\"changeInterval(false)\"\n    [splitView]=\"true\"\n    [hasPermissions]=\"!isDisabled\"\n  >\n    <ng-container *ngIf=\"isIntervalRefresh; else realtimeRefresh\">\n      <c8y-alarms-interval-refresh\n        [alarmsListLoading$]=\"isLoading$\"\n        [isIntervalToggleEnabled]=\"shouldShowIntervalToggle$ | async\"\n        (onCountdownEnded)=\"refresh()\"\n        [isDisabled]=\"isDisabled\"\n      ></c8y-alarms-interval-refresh>\n    </ng-container>\n  </c8y-alarms-list>\n\n  <router-outlet class=\"d-contents\"></router-outlet>\n</div>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { kind: "component", type: AlarmsIntervalRefreshComponent, selector: "c8y-alarms-interval-refresh", inputs: ["isDisabled", "alarmsListLoading$", "isIntervalToggleEnabled"], outputs: ["onCountdownEnded"] }, { kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: AlarmsTypeFilterComponent, selector: "c8y-alarms-type-filter", inputs: ["alarms"], outputs: ["onFilterChanged"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: AlarmsComponent, selector: "c8y-alarms", providers: [AlarmWithChildrenRealtimeService], viewQueries: [{ propertyName: "alarmIntervalRefreshComponent", first: true, predicate: AlarmsIntervalRefreshComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"(activatedRoute.data | async)?.title\">\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n</ng-container>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-filter\n    [contextSourceId]=\"contextSourceId\"\n    (onFilterApplied)=\"applyFormFilters($event)\"\n    class=\"d-block fit-w\"\n  ></c8y-alarms-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item \n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-date-filter (dateFilterChange)=\"applyFormFilters($event)\"></c8y-alarms-date-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-alarms-type-filter\n    [alarms]=\"alarms$ | async\"\n    (onFilterChanged)=\"applyTypeFilters($event)\"\n    class=\"d-block fit-w\"\n  ></c8y-alarms-type-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"0\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Clear all alarms' | translate\"\n    type=\"button\"\n    (click)=\"clearAll()\"\n    data-cy=\"c8y-alarms-view--clear-all-button\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear all`alarms`' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<!--Realtime button-->\n<ng-template #realtimeRefresh>\n  <div class=\"input-group-btn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      [attr.aria-label]=\"'Refresh' | translate\"\n      [tooltip]=\"\n        (isRealtimeActive | async)\n          ? (NEW_REALTIME_ALARM_MESSAGE | translate)\n          : (REFRESH_LABEL | translate)\n      \"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      [disabled]=\"isLoading$ | async\"\n      (click)=\"refresh()\"\n    >\n      <span\n        class=\"tag tag--info m-r-8\"\n        *ngIf=\"isRealtimeActive | async\"\n      >\n        {{ 'New alarms' | translate }}\n      </span>\n      <i\n        c8yIcon=\"refresh\"\n        [ngClass]=\"{ 'icon-spin': isLoading$ | async }\"\n      ></i>\n    </button>\n    <button\n      class=\"c8y-realtime btn btn-default btn-sm\"\n      [attr.aria-label]=\"realtimeIconTitle\"\n      [tooltip]=\"realtimeIconTitle\"\n      placement=\"bottom\"\n      type=\"button\"\n      [container]=\"'body'\"\n      (click)=\"toggleRealtimeState()\"\n    >\n      <span\n        class=\"c8y-pulse m-0\"\n        [ngClass]=\"{\n          active: isRealtimeToggleOn,\n          inactive: !isRealtimeToggleOn\n        }\"\n      ></span>\n    </button>\n  </div>\n</ng-template>\n\n<c8y-help\n  src=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n></c8y-help>\n\n<div class=\"card content-fullpage split-view--5-7 grid__row--1\">\n  <c8y-alarms-list\n    class=\"d-contents\"\n    [isInitialLoading]=\"isLoading$ | async\"\n    [alarms]=\"alarms$ | async\"\n    [typeFilters]=\"typeFilters\"\n    (onScrollingStateChange)=\"changeInterval(!$event)\"\n    (onSelectedAlarm)=\"changeInterval(false)\"\n    [splitView]=\"true\"\n    [hasPermissions]=\"!isDisabled\"\n  >\n    <ng-container *ngIf=\"isIntervalRefresh; else realtimeRefresh\">\n      <c8y-alarms-interval-refresh\n        [alarmsListLoading$]=\"isLoading$\"\n        [isIntervalToggleEnabled]=\"shouldShowIntervalToggle$ | async\"\n        (onCountdownEnded)=\"refresh()\"\n        [isDisabled]=\"isDisabled\"\n      ></c8y-alarms-interval-refresh>\n    </ng-container>\n  </c8y-alarms-list>\n\n  <router-outlet class=\"d-contents\"></router-outlet>\n</div>\n", dependencies: [{ kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "component", type: i3.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { kind: "component", type: AlarmsIntervalRefreshComponent, selector: "c8y-alarms-interval-refresh", inputs: ["isDisabled", "alarmsListLoading$", "isIntervalToggleEnabled"], outputs: ["onCountdownEnded"] }, { kind: "component", type: AlarmsListComponent, selector: "c8y-alarms-list", inputs: ["alarms", "hasPermissions", "typeFilters", "loadMoreMode", "navigationOptions", "isInitialLoading", "splitView"], outputs: ["onSelectedAlarm", "onScrollingStateChange"] }, { kind: "component", type: AlarmsDateFilterComponent, selector: "c8y-alarms-date-filter", outputs: ["dateFilterChange"] }, { kind: "component", type: AlarmsTypeFilterComponent, selector: "c8y-alarms-type-filter", inputs: ["alarms"], outputs: ["onFilterChanged"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-alarms', providers: [AlarmWithChildrenRealtimeService], template: "<ng-container *ngIf=\"(activatedRoute.data | async)?.title\">\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n</ng-container>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-alarms-filter\n    [contextSourceId]=\"contextSourceId\"\n    (onFilterApplied)=\"applyFormFilters($event)\"\n    class=\"d-block fit-w\"\n  ></c8y-alarms-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-alarms-type-filter\n    [alarms]=\"alarms$ | async\"\n    (onFilterChanged)=\"applyTypeFilters($event)\"\n    class=\"d-block fit-w\"\n  ></c8y-alarms-type-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"0\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Clear all alarms' | translate\"\n    type=\"button\"\n    (click)=\"clearAll()\"\n    data-cy=\"c8y-alarms-view--clear-all-button\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear all`alarms`' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<!--Realtime button-->\n<ng-template #realtimeRefresh>\n  <div class=\"input-group-btn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      [attr.aria-label]=\"'Refresh' | translate\"\n      [tooltip]=\"\n        (isRealtimeActive | async)\n          ? (NEW_REALTIME_ALARM_MESSAGE | translate)\n          : (REFRESH_LABEL | translate)\n      \"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      [disabled]=\"isLoading$ | async\"\n      (click)=\"refresh()\"\n    >\n      <span\n        class=\"tag tag--info m-r-8\"\n        *ngIf=\"isRealtimeActive | async\"\n      >\n        {{ 'New alarms' | translate }}\n      </span>\n      <i\n        c8yIcon=\"refresh\"\n        [ngClass]=\"{ 'icon-spin': isLoading$ | async }\"\n      ></i>\n    </button>\n    <button\n      class=\"c8y-realtime btn btn-default btn-sm\"\n      [attr.aria-label]=\"realtimeIconTitle\"\n      [tooltip]=\"realtimeIconTitle\"\n      placement=\"bottom\"\n      type=\"button\"\n      [container]=\"'body'\"\n      (click)=\"toggleRealtimeState()\"\n    >\n      <span\n        class=\"c8y-pulse m-0\"\n        [ngClass]=\"{\n          active: isRealtimeToggleOn,\n          inactive: !isRealtimeToggleOn\n        }\"\n      ></span>\n    </button>\n  </div>\n</ng-template>\n\n<c8y-help\n  src=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n></c8y-help>\n\n<div class=\"card content-fullpage split-view--5-7 grid__row--1\">\n  <c8y-alarms-list\n    class=\"d-contents\"\n    [isInitialLoading]=\"isLoading$ | async\"\n    [alarms]=\"alarms$ | async\"\n    [typeFilters]=\"typeFilters\"\n    (onScrollingStateChange)=\"changeInterval(!$event)\"\n    (onSelectedAlarm)=\"changeInterval(false)\"\n    [splitView]=\"true\"\n    [hasPermissions]=\"!isDisabled\"\n  >\n    <ng-container *ngIf=\"isIntervalRefresh; else realtimeRefresh\">\n      <c8y-alarms-interval-refresh\n        [alarmsListLoading$]=\"isLoading$\"\n        [isIntervalToggleEnabled]=\"shouldShowIntervalToggle$ | async\"\n        (onCountdownEnded)=\"refresh()\"\n        [isDisabled]=\"isDisabled\"\n      ></c8y-alarms-interval-refresh>\n    </ng-container>\n  </c8y-alarms-list>\n\n  <router-outlet class=\"d-contents\"></router-outlet>\n</div>\n" }]
+            args: [{ selector: 'c8y-alarms', providers: [AlarmWithChildrenRealtimeService], template: "<ng-container *ngIf=\"(activatedRoute.data | async)?.title\">\n  <c8y-title>{{ TITLE | translate }}</c8y-title>\n</ng-container>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-filter\n    [contextSourceId]=\"contextSourceId\"\n    (onFilterApplied)=\"applyFormFilters($event)\"\n    class=\"d-block fit-w\"\n  ></c8y-alarms-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item \n  [placement]=\"'left'\"\n  itemClass=\"navbar-form min-width-fit\"\n>\n  <c8y-alarms-date-filter (dateFilterChange)=\"applyFormFilters($event)\"></c8y-alarms-date-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-alarms-type-filter\n    [alarms]=\"alarms$ | async\"\n    (onFilterChanged)=\"applyTypeFilters($event)\"\n    class=\"d-block fit-w\"\n  ></c8y-alarms-type-filter>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"0\"\n>\n  <button\n    class=\"btn btn-link\"\n    [title]=\"'Clear all alarms' | translate\"\n    type=\"button\"\n    (click)=\"clearAll()\"\n    data-cy=\"c8y-alarms-view--clear-all-button\"\n  >\n    <i c8yIcon=\"c8y-alert-idle\"></i>\n    {{ 'Clear all`alarms`' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<!--Realtime button-->\n<ng-template #realtimeRefresh>\n  <div class=\"input-group-btn\">\n    <button\n      class=\"btn btn-default btn-sm\"\n      [attr.aria-label]=\"'Refresh' | translate\"\n      [tooltip]=\"\n        (isRealtimeActive | async)\n          ? (NEW_REALTIME_ALARM_MESSAGE | translate)\n          : (REFRESH_LABEL | translate)\n      \"\n      placement=\"left\"\n      container=\"body\"\n      type=\"button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      [disabled]=\"isLoading$ | async\"\n      (click)=\"refresh()\"\n    >\n      <span\n        class=\"tag tag--info m-r-8\"\n        *ngIf=\"isRealtimeActive | async\"\n      >\n        {{ 'New alarms' | translate }}\n      </span>\n      <i\n        c8yIcon=\"refresh\"\n        [ngClass]=\"{ 'icon-spin': isLoading$ | async }\"\n      ></i>\n    </button>\n    <button\n      class=\"c8y-realtime btn btn-default btn-sm\"\n      [attr.aria-label]=\"realtimeIconTitle\"\n      [tooltip]=\"realtimeIconTitle\"\n      placement=\"bottom\"\n      type=\"button\"\n      [container]=\"'body'\"\n      (click)=\"toggleRealtimeState()\"\n    >\n      <span\n        class=\"c8y-pulse m-0\"\n        [ngClass]=\"{\n          active: isRealtimeToggleOn,\n          inactive: !isRealtimeToggleOn\n        }\"\n      ></span>\n    </button>\n  </div>\n</ng-template>\n\n<c8y-help\n  src=\"/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms\"\n></c8y-help>\n\n<div class=\"card content-fullpage split-view--5-7 grid__row--1\">\n  <c8y-alarms-list\n    class=\"d-contents\"\n    [isInitialLoading]=\"isLoading$ | async\"\n    [alarms]=\"alarms$ | async\"\n    [typeFilters]=\"typeFilters\"\n    (onScrollingStateChange)=\"changeInterval(!$event)\"\n    (onSelectedAlarm)=\"changeInterval(false)\"\n    [splitView]=\"true\"\n    [hasPermissions]=\"!isDisabled\"\n  >\n    <ng-container *ngIf=\"isIntervalRefresh; else realtimeRefresh\">\n      <c8y-alarms-interval-refresh\n        [alarmsListLoading$]=\"isLoading$\"\n        [isIntervalToggleEnabled]=\"shouldShowIntervalToggle$ | async\"\n        (onCountdownEnded)=\"refresh()\"\n        [isDisabled]=\"isDisabled\"\n      ></c8y-alarms-interval-refresh>\n    </ng-container>\n  </c8y-alarms-list>\n\n  <router-outlet class=\"d-contents\"></router-outlet>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: AlarmsViewService }, { type: i3.AlarmWithChildrenRealtimeService }, { type: i3.AlertService }, { type: i3.ContextRouteService }, { type: i3.ModalService }, { type: i1.TranslateService }, { type: i1$1.Router }], propDecorators: { alarmIntervalRefreshComponent: [{
                 type: ViewChild,
                 args: [AlarmsIntervalRefreshComponent]
@@ -1991,6 +2154,7 @@ class AlarmsModule {
             AlarmSeverityToLabelPipe,
             AlarmStatusToLabelPipe,
             AlarmEmptyComponent,
+            AlarmsDateFilterComponent,
             AlarmsTypeFilterComponent], imports: [A11yModule,
             BsDropdownModule,
             CommonModule,
@@ -2003,7 +2167,8 @@ class AlarmsModule {
             AlarmListIndicatorPipe,
             AlarmDetailsButtonPipe,
             AlarmSeverityToIconPipe,
-            DynamicComponentModule], exports: [AlarmsComponent, AlarmsListComponent, AlarmsFilterComponent] }); }
+            DynamicComponentModule,
+            IntervalPickerComponent], exports: [AlarmsComponent, AlarmsListComponent, AlarmsFilterComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsModule, providers: [
             DatePipe,
             TitleCasePipe,
@@ -2023,7 +2188,8 @@ class AlarmsModule {
             RouterModule,
             AlarmEventSelectorModule,
             RouterModule,
-            DynamicComponentModule] }); }
+            DynamicComponentModule,
+            IntervalPickerComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AlarmsModule, decorators: [{
             type: NgModule,
@@ -2042,6 +2208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         AlarmSeverityToLabelPipe,
                         AlarmStatusToLabelPipe,
                         AlarmEmptyComponent,
+                        AlarmsDateFilterComponent,
                         AlarmsTypeFilterComponent
                     ],
                     exports: [AlarmsComponent, AlarmsListComponent, AlarmsFilterComponent],
@@ -2069,7 +2236,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         AlarmListIndicatorPipe,
                         AlarmDetailsButtonPipe,
                         AlarmSeverityToIconPipe,
-                        DynamicComponentModule
+                        DynamicComponentModule,
+                        IntervalPickerComponent
                     ]
                 }]
         }] });
@@ -2078,5 +2246,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ALARMS_MODULE_CONFIG, ALARMS_PATH, ALARM_DEFAULT_PROPERTIES, ALARM_SEVERITY_ICON, ALARM_SEVERITY_ICON_MAP, ALARM_STATUS_ICON, AlarmDetailsButtonPipe, AlarmDetailsButtonService, AlarmDetailsComponent, AlarmDetailsService, AlarmEmptyComponent, AlarmIconMap, AlarmInfoComponent, AlarmListIndicatorPipe, AlarmListIndicatorService, AlarmSeveritiesToTitlePipe, AlarmSeverityToIconPipe, AlarmSeverityToLabelPipe, AlarmStatusToIconPipe, AlarmStatusToLabelPipe, AlarmsComponent, AlarmsFilterComponent, AlarmsIconComponent, AlarmsIntervalRefreshComponent, AlarmsListComponent, AlarmsModule, AlarmsViewService, AuditChangesMessagePipe, DEFAULT_ALARM_COUNTS, DEFAULT_SEVERITY_VALUES, DEFAULT_STATUS_VALUES, HELP_ICON, Ng1SmartRulesUpgradeService, SmartRulesUpgradeServiceFactory, THROTTLE_REALTIME_REFRESH, smartRulesUpgradeServiceProvider };
+export { ALARMS_MODULE_CONFIG, ALARMS_PATH, ALARM_DEFAULT_PROPERTIES, ALARM_SEVERITY_ICON, ALARM_SEVERITY_ICON_MAP, ALARM_STATUS_ICON, AlarmDetailsButtonPipe, AlarmDetailsButtonService, AlarmDetailsComponent, AlarmDetailsService, AlarmEmptyComponent, AlarmIconMap, AlarmInfoComponent, AlarmListIndicatorPipe, AlarmListIndicatorService, AlarmSeveritiesToTitlePipe, AlarmSeverityToIconPipe, AlarmSeverityToLabelPipe, AlarmStatusToIconPipe, AlarmStatusToLabelPipe, AlarmsComponent, AlarmsFilterComponent, AlarmsIconComponent, AlarmsIntervalRefreshComponent, AlarmsListComponent, AlarmsModule, AlarmsViewService, AuditChangesMessagePipe, DEFAULT_ALARM_COUNTS, DEFAULT_SEVERITY_VALUES, DEFAULT_STATUS_VALUES, HELP_ICON, INTERVALS_EXTENDED, INTERVAL_TITLES_EXTENDED, Ng1SmartRulesUpgradeService, SmartRulesUpgradeServiceFactory, THROTTLE_REALTIME_REFRESH, smartRulesUpgradeServiceProvider };
 //# sourceMappingURL=c8y-ngx-components-alarms.mjs.map