@koobiq/components 20.4.1 → 21.0.0

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

@@ -1,28 +1,29 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, inject, signal, computed, ElementRef, input, viewChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, booleanAttribute, output, Directive, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, inject, signal, computed, ElementRef, input, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, booleanAttribute, DestroyRef, 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';
-import * as i3$1 from '@koobiq/components/button';
+import { FormGroup, FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import * as i4$1 from '@koobiq/components/button';
 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 * as i1$2 from '@koobiq/components/core';
+import { DateAdapter, DateFormatter, ruRULocaleData, kbqLocaleConfigurationOverrideProvider, PopUpSizes, PopUpPlacements, KbqLocaleOverridesDirective, KbqErrorStateTracker, ErrorStateMatcher } from '@koobiq/components/core';
+import * as i3$1 from '@koobiq/components/popover';
 import { KbqPopoverTrigger, KbqPopoverModule } from '@koobiq/components/popover';
+import { fromEvent } from 'rxjs';
+import { map, distinctUntilChanged, take } from 'rxjs/operators';
 import * as i2 from '@koobiq/components/datepicker';
 import { KbqDatepickerModule } from '@koobiq/components/datepicker';
 import * as i3 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 { KbqError, KbqFieldset, KbqFieldsetItem, KbqHint, KBQ_FORM_FIELD, KbqFormFieldControl } from '@koobiq/components/form-field';
+import * as i1$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 { map, distinctUntilChanged } from 'rxjs/operators';
-import * as i1$1 from '@koobiq/components/link';
-import { KbqLinkModule } from '@koobiq/components/link';
-import { Subject } from 'rxjs';
+import { TimeFormats, KbqTimepickerModule } from '@koobiq/components/timepicker';
+import { KbqLink, KbqLinkSuffix } from '@koobiq/components/link';
+import { _IdGenerator } from '@angular/cdk/a11y';
 
 /** Preset of selectable time ranges, provided by DI. */
 const KBQ_DEFAULT_TIME_RANGE_TYPES = new InjectionToken('KBQ_DEFAULT_TIME_RANGE_TYPES');
@@ -40,7 +41,7 @@ const defaultTimeRangeTypes = [
     'allTime',
     'range'
 ];
-/** @docs-private */
+/** @internal */
 function createMissingDateImplError(componentName, provider) {
     return Error(`${componentName}: No provider found for ${provider}. You must import one of the existing ` +
         `modules at your application root or provide a custom implementation or use exists ones.`);
@@ -52,6 +53,8 @@ function createMissingDateImplError(componentName, provider) {
  * @param timeRangeService - Service used to manipulate date-time values.
  */
 const rangeValidator = (timeRangeService) => {
+    // TODO: a consumer cannot call this: `KbqTimeRangeService` is not exported from the entry point. Export the
+    // service or take a `DateAdapter`, then add a docs example (#DS-2196).
     return (control) => {
         const form = control.value;
         if (!form.fromTime || !form.fromDate || !form.toTime || !form.toDate) {
@@ -85,10 +88,10 @@ class KbqTimeRangeEditorBridge {
          */
         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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimeRangeEditorBridge, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimeRangeEditorBridge }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRangeEditorBridge, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimeRangeEditorBridge, decorators: [{
             type: Injectable
         }] });
 
@@ -104,15 +107,15 @@ class KbqTimeRangeService {
         this.boundsSource = signal({
             min: signal(null),
             max: signal(null)
-        }, ...(ngDevMode ? [{ debugName: "boundsSource" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "boundsSource" }] : /* istanbul ignore next */ []));
         /**
          * 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.minDate = computed(() => this.boundsSource().min() ?? null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+        /** Upper bound of the owning component, read the way `minDate` reads the lower one. */
+        this.maxDate = computed(() => this.boundsSource().max() ?? null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
         this.timeRangeConfig = {
             lastMinute: { units: { minutes: -1 }, translationType: 'minutes' },
             last5Minutes: { units: { minutes: -5 }, translationType: 'minutes' },
@@ -266,10 +269,10 @@ class KbqTimeRangeService {
     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);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRangeService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimeRangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimeRangeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRangeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimeRangeService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -285,6 +288,7 @@ class RangeErrorStateMatcher {
         return !!control?.invalid && !!control.touched;
     }
 }
+let nextUniqueId = 0;
 /** @docs-private */
 class KbqTimeRangeEditor {
     constructor() {
@@ -293,19 +297,19 @@ class KbqTimeRangeEditor {
         this.elementRef = inject(ElementRef);
         this.document = inject(DOCUMENT);
         /** The maximum selectable date. */
-        this.maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+        this.maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
         /** The minimum selectable date. */
-        this.minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+        this.minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
         /** Preset of selectable ranges */
-        this.availableTimeRangeTypes = input(this.timeRangeService.providedDefaultTimeRangeTypes, ...(ngDevMode ? [{ debugName: "availableTimeRangeTypes" }] : []));
+        this.availableTimeRangeTypes = input(this.timeRangeService.providedDefaultTimeRangeTypes, ...(ngDevMode ? [{ debugName: "availableTimeRangeTypes" }] : /* istanbul ignore next */ []));
         /** Provided value of selected range */
-        this.rangeValue = input(this.timeRangeService.getDefaultRangeValue(), ...(ngDevMode ? [{ debugName: "rangeValue" }] : []));
-        this.showRangeAsDefault = input.required(...(ngDevMode ? [{ debugName: "showRangeAsDefault" }] : []));
-        this.localeConfiguration = input.required(...(ngDevMode ? [{ debugName: "localeConfiguration" }] : []));
+        this.rangeValue = input(this.timeRangeService.getDefaultRangeValue(), ...(ngDevMode ? [{ debugName: "rangeValue" }] : /* istanbul ignore next */ []));
+        this.showRangeAsDefault = input.required(...(ngDevMode ? [{ debugName: "showRangeAsDefault" }] : /* istanbul ignore next */ []));
+        this.localeConfiguration = input.required(...(ngDevMode ? [{ debugName: "localeConfiguration" }] : /* istanbul ignore next */ []));
         /** Customizable option output */
-        this.optionTemplate = input(...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : []));
+        this.optionTemplate = input(...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : /* istanbul ignore next */ []));
         /** @docs-private */
-        this.isRangeVisible = computed(() => this.showRangeAsDefault() || this.availableTimeRangeTypes().includes('range'), ...(ngDevMode ? [{ debugName: "isRangeVisible" }] : []));
+        this.isRangeVisible = computed(() => this.showRangeAsDefault() || this.availableTimeRangeTypes().includes('range'), ...(ngDevMode ? [{ debugName: "isRangeVisible" }] : /* istanbul ignore next */ []));
         /** @docs-private */
         this.timeRangeTypesWithoutRange = computed(() => {
             const localeConfig = this.localeConfiguration();
@@ -317,11 +321,12 @@ class KbqTimeRangeEditor {
                 units: this.timeRangeService.getTimeRangeTypeUnits(type),
                 formattedValue: this.getFormattedOption(type, localeConfig)
             }));
-        }, ...(ngDevMode ? [{ debugName: "timeRangeTypesWithoutRange" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "timeRangeTypesWithoutRange" }] : /* istanbul ignore next */ []));
         /**
          * 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(() => {
@@ -334,15 +339,23 @@ class KbqTimeRangeEditor {
             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" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "boundsHint" }] : /* istanbul ignore next */ []));
         /** @docs-private */
         this.timepickerFormat = TimeFormats.HHmmss;
         /** @docs-private */
         this.rangeStateMatcher = new RangeErrorStateMatcher();
         /** Raised by the first "apply", after which a border left wholly empty counts as an error too. */
         this.applyAttempted = false;
+        /**
+         * Ids of the `from`/`to` prefixes, so both fields of a pair take the prefix as part of their
+         * accessible name. `aria-label` on the prefix itself is inert - a bare `<span>` has no role that
+         * supports naming.
+         *
+         * @docs-private
+         */
+        this.fromLabelId = `kbq-time-range-editor-from-${nextUniqueId}`;
+        /** @docs-private */
+        this.toLabelId = `kbq-time-range-editor-to-${nextUniqueId++}`;
         /** @docs-private */
         this.onChange = (_value) => { };
         /** @docs-private */
@@ -368,17 +381,7 @@ class KbqTimeRangeEditor {
             this.editorBridge.revealErrors = () => this.revealErrors();
         this.form.valueChanges
             .pipe(map((formValue) => formValue.type), distinctUntilChanged(), takeUntilDestroyed())
-            .subscribe((type) => {
-            const isDisabled = type !== 'range';
-            this.rangeControls.forEach((control) => {
-                if (isDisabled) {
-                    control.disable({ emitEvent: false });
-                }
-                else {
-                    control.enable({ emitEvent: false });
-                }
-            });
-        });
+            .subscribe((type) => this.syncRangeControlsDisabledState(type));
         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`.
@@ -405,6 +408,12 @@ class KbqTimeRangeEditor {
     }
     /** Implemented as part of ControlValueAccessor */
     writeValue(value) {
+        // Untracked, as `setDisabledState()`: a form control set from a consumer's `effect()` writes here on the
+        // spot, and the inputs and bounds read on the way, by the validators too, would make the effect run again.
+        untracked(() => this.applyValue(value));
+    }
+    /** Body of `writeValue()`. */
+    applyValue(value) {
         if (!value)
             return;
         const corrected = this.timeRangeService.checkAndCorrectTimeRangeValue(value, this.availableTimeRangeTypes(), this.form.value);
@@ -430,10 +439,23 @@ class KbqTimeRangeEditor {
     registerOnTouched(fn) {
         this.onTouch = fn;
     }
+    /**
+     * The editor counts as left only once focus is out of it entirely. Moving between its own fields -
+     * the two halves of a border, or from a border to the radio that drives it - is still editing, and
+     * a `focusout` fires for each of those moves.
+     *
+     * @docs-private
+     */
+    onEditorFocusOut({ currentTarget, relatedTarget }) {
+        if (this.staysWithin(currentTarget, relatedTarget))
+            return;
+        this.onTouch();
+    }
     /**
      * 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 }) {
@@ -442,6 +464,7 @@ class KbqTimeRangeEditor {
     /**
      * 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) {
@@ -452,21 +475,20 @@ class KbqTimeRangeEditor {
      * 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());
+        return this.localeConfiguration().editor.outOfBoundsError.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 }) {
@@ -613,6 +635,31 @@ class KbqTimeRangeEditor {
             return this.borderErrors(border)[half];
         };
     }
+    /** Implemented as part of ControlValueAccessor */
+    setDisabledState(isDisabled) {
+        untracked(() => {
+            if (isDisabled) {
+                this.form.disable({ emitEvent: false });
+            }
+            else {
+                this.form.enable({ emitEvent: false });
+                // `enable()` reaches every control, including the from/to pair a preset type keeps disabled.
+                this.syncRangeControlsDisabledState(this.form.controls.type.value);
+            }
+        });
+    }
+    /** The from/to pair is only editable while the `range` type is selected. */
+    syncRangeControlsDisabledState(type) {
+        const isDisabled = type !== 'range';
+        this.rangeControls.forEach((control) => {
+            if (isDisabled) {
+                control.disable({ emitEvent: false });
+            }
+            else {
+                control.enable({ emitEvent: false });
+            }
+        });
+    }
     mapTimeRange({ type }) {
         if (!type)
             return;
@@ -644,8 +691,8 @@ class KbqTimeRangeEditor {
         });
         return result;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRangeEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqTimeRangeEditor, isStandalone: true, selector: "kbq-time-range-editor", inputs: { maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, availableTimeRangeTypes: { classPropertyName: "availableTimeRangeTypes", publicName: "availableTimeRangeTypes", isSignal: true, isRequired: false, transformFunction: null }, rangeValue: { classPropertyName: "rangeValue", publicName: "rangeValue", isSignal: true, isRequired: false, transformFunction: null }, showRangeAsDefault: { classPropertyName: "showRangeAsDefault", publicName: "showRangeAsDefault", isSignal: true, isRequired: true, transformFunction: null }, localeConfiguration: { classPropertyName: "localeConfiguration", publicName: "localeConfiguration", isSignal: true, isRequired: true, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kbq-time-range__editor" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimeRangeEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqTimeRangeEditor, isStandalone: true, selector: "kbq-time-range-editor", inputs: { maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, availableTimeRangeTypes: { classPropertyName: "availableTimeRangeTypes", publicName: "availableTimeRangeTypes", isSignal: true, isRequired: false, transformFunction: null }, rangeValue: { classPropertyName: "rangeValue", publicName: "rangeValue", isSignal: true, isRequired: false, transformFunction: null }, showRangeAsDefault: { classPropertyName: "showRangeAsDefault", publicName: "showRangeAsDefault", isSignal: true, isRequired: true, transformFunction: null }, localeConfiguration: { classPropertyName: "localeConfiguration", publicName: "localeConfiguration", isSignal: true, isRequired: true, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusout": "onEditorFocusOut($event)" }, classAttribute: "kbq-time-range__editor" }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -656,9 +703,9 @@ 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\" (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 }); }
+        ], ngImport: i0, template: "<form [formGroup]=\"form\">\n    @let localeConfig = localeConfiguration();\n    @let types = timeRangeTypesWithoutRange();\n    @let bounds = boundsHint();\n\n    <!-- The radiogroup holds only radios: the from/to block is its sibling rather than its child, so the\n         text fields and the calendar button are not announced as part of the group. -->\n    <div class=\"kbq-time-range-editor__container\">\n        @if (types.length) {\n            <kbq-radio-group [formControl]=\"form.controls.type\">\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=\"\n                                    optionTemplate() || defaultOptionTemplate;\n                                    context: { $implicit: type }\n                                \"\n                            />\n                        </kbq-radio-button>\n                    }\n                </div>\n\n                @if (isRangeVisible()) {\n                    <kbq-radio-button class=\"kbq-time-range-editor__range-option\" [value]=\"'range'\">\n                        {{ localeConfig.editor.rangeLabel }}\n                        @if (bounds) {\n                            <kbq-hint>{{ bounds }}</kbq-hint>\n                        }\n                    </kbq-radio-button>\n                }\n            </kbq-radio-group>\n        }\n\n        @if (isRangeVisible()) {\n            <div\n                class=\"kbq-time-range-editor__range\"\n                role=\"group\"\n                [attr.aria-label]=\"localeConfig.editor.rangeLabel\"\n                (focusout)=\"onRangeFocusOut($event)\"\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\" [id]=\"fromLabelId\">\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                                [attr.aria-labelledby]=\"fromLabelId\"\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                                [attr.aria-labelledby]=\"fromLabelId\"\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\" [id]=\"toLabelId\">\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                                [attr.aria-labelledby]=\"toLabelId\"\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                                [attr.aria-labelledby]=\"toLabelId\"\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    </div>\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],[formArray],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", exportAs: ["kbqFieldset"] }, { kind: "directive", type: KbqFieldsetItem, selector: "[kbqFieldsetItem]", exportAs: ["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]", exportAs: ["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: "component", type: i5.KbqRadioGroup, selector: "kbq-radio-group", inputs: ["errorStateMatcher", "big", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["kbqRadioGroup"] }, { kind: "component", type: i5.KbqRadioButton, selector: "kbq-radio-button", inputs: ["id", "value", "checked", "disabled", "tabIndex", "required", "labelPosition", "name"], outputs: ["change"], exportAs: ["kbqRadioButton"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimeRangeEditor, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-time-range-editor', imports: [
                         NgTemplateOutlet,
@@ -683,9 +730,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                             useExisting: KbqTimeRangeEditor
                         }
                     ], 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\" (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 }] }] } });
+                        class: 'kbq-time-range__editor',
+                        // The editor is a composite control: no single field's blur means the user is done with it,
+                        // so touched is driven by focus leaving the editor as a whole.
+                        '(focusout)': 'onEditorFocusOut($event)'
+                    }, template: "<form [formGroup]=\"form\">\n    @let localeConfig = localeConfiguration();\n    @let types = timeRangeTypesWithoutRange();\n    @let bounds = boundsHint();\n\n    <!-- The radiogroup holds only radios: the from/to block is its sibling rather than its child, so the\n         text fields and the calendar button are not announced as part of the group. -->\n    <div class=\"kbq-time-range-editor__container\">\n        @if (types.length) {\n            <kbq-radio-group [formControl]=\"form.controls.type\">\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=\"\n                                    optionTemplate() || defaultOptionTemplate;\n                                    context: { $implicit: type }\n                                \"\n                            />\n                        </kbq-radio-button>\n                    }\n                </div>\n\n                @if (isRangeVisible()) {\n                    <kbq-radio-button class=\"kbq-time-range-editor__range-option\" [value]=\"'range'\">\n                        {{ localeConfig.editor.rangeLabel }}\n                        @if (bounds) {\n                            <kbq-hint>{{ bounds }}</kbq-hint>\n                        }\n                    </kbq-radio-button>\n                }\n            </kbq-radio-group>\n        }\n\n        @if (isRangeVisible()) {\n            <div\n                class=\"kbq-time-range-editor__range\"\n                role=\"group\"\n                [attr.aria-label]=\"localeConfig.editor.rangeLabel\"\n                (focusout)=\"onRangeFocusOut($event)\"\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\" [id]=\"fromLabelId\">\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                                [attr.aria-labelledby]=\"fromLabelId\"\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                                [attr.aria-labelledby]=\"fromLabelId\"\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\" [id]=\"toLabelId\">\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                                [attr.aria-labelledby]=\"toLabelId\"\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                                [attr.aria-labelledby]=\"toLabelId\"\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    </div>\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 }] }] } });
 
 /** @docs-private */
 class KbqTimeRangeTitle {
@@ -693,9 +743,11 @@ class KbqTimeRangeTitle {
         this.timeRangeService = inject(KbqTimeRangeService);
         this.popover = inject(KbqPopoverTrigger, { host: true });
         this.injector = inject(Injector);
-        this.timeRange = input.required(...(ngDevMode ? [{ debugName: "timeRange" }] : []));
-        this.localeConfiguration = input.required(...(ngDevMode ? [{ debugName: "localeConfiguration" }] : []));
-        this.titleTemplate = input(...(ngDevMode ? [undefined, { debugName: "titleTemplate" }] : []));
+        this.timeRange = input.required(...(ngDevMode ? [{ debugName: "timeRange" }] : /* istanbul ignore next */ []));
+        this.localeConfiguration = input.required(...(ngDevMode ? [{ debugName: "localeConfiguration" }] : /* istanbul ignore next */ []));
+        this.titleTemplate = input(...(ngDevMode ? [undefined, { debugName: "titleTemplate" }] : /* istanbul ignore next */ []));
+        /** Drops the built-in trigger out of the tab order. A custom `titleTemplate` owns its own state. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.context = computed(() => {
             const timeRange = this.timeRange();
             if (!timeRange)
@@ -704,7 +756,7 @@ class KbqTimeRangeTitle {
                 ...timeRange,
                 ...this.timeRangeService.getTimeRangeTypeUnits(timeRange.type)
             };
-        }, ...(ngDevMode ? [{ debugName: "context" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
         this.titleContext = computed(() => {
             const context = this.context();
             const formattedDate = this.formattedDate();
@@ -716,7 +768,7 @@ class KbqTimeRangeTitle {
                 $implicit: customizableTitleContext,
                 ...customizableTitleContext
             };
-        }, ...(ngDevMode ? [{ debugName: "titleContext" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "titleContext" }] : /* istanbul ignore next */ []));
         this.formattedDate = computed(() => {
             const context = this.context();
             const localeConfiguration = this.localeConfiguration();
@@ -727,9 +779,7 @@ class KbqTimeRangeTitle {
             if (timeRangeUnit === 'other') {
                 switch (context.type) {
                     case 'range': {
-                        return (localeConfiguration.title.for +
-                            ' ' +
-                            this.timeRangeService.dateFormatter.rangeLongDate(this.timeRangeService.dateAdapter.deserialize(context.startDateTime ?? ''), this.timeRangeService.dateAdapter.deserialize(context.endDateTime ?? '')));
+                        return this.timeRangeService.dateFormatter.rangeLongDate(this.timeRangeService.dateAdapter.deserialize(context.startDateTime ?? ''), this.timeRangeService.dateAdapter.deserialize(context.endDateTime ?? ''));
                     }
                     case 'allTime': {
                         return localeConfiguration.editor.allTime;
@@ -747,99 +797,106 @@ class KbqTimeRangeTitle {
             }
             if (!context.startDateTime)
                 return '';
-            return (localeConfiguration.title.for +
-                ' ' +
-                this.timeRangeService.dateFormatter.duration(this.timeRangeService.dateAdapter.deserialize(context.startDateTime), this.timeRangeService.dateAdapter.today(), [timeRangeUnit], false, localeConfiguration.durationTemplate.title));
-        }, ...(ngDevMode ? [{ debugName: "formattedDate" }] : []));
+            return this.timeRangeService.dateFormatter.duration(this.timeRangeService.dateAdapter.deserialize(context.startDateTime), this.timeRangeService.dateAdapter.today(), [timeRangeUnit], false, localeConfiguration.durationTemplate.title);
+        }, ...(ngDevMode ? [{ debugName: "formattedDate" }] : /* istanbul ignore next */ []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRangeTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqTimeRangeTitle, isStandalone: true, selector: "kbq-time-range-title", inputs: { timeRange: { classPropertyName: "timeRange", publicName: "timeRange", isSignal: true, isRequired: true, transformFunction: null }, localeConfiguration: { classPropertyName: "localeConfiguration", publicName: "localeConfiguration", isSignal: true, isRequired: true, transformFunction: null }, titleTemplate: { classPropertyName: "titleTemplate", publicName: "titleTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimeRangeTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqTimeRangeTitle, isStandalone: true, selector: "kbq-time-range-title", inputs: { timeRange: { classPropertyName: "timeRange", publicName: "timeRange", isSignal: true, isRequired: true, transformFunction: null }, localeConfiguration: { classPropertyName: "localeConfiguration", publicName: "localeConfiguration", isSignal: true, isRequired: true, transformFunction: null }, titleTemplate: { classPropertyName: "titleTemplate", publicName: "titleTemplate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
         @if (titleTemplate()) {
             <ng-container *ngTemplateOutlet="titleTemplate()!; context: titleContext() ?? null; injector: injector" />
         } @else {
-            <a kbq-link pseudo>
-                <span class="kbq-link__text">{{ formattedDate() }}</span>
-
-                <i kbq-icon="kbq-calendar-o_16"></i>
+            <a kbqLink pseudo size="normal" [disabled]="disabled()">
+                {{ formattedDate() }}
+                <i kbq-icon="kbq-calendar-o_16" kbqLinkSuffix></i>
             </a>
         }
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: KbqLinkModule }, { kind: "directive", type: i1$1.KbqLink, selector: "[kbq-link]", inputs: ["disabled", "tabIndex", "pseudo", "noUnderline", "big", "compact", "multiline", "useVisited", "print"], exportAs: ["kbqLink"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2$1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KbqLink, selector: "[kbqLink]", inputs: ["disabled", "tabIndex", "pseudo", "external", "underline", "size", "useVisited", "print"], exportAs: ["kbqLink"] }, { kind: "directive", type: KbqLinkSuffix, selector: "[kbqLinkSuffix]" }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1$1.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRangeTitle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimeRangeTitle, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-time-range-title',
                     imports: [
                         NgTemplateOutlet,
-                        KbqLinkModule,
+                        KbqLink,
+                        KbqLinkSuffix,
                         KbqIconModule
                     ],
                     template: `
         @if (titleTemplate()) {
             <ng-container *ngTemplateOutlet="titleTemplate()!; context: titleContext() ?? null; injector: injector" />
         } @else {
-            <a kbq-link pseudo>
-                <span class="kbq-link__text">{{ formattedDate() }}</span>
-
-                <i kbq-icon="kbq-calendar-o_16"></i>
+            <a kbqLink pseudo size="normal" [disabled]="disabled()">
+                {{ formattedDate() }}
+                <i kbq-icon="kbq-calendar-o_16" kbqLinkSuffix></i>
             </a>
         }
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], propDecorators: { timeRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeRange", required: true }] }], localeConfiguration: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeConfiguration", required: true }] }], titleTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleTemplate", required: false }] }] } });
+        }], propDecorators: { timeRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeRange", required: true }] }], localeConfiguration: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeConfiguration", required: true }] }], titleTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleTemplate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /** Localization configuration provider. */
-const KBQ_TIME_RANGE_LOCALE_CONFIGURATION = new InjectionToken('KBQ_TIME_RANGE_LOCALE_CONFIGURATION', { factory: () => ruRULocaleData.timeRange });
-/** Utility provider for `KBQ_TIME_RANGE_LOCALE_CONFIGURATION`. */
-const kbqTimeRangeLocaleConfigurationProvider = (configuration) => ({
-    provide: KBQ_TIME_RANGE_LOCALE_CONFIGURATION,
-    useValue: configuration
-});
+const KBQ_TIME_RANGE_LOCALE_CONFIGURATION = new InjectionToken('KbqTimeRangeLocaleConfiguration', { factory: () => ruRULocaleData.timeRange });
+/**
+ * Utility provider for `KBQ_TIME_RANGE_LOCALE_CONFIGURATION`. Only the strings you pass are overridden;
+ * the rest keep following the active locale.
+ */
+const kbqTimeRangeLocaleConfigurationProvider = (configuration) => kbqLocaleConfigurationOverrideProvider('timeRange', configuration);
 class KbqTimeRange {
     constructor() {
         this.timeRangeService = inject(KbqTimeRangeService);
-        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
         this.editorBridge = inject(KbqTimeRangeEditorBridge);
         this.document = inject(DOCUMENT);
+        this.destroyRef = inject(DestroyRef);
         /** @docs-private */
         this.ngControl = inject(NgControl, { optional: true, self: true });
-        /** The minimum selectable date. */
-        this.minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : []));
-        /** The maximum selectable date. */
-        this.maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : []));
-        /** provided value of selected range */
-        this.defaultRangeValue = input(...(ngDevMode ? [undefined, { debugName: "defaultRangeValue" }] : []));
-        /** Preset of selectable ranges */
-        this.availableTimeRangeTypes = input(this.timeRangeService.providedDefaultTimeRangeTypes, ...(ngDevMode ? [{ debugName: "availableTimeRangeTypes" }] : []));
-        /** Customizable trigger output */
-        this.titleTemplate = input(...(ngDevMode ? [undefined, { debugName: "titleTemplate" }] : []));
-        /** Customizable option output */
-        this.optionTemplate = input(...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : []));
-        /** Whether to show popover with arrow */
-        this.arrow = input(true, ...(ngDevMode ? [{ debugName: "arrow", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** The earliest date the calendars offer and the validation accepts. */
+        this.minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : /* istanbul ignore next */ []));
+        /** The latest date the calendars offer and the validation accepts. */
+        this.maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : /* istanbul ignore next */ []));
+        /** Seeds the from/to pair of the manual range. */
+        this.defaultRangeValue = input(...(ngDevMode ? [undefined, { debugName: "defaultRangeValue" }] : /* istanbul ignore next */ []));
+        /** The options the editor offers, in order. The first one is selected by default. */
+        this.availableTimeRangeTypes = input(this.timeRangeService.providedDefaultTimeRangeTypes, ...(ngDevMode ? [{ debugName: "availableTimeRangeTypes" }] : /* istanbul ignore next */ []));
+        /** Replaces the built-in trigger. */
+        this.titleTemplate = input(...(ngDevMode ? [undefined, { debugName: "titleTemplate" }] : /* istanbul ignore next */ []));
+        /** Replaces the built-in rendering of an option in the editor. */
+        this.optionTemplate = input(...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : /* istanbul ignore next */ []));
+        /** Whether the popover is drawn with an arrow. */
+        this.arrow = input(true, { ...(ngDevMode ? { debugName: "arrow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * Whether to show range in popover if not provided
-         * @see availableTimeRangeTypes
+         * Keeps the manual range visible even when `range` is not in {@link availableTimeRangeTypes}.
          */
-        this.showRangeAsDefault = input(true, ...(ngDevMode ? [{ debugName: "showRangeAsDefault" }] : []));
-        /** Whether component should fallback to default value if null provided */
-        this.nonNullable = input(true, ...(ngDevMode ? [{ debugName: "nonNullable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        /** Emit value update if provided value via formControl wasn't valid */
+        this.showRangeAsDefault = input(true, ...(ngDevMode ? [{ debugName: "showRangeAsDefault" }] : /* istanbul ignore next */ []));
+        /** Falls back to a default value instead of holding `null`. */
+        this.nonNullable = input(true, { ...(ngDevMode ? { debugName: "nonNullable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Emits the corrected value when the provided one could not be used as is. */
         this.valueCorrected = output();
         /**
          * Used to calculate time range.
-         * @docs-private */
+         *
+         * @docs-private
+         */
         this.normalizedDefaultRangeValue = computed(() => ({
             ...this.timeRangeService.getDefaultRangeValue(),
             ...this.defaultRangeValue()
-        }), ...(ngDevMode ? [{ debugName: "normalizedDefaultRangeValue" }] : []));
+        }), ...(ngDevMode ? [{ debugName: "normalizedDefaultRangeValue" }] : /* istanbul ignore next */ []));
+        this.disabledState = signal(false, ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        /**
+         * The applied time range, or `null` when the component is nullable and holds no value.
+         *
+         * This is what the trigger renders, so it lags the editor until Apply.
+         */
+        this.value = computed(() => this.titleValue(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Whether the control is disabled through the forms layer. */
+        this.disabled = this.disabledState.asReadonly();
         /** @docs-private */
         this.popoverSize = PopUpSizes.Medium;
         /** @docs-private */
         this.popupPlacement = PopUpPlacements.BottomLeft;
         /** @docs-private */
-        this.localeConfiguration = signal(inject(KBQ_TIME_RANGE_LOCALE_CONFIGURATION), ...(ngDevMode ? [{ debugName: "localeConfiguration" }] : []));
+        this.localeConfiguration = inject(KbqLocaleOverridesDirective, { self: true }).read('timeRange', KBQ_TIME_RANGE_LOCALE_CONFIGURATION);
         /** @docs-private */
         this.onChange = (_value) => { };
         /** @docs-private */
@@ -863,11 +920,8 @@ class KbqTimeRange {
         }
         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.titleValue = signal(this.nonNullable() ? defaultValue : null, ...(ngDevMode ? [{ debugName: "titleValue" }] : /* istanbul ignore next */ []));
         this.rangeEditorControl = new FormControl(defaultValue, { nonNullable: true });
-        this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(() => {
-            this.localeConfiguration.set(this.localeService?.getParams('timeRange') ?? ruRULocaleData.timeRange);
-        });
         toObservable(this.availableTimeRangeTypes)
             .pipe(takeUntilDestroyed())
             .subscribe(this.handleAvailableTypesChange);
@@ -878,11 +932,17 @@ class KbqTimeRange {
     }
     /** Implemented as part of ControlValueAccessor */
     writeValue(value) {
+        // Untracked, as `setDisabledState()`: a form control set from a consumer's `effect()` writes here on the
+        // spot, and the inputs read on the way — and the editor's bounds, through its validators — would make the
+        // effect run again.
+        untracked(() => this.applyValue(value));
+    }
+    /** Body of `writeValue()`. */
+    applyValue(value) {
         const nonNullable = this.nonNullable();
         const availableTimeRangeTypes = this.availableTimeRangeTypes();
         const corrected = this.timeRangeService.checkAndCorrectTimeRangeValue(value, availableTimeRangeTypes, this.normalizedDefaultRangeValue());
-        if ((value && value.type && !('startDateTime' in value && availableTimeRangeTypes.includes(value.type))) ||
-            (nonNullable && value === null)) {
+        if (this.wasCorrected(value, corrected)) {
             this.valueCorrected.emit(corrected);
         }
         this.titleValue.set(nonNullable || value !== null ? corrected : null);
@@ -891,17 +951,33 @@ class KbqTimeRange {
     /**
      * 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
-        });
+        fromEvent(this.document, 'mouseup')
+            .pipe(take(1), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => (this.editorBridge.applyGestureInProgress = false));
+    }
+    /**
+     * Whether the correction pass produced a different range than the one written.
+     *
+     * Comparing the outcome rather than the shape of the input keeps presets that legitimately carry
+     * no `startDateTime` - `allTime` resolves to `{}` unless a consumer supplies a range - from
+     * reporting a correction that never happened, and looping any host that writes the payload back.
+     */
+    wasCorrected(value, corrected) {
+        if (value === null)
+            return this.nonNullable();
+        return (value.type !== corrected.type ||
+            value.startDateTime !== corrected.startDateTime ||
+            value.endDateTime !== corrected.endDateTime);
     }
     /**
      * 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) {
@@ -920,10 +996,17 @@ class KbqTimeRange {
     onVisibleChange(isVisible) {
         if (isVisible)
             return;
+        // A pointer held on the footer when the popover went away - a release outside the window, say -
+        // would otherwise leave the gesture marked as in flight, and the next focusout out of the range
+        // would be read as an apply and skip the swap.
+        this.editorBridge.applyGestureInProgress = false;
         // 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()));
+        // Closing the popover is the point the user is done with the control, whether they applied
+        // or cancelled - every ErrorStateMatcher in the library keys error display off `touched`.
+        this.onTouch();
     }
     /** Implemented as part of ControlValueAccessor */
     registerOnChange(fn) {
@@ -937,8 +1020,20 @@ class KbqTimeRange {
     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, KbqTimeRangeEditorBridge], ngImport: i0, template: `
+    /** Implemented as part of ControlValueAccessor */
+    setDisabledState(isDisabled) {
+        this.disabledState.set(isDisabled);
+        untracked(() => {
+            if (isDisabled) {
+                this.rangeEditorControl.disable({ emitEvent: false });
+            }
+            else {
+                this.rangeEditorControl.enable({ emitEvent: false });
+            }
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimeRange, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", 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: { properties: { "class.kbq-disabled": "disabled()" }, classAttribute: "kbq-time-range" }, providers: [KbqTimeRangeService, KbqTimeRangeEditorBridge], hostDirectives: [{ directive: i1$2.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0, template: `
         @let localeConfig = localeConfiguration();
         <kbq-time-range-title
             #popover="kbqPopover"
@@ -950,8 +1045,10 @@ class KbqTimeRange {
             [kbqPopoverFooter]="timeRangePopoverFooter"
             [kbqPopoverPlacement]="popupPlacement"
             [kbqPopoverArrow]="arrow()"
+            [kbqPopoverDisabled]="disabled()"
             [titleTemplate]="titleTemplate()"
             [timeRange]="titleValue()"
+            [disabled]="disabled()"
             [localeConfiguration]="localeConfig"
             (kbqPopoverVisibleChange)="onVisibleChange($event)"
         />
@@ -970,7 +1067,8 @@ class KbqTimeRange {
         </ng-template>
 
         <ng-template #timeRangePopoverFooter>
-            <div class="kbq-time-range__buttons" role="group" (mousedown)="onFooterPointerDown()">
+            <!-- The grouping is purely visual: an unnamed role=group only added a boundary. -->
+            <div class="kbq-time-range__buttons" (mousedown)="onFooterPointerDown()">
                 <button kbq-button [color]="'contrast'" (click)="onApply(popover)">
                     {{ localeConfig.editor.apply }}
                 </button>
@@ -978,9 +1076,9 @@ class KbqTimeRange {
                 <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{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 }); }
+    `, 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{display:flex;flex-direction:column;gap:var(--kbq-size-s);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: i3$1.KbqPopoverTrigger, selector: "[kbqPopover]", inputs: ["kbqPopoverHideIfNotInViewPort", "kbqTrigger", "kbqLeaveDelay", "kbqEnterDelay", "kbqPopoverPreventClose", "kbqPopoverStickToWindow", "kbqPopoverContainer", "kbqPopoverHasBackdrop", "kbqPopoverBackdropClass", "kbqPopoverDefaultPaddings", "kbqPopoverSize", "kbqPopoverClass", "kbqPopoverHeader", "kbqPopoverContent", "kbqPopoverFooter", "kbqPopoverContext", "kbqPopoverAriaLabel", "kbqPopoverHasCloseButton", "kbqPopoverCloseOnScroll", "kbqPopoverArrow", "kbqPopoverOffset", "kbqPopoverAutoFocus", "kbqPopoverOrigin", "kbqPopoverDisabled", "kbqPopoverPlacementPriority", "kbqPopoverPlacement", "kbqPopoverVisible"], outputs: ["kbqPopoverPlacementChange", "kbqPopoverVisibleChange"], exportAs: ["kbqPopover"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i4$1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i4$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", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRange, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimeRange, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-time-range', imports: [
                         ReactiveFormsModule,
@@ -1000,8 +1098,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
             [kbqPopoverFooter]="timeRangePopoverFooter"
             [kbqPopoverPlacement]="popupPlacement"
             [kbqPopoverArrow]="arrow()"
+            [kbqPopoverDisabled]="disabled()"
             [titleTemplate]="titleTemplate()"
             [timeRange]="titleValue()"
+            [disabled]="disabled()"
             [localeConfiguration]="localeConfig"
             (kbqPopoverVisibleChange)="onVisibleChange($event)"
         />
@@ -1020,7 +1120,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         </ng-template>
 
         <ng-template #timeRangePopoverFooter>
-            <div class="kbq-time-range__buttons" role="group" (mousedown)="onFooterPointerDown()">
+            <!-- The grouping is purely visual: an unnamed role=group only added a boundary. -->
+            <div class="kbq-time-range__buttons" (mousedown)="onFooterPointerDown()">
                 <button kbq-button [color]="'contrast'" (click)="onApply(popover)">
                     {{ localeConfig.editor.apply }}
                 </button>
@@ -1029,16 +1130,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
             </div>
         </ng-template>
     `, 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{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"] }]
+                        class: 'kbq-time-range',
+                        '[class.kbq-disabled]': 'disabled()'
+                    }, hostDirectives: [
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
+                    ], 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{display:flex;flex-direction:column;gap:var(--kbq-size-s);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. */
 class KbqTimeRangeTitlePlaceholder {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRangeTitlePlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqTimeRangeTitlePlaceholder, isStandalone: true, selector: "[kbqTimeRangeTitlePlaceholder]", host: { classAttribute: "kbq-time-range-title__placeholder" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimeRangeTitlePlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqTimeRangeTitlePlaceholder, isStandalone: true, selector: "[kbqTimeRangeTitlePlaceholder]", host: { classAttribute: "kbq-time-range-title__placeholder" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRangeTitlePlaceholder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimeRangeTitlePlaceholder, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTimeRangeTitlePlaceholder]',
@@ -1051,28 +1155,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
 class KbqTimeRangeTitleAsControl {
     constructor() {
         this.timeRange = inject(KbqTimeRange);
+        this.parentFormField = inject(KBQ_FORM_FIELD, { host: true, optional: true });
+        this.elementRef = inject(ElementRef);
+        this.requiredValue = signal(false, ...(ngDevMode ? [{ debugName: "requiredValue" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.focusedValue = signal(false, ...(ngDevMode ? [{ debugName: "focusedValue" }] : /* istanbul ignore next */ []));
         /** @docs-private */
         this.controlType = 'select';
         /** @docs-private */
-        this.stateChanges = new Subject();
+        this.isNativeLabelSupported = false;
+        /**
+         * Id of the `kbq-form-field` caption naming this control, when it has one.
+         *
+         * A `<label for>` does not associate with a custom element, so the relationship is expressed the
+         * other way around — from the control to the label.
+         *
+         * @docs-private
+         */
+        this.ariaLabelledby = computed(() => this.parentFormField?.labelId() ?? null, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
         /** @docs-private */
         this.ngControl = this.timeRange.ngControl;
+        this.errorStateTracker = new KbqErrorStateTracker(inject(ErrorStateMatcher), this.ngControl, inject(FormGroupDirective, { optional: true }), inject(NgForm, { optional: true }));
+        /** @docs-private */
+        this.value = this.timeRange.value;
+        /** @docs-private */
+        this.id = signal(inject(_IdGenerator).getId('kbq-time-range-title-as-control-')).asReadonly();
+        /** @docs-private */
+        this.placeholder = signal(undefined).asReadonly();
+        /** @docs-private */
+        this.focused = this.focusedValue.asReadonly();
+        /** @docs-private */
+        this.empty = computed(() => this.timeRange.value() === null, ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.required = this.requiredValue.asReadonly();
+        /** @docs-private */
+        this.disabled = this.timeRange.disabled;
+        /** @docs-private */
+        this.errorState = this.errorStateTracker.errorState;
+    }
+    /**
+     * The validators and the touched state of the bound control notify nothing a signal could follow.
+     *
+     * @docs-private
+     */
+    ngDoCheck() {
+        this.errorStateTracker.updateErrorState();
+        this.requiredValue.set(!!this.ngControl?.control?.hasValidator(Validators.required));
     }
     /** @docs-private */
-    onContainerClick(_event) { }
+    onContainerClick(_event) {
+        this.focus();
+    }
     /** @docs-private */
-    focus(_options) { }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRangeTitleAsControl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: KbqTimeRangeTitleAsControl, isStandalone: true, selector: "kbq-time-range-title-as-control", host: { properties: { "attr.tabindex": "0" }, classAttribute: "kbq-time-range-title-as-form-field" }, providers: [
+    focus(options) {
+        this.elementRef.nativeElement.focus(options);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimeRangeTitleAsControl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: KbqTimeRangeTitleAsControl, isStandalone: true, selector: "kbq-time-range-title-as-control", host: { listeners: { "focus": "focusedValue.set(true)", "blur": "focusedValue.set(false)" }, properties: { "attr.tabindex": "disabled() ? null : 0", "attr.id": "id()", "attr.aria-labelledby": "ariaLabelledby()" }, classAttribute: "kbq-time-range-title-as-form-field" }, providers: [
             {
                 provide: KbqFormFieldControl,
                 useExisting: KbqTimeRangeTitleAsControl
             }
         ], ngImport: i0, template: `
         <ng-content />
-    `, isInline: true, styles: [":host{display:flex;align-items:center}:host:focus-visible{outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, styles: [":host{display:flex;align-items:center}:host(:focus-visible){outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRangeTitleAsControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimeRangeTitleAsControl, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-time-range-title-as-control', template: `
         <ng-content />
@@ -1082,9 +1230,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                             useExisting: KbqTimeRangeTitleAsControl
                         }
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.tabindex]': '0',
-                        class: 'kbq-time-range-title-as-form-field'
-                    }, styles: [":host{display:flex;align-items:center}:host:focus-visible{outline:none}\n"] }]
+                        '[attr.tabindex]': 'disabled() ? null : 0',
+                        '[attr.id]': 'id()',
+                        '[attr.aria-labelledby]': 'ariaLabelledby()',
+                        class: 'kbq-time-range-title-as-form-field',
+                        '(focus)': 'focusedValue.set(true)',
+                        '(blur)': 'focusedValue.set(false)'
+                    }, styles: [":host{display:flex;align-items:center}:host(:focus-visible){outline:none}\n"] }]
         }] });
 
 const COMPONENTS = [
@@ -1095,8 +1247,8 @@ const COMPONENTS = [
     KbqTimeRangeTitleAsControl
 ];
 class KbqTimeRangeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRangeModule, imports: [KbqTimeRange,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimeRangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqTimeRangeModule, imports: [KbqTimeRange,
             KbqTimeRangeTitle,
             KbqTimeRangeEditor,
             KbqTimeRangeTitlePlaceholder,
@@ -1105,11 +1257,11 @@ class KbqTimeRangeModule {
             KbqTimeRangeEditor,
             KbqTimeRangeTitlePlaceholder,
             KbqTimeRangeTitleAsControl] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRangeModule, imports: [KbqTimeRange,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimeRangeModule, imports: [KbqTimeRange,
             KbqTimeRangeTitle,
             KbqTimeRangeEditor] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTimeRangeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqTimeRangeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,