@siemens/element-ng 47.3.0 → 47.4.0

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

@@ -0,0 +1,649 @@
+import { CdkOption, CdkListbox } from '@angular/cdk/listbox';
+import { DatePipe, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, input, booleanAttribute, output, signal, computed, ChangeDetectionStrategy, Component, Pipe, inject, model, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { SiCalendarButtonComponent, SiDatepickerComponent, SiDatepickerDirective } from '@siemens/element-ng/datepicker';
+import { SiSearchBarComponent } from '@siemens/element-ng/search-bar';
+import * as i2 from '@siemens/element-translate-ng/translate';
+import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
+import { SiNumberInputComponent } from '@siemens/element-ng/number-input';
+import { SiSelectComponent, SiSelectSingleValueDirective, SiSelectSimpleOptionsDirective } from '@siemens/element-ng/select';
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Service to transform and calculate with DateRangeFilter objects.
+ */
+class SiDateRangeCalculationService {
+    /**
+     * Calculates the start and end dates of a DateRangeFilter.
+     * @param filter - The date range filter object to be resolved.
+     * @param options - Options for time handling
+     * @returns The resolved result in form of a ResolvedDateRange object.
+     */
+    resolveDateRangeFilter(filter, options) {
+        const ref = filter.point1 === 'now' ? new Date() : new Date(filter.point1);
+        const withTime = options?.withTime ?? true;
+        if (!withTime) {
+            this.removeTime(ref);
+        }
+        if (filter.point2 instanceof Date) {
+            const point2 = withTime ? filter.point2 : this.removeTime(new Date(filter.point2));
+            return this.normalize(ref, point2, options?.skipNormalization);
+        }
+        const offset = filter.point2;
+        switch (filter.range) {
+            case undefined:
+            case 'before':
+                return this.normalize(ref, this.datePlusOffset(ref, -offset), options?.skipNormalization);
+            case 'after':
+                return this.normalize(ref, this.datePlusOffset(ref, offset), options?.skipNormalization);
+            case 'within':
+                return this.normalize(this.datePlusOffset(ref, -offset), this.datePlusOffset(ref, offset), options?.skipNormalization);
+        }
+    }
+    datePlusOffset(date, offset) {
+        return new Date(date.getTime() + offset);
+    }
+    normalize(date1, date2, skip) {
+        const valid = !isNaN(date1.getTime()) && !isNaN(date2.getTime());
+        return skip
+            ? { start: date1, end: date2, valid }
+            : date1 < date2
+                ? { start: date1, end: date2, valid }
+                : { start: date2, end: date1, valid };
+    }
+    /**
+     * Utility to reset the time attributes to 0 (hours/minutes/seconds/milliseconds).
+     */
+    removeTime(date) {
+        date.setHours(0);
+        date.setMinutes(0);
+        date.setSeconds(0);
+        date.setMilliseconds(0);
+        return date;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDateRangeCalculationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDateRangeCalculationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDateRangeCalculationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const ONE_MINUTE = 60 * 1000;
+const ONE_DAY = ONE_MINUTE * 60 * 24;
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiRelativeDateComponent {
+    /** @defaultValue 0 */
+    value = input(0);
+    /** @defaultValue false */
+    enableTimeSelection = input(false, { transform: booleanAttribute });
+    valueLabel = input.required();
+    unitLabel = input.required();
+    valueChange = output();
+    internalValue = signal(0);
+    offset = signal(0);
+    unit = signal('days');
+    fullOffsetList = [
+        {
+            type: 'option',
+            value: 'minutes',
+            label: $localize `:@@SI_DATE_RANGE_FILTER.MINUTES:Minutes`,
+            offset: ONE_MINUTE
+        },
+        {
+            type: 'option',
+            value: 'hours',
+            label: $localize `:@@SI_DATE_RANGE_FILTER.HOURS:Hours`,
+            offset: 60 * ONE_MINUTE
+        },
+        {
+            type: 'option',
+            value: 'days',
+            label: $localize `:@@SI_DATE_RANGE_FILTER.DAYS:Days`,
+            offset: ONE_DAY
+        },
+        {
+            type: 'option',
+            value: 'weeks',
+            label: $localize `:@@SI_DATE_RANGE_FILTER.WEEKS:Weeks`,
+            offset: 7 * ONE_DAY
+        },
+        {
+            type: 'option',
+            value: 'months',
+            label: $localize `:@@SI_DATE_RANGE_FILTER.MONTHS:Months`,
+            offset: 30 * ONE_DAY
+        },
+        {
+            type: 'option',
+            value: 'years',
+            label: $localize `:@@SI_DATE_RANGE_FILTER.YEARS:Years`,
+            offset: 365 * ONE_DAY
+        }
+    ];
+    offsetList = computed(() => this.enableTimeSelection()
+        ? this.fullOffsetList
+        : this.fullOffsetList.filter(item => item.offset >= ONE_DAY));
+    ngOnChanges(changes) {
+        const value = this.value();
+        if (changes.value && value !== this.internalValue()) {
+            this.internalValue.set(value);
+            this.calculateOffset();
+        }
+    }
+    calculateOffset() {
+        const offsetList = this.offsetList();
+        let unit = '';
+        if (offsetList.length) {
+            this.offset.set(0);
+            unit = offsetList[0].value;
+        }
+        for (let i = offsetList.length - 1; i >= 0; i--) {
+            const item = offsetList[i];
+            const raw = this.internalValue() / item.offset;
+            const rounded = Math.round(raw);
+            if (rounded > 0 && Math.abs(raw - rounded) < 0.001) {
+                this.offset.set(rounded);
+                unit = item.value;
+                break;
+            }
+        }
+        this.changeUnit(unit);
+    }
+    updateValue(offset) {
+        this.offset.set(offset);
+        const item = this.offsetList().find(x => x.value === this.unit());
+        this.internalValue.set(offset * item.offset);
+        this.valueChange.emit(this.internalValue());
+    }
+    changeUnit(newUnit) {
+        this.unit.set(newUnit);
+        const item = this.offsetList().find(x => x.value === this.unit());
+        this.offset.set(Math.max(1, Math.round(this.internalValue() / item.offset)));
+        this.internalValue.set(this.offset() * item.offset);
+        this.valueChange.emit(this.internalValue());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiRelativeDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", 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 } }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<si-number-input\n  class=\"form-control mb-4\"\n  [aria-label]=\"valueLabel()\"\n  [ngModel]=\"offset()\"\n  (ngModelChange)=\"updateValue($event)\"\n/>\n<si-select\n  class=\"form-control\"\n  min=\"0\"\n  [ariaLabel]=\"unitLabel()\"\n  [options]=\"offsetList()\"\n  [ngModel]=\"unit()\"\n  (ngModelChange)=\"changeUnit($event)\"\n/>\n", styles: [".form-control{min-inline-size:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SiNumberInputComponent, selector: "si-number-input", inputs: ["min", "max", "step", "value", "unit", "showButtons", "aria-label", "inputId", "disabled", "readonly", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: SiSelectComponent, selector: "si-select", inputs: ["id", "ariaLabel", "labelledby", "filterPlaceholder", "noResultsFoundLabel", "placeholder", "readonly", "hasFilter"], outputs: ["dropdownClose", "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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiRelativeDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-relative-date', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormsModule,
+                        SiNumberInputComponent,
+                        SiSelectComponent,
+                        SiSelectSingleValueDirective,
+                        SiSelectSimpleOptionsDirective
+                    ], template: "<si-number-input\n  class=\"form-control mb-4\"\n  [aria-label]=\"valueLabel()\"\n  [ngModel]=\"offset()\"\n  (ngModelChange)=\"updateValue($event)\"\n/>\n<si-select\n  class=\"form-control\"\n  min=\"0\"\n  [ariaLabel]=\"unitLabel()\"\n  [options]=\"offsetList()\"\n  [ngModel]=\"unit()\"\n  (ngModelChange)=\"changeUnit($event)\"\n/>\n", styles: [".form-control{min-inline-size:0}\n"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class PresetMatchFilterPipe {
+    transform(value, term) {
+        return !term ? true : value.toLowerCase().includes(term.toLowerCase());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PresetMatchFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: PresetMatchFilterPipe, isStandalone: true, name: "presetMatchFilter" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PresetMatchFilterPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'presetMatchFilter', pure: true }]
+        }] });
+class SiDateRangeFilterComponent {
+    service = inject(SiDateRangeCalculationService);
+    /** The filter range object */
+    range = model.required();
+    /** List of preset time ranges. When not present or empty, the preset section won't show */
+    presetList = input();
+    /**
+     * Determines if there's a search field for the preset list
+     *
+     * @defaultValue true
+     */
+    presetSearch = input(true, { transform: booleanAttribute });
+    /**
+     * Determines if time is selectable or only dates
+     *
+     * @defaultValue false
+     */
+    enableTimeSelection = input(false, { 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');
+    /**
+     * Reverses the order of the from/to fields
+     *
+     * @defaultValue false
+     */
+    reverseInputFields = input(false, { transform: booleanAttribute });
+    /**
+     * Determines whether to show the 'Apply' button
+     *
+     * @defaultValue false
+     */
+    showApplyButton = input(false, { transform: booleanAttribute });
+    /**
+     * Hides the advanced mode if input allows
+     *
+     * @defaultValue false
+     */
+    hideAdvancedMode = input(false, { transform: booleanAttribute });
+    /**
+     * label for the "Reference point" title
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATE_RANGE_FILTER.REF_POINT:Reference point`
+     * ```
+     */
+    refLabel = input($localize `:@@SI_DATE_RANGE_FILTER.REF_POINT:Reference point`);
+    /**
+     * label for the "Reference point" title
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATE_RANGE_FILTER.FROM:From`
+     * ```
+     */
+    fromLabel = input($localize `:@@SI_DATE_RANGE_FILTER.FROM:From`);
+    /**
+     * label for the "Reference point" title
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATE_RANGE_FILTER.TO:To`
+     * ```
+     */
+    toLabel = input($localize `:@@SI_DATE_RANGE_FILTER.TO:To`);
+    /**
+     * label for the "Range" title
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATE_RANGE_FILTER.RANGE:Range`
+     * ```
+     */
+    rangeLabel = input($localize `:@@SI_DATE_RANGE_FILTER.RANGE:Range`);
+    /**
+     * label for the "Today" checkbox
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATE_RANGE_FILTER.TODAY:Today`
+     * ```
+     */
+    todayLabel = input($localize `:@@SI_DATE_RANGE_FILTER.TODAY:Today`);
+    /**
+     * label for the "Now" checkbox
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATE_RANGE_FILTER.NOW:Now`
+     * ```
+     */
+    nowLabel = input($localize `:@@SI_DATE_RANGE_FILTER.NOW:Now`);
+    /**
+     * label for "Date" field / radio button
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATE_RANGE_FILTER.DATE:Date`
+     * ```
+     */
+    dateLabel = input($localize `:@@SI_DATE_RANGE_FILTER.DATE:Date`);
+    /**
+     * label for the "Preview" title
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATE_RANGE_FILTER.PREVIEW:Preview`
+     * ```
+     */
+    previewLabel = input($localize `:@@SI_DATE_RANGE_FILTER.PREVIEW:Preview`);
+    /**
+     * Placeholder for date fields
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATE_RANGE_FILTER.DATE_PLACEHOLDER:Select date`
+     * ```
+     */
+    datePlaceholder = input($localize `:@@SI_DATE_RANGE_FILTER.DATE_PLACEHOLDER:Select date`);
+    /**
+     * label for the "Before" toggle
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATE_RANGE_FILTER.BEFORE:Before`
+     * ```
+     */
+    beforeLabel = input($localize `:@@SI_DATE_RANGE_FILTER.BEFORE:Before`);
+    /**
+     * label for the "After" toggle
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATE_RANGE_FILTER.AFTER:After`
+     * ```
+     */
+    afterLabel = input($localize `:@@SI_DATE_RANGE_FILTER.AFTER:After`);
+    /**
+     * label for the "Within" toggle
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATE_RANGE_FILTER.WITHIN:Within`
+     * ```
+     */
+    withinLabel = input($localize `:@@SI_DATE_RANGE_FILTER.WITHIN:Within`);
+    /**
+     * label for the "value" number input
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATE_RANGE_FILTER.VALUE:Value`
+     * ```
+     */
+    valueLabel = input($localize `:@@SI_DATE_RANGE_FILTER.VALUE:Value`);
+    /**
+     * label for the "Unit" select
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATE_RANGE_FILTER.UNIT:Unit`
+     * ```
+     */
+    unitLabel = input($localize `:@@SI_DATE_RANGE_FILTER.UNIT:Unit`);
+    /**
+     * label for the "search" input
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATE_RANGE_FILTER.SEARCH:Search`
+     * ```
+     */
+    searchLabel = input($localize `:@@SI_DATE_RANGE_FILTER.SEARCH:Search`);
+    /**
+     * label for the "search" input
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATE_RANGE_FILTER.PRESETS:Presets`
+     * ```
+     */
+    presetLabel = input($localize `:@@SI_DATE_RANGE_FILTER.PRESETS:Presets`);
+    /**
+     * label for the "advanced" switch
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATE_RANGE_FILTER.ADVANCED:Advanced`
+     * ```
+     */
+    advancedLabel = input($localize `:@@SI_DATE_RANGE_FILTER.ADVANCED:Advanced`);
+    /**
+     * label for the "apply" switch
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATE_RANGE_FILTER.APPLY:Apply`
+     * ```
+     */
+    applyLabel = input($localize `:@@SI_DATE_RANGE_FILTER.APPLY:Apply`);
+    /** 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();
+    advancedMode = false;
+    dateRange = { start: undefined, end: undefined };
+    point1Now = true;
+    point2Mode = 'duration';
+    point1date = this.getDateNow();
+    point2date = this.getDateNow();
+    point2offset = 0;
+    point2range = 'before';
+    calculatedRange = computed(() => this.resolve(this.range()));
+    pipeFormat = computed(() => this.enableTimeSelection()
+        ? (this.datepickerConfig()?.dateTimeFormat ?? 'short')
+        : (this.datepickerConfig()?.dateFormat ?? 'shortDate'));
+    datepickerConfigInternal = computed(() => ({
+        ...(this.datepickerConfig() ?? {}),
+        enableDateRange: false,
+        showTime: this.enableTimeSelection(),
+        mandatoryTime: this.enableTimeSelection()
+    }));
+    dateRangeConfig = computed(() => ({
+        ...(this.datepickerConfig() ?? {}),
+        enableDateRange: true
+    }));
+    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);
+    });
+    presetFilter = signal('');
+    inputMode = computed(() => this.basicMode() === 'input' || this.enableTimeSelection());
+    ngOnChanges(changes) {
+        if (changes.enableTimeSelection ||
+            changes.datepickerConfig ||
+            (changes.range && this.rangeChanged(changes.range.previousValue, changes.range.currentValue))) {
+            this.updateFromRange();
+        }
+        if ((changes.basicMode || changes.enableTimeSelection) &&
+            this.inputMode() &&
+            !this.advancedMode) {
+            this.point2Mode = 'date';
+            this.point2Changed();
+        }
+    }
+    getDateNow() {
+        const now = new Date();
+        if (!this.enableTimeSelection()) {
+            this.service.removeTime(now);
+        }
+        return now;
+    }
+    rangeChanged(oldRange, newRange) {
+        return (!oldRange ||
+            oldRange.point1 !== newRange.point1 ||
+            oldRange.point2 !== newRange.point2 ||
+            oldRange.range !== newRange.range);
+    }
+    updateFromRange() {
+        const rangeVal = this.range();
+        this.point1Now = rangeVal.point1 === 'now';
+        this.point1date = rangeVal.point1 === 'now' ? this.getDateNow() : rangeVal.point1;
+        this.point2Mode = rangeVal.point2 instanceof Date ? 'date' : 'duration';
+        this.point2date = rangeVal.point2 instanceof Date ? rangeVal.point2 : this.getDateNow();
+        this.point2range = rangeVal.range ?? 'before';
+        this.point2offset =
+            rangeVal.point2 instanceof Date
+                ? Math.round(this.point1date.getTime() - rangeVal.point2.getTime())
+                : rangeVal.point2;
+        if ((this.point1Now && this.basicMode() !== 'input') || this.point2Mode !== 'date') {
+            this.advancedMode = true;
+        }
+        else {
+            this.advancedMode = false;
+            this.updateDateRange();
+        }
+    }
+    resolve(range, skipNormalization) {
+        return this.service.resolveDateRangeFilter(range, {
+            withTime: this.enableTimeSelection(),
+            skipNormalization
+        });
+    }
+    updateDateRange(range = this.range()) {
+        const calculatedRange = this.resolve(range);
+        this.dateRange.start = calculatedRange.start;
+        this.dateRange.end = calculatedRange.end;
+    }
+    updateOnModeChange() {
+        if (this.advancedMode) {
+            const calculatedRange = this.resolve(this.range());
+            this.point2Mode = 'duration';
+            this.point2range = 'after';
+            this.point2offset = Math.abs(calculatedRange.end.getTime() - calculatedRange.start.getTime());
+        }
+        else {
+            this.updateSimpleMode(this.range());
+        }
+    }
+    updateSimpleMode(newRange) {
+        if (this.inputMode()) {
+            this.range.update(oldRange => ({
+                ...oldRange,
+                point1: newRange.point1
+            }));
+            // input mode supports `now`, so point1 needs to remain unchanged
+            if (newRange.point1 === 'now') {
+                this.point1Now = true;
+                this.point1date = this.getDateNow();
+            }
+            else {
+                this.point1Now = false;
+                this.point1date = newRange.point1;
+            }
+            const calculatedRange = this.resolve(newRange, true);
+            this.point2Mode = 'date';
+            this.point2date = calculatedRange.end;
+            this.range.update(oldRange => ({
+                ...oldRange,
+                range: undefined,
+                point2: calculatedRange.end
+            }));
+        }
+        else {
+            this.point1Now = false;
+            this.updateDateRange(newRange);
+            this.updateFromDateRange();
+        }
+    }
+    updateFromDateRange() {
+        this.point1date = this.range().point1 = this.dateRange.start ?? this.getDateNow();
+        this.point2date = this.range().point2 = this.dateRange.end ?? this.getDateNow();
+        this.range.update(oldRange => ({ ...oldRange, range: undefined }));
+        this.point2Mode = 'date';
+        this.point2offset = 0;
+    }
+    point1Changed() {
+        if (this.point1Now) {
+            this.range.update(oldRange => ({ ...oldRange, point1: 'now' }));
+            this.point1date = this.getDateNow();
+            if (this.point2Mode !== 'date') {
+                this.point2range ??= 'before';
+            }
+        }
+        else {
+            this.range.update(oldRange => ({ ...oldRange, point1: this.point1date ?? new Date(NaN) }));
+        }
+    }
+    point2Changed() {
+        if (this.point2Mode === 'date') {
+            if (!(this.range().point2 instanceof Date)) {
+                const calculatedRange = this.resolve(this.range());
+                this.point2date =
+                    this.point1date < calculatedRange.end ? calculatedRange.start : calculatedRange.end;
+            }
+            this.range.update(oldRange => ({
+                ...oldRange,
+                range: undefined,
+                point2: this.point2date
+            }));
+        }
+        else {
+            this.range.update(oldRange => ({
+                ...oldRange,
+                range: this.point2range
+            }));
+            if (this.range().point2 instanceof Date) {
+                const calculatedRange = this.resolve(this.range());
+                this.point2offset = Math.round(calculatedRange.end.getTime() - calculatedRange.start.getTime());
+            }
+            this.range.update(oldRange => ({
+                ...oldRange,
+                point2: this.point2offset
+            }));
+        }
+    }
+    selectPresetItem(item) {
+        const newRange = item.type === 'custom'
+            ? item.calculate(item, this.range())
+            : { point1: 'now', range: 'before', point2: item.offset };
+        if (this.advancedMode) {
+            Object.assign(this.range(), newRange);
+            this.updateFromRange();
+        }
+        else {
+            this.updateSimpleMode(newRange);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDateRangeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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 }, 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 }, datepickerConfig: { classPropertyName: "datepickerConfig", publicName: "datepickerConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { range: "rangeChange", applyClicked: "applyClicked" }, usesOnChanges: true, ngImport: i0, template: "@if (presetList()?.length) {\n  <div class=\"preset-select border-end\">\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 class=\"overflow-auto\" cdkListbox [attr.aria-label]=\"presetLabel() | translate\">\n      @for (item of filteredPresetList(); track $index) {\n        @if (item.label | translate | presetMatchFilter: presetFilter()) {\n          <li\n            class=\"preset-item focus-inside px-8 py-5\"\n            [cdkOption]=\"item.label\"\n            (click)=\"selectPresetItem(item)\"\n            (keydown.enter)=\"selectPresetItem(item)\"\n          >\n            {{ item.label | translate }}\n          </li>\n        }\n      }\n    </ul>\n  </div>\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        }\n        @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]=\"dateRange.end ?? dateRange.start\"\n      [(dateRange)]=\"dateRange\"\n      (dateRangeChange)=\"updateFromDateRange()\"\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 (calculatedRange().valid) {\n        {{ calculatedRange().start | date: pipeFormat() }} -\n        {{ calculatedRange().end | date: pipeFormat() }}\n      } @else {\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\n<ng-template #formReferencePoint>\n  <div class=\"mb-8\">\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          [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-4 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        [attr.aria-label]=\"dateLabel() | translate\"\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      [(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\"}.main-form{inline-size:348px;grid-area:main}.advanced-form{block-size:392px}.preset-select{display:flex;inline-size:200px;flex-direction:column;grid-area:preset}ul{flex:1 1 0;padding-inline-start:0;list-style:none}.preset-item{cursor:pointer;line-height:1.143}.preset-item:hover{background:var(--element-base-1-hover)}label{display:inline-flex;align-items:center}.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: "pipe", type: DatePipe, name: "date" }, { 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],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]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: PresetMatchFilterPipe, name: "presetMatchFilter" }, { 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", "time12h", "rangeType", "minMonth", "maxMonth", "hideTimeToggle", "hideCalendar", "timepickerLabel", "activeHover"], outputs: ["focusedDateChange", "dateChange", "dateRangeChange", "disabledTimeChange", "configChange", "rangeTypeChange", "activeHoverChange"] }, { kind: "directive", type: SiDatepickerDirective, selector: "[siDatepicker]", inputs: ["autoClose", "triggeringInput"], exportAs: ["siDatepicker"] }, { kind: "component", type: SiRelativeDateComponent, selector: "si-relative-date", inputs: ["value", "enableTimeSelection", "valueLabel", "unitLabel"], outputs: ["valueChange"] }, { kind: "component", type: SiSearchBarComponent, selector: "si-search-bar", inputs: ["debounceTime", "prohibitedCharacters", "placeholder", "showIcon", "tabbable", "value", "readonly", "colorVariant", "disabled"], outputs: ["searchChange"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i2.SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDateRangeFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-date-range-filter', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CdkOption,
+                        CdkListbox,
+                        DatePipe,
+                        FormsModule,
+                        NgTemplateOutlet,
+                        PresetMatchFilterPipe,
+                        SiCalendarButtonComponent,
+                        SiDatepickerComponent,
+                        SiDatepickerDirective,
+                        SiRelativeDateComponent,
+                        SiSearchBarComponent,
+                        SiTranslateModule
+                    ], template: "@if (presetList()?.length) {\n  <div class=\"preset-select border-end\">\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 class=\"overflow-auto\" cdkListbox [attr.aria-label]=\"presetLabel() | translate\">\n      @for (item of filteredPresetList(); track $index) {\n        @if (item.label | translate | presetMatchFilter: presetFilter()) {\n          <li\n            class=\"preset-item focus-inside px-8 py-5\"\n            [cdkOption]=\"item.label\"\n            (click)=\"selectPresetItem(item)\"\n            (keydown.enter)=\"selectPresetItem(item)\"\n          >\n            {{ item.label | translate }}\n          </li>\n        }\n      }\n    </ul>\n  </div>\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        }\n        @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]=\"dateRange.end ?? dateRange.start\"\n      [(dateRange)]=\"dateRange\"\n      (dateRangeChange)=\"updateFromDateRange()\"\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 (calculatedRange().valid) {\n        {{ calculatedRange().start | date: pipeFormat() }} -\n        {{ calculatedRange().end | date: pipeFormat() }}\n      } @else {\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\n<ng-template #formReferencePoint>\n  <div class=\"mb-8\">\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          [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-4 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        [attr.aria-label]=\"dateLabel() | translate\"\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      [(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\"}.main-form{inline-size:348px;grid-area:main}.advanced-form{block-size:392px}.preset-select{display:flex;inline-size:200px;flex-direction:column;grid-area:preset}ul{flex:1 1 0;padding-inline-start:0;list-style:none}.preset-item{cursor:pointer;line-height:1.143}.preset-item:hover{background:var(--element-base-1-hover)}label{display:inline-flex;align-items:center}.form-check-input{inset-block-start:0}.element-zoom{rotate:45deg}.footer{grid-area:footer}\n"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiDateRangeFilterModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDateRangeFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiDateRangeFilterModule, imports: [SiDateRangeFilterComponent], exports: [SiDateRangeFilterComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDateRangeFilterModule, imports: [SiDateRangeFilterComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDateRangeFilterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SiDateRangeFilterComponent],
+                    exports: [SiDateRangeFilterComponent]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ONE_DAY, ONE_MINUTE, PresetMatchFilterPipe, SiDateRangeCalculationService, SiDateRangeFilterComponent, SiDateRangeFilterModule };
+//# sourceMappingURL=siemens-element-ng-date-range-filter.mjs.map