@koobiq/components 20.4.1 → 21.0.0

package/types/koobiq-components-textarea.d.ts

@@ -0,0 +1,178 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, OnInit, DoCheck, ElementRef, Renderer2, WritableSignal } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { NgControl, NgForm, FormGroupDirective } from '@angular/forms';
+import { CanUpdateErrorState, ErrorStateMatcher } from '@koobiq/components/core';
+import * as i4 from '@koobiq/components/form-field';
+import { KbqFormFieldControl } from '@koobiq/components/form-field';
+import * as i1 from '@koobiq/components/scrollbar';
+import * as i1$1 from '@angular/cdk/a11y';
+
+declare const KBQ_TEXTAREA_VALUE_ACCESSOR: InjectionToken<{
+    value: any;
+}>;
+declare class KbqTextarea implements KbqFormFieldControl<any>, OnInit, DoCheck, CanUpdateErrorState {
+    protected elementRef: ElementRef<HTMLTextAreaElement>;
+    readonly ngControl: NgControl | null;
+    readonly parentForm: NgForm | null;
+    readonly parentFormGroup: FormGroupDirective | null;
+    readonly defaultErrorStateMatcher: ErrorStateMatcher;
+    private readonly parent;
+    private readonly ngZone;
+    private readonly destroyRef;
+    private readonly errorStateTracker;
+    /** Whether the component is in an error state. */
+    readonly errorState: _angular_core.Signal<boolean>;
+    /**
+     * Parameter enables or disables the ability to automatically increase the height.
+     * If set to false, the textarea becomes vertically resizable.
+     */
+    readonly canGrow: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly isBrowser: boolean;
+    protected readonly renderer: Renderer2;
+    private readonly window;
+    /** Maximum number of lines to which the textarea will grow. Unlimited when unset. */
+    readonly maxRows: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    /** An object used to control when error messages are shown. */
+    readonly errorStateMatcher: _angular_core.InputSignal<ErrorStateMatcher | undefined>;
+    private readonly focusedValue;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     *
+     * @docs-private
+     */
+    readonly focused: _angular_core.Signal<boolean>;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     *
+     * @docs-private
+     */
+    readonly autofilled: _angular_core.Signal<boolean>;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     *
+     * @docs-private
+     */
+    controlType: string;
+    /** @docs-private */
+    readonly disabledInput: _angular_core.InputSignalWithTransform<boolean, string | boolean | null | undefined>;
+    /** `disabled` of the bound form control, which takes precedence over the input. */
+    private readonly formDisabled;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     *
+     * @docs-private
+     */
+    readonly disabled: _angular_core.Signal<boolean>;
+    /** @docs-private */
+    readonly idInput: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     *
+     * @docs-private
+     */
+    readonly id: _angular_core.Signal<string>;
+    /** @docs-private */
+    readonly placeholderInput: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     *
+     * @docs-private
+     */
+    readonly placeholder: WritableSignal<string | undefined>;
+    /** Distance from the last line to the bottom border. Defaults to a single line height. */
+    readonly freeRowsHeight: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     *
+     * @docs-private
+     */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, string | boolean | null | undefined>;
+    /** @docs-private */
+    readonly valueInput: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Implemented as part of KbqFormFieldControl. Follows what the user types; a value bound with `[value]` or set
+     * here is written to the element.
+     *
+     * @docs-private
+     */
+    readonly value: WritableSignal<string>;
+    private readonly emptyValue;
+    /** The value the element and `value` last agreed on, and the text the element showed then. */
+    private syncedValue;
+    private syncedText;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     *
+     * @docs-private
+     */
+    readonly empty: _angular_core.Signal<boolean>;
+    /**
+     * Flag that will be set to true when the maximum number of lines is reached.
+     * Maximum number of rows can be set using the maxRows input.
+     */
+    readonly maxRowLimitReached: _angular_core.Signal<boolean>;
+    /**
+     * Whether the textarea still grows with its content. It stops once `maxRows` is reached, and from
+     * there the element keeps its own scrollbar: `kbq-textarea_max-row-limit-reached` sets
+     * `resize: unset`, which follows `kbq-textarea-resizable` in the stylesheet and wins on source
+     * order, so no native handle appears.
+     *
+     * @docs-private
+     */
+    protected readonly growing: _angular_core.Signal<boolean>;
+    /** Distance from the last line to the bottom border, falling back to the measured line height. */
+    private readonly resolvedFreeRowsHeight;
+    protected readonly uid: string;
+    private valueAccessor;
+    /** Measured once the textarea has been rendered; the growth arithmetic is in terms of these. */
+    private readonly lineHeight;
+    private readonly minHeight;
+    private readonly rowsCount;
+    constructor();
+    ngOnInit(): void;
+    ngDoCheck(): void;
+    updateErrorState(): void;
+    /** @docs-private */
+    onBlur(): void;
+    /**
+     * Grow textarea height to avoid vertical scroll.
+     *
+     * @docs-private
+     */
+    protected grow(): void;
+    /** Focuses the textarea. */
+    focus(): void;
+    /**
+     * Callback for the cases where the focused state of the textarea changes.
+     *
+     * @docs-private
+     */
+    focusChanged(isFocused: boolean): void;
+    /**
+     * Implemented as part of KbqFormFieldControl.
+     *
+     * @docs-private
+     */
+    onContainerClick(): void;
+    /**
+     * Reads the native value back, since it changes without notice: through the forms API, which writes the
+     * element directly, or by the user typing into a textarea that no form listens to.
+     *
+     * @docs-private
+     */
+    dirtyCheckNativeValue(): void;
+    /** Checks whether the textarea is invalid based on the native validation. */
+    protected isBadInput(): boolean;
+    private isEmpty;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqTextarea, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqTextarea, "textarea[kbqTextarea]", ["kbqTextarea"], { "canGrow": { "alias": "canGrow"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "idInput": { "alias": "id"; "required": false; "isSignal": true; }; "placeholderInput": { "alias": "placeholder"; "required": false; "isSignal": true; }; "freeRowsHeight": { "alias": "freeRowsHeight"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.KbqNativeScrollbar; inputs: {}; outputs: {}; }]>;
+}
+
+declare class KbqTextareaModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqTextareaModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqTextareaModule, never, [typeof i1$1.A11yModule, typeof i2.FormsModule, typeof KbqTextarea], [typeof KbqTextarea, typeof i4.KbqFormFieldModule]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqTextareaModule>;
+}
+
+export { KBQ_TEXTAREA_VALUE_ACCESSOR, KbqTextarea, KbqTextareaModule };

package/{time-range/index.d.ts → types/koobiq-components-time-range.d.ts}

@@ -1,12 +1,12 @@
 import * as _angular_core from '@angular/core';
-import { Signal, InjectionToken, OnInit, TemplateRef, WritableSignal, Provider, Injector } from '@angular/core';
+import { Signal, InjectionToken, OnInit, TemplateRef, WritableSignal, Provider, Injector, DoCheck } from '@angular/core';
 import { ValidatorFn, ControlValueAccessor, NgControl, FormControl, Validator, FormGroup, AbstractControl, ValidationErrors } from '@angular/forms';
-import { DateAdapter, DateFormatter, KbqTimeRangeLocaleConfig, PopUpSizes, PopUpPlacements, ErrorStateMatcher } from '@koobiq/components/core';
+import * as i1 from '@koobiq/components/core';
+import { DateAdapter, DateFormatter, KbqTimeRangeLocaleConfiguration, PopUpSizes, PopUpPlacements, KbqDeepPartial, ErrorStateMatcher } from '@koobiq/components/core';
 import { KbqPopoverTrigger } from '@koobiq/components/popover';
 import { DurationObjectUnits, DurationUnit } from '@koobiq/date-adapter';
-import { KbqTimepicker, TimeFormats } from '@koobiq/components/timepicker';
+import { TimeFormats } from '@koobiq/components/timepicker';
 import { KbqFormFieldControl } from '@koobiq/components/form-field';
-import { Observable } from 'rxjs';
 
 /**
  * Represents a time range with optional start and end date-time values.
@@ -68,8 +68,6 @@ type KbqTimeRangeCustomizableTitleContext = Partial<KbqTimeRangeTitleContext> &
     formattedDate: string;
     popover: KbqPopoverTrigger;
 };
-/** @docs-private */
-type KbqTimeRangeTranslateTypeMap = Record<KbqTimeRangeType, KbqTimeRangeTranslationType>;
 /** Context for a time range option customization, combining meta information. */
 type KbqTimeRangeOptionContext = KbqTimeRangeTypeContext & KbqTimeRangeUnits & {
     translationType: KbqTimeRangeTranslationType;
@@ -89,7 +87,7 @@ declare class KbqTimeRangeService<T> {
      * end of that day.
      */
     readonly minDate: Signal<NonNullable<T> | null>;
-    /** @see minDate */
+    /** Upper bound of the owning component, read the way `minDate` reads the lower one. */
     readonly maxDate: Signal<NonNullable<T> | null>;
     readonly timeRangeConfig: Record<KbqTimeRangeType, Omit<KbqCustomTimeRangeType, 'type'>>;
     constructor();
@@ -134,8 +132,6 @@ declare const KBQ_DEFAULT_TIME_RANGE_TYPES: InjectionToken<KbqTimeRangeType[]>;
 declare const KBQ_CUSTOM_TIME_RANGE_TYPES: InjectionToken<KbqCustomTimeRangeType[]>;
 /** Time range types in range editor if nothing provided */
 declare const defaultTimeRangeTypes: KbqTimeRangeType[];
-/** @docs-private */
-declare function createMissingDateImplError(componentName: string, provider: string): Error;
 /**
  * Validates that the 'from' date-time is not greater than the 'to' date-time in a range form.
  * Returns an error if the start date-time occurs after the end date-time.
@@ -145,43 +141,47 @@ declare function createMissingDateImplError(componentName: string, provider: str
 declare const rangeValidator: <T>(timeRangeService: KbqTimeRangeService<T>) => ValidatorFn;
 
 /** Localization configuration provider. */
-declare const KBQ_TIME_RANGE_LOCALE_CONFIGURATION: InjectionToken<KbqTimeRangeLocaleConfig>;
-/** Utility provider for `KBQ_TIME_RANGE_LOCALE_CONFIGURATION`. */
-declare const kbqTimeRangeLocaleConfigurationProvider: (configuration: KbqTimeRangeLocaleConfig) => Provider;
+declare const KBQ_TIME_RANGE_LOCALE_CONFIGURATION: InjectionToken<KbqTimeRangeLocaleConfiguration>;
+/**
+ * Utility provider for `KBQ_TIME_RANGE_LOCALE_CONFIGURATION`. Only the strings you pass are overridden;
+ * the rest keep following the active locale.
+ */
+declare const kbqTimeRangeLocaleConfigurationProvider: (configuration: KbqDeepPartial<KbqTimeRangeLocaleConfiguration>) => Provider;
 declare class KbqTimeRange<T> implements ControlValueAccessor, OnInit {
     private readonly timeRangeService;
-    private readonly localeService;
     private readonly editorBridge;
     private readonly document;
+    private readonly destroyRef;
     /** @docs-private */
     readonly ngControl: NgControl | null;
-    /** The minimum selectable date. */
+    /** The earliest date the calendars offer and the validation accepts. */
     readonly minDate: _angular_core.InputSignal<T | undefined>;
-    /** The maximum selectable date. */
+    /** The latest date the calendars offer and the validation accepts. */
     readonly maxDate: _angular_core.InputSignal<T | undefined>;
-    /** provided value of selected range */
+    /** Seeds the from/to pair of the manual range. */
     readonly defaultRangeValue: _angular_core.InputSignal<KbqRangeValue<T> | undefined>;
-    /** Preset of selectable ranges */
+    /** The options the editor offers, in order. The first one is selected by default. */
     readonly availableTimeRangeTypes: _angular_core.InputSignal<KbqTimeRangeType[]>;
-    /** Customizable trigger output */
+    /** Replaces the built-in trigger. */
     readonly titleTemplate: _angular_core.InputSignal<TemplateRef<KbqTimeRangeCustomizableTitleContext> | undefined>;
-    /** Customizable option output */
+    /** Replaces the built-in rendering of an option in the editor. */
     readonly optionTemplate: _angular_core.InputSignal<TemplateRef<KbqTimeRangeOptionContext> | undefined>;
-    /** Whether to show popover with arrow */
+    /** Whether the popover is drawn with an arrow. */
     readonly arrow: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
-     * Whether to show range in popover if not provided
-     * @see availableTimeRangeTypes
+     * Keeps the manual range visible even when `range` is not in {@link availableTimeRangeTypes}.
      */
     readonly showRangeAsDefault: _angular_core.InputSignal<boolean>;
-    /** Whether component should fallback to default value if null provided */
+    /** Falls back to a default value instead of holding `null`. */
     readonly nonNullable: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Emit value update if provided value via formControl wasn't valid */
+    /** Emits the corrected value when the provided one could not be used as is. */
     readonly valueCorrected: _angular_core.OutputEmitterRef<KbqTimeRangeRange>;
     /**
      * Used to calculate time range.
-     * @docs-private */
-    protected readonly normalizedDefaultRangeValue: _angular_core.Signal<{
+     *
+     * @docs-private
+     */
+    protected readonly normalizedDefaultRangeValue: Signal<{
         fromTime: T;
         fromDate: T;
         toTime: T;
@@ -191,25 +191,46 @@ declare class KbqTimeRange<T> implements ControlValueAccessor, OnInit {
     protected readonly titleValue: WritableSignal<KbqTimeRangeRange | null>;
     /** @docs-private */
     protected readonly rangeEditorControl: FormControl<KbqTimeRangeRange>;
+    private readonly disabledState;
+    /**
+     * 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.
+     */
+    readonly value: Signal<KbqTimeRangeRange | null>;
+    /** Whether the control is disabled through the forms layer. */
+    readonly disabled: Signal<boolean>;
     /** @docs-private */
     protected readonly popoverSize = PopUpSizes.Medium;
     /** @docs-private */
     protected readonly popupPlacement = PopUpPlacements.BottomLeft;
     /** @docs-private */
-    protected readonly localeConfiguration: WritableSignal<KbqTimeRangeLocaleConfig>;
+    protected readonly localeConfiguration: Signal<KbqTimeRangeLocaleConfiguration>;
     constructor();
     ngOnInit(): void;
     /** Implemented as part of ControlValueAccessor */
     writeValue(value: KbqTimeRangeRange | null): void;
+    /** Body of `writeValue()`. */
+    private applyValue;
     /**
      * 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
      */
     protected onFooterPointerDown(): void;
+    /**
+     * 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.
+     */
+    private wasCorrected;
     /**
      * 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: KbqPopoverTrigger): void;
@@ -226,24 +247,11 @@ declare class KbqTimeRange<T> implements ControlValueAccessor, OnInit {
     registerOnTouched(fn: () => void): void;
     /** What the editor opens on: the first offered type, or a plain range when none are offered. */
     private defaultEditorValue;
+    /** Implemented as part of ControlValueAccessor */
+    setDisabledState(isDisabled: boolean): void;
     private handleAvailableTypesChange;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqTimeRange<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqTimeRange<any>, "kbq-time-range", never, { "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "defaultRangeValue": { "alias": "defaultRangeValue"; "required": false; "isSignal": true; }; "availableTimeRangeTypes": { "alias": "availableTimeRangeTypes"; "required": false; "isSignal": true; }; "titleTemplate": { "alias": "titleTemplate"; "required": false; "isSignal": true; }; "optionTemplate": { "alias": "optionTemplate"; "required": false; "isSignal": true; }; "arrow": { "alias": "arrow"; "required": false; "isSignal": true; }; "showRangeAsDefault": { "alias": "showRangeAsDefault"; "required": false; "isSignal": true; }; "nonNullable": { "alias": "nonNullable"; "required": false; "isSignal": true; }; }, { "valueCorrected": "valueCorrected"; }, never, never, true, never>;
-}
-
-/** @docs-private */
-declare class KbqTimeRangeTitle {
-    private readonly timeRangeService;
-    private readonly popover;
-    protected readonly injector: Injector;
-    readonly timeRange: _angular_core.InputSignal<KbqTimeRangeRange | null>;
-    readonly localeConfiguration: _angular_core.InputSignal<KbqTimeRangeLocaleConfig>;
-    readonly titleTemplate: _angular_core.InputSignal<TemplateRef<any> | undefined>;
-    protected readonly context: _angular_core.Signal<KbqTimeRangeTitleContext | undefined>;
-    protected readonly titleContext: _angular_core.Signal<KbqTimeRangeCustomizableTitleContext | undefined>;
-    protected readonly formattedDate: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqTimeRangeTitle, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqTimeRangeTitle, "kbq-time-range-title", never, { "timeRange": { "alias": "timeRange"; "required": true; "isSignal": true; }; "localeConfiguration": { "alias": "localeConfiguration"; "required": true; "isSignal": true; }; "titleTemplate": { "alias": "titleTemplate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqTimeRange<any>, "kbq-time-range", never, { "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "defaultRangeValue": { "alias": "defaultRangeValue"; "required": false; "isSignal": true; }; "availableTimeRangeTypes": { "alias": "availableTimeRangeTypes"; "required": false; "isSignal": true; }; "titleTemplate": { "alias": "titleTemplate"; "required": false; "isSignal": true; }; "optionTemplate": { "alias": "optionTemplate"; "required": false; "isSignal": true; }; "arrow": { "alias": "arrow"; "required": false; "isSignal": true; }; "showRangeAsDefault": { "alias": "showRangeAsDefault"; "required": false; "isSignal": true; }; "nonNullable": { "alias": "nonNullable"; "required": false; "isSignal": true; }; }, { "valueCorrected": "valueCorrected"; }, never, never, true, [{ directive: typeof i1.KbqLocaleOverridesDirective; inputs: { "kbqLocaleOverrides": "localeOverrides"; }; outputs: {}; }]>;
 }
 
 interface FormValue<T> {
@@ -278,7 +286,7 @@ declare class KbqTimeRangeEditor<T> implements ControlValueAccessor, Validator,
     /** Provided value of selected range */
     readonly rangeValue: _angular_core.InputSignal<Required<KbqRangeValue<T>>>;
     readonly showRangeAsDefault: _angular_core.InputSignal<boolean>;
-    readonly localeConfiguration: _angular_core.InputSignal<KbqTimeRangeLocaleConfig>;
+    readonly localeConfiguration: _angular_core.InputSignal<KbqTimeRangeLocaleConfiguration>;
     /** Customizable option output */
     readonly optionTemplate: _angular_core.InputSignal<TemplateRef<KbqTimeRangeOptionContext> | undefined>;
     /** @docs-private */
@@ -289,12 +297,11 @@ declare class KbqTimeRangeEditor<T> implements ControlValueAccessor, Validator,
      * 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
      */
     protected readonly boundsHint: _angular_core.Signal<string>;
     /** @docs-private */
-    protected readonly timepickerList: _angular_core.Signal<readonly KbqTimepicker<T>[]>;
-    /** @docs-private */
     protected readonly form: FormGroup<FormValue<T>>;
     /**
      * The same four controls as `form`, indexed as two ends each with a date and a time. The form itself
@@ -311,12 +318,24 @@ declare class KbqTimeRangeEditor<T> implements ControlValueAccessor, Validator,
     protected readonly rangeStateMatcher: RangeErrorStateMatcher;
     /** Raised by the first "apply", after which a border left wholly empty counts as an error too. */
     private applyAttempted;
+    /**
+     * 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
+     */
+    protected readonly fromLabelId: string;
+    /** @docs-private */
+    protected readonly toLabelId: string;
     constructor();
     ngOnInit(): void;
     /** @docs-private */
     validate(): ValidationErrors | null;
     /** Implemented as part of ControlValueAccessor */
     writeValue(value?: KbqTimeRangeRange): void;
+    /** Body of `writeValue()`. */
+    private applyValue;
     /** @docs-private */
     onChange: (_value: KbqTimeRangeRange) => void;
     /** @docs-private */
@@ -325,16 +344,26 @@ declare class KbqTimeRangeEditor<T> implements ControlValueAccessor, Validator,
     registerOnChange(fn: (value: KbqTimeRangeRange) => void): void;
     /** Implemented as part of ControlValueAccessor */
     registerOnTouched(fn: () => void): void;
+    /**
+     * 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
+     */
+    protected onEditorFocusOut({ currentTarget, relatedTarget }: FocusEvent): void;
     /**
      * 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
      */
     protected onBorderFocusOut(border: RangeBorder, { currentTarget, relatedTarget }: FocusEvent): void;
     /**
      * 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
      */
     protected onBorderInput(border: RangeBorder): void;
@@ -343,6 +372,7 @@ declare class KbqTimeRangeEditor<T> implements ControlValueAccessor, Validator,
      * 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
      */
     protected outOfBoundsMessage(): string;
@@ -350,6 +380,7 @@ declare class KbqTimeRangeEditor<T> implements ControlValueAccessor, Validator,
      * 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
      */
     protected onRangeFocusOut({ currentTarget, relatedTarget }: FocusEvent): void;
@@ -390,6 +421,10 @@ declare class KbqTimeRangeEditor<T> implements ControlValueAccessor, Validator,
      * business, and so is the calendar restriction.
      */
     private borderValidator;
+    /** Implemented as part of ControlValueAccessor */
+    setDisabledState(isDisabled: boolean): void;
+    /** The from/to pair is only editable while the `range` type is selected. */
+    private syncRangeControlsDisabledState;
     private mapTimeRange;
     private getFormattedOption;
     private concatControlValidationErrors;
@@ -397,40 +432,78 @@ declare class KbqTimeRangeEditor<T> implements ControlValueAccessor, Validator,
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqTimeRangeEditor<any>, "kbq-time-range-editor", never, { "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "availableTimeRangeTypes": { "alias": "availableTimeRangeTypes"; "required": false; "isSignal": true; }; "rangeValue": { "alias": "rangeValue"; "required": false; "isSignal": true; }; "showRangeAsDefault": { "alias": "showRangeAsDefault"; "required": true; "isSignal": true; }; "localeConfiguration": { "alias": "localeConfiguration"; "required": true; "isSignal": true; }; "optionTemplate": { "alias": "optionTemplate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/** @docs-private */
+declare class KbqTimeRangeTitle {
+    private readonly timeRangeService;
+    private readonly popover;
+    protected readonly injector: Injector;
+    readonly timeRange: _angular_core.InputSignal<KbqTimeRangeRange | null>;
+    readonly localeConfiguration: _angular_core.InputSignal<KbqTimeRangeLocaleConfiguration>;
+    readonly titleTemplate: _angular_core.InputSignal<TemplateRef<any> | undefined>;
+    /** Drops the built-in trigger out of the tab order. A custom `titleTemplate` owns its own state. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly context: _angular_core.Signal<KbqTimeRangeTitleContext | undefined>;
+    protected readonly titleContext: _angular_core.Signal<KbqTimeRangeCustomizableTitleContext | undefined>;
+    protected readonly formattedDate: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqTimeRangeTitle, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqTimeRangeTitle, "kbq-time-range-title", never, { "timeRange": { "alias": "timeRange"; "required": true; "isSignal": true; }; "localeConfiguration": { "alias": "localeConfiguration"; "required": true; "isSignal": true; }; "titleTemplate": { "alias": "titleTemplate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /** Directive for easy using styles of time-range placeholder publicly. */
 declare class KbqTimeRangeTitlePlaceholder {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqTimeRangeTitlePlaceholder, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqTimeRangeTitlePlaceholder, "[kbqTimeRangeTitlePlaceholder]", never, {}, {}, never, never, true, never>;
 }
 /** Component simulates `KbqFormFieldControl` allowing to provide custom content inside `KbqFormField` */
-declare class KbqTimeRangeTitleAsControl implements KbqFormFieldControl<any> {
-    private timeRange;
+declare class KbqTimeRangeTitleAsControl implements KbqFormFieldControl<KbqTimeRangeRange>, DoCheck {
+    private readonly timeRange;
+    private readonly parentFormField;
+    private readonly elementRef;
+    private readonly requiredValue;
     /** @docs-private */
-    controlType: string;
+    protected readonly focusedValue: _angular_core.WritableSignal<boolean>;
     /** @docs-private */
-    stateChanges: Observable<void>;
+    readonly controlType = "select";
+    /** @docs-private */
+    readonly 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
+     */
+    protected readonly ariaLabelledby: Signal<string | null>;
     /** @docs-private */
-    ngControl: NgControl | null;
+    readonly ngControl: NgControl | null;
+    private readonly errorStateTracker;
     /** @docs-private */
-    value: any;
+    readonly value: Signal<KbqTimeRangeRange | null>;
     /** @docs-private */
-    id: string;
+    readonly id: Signal<string>;
     /** @docs-private */
-    placeholder: string;
+    readonly placeholder: Signal<string | undefined>;
     /** @docs-private */
-    focused: boolean;
+    readonly focused: Signal<boolean>;
     /** @docs-private */
-    empty: boolean;
+    readonly empty: Signal<boolean>;
     /** @docs-private */
-    required: boolean;
+    readonly required: Signal<boolean>;
     /** @docs-private */
-    disabled: boolean;
+    readonly disabled: Signal<boolean>;
     /** @docs-private */
-    errorState: boolean;
+    readonly errorState: Signal<boolean>;
+    /**
+     * The validators and the touched state of the bound control notify nothing a signal could follow.
+     *
+     * @docs-private
+     */
+    ngDoCheck(): void;
     /** @docs-private */
     onContainerClick(_event: MouseEvent): void;
     /** @docs-private */
-    focus(_options?: FocusOptions): void;
+    focus(options?: FocusOptions): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqTimeRangeTitleAsControl, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqTimeRangeTitleAsControl, "kbq-time-range-title-as-control", never, {}, {}, never, ["*"], true, never>;
 }
@@ -441,5 +514,5 @@ declare class KbqTimeRangeModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqTimeRangeModule>;
 }
 
-export { KBQ_CUSTOM_TIME_RANGE_TYPES, KBQ_DEFAULT_TIME_RANGE_TYPES, KBQ_TIME_RANGE_LOCALE_CONFIGURATION, KbqTimeRange, KbqTimeRangeEditor, KbqTimeRangeModule, KbqTimeRangeTitle, KbqTimeRangeTitleAsControl, KbqTimeRangeTitlePlaceholder, createMissingDateImplError, defaultTimeRangeTypes, kbqTimeRangeLocaleConfigurationProvider, rangeValidator };
-export type { KbqCustomTimeRangeType, KbqRange, KbqRangeValue, KbqTimeRangeCustomizableTitleContext, KbqTimeRangeOptionContext, KbqTimeRangeRange, KbqTimeRangeTitleContext, KbqTimeRangeTranslateTypeMap, KbqTimeRangeTranslationType, KbqTimeRangeType, KbqTimeRangeTypeContext, KbqTimeRangeUnits };
+export { KBQ_CUSTOM_TIME_RANGE_TYPES, KBQ_DEFAULT_TIME_RANGE_TYPES, KBQ_TIME_RANGE_LOCALE_CONFIGURATION, KbqTimeRange, KbqTimeRangeEditor, KbqTimeRangeModule, KbqTimeRangeTitle, KbqTimeRangeTitleAsControl, KbqTimeRangeTitlePlaceholder, defaultTimeRangeTypes, kbqTimeRangeLocaleConfigurationProvider, rangeValidator };
+export type { KbqCustomTimeRangeType, KbqRange, KbqRangeValue, KbqTimeRangeCustomizableTitleContext, KbqTimeRangeOptionContext, KbqTimeRangeRange, KbqTimeRangeTitleContext, KbqTimeRangeTranslationType, KbqTimeRangeType, KbqTimeRangeTypeContext, KbqTimeRangeUnits };