@koobiq/components 20.3.1 → 20.3.2

package/fesm2022/koobiq-components-time-range.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, input, computed, viewChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, booleanAttribute, output, signal, Directive, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, inject, signal, computed, ElementRef, input, viewChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, booleanAttribute, output, Directive, NgModule } from '@angular/core';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
@@ -8,21 +9,20 @@ import { KbqButtonModule } from '@koobiq/components/button';
 import { DateAdapter, DateFormatter, ruRULocaleData, KBQ_LOCALE_SERVICE, PopUpSizes, PopUpPlacements } from '@koobiq/components/core';
 import * as i2$2 from '@koobiq/components/popover';
 import { KbqPopoverTrigger, KbqPopoverModule } from '@koobiq/components/popover';
-import { NgTemplateOutlet } from '@angular/common';
 import * as i2 from '@koobiq/components/datepicker';
 import { KbqDatepickerModule } from '@koobiq/components/datepicker';
 import * as i3 from '@koobiq/components/form-field';
-import { KbqFieldset, KbqFieldsetItem, KbqFormFieldControl } from '@koobiq/components/form-field';
+import { KbqError, KbqFieldset, KbqFieldsetItem, KbqHint, KbqFormFieldControl } from '@koobiq/components/form-field';
 import * as i2$1 from '@koobiq/components/icon';
 import { KbqIcon, KbqIconModule } from '@koobiq/components/icon';
 import * as i5 from '@koobiq/components/radio';
 import { KbqRadioModule } from '@koobiq/components/radio';
 import * as i4 from '@koobiq/components/timepicker';
 import { KbqTimepicker, TimeFormats, KbqTimepickerModule } from '@koobiq/components/timepicker';
-import { merge, Subject } from 'rxjs';
 import { map, distinctUntilChanged } from 'rxjs/operators';
 import * as i1$1 from '@koobiq/components/link';
 import { KbqLinkModule } from '@koobiq/components/link';
+import { Subject } from 'rxjs';
 
 /** Preset of selectable time ranges, provided by DI. */
 const KBQ_DEFAULT_TIME_RANGE_TYPES = new InjectionToken('KBQ_DEFAULT_TIME_RANGE_TYPES');
@@ -59,12 +59,39 @@ const rangeValidator = (timeRangeService) => {
         }
         const fromDateTime = timeRangeService.combineDateAndTime(form.fromDate, form.fromTime);
         const toDateTime = timeRangeService.combineDateAndTime(form.toDate, form.toTime);
-        return timeRangeService.dateAdapter.compareDate(fromDateTime, toDateTime) > 0
+        return timeRangeService.dateAdapter.compareDateTime(fromDateTime, toDateTime) > 0
             ? { fromIsGreaterThanTo: fromDateTime }
             : null;
     };
 };
 
+/**
+ * Channel between the popover footer, which `KbqTimeRange` owns, and the editor rendered inside the
+ * popover. Provided by `KbqTimeRange`, so there is exactly one instance per component.
+ *
+ * @docs-private
+ */
+class KbqTimeRangeEditorBridge {
+    constructor() {
+        /**
+         * Raised while a pointer is held down on the footer. `focusout` on its own cannot tell "the user is
+         * pressing apply" apart from "the user clicked a blank spot": Safari does not move focus onto a
+         * `<button>` when it is clicked, so both arrive with a `null` `relatedTarget`.
+         */
+        this.applyGestureInProgress = false;
+        /**
+         * Registered by the editor. Reveals the errors of both borders and moves focus to the first field
+         * carrying one; returns whether the editor is free of errors.
+         */
+        this.revealErrors = () => true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRangeEditorBridge, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRangeEditorBridge }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRangeEditorBridge, decorators: [{
+            type: Injectable
+        }] });
+
 class KbqTimeRangeService {
     constructor() {
         // Optional so the constructor can name the missing provider instead of letting DI throw a bare
@@ -74,6 +101,18 @@ class KbqTimeRangeService {
         this.providedDefaultTimeRangeTypes = inject(KBQ_DEFAULT_TIME_RANGE_TYPES, { optional: true }) || defaultTimeRangeTypes;
         this.customTimeRangeTypes = inject(KBQ_CUSTOM_TIME_RANGE_TYPES, { optional: true });
         this.DEFAULT_RANGE_TYPE = 'lastHour';
+        this.boundsSource = signal({
+            min: signal(null),
+            max: signal(null)
+        }, ...(ngDevMode ? [{ debugName: "boundsSource" }] : []));
+        /**
+         * Bounds of the owning component, so that every default and every check reads one pair. Both are
+         * exact instants rather than whole days: a `maxDate` that should admit its own day has to carry the
+         * end of that day.
+         */
+        this.minDate = computed(() => this.boundsSource().min() ?? null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+        /** @see minDate */
+        this.maxDate = computed(() => this.boundsSource().max() ?? null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
         this.timeRangeConfig = {
             lastMinute: { units: { minutes: -1 }, translationType: 'minutes' },
             last5Minutes: { units: { minutes: -5 }, translationType: 'minutes' },
@@ -111,21 +150,39 @@ class KbqTimeRangeService {
     add({ type, ...customTimeRangeConfig }) {
         this.timeRangeConfig[type] = customTimeRangeConfig;
     }
+    /**
+     * Hands the owning component's own bound inputs over, rather than a copy of their values: a signal
+     * input reads as its initial value until the first change detection, so a mirror would leave every
+     * default computed in a constructor clamped against no bounds at all.
+     */
+    bindBounds(min, max) {
+        this.boundsSource.set({ min, max });
+    }
     getTimeRangeTypeUnits(type) {
         return this.timeRangeConfig[type].units;
     }
     getTimeRangeUnitByType(type) {
         return this.timeRangeConfig[type].translationType;
     }
+    /**
+     * "Yesterday to today", pulled inside {@link minDate}/{@link maxDate} when they are set - otherwise
+     * the editor opens on a range it would itself report as out of bounds.
+     *
+     * Milliseconds are dropped from "today" *before* clamping, so a clamped end lands exactly on its
+     * bound rather than a fraction of a second below it.
+     */
     getDefaultRangeValue() {
-        const from = this.dateAdapter.addCalendarUnits(this.dateAdapter.today(), { days: -1 });
-        const to = this.dateAdapter.today();
-        return {
-            fromTime: this.omitMilliseconds(from),
-            fromDate: this.omitMilliseconds(from),
-            toTime: this.omitMilliseconds(to),
-            toDate: this.omitMilliseconds(to)
-        };
+        const today = this.omitMilliseconds(this.dateAdapter.today());
+        // `from` is derived from the clamped `to`, so the one-day window survives bounds that lie
+        // entirely in the past - clamping both ends independently would collapse it onto `maxDate`.
+        const to = this.clampToBounds(today);
+        const from = this.clampToBounds(this.dateAdapter.addCalendarUnits(to, { days: -1 }));
+        // Bounds lying entirely in the future leave no room below `to`, and both ends land on `minDate`.
+        // The window is opened upwards instead, which is the same day in the other direction.
+        const end = this.dateAdapter.compareDateTime(from, to) === 0
+            ? this.clampToBounds(this.dateAdapter.addCalendarUnits(from, { days: 1 }))
+            : to;
+        return { fromTime: from, fromDate: from, toTime: end, toDate: end };
     }
     getTimeRangeDefaultValue(rangeValue, availableTimeRangeTypes = []) {
         const defaultType = availableTimeRangeTypes[0] ?? this.providedDefaultTimeRangeTypes[0] ?? this.DEFAULT_RANGE_TYPE;
@@ -182,6 +239,30 @@ class KbqTimeRangeService {
         }
         return result;
     }
+    /** Which bound, if any, an instant falls outside of. */
+    checkBounds(dateTime) {
+        const minDate = this.minDate();
+        const maxDate = this.maxDate();
+        if (minDate && this.dateAdapter.compareDateTime(dateTime, minDate) < 0)
+            return 'min';
+        if (maxDate && this.dateAdapter.compareDateTime(dateTime, maxDate) > 0)
+            return 'max';
+        return null;
+    }
+    /**
+     * `DateAdapter.clampDate` compares whole days only, while a border is rejected by its time as well -
+     * a value clamped to the day would still land outside the bounds.
+     */
+    clampToBounds(date) {
+        switch (this.checkBounds(date)) {
+            case 'min':
+                return this.minDate();
+            case 'max':
+                return this.maxDate();
+            default:
+                return date;
+        }
+    }
     omitMilliseconds(date) {
         return this.dateAdapter.createDateTime(this.dateAdapter.getYear(date), this.dateAdapter.getMonth(date), this.dateAdapter.getDate(date), this.dateAdapter.getHours(date), this.dateAdapter.getMinutes(date), this.dateAdapter.getSeconds(date), 0);
     }
@@ -192,15 +273,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
             type: Injectable
         }], ctorParameters: () => [] });
 
+const borders = ['from', 'to'];
+const halves = ['Time', 'Date'];
+/**
+ * Errors are reported only once the user has left the border they belong to, and go quiet again as soon
+ * as typing resumes. The validators themselves always run, so that `validate()` stays honest about
+ * whether the range could be saved - only the painting waits.
+ */
 class RangeErrorStateMatcher {
-    isErrorState(control, form) {
-        return !!form?.invalid || !!control?.invalid;
+    isErrorState(control) {
+        return !!control?.invalid && !!control.touched;
     }
 }
 /** @docs-private */
 class KbqTimeRangeEditor {
     constructor() {
         this.timeRangeService = inject(KbqTimeRangeService);
+        this.editorBridge = inject(KbqTimeRangeEditorBridge, { optional: true });
+        this.elementRef = inject(ElementRef);
+        this.document = inject(DOCUMENT);
         /** The maximum selectable date. */
         this.maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
         /** The minimum selectable date. */
@@ -227,13 +318,31 @@ class KbqTimeRangeEditor {
                 formattedValue: this.getFormattedOption(type, localeConfig)
             }));
         }, ...(ngDevMode ? [{ debugName: "timeRangeTypesWithoutRange" }] : []));
+        /**
+         * Caption under the "range" option, spelling out the bounds the border has to stay within. Read from
+         * the service rather than from this component's own inputs, so that it can never disagree with what
+         * the border validators go on to enforce.
+         * @docs-private
+         */
+        this.boundsHint = computed(() => {
+            const { dateFormatter } = this.timeRangeService;
+            const minDate = this.timeRangeService.minDate();
+            const maxDate = this.timeRangeService.maxDate();
+            if (!minDate && !maxDate)
+                return '';
+            // The time half earns a place in the caption only once a bound actually carries one.
+            return [minDate, maxDate].some((bound) => bound && this.carriesTime(bound))
+                ? dateFormatter.rangeShortDateTime(minDate, maxDate ?? undefined)
+                : dateFormatter.rangeShortDate(minDate, maxDate ?? undefined);
+        }, ...(ngDevMode ? [{ debugName: "boundsHint" }] : []));
         /** @docs-private */
         this.timepickerList = viewChildren(KbqTimepicker, ...(ngDevMode ? [{ debugName: "timepickerList" }] : []));
         /** @docs-private */
         this.timepickerFormat = TimeFormats.HHmmss;
         /** @docs-private */
         this.rangeStateMatcher = new RangeErrorStateMatcher();
-        this.lastValidationErrorOnEmit = null;
+        /** Raised by the first "apply", after which a border left wholly empty counts as an error too. */
+        this.applyAttempted = false;
         /** @docs-private */
         this.onChange = (_value) => { };
         /** @docs-private */
@@ -247,21 +356,21 @@ class KbqTimeRangeEditor {
             fromDate: new FormControl(defaultRangeValue.fromDate, { nonNullable: true }),
             toTime: new FormControl(defaultRangeValue.toTime, { nonNullable: true }),
             toDate: new FormControl(defaultRangeValue.toDate, { nonNullable: true })
-        }, { validators: rangeValidator(this.timeRangeService) });
-        const rangeControls = [
-            this.form.controls.fromTime,
-            this.form.controls.fromDate,
-            this.form.controls.toTime,
-            this.form.controls.toDate
-        ];
-        merge(...rangeControls.map((control) => control.statusChanges))
-            .pipe(takeUntilDestroyed())
-            .subscribe(() => (this.lastValidationErrorOnEmit = this.concatControlValidationErrors()));
+        });
+        const { fromTime, fromDate, toTime, toDate } = this.form.controls;
+        this.borderControls = {
+            from: { Time: fromTime, Date: fromDate },
+            to: { Time: toTime, Date: toDate }
+        };
+        this.rangeControls = borders.flatMap((border) => this.borderHalves(border));
+        borders.forEach((border) => halves.forEach((half) => this.borderControls[border][half].addValidators(this.borderValidator(border, half))));
+        if (this.editorBridge)
+            this.editorBridge.revealErrors = () => this.revealErrors();
         this.form.valueChanges
             .pipe(map((formValue) => formValue.type), distinctUntilChanged(), takeUntilDestroyed())
             .subscribe((type) => {
             const isDisabled = type !== 'range';
-            rangeControls.forEach((control) => {
+            this.rangeControls.forEach((control) => {
                 if (isDisabled) {
                     control.disable({ emitEvent: false });
                 }
@@ -271,16 +380,13 @@ class KbqTimeRangeEditor {
             });
         });
         this.form.valueChanges.pipe(takeUntilDestroyed()).subscribe((formValue) => {
+            // Each half is checked against its sibling, so editing one has to re-run the other. Silent,
+            // or this would re-enter through `valueChanges`.
+            this.revalidateRange();
             const range = this.mapTimeRange(formValue);
             if (range)
                 this.onChange(range);
         });
-        this.form.statusChanges.pipe(takeUntilDestroyed()).subscribe((status) => {
-            const timepickerList = this.timepickerList();
-            if (timepickerList.at(0)) {
-                timepickerList.at(0).errorState = status === 'INVALID';
-            }
-        });
     }
     ngOnInit() {
         const defaultRangeValue = this.rangeValue();
@@ -295,7 +401,7 @@ class KbqTimeRangeEditor {
     }
     /** @docs-private */
     validate() {
-        return this.form.errors || this.lastValidationErrorOnEmit;
+        return this.concatControlValidationErrors();
     }
     /** Implemented as part of ControlValueAccessor */
     writeValue(value) {
@@ -304,8 +410,10 @@ class KbqTimeRangeEditor {
         const corrected = this.timeRangeService.checkAndCorrectTimeRangeValue(value, this.availableTimeRangeTypes(), this.form.value);
         this.form.controls.type.setValue(corrected.type);
         if (corrected.type === 'range' && corrected.startDateTime && corrected.endDateTime) {
-            const from = this.timeRangeService.dateAdapter.deserialize(corrected.startDateTime);
-            const to = this.timeRangeService.dateAdapter.deserialize(corrected.endDateTime);
+            const { dateAdapter } = this.timeRangeService;
+            // An unparseable end leaves its halves empty, which the border validators then report.
+            const from = dateAdapter.deserialize(corrected.startDateTime);
+            const to = dateAdapter.deserialize(corrected.endDateTime);
             this.form.patchValue({
                 fromTime: from,
                 fromDate: from,
@@ -322,19 +430,200 @@ class KbqTimeRangeEditor {
     registerOnTouched(fn) {
         this.onTouch = fn;
     }
+    /**
+     * Leaving one border reports what is wrong with it. Angular marks a control touched on its own blur,
+     * which is a finer grain than the spec asks for - so moving between a border's own date and time
+     * takes the touch back off, and the pair is judged only once focus is out of both.
+     * @docs-private
+     */
+    onBorderFocusOut(border, { currentTarget, relatedTarget }) {
+        this.setBorderTouched(border, !this.staysWithin(currentTarget, relatedTarget));
+    }
+    /**
+     * Typing puts a border back to its neutral state, the way `validation-on-blur` does for a single
+     * field. What is wrong with it is said again when focus leaves it.
+     * @docs-private
+     */
+    onBorderInput(border) {
+        this.setBorderTouched(border, false);
+    }
+    /**
+     * What is said when the range as a whole has left the bounds. Said once, below the last of the two
+     * ends, and only when both of them are at fault: a single end out of bounds is already pointed at by
+     * the fields painted around it. Silent until the ends have been left, keeping step with that
+     * painting.
+     * @docs-private
+     */
+    outOfBoundsMessage() {
+        const bothOutOfBounds = borders.every((border) => this.borderHalves(border).some((control) => control.touched && !!control.errors?.kbqTimeRangeOutOfBounds));
+        if (!bothOutOfBounds)
+            return '';
+        const template = this.localeConfiguration().editor.outOfBoundsError ??
+            ruRULocaleData.timeRange.editor.outOfBoundsError ??
+            '';
+        return template.replace('{{ value }}', this.boundsHint());
+    }
+    /**
+     * Once focus leaves the manual range fields, a reversed range is silently swapped back into order -
+     * except on the way to "apply", where the swap is left to the emitted value so that the popover does
+     * not visibly reorder itself in the same gesture that closes it.
+     * @docs-private
+     */
+    onRangeFocusOut({ currentTarget, relatedTarget }) {
+        const next = relatedTarget;
+        if (this.staysWithin(currentTarget, next))
+            return;
+        // Safari reports a `null` `relatedTarget` for a click on a button, so the footer is recognised by
+        // the pointer gesture it started rather than by where focus went.
+        if (this.editorBridge?.applyGestureInProgress || next?.closest('.kbq-time-range__buttons'))
+            return;
+        // Focus went nowhere because the whole window lost it - the user is still mid-edit.
+        if (!next && !this.document.hasFocus())
+            return;
+        this.swapIfReversed();
+    }
+    /**
+     * Reveals both borders and sends the user to the first field at fault, reporting whether there is
+     * anything to fix at all.
+     */
+    revealErrors() {
+        this.applyAttempted = true;
+        // `applyAttempted` is read by the validators, so they have to be run again before anything is said
+        // about the result.
+        this.revalidateRange();
+        borders.forEach((border) => this.setBorderTouched(border, true));
+        const firstInvalid = borders
+            .flatMap((border) => halves.map((half) => ({ border, half })))
+            .find(({ border, half }) => this.borderControls[border][half].invalid);
+        if (!firstInvalid)
+            return true;
+        // The only place the two halves of a name are put back together, and it builds a selector rather
+        // than a control key: the attribute in the template is spelled the same way.
+        this.elementRef.nativeElement
+            .querySelector(`[data-time-range-field="${firstInvalid.border}${firstInvalid.half}"]`)
+            ?.focus();
+        return false;
+    }
+    /** Whether a bound is a moment within its day rather than the day itself. */
+    carriesTime(date) {
+        const { dateAdapter } = this.timeRangeService;
+        return !!(dateAdapter.getHours(date) || dateAdapter.getMinutes(date) || dateAdapter.getSeconds(date));
+    }
+    /** Whether focus is still inside `group`, counting the datepicker calendar as part of it. */
+    staysWithin(group, next) {
+        // The calendar is rendered in a separate overlay, so focus moving into it is still editing.
+        return group.contains(next) || !!next?.closest('.kbq-datepicker__popup');
+    }
+    /** Both halves of a border are painted, or neither: the pair is what the user is judged on. */
+    setBorderTouched(border, touched) {
+        this.borderHalves(border).forEach((control) => {
+            if (touched) {
+                control.markAsTouched();
+            }
+            else {
+                control.markAsUntouched();
+            }
+        });
+    }
+    /** Both halves of one end, in the order they are painted. */
+    borderHalves(border) {
+        return halves.map((half) => this.borderControls[border][half]);
+    }
+    /** Each half is checked against its sibling, so a change to one has to re-run the other. */
+    revalidateRange() {
+        this.rangeControls.forEach((control) => control.updateValueAndValidity({ emitEvent: false }));
+    }
+    swapIfReversed() {
+        if (this.hasBorderProblem())
+            return;
+        const { fromTime, fromDate, toTime, toDate } = this.form.getRawValue();
+        if (!this.isReversed(fromDate, fromTime, toDate, toTime))
+            return;
+        this.form.patchValue({ fromTime: toTime, fromDate: toDate, toTime: fromTime, toDate: fromDate });
+    }
+    /**
+     * Whether anything about the borders would stop the range being saved. Deliberately blind to which
+     * borders have been revealed: a swap rewrites the user's values, so it has to answer "is this range
+     * actually sound", not "has the user been shown the problem yet".
+     */
+    hasBorderProblem() {
+        if (this.form.controls.type.value !== 'range')
+            return false;
+        // The validators run whether or not the user has been shown the result, so the controls already
+        // hold the answer - including the pickers' own format errors.
+        return this.rangeControls.some((control) => !!control.errors);
+    }
+    /**
+     * What is wrong with each half of a border, whether or not the user has been shown it. A missing half
+     * is flagged on its own; a bound is judged in two steps, so that the field actually at fault is the
+     * one painted.
+     */
+    borderErrors(border) {
+        const { value: date } = this.borderControls[border].Date;
+        const { value: time } = this.borderControls[border].Time;
+        if (!date && !time) {
+            const error = this.applyAttempted ? { kbqTimeRangeRequired: true } : null;
+            return { Date: error, Time: error };
+        }
+        // Only the missing half is painted, so the user is pointed at the field to fill in.
+        if (!date || !time) {
+            const error = { kbqTimeRangeIncomplete: true };
+            return { Date: date ? null : error, Time: time ? null : error };
+        }
+        const outOfBounds = this.checkBorderBounds(date, time);
+        if (!outOfBounds)
+            return { Date: null, Time: null };
+        const error = { kbqTimeRangeOutOfBounds: { bound: outOfBounds.bound } };
+        // A day outside the bounds is wrong whatever time sits next to it, so both halves are painted.
+        // A day on the boundary itself can only be pushed out by its time, so only the time is.
+        return { Date: outOfBounds.scope === 'date' ? error : null, Time: error };
+    }
+    /** Which bound a border falls outside of, and whether its day or only its time is to blame. */
+    checkBorderBounds(date, time) {
+        const service = this.timeRangeService;
+        const { dateAdapter } = service;
+        const minDate = service.minDate();
+        const maxDate = service.maxDate();
+        if (minDate && dateAdapter.compareDate(date, minDate) < 0)
+            return { bound: 'min', scope: 'date' };
+        if (maxDate && dateAdapter.compareDate(date, maxDate) > 0)
+            return { bound: 'max', scope: 'date' };
+        const combined = service.combineDateAndTime(date, time);
+        if (minDate && dateAdapter.compareDateTime(combined, minDate) < 0)
+            return { bound: 'min', scope: 'time' };
+        if (maxDate && dateAdapter.compareDateTime(combined, maxDate) > 0)
+            return { bound: 'max', scope: 'time' };
+        return null;
+    }
+    isReversed(fromDate, fromTime, toDate, toTime) {
+        if (!fromDate || !fromTime || !toDate || !toTime)
+            return false;
+        const service = this.timeRangeService;
+        return (service.dateAdapter.compareDateTime(service.combineDateAndTime(fromDate, fromTime), service.combineDateAndTime(toDate, toTime)) > 0);
+    }
+    /**
+     * A border reports only what the pickers do not: an empty half next to a filled one, a border left
+     * wholly empty once "apply" was pressed, and a border outside the bounds. Format is the pickers' own
+     * business, and so is the calendar restriction.
+     */
+    borderValidator(border, half) {
+        return () => {
+            if (this.form.controls.type.value !== 'range')
+                return null;
+            return this.borderErrors(border)[half];
+        };
+    }
     mapTimeRange({ type }) {
         if (!type)
             return;
-        return {
-            type,
-            ...this.timeRangeService.calculateTimeRange(type, {
-                // use control.value, since via form.value control values can be undefined
-                fromTime: this.form.controls.fromTime.value,
-                fromDate: this.form.controls.fromDate.value,
-                toDate: this.form.controls.toTime.value,
-                toTime: this.form.controls.toTime.value
-            })
-        };
+        const { fromTime, fromDate, toTime, toDate } = this.form.getRawValue();
+        // Ordered here as well as on blur, so that pressing "apply" straight out of a reversed field is
+        // safe. A range with something wrong in it is left exactly as typed: it cannot be saved anyway,
+        // and reordering it would move the fields out from under the user while they fix it.
+        const ordered = !this.hasBorderProblem() && this.isReversed(fromDate, fromTime, toDate, toTime)
+            ? { fromTime: toTime, fromDate: toDate, toTime: fromTime, toDate: fromDate }
+            : { fromTime, fromDate, toTime, toDate };
+        return { type, ...this.timeRangeService.calculateTimeRange(type, ordered) };
     }
     getFormattedOption(type, localeConfig) {
         const translationType = this.timeRangeService.getTimeRangeUnitByType(type);
@@ -344,7 +633,7 @@ class KbqTimeRangeEditor {
         return this.timeRangeService.dateFormatter.duration(this.timeRangeService.dateAdapter.deserialize(range.startDateTime), this.timeRangeService.dateAdapter.today(), [translationType], false, localeConfig.durationTemplate.option);
     }
     concatControlValidationErrors() {
-        let result = this.form.errors;
+        let result = null;
         Object.values(this.form.controls).forEach((control) => {
             if (control.errors) {
                 result = {
@@ -367,15 +656,17 @@ class KbqTimeRangeEditor {
                 provide: NG_VALIDATORS,
                 useExisting: KbqTimeRangeEditor
             }
-        ], viewQueries: [{ propertyName: "timepickerList", predicate: KbqTimepicker, descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n    <kbq-radio-group class=\"kbq-time-range-editor__container\" [formControl]=\"form.controls.type\">\n        @let types = timeRangeTypesWithoutRange();\n\n        @if (types.length) {\n            <div class=\"kbq-time-range-editor__predefined\">\n                @for (type of types; track type) {\n                    <kbq-radio-button class=\"kbq-time-range-editor__predefined-option\" [value]=\"type.type\">\n                        <ng-container\n                            *ngTemplateOutlet=\"optionTemplate() || defaultOptionTemplate; context: { $implicit: type }\"\n                        />\n                    </kbq-radio-button>\n                }\n            </div>\n        }\n\n        @if (isRangeVisible()) {\n            @let localeConfig = localeConfiguration();\n\n            <div class=\"kbq-time-range-editor__range\" role=\"group\">\n                @if (types.length) {\n                    <kbq-radio-button [value]=\"'range'\">{{ localeConfig.editor.rangeLabel }}</kbq-radio-button>\n                }\n\n                <div class=\"kbq-time-range-editor__date-time\">\n                    <span class=\"kbq-time-range-editor__date-time-prefix\" [attr.aria-label]=\"localeConfig.editor.from\">\n                        {{ localeConfig.editor.from }}\n                    </span>\n                    <kbq-fieldset>\n                        <kbq-form-field kbqFieldsetItem>\n                            <i kbq-icon=\"kbq-clock_16\" kbqPrefix [autoColor]=\"true\"></i>\n                            <input kbqTimepicker [format]=\"timepickerFormat\" [formControl]=\"form.controls.fromTime\" />\n                        </kbq-form-field>\n\n                        <kbq-form-field>\n                            <input\n                                [min]=\"minDate()\"\n                                [max]=\"maxDate()\"\n                                [kbqDatepicker]=\"datepickerFrom\"\n                                [formControl]=\"form.controls.fromDate\"\n                                [errorStateMatcher]=\"rangeStateMatcher\"\n                            />\n                            <kbq-datepicker-toggle-icon kbqSuffix [for]=\"datepickerFrom\" />\n                            <kbq-datepicker #datepickerFrom [minDate]=\"minDate()\" [maxDate]=\"maxDate()\" />\n                        </kbq-form-field>\n                    </kbq-fieldset>\n                </div>\n\n                <div class=\"kbq-time-range-editor__date-time\">\n                    <span class=\"kbq-time-range-editor__date-time-prefix\" [attr.aria-label]=\"localeConfig.editor.to\">\n                        {{ localeConfig.editor.to }}\n                    </span>\n                    <kbq-fieldset>\n                        <kbq-form-field kbqFieldsetItem>\n                            <i kbq-icon=\"kbq-clock_16\" kbqPrefix [autoColor]=\"true\"></i>\n                            <input kbqTimepicker [format]=\"timepickerFormat\" [formControl]=\"form.controls.toTime\" />\n                        </kbq-form-field>\n\n                        <kbq-form-field>\n                            <input\n                                [min]=\"minDate()\"\n                                [max]=\"maxDate()\"\n                                [kbqDatepicker]=\"datepickerTo\"\n                                [formControl]=\"form.controls.toDate\"\n                                [errorStateMatcher]=\"rangeStateMatcher\"\n                            />\n                            <kbq-datepicker-toggle-icon kbqSuffix [for]=\"datepickerTo\" />\n                            <kbq-datepicker #datepickerTo [minDate]=\"minDate()\" [maxDate]=\"maxDate()\" />\n                        </kbq-form-field>\n                    </kbq-fieldset>\n                </div>\n            </div>\n        }\n    </kbq-radio-group>\n</form>\n\n<ng-template #defaultOptionTemplate let-context>\n    @let localeConfig = localeConfiguration();\n    @switch (context.translationType) {\n        @case ('other') {\n            @switch (context.type) {\n                @case ('allTime') {\n                    {{ localeConfig.editor.allTimeOption ?? localeConfig.editor.allTime }}\n                }\n                @case ('currentQuarter') {\n                    {{ localeConfig.editor.currentQuarterOption ?? localeConfig.editor.currentQuarter }}\n                }\n                @case ('currentYear') {\n                    {{ localeConfig.editor.currentYearOption ?? localeConfig.editor.currentYear }}\n                }\n            }\n        }\n        @default {\n            {{ context.formattedValue }}\n        }\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: KbqFieldset, selector: "kbq-fieldset" }, { kind: "directive", type: KbqFieldsetItem, selector: "[kbqFieldsetItem]" }, { kind: "ngmodule", type: KbqDatepickerModule }, { kind: "component", type: i2.KbqDatepicker, selector: "kbq-datepicker", inputs: ["hasBackdrop", "startAt", "disabled", "opened", "minDate", "maxDate", "panelClass", "dateClass", "backdropClass"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["kbqDatepicker"] }, { kind: "directive", type: i2.KbqDatepickerInput, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: ["errorStateMatcher", "placeholder", "required", "kbqDatepicker", "kbqCalendar", "kbqDatepickerFilter", "value", "min", "max", "disabled", "id", "kbqValidationTooltip"], outputs: ["incorrectInput", "dateChange", "dateInput"], exportAs: ["kbqDatepickerInput"] }, { kind: "component", type: i2.KbqDatepickerToggleIconComponent, selector: "kbq-datepicker-toggle-icon", inputs: ["disabled", "for"] }, { kind: "component", type: i3.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i3.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i3.KbqSuffix, selector: "[kbqSuffix]" }, { kind: "ngmodule", type: KbqTimepickerModule }, { kind: "directive", type: i4.KbqTimepicker, selector: "input[kbqTimepicker]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "format", "min", "max", "value", "kbqValidationTooltip"], outputs: ["incorrectInput"], exportAs: ["kbqTimepicker"] }, { kind: "ngmodule", type: KbqRadioModule }, { kind: "directive", type: i5.KbqRadioGroup, selector: "kbq-radio-group", inputs: ["big", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["kbqRadioGroup"] }, { kind: "component", type: i5.KbqRadioButton, selector: "kbq-radio-button", inputs: ["checked", "value", "disabled", "tabIndex", "required", "labelPosition", "name", "isFocused", "id"], outputs: ["change"], exportAs: ["kbqRadioButton"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "timepickerList", predicate: KbqTimepicker, descendants: true, isSignal: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n    <kbq-radio-group class=\"kbq-time-range-editor__container\" [formControl]=\"form.controls.type\">\n        @let types = timeRangeTypesWithoutRange();\n\n        @if (types.length) {\n            <div class=\"kbq-time-range-editor__predefined\">\n                @for (type of types; track type) {\n                    <kbq-radio-button class=\"kbq-time-range-editor__predefined-option\" [value]=\"type.type\">\n                        <ng-container\n                            *ngTemplateOutlet=\"optionTemplate() || defaultOptionTemplate; context: { $implicit: type }\"\n                        />\n                    </kbq-radio-button>\n                }\n            </div>\n        }\n\n        @if (isRangeVisible()) {\n            @let localeConfig = localeConfiguration();\n\n            <div class=\"kbq-time-range-editor__range\" role=\"group\" (focusout)=\"onRangeFocusOut($event)\">\n                @let bounds = boundsHint();\n\n                @if (types.length) {\n                    <kbq-radio-button [value]=\"'range'\">\n                        {{ localeConfig.editor.rangeLabel }}\n                        @if (bounds) {\n                            <kbq-hint>{{ bounds }}</kbq-hint>\n                        }\n                    </kbq-radio-button>\n                }\n\n                <div\n                    class=\"kbq-time-range-editor__date-time\"\n                    (input)=\"onBorderInput('from')\"\n                    (focusout)=\"onBorderFocusOut('from', $event)\"\n                >\n                    <span class=\"kbq-time-range-editor__date-time-prefix\" [attr.aria-label]=\"localeConfig.editor.from\">\n                        {{ localeConfig.editor.from }}\n                    </span>\n                    <kbq-fieldset>\n                        <kbq-form-field kbqFieldsetItem>\n                            <i kbq-icon=\"kbq-clock_16\" kbqPrefix [autoColor]=\"true\"></i>\n                            <input\n                                kbqTimepicker\n                                data-time-range-field=\"fromTime\"\n                                [format]=\"timepickerFormat\"\n                                [formControl]=\"form.controls.fromTime\"\n                                [errorStateMatcher]=\"rangeStateMatcher\"\n                            />\n                        </kbq-form-field>\n\n                        <kbq-form-field>\n                            <input\n                                data-time-range-field=\"fromDate\"\n                                [kbqDatepicker]=\"datepickerFrom\"\n                                [formControl]=\"form.controls.fromDate\"\n                                [errorStateMatcher]=\"rangeStateMatcher\"\n                            />\n                            <kbq-datepicker-toggle-icon kbqSuffix [for]=\"datepickerFrom\" />\n                            <kbq-datepicker #datepickerFrom [minDate]=\"minDate()\" [maxDate]=\"maxDate()\" />\n                        </kbq-form-field>\n                    </kbq-fieldset>\n                </div>\n\n                <div\n                    class=\"kbq-time-range-editor__date-time\"\n                    (input)=\"onBorderInput('to')\"\n                    (focusout)=\"onBorderFocusOut('to', $event)\"\n                >\n                    <span class=\"kbq-time-range-editor__date-time-prefix\" [attr.aria-label]=\"localeConfig.editor.to\">\n                        {{ localeConfig.editor.to }}\n                    </span>\n                    <kbq-fieldset>\n                        <kbq-form-field kbqFieldsetItem>\n                            <i kbq-icon=\"kbq-clock_16\" kbqPrefix [autoColor]=\"true\"></i>\n                            <input\n                                kbqTimepicker\n                                data-time-range-field=\"toTime\"\n                                [format]=\"timepickerFormat\"\n                                [formControl]=\"form.controls.toTime\"\n                                [errorStateMatcher]=\"rangeStateMatcher\"\n                            />\n                        </kbq-form-field>\n\n                        <kbq-form-field>\n                            <input\n                                data-time-range-field=\"toDate\"\n                                [kbqDatepicker]=\"datepickerTo\"\n                                [formControl]=\"form.controls.toDate\"\n                                [errorStateMatcher]=\"rangeStateMatcher\"\n                            />\n                            <kbq-datepicker-toggle-icon kbqSuffix [for]=\"datepickerTo\" />\n                            <kbq-datepicker #datepickerTo [minDate]=\"minDate()\" [maxDate]=\"maxDate()\" />\n                        </kbq-form-field>\n\n                        <!-- The range is judged as a whole, so what is wrong with it is said once, below the\n                             last of its two ends - in place of the caption, which spells the same bounds out. -->\n                        @if (outOfBoundsMessage(); as message) {\n                            <kbq-error>{{ message }}</kbq-error>\n                        } @else if (!types.length && bounds) {\n                            <!-- With no presets there is no option to hang the bounds off, so they go in the\n                                 fieldset's own hint area rather than loose in the block. -->\n                            <kbq-hint>{{ bounds }}</kbq-hint>\n                        }\n                    </kbq-fieldset>\n                </div>\n            </div>\n        }\n    </kbq-radio-group>\n</form>\n\n<ng-template #defaultOptionTemplate let-context>\n    @let localeConfig = localeConfiguration();\n    @switch (context.translationType) {\n        @case ('other') {\n            @switch (context.type) {\n                @case ('allTime') {\n                    {{ localeConfig.editor.allTimeOption ?? localeConfig.editor.allTime }}\n                }\n                @case ('currentQuarter') {\n                    {{ localeConfig.editor.currentQuarterOption ?? localeConfig.editor.currentQuarter }}\n                }\n                @case ('currentYear') {\n                    {{ localeConfig.editor.currentYearOption ?? localeConfig.editor.currentYear }}\n                }\n            }\n        }\n        @default {\n            {{ context.formattedValue }}\n        }\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: KbqError, selector: "kbq-error", exportAs: ["kbqError"] }, { kind: "component", type: KbqFieldset, selector: "kbq-fieldset" }, { kind: "directive", type: KbqFieldsetItem, selector: "[kbqFieldsetItem]" }, { kind: "component", type: KbqHint, selector: "kbq-hint", inputs: ["id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "ngmodule", type: KbqDatepickerModule }, { kind: "component", type: i2.KbqDatepicker, selector: "kbq-datepicker", inputs: ["hasBackdrop", "startAt", "disabled", "opened", "minDate", "maxDate", "panelClass", "dateClass", "backdropClass"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["kbqDatepicker"] }, { kind: "directive", type: i2.KbqDatepickerInput, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: ["errorStateMatcher", "placeholder", "required", "kbqDatepicker", "kbqCalendar", "kbqDatepickerFilter", "value", "min", "max", "disabled", "id", "kbqValidationTooltip"], outputs: ["incorrectInput", "dateChange", "dateInput"], exportAs: ["kbqDatepickerInput"] }, { kind: "component", type: i2.KbqDatepickerToggleIconComponent, selector: "kbq-datepicker-toggle-icon", inputs: ["disabled", "for"] }, { kind: "component", type: i3.KbqFormField, selector: "kbq-form-field", inputs: ["noBorders", "inOverlay", "horizontal", "labelClass", "contentClass"], outputs: ["inOverlayChange"], exportAs: ["kbqFormField"] }, { kind: "directive", type: i3.KbqPrefix, selector: "[kbqPrefix]", exportAs: ["kbqPrefix"] }, { kind: "directive", type: i3.KbqSuffix, selector: "[kbqSuffix]" }, { kind: "ngmodule", type: KbqTimepickerModule }, { kind: "directive", type: i4.KbqTimepicker, selector: "input[kbqTimepicker]", inputs: ["errorStateMatcher", "placeholder", "disabled", "id", "required", "format", "min", "max", "value", "kbqValidationTooltip"], outputs: ["incorrectInput"], exportAs: ["kbqTimepicker"] }, { kind: "ngmodule", type: KbqRadioModule }, { kind: "directive", type: i5.KbqRadioGroup, selector: "kbq-radio-group", inputs: ["big", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["kbqRadioGroup"] }, { kind: "component", type: i5.KbqRadioButton, selector: "kbq-radio-button", inputs: ["checked", "value", "disabled", "tabIndex", "required", "labelPosition", "name", "isFocused", "id"], outputs: ["change"], exportAs: ["kbqRadioButton"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRangeEditor, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-time-range-editor', imports: [
                         NgTemplateOutlet,
                         ReactiveFormsModule,
+                        KbqError,
                         KbqFieldset,
                         KbqFieldsetItem,
+                        KbqHint,
                         KbqDatepickerModule,
                         KbqTimepickerModule,
                         KbqRadioModule,
@@ -393,7 +684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         }
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-time-range__editor'
-                    }, template: "<form [formGroup]=\"form\">\n    <kbq-radio-group class=\"kbq-time-range-editor__container\" [formControl]=\"form.controls.type\">\n        @let types = timeRangeTypesWithoutRange();\n\n        @if (types.length) {\n            <div class=\"kbq-time-range-editor__predefined\">\n                @for (type of types; track type) {\n                    <kbq-radio-button class=\"kbq-time-range-editor__predefined-option\" [value]=\"type.type\">\n                        <ng-container\n                            *ngTemplateOutlet=\"optionTemplate() || defaultOptionTemplate; context: { $implicit: type }\"\n                        />\n                    </kbq-radio-button>\n                }\n            </div>\n        }\n\n        @if (isRangeVisible()) {\n            @let localeConfig = localeConfiguration();\n\n            <div class=\"kbq-time-range-editor__range\" role=\"group\">\n                @if (types.length) {\n                    <kbq-radio-button [value]=\"'range'\">{{ localeConfig.editor.rangeLabel }}</kbq-radio-button>\n                }\n\n                <div class=\"kbq-time-range-editor__date-time\">\n                    <span class=\"kbq-time-range-editor__date-time-prefix\" [attr.aria-label]=\"localeConfig.editor.from\">\n                        {{ localeConfig.editor.from }}\n                    </span>\n                    <kbq-fieldset>\n                        <kbq-form-field kbqFieldsetItem>\n                            <i kbq-icon=\"kbq-clock_16\" kbqPrefix [autoColor]=\"true\"></i>\n                            <input kbqTimepicker [format]=\"timepickerFormat\" [formControl]=\"form.controls.fromTime\" />\n                        </kbq-form-field>\n\n                        <kbq-form-field>\n                            <input\n                                [min]=\"minDate()\"\n                                [max]=\"maxDate()\"\n                                [kbqDatepicker]=\"datepickerFrom\"\n                                [formControl]=\"form.controls.fromDate\"\n                                [errorStateMatcher]=\"rangeStateMatcher\"\n                            />\n                            <kbq-datepicker-toggle-icon kbqSuffix [for]=\"datepickerFrom\" />\n                            <kbq-datepicker #datepickerFrom [minDate]=\"minDate()\" [maxDate]=\"maxDate()\" />\n                        </kbq-form-field>\n                    </kbq-fieldset>\n                </div>\n\n                <div class=\"kbq-time-range-editor__date-time\">\n                    <span class=\"kbq-time-range-editor__date-time-prefix\" [attr.aria-label]=\"localeConfig.editor.to\">\n                        {{ localeConfig.editor.to }}\n                    </span>\n                    <kbq-fieldset>\n                        <kbq-form-field kbqFieldsetItem>\n                            <i kbq-icon=\"kbq-clock_16\" kbqPrefix [autoColor]=\"true\"></i>\n                            <input kbqTimepicker [format]=\"timepickerFormat\" [formControl]=\"form.controls.toTime\" />\n                        </kbq-form-field>\n\n                        <kbq-form-field>\n                            <input\n                                [min]=\"minDate()\"\n                                [max]=\"maxDate()\"\n                                [kbqDatepicker]=\"datepickerTo\"\n                                [formControl]=\"form.controls.toDate\"\n                                [errorStateMatcher]=\"rangeStateMatcher\"\n                            />\n                            <kbq-datepicker-toggle-icon kbqSuffix [for]=\"datepickerTo\" />\n                            <kbq-datepicker #datepickerTo [minDate]=\"minDate()\" [maxDate]=\"maxDate()\" />\n                        </kbq-form-field>\n                    </kbq-fieldset>\n                </div>\n            </div>\n        }\n    </kbq-radio-group>\n</form>\n\n<ng-template #defaultOptionTemplate let-context>\n    @let localeConfig = localeConfiguration();\n    @switch (context.translationType) {\n        @case ('other') {\n            @switch (context.type) {\n                @case ('allTime') {\n                    {{ localeConfig.editor.allTimeOption ?? localeConfig.editor.allTime }}\n                }\n                @case ('currentQuarter') {\n                    {{ localeConfig.editor.currentQuarterOption ?? localeConfig.editor.currentQuarter }}\n                }\n                @case ('currentYear') {\n                    {{ localeConfig.editor.currentYearOption ?? localeConfig.editor.currentYear }}\n                }\n            }\n        }\n        @default {\n            {{ context.formattedValue }}\n        }\n    }\n</ng-template>\n" }]
+                    }, template: "<form [formGroup]=\"form\">\n    <kbq-radio-group class=\"kbq-time-range-editor__container\" [formControl]=\"form.controls.type\">\n        @let types = timeRangeTypesWithoutRange();\n\n        @if (types.length) {\n            <div class=\"kbq-time-range-editor__predefined\">\n                @for (type of types; track type) {\n                    <kbq-radio-button class=\"kbq-time-range-editor__predefined-option\" [value]=\"type.type\">\n                        <ng-container\n                            *ngTemplateOutlet=\"optionTemplate() || defaultOptionTemplate; context: { $implicit: type }\"\n                        />\n                    </kbq-radio-button>\n                }\n            </div>\n        }\n\n        @if (isRangeVisible()) {\n            @let localeConfig = localeConfiguration();\n\n            <div class=\"kbq-time-range-editor__range\" role=\"group\" (focusout)=\"onRangeFocusOut($event)\">\n                @let bounds = boundsHint();\n\n                @if (types.length) {\n                    <kbq-radio-button [value]=\"'range'\">\n                        {{ localeConfig.editor.rangeLabel }}\n                        @if (bounds) {\n                            <kbq-hint>{{ bounds }}</kbq-hint>\n                        }\n                    </kbq-radio-button>\n                }\n\n                <div\n                    class=\"kbq-time-range-editor__date-time\"\n                    (input)=\"onBorderInput('from')\"\n                    (focusout)=\"onBorderFocusOut('from', $event)\"\n                >\n                    <span class=\"kbq-time-range-editor__date-time-prefix\" [attr.aria-label]=\"localeConfig.editor.from\">\n                        {{ localeConfig.editor.from }}\n                    </span>\n                    <kbq-fieldset>\n                        <kbq-form-field kbqFieldsetItem>\n                            <i kbq-icon=\"kbq-clock_16\" kbqPrefix [autoColor]=\"true\"></i>\n                            <input\n                                kbqTimepicker\n                                data-time-range-field=\"fromTime\"\n                                [format]=\"timepickerFormat\"\n                                [formControl]=\"form.controls.fromTime\"\n                                [errorStateMatcher]=\"rangeStateMatcher\"\n                            />\n                        </kbq-form-field>\n\n                        <kbq-form-field>\n                            <input\n                                data-time-range-field=\"fromDate\"\n                                [kbqDatepicker]=\"datepickerFrom\"\n                                [formControl]=\"form.controls.fromDate\"\n                                [errorStateMatcher]=\"rangeStateMatcher\"\n                            />\n                            <kbq-datepicker-toggle-icon kbqSuffix [for]=\"datepickerFrom\" />\n                            <kbq-datepicker #datepickerFrom [minDate]=\"minDate()\" [maxDate]=\"maxDate()\" />\n                        </kbq-form-field>\n                    </kbq-fieldset>\n                </div>\n\n                <div\n                    class=\"kbq-time-range-editor__date-time\"\n                    (input)=\"onBorderInput('to')\"\n                    (focusout)=\"onBorderFocusOut('to', $event)\"\n                >\n                    <span class=\"kbq-time-range-editor__date-time-prefix\" [attr.aria-label]=\"localeConfig.editor.to\">\n                        {{ localeConfig.editor.to }}\n                    </span>\n                    <kbq-fieldset>\n                        <kbq-form-field kbqFieldsetItem>\n                            <i kbq-icon=\"kbq-clock_16\" kbqPrefix [autoColor]=\"true\"></i>\n                            <input\n                                kbqTimepicker\n                                data-time-range-field=\"toTime\"\n                                [format]=\"timepickerFormat\"\n                                [formControl]=\"form.controls.toTime\"\n                                [errorStateMatcher]=\"rangeStateMatcher\"\n                            />\n                        </kbq-form-field>\n\n                        <kbq-form-field>\n                            <input\n                                data-time-range-field=\"toDate\"\n                                [kbqDatepicker]=\"datepickerTo\"\n                                [formControl]=\"form.controls.toDate\"\n                                [errorStateMatcher]=\"rangeStateMatcher\"\n                            />\n                            <kbq-datepicker-toggle-icon kbqSuffix [for]=\"datepickerTo\" />\n                            <kbq-datepicker #datepickerTo [minDate]=\"minDate()\" [maxDate]=\"maxDate()\" />\n                        </kbq-form-field>\n\n                        <!-- The range is judged as a whole, so what is wrong with it is said once, below the\n                             last of its two ends - in place of the caption, which spells the same bounds out. -->\n                        @if (outOfBoundsMessage(); as message) {\n                            <kbq-error>{{ message }}</kbq-error>\n                        } @else if (!types.length && bounds) {\n                            <!-- With no presets there is no option to hang the bounds off, so they go in the\n                                 fieldset's own hint area rather than loose in the block. -->\n                            <kbq-hint>{{ bounds }}</kbq-hint>\n                        }\n                    </kbq-fieldset>\n                </div>\n            </div>\n        }\n    </kbq-radio-group>\n</form>\n\n<ng-template #defaultOptionTemplate let-context>\n    @let localeConfig = localeConfiguration();\n    @switch (context.translationType) {\n        @case ('other') {\n            @switch (context.type) {\n                @case ('allTime') {\n                    {{ localeConfig.editor.allTimeOption ?? localeConfig.editor.allTime }}\n                }\n                @case ('currentQuarter') {\n                    {{ localeConfig.editor.currentQuarterOption ?? localeConfig.editor.currentQuarter }}\n                }\n                @case ('currentYear') {\n                    {{ localeConfig.editor.currentYearOption ?? localeConfig.editor.currentYear }}\n                }\n            }\n        }\n        @default {\n            {{ context.formattedValue }}\n        }\n    }\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], availableTimeRangeTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTimeRangeTypes", required: false }] }], rangeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeValue", required: false }] }], showRangeAsDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRangeAsDefault", required: true }] }], localeConfiguration: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeConfiguration", required: true }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], timepickerList: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KbqTimepicker), { isSignal: true }] }] } });
 
 /** @docs-private */
@@ -509,6 +800,8 @@ class KbqTimeRange {
     constructor() {
         this.timeRangeService = inject(KbqTimeRangeService);
         this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
+        this.editorBridge = inject(KbqTimeRangeEditorBridge);
+        this.document = inject(DOCUMENT);
         /** @docs-private */
         this.ngControl = inject(NgControl, { optional: true, self: true });
         /** The minimum selectable date. */
@@ -555,14 +848,20 @@ class KbqTimeRange {
             if (types.includes(this.rangeEditorControl.value.type) || this.rangeEditorControl.value.type === 'range') {
                 return;
             }
-            const timeRangeDefaultValue = this.timeRangeService.getTimeRangeDefaultValue(this.normalizedDefaultRangeValue(), types.length ? types : ['range']);
-            this.titleValue.set(timeRangeDefaultValue);
+            const timeRangeDefaultValue = this.defaultEditorValue(types);
+            // The editor still needs something to open on, whether or not the trigger shows a value.
             this.rangeEditorControl.setValue(timeRangeDefaultValue);
+            // A nullable trigger that has never been given a value keeps its placeholder: replacing the types
+            // is not the user picking a range, and emitting here would put one into the bound control.
+            if (!this.nonNullable() && this.titleValue() === null)
+                return;
+            this.titleValue.set(timeRangeDefaultValue);
             this.onChange(timeRangeDefaultValue);
         };
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
+        this.timeRangeService.bindBounds(this.minDate, this.maxDate);
         const defaultValue = this.timeRangeService.getTimeRangeDefaultValue(this.normalizedDefaultRangeValue(), this.availableTimeRangeTypes());
         this.titleValue = signal(this.nonNullable() ? defaultValue : null, ...(ngDevMode ? [{ debugName: "titleValue" }] : []));
         this.rangeEditorControl = new FormControl(defaultValue, { nonNullable: true });
@@ -589,21 +888,42 @@ class KbqTimeRange {
         this.titleValue.set(nonNullable || value !== null ? corrected : null);
         this.rangeEditorControl.setValue(corrected);
     }
-    /** @docs-private */
+    /**
+     * Lets the editor tell an "apply" gesture from a plain focus loss before the click even lands - the
+     * `focusout` it reacts to is dispatched between this `mousedown` and the `click` below.
+     * @docs-private
+     */
+    onFooterPointerDown() {
+        this.editorBridge.applyGestureInProgress = true;
+        this.document.addEventListener('mouseup', () => (this.editorBridge.applyGestureInProgress = false), {
+            once: true
+        });
+    }
+    /**
+     * Applying is always offered; an invalid editor keeps the popover open and sends the user to the
+     * first field at fault instead.
+     * @docs-private
+     */
     onApply(popover) {
+        this.editorBridge.applyGestureInProgress = false;
+        if (!this.editorBridge.revealErrors())
+            return;
         this.titleValue.set(this.rangeEditorControl.value);
         this.onChange(this.rangeEditorControl.value);
         popover.hide();
     }
     /** @docs-private */
     onCancel(popover) {
+        this.editorBridge.applyGestureInProgress = false;
         popover.hide();
     }
     onVisibleChange(isVisible) {
-        const titleValue = this.titleValue();
-        if (!isVisible && titleValue) {
-            this.rangeEditorControl.setValue(titleValue);
-        }
+        if (isVisible)
+            return;
+        // Closing throws the edits away, applied or not. With nothing on the trigger yet there is no value
+        // to go back to, so the editor returns to its default - otherwise an abandoned edit, which may well
+        // be one the editor refused to apply, would be waiting the next time it opens.
+        this.rangeEditorControl.setValue(this.titleValue() ?? this.defaultEditorValue(this.availableTimeRangeTypes()));
     }
     /** Implemented as part of ControlValueAccessor */
     registerOnChange(fn) {
@@ -613,8 +933,12 @@ class KbqTimeRange {
     registerOnTouched(fn) {
         this.onTouch = fn;
     }
+    /** What the editor opens on: the first offered type, or a plain range when none are offered. */
+    defaultEditorValue(types) {
+        return this.timeRangeService.getTimeRangeDefaultValue(this.normalizedDefaultRangeValue(), types.length ? types : ['range']);
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRange, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.30", type: KbqTimeRange, isStandalone: true, selector: "kbq-time-range", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, defaultRangeValue: { classPropertyName: "defaultRangeValue", publicName: "defaultRangeValue", isSignal: true, isRequired: false, transformFunction: null }, availableTimeRangeTypes: { classPropertyName: "availableTimeRangeTypes", publicName: "availableTimeRangeTypes", isSignal: true, isRequired: false, transformFunction: null }, titleTemplate: { classPropertyName: "titleTemplate", publicName: "titleTemplate", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null }, showRangeAsDefault: { classPropertyName: "showRangeAsDefault", publicName: "showRangeAsDefault", isSignal: true, isRequired: false, transformFunction: null }, nonNullable: { classPropertyName: "nonNullable", publicName: "nonNullable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueCorrected: "valueCorrected" }, host: { classAttribute: "kbq-time-range" }, providers: [KbqTimeRangeService], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.30", type: KbqTimeRange, isStandalone: true, selector: "kbq-time-range", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, defaultRangeValue: { classPropertyName: "defaultRangeValue", publicName: "defaultRangeValue", isSignal: true, isRequired: false, transformFunction: null }, availableTimeRangeTypes: { classPropertyName: "availableTimeRangeTypes", publicName: "availableTimeRangeTypes", isSignal: true, isRequired: false, transformFunction: null }, titleTemplate: { classPropertyName: "titleTemplate", publicName: "titleTemplate", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null }, showRangeAsDefault: { classPropertyName: "showRangeAsDefault", publicName: "showRangeAsDefault", isSignal: true, isRequired: false, transformFunction: null }, nonNullable: { classPropertyName: "nonNullable", publicName: "nonNullable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueCorrected: "valueCorrected" }, host: { classAttribute: "kbq-time-range" }, providers: [KbqTimeRangeService, KbqTimeRangeEditorBridge], ngImport: i0, template: `
         @let localeConfig = localeConfiguration();
         <kbq-time-range-title
             #popover="kbqPopover"
@@ -646,20 +970,15 @@ class KbqTimeRange {
         </ng-template>
 
         <ng-template #timeRangePopoverFooter>
-            <div class="kbq-time-range__buttons" role="group">
-                <button
-                    kbq-button
-                    [color]="'contrast'"
-                    [disabled]="rangeEditorControl.invalid"
-                    (click)="onApply(popover)"
-                >
+            <div class="kbq-time-range__buttons" role="group" (mousedown)="onFooterPointerDown()">
+                <button kbq-button [color]="'contrast'" (click)="onApply(popover)">
                     {{ localeConfig.editor.apply }}
                 </button>
 
                 <button kbq-button (click)="onCancel(popover)">{{ localeConfig.editor.cancel }}</button>
             </div>
         </ng-template>
-    `, isInline: true, styles: [".kbq-time-range .kbq-time-range__trigger{display:block}.kbq-time-range__popover .kbq-time-range__buttons{display:flex;flex-direction:row;gap:var(--kbq-size-l)}.kbq-time-range__editor{display:block}.kbq-time-range__editor .kbq-time-range-editor__container{width:100%}.kbq-time-range__editor .kbq-time-range-editor__predefined{column-count:2}.kbq-time-range__editor .kbq-time-range-editor__predefined .kbq-time-range-editor__predefined-option{display:block;margin-bottom:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range{display:flex;flex-direction:column;gap:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__date-time{display:flex;flex-direction:row;justify-content:space-between;gap:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__date-time .kbq-time-range-editor__date-time-prefix{align-self:center;width:57px}.kbq-time-range-title-as-form-field{white-space:nowrap;text-overflow:ellipsis;min-height:calc(var(--kbq-form-field-size-height) - 2 * var(--kbq-size-border-width))}.kbq-time-range-title-as-form-field .kbq-time-range-title__placeholder{color:var(--kbq-foreground-contrast-tertiary)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i2$2.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["hideIfNotInViewPort", "kbqPopoverPreventClose", "defaultPaddings", "kbqPopoverVisible", "kbqPopoverPlacement", "kbqPopoverPlacementPriority", "kbqPopoverStickToWindow", "container", "hasBackdrop", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverDisabled", "kbqTrigger", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverContext", "hasCloseButton", "closeOnScroll", "backdropClass", "kbqPopoverArrow", "kbqPopoverOffset", "kbqLeaveDelay"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3$1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3$1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: KbqTimeRangeEditor, selector: "kbq-time-range-editor", inputs: ["maxDate", "minDate", "availableTimeRangeTypes", "rangeValue", "showRangeAsDefault", "localeConfiguration", "optionTemplate"] }, { kind: "component", type: KbqTimeRangeTitle, selector: "kbq-time-range-title", inputs: ["timeRange", "localeConfiguration", "titleTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-time-range .kbq-time-range__trigger{display:block}.kbq-time-range__popover .kbq-time-range__buttons{display:flex;flex-direction:row;gap:var(--kbq-size-l)}.kbq-time-range__editor{display:block}.kbq-time-range__editor .kbq-time-range-editor__container{width:100%}.kbq-time-range__editor .kbq-time-range-editor__predefined{column-count:2}.kbq-time-range__editor .kbq-time-range-editor__predefined .kbq-time-range-editor__predefined-option{display:block;margin-bottom:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range{display:flex;flex-direction:column;gap:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__date-time{display:flex;flex-direction:row;justify-content:space-between;gap:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__date-time .kbq-time-range-editor__date-time-prefix{display:flex;align-items:center;align-self:flex-start;min-height:var(--kbq-size-3xl);flex:none;width:57px}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__date-time .kbq-fieldset{flex:1;min-width:0}.kbq-time-range-title-as-form-field{white-space:nowrap;text-overflow:ellipsis;min-height:calc(var(--kbq-form-field-size-height) - 2 * var(--kbq-size-border-width))}.kbq-time-range-title-as-form-field .kbq-time-range-title__placeholder{color:var(--kbq-foreground-contrast-tertiary)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: KbqPopoverModule }, { kind: "directive", type: i2$2.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["hideIfNotInViewPort", "kbqPopoverPreventClose", "defaultPaddings", "kbqPopoverVisible", "kbqPopoverPlacement", "kbqPopoverPlacementPriority", "kbqPopoverStickToWindow", "container", "hasBackdrop", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverDisabled", "kbqTrigger", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverContext", "hasCloseButton", "closeOnScroll", "backdropClass", "kbqPopoverArrow", "kbqPopoverOffset", "kbqLeaveDelay"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3$1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3$1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: KbqTimeRangeEditor, selector: "kbq-time-range-editor", inputs: ["maxDate", "minDate", "availableTimeRangeTypes", "rangeValue", "showRangeAsDefault", "localeConfiguration", "optionTemplate"] }, { kind: "component", type: KbqTimeRangeTitle, selector: "kbq-time-range-title", inputs: ["timeRange", "localeConfiguration", "titleTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRange, decorators: [{
             type: Component,
@@ -701,22 +1020,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         </ng-template>
 
         <ng-template #timeRangePopoverFooter>
-            <div class="kbq-time-range__buttons" role="group">
-                <button
-                    kbq-button
-                    [color]="'contrast'"
-                    [disabled]="rangeEditorControl.invalid"
-                    (click)="onApply(popover)"
-                >
+            <div class="kbq-time-range__buttons" role="group" (mousedown)="onFooterPointerDown()">
+                <button kbq-button [color]="'contrast'" (click)="onApply(popover)">
                     {{ localeConfig.editor.apply }}
                 </button>
 
                 <button kbq-button (click)="onCancel(popover)">{{ localeConfig.editor.cancel }}</button>
             </div>
         </ng-template>
-    `, providers: [KbqTimeRangeService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+    `, providers: [KbqTimeRangeService, KbqTimeRangeEditorBridge], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-time-range'
-                    }, styles: [".kbq-time-range .kbq-time-range__trigger{display:block}.kbq-time-range__popover .kbq-time-range__buttons{display:flex;flex-direction:row;gap:var(--kbq-size-l)}.kbq-time-range__editor{display:block}.kbq-time-range__editor .kbq-time-range-editor__container{width:100%}.kbq-time-range__editor .kbq-time-range-editor__predefined{column-count:2}.kbq-time-range__editor .kbq-time-range-editor__predefined .kbq-time-range-editor__predefined-option{display:block;margin-bottom:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range{display:flex;flex-direction:column;gap:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__date-time{display:flex;flex-direction:row;justify-content:space-between;gap:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__date-time .kbq-time-range-editor__date-time-prefix{align-self:center;width:57px}.kbq-time-range-title-as-form-field{white-space:nowrap;text-overflow:ellipsis;min-height:calc(var(--kbq-form-field-size-height) - 2 * var(--kbq-size-border-width))}.kbq-time-range-title-as-form-field .kbq-time-range-title__placeholder{color:var(--kbq-foreground-contrast-tertiary)}\n"] }]
+                    }, styles: [".kbq-time-range .kbq-time-range__trigger{display:block}.kbq-time-range__popover .kbq-time-range__buttons{display:flex;flex-direction:row;gap:var(--kbq-size-l)}.kbq-time-range__editor{display:block}.kbq-time-range__editor .kbq-time-range-editor__container{width:100%}.kbq-time-range__editor .kbq-time-range-editor__predefined{column-count:2}.kbq-time-range__editor .kbq-time-range-editor__predefined .kbq-time-range-editor__predefined-option{display:block;margin-bottom:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range{display:flex;flex-direction:column;gap:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__date-time{display:flex;flex-direction:row;justify-content:space-between;gap:var(--kbq-size-s)}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__date-time .kbq-time-range-editor__date-time-prefix{display:flex;align-items:center;align-self:flex-start;min-height:var(--kbq-size-3xl);flex:none;width:57px}.kbq-time-range__editor .kbq-time-range-editor__range .kbq-time-range-editor__date-time .kbq-fieldset{flex:1;min-width:0}.kbq-time-range-title-as-form-field{white-space:nowrap;text-overflow:ellipsis;min-height:calc(var(--kbq-form-field-size-height) - 2 * var(--kbq-size-border-width))}.kbq-time-range-title-as-form-field .kbq-time-range-title__placeholder{color:var(--kbq-foreground-contrast-tertiary)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], defaultRangeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultRangeValue", required: false }] }], availableTimeRangeTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTimeRangeTypes", required: false }] }], titleTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleTemplate", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], arrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrow", required: false }] }], showRangeAsDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRangeAsDefault", required: false }] }], nonNullable: [{ type: i0.Input, args: [{ isSignal: true, alias: "nonNullable", required: false }] }], valueCorrected: [{ type: i0.Output, args: ["valueCorrected"] }] } });
 
 /** Directive for easy using styles of time-range placeholder publicly. */