@siemens/element-ng 49.16.0 → 51.0.0-rc.10

package/fesm2022/siemens-element-ng-date-range-filter.mjs

@@ -5,7 +5,7 @@ import * as i2 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { NgTemplateOutlet, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, model, input, booleanAttribute, signal, computed, ChangeDetectionStrategy, Component, Pipe, inject, output, NgModule } from '@angular/core';
+import { Injectable, model, input, booleanAttribute, signal, computed, Component, Pipe, inject, output, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { elementDown2 } from '@siemens/element-icons';
@@ -74,10 +74,10 @@ class SiDateRangeCalculationService {
         date.setMilliseconds(0);
         return date;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDateRangeCalculationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDateRangeCalculationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDateRangeCalculationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDateRangeCalculationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDateRangeCalculationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDateRangeCalculationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -91,21 +91,27 @@ class SiRelativeDateComponent {
      *
      * @defaultValue 0
      */
-    value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /**
      * Whether minute- and hour-based offsets are available.
      *
      * @defaultValue false
      */
-    enableTimeSelection = input(false, { ...(ngDevMode ? { debugName: "enableTimeSelection" } : {}), transform: booleanAttribute });
+    enableTimeSelection = input(false, { ...(ngDevMode ? { debugName: "enableTimeSelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Label for the numeric offset input. */
-    valueLabel = input.required(...(ngDevMode ? [{ debugName: "valueLabel" }] : []));
+    valueLabel = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueLabel" }] : /* istanbul ignore next */ []));
     /** Label for the offset unit selector. */
-    unitLabel = input.required(...(ngDevMode ? [{ debugName: "unitLabel" }] : []));
+    unitLabel = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unitLabel" }] : /* istanbul ignore next */ []));
     /** CDK scroll strategy used for the offset unit select overlay. */
-    scrollStrategy = input.required(...(ngDevMode ? [{ debugName: "scrollStrategy" }] : []));
-    offset = signal(0, ...(ngDevMode ? [{ debugName: "offset" }] : []));
-    unit = signal('days', ...(ngDevMode ? [{ debugName: "unit" }] : []));
+    scrollStrategy = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
+    offset = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    unit = signal('days', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
     fullOffsetList = [
         {
             type: 'option',
@@ -146,7 +152,8 @@ class SiRelativeDateComponent {
     ];
     offsetList = computed(() => this.enableTimeSelection()
         ? this.fullOffsetList
-        : this.fullOffsetList.filter(item => item.offset >= ONE_DAY), ...(ngDevMode ? [{ debugName: "offsetList" }] : []));
+        : this.fullOffsetList.filter(item => item.offset >= ONE_DAY), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "offsetList" }] : /* istanbul ignore next */ []));
     ngOnChanges(changes) {
         if (changes.value) {
             this.calculateOffset();
@@ -184,17 +191,17 @@ class SiRelativeDateComponent {
         this.offset.set(roundedOffset);
         this.value.set(roundedOffset * item.offset);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiRelativeDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: SiRelativeDateComponent, isStandalone: true, selector: "si-relative-date", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, enableTimeSelection: { classPropertyName: "enableTimeSelection", publicName: "enableTimeSelection", isSignal: true, isRequired: false, transformFunction: null }, valueLabel: { classPropertyName: "valueLabel", publicName: "valueLabel", isSignal: true, isRequired: true, transformFunction: null }, unitLabel: { classPropertyName: "unitLabel", publicName: "unitLabel", isSignal: true, isRequired: true, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<si-number-input\n  class=\"form-control mb-4\"\n  [aria-label]=\"valueLabel()\"\n  [value]=\"offset()\"\n  (valueChange)=\"updateValue($event ?? 0)\"\n/>\n<si-select\n  class=\"form-control\"\n  min=\"0\"\n  [ariaLabel]=\"unitLabel()\"\n  [options]=\"offsetList()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [value]=\"unit()\"\n  (valueChange)=\"changeUnit($event)\"\n/>\n", styles: [".form-control{min-inline-size:0}\n"], dependencies: [{ kind: "component", type: SiNumberInputComponent, selector: "si-number-input", inputs: ["min", "max", "step", "value", "unit", "showButtons", "aria-label", "inputId", "disabled", "readonly", "placeholder", "errormessageId"], outputs: ["valueChange"] }, { kind: "component", type: SiSelectComponent, selector: "si-select", inputs: ["id", "ariaLabel", "labelledby", "filterPlaceholder", "noResultsFoundLabel", "placeholder", "readonly", "scrollStrategy", "errormessageId", "hasFilter"], outputs: ["openChange"] }, { kind: "directive", type: SiSelectSingleValueDirective, selector: "si-select:not([multi])" }, { kind: "directive", type: SiSelectSimpleOptionsDirective, selector: "si-select[options]", inputs: ["options", "optionEqualCheckFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiRelativeDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: SiRelativeDateComponent, isStandalone: true, selector: "si-relative-date", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, enableTimeSelection: { classPropertyName: "enableTimeSelection", publicName: "enableTimeSelection", isSignal: true, isRequired: false, transformFunction: null }, valueLabel: { classPropertyName: "valueLabel", publicName: "valueLabel", isSignal: true, isRequired: true, transformFunction: null }, unitLabel: { classPropertyName: "unitLabel", publicName: "unitLabel", isSignal: true, isRequired: true, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<si-number-input\n  class=\"form-control mb-4\"\n  [aria-label]=\"valueLabel()\"\n  [value]=\"offset()\"\n  (valueChange)=\"updateValue($event ?? 0)\"\n/>\n<si-select\n  class=\"form-control\"\n  min=\"0\"\n  [ariaLabel]=\"unitLabel()\"\n  [options]=\"offsetList()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [value]=\"unit()\"\n  (valueChange)=\"changeUnit($event)\"\n/>\n", styles: [".form-control{min-inline-size:0}\n"], dependencies: [{ kind: "component", type: SiNumberInputComponent, selector: "si-number-input", inputs: ["min", "max", "step", "value", "unit", "showButtons", "aria-label", "inputId", "disabled", "readonly", "placeholder", "errormessageId"], outputs: ["valueChange"] }, { kind: "component", type: SiSelectComponent, selector: "si-select", inputs: ["id", "ariaLabel", "labelledby", "filterPlaceholder", "noResultsFoundLabel", "placeholder", "readonly", "scrollStrategy", "errormessageId", "hasFilter"], outputs: ["openChange"] }, { kind: "directive", type: SiSelectSingleValueDirective, selector: "si-select:not([multi])" }, { kind: "directive", type: SiSelectSimpleOptionsDirective, selector: "si-select[options]", inputs: ["options", "optionEqualCheckFn"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiRelativeDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiRelativeDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-relative-date', imports: [
                         SiNumberInputComponent,
                         SiSelectComponent,
                         SiSelectSingleValueDirective,
                         SiSelectSimpleOptionsDirective
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<si-number-input\n  class=\"form-control mb-4\"\n  [aria-label]=\"valueLabel()\"\n  [value]=\"offset()\"\n  (valueChange)=\"updateValue($event ?? 0)\"\n/>\n<si-select\n  class=\"form-control\"\n  min=\"0\"\n  [ariaLabel]=\"unitLabel()\"\n  [options]=\"offsetList()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [value]=\"unit()\"\n  (valueChange)=\"changeUnit($event)\"\n/>\n", styles: [".form-control{min-inline-size:0}\n"] }]
+                    ], template: "<si-number-input\n  class=\"form-control mb-4\"\n  [aria-label]=\"valueLabel()\"\n  [value]=\"offset()\"\n  (valueChange)=\"updateValue($event ?? 0)\"\n/>\n<si-select\n  class=\"form-control\"\n  min=\"0\"\n  [ariaLabel]=\"unitLabel()\"\n  [options]=\"offsetList()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [value]=\"unit()\"\n  (valueChange)=\"changeUnit($event)\"\n/>\n", styles: [".form-control{min-inline-size:0}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], enableTimeSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableTimeSelection", required: false }] }], valueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabel", required: true }] }], unitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "unitLabel", required: true }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: true }] }] } });
 
 /**
@@ -205,10 +212,10 @@ class PresetMatchFilterPipe {
     transform(value, term) {
         return !term ? true : value.toLowerCase().includes(term.toLowerCase());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PresetMatchFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: PresetMatchFilterPipe, isStandalone: true, name: "presetMatchFilter" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PresetMatchFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: PresetMatchFilterPipe, isStandalone: true, name: "presetMatchFilter" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PresetMatchFilterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PresetMatchFilterPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'presetMatchFilter', pure: true }]
         }] });
@@ -217,52 +224,56 @@ class SiDateRangeFilterComponent {
     mediaMatcher = inject(MediaMatcher);
     smallScreen = this.mediaMatcher.matchMedia(`(max-width: ${BOOTSTRAP_BREAKPOINTS.mdMinimum}px)`).matches;
     /** The filter range object */
-    range = model.required(...(ngDevMode ? [{ debugName: "range" }] : []));
+    range = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
     /** List of preset time ranges. When not present or empty, the preset section won't show */
-    presetList = input(...(ngDevMode ? [undefined, { debugName: "presetList" }] : []));
+    presetList = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "presetList" }] : /* istanbul ignore next */ []));
     /**
      * Determines if there's a search field for the preset list
      *
      * @defaultValue true
      */
-    presetSearch = input(true, { ...(ngDevMode ? { debugName: "presetSearch" } : {}), transform: booleanAttribute });
+    presetSearch = input(true, { ...(ngDevMode ? { debugName: "presetSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Determines if time is selectable or only dates
      *
      * @defaultValue false
      */
-    enableTimeSelection = input(false, { ...(ngDevMode ? { debugName: "enableTimeSelection" } : {}), transform: booleanAttribute });
+    enableTimeSelection = input(false, { ...(ngDevMode ? { debugName: "enableTimeSelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Determines whether to show input fields or a date-range calendar in basic mode.
      * When time selection is enabled, this has no effect and input fields are always shown.
      *
      * @defaultValue 'calendar'
      */
-    basicMode = input('calendar', ...(ngDevMode ? [{ debugName: "basicMode" }] : []));
+    basicMode = input('calendar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "basicMode" }] : /* istanbul ignore next */ []));
     /**
      * Reverses the order of the from/to fields
      *
      * @defaultValue false
      */
-    reverseInputFields = input(false, { ...(ngDevMode ? { debugName: "reverseInputFields" } : {}), transform: booleanAttribute });
+    reverseInputFields = input(false, { ...(ngDevMode ? { debugName: "reverseInputFields" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Optional CDK scroll strategy used for the preset overlay.
      *
      * @defaultValue defaultConnectedOverlayScrollStrategy()
      */
-    scrollStrategy = input(defaultConnectedOverlayScrollStrategy(), ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : []));
+    scrollStrategy = input(defaultConnectedOverlayScrollStrategy(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
     /**
      * Determines whether to show the 'Apply' button
      *
      * @defaultValue false
      */
-    showApplyButton = input(false, { ...(ngDevMode ? { debugName: "showApplyButton" } : {}), transform: booleanAttribute });
+    showApplyButton = input(false, { ...(ngDevMode ? { debugName: "showApplyButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Hides the advanced mode if input allows
      *
      * @defaultValue false
      */
-    hideAdvancedMode = input(false, { ...(ngDevMode ? { debugName: "hideAdvancedMode" } : {}), transform: booleanAttribute });
+    hideAdvancedMode = input(false, { ...(ngDevMode ? { debugName: "hideAdvancedMode" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * label for the "Reference point" title
      *
@@ -271,7 +282,8 @@ class SiDateRangeFilterComponent {
      * t(() => $localize`:@@SI_DATE_RANGE_FILTER.REF_POINT:Reference point`)
      * ```
      */
-    refLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.REF_POINT:Reference point`), ...(ngDevMode ? [{ debugName: "refLabel" }] : []));
+    refLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.REF_POINT:Reference point`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "refLabel" }] : /* istanbul ignore next */ []));
     /**
      * label for the "Reference point" title
      *
@@ -280,7 +292,8 @@ class SiDateRangeFilterComponent {
      * t(() => $localize`:@@SI_DATE_RANGE_FILTER.FROM:From`)
      * ```
      */
-    fromLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.FROM:From`), ...(ngDevMode ? [{ debugName: "fromLabel" }] : []));
+    fromLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.FROM:From`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fromLabel" }] : /* istanbul ignore next */ []));
     /**
      * label for the "Reference point" title
      *
@@ -289,7 +302,8 @@ class SiDateRangeFilterComponent {
      * t(() => $localize`:@@SI_DATE_RANGE_FILTER.TO:To`)
      * ```
      */
-    toLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.TO:To`), ...(ngDevMode ? [{ debugName: "toLabel" }] : []));
+    toLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.TO:To`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toLabel" }] : /* istanbul ignore next */ []));
     /**
      * label for the "Range" title
      *
@@ -298,7 +312,8 @@ class SiDateRangeFilterComponent {
      * t(() => $localize`:@@SI_DATE_RANGE_FILTER.RANGE:Range`)
      * ```
      */
-    rangeLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.RANGE:Range`), ...(ngDevMode ? [{ debugName: "rangeLabel" }] : []));
+    rangeLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.RANGE:Range`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeLabel" }] : /* istanbul ignore next */ []));
     /**
      * label for the "Today" checkbox
      *
@@ -307,7 +322,8 @@ class SiDateRangeFilterComponent {
      * t(() => $localize`:@@SI_DATE_RANGE_FILTER.TODAY:Today`)
      * ```
      */
-    todayLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.TODAY:Today`), ...(ngDevMode ? [{ debugName: "todayLabel" }] : []));
+    todayLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.TODAY:Today`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "todayLabel" }] : /* istanbul ignore next */ []));
     /**
      * label for the "Now" checkbox
      *
@@ -316,7 +332,8 @@ class SiDateRangeFilterComponent {
      * t(() => $localize`:@@SI_DATE_RANGE_FILTER.NOW:Now`)
      * ```
      */
-    nowLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.NOW:Now`), ...(ngDevMode ? [{ debugName: "nowLabel" }] : []));
+    nowLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.NOW:Now`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nowLabel" }] : /* istanbul ignore next */ []));
     /**
      * label for "Date" field / radio button
      *
@@ -325,7 +342,8 @@ class SiDateRangeFilterComponent {
      * t(() => $localize`:@@SI_DATE_RANGE_FILTER.DATE:Date`)
      * ```
      */
-    dateLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.DATE:Date`), ...(ngDevMode ? [{ debugName: "dateLabel" }] : []));
+    dateLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.DATE:Date`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateLabel" }] : /* istanbul ignore next */ []));
     /**
      * label for the "Preview" title
      *
@@ -334,7 +352,8 @@ class SiDateRangeFilterComponent {
      * t(() => $localize`:@@SI_DATE_RANGE_FILTER.PREVIEW:Preview`)
      * ```
      */
-    previewLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.PREVIEW:Preview`), ...(ngDevMode ? [{ debugName: "previewLabel" }] : []));
+    previewLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.PREVIEW:Preview`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewLabel" }] : /* istanbul ignore next */ []));
     /**
      * Placeholder for date fields
      *
@@ -343,7 +362,8 @@ class SiDateRangeFilterComponent {
      * t(() => $localize`:@@SI_DATE_RANGE_FILTER.DATE_PLACEHOLDER:Select date`)
      * ```
      */
-    datePlaceholder = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.DATE_PLACEHOLDER:Select date`), ...(ngDevMode ? [{ debugName: "datePlaceholder" }] : []));
+    datePlaceholder = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.DATE_PLACEHOLDER:Select date`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "datePlaceholder" }] : /* istanbul ignore next */ []));
     /**
      * label for the "Before" toggle
      *
@@ -352,7 +372,8 @@ class SiDateRangeFilterComponent {
      * t(() => $localize`:@@SI_DATE_RANGE_FILTER.BEFORE:Before`)
      * ```
      */
-    beforeLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.BEFORE:Before`), ...(ngDevMode ? [{ debugName: "beforeLabel" }] : []));
+    beforeLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.BEFORE:Before`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "beforeLabel" }] : /* istanbul ignore next */ []));
     /**
      * label for the "After" toggle
      *
@@ -361,7 +382,8 @@ class SiDateRangeFilterComponent {
      * t(() => $localize`:@@SI_DATE_RANGE_FILTER.AFTER:After`)
      * ```
      */
-    afterLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.AFTER:After`), ...(ngDevMode ? [{ debugName: "afterLabel" }] : []));
+    afterLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.AFTER:After`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "afterLabel" }] : /* istanbul ignore next */ []));
     /**
      * label for the "Within" toggle
      *
@@ -370,7 +392,8 @@ class SiDateRangeFilterComponent {
      * t(() => $localize`:@@SI_DATE_RANGE_FILTER.WITHIN:Within`)
      * ```
      */
-    withinLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.WITHIN:Within`), ...(ngDevMode ? [{ debugName: "withinLabel" }] : []));
+    withinLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.WITHIN:Within`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "withinLabel" }] : /* istanbul ignore next */ []));
     /**
      * label for the "value" number input
      *
@@ -379,7 +402,8 @@ class SiDateRangeFilterComponent {
      * t(() => $localize`:@@SI_DATE_RANGE_FILTER.VALUE:Value`)
      * ```
      */
-    valueLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.VALUE:Value`), ...(ngDevMode ? [{ debugName: "valueLabel" }] : []));
+    valueLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.VALUE:Value`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueLabel" }] : /* istanbul ignore next */ []));
     /**
      * label for the "Unit" select
      *
@@ -388,7 +412,8 @@ class SiDateRangeFilterComponent {
      * t(() => $localize`:@@SI_DATE_RANGE_FILTER.UNIT:Unit`)
      * ```
      */
-    unitLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.UNIT:Unit`), ...(ngDevMode ? [{ debugName: "unitLabel" }] : []));
+    unitLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.UNIT:Unit`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unitLabel" }] : /* istanbul ignore next */ []));
     /**
      * label for the "search" input
      *
@@ -397,7 +422,8 @@ class SiDateRangeFilterComponent {
      * t(() => $localize`:@@SI_DATE_RANGE_FILTER.SEARCH:Search`)
      * ```
      */
-    searchLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.SEARCH:Search`), ...(ngDevMode ? [{ debugName: "searchLabel" }] : []));
+    searchLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.SEARCH:Search`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchLabel" }] : /* istanbul ignore next */ []));
     /**
      * label for the "search" input
      *
@@ -406,7 +432,8 @@ class SiDateRangeFilterComponent {
      * t(() => $localize`:@@SI_DATE_RANGE_FILTER.PRESETS:Presets`)
      * ```
      */
-    presetLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.PRESETS:Presets`), ...(ngDevMode ? [{ debugName: "presetLabel" }] : []));
+    presetLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.PRESETS:Presets`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presetLabel" }] : /* istanbul ignore next */ []));
     /**
      * label for the "advanced" switch
      *
@@ -415,7 +442,8 @@ class SiDateRangeFilterComponent {
      * t(() => $localize`:@@SI_DATE_RANGE_FILTER.ADVANCED:Advanced`)
      * ```
      */
-    advancedLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.ADVANCED:Advanced`), ...(ngDevMode ? [{ debugName: "advancedLabel" }] : []));
+    advancedLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.ADVANCED:Advanced`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "advancedLabel" }] : /* istanbul ignore next */ []));
     /**
      * label for the "apply" switch
      *
@@ -424,7 +452,8 @@ class SiDateRangeFilterComponent {
      * t(() => $localize`:@@SI_DATE_RANGE_FILTER.APPLY:Apply`)
      * ```
      */
-    applyLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.APPLY:Apply`), ...(ngDevMode ? [{ debugName: "applyLabel" }] : []));
+    applyLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.APPLY:Apply`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
     /**
      * label for the "select end date" in preview
      *
@@ -433,7 +462,8 @@ class SiDateRangeFilterComponent {
      * t(() => $localize`:@@SI_DATE_RANGE_FILTER.SELECT_RANGE_END:Select end date`)
      * ```
      */
-    rangeEndDateMissingLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.SELECT_RANGE_END:Select end date`), ...(ngDevMode ? [{ debugName: "rangeEndDateMissingLabel" }] : []));
+    rangeEndDateMissingLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.SELECT_RANGE_END:Select end date`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeEndDateMissingLabel" }] : /* istanbul ignore next */ []));
     /**
      * label when range is not defined in the preview
      *
@@ -442,55 +472,75 @@ class SiDateRangeFilterComponent {
      * t(() => $localize`:@@SI_DATE_RANGE_FILTER.SELECT_RANGE_LABEL:Select date range`)
      * ```
      */
-    selectRangeLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.SELECT_RANGE_LABEL:Select date range`), ...(ngDevMode ? [{ debugName: "selectRangeLabel" }] : []));
+    selectRangeLabel = input(t(() => $localize `:@@SI_DATE_RANGE_FILTER.SELECT_RANGE_LABEL:Select date range`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectRangeLabel" }] : /* istanbul ignore next */ []));
     /** Event fired when the apply button has been clicked */
     applyClicked = output();
     /** Base configuration on how the dates should be displayed, parts of it may be overwritten internally. */
-    datepickerConfig = input(...(ngDevMode ? [undefined, { debugName: "datepickerConfig" }] : []));
+    datepickerConfig = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "datepickerConfig" }] : /* istanbul ignore next */ []));
     icons = addIcons({ elementDown2 });
-    advancedMode = signal(false, ...(ngDevMode ? [{ debugName: "advancedMode" }] : []));
-    dateRange = signal({ start: undefined, end: undefined }, ...(ngDevMode ? [{ debugName: "dateRange" }] : []));
+    advancedMode = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "advancedMode" }] : /* istanbul ignore next */ []));
+    dateRange = signal({ start: undefined, end: undefined }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateRange" }] : /* istanbul ignore next */ []));
     safeDateRange = computed(() => {
         const range = this.dateRange();
         const start = this.isValidDate(range.start) ? range.start : undefined;
         const end = this.isValidDate(range.end) ? range.end : undefined;
         return { start, end };
-    }, ...(ngDevMode ? [{ debugName: "safeDateRange" }] : []));
-    point1Now = signal(true, ...(ngDevMode ? [{ debugName: "point1Now" }] : []));
-    point2Mode = signal('duration', ...(ngDevMode ? [{ debugName: "point2Mode" }] : []));
-    point1date = signal(this.getDateNow(), ...(ngDevMode ? [{ debugName: "point1date" }] : []));
-    point2date = signal(this.getDateNow(), ...(ngDevMode ? [{ debugName: "point2date" }] : []));
-    point2offset = signal(0, ...(ngDevMode ? [{ debugName: "point2offset" }] : []));
-    point2range = signal('before', ...(ngDevMode ? [{ debugName: "point2range" }] : []));
-    calculatedRange = computed(() => this.resolve(this.range()), ...(ngDevMode ? [{ debugName: "calculatedRange" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "safeDateRange" }] : /* istanbul ignore next */ []));
+    point1Now = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "point1Now" }] : /* istanbul ignore next */ []));
+    point2Mode = signal('duration', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "point2Mode" }] : /* istanbul ignore next */ []));
+    point1date = signal(this.getDateNow(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "point1date" }] : /* istanbul ignore next */ []));
+    point2date = signal(this.getDateNow(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "point2date" }] : /* istanbul ignore next */ []));
+    point2offset = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "point2offset" }] : /* istanbul ignore next */ []));
+    point2range = signal('before', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "point2range" }] : /* istanbul ignore next */ []));
+    calculatedRange = computed(() => this.resolve(this.range()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calculatedRange" }] : /* istanbul ignore next */ []));
     pipeFormat = computed(() => this.enableTimeSelection()
         ? (this.datepickerConfig()?.dateTimeFormat ?? 'short')
-        : (this.datepickerConfig()?.dateFormat ?? 'shortDate'), ...(ngDevMode ? [{ debugName: "pipeFormat" }] : []));
+        : (this.datepickerConfig()?.dateFormat ?? 'shortDate'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pipeFormat" }] : /* istanbul ignore next */ []));
     datepickerConfigInternal = computed(() => ({
         ...(this.datepickerConfig() ?? {}),
         enableDateRange: false,
         showTime: this.enableTimeSelection(),
         mandatoryTime: this.enableTimeSelection()
-    }), ...(ngDevMode ? [{ debugName: "datepickerConfigInternal" }] : []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "datepickerConfigInternal" }] : /* istanbul ignore next */ []));
     dateRangeConfig = computed(() => ({
         ...(this.datepickerConfig() ?? {}),
         enableDateRange: true
-    }), ...(ngDevMode ? [{ debugName: "dateRangeConfig" }] : []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateRangeConfig" }] : /* istanbul ignore next */ []));
     filteredPresetList = computed(() => {
         const timeFilter = (item) => {
             const timeOnly = item.type === 'custom' ? item.timeOnly : item.offset < ONE_DAY;
             return this.enableTimeSelection() || !timeOnly;
         };
         return (this.presetList() ?? []).filter(timeFilter);
-    }, ...(ngDevMode ? [{ debugName: "filteredPresetList" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredPresetList" }] : /* istanbul ignore next */ []));
     focusedDate = computed(() => {
         const range = this.dateRange();
         const date = range.end ?? range.start;
         return isValid(date) ? date : undefined;
-    }, ...(ngDevMode ? [{ debugName: "focusedDate" }] : []));
-    presetFilter = signal('', ...(ngDevMode ? [{ debugName: "presetFilter" }] : []));
-    presetOpen = signal(false, ...(ngDevMode ? [{ debugName: "presetOpen" }] : []));
-    inputMode = computed(() => this.basicMode() === 'input' || this.enableTimeSelection(), ...(ngDevMode ? [{ debugName: "inputMode" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
+    presetFilter = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presetFilter" }] : /* istanbul ignore next */ []));
+    presetOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presetOpen" }] : /* istanbul ignore next */ []));
+    inputMode = computed(() => this.basicMode() === 'input' || this.enableTimeSelection(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []));
     ngOnChanges(changes) {
         if (changes.enableTimeSelection ||
             changes.datepickerConfig ||
@@ -651,10 +701,10 @@ class SiDateRangeFilterComponent {
     isValidDate(date) {
         return date instanceof Date && !isNaN(date.getTime());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDateRangeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiDateRangeFilterComponent, isStandalone: true, selector: "si-date-range-filter", inputs: { range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: true, transformFunction: null }, presetList: { classPropertyName: "presetList", publicName: "presetList", isSignal: true, isRequired: false, transformFunction: null }, presetSearch: { classPropertyName: "presetSearch", publicName: "presetSearch", isSignal: true, isRequired: false, transformFunction: null }, enableTimeSelection: { classPropertyName: "enableTimeSelection", publicName: "enableTimeSelection", isSignal: true, isRequired: false, transformFunction: null }, basicMode: { classPropertyName: "basicMode", publicName: "basicMode", isSignal: true, isRequired: false, transformFunction: null }, reverseInputFields: { classPropertyName: "reverseInputFields", publicName: "reverseInputFields", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, showApplyButton: { classPropertyName: "showApplyButton", publicName: "showApplyButton", isSignal: true, isRequired: false, transformFunction: null }, hideAdvancedMode: { classPropertyName: "hideAdvancedMode", publicName: "hideAdvancedMode", isSignal: true, isRequired: false, transformFunction: null }, refLabel: { classPropertyName: "refLabel", publicName: "refLabel", isSignal: true, isRequired: false, transformFunction: null }, fromLabel: { classPropertyName: "fromLabel", publicName: "fromLabel", isSignal: true, isRequired: false, transformFunction: null }, toLabel: { classPropertyName: "toLabel", publicName: "toLabel", isSignal: true, isRequired: false, transformFunction: null }, rangeLabel: { classPropertyName: "rangeLabel", publicName: "rangeLabel", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, nowLabel: { classPropertyName: "nowLabel", publicName: "nowLabel", isSignal: true, isRequired: false, transformFunction: null }, dateLabel: { classPropertyName: "dateLabel", publicName: "dateLabel", isSignal: true, isRequired: false, transformFunction: null }, previewLabel: { classPropertyName: "previewLabel", publicName: "previewLabel", isSignal: true, isRequired: false, transformFunction: null }, datePlaceholder: { classPropertyName: "datePlaceholder", publicName: "datePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, beforeLabel: { classPropertyName: "beforeLabel", publicName: "beforeLabel", isSignal: true, isRequired: false, transformFunction: null }, afterLabel: { classPropertyName: "afterLabel", publicName: "afterLabel", isSignal: true, isRequired: false, transformFunction: null }, withinLabel: { classPropertyName: "withinLabel", publicName: "withinLabel", isSignal: true, isRequired: false, transformFunction: null }, valueLabel: { classPropertyName: "valueLabel", publicName: "valueLabel", isSignal: true, isRequired: false, transformFunction: null }, unitLabel: { classPropertyName: "unitLabel", publicName: "unitLabel", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, presetLabel: { classPropertyName: "presetLabel", publicName: "presetLabel", isSignal: true, isRequired: false, transformFunction: null }, advancedLabel: { classPropertyName: "advancedLabel", publicName: "advancedLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, rangeEndDateMissingLabel: { classPropertyName: "rangeEndDateMissingLabel", publicName: "rangeEndDateMissingLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRangeLabel: { classPropertyName: "selectRangeLabel", publicName: "selectRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, datepickerConfig: { classPropertyName: "datepickerConfig", publicName: "datepickerConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { range: "rangeChange", applyClicked: "applyClicked" }, host: { properties: { "class.mobile": "smallScreen" } }, usesOnChanges: true, ngImport: i0, template: "@if (presetList()?.length) {\n  @if (this.smallScreen) {\n    <div class=\"presets d-flex\">\n      <button\n        #presetTrigger=\"cdkOverlayOrigin\"\n        type=\"button\"\n        class=\"btn btn-tertiary dropdown-toggle m-5 flex-grow-1\"\n        cdkOverlayOrigin\n        [class.show]=\"presetOpen()\"\n        [attr.aria-expanded]=\"presetOpen()\"\n        (click)=\"presetOpen.set(true)\"\n      >\n        {{ presetLabel() | translate }}\n        <si-icon class=\"dropdown-caret icon\" [icon]=\"icons.elementDown2\" />\n      </button>\n      <ng-template\n        cdkConnectedOverlay\n        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n        cdkConnectedOverlayHasBackdrop\n        [cdkConnectedOverlayOpen]=\"presetOpen()\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOrigin]=\"presetTrigger\"\n        [cdkConnectedOverlayMinWidth]=\"\n          presetTrigger.elementRef.nativeElement?.getBoundingClientRect().width\n        \"\n        (backdropClick)=\"presetOpen.set(false)\"\n        (detach)=\"presetOpen.set(false)\"\n      >\n        <div\n          cdkTrapFocus\n          class=\"preset-select mobile elevation-2 rounded-2 w-100\"\n          cdkTrapFocusAutoCapture\n        >\n          <ng-container *ngTemplateOutlet=\"presets\" />\n        </div>\n      </ng-template>\n    </div>\n  } @else {\n    <div class=\"preset-select border-end\">\n      <ng-container *ngTemplateOutlet=\"presets\" />\n    </div>\n  }\n}\n<form class=\"main-form d-flex flex-column flex-fill\">\n  @if (advancedMode() || inputMode()) {\n    <div class=\"advanced-form px-6 py-4\">\n      @if (!reverseInputFields()) {\n        <ng-container *ngTemplateOutlet=\"formReferencePoint\" />\n      }\n\n      <div class=\"mb-8\">\n        @if (point2Mode() === 'date') {\n          <ng-container *ngTemplateOutlet=\"formPoint2Date\" />\n        } @else if (point2Mode() === 'duration') {\n          <ng-container *ngTemplateOutlet=\"formPoint2Duration\" />\n        }\n      </div>\n\n      @if (reverseInputFields()) {\n        <ng-container *ngTemplateOutlet=\"formReferencePoint\" />\n      }\n    </div>\n  } @else {\n    <si-datepicker\n      [config]=\"dateRangeConfig()\"\n      [focusedDate]=\"focusedDate()\"\n      [dateRange]=\"dateRange()\"\n      (dateRangeChange)=\"updateFromDateRange($event)\"\n    />\n  }\n\n  @if (advancedMode() || !hideAdvancedMode()) {\n    <label class=\"form-switch form-check ms-6\">\n      <input\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        name=\"advancedMode\"\n        role=\"switch\"\n        [(ngModel)]=\"advancedMode\"\n        (ngModelChange)=\"updateOnModeChange()\"\n      />\n      <span class=\"form-check-label\">{{ advancedLabel() | translate }}</span>\n    </label>\n  }\n\n  <div class=\"mt-4 mb-6 ms-6\">\n    {{ previewLabel() | translate }}:\n    <span class=\"preview\">\n      @if (advancedMode()) {\n        @let calculated = calculatedRange();\n        @if (calculated.valid) {\n          {{ calculated.start | date: pipeFormat() }} -\n          {{ calculated.end | date: pipeFormat() }}\n        } @else {\n          <span class=\"text-secondary\">\n            {{ selectRangeLabel() | translate }}\n          </span>\n        }\n      } @else {\n        @let range = safeDateRange();\n        {{ range.start | date: pipeFormat() }} -\n        @if (range.end) {\n          {{ range.end | date: pipeFormat() }}\n        } @else {\n          <span class=\"text-secondary\">\n            {{ rangeEndDateMissingLabel() | translate }}\n          </span>\n        }\n      }\n    </span>\n  </div>\n</form>\n\n@if (showApplyButton()) {\n  <div class=\"footer border-top px-6 py-5 d-flex\">\n    <button type=\"button\" class=\"btn btn-primary ms-auto\" (click)=\"applyClicked.emit()\">\n      {{ applyLabel() | translate }}\n    </button>\n  </div>\n}\n<ng-template #presets>\n  @if (presetSearch()) {\n    <si-search-bar\n      colorVariant=\"base-0\"\n      class=\"mx-6 mt-5 mb-6\"\n      [placeholder]=\"searchLabel() | translate\"\n      [showIcon]=\"true\"\n      [(ngModel)]=\"presetFilter\"\n    />\n  }\n  <ul\n    class=\"overflow-auto\"\n    cdkListbox\n    [cdkListboxValue]=\"[]\"\n    [attr.aria-label]=\"presetLabel() | translate\"\n    (cdkListboxValueChange)=\"selectPresetItem($event.value[0])\"\n  >\n    @for (item of filteredPresetList(); track $index) {\n      @if (item.label | translate | presetMatchFilter: presetFilter()) {\n        <li class=\"preset-item focus-inside px-8 py-5\" [cdkOption]=\"item.label\">\n          {{ item.label | translate }}\n        </li>\n      }\n    }\n  </ul>\n</ng-template>\n<ng-template #formReferencePoint>\n  <div class=\"mb-9\">\n    <label class=\"d-block\">\n      <span class=\"form-label\">{{\n        (advancedMode() ? refLabel() : reverseInputFields() ? toLabel() : fromLabel()) | translate\n      }}</span>\n      <si-calendar-button class=\"w-100\">\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          name=\"point1\"\n          required\n          siDatepicker\n          [siDatepickerConfig]=\"datepickerConfigInternal()\"\n          [siDatepickerScrollStrategy]=\"scrollStrategy()\"\n          [disabled]=\"point1Now()\"\n          [placeholder]=\"datePlaceholder() | translate\"\n          [(ngModel)]=\"point1date\"\n          (ngModelChange)=\"point1Changed()\"\n        />\n      </si-calendar-button>\n    </label>\n    <label class=\"ms-4 mt-5 text-nowrap form-check\">\n      <input\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        name=\"point1now\"\n        [(ngModel)]=\"point1Now\"\n        (ngModelChange)=\"point1Changed()\"\n      />\n      <span class=\"form-check-label\">{{\n        (enableTimeSelection() ? nowLabel() : todayLabel()) | translate\n      }}</span>\n    </label>\n  </div>\n</ng-template>\n\n<ng-template #formPoint2Date>\n  <label class=\"d-block mb-4 bp-9\">\n    <span class=\"form-label\">{{\n      (reverseInputFields() ? fromLabel() : toLabel()) | translate\n    }}</span>\n    <si-calendar-button class=\"w-100\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        name=\"point2\"\n        required\n        siDatepicker\n        [siDatepickerConfig]=\"datepickerConfigInternal()\"\n        [siDatepickerScrollStrategy]=\"scrollStrategy()\"\n        [placeholder]=\"datePlaceholder() | translate\"\n        [(ngModel)]=\"point2date\"\n        (ngModelChange)=\"point2Changed()\"\n      />\n    </si-calendar-button>\n  </label>\n</ng-template>\n\n<ng-template #formPoint2Duration>\n  <div>\n    <span class=\"form-label\">{{ rangeLabel() | translate }}</span>\n    <si-relative-date\n      class=\"d-block mb-4\"\n      [unitLabel]=\"unitLabel() | translate\"\n      [valueLabel]=\"valueLabel() | translate\"\n      [enableTimeSelection]=\"enableTimeSelection()\"\n      [scrollStrategy]=\"scrollStrategy()\"\n      [(value)]=\"point2offset\"\n      (valueChange)=\"point2Changed()\"\n    />\n    <div class=\"range-type ms-4\">\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"before\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ beforeLabel() | translate }}\n        </span>\n      </label>\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"after\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ afterLabel() | translate }}\n        </span>\n      </label>\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"within\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ withinLabel() | translate }}\n        </span>\n      </label>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-grid;background:var(--element-base-1);grid-template-areas:\"preset main\" \"footer footer\"}:host.mobile{grid-template-areas:\"preset\" \"main\" \"footer\";justify-items:stretch}:host.mobile .presets{border-block-end:1px solid var(--element-ui-4)}.main-form{inline-size:calc(16rem + 64px);grid-area:main}.advanced-form{block-size:calc(16rem + 133px)}.preset-select{display:flex;inline-size:calc(9.5rem + 48px);flex-direction:column;grid-area:preset;background:var(--element-base-1)}.preset-select.mobile{max-block-size:346px;inline-size:unset}ul{flex:1 1 auto;padding-inline-start:0;list-style:none}.preset-item{cursor:pointer;line-height:1.1428571429}.preset-item:hover{background:var(--element-base-1-hover)}.form-check-input{inset-block-start:0}.element-zoom{rotate:45deg}.footer{grid-area:footer}\n"], dependencies: [{ kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: SiCalendarButtonComponent, selector: "si-calendar-button", inputs: ["ariaLabel"] }, { kind: "component", type: SiDatepickerComponent, selector: "si-datepicker", inputs: ["focusedDate", "date", "dateRange", "dateRangeRole", "initialFocus", "disabledTime", "config", "previousLabel", "nextLabel", "calenderWeekLabel", "calendarWeekLabel", "time12h", "rangeType", "minMonth", "maxMonth", "hideTimeToggle", "hideCalendar", "timepickerLabel", "activeHover"], outputs: ["focusedDateChange", "dateChange", "dateRangeChange", "disabledTimeChange", "configChange", "rangeTypeChange", "activeHoverChange"] }, { kind: "directive", type: SiDatepickerDirective, selector: "[siDatepicker]", inputs: ["autoClose"], exportAs: ["siDatepicker"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiRelativeDateComponent, selector: "si-relative-date", inputs: ["value", "enableTimeSelection", "valueLabel", "unitLabel", "scrollStrategy"], outputs: ["valueChange"] }, { kind: "component", type: SiSearchBarComponent, selector: "si-search-bar", inputs: ["debounceTime", "prohibitedCharacters", "placeholder", "showIcon", "tabbable", "value", "readonly", "colorVariant", "disabled", "maxlength", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: PresetMatchFilterPipe, name: "presetMatchFilter" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDateRangeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiDateRangeFilterComponent, isStandalone: true, selector: "si-date-range-filter", inputs: { range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: true, transformFunction: null }, presetList: { classPropertyName: "presetList", publicName: "presetList", isSignal: true, isRequired: false, transformFunction: null }, presetSearch: { classPropertyName: "presetSearch", publicName: "presetSearch", isSignal: true, isRequired: false, transformFunction: null }, enableTimeSelection: { classPropertyName: "enableTimeSelection", publicName: "enableTimeSelection", isSignal: true, isRequired: false, transformFunction: null }, basicMode: { classPropertyName: "basicMode", publicName: "basicMode", isSignal: true, isRequired: false, transformFunction: null }, reverseInputFields: { classPropertyName: "reverseInputFields", publicName: "reverseInputFields", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, showApplyButton: { classPropertyName: "showApplyButton", publicName: "showApplyButton", isSignal: true, isRequired: false, transformFunction: null }, hideAdvancedMode: { classPropertyName: "hideAdvancedMode", publicName: "hideAdvancedMode", isSignal: true, isRequired: false, transformFunction: null }, refLabel: { classPropertyName: "refLabel", publicName: "refLabel", isSignal: true, isRequired: false, transformFunction: null }, fromLabel: { classPropertyName: "fromLabel", publicName: "fromLabel", isSignal: true, isRequired: false, transformFunction: null }, toLabel: { classPropertyName: "toLabel", publicName: "toLabel", isSignal: true, isRequired: false, transformFunction: null }, rangeLabel: { classPropertyName: "rangeLabel", publicName: "rangeLabel", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, nowLabel: { classPropertyName: "nowLabel", publicName: "nowLabel", isSignal: true, isRequired: false, transformFunction: null }, dateLabel: { classPropertyName: "dateLabel", publicName: "dateLabel", isSignal: true, isRequired: false, transformFunction: null }, previewLabel: { classPropertyName: "previewLabel", publicName: "previewLabel", isSignal: true, isRequired: false, transformFunction: null }, datePlaceholder: { classPropertyName: "datePlaceholder", publicName: "datePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, beforeLabel: { classPropertyName: "beforeLabel", publicName: "beforeLabel", isSignal: true, isRequired: false, transformFunction: null }, afterLabel: { classPropertyName: "afterLabel", publicName: "afterLabel", isSignal: true, isRequired: false, transformFunction: null }, withinLabel: { classPropertyName: "withinLabel", publicName: "withinLabel", isSignal: true, isRequired: false, transformFunction: null }, valueLabel: { classPropertyName: "valueLabel", publicName: "valueLabel", isSignal: true, isRequired: false, transformFunction: null }, unitLabel: { classPropertyName: "unitLabel", publicName: "unitLabel", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, presetLabel: { classPropertyName: "presetLabel", publicName: "presetLabel", isSignal: true, isRequired: false, transformFunction: null }, advancedLabel: { classPropertyName: "advancedLabel", publicName: "advancedLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, rangeEndDateMissingLabel: { classPropertyName: "rangeEndDateMissingLabel", publicName: "rangeEndDateMissingLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRangeLabel: { classPropertyName: "selectRangeLabel", publicName: "selectRangeLabel", isSignal: true, isRequired: false, transformFunction: null }, datepickerConfig: { classPropertyName: "datepickerConfig", publicName: "datepickerConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { range: "rangeChange", applyClicked: "applyClicked" }, host: { properties: { "class.mobile": "smallScreen" } }, usesOnChanges: true, ngImport: i0, template: "@if (presetList()?.length) {\n  @if (this.smallScreen) {\n    <div class=\"presets d-flex\">\n      <button\n        #presetTrigger=\"cdkOverlayOrigin\"\n        type=\"button\"\n        class=\"btn btn-tertiary dropdown-toggle m-5 flex-grow-1\"\n        cdkOverlayOrigin\n        [class.show]=\"presetOpen()\"\n        [attr.aria-expanded]=\"presetOpen()\"\n        (click)=\"presetOpen.set(true)\"\n      >\n        {{ presetLabel() | translate }}\n        <si-icon class=\"dropdown-caret icon\" [icon]=\"icons.elementDown2\" />\n      </button>\n      <ng-template\n        cdkConnectedOverlay\n        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n        cdkConnectedOverlayHasBackdrop\n        [cdkConnectedOverlayOpen]=\"presetOpen()\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOrigin]=\"presetTrigger\"\n        [cdkConnectedOverlayMinWidth]=\"\n          presetTrigger.elementRef.nativeElement?.getBoundingClientRect().width\n        \"\n        (backdropClick)=\"presetOpen.set(false)\"\n        (detach)=\"presetOpen.set(false)\"\n      >\n        <div\n          cdkTrapFocus\n          class=\"preset-select mobile shadow-3 rounded-2 w-100\"\n          cdkTrapFocusAutoCapture\n        >\n          <ng-container *ngTemplateOutlet=\"presets\" />\n        </div>\n      </ng-template>\n    </div>\n  } @else {\n    <div class=\"preset-select border-end\">\n      <ng-container *ngTemplateOutlet=\"presets\" />\n    </div>\n  }\n}\n<form class=\"main-form d-flex flex-column flex-fill\">\n  @if (advancedMode() || inputMode()) {\n    <div class=\"advanced-form px-6 py-4\">\n      @if (!reverseInputFields()) {\n        <ng-container *ngTemplateOutlet=\"formReferencePoint\" />\n      }\n\n      <div class=\"mb-8\">\n        @if (point2Mode() === 'date') {\n          <ng-container *ngTemplateOutlet=\"formPoint2Date\" />\n        } @else if (point2Mode() === 'duration') {\n          <ng-container *ngTemplateOutlet=\"formPoint2Duration\" />\n        }\n      </div>\n\n      @if (reverseInputFields()) {\n        <ng-container *ngTemplateOutlet=\"formReferencePoint\" />\n      }\n    </div>\n  } @else {\n    <si-datepicker\n      [config]=\"dateRangeConfig()\"\n      [focusedDate]=\"focusedDate()\"\n      [dateRange]=\"dateRange()\"\n      (dateRangeChange)=\"updateFromDateRange($event)\"\n    />\n  }\n\n  @if (advancedMode() || !hideAdvancedMode()) {\n    <label class=\"form-switch form-check mb-2 ms-6\">\n      <input\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        name=\"advancedMode\"\n        role=\"switch\"\n        [(ngModel)]=\"advancedMode\"\n        (ngModelChange)=\"updateOnModeChange()\"\n      />\n      <span class=\"form-check-label\">{{ advancedLabel() | translate }}</span>\n    </label>\n  }\n\n  <div class=\"mt-4 mb-6 ms-6\">\n    {{ previewLabel() | translate }}:\n    <span class=\"preview\">\n      @if (advancedMode()) {\n        @let calculated = calculatedRange();\n        @if (calculated.valid) {\n          {{ calculated.start | date: pipeFormat() }} -\n          {{ calculated.end | date: pipeFormat() }}\n        } @else {\n          <span class=\"text-secondary\">\n            {{ selectRangeLabel() | translate }}\n          </span>\n        }\n      } @else {\n        @let range = safeDateRange();\n        {{ range.start | date: pipeFormat() }} -\n        @if (range.end) {\n          {{ range.end | date: pipeFormat() }}\n        } @else {\n          <span class=\"text-secondary\">\n            {{ rangeEndDateMissingLabel() | translate }}\n          </span>\n        }\n      }\n    </span>\n  </div>\n</form>\n\n@if (showApplyButton()) {\n  <div class=\"footer border-top px-6 py-5 d-flex\">\n    <button type=\"button\" class=\"btn btn-primary ms-auto\" (click)=\"applyClicked.emit()\">\n      {{ applyLabel() | translate }}\n    </button>\n  </div>\n}\n<ng-template #presets>\n  @if (presetSearch()) {\n    <si-search-bar\n      colorVariant=\"base-0\"\n      class=\"mx-6 mt-5 mb-6\"\n      [placeholder]=\"searchLabel() | translate\"\n      [showIcon]=\"true\"\n      [(ngModel)]=\"presetFilter\"\n    />\n  }\n  <ul\n    class=\"overflow-auto\"\n    cdkListbox\n    [cdkListboxValue]=\"[]\"\n    [attr.aria-label]=\"presetLabel() | translate\"\n    (cdkListboxValueChange)=\"selectPresetItem($event.value[0])\"\n  >\n    @for (item of filteredPresetList(); track $index) {\n      @if (item.label | translate | presetMatchFilter: presetFilter()) {\n        <li class=\"preset-item focus-inside px-8 py-5\" [cdkOption]=\"item.label\">\n          {{ item.label | translate }}\n        </li>\n      }\n    }\n  </ul>\n</ng-template>\n<ng-template #formReferencePoint>\n  <div class=\"mb-9\">\n    <label class=\"d-block\">\n      <span class=\"form-label\">{{\n        (advancedMode() ? refLabel() : reverseInputFields() ? toLabel() : fromLabel()) | translate\n      }}</span>\n      <si-calendar-button class=\"w-100\">\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          name=\"point1\"\n          required\n          siDatepicker\n          [siDatepickerConfig]=\"datepickerConfigInternal()\"\n          [siDatepickerScrollStrategy]=\"scrollStrategy()\"\n          [disabled]=\"point1Now()\"\n          [placeholder]=\"datePlaceholder() | translate\"\n          [(ngModel)]=\"point1date\"\n          (ngModelChange)=\"point1Changed()\"\n        />\n      </si-calendar-button>\n    </label>\n    <label class=\"ms-4 mt-5 text-nowrap form-check mb-2\">\n      <input\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        name=\"point1now\"\n        [(ngModel)]=\"point1Now\"\n        (ngModelChange)=\"point1Changed()\"\n      />\n      <span class=\"form-check-label\">{{\n        (enableTimeSelection() ? nowLabel() : todayLabel()) | translate\n      }}</span>\n    </label>\n  </div>\n</ng-template>\n\n<ng-template #formPoint2Date>\n  <label class=\"d-block mb-4 bp-9\">\n    <span class=\"form-label\">{{\n      (reverseInputFields() ? fromLabel() : toLabel()) | translate\n    }}</span>\n    <si-calendar-button class=\"w-100\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        name=\"point2\"\n        required\n        siDatepicker\n        [siDatepickerConfig]=\"datepickerConfigInternal()\"\n        [siDatepickerScrollStrategy]=\"scrollStrategy()\"\n        [placeholder]=\"datePlaceholder() | translate\"\n        [(ngModel)]=\"point2date\"\n        (ngModelChange)=\"point2Changed()\"\n      />\n    </si-calendar-button>\n  </label>\n</ng-template>\n\n<ng-template #formPoint2Duration>\n  <div>\n    <span class=\"form-label\">{{ rangeLabel() | translate }}</span>\n    <si-relative-date\n      class=\"d-block mb-4\"\n      [unitLabel]=\"unitLabel() | translate\"\n      [valueLabel]=\"valueLabel() | translate\"\n      [enableTimeSelection]=\"enableTimeSelection()\"\n      [scrollStrategy]=\"scrollStrategy()\"\n      [(value)]=\"point2offset\"\n      (valueChange)=\"point2Changed()\"\n    />\n    <div class=\"range-type ms-4\">\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"before\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ beforeLabel() | translate }}\n        </span>\n      </label>\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"after\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ afterLabel() | translate }}\n        </span>\n      </label>\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"within\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ withinLabel() | translate }}\n        </span>\n      </label>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-grid;background:var(--si-sys-background-1);grid-template-areas:\"preset main\" \"footer footer\"}:host.mobile{grid-template-areas:\"preset\" \"main\" \"footer\";justify-items:stretch}:host.mobile .presets{border-block-end:1px solid var(--si-sys-border-4)}.main-form{inline-size:calc(16rem + 2 * var(--si-sys-sizing-spacing-x-90));grid-area:main}.advanced-form{block-size:calc(16rem + 24px + 6 * var(--si-sys-sizing-spacing-y-50) + 2 * var(--si-sys-sizing-spacing-y-60) + 1px + var(--si-sys-sizing-spacing-y-20))}.preset-select{display:flex;inline-size:calc(9.5rem + 2 * var(--si-sys-sizing-spacing-x-80));flex-direction:column;grid-area:preset;background:var(--si-sys-background-1)}.preset-select.mobile{max-block-size:346px;inline-size:unset}ul{flex:1 1 auto;padding-inline-start:0;list-style:none}.preset-item{cursor:pointer;line-height:var(--si-sys-typography-line-height-body)}.preset-item:hover{background:var(--si-sys-background-hover)}.form-check-input{inset-block-start:0}.element-zoom{rotate:45deg}.footer{grid-area:footer}\n"], dependencies: [{ kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio]:not([ngNoCva])[formControlName],input[type=radio]:not([ngNoCva])[formControl],input[type=radio]:not([ngNoCva])[ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: SiCalendarButtonComponent, selector: "si-calendar-button", inputs: ["ariaLabel"] }, { kind: "component", type: SiDatepickerComponent, selector: "si-datepicker", inputs: ["focusedDate", "date", "dateRange", "dateRangeRole", "initialFocus", "disabledTime", "config", "previousLabel", "nextLabel", "calendarWeekLabel", "time12h", "rangeType", "minMonth", "maxMonth", "hideTimeToggle", "hideCalendar", "timepickerLabel", "activeHover"], outputs: ["focusedDateChange", "dateChange", "dateRangeChange", "disabledTimeChange", "configChange", "rangeTypeChange", "activeHoverChange"] }, { kind: "directive", type: SiDatepickerDirective, selector: "[siDatepicker]", inputs: ["autoClose"], exportAs: ["siDatepicker"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiRelativeDateComponent, selector: "si-relative-date", inputs: ["value", "enableTimeSelection", "valueLabel", "unitLabel", "scrollStrategy"], outputs: ["valueChange"] }, { kind: "component", type: SiSearchBarComponent, selector: "si-search-bar", inputs: ["debounceTime", "prohibitedCharacters", "placeholder", "showIcon", "value", "readonly", "colorVariant", "disabled", "maxlength", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: PresetMatchFilterPipe, name: "presetMatchFilter" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDateRangeFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDateRangeFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-date-range-filter', imports: [
                         CdkOption,
@@ -672,9 +722,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiRelativeDateComponent,
                         SiSearchBarComponent,
                         SiTranslatePipe
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                    ], host: {
                         '[class.mobile]': 'smallScreen'
-                    }, template: "@if (presetList()?.length) {\n  @if (this.smallScreen) {\n    <div class=\"presets d-flex\">\n      <button\n        #presetTrigger=\"cdkOverlayOrigin\"\n        type=\"button\"\n        class=\"btn btn-tertiary dropdown-toggle m-5 flex-grow-1\"\n        cdkOverlayOrigin\n        [class.show]=\"presetOpen()\"\n        [attr.aria-expanded]=\"presetOpen()\"\n        (click)=\"presetOpen.set(true)\"\n      >\n        {{ presetLabel() | translate }}\n        <si-icon class=\"dropdown-caret icon\" [icon]=\"icons.elementDown2\" />\n      </button>\n      <ng-template\n        cdkConnectedOverlay\n        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n        cdkConnectedOverlayHasBackdrop\n        [cdkConnectedOverlayOpen]=\"presetOpen()\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOrigin]=\"presetTrigger\"\n        [cdkConnectedOverlayMinWidth]=\"\n          presetTrigger.elementRef.nativeElement?.getBoundingClientRect().width\n        \"\n        (backdropClick)=\"presetOpen.set(false)\"\n        (detach)=\"presetOpen.set(false)\"\n      >\n        <div\n          cdkTrapFocus\n          class=\"preset-select mobile elevation-2 rounded-2 w-100\"\n          cdkTrapFocusAutoCapture\n        >\n          <ng-container *ngTemplateOutlet=\"presets\" />\n        </div>\n      </ng-template>\n    </div>\n  } @else {\n    <div class=\"preset-select border-end\">\n      <ng-container *ngTemplateOutlet=\"presets\" />\n    </div>\n  }\n}\n<form class=\"main-form d-flex flex-column flex-fill\">\n  @if (advancedMode() || inputMode()) {\n    <div class=\"advanced-form px-6 py-4\">\n      @if (!reverseInputFields()) {\n        <ng-container *ngTemplateOutlet=\"formReferencePoint\" />\n      }\n\n      <div class=\"mb-8\">\n        @if (point2Mode() === 'date') {\n          <ng-container *ngTemplateOutlet=\"formPoint2Date\" />\n        } @else if (point2Mode() === 'duration') {\n          <ng-container *ngTemplateOutlet=\"formPoint2Duration\" />\n        }\n      </div>\n\n      @if (reverseInputFields()) {\n        <ng-container *ngTemplateOutlet=\"formReferencePoint\" />\n      }\n    </div>\n  } @else {\n    <si-datepicker\n      [config]=\"dateRangeConfig()\"\n      [focusedDate]=\"focusedDate()\"\n      [dateRange]=\"dateRange()\"\n      (dateRangeChange)=\"updateFromDateRange($event)\"\n    />\n  }\n\n  @if (advancedMode() || !hideAdvancedMode()) {\n    <label class=\"form-switch form-check ms-6\">\n      <input\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        name=\"advancedMode\"\n        role=\"switch\"\n        [(ngModel)]=\"advancedMode\"\n        (ngModelChange)=\"updateOnModeChange()\"\n      />\n      <span class=\"form-check-label\">{{ advancedLabel() | translate }}</span>\n    </label>\n  }\n\n  <div class=\"mt-4 mb-6 ms-6\">\n    {{ previewLabel() | translate }}:\n    <span class=\"preview\">\n      @if (advancedMode()) {\n        @let calculated = calculatedRange();\n        @if (calculated.valid) {\n          {{ calculated.start | date: pipeFormat() }} -\n          {{ calculated.end | date: pipeFormat() }}\n        } @else {\n          <span class=\"text-secondary\">\n            {{ selectRangeLabel() | translate }}\n          </span>\n        }\n      } @else {\n        @let range = safeDateRange();\n        {{ range.start | date: pipeFormat() }} -\n        @if (range.end) {\n          {{ range.end | date: pipeFormat() }}\n        } @else {\n          <span class=\"text-secondary\">\n            {{ rangeEndDateMissingLabel() | translate }}\n          </span>\n        }\n      }\n    </span>\n  </div>\n</form>\n\n@if (showApplyButton()) {\n  <div class=\"footer border-top px-6 py-5 d-flex\">\n    <button type=\"button\" class=\"btn btn-primary ms-auto\" (click)=\"applyClicked.emit()\">\n      {{ applyLabel() | translate }}\n    </button>\n  </div>\n}\n<ng-template #presets>\n  @if (presetSearch()) {\n    <si-search-bar\n      colorVariant=\"base-0\"\n      class=\"mx-6 mt-5 mb-6\"\n      [placeholder]=\"searchLabel() | translate\"\n      [showIcon]=\"true\"\n      [(ngModel)]=\"presetFilter\"\n    />\n  }\n  <ul\n    class=\"overflow-auto\"\n    cdkListbox\n    [cdkListboxValue]=\"[]\"\n    [attr.aria-label]=\"presetLabel() | translate\"\n    (cdkListboxValueChange)=\"selectPresetItem($event.value[0])\"\n  >\n    @for (item of filteredPresetList(); track $index) {\n      @if (item.label | translate | presetMatchFilter: presetFilter()) {\n        <li class=\"preset-item focus-inside px-8 py-5\" [cdkOption]=\"item.label\">\n          {{ item.label | translate }}\n        </li>\n      }\n    }\n  </ul>\n</ng-template>\n<ng-template #formReferencePoint>\n  <div class=\"mb-9\">\n    <label class=\"d-block\">\n      <span class=\"form-label\">{{\n        (advancedMode() ? refLabel() : reverseInputFields() ? toLabel() : fromLabel()) | translate\n      }}</span>\n      <si-calendar-button class=\"w-100\">\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          name=\"point1\"\n          required\n          siDatepicker\n          [siDatepickerConfig]=\"datepickerConfigInternal()\"\n          [siDatepickerScrollStrategy]=\"scrollStrategy()\"\n          [disabled]=\"point1Now()\"\n          [placeholder]=\"datePlaceholder() | translate\"\n          [(ngModel)]=\"point1date\"\n          (ngModelChange)=\"point1Changed()\"\n        />\n      </si-calendar-button>\n    </label>\n    <label class=\"ms-4 mt-5 text-nowrap form-check\">\n      <input\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        name=\"point1now\"\n        [(ngModel)]=\"point1Now\"\n        (ngModelChange)=\"point1Changed()\"\n      />\n      <span class=\"form-check-label\">{{\n        (enableTimeSelection() ? nowLabel() : todayLabel()) | translate\n      }}</span>\n    </label>\n  </div>\n</ng-template>\n\n<ng-template #formPoint2Date>\n  <label class=\"d-block mb-4 bp-9\">\n    <span class=\"form-label\">{{\n      (reverseInputFields() ? fromLabel() : toLabel()) | translate\n    }}</span>\n    <si-calendar-button class=\"w-100\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        name=\"point2\"\n        required\n        siDatepicker\n        [siDatepickerConfig]=\"datepickerConfigInternal()\"\n        [siDatepickerScrollStrategy]=\"scrollStrategy()\"\n        [placeholder]=\"datePlaceholder() | translate\"\n        [(ngModel)]=\"point2date\"\n        (ngModelChange)=\"point2Changed()\"\n      />\n    </si-calendar-button>\n  </label>\n</ng-template>\n\n<ng-template #formPoint2Duration>\n  <div>\n    <span class=\"form-label\">{{ rangeLabel() | translate }}</span>\n    <si-relative-date\n      class=\"d-block mb-4\"\n      [unitLabel]=\"unitLabel() | translate\"\n      [valueLabel]=\"valueLabel() | translate\"\n      [enableTimeSelection]=\"enableTimeSelection()\"\n      [scrollStrategy]=\"scrollStrategy()\"\n      [(value)]=\"point2offset\"\n      (valueChange)=\"point2Changed()\"\n    />\n    <div class=\"range-type ms-4\">\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"before\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ beforeLabel() | translate }}\n        </span>\n      </label>\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"after\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ afterLabel() | translate }}\n        </span>\n      </label>\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"within\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ withinLabel() | translate }}\n        </span>\n      </label>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-grid;background:var(--element-base-1);grid-template-areas:\"preset main\" \"footer footer\"}:host.mobile{grid-template-areas:\"preset\" \"main\" \"footer\";justify-items:stretch}:host.mobile .presets{border-block-end:1px solid var(--element-ui-4)}.main-form{inline-size:calc(16rem + 64px);grid-area:main}.advanced-form{block-size:calc(16rem + 133px)}.preset-select{display:flex;inline-size:calc(9.5rem + 48px);flex-direction:column;grid-area:preset;background:var(--element-base-1)}.preset-select.mobile{max-block-size:346px;inline-size:unset}ul{flex:1 1 auto;padding-inline-start:0;list-style:none}.preset-item{cursor:pointer;line-height:1.1428571429}.preset-item:hover{background:var(--element-base-1-hover)}.form-check-input{inset-block-start:0}.element-zoom{rotate:45deg}.footer{grid-area:footer}\n"] }]
+                    }, template: "@if (presetList()?.length) {\n  @if (this.smallScreen) {\n    <div class=\"presets d-flex\">\n      <button\n        #presetTrigger=\"cdkOverlayOrigin\"\n        type=\"button\"\n        class=\"btn btn-tertiary dropdown-toggle m-5 flex-grow-1\"\n        cdkOverlayOrigin\n        [class.show]=\"presetOpen()\"\n        [attr.aria-expanded]=\"presetOpen()\"\n        (click)=\"presetOpen.set(true)\"\n      >\n        {{ presetLabel() | translate }}\n        <si-icon class=\"dropdown-caret icon\" [icon]=\"icons.elementDown2\" />\n      </button>\n      <ng-template\n        cdkConnectedOverlay\n        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n        cdkConnectedOverlayHasBackdrop\n        [cdkConnectedOverlayOpen]=\"presetOpen()\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOrigin]=\"presetTrigger\"\n        [cdkConnectedOverlayMinWidth]=\"\n          presetTrigger.elementRef.nativeElement?.getBoundingClientRect().width\n        \"\n        (backdropClick)=\"presetOpen.set(false)\"\n        (detach)=\"presetOpen.set(false)\"\n      >\n        <div\n          cdkTrapFocus\n          class=\"preset-select mobile shadow-3 rounded-2 w-100\"\n          cdkTrapFocusAutoCapture\n        >\n          <ng-container *ngTemplateOutlet=\"presets\" />\n        </div>\n      </ng-template>\n    </div>\n  } @else {\n    <div class=\"preset-select border-end\">\n      <ng-container *ngTemplateOutlet=\"presets\" />\n    </div>\n  }\n}\n<form class=\"main-form d-flex flex-column flex-fill\">\n  @if (advancedMode() || inputMode()) {\n    <div class=\"advanced-form px-6 py-4\">\n      @if (!reverseInputFields()) {\n        <ng-container *ngTemplateOutlet=\"formReferencePoint\" />\n      }\n\n      <div class=\"mb-8\">\n        @if (point2Mode() === 'date') {\n          <ng-container *ngTemplateOutlet=\"formPoint2Date\" />\n        } @else if (point2Mode() === 'duration') {\n          <ng-container *ngTemplateOutlet=\"formPoint2Duration\" />\n        }\n      </div>\n\n      @if (reverseInputFields()) {\n        <ng-container *ngTemplateOutlet=\"formReferencePoint\" />\n      }\n    </div>\n  } @else {\n    <si-datepicker\n      [config]=\"dateRangeConfig()\"\n      [focusedDate]=\"focusedDate()\"\n      [dateRange]=\"dateRange()\"\n      (dateRangeChange)=\"updateFromDateRange($event)\"\n    />\n  }\n\n  @if (advancedMode() || !hideAdvancedMode()) {\n    <label class=\"form-switch form-check mb-2 ms-6\">\n      <input\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        name=\"advancedMode\"\n        role=\"switch\"\n        [(ngModel)]=\"advancedMode\"\n        (ngModelChange)=\"updateOnModeChange()\"\n      />\n      <span class=\"form-check-label\">{{ advancedLabel() | translate }}</span>\n    </label>\n  }\n\n  <div class=\"mt-4 mb-6 ms-6\">\n    {{ previewLabel() | translate }}:\n    <span class=\"preview\">\n      @if (advancedMode()) {\n        @let calculated = calculatedRange();\n        @if (calculated.valid) {\n          {{ calculated.start | date: pipeFormat() }} -\n          {{ calculated.end | date: pipeFormat() }}\n        } @else {\n          <span class=\"text-secondary\">\n            {{ selectRangeLabel() | translate }}\n          </span>\n        }\n      } @else {\n        @let range = safeDateRange();\n        {{ range.start | date: pipeFormat() }} -\n        @if (range.end) {\n          {{ range.end | date: pipeFormat() }}\n        } @else {\n          <span class=\"text-secondary\">\n            {{ rangeEndDateMissingLabel() | translate }}\n          </span>\n        }\n      }\n    </span>\n  </div>\n</form>\n\n@if (showApplyButton()) {\n  <div class=\"footer border-top px-6 py-5 d-flex\">\n    <button type=\"button\" class=\"btn btn-primary ms-auto\" (click)=\"applyClicked.emit()\">\n      {{ applyLabel() | translate }}\n    </button>\n  </div>\n}\n<ng-template #presets>\n  @if (presetSearch()) {\n    <si-search-bar\n      colorVariant=\"base-0\"\n      class=\"mx-6 mt-5 mb-6\"\n      [placeholder]=\"searchLabel() | translate\"\n      [showIcon]=\"true\"\n      [(ngModel)]=\"presetFilter\"\n    />\n  }\n  <ul\n    class=\"overflow-auto\"\n    cdkListbox\n    [cdkListboxValue]=\"[]\"\n    [attr.aria-label]=\"presetLabel() | translate\"\n    (cdkListboxValueChange)=\"selectPresetItem($event.value[0])\"\n  >\n    @for (item of filteredPresetList(); track $index) {\n      @if (item.label | translate | presetMatchFilter: presetFilter()) {\n        <li class=\"preset-item focus-inside px-8 py-5\" [cdkOption]=\"item.label\">\n          {{ item.label | translate }}\n        </li>\n      }\n    }\n  </ul>\n</ng-template>\n<ng-template #formReferencePoint>\n  <div class=\"mb-9\">\n    <label class=\"d-block\">\n      <span class=\"form-label\">{{\n        (advancedMode() ? refLabel() : reverseInputFields() ? toLabel() : fromLabel()) | translate\n      }}</span>\n      <si-calendar-button class=\"w-100\">\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          name=\"point1\"\n          required\n          siDatepicker\n          [siDatepickerConfig]=\"datepickerConfigInternal()\"\n          [siDatepickerScrollStrategy]=\"scrollStrategy()\"\n          [disabled]=\"point1Now()\"\n          [placeholder]=\"datePlaceholder() | translate\"\n          [(ngModel)]=\"point1date\"\n          (ngModelChange)=\"point1Changed()\"\n        />\n      </si-calendar-button>\n    </label>\n    <label class=\"ms-4 mt-5 text-nowrap form-check mb-2\">\n      <input\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        name=\"point1now\"\n        [(ngModel)]=\"point1Now\"\n        (ngModelChange)=\"point1Changed()\"\n      />\n      <span class=\"form-check-label\">{{\n        (enableTimeSelection() ? nowLabel() : todayLabel()) | translate\n      }}</span>\n    </label>\n  </div>\n</ng-template>\n\n<ng-template #formPoint2Date>\n  <label class=\"d-block mb-4 bp-9\">\n    <span class=\"form-label\">{{\n      (reverseInputFields() ? fromLabel() : toLabel()) | translate\n    }}</span>\n    <si-calendar-button class=\"w-100\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        name=\"point2\"\n        required\n        siDatepicker\n        [siDatepickerConfig]=\"datepickerConfigInternal()\"\n        [siDatepickerScrollStrategy]=\"scrollStrategy()\"\n        [placeholder]=\"datePlaceholder() | translate\"\n        [(ngModel)]=\"point2date\"\n        (ngModelChange)=\"point2Changed()\"\n      />\n    </si-calendar-button>\n  </label>\n</ng-template>\n\n<ng-template #formPoint2Duration>\n  <div>\n    <span class=\"form-label\">{{ rangeLabel() | translate }}</span>\n    <si-relative-date\n      class=\"d-block mb-4\"\n      [unitLabel]=\"unitLabel() | translate\"\n      [valueLabel]=\"valueLabel() | translate\"\n      [enableTimeSelection]=\"enableTimeSelection()\"\n      [scrollStrategy]=\"scrollStrategy()\"\n      [(value)]=\"point2offset\"\n      (valueChange)=\"point2Changed()\"\n    />\n    <div class=\"range-type ms-4\">\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"before\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ beforeLabel() | translate }}\n        </span>\n      </label>\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"after\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ afterLabel() | translate }}\n        </span>\n      </label>\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"within\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ withinLabel() | translate }}\n        </span>\n      </label>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-grid;background:var(--si-sys-background-1);grid-template-areas:\"preset main\" \"footer footer\"}:host.mobile{grid-template-areas:\"preset\" \"main\" \"footer\";justify-items:stretch}:host.mobile .presets{border-block-end:1px solid var(--si-sys-border-4)}.main-form{inline-size:calc(16rem + 2 * var(--si-sys-sizing-spacing-x-90));grid-area:main}.advanced-form{block-size:calc(16rem + 24px + 6 * var(--si-sys-sizing-spacing-y-50) + 2 * var(--si-sys-sizing-spacing-y-60) + 1px + var(--si-sys-sizing-spacing-y-20))}.preset-select{display:flex;inline-size:calc(9.5rem + 2 * var(--si-sys-sizing-spacing-x-80));flex-direction:column;grid-area:preset;background:var(--si-sys-background-1)}.preset-select.mobile{max-block-size:346px;inline-size:unset}ul{flex:1 1 auto;padding-inline-start:0;list-style:none}.preset-item{cursor:pointer;line-height:var(--si-sys-typography-line-height-body)}.preset-item:hover{background:var(--si-sys-background-hover)}.form-check-input{inset-block-start:0}.element-zoom{rotate:45deg}.footer{grid-area:footer}\n"] }]
         }], propDecorators: { range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: true }] }, { type: i0.Output, args: ["rangeChange"] }], presetList: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetList", required: false }] }], presetSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetSearch", required: false }] }], enableTimeSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableTimeSelection", required: false }] }], basicMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "basicMode", required: false }] }], reverseInputFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverseInputFields", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], showApplyButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApplyButton", required: false }] }], hideAdvancedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideAdvancedMode", required: false }] }], refLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "refLabel", required: false }] }], fromLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "fromLabel", required: false }] }], toLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toLabel", required: false }] }], rangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeLabel", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], nowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nowLabel", required: false }] }], dateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLabel", required: false }] }], previewLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewLabel", required: false }] }], datePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "datePlaceholder", required: false }] }], beforeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "beforeLabel", required: false }] }], afterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "afterLabel", required: false }] }], withinLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "withinLabel", required: false }] }], valueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabel", required: false }] }], unitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "unitLabel", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], presetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetLabel", required: false }] }], advancedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "advancedLabel", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], rangeEndDateMissingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeEndDateMissingLabel", required: false }] }], selectRangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectRangeLabel", required: false }] }], applyClicked: [{ type: i0.Output, args: ["applyClicked"] }], datepickerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "datepickerConfig", required: false }] }] } });
 
 /**
@@ -682,11 +732,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiDateRangeFilterModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDateRangeFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiDateRangeFilterModule, imports: [SiDateRangeFilterComponent], exports: [SiDateRangeFilterComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDateRangeFilterModule, imports: [SiDateRangeFilterComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDateRangeFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: SiDateRangeFilterModule, imports: [SiDateRangeFilterComponent], exports: [SiDateRangeFilterComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDateRangeFilterModule, imports: [SiDateRangeFilterComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDateRangeFilterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiDateRangeFilterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiDateRangeFilterComponent],