@koobiq/components 19.8.1 → 20.0.0

package/fesm2022/koobiq-components-core.mjs

@@ -1,35 +1,590 @@
-import { trigger, state, transition, style, animate, group } from '@angular/animations';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, isDevMode, Input, InjectionToken, Optional, Inject, NgModule, ChangeDetectorRef, LOCALE_ID, Type, Injectable, Renderer2, DestroyRef, afterNextRender, Pipe, ContentChildren, booleanAttribute, ChangeDetectionStrategy, ViewEncapsulation, Component, EventEmitter, Output, ViewChild, TemplateRef, NgZone, ViewContainerRef, RendererFactory2, Version } from '@angular/core';
-import { BidiModule, Directionality } from '@angular/cdk/bidi';
-import { DOCUMENT, CommonModule } from '@angular/common';
+import { QueryList, inject, ElementRef, Directive, isDevMode, Input, ChangeDetectorRef, InjectionToken, LOCALE_ID, Type, Injectable, Renderer2, DestroyRef, afterNextRender, NgModule, Pipe, contentChildren, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewChild, numberAttribute, signal, TemplateRef, NgZone, ViewContainerRef, RendererFactory2, Version } from '@angular/core';
+import { Subject, Subscription, merge, fromEvent, map as map$1, BehaviorSubject, interval, pairwise } from 'rxjs';
+import { tap, debounceTime, filter, map, distinctUntilChanged, delay } from 'rxjs/operators';
+import { _getEventTarget, Platform } from '@angular/cdk/platform';
+import { trigger, state, transition, style, animate, group } from '@angular/animations';
 import { coerceBooleanProperty, coerceNumberProperty, coerceCssPixelValue } from '@angular/cdk/coercion';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { merge, fromEvent, map, BehaviorSubject, Subject, interval, Subscription, pairwise } from 'rxjs';
-import * as i1 from '@koobiq/date-adapter';
 import { DateAdapter as DateAdapter$1 } from '@koobiq/date-adapter';
+import { DOCUMENT } from '@angular/common';
 import { DateFormatter as DateFormatter$1 } from '@koobiq/date-formatter';
-import { Platform } from '@angular/cdk/platform';
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { SPACE, ENTER, TAB, hasModifierKey, ESCAPE, HOME, END } from '@koobiq/cdk/keycodes';
+import { SharedResizeObserver } from '@angular/cdk/observers/private';
 import { Overlay, ScrollDispatcher, CdkScrollable } from '@angular/cdk/overlay';
 import { TooltipSizeArrowSize } from '@koobiq/design-tokens';
+import { Directionality } from '@angular/cdk/bidi';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { AsyncScheduler } from 'rxjs/internal/scheduler/AsyncScheduler';
-import { distinctUntilChanged, filter, delay } from 'rxjs/operators';
+
+const MAC_ENTER = 3;
+const BACKSPACE = 8;
+const TAB = 9;
+const NUM_CENTER = 12;
+const ENTER = 13;
+const SHIFT = 16;
+const CONTROL = 17;
+const ALT = 18;
+const PAUSE = 19;
+const CAPS_LOCK = 20;
+const ESCAPE = 27;
+const SPACE = 32;
+const PAGE_UP = 33;
+const PAGE_DOWN = 34;
+const END = 35;
+const HOME = 36;
+const LEFT_ARROW = 37;
+const UP_ARROW = 38;
+const RIGHT_ARROW = 39;
+const DOWN_ARROW = 40;
+const PLUS_SIGN = 43;
+const PRINT_SCREEN = 44;
+const INSERT = 45;
+const DELETE = 46;
+const ZERO = 48;
+const ONE = 49;
+const TWO = 50;
+const THREE = 51;
+const FOUR = 52;
+const FIVE = 53;
+const SIX = 54;
+const SEVEN = 55;
+const EIGHT = 56;
+const NINE = 57;
+const FF_SEMICOLON = 59; // Firefox (Gecko) fires this for semicolon instead of 186
+const FF_EQUALS = 61; // Firefox (Gecko) fires this for equals instead of 187
+const QUESTION_MARK = 63;
+const AT_SIGN = 64;
+const A = 65;
+const B = 66;
+const C = 67;
+const D = 68;
+const E = 69;
+const F = 70;
+const G = 71;
+const H = 72;
+const I = 73;
+const J = 74;
+const K = 75;
+const L = 76;
+const M = 77;
+const N = 78;
+const O = 79;
+const P = 80;
+const Q = 81;
+const R = 82;
+const S = 83;
+const T = 84;
+const U = 85;
+const V = 86;
+const W = 87;
+const X = 88;
+const Y = 89;
+const Z = 90;
+const META = 91; // WIN_KEY_LEFT
+const MAC_WK_CMD_LEFT = 91;
+const MAC_WK_CMD_RIGHT = 93;
+const CONTEXT_MENU = 93;
+const NUMPAD_ZERO = 96;
+const NUMPAD_ONE = 97;
+const NUMPAD_TWO = 98;
+const NUMPAD_THREE = 99;
+const NUMPAD_FOUR = 100;
+const NUMPAD_FIVE = 101;
+const NUMPAD_SIX = 102;
+const NUMPAD_SEVEN = 103;
+const NUMPAD_EIGHT = 104;
+const NUMPAD_NINE = 105;
+const NUMPAD_MULTIPLY = 106;
+const NUMPAD_PLUS = 107;
+const NUMPAD_MINUS = 109;
+const NUMPAD_PERIOD = 110;
+const NUMPAD_DIVIDE = 111;
+const F1 = 112;
+const F2 = 113;
+const F3 = 114;
+const F4 = 115;
+const F5 = 116;
+const F6 = 117;
+const F7 = 118;
+const F8 = 119;
+const F9 = 120;
+const F10 = 121;
+const F11 = 122;
+const F12 = 123;
+const NUM_LOCK = 144;
+const SCROLL_LOCK = 145;
+const FIRST_MEDIA = 166;
+const FF_MINUS = 173;
+const MUTE = 173; // Firefox (Gecko) fires 181 for MUTE
+const VOLUME_DOWN = 174; // Firefox (Gecko) fires 182 for VOLUME_DOWN
+const VOLUME_UP = 175; // Firefox (Gecko) fires 183 for VOLUME_UP
+const FF_MUTE = 181;
+const FF_VOLUME_DOWN = 182;
+const LAST_MEDIA = 183;
+const FF_VOLUME_UP = 183;
+const SEMICOLON = 186; // Firefox (Gecko) fires 59 for SEMICOLON
+const EQUALS = 187; // Firefox (Gecko) fires 61 for EQUALS
+const COMMA = 188;
+const DASH = 189; // Firefox (Gecko) fires 173 for DASH/MINUS
+const PERIOD = 190;
+const SLASH = 191;
+const APOSTROPHE = 192;
+const TILDE = 192;
+const OPEN_SQUARE_BRACKET = 219;
+const BACKSLASH = 220;
+const CLOSE_SQUARE_BRACKET = 221;
+const SINGLE_QUOTE = 222;
+const MAC_META = 224;
+function hasModifierKey(event, ...modifiers) {
+    if (modifiers.length) {
+        return modifiers.some((modifier) => event[modifier]);
+    }
+    return event.altKey || event.shiftKey || event.ctrlKey || event.metaKey;
+}
+function isControl(event) {
+    const keyCode = event.keyCode;
+    switch (keyCode) {
+        case SHIFT:
+        case CONTROL:
+        case ALT:
+            return true;
+        default:
+            return event.metaKey;
+    }
+}
+function isNumberKey({ keyCode }) {
+    return keyCode >= ZERO && keyCode <= NINE;
+}
+function isNumpadKey({ keyCode }) {
+    return keyCode >= NUMPAD_ZERO && keyCode <= NUMPAD_NINE;
+}
+function isLetterKey({ keyCode }) {
+    return keyCode >= A && keyCode <= Z;
+}
+function isFunctionKey({ keyCode }) {
+    return keyCode >= F1 && keyCode <= F12;
+}
+function isVerticalMovement({ keyCode }) {
+    return [UP_ARROW, DOWN_ARROW, PAGE_DOWN, PAGE_UP, HOME, END].includes(keyCode);
+}
+function isHorizontalMovement({ keyCode }) {
+    return [LEFT_ARROW, RIGHT_ARROW, BACKSPACE, DELETE].includes(keyCode);
+}
+function isSelectAll(event) {
+    return (event.ctrlKey || event.metaKey) && event.keyCode === A;
+}
+function isCopy(event) {
+    return (event.ctrlKey || event.metaKey) && event.keyCode === C;
+}
+function isInput(event) {
+    const target = _getEventTarget(event);
+    return !!target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA');
+}
+function isLeftBracket(event) {
+    return event.code === 'BracketLeft';
+}
+function isRightBracket(event) {
+    return event.code === 'BracketRight';
+}
+function isDigit({ keyCode }) {
+    return [ZERO, ONE, TWO, THREE, FOUR, FIVE, SIX, SEVEN, EIGHT, NINE].includes(keyCode);
+}
 
 /**
- * @deprecated Will be removed in next major release. Use `KbqAnimationCurves` instead.
- *
- * @docs-private
+ * This class manages keyboard events for selectable lists. If you pass it a query list
+ * of items, it will set the active item correctly when arrow events occur.
  */
-var AnimationCurves;
-(function (AnimationCurves) {
-    AnimationCurves["StandardCurve"] = "cubic-bezier(0.4,0.0,0.2,1)";
-    AnimationCurves["DecelerationCurve"] = "cubic-bezier(0.0,0.0,0.2,1)";
-    AnimationCurves["AccelerationCurve"] = "cubic-bezier(0.4,0.0,1,1)";
-    AnimationCurves["SharpCurve"] = "cubic-bezier(0.4,0.0,0.6,1)";
-})(AnimationCurves || (AnimationCurves = {}));
+class ListKeyManager {
+    // Index of the currently active item.
+    get activeItemIndex() {
+        return this._activeItemIndex;
+    }
+    // The active item.
+    get activeItem() {
+        return this._activeItem;
+    }
+    constructor(_items) {
+        this._items = _items;
+        /**
+         * Stream that emits any time the TAB key is pressed, so components can react
+         * when focus is shifted off of the list.
+         */
+        this.tabOut = new Subject();
+        /** Stream that emits whenever the active item of the list manager changes. */
+        this.change = new Subject();
+        this.previousActiveItemIndex = -1;
+        this._activeItemIndex = -1;
+        this.wrap = false;
+        this.letterKeyStream = new Subject();
+        this.typeaheadSubscription = Subscription.EMPTY;
+        this.vertical = true;
+        this.scrollSize = 0;
+        // Buffer for the letters that the user has pressed when the typeahead option is turned on.
+        this.pressedLetters = [];
+        this.homeAndEnd = false;
+        this.allowedModifierKeys = [];
+        /**
+         * Predicate function that can be used to check whether an item should be skipped
+         * by the key manager. By default, disabled items are skipped.
+         */
+        this.skipPredicateFn = (item) => item.disabled;
+        if (_items instanceof QueryList) {
+            _items.changes.subscribe((newItems) => {
+                if (this._activeItem) {
+                    const itemArray = newItems.toArray();
+                    const newIndex = itemArray.indexOf(this._activeItem);
+                    if (newIndex > -1 && newIndex !== this._activeItemIndex) {
+                        this._activeItemIndex = newIndex;
+                    }
+                }
+            });
+        }
+    }
+    /** Gets whether the user is currently typing into the manager using the typeahead feature. */
+    isTyping() {
+        return this.pressedLetters.length > 0;
+    }
+    withScrollSize(scrollSize) {
+        this.scrollSize = scrollSize;
+        return this;
+    }
+    /**
+     * Modifier keys which are allowed to be held down and whose default actions will be prevented
+     * as the user is pressing the arrow keys. Defaults to not allowing any modifier keys.
+     */
+    withAllowedModifierKeys(keys) {
+        this.allowedModifierKeys = keys;
+        return this;
+    }
+    /**
+     * Turns on wrapping mode, which ensures that the active item will wrap to
+     * the other end of list when there are no more items in the given direction.
+     */
+    withWrap(shouldWrap = true) {
+        this.wrap = shouldWrap;
+        return this;
+    }
+    /**
+     * Sets the predicate function that determines which items should be skipped by the
+     * list key manager.
+     * @param predicate Function that determines whether the given item should be skipped.
+     */
+    skipPredicate(predicate) {
+        this.skipPredicateFn = predicate;
+        return this;
+    }
+    /**
+     * Configures whether the key manager should be able to move the selection vertically.
+     * @param enabled Whether vertical selection should be enabled.
+     */
+    withVerticalOrientation(enabled = true) {
+        this.vertical = enabled;
+        return this;
+    }
+    /**
+     * Configures the key manager to move the selection horizontally.
+     * Passing in `null` will disable horizontal movement.
+     * @param direction Direction in which the selection can be moved.
+     */
+    withHorizontalOrientation(direction) {
+        this.horizontal = direction;
+        return this;
+    }
+    /**
+     * Turns on typeahead mode which allows users to set the active item by typing.
+     * @param searchLetterIndex letter index for incremental search, if is -1 search is disabled
+     * @param debounceInterval Time to wait after the last keystroke before setting the active item.
+     */
+    withTypeAhead(debounceInterval = 200, searchLetterIndex = 0) {
+        if (this._items.length && this._items.some((item) => typeof item.getLabel !== 'function')) {
+            throw Error('ListKeyManager items in typeahead mode must implement the `getLabel` method.');
+        }
+        this.typeaheadSubscription.unsubscribe();
+        // Debounce the presses of non-navigational keys, collect the ones that correspond to letters and convert those
+        // letters back into a string. Afterwards find the first item that starts with that string and select it.
+        this.typeaheadSubscription = this.letterKeyStream
+            .pipe(tap((keyCode) => this.pressedLetters.push(keyCode)), debounceTime(debounceInterval), filter(() => this.pressedLetters.length > 0), map(() => this.pressedLetters.join('')))
+            .subscribe((inputString) => {
+            if (searchLetterIndex === -1) {
+                this.pressedLetters = [];
+                return;
+            }
+            const items = this._items.toArray();
+            // Start at 1 because we want to start searching at the item immediately
+            // following the current active item.
+            for (let i = 1; i < items.length + 1; i++) {
+                const index = (this._activeItemIndex + i) % items.length;
+                const item = items[index];
+                if (!item.disabled &&
+                    item.getLabel().toUpperCase().trim().indexOf(inputString) === searchLetterIndex) {
+                    this.setActiveItem(index);
+                    break;
+                }
+            }
+            this.pressedLetters = [];
+        });
+        return this;
+    }
+    /**
+     * Configures the key manager to activate the first and last items
+     * respectively when the Home or End key is pressed.
+     * @param enabled Whether pressing the Home or End key activates the first/last item.
+     */
+    withHomeAndEnd(enabled = true) {
+        this.homeAndEnd = enabled;
+        return this;
+    }
+    /**
+     * Sets the active item to the item at the index specified.
+     * @param item The index of the item to be set as active.
+     */
+    setActiveItem(item) {
+        this.previousActiveItemIndex = this._activeItemIndex;
+        this.updateActiveItem(item);
+        if (this._activeItemIndex !== this.previousActiveItemIndex) {
+            this.change.next(this._activeItemIndex);
+        }
+    }
+    /**
+     * Sets the active item depending on the key event passed in.
+     * @param event Keyboard event to be used for determining which element should be active.
+     */
+    onKeydown(event) {
+        const keyCode = event.keyCode;
+        const modifiers = ['altKey', 'ctrlKey', 'metaKey', 'shiftKey'];
+        const isModifierAllowed = modifiers.every((modifier) => {
+            return !event[modifier] || this.allowedModifierKeys.indexOf(modifier) > -1;
+        });
+        switch (keyCode) {
+            case TAB:
+                this.tabOut.next();
+                return;
+            case DOWN_ARROW:
+                if (this.vertical) {
+                    this.setNextItemActive();
+                    break;
+                }
+                else {
+                    return;
+                }
+            case UP_ARROW:
+                if (this.vertical) {
+                    this.setPreviousItemActive();
+                    break;
+                }
+                else {
+                    return;
+                }
+            case RIGHT_ARROW:
+                if (this.horizontal === 'ltr') {
+                    this.setNextItemActive();
+                    break;
+                }
+                else if (this.horizontal === 'rtl') {
+                    this.setPreviousItemActive();
+                    break;
+                }
+                else {
+                    return;
+                }
+            case LEFT_ARROW:
+                if (this.horizontal === 'ltr') {
+                    this.setPreviousItemActive();
+                    break;
+                }
+                else if (this.horizontal === 'rtl') {
+                    this.setNextItemActive();
+                    break;
+                }
+                else {
+                    return;
+                }
+            case HOME:
+                if (this.homeAndEnd && isModifierAllowed) {
+                    this.setFirstItemActive();
+                    break;
+                }
+                else {
+                    return;
+                }
+            case END:
+                if (this.homeAndEnd && isModifierAllowed) {
+                    this.setLastItemActive();
+                    break;
+                }
+                else {
+                    return;
+                }
+            default:
+                // Attempt to use the `event.key` which also maps it to the user's keyboard language,
+                // otherwise fall back to resolving alphanumeric characters via the keyCode.
+                if (event.key && event.key.length === 1) {
+                    this.letterKeyStream.next(event.key.toLocaleUpperCase());
+                }
+                else if ((keyCode >= A && keyCode <= Z) || (keyCode >= ZERO && keyCode <= NINE)) {
+                    this.letterKeyStream.next(String.fromCharCode(keyCode));
+                }
+                // Note that we return here, in order to avoid preventing
+                // the default action of non-navigational keys.
+                return;
+        }
+        this.pressedLetters = [];
+        event.preventDefault();
+    }
+    // Sets the active item to the first enabled item in the list.
+    setFirstItemActive() {
+        this.setActiveItemByIndex(0, 1);
+    }
+    // Sets the active item to the last enabled item in the list.
+    setLastItemActive() {
+        this.setActiveItemByIndex(this._items.length - 1, -1);
+    }
+    // Sets the active item to the next enabled item in the list.
+    setNextItemActive() {
+        if (this._activeItemIndex < 0) {
+            this.setFirstItemActive();
+        }
+        else {
+            this.setActiveItemByDelta(1);
+        }
+    }
+    // Sets the active item to a previous enabled item in the list.
+    setPreviousItemActive() {
+        if (this._activeItemIndex < 0 && this.wrap) {
+            this.setLastItemActive();
+        }
+        else {
+            this.setActiveItemByDelta(-1);
+        }
+    }
+    setNextPageItemActive(delta = this.scrollSize) {
+        const nextItemIndex = this._activeItemIndex + delta;
+        if (nextItemIndex >= this._items.length) {
+            this.setLastItemActive();
+        }
+        else {
+            this.setActiveItemByDelta(delta);
+        }
+    }
+    setPreviousPageItemActive(delta = this.scrollSize) {
+        const nextItemIndex = this._activeItemIndex - delta;
+        if (nextItemIndex <= 0) {
+            this.setFirstItemActive();
+        }
+        else {
+            this.setActiveItemByDelta(-delta);
+        }
+    }
+    updateActiveItem(item) {
+        const itemArray = this._items.toArray();
+        const index = typeof item === 'number' ? item : itemArray.indexOf(item);
+        this._activeItemIndex = index;
+        this._activeItem = itemArray[index];
+    }
+    /**
+     * This method sets the active item, given a list of items and the delta between the
+     * currently active item and the new active item. It will calculate differently
+     * depending on whether wrap mode is turned on.
+     */
+    setActiveItemByDelta(delta) {
+        if (this.wrap) {
+            this.setActiveInWrapMode(delta);
+        }
+        else {
+            this.setActiveInDefaultMode(delta);
+        }
+    }
+    /**
+     * Sets the active item properly given "wrap" mode. In other words, it will continue to move
+     * down the list until it finds an item that is not disabled, and it will wrap if it
+     * encounters either end of the list.
+     */
+    setActiveInWrapMode(delta) {
+        const items = this.getItemsArray();
+        for (let i = 1; i <= items.length; i++) {
+            const index = (this._activeItemIndex + delta * i + items.length) % items.length;
+            const item = items[index];
+            if (!this.skipPredicateFn(item)) {
+                this.setActiveItem(index);
+                return;
+            }
+        }
+    }
+    /**
+     * Sets the active item properly given the default mode. In other words, it will
+     * continue to move down the list until it finds an item that is not disabled. If
+     * it encounters either end of the list, it will stop and not wrap.
+     */
+    setActiveInDefaultMode(delta) {
+        this.setActiveItemByIndex(this._activeItemIndex + delta, delta);
+    }
+    /**
+     * Sets the active item to the first enabled item starting at the index specified. If the
+     * item is disabled, it will move in the fallbackDelta direction until it either
+     * finds an enabled item or encounters the end of the list.
+     */
+    setActiveItemByIndex(index, fallbackDelta) {
+        const items = this.getItemsArray();
+        if (!items[index]) {
+            return;
+        }
+        let curIndex = index;
+        while (this.skipPredicateFn(items[curIndex])) {
+            curIndex += fallbackDelta;
+            if (!items[curIndex]) {
+                return;
+            }
+        }
+        this.setActiveItem(curIndex);
+    }
+    /** Returns the items as an array. */
+    getItemsArray() {
+        return this._items instanceof QueryList ? this._items.toArray() : this._items;
+    }
+}
+
+class ActiveDescendantKeyManager extends ListKeyManager {
+    /**
+     * This method sets the active item to the item at the specified index.
+     * It also adds active styles to the newly active item and removes active
+     * styles from the previously active item.
+     */
+    setActiveItem(index) {
+        if (this.activeItem) {
+            this.activeItem.setInactiveStyles();
+        }
+        super.setActiveItem(index);
+        if (this.activeItem) {
+            this.activeItem.setActiveStyles();
+        }
+    }
+}
+
+class FocusKeyManager extends ListKeyManager {
+    constructor() {
+        super(...arguments);
+        this.origin = 'program';
+    }
+    setActiveItem(item) {
+        super.setActiveItem(item);
+        if (this.activeItem) {
+            this.activeItem.focus(this.origin);
+        }
+    }
+    /**
+     * Sets the focus origin that will be passed in to the items for any subsequent `focus` calls.
+     * @param origin Focus origin to be used when focusing items.
+     */
+    setFocusOrigin(origin) {
+        this.origin = origin;
+        return this;
+    }
+    getFocusOrigin() {
+        return this.origin;
+    }
+}
+
 /**
  * Koobiq components animation curves
  *
@@ -126,10 +681,10 @@ class KbqNormalizeWhitespace {
             $event.clipboardData?.setData('text', value?.replace(/\u2009/g, ' '));
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNormalizeWhitespace, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqNormalizeWhitespace, isStandalone: true, selector: "[kbqNormalizeWhitespace]", host: { listeners: { "copy": "onCopy($event)" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNormalizeWhitespace, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqNormalizeWhitespace, isStandalone: true, selector: "[kbqNormalizeWhitespace]", host: { listeners: { "copy": "onCopy($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNormalizeWhitespace, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNormalizeWhitespace, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqNormalizeWhitespace]',
@@ -194,6 +749,8 @@ class KbqColorDirective {
     get colorClassName() {
         return `kbq-${this._color}`;
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get color() {
         return this._color;
     }
@@ -218,104 +775,16 @@ class KbqColorDirective {
     setDefaultColor(color) {
         this.defaultColor = color;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqColorDirective, isStandalone: true, inputs: { color: "color" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqColorDirective, isStandalone: true, inputs: { color: "color" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqColorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqColorDirective, decorators: [{
             type: Directive
         }], ctorParameters: () => [], propDecorators: { color: [{
                 type: Input
             }] } });
 
-/**
- * An abstraction over the global `window` object.
- */
-const KBQ_WINDOW = new InjectionToken('[KBQ_WINDOW]', {
-    factory: () => {
-        const _window = inject(DOCUMENT).defaultView ||
-            // Backward compatibility for older Angular versions
-            // https://github.com/angular/universal/blob/main/docs/gotchas.md#strategy-3-shims
-            // eslint-disable-next-line no-restricted-globals
-            window;
-        if (!_window) {
-            throw new Error('[KBQ_WINDOW] window is not available.');
-        }
-        return _window;
-    }
-});
-
-/**
- * Injection token that configures whether the koobiq sanity checks are enabled.
- *
- * @deprecated No longer used and will be removed in next major release.
- *
- * @docs-private
- */
-const KBQ_SANITY_CHECKS = new InjectionToken('kbq-sanity-checks', {
-    providedIn: 'root',
-    factory: mcSanityChecksFactory
-});
-/**
- * @deprecated No longer used and will be removed in next major release.
- *
- * @docs-private
- */
-function mcSanityChecksFactory() {
-    return true;
-}
-/**
- * Module that captures anything that should be loaded and/or run for *all* Koobiq
- * components. This includes Bidi, etc.
- *
- * @deprecated No longer used and will be removed in next major release.
- *
- * @docs-private
- */
-class KbqCommonModule {
-    constructor(_sanityChecksEnabled) {
-        this._sanityChecksEnabled = _sanityChecksEnabled;
-        this.document = inject(DOCUMENT);
-        this.window = inject(KBQ_WINDOW);
-        // Whether we've done the global sanity checks (e.g. a theme is loaded, there is a doctype).
-        this.hasDoneGlobalChecks = false;
-        if (this.areChecksEnabled() && !this.hasDoneGlobalChecks) {
-            this.checkDoctypeIsDefined();
-            this.hasDoneGlobalChecks = true;
-        }
-    }
-    // Whether any sanity checks are enabled
-    areChecksEnabled() {
-        return this._sanityChecksEnabled && isDevMode() && !this.isTestEnv();
-    }
-    // Whether the code is running in tests.
-    isTestEnv() {
-        return !!(this.window && this.window['__jest__']);
-    }
-    checkDoctypeIsDefined() {
-        if (this.document && !this.document.doctype && isDevMode()) {
-            // eslint-disable-next-line no-console
-            console.warn('Current document does not have a doctype. This may cause ' +
-                'some koobiq components not to behave as expected.');
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqCommonModule, deps: [{ token: KBQ_SANITY_CHECKS, optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqCommonModule, imports: [BidiModule], exports: [BidiModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqCommonModule, imports: [BidiModule, BidiModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqCommonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [BidiModule],
-                    exports: [BidiModule]
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [KBQ_SANITY_CHECKS]
-                }] }] });
-
-// eslint-disable-next-line @typescript-eslint/ban-types
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 function mixinDisabled(base) {
     return class extends base {
         get disabled() {
@@ -415,14 +884,6 @@ const isElement = (value) => value instanceof Element;
 const isHtmlElementOrNull = (value) => {
     return isHtmlElement(value) || isNull(value);
 };
-/**
- * Will be removed in the next major release
- *
- * @deprecated Use `booleanAttribute` instead
- */
-function toBoolean(value) {
-    return value != null && `${value}` !== 'false';
-}
 const getNodesWithoutComments = (nodes) => {
     const COMMENT_NODE = 8;
     return Array.from(nodes).filter((node) => node.nodeType !== COMMENT_NODE);
@@ -446,20 +907,20 @@ class KbqHover {
         /**
          * Whether the element is hovered.
          */
-        this.hovered = toSignal(merge(fromEvent(this.element, 'mouseenter'), fromEvent(this.element, 'mouseleave')).pipe(map(({ type }) => type === 'mouseenter')), { initialValue: false });
+        this.hovered = toSignal(merge(fromEvent(this.element, 'mouseenter'), fromEvent(this.element, 'mouseleave')).pipe(map$1(({ type }) => type === 'mouseenter')), { initialValue: false });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqHover, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqHover, isStandalone: true, selector: "[kbqHover]", host: { properties: { "class.kbq-hovered": "hovered()" }, classAttribute: "kbq-hover" }, exportAs: ["kbqHover"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqHover, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqHover, isStandalone: true, selector: "[kbqHover]", host: { properties: { "class.kbq-hovered": "hovered()" }, classAttribute: "kbq-hover" }, exportAs: ["kbqHover"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqHover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqHover, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqHover]',
-                    exportAs: 'kbqHover',
                     host: {
                         class: 'kbq-hover',
                         '[class.kbq-hovered]': 'hovered()'
-                    }
+                    },
+                    exportAs: 'kbqHover'
                 }]
         }] });
 
@@ -478,10 +939,10 @@ class KbqReadStateDirective {
         }
         this.changeDetectorRef.markForCheck();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqReadStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqReadStateDirective, isStandalone: true, host: { listeners: { "mouseenter": "mouseenterHandler()", "mouseleave": "mouseleaveHandler()", "click": "read.next(true)" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqReadStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqReadStateDirective, isStandalone: true, host: { listeners: { "mouseenter": "mouseenterHandler()", "mouseleave": "mouseleaveHandler()", "click": "read.next(true)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqReadStateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqReadStateDirective, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -550,10 +1011,10 @@ class ShowOnFormSubmitErrorStateMatcher {
     isErrorState(control, form) {
         return !!(control?.invalid && form?.submitted);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ShowOnFormSubmitErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ShowOnFormSubmitErrorStateMatcher }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowOnFormSubmitErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowOnFormSubmitErrorStateMatcher }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ShowOnFormSubmitErrorStateMatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowOnFormSubmitErrorStateMatcher, decorators: [{
             type: Injectable
         }] });
 /**
@@ -567,10 +1028,10 @@ class ShowRequiredOnSubmitErrorStateMatcher {
             ? !!(control?.invalid && form?.submitted)
             : !!(control?.invalid && control.touched);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ShowRequiredOnSubmitErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ShowRequiredOnSubmitErrorStateMatcher }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowRequiredOnSubmitErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowRequiredOnSubmitErrorStateMatcher }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ShowRequiredOnSubmitErrorStateMatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowRequiredOnSubmitErrorStateMatcher, decorators: [{
             type: Injectable
         }] });
 /** Error state matcher that matches when a control is invalid and dirty or form is submitted. */
@@ -578,10 +1039,10 @@ class ShowOnControlDirtyErrorStateMatcher {
     isErrorState(control, form) {
         return !!(control?.invalid && (control.dirty || form?.submitted));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ShowOnControlDirtyErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ShowOnControlDirtyErrorStateMatcher }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowOnControlDirtyErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowOnControlDirtyErrorStateMatcher }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ShowOnControlDirtyErrorStateMatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ShowOnControlDirtyErrorStateMatcher, decorators: [{
             type: Injectable
         }] });
 /**
@@ -592,14 +1053,31 @@ class ErrorStateMatcher {
     isErrorState(control, form) {
         return !!(control?.invalid && (control.touched || form?.submitted));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ErrorStateMatcher, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ErrorStateMatcher, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ErrorStateMatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ErrorStateMatcher, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * An abstraction over the global `window` object.
+ */
+const KBQ_WINDOW = new InjectionToken('[KBQ_WINDOW]', {
+    factory: () => {
+        const _window = inject(DOCUMENT).defaultView ||
+            // Backward compatibility for older Angular versions
+            // https://github.com/angular/universal/blob/main/docs/gotchas.md#strategy-3-shims
+            // eslint-disable-next-line no-restricted-globals
+            window;
+        if (!_window) {
+            throw new Error('[KBQ_WINDOW] window is not available.');
+        }
+        return _window;
+    }
+});
+
 const INITIAL_PROPERTIES = {
     all: 'initial',
     position: 'absolute',
@@ -694,17 +1172,17 @@ class KbqFieldSizingContent {
         }
         return ruler.scrollWidth;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFieldSizingContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqFieldSizingContent, isStandalone: true, selector: "[kbqFieldSizingContent]", host: { classAttribute: "kbq-field-sizing-content" }, exportAs: ["kbqFieldSizingContent"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFieldSizingContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqFieldSizingContent, isStandalone: true, selector: "[kbqFieldSizingContent]", host: { classAttribute: "kbq-field-sizing-content" }, exportAs: ["kbqFieldSizingContent"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFieldSizingContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFieldSizingContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqFieldSizingContent]',
-                    exportAs: 'kbqFieldSizingContent',
                     host: {
                         class: 'kbq-field-sizing-content'
-                    }
+                    },
+                    exportAs: 'kbqFieldSizingContent'
                 }]
         }], ctorParameters: () => [] });
 
@@ -929,8 +1407,7 @@ const enUSLocaleData = {
         showPopUpNotifications: 'Show pop-up notifications',
         noNotifications: 'No notifications',
         failedToLoadNotifications: 'Failed to load notifications',
-        repeat: 'Repeat',
-        loadingMore: 'Loading more notifications'
+        repeat: 'Repeat'
     }
 };
 
@@ -1145,8 +1622,7 @@ const esLALocaleData = {
         showPopUpNotifications: 'Mostrar notificaciones emergentes',
         noNotifications: 'Sin notificaciones',
         failedToLoadNotifications: 'Error al cargar las notificaciones',
-        repeat: 'Repetir',
-        loadingMore: 'Cargando más notificaciones'
+        repeat: 'Repetir'
     }
 };
 
@@ -1361,8 +1837,7 @@ const ptBRLocaleData = {
         showPopUpNotifications: 'Mostrar notificações pop-up',
         noNotifications: 'Sem notificações',
         failedToLoadNotifications: 'Falha ao carregar notificações',
-        repeat: 'Repetir',
-        loadingMore: 'Carregando mais notificações'
+        repeat: 'Repetir'
     }
 };
 
@@ -1592,8 +2067,7 @@ const ruRULocaleData = {
         showPopUpNotifications: 'Показывать всплывающие уведомления',
         noNotifications: 'Нет уведомлений',
         failedToLoadNotifications: 'Не удалось загрузить уведомления',
-        repeat: 'Повторить',
-        loadingMore: 'Загрузка уведомлений'
+        repeat: 'Повторить'
     }
 };
 
@@ -1809,8 +2283,7 @@ const tkTMLocaleData = {
         showPopUpNotifications: 'Açylýan bildirişleri görkeziň',
         noNotifications: 'Duýduryş ýok',
         failedToLoadNotifications: 'Duýduryşlary ýükläp bilmedi',
-        repeat: 'Gaýtalama',
-        loadingMore: 'Duýduryşlar ýüklenýär'
+        repeat: 'Gaýtalama'
     }
 };
 
@@ -2052,10 +2525,12 @@ const kbqLocaleServiceLangAttrNameProvider = (attrName) => ({
     useValue: attrName
 });
 class KbqLocaleService {
-    constructor(id, localeData) {
+    constructor() {
         this.locales = {};
         this.document = inject(DOCUMENT);
         this.langAttrName = inject(KBQ_LOCALE_SERVICE_LANG_ATTR_NAME);
+        const id = inject(KBQ_LOCALE_ID, { optional: true });
+        const localeData = inject(KBQ_LOCALE_DATA, { optional: true });
         this.locales = localeData;
         this.id = id || KBQ_DEFAULT_LOCALE_ID;
         this.current = this.locales[this.id];
@@ -2075,23 +2550,13 @@ class KbqLocaleService {
     getParams(componentName) {
         return this.current[componentName];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqLocaleService, deps: [{ token: KBQ_LOCALE_ID, optional: true }, { token: KBQ_LOCALE_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqLocaleService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqLocaleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqLocaleService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqLocaleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqLocaleService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [KBQ_LOCALE_ID]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [KBQ_LOCALE_DATA]
-                }] }] });
+        }], ctorParameters: () => [] });
 // todo code below need refactor or delete in DS-3603
 /** @docs-private */
 const KBQ_DEFAULT_PRECISION_SEPARATOR = '.';
@@ -2171,13 +2636,13 @@ function checkAndNormalizeLocalizedNumber(num, locale) {
 }
 
 class KbqLocaleServiceModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqLocaleServiceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqLocaleServiceModule }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqLocaleServiceModule, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqLocaleServiceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqLocaleServiceModule }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqLocaleServiceModule, providers: [
             { provide: KBQ_LOCALE_SERVICE, useClass: KbqLocaleService }
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqLocaleServiceModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqLocaleServiceModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [
@@ -2187,21 +2652,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         }] });
 
 class DateFormatter extends DateFormatter$1 {
-    constructor(adapter, locale) {
+    constructor() {
+        const adapter = inject(DateAdapter);
+        const locale = inject(KBQ_DATE_LOCALE);
         super(adapter, locale);
-        this.adapter = adapter;
         this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
+        this.adapter = adapter;
         this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe((locale) => this.setLocale(locale));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DateFormatter, deps: [{ token: i1.DateAdapter }, { token: KBQ_DATE_LOCALE }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DateFormatter }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DateFormatter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DateFormatter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DateFormatter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DateFormatter, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.DateAdapter }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [KBQ_DATE_LOCALE]
-                }] }] });
+        }], ctorParameters: () => [] });
 
 class BaseFormatterPipe {
     constructor() {
@@ -2209,15 +2673,72 @@ class BaseFormatterPipe {
         this.formatter = inject((DateFormatter));
     }
 }
+/**
+ * Base class for impure date-formatter pipes that recompute their result
+ * whenever the active locale changes via `KbqLocaleService`.
+ *
+ * The base class owns:
+ * - a subscription to `KbqLocaleService.changes` that invalidates the cache and
+ *   marks the host for check (the same approach the built-in `AsyncPipe` uses);
+ * - caching by `(value, args, localeId)`, so the impure `transform()` only does
+ *   real work when an input or the active locale actually changed.
+ *
+ * Subclasses implement `format()`, which receives the raw pipe input(s) — a
+ * single value for absolute/relative pipes, or a `[from, to]` tuple for range
+ * pipes — deserializes via `this.adapter` and calls the matching
+ * `DateFormatter` method.
+ *
+ * @docs-private
+ */
+class BaseLocaleAwareFormatterPipe extends BaseFormatterPipe {
+    constructor() {
+        super();
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
+        this.cachedValue = null;
+        this.cachedArgs = [];
+        this.cachedLocaleId = null;
+        this.cachedResult = '';
+        this.hasCache = false;
+        this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(() => {
+            this.hasCache = false;
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    transform(value, ...args) {
+        const currentLocaleId = this.localeService?.id ?? null;
+        if (this.hasCache &&
+            value === this.cachedValue &&
+            currentLocaleId === this.cachedLocaleId &&
+            this.argsEqual(args)) {
+            return this.cachedResult;
+        }
+        this.cachedResult = this.format(value, ...args);
+        this.cachedValue = value;
+        this.cachedArgs = args;
+        this.cachedLocaleId = currentLocaleId;
+        this.hasCache = true;
+        return this.cachedResult;
+    }
+    argsEqual(args) {
+        if (args.length !== this.cachedArgs.length)
+            return false;
+        for (let i = 0; i < args.length; i++) {
+            if (args[i] !== this.cachedArgs[i])
+                return false;
+        }
+        return true;
+    }
+}
 class AbsoluteDateFormatterPipe extends BaseFormatterPipe {
     transform(value, currYear) {
         const date = this.adapter.deserialize(value);
         return date ? this.formatter.absoluteLongDate(date, currYear) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteDateFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteDateFormatterPipe, isStandalone: true, name: "absoluteLongDate" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateFormatterPipe, isStandalone: true, name: "absoluteLongDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteDateFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'absoluteLongDate'
@@ -2228,10 +2749,10 @@ class AbsoluteDateFormatterImpurePipe extends AbsoluteDateFormatterPipe {
     transform(value, currYear) {
         return super.transform(value, currYear);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteDateFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteDateFormatterImpurePipe, isStandalone: true, name: "absoluteLongDateImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateFormatterImpurePipe, isStandalone: true, name: "absoluteLongDateImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteDateFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'absoluteLongDateImpurePipe',
@@ -2243,10 +2764,10 @@ class AbsoluteDateTimeFormatterPipe extends BaseFormatterPipe {
         const date = this.adapter.deserialize(value);
         return date ? this.formatter.absoluteLongDateTime(date, options) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteDateTimeFormatterPipe, isStandalone: true, name: "absoluteLongDateTime" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateTimeFormatterPipe, isStandalone: true, name: "absoluteLongDateTime" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteDateTimeFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateTimeFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'absoluteLongDateTime'
@@ -2257,10 +2778,10 @@ class AbsoluteDateTimeFormatterImpurePipe extends AbsoluteDateTimeFormatterPipe
     transform(value, options) {
         return super.transform(value, options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteDateTimeFormatterImpurePipe, isStandalone: true, name: "absoluteLongDateTimeImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateTimeFormatterImpurePipe, isStandalone: true, name: "absoluteLongDateTimeImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteDateTimeFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateTimeFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'absoluteLongDateTimeImpurePipe',
@@ -2272,10 +2793,10 @@ class AbsoluteDateShortFormatterPipe extends BaseFormatterPipe {
         const date = this.adapter.deserialize(value);
         return date ? this.formatter.absoluteShortDate(date, currYear) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteDateShortFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteDateShortFormatterPipe, isStandalone: true, name: "absoluteShortDate" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateShortFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateShortFormatterPipe, isStandalone: true, name: "absoluteShortDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteDateShortFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateShortFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'absoluteShortDate'
@@ -2286,10 +2807,10 @@ class AbsoluteDateShortFormatterImpurePipe extends AbsoluteDateShortFormatterPip
     transform(value, currYear) {
         return super.transform(value, currYear);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteDateShortFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteDateShortFormatterImpurePipe, isStandalone: true, name: "absoluteShortDateImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateShortFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateShortFormatterImpurePipe, isStandalone: true, name: "absoluteShortDateImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteDateShortFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteDateShortFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'absoluteShortDateImpurePipe',
@@ -2301,10 +2822,10 @@ class AbsoluteShortDateTimeFormatterPipe extends BaseFormatterPipe {
         const date = this.adapter.deserialize(value);
         return date ? this.formatter.absoluteShortDateTime(date, options) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteShortDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteShortDateTimeFormatterPipe, isStandalone: true, name: "absoluteShortDateTime" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteShortDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteShortDateTimeFormatterPipe, isStandalone: true, name: "absoluteShortDateTime" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteShortDateTimeFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteShortDateTimeFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'absoluteShortDateTime'
@@ -2315,10 +2836,10 @@ class AbsoluteShortDateTimeFormatterImpurePipe extends AbsoluteShortDateTimeForm
     transform(value, options) {
         return super.transform(value, options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteShortDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteShortDateTimeFormatterImpurePipe, isStandalone: true, name: "absoluteShortDateTimeImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteShortDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteShortDateTimeFormatterImpurePipe, isStandalone: true, name: "absoluteShortDateTimeImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AbsoluteShortDateTimeFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AbsoluteShortDateTimeFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'absoluteShortDateTimeImpurePipe',
@@ -2330,10 +2851,10 @@ class RelativeDateFormatterPipe extends BaseFormatterPipe {
         const date = this.adapter.deserialize(value);
         return date ? this.formatter.relativeLongDate(date) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RelativeDateFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: RelativeDateFormatterPipe, isStandalone: true, name: "relativeLongDate" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateFormatterPipe, isStandalone: true, name: "relativeLongDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RelativeDateFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'relativeLongDate'
@@ -2344,10 +2865,10 @@ class RelativeDateFormatterImpurePipe extends RelativeDateFormatterPipe {
     transform(value) {
         return super.transform(value);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RelativeDateFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: RelativeDateFormatterImpurePipe, isStandalone: true, name: "relativeLongDateImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateFormatterImpurePipe, isStandalone: true, name: "relativeLongDateImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RelativeDateFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'relativeLongDateImpurePipe',
@@ -2359,10 +2880,10 @@ class RelativeDateTimeFormatterPipe extends BaseFormatterPipe {
         const date = this.adapter.deserialize(value);
         return date ? this.formatter.relativeLongDateTime(date, options) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RelativeDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: RelativeDateTimeFormatterPipe, isStandalone: true, name: "relativeLongDateTime" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateTimeFormatterPipe, isStandalone: true, name: "relativeLongDateTime" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RelativeDateTimeFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateTimeFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'relativeLongDateTime'
@@ -2373,10 +2894,10 @@ class RelativeDateTimeFormatterImpurePipe extends RelativeDateTimeFormatterPipe
     transform(value, options) {
         return super.transform(value, options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RelativeDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: RelativeDateTimeFormatterImpurePipe, isStandalone: true, name: "relativeLongDateTimeImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateTimeFormatterImpurePipe, isStandalone: true, name: "relativeLongDateTimeImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RelativeDateTimeFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeDateTimeFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'relativeLongDateTimeImpurePipe',
@@ -2388,10 +2909,10 @@ class RelativeShortDateFormatterPipe extends BaseFormatterPipe {
         const date = this.adapter.deserialize(value);
         return date ? this.formatter.relativeShortDate(date) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RelativeShortDateFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: RelativeShortDateFormatterPipe, isStandalone: true, name: "relativeShortDate" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateFormatterPipe, isStandalone: true, name: "relativeShortDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RelativeShortDateFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'relativeShortDate'
@@ -2402,10 +2923,10 @@ class RelativeShortDateFormatterImpurePipe extends RelativeShortDateFormatterPip
     transform(value) {
         return super.transform(value);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RelativeShortDateFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: RelativeShortDateFormatterImpurePipe, isStandalone: true, name: "relativeShortDateImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateFormatterImpurePipe, isStandalone: true, name: "relativeShortDateImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RelativeShortDateFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'relativeShortDateImpurePipe',
@@ -2417,10 +2938,10 @@ class RelativeShortDateTimeFormatterPipe extends BaseFormatterPipe {
         const date = this.adapter.deserialize(value);
         return date ? this.formatter.relativeShortDateTime(date, options) : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RelativeShortDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: RelativeShortDateTimeFormatterPipe, isStandalone: true, name: "relativeShortDateTime" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateTimeFormatterPipe, isStandalone: true, name: "relativeShortDateTime" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RelativeShortDateTimeFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateTimeFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'relativeShortDateTime'
@@ -2431,10 +2952,10 @@ class RelativeShortDateTimeFormatterImpurePipe extends RelativeShortDateTimeForm
     transform(value, options) {
         return super.transform(value, options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RelativeShortDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: RelativeShortDateTimeFormatterImpurePipe, isStandalone: true, name: "relativeShortDateTimeImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateTimeFormatterImpurePipe, isStandalone: true, name: "relativeShortDateTimeImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RelativeShortDateTimeFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RelativeShortDateTimeFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'relativeShortDateTimeImpurePipe',
@@ -2447,10 +2968,10 @@ class RangeDateFormatterPipe extends BaseFormatterPipe {
         const date2 = this.adapter.deserialize(value2);
         return this.formatter.rangeLongDate(date1, date2);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RangeDateFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: RangeDateFormatterPipe, isStandalone: true, name: "rangeLongDate" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeDateFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeDateFormatterPipe, isStandalone: true, name: "rangeLongDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RangeDateFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeDateFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rangeLongDate'
@@ -2461,10 +2982,10 @@ class RangeDateFormatterImpurePipe extends RangeDateFormatterPipe {
     transform([value1, value2]) {
         return super.transform([value1, value2]);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RangeDateFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: RangeDateFormatterImpurePipe, isStandalone: true, name: "rangeLongDateImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeDateFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeDateFormatterImpurePipe, isStandalone: true, name: "rangeLongDateImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RangeDateFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeDateFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rangeLongDateImpurePipe',
@@ -2477,10 +2998,10 @@ class RangeShortDateFormatterPipe extends BaseFormatterPipe {
         const date2 = this.adapter.deserialize(value2);
         return this.formatter.rangeShortDate(date1, date2);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RangeShortDateFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: RangeShortDateFormatterPipe, isStandalone: true, name: "rangeShortDate" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateFormatterPipe, isStandalone: true, name: "rangeShortDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RangeShortDateFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rangeShortDate'
@@ -2491,10 +3012,10 @@ class RangeShortDateFormatterImpurePipe extends RangeShortDateFormatterPipe {
     transform([value1, value2]) {
         return super.transform([value1, value2]);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RangeShortDateFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: RangeShortDateFormatterImpurePipe, isStandalone: true, name: "rangeShortDateImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateFormatterImpurePipe, isStandalone: true, name: "rangeShortDateImpurePipe", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RangeShortDateFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rangeShortDateImpurePipe',
@@ -2507,10 +3028,10 @@ class RangeDateTimeFormatterPipe extends BaseFormatterPipe {
         const date2 = this.adapter.deserialize(value2);
         return this.formatter.rangeLongDateTime(date1, date2, options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RangeDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: RangeDateTimeFormatterPipe, isStandalone: true, name: "rangeLongDateTime" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeDateTimeFormatterPipe, isStandalone: true, name: "rangeLongDateTime" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RangeDateTimeFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeDateTimeFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rangeLongDateTime'
@@ -2521,86 +3042,319 @@ class RangeDateTimeFormatterImpurePipe extends RangeDateTimeFormatterPipe {
     transform([value1, value2], options) {
         return super.transform([value1, value2], options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RangeDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: RangeDateTimeFormatterImpurePipe, isStandalone: true, name: "rangeLongDateTimeImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeDateTimeFormatterImpurePipe, isStandalone: true, name: "rangeLongDateTimeImpurePipe", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeDateTimeFormatterImpurePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'rangeLongDateTimeImpurePipe',
+                    pure: false
+                }]
+        }] });
+class RangeMiddleDateTimeFormatterPipe extends BaseFormatterPipe {
+    transform([value1, value2], options) {
+        const date1 = this.adapter.deserialize(value1);
+        const date2 = this.adapter.deserialize(value2);
+        return this.formatter.rangeMiddleDateTime(date1, date2, options);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeMiddleDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeMiddleDateTimeFormatterPipe, isStandalone: true, name: "rangeMiddleDateTime" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeMiddleDateTimeFormatterPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'rangeMiddleDateTime'
+                }]
+        }] });
+// eslint-disable-next-line @angular-eslint/use-pipe-transform-interface
+class RangeMiddleDateTimeFormatterImpurePipe extends RangeMiddleDateTimeFormatterPipe {
+    transform([value1, value2], options) {
+        return super.transform([value1, value2], options);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeMiddleDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeMiddleDateTimeFormatterImpurePipe, isStandalone: true, name: "rangeMiddleDateTimeImpurePipe", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeMiddleDateTimeFormatterImpurePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'rangeMiddleDateTimeImpurePipe',
+                    pure: false
+                }]
+        }] });
+class RangeShortDateTimeFormatterPipe extends BaseFormatterPipe {
+    transform([value1, value2], options) {
+        const date1 = this.adapter.deserialize(value1);
+        const date2 = this.adapter.deserialize(value2);
+        return this.formatter.rangeShortDateTime(date1, date2, options);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateTimeFormatterPipe, isStandalone: true, name: "rangeShortDateTime" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateTimeFormatterPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'rangeShortDateTime'
+                }]
+        }] });
+// eslint-disable-next-line @angular-eslint/use-pipe-transform-interface
+class RangeShortDateTimeFormatterImpurePipe extends RangeShortDateTimeFormatterPipe {
+    transform([value1, value2], options) {
+        return super.transform([value1, value2], options);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateTimeFormatterImpurePipe, isStandalone: true, name: "rangeShortDateTimeImpurePipe", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateTimeFormatterImpurePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'rangeShortDateTimeImpurePipe',
+                    pure: false
+                }]
+        }] });
+// Impure pipes that recompute on `KbqLocaleService` locale changes (see `BaseLocaleAwareFormatterPipe`).
+// Prefer these `kbq`-prefixed pipes when the locale can change at runtime; the pure pipes above are
+// kept for static usages and backward compatibility.
+class KbqAbsoluteLongDatePipe extends BaseLocaleAwareFormatterPipe {
+    transform(value, currYear) {
+        return super.transform(value, currYear);
+    }
+    format(value, currYear) {
+        const date = this.adapter.deserialize(value);
+        return date ? this.formatter.absoluteLongDate(date, currYear) : '';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteLongDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteLongDatePipe, isStandalone: true, name: "kbqAbsoluteLongDate", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteLongDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kbqAbsoluteLongDate',
+                    pure: false
+                }]
+        }] });
+class KbqAbsoluteShortDatePipe extends BaseLocaleAwareFormatterPipe {
+    transform(value, currYear) {
+        return super.transform(value, currYear);
+    }
+    format(value, currYear) {
+        const date = this.adapter.deserialize(value);
+        return date ? this.formatter.absoluteShortDate(date, currYear) : '';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteShortDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteShortDatePipe, isStandalone: true, name: "kbqAbsoluteShortDate", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteShortDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kbqAbsoluteShortDate',
+                    pure: false
+                }]
+        }] });
+class KbqAbsoluteLongDateTimePipe extends BaseLocaleAwareFormatterPipe {
+    transform(value, options) {
+        return super.transform(value, options);
+    }
+    format(value, options) {
+        const date = this.adapter.deserialize(value);
+        return date ? this.formatter.absoluteLongDateTime(date, options) : '';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteLongDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteLongDateTimePipe, isStandalone: true, name: "kbqAbsoluteLongDateTime", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteLongDateTimePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kbqAbsoluteLongDateTime',
+                    pure: false
+                }]
+        }] });
+class KbqAbsoluteShortDateTimePipe extends BaseLocaleAwareFormatterPipe {
+    transform(value, options) {
+        return super.transform(value, options);
+    }
+    format(value, options) {
+        const date = this.adapter.deserialize(value);
+        return date ? this.formatter.absoluteShortDateTime(date, options) : '';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteShortDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteShortDateTimePipe, isStandalone: true, name: "kbqAbsoluteShortDateTime", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAbsoluteShortDateTimePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kbqAbsoluteShortDateTime',
+                    pure: false
+                }]
+        }] });
+class KbqRelativeLongDatePipe extends BaseLocaleAwareFormatterPipe {
+    transform(value) {
+        return super.transform(value);
+    }
+    format(value) {
+        const date = this.adapter.deserialize(value);
+        return date ? this.formatter.relativeLongDate(date) : '';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeLongDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeLongDatePipe, isStandalone: true, name: "kbqRelativeLongDate", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeLongDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kbqRelativeLongDate',
+                    pure: false
+                }]
+        }] });
+class KbqRelativeShortDatePipe extends BaseLocaleAwareFormatterPipe {
+    transform(value) {
+        return super.transform(value);
+    }
+    format(value) {
+        const date = this.adapter.deserialize(value);
+        return date ? this.formatter.relativeShortDate(date) : '';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeShortDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeShortDatePipe, isStandalone: true, name: "kbqRelativeShortDate", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeShortDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kbqRelativeShortDate',
+                    pure: false
+                }]
+        }] });
+class KbqRelativeLongDateTimePipe extends BaseLocaleAwareFormatterPipe {
+    transform(value, options) {
+        return super.transform(value, options);
+    }
+    format(value, options) {
+        const date = this.adapter.deserialize(value);
+        return date ? this.formatter.relativeLongDateTime(date, options) : '';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeLongDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeLongDateTimePipe, isStandalone: true, name: "kbqRelativeLongDateTime", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeLongDateTimePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kbqRelativeLongDateTime',
+                    pure: false
+                }]
+        }] });
+class KbqRelativeShortDateTimePipe extends BaseLocaleAwareFormatterPipe {
+    transform(value, options) {
+        return super.transform(value, options);
+    }
+    format(value, options) {
+        const date = this.adapter.deserialize(value);
+        return date ? this.formatter.relativeShortDateTime(date, options) : '';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeShortDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeShortDateTimePipe, isStandalone: true, name: "kbqRelativeShortDateTime", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRelativeShortDateTimePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kbqRelativeShortDateTime',
+                    pure: false
+                }]
+        }] });
+class KbqRangeLongDatePipe extends BaseLocaleAwareFormatterPipe {
+    transform(value) {
+        return super.transform(value);
+    }
+    format([value1, value2]) {
+        const date1 = this.adapter.deserialize(value1);
+        const date2 = this.adapter.deserialize(value2);
+        return this.formatter.rangeLongDate(date1, date2);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeLongDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeLongDatePipe, isStandalone: true, name: "kbqRangeLongDate", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RangeDateTimeFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeLongDatePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'rangeLongDateTimeImpurePipe',
+                    name: 'kbqRangeLongDate',
                     pure: false
                 }]
         }] });
-class RangeMiddleDateTimeFormatterPipe extends BaseFormatterPipe {
-    transform([value1, value2], options) {
+class KbqRangeShortDatePipe extends BaseLocaleAwareFormatterPipe {
+    transform(value) {
+        return super.transform(value);
+    }
+    format([value1, value2]) {
         const date1 = this.adapter.deserialize(value1);
         const date2 = this.adapter.deserialize(value2);
-        return this.formatter.rangeMiddleDateTime(date1, date2, options);
+        return this.formatter.rangeShortDate(date1, date2);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RangeMiddleDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: RangeMiddleDateTimeFormatterPipe, isStandalone: true, name: "rangeMiddleDateTime" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeShortDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeShortDatePipe, isStandalone: true, name: "kbqRangeShortDate", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RangeMiddleDateTimeFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeShortDatePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'rangeMiddleDateTime'
+                    name: 'kbqRangeShortDate',
+                    pure: false
                 }]
         }] });
-// eslint-disable-next-line @angular-eslint/use-pipe-transform-interface
-class RangeMiddleDateTimeFormatterImpurePipe extends RangeMiddleDateTimeFormatterPipe {
-    transform([value1, value2], options) {
-        return super.transform([value1, value2], options);
+class KbqRangeLongDateTimePipe extends BaseLocaleAwareFormatterPipe {
+    transform(value, options) {
+        return super.transform(value, options);
+    }
+    format([value1, value2], options) {
+        const date1 = this.adapter.deserialize(value1);
+        const date2 = this.adapter.deserialize(value2);
+        return this.formatter.rangeLongDateTime(date1, date2, options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RangeMiddleDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: RangeMiddleDateTimeFormatterImpurePipe, isStandalone: true, name: "rangeMiddleDateTimeImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeLongDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeLongDateTimePipe, isStandalone: true, name: "kbqRangeLongDateTime", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RangeMiddleDateTimeFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeLongDateTimePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'rangeMiddleDateTimeImpurePipe',
+                    name: 'kbqRangeLongDateTime',
                     pure: false
                 }]
         }] });
-class RangeShortDateTimeFormatterPipe extends BaseFormatterPipe {
-    transform([value1, value2], options) {
+class KbqRangeMiddleDateTimePipe extends BaseLocaleAwareFormatterPipe {
+    transform(value, options) {
+        return super.transform(value, options);
+    }
+    format([value1, value2], options) {
         const date1 = this.adapter.deserialize(value1);
         const date2 = this.adapter.deserialize(value2);
-        return this.formatter.rangeShortDateTime(date1, date2, options);
+        return this.formatter.rangeMiddleDateTime(date1, date2, options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RangeShortDateTimeFormatterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: RangeShortDateTimeFormatterPipe, isStandalone: true, name: "rangeShortDateTime" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeMiddleDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeMiddleDateTimePipe, isStandalone: true, name: "kbqRangeMiddleDateTime", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RangeShortDateTimeFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeMiddleDateTimePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'rangeShortDateTime'
+                    name: 'kbqRangeMiddleDateTime',
+                    pure: false
                 }]
         }] });
-// eslint-disable-next-line @angular-eslint/use-pipe-transform-interface
-class RangeShortDateTimeFormatterImpurePipe extends RangeShortDateTimeFormatterPipe {
-    transform([value1, value2], options) {
-        return super.transform([value1, value2], options);
+class KbqRangeShortDateTimePipe extends BaseLocaleAwareFormatterPipe {
+    transform(value, options) {
+        return super.transform(value, options);
+    }
+    format([value1, value2], options) {
+        const date1 = this.adapter.deserialize(value1);
+        const date2 = this.adapter.deserialize(value2);
+        return this.formatter.rangeShortDateTime(date1, date2, options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RangeShortDateTimeFormatterImpurePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: RangeShortDateTimeFormatterImpurePipe, isStandalone: true, name: "rangeShortDateTimeImpurePipe", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeShortDateTimePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeShortDateTimePipe, isStandalone: true, name: "kbqRangeShortDateTime", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RangeShortDateTimeFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRangeShortDateTimePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'rangeShortDateTimeImpurePipe',
+                    name: 'kbqRangeShortDateTime',
                     pure: false
                 }]
         }] });
 
-/**
- * @deprecated Will be removed in next major release. Use `KbqMeasurementSystem` instead.
- * @docs-private
- */
-var MeasurementSystem;
-(function (MeasurementSystem) {
-    MeasurementSystem["SI"] = "SI";
-    MeasurementSystem["IEC"] = "IEC";
-})(MeasurementSystem || (MeasurementSystem = {}));
 /**
  * Available unit systems for file size formatting.
  * - SI (Metric): 1 KB = 1000 bytes
@@ -2706,10 +3460,10 @@ function parseDigitsInfo(digitsInfo) {
     return result;
 }
 class KbqDecimalPipe {
-    constructor(id, localeService, options) {
-        this.id = id;
-        this.localeService = localeService;
-        this.options = options;
+    constructor() {
+        this.id = inject(KBQ_LOCALE_ID, { optional: true });
+        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
+        this.options = inject(KBQ_NUMBER_FORMATTER_OPTIONS, { optional: true });
         this.options = this.options || KBQ_NUMBER_FORMATTER_DEFAULT_OPTIONS;
         this.localeService?.changes.subscribe((newId) => (this.id = newId));
     }
@@ -2756,11 +3510,11 @@ class KbqDecimalPipe {
             grouping === undefined &&
             Math.abs(value) < defaultValueForGroupingInRULocale);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDecimalPipe, deps: [{ token: KBQ_LOCALE_ID, optional: true }, { token: KBQ_LOCALE_SERVICE, optional: true }, { token: KBQ_NUMBER_FORMATTER_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqDecimalPipe, isStandalone: true, name: "kbqNumber", pure: false }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDecimalPipe, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDecimalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqDecimalPipe, isStandalone: true, name: "kbqNumber", pure: false }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDecimalPipe, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDecimalPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDecimalPipe, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }, {
@@ -2769,27 +3523,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                     name: 'kbqNumber',
                     pure: false
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [KBQ_LOCALE_ID]
-                }] }, { type: KbqLocaleService, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [KBQ_LOCALE_SERVICE]
-                }] }, { type: ParsedDigitsInfo, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [KBQ_NUMBER_FORMATTER_OPTIONS]
-                }] }] });
+        }], ctorParameters: () => [] });
 class KbqTableNumberPipe {
-    constructor(id, localeService, options) {
-        this.id = id;
-        this.localeService = localeService;
-        this.options = options;
+    constructor() {
+        this.id = inject(KBQ_LOCALE_ID, { optional: true });
+        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
+        this.options = inject(KBQ_NUMBER_FORMATTER_OPTIONS, { optional: true });
         this.options = this.options || KBQ_NUMBER_FORMATTER_DEFAULT_OPTIONS;
         this.localeService?.changes.subscribe((newId) => (this.id = newId));
     }
@@ -2828,11 +3567,11 @@ class KbqTableNumberPipe {
             throw Error(`InvalidPipeArgument: KbqTableNumberPipe for pipe '${JSON.stringify(error.message)}'`);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTableNumberPipe, deps: [{ token: KBQ_LOCALE_ID, optional: true }, { token: KBQ_LOCALE_SERVICE, optional: true }, { token: KBQ_NUMBER_FORMATTER_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqTableNumberPipe, isStandalone: true, name: "kbqTableNumber", pure: false }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTableNumberPipe, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTableNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqTableNumberPipe, isStandalone: true, name: "kbqTableNumber", pure: false }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTableNumberPipe, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTableNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTableNumberPipe, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }, {
@@ -2841,29 +3580,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                     name: 'kbqTableNumber',
                     pure: false
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [KBQ_LOCALE_ID]
-                }] }, { type: KbqLocaleService, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [KBQ_LOCALE_SERVICE]
-                }] }, { type: ParsedDigitsInfo, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [KBQ_NUMBER_FORMATTER_OPTIONS]
-                }] }] });
+        }], ctorParameters: () => [] });
 function isWithin(startRange, endRange, valueToCheck) {
     return startRange <= valueToCheck && valueToCheck < endRange;
 }
 class KbqRoundDecimalPipe {
-    constructor(id, localeService) {
-        this.id = id;
-        this.localeService = localeService;
+    constructor() {
+        this.id = inject(KBQ_LOCALE_ID, { optional: true });
+        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
         this.localeService?.changes.subscribe((newId) => (this.id = newId));
     }
     transform(value, locale) {
@@ -2948,11 +3672,11 @@ class KbqRoundDecimalPipe {
         });
         return currentUnit;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqRoundDecimalPipe, deps: [{ token: KBQ_LOCALE_ID, optional: true }, { token: KBQ_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqRoundDecimalPipe, isStandalone: true, name: "kbqRoundNumber", pure: false }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqRoundDecimalPipe, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRoundDecimalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqRoundDecimalPipe, isStandalone: true, name: "kbqRoundNumber", pure: false }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRoundDecimalPipe, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqRoundDecimalPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRoundDecimalPipe, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }, {
@@ -2961,49 +3685,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                     name: 'kbqRoundNumber',
                     pure: false
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [KBQ_LOCALE_ID]
-                }] }, { type: KbqLocaleService, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [KBQ_LOCALE_SERVICE]
-                }] }] });
+        }], ctorParameters: () => [] });
 
 const KBQ_INVALID_VALUE_ERROR = 'Argument "value" must be a finite number!';
 /**
- * @deprecated Will be removed in next major release. Use `getFormattedSizeParts` instead.
- * @docs-private
+ * Converts a byte value into locale-independent file size parts: numeric value and unit abbreviation.
+ *
+ * @param value - size in bytes.
+ * @param system - unit system defining abbreviations and base scaling (SI/IEC).
+ * @returns Object with the formatted size info.
+ *
+ * @example
+ * getFormattedSizeParts(1500, 'SI'); // { value: "1.50", unit: "KB" }
  */
-const formatDataSize = (value, precision, system) => {
+function getFormattedSizeParts(value, system) {
     const { result, unit } = getHumanizedBytes(value, system);
-    let volume;
-    if (system.abbreviations[0] === unit) {
-        volume = result.toString();
-    }
-    else {
-        volume = result.toFixed(precision).replace(/\./g, ',');
-    }
-    return {
-        value: volume,
-        unit
-    };
-};
-function getFormattedSizeParts(value, _precision, system) {
-    let resolvedSystem = null;
-    if (arguments.length === 2 && typeof _precision === 'object') {
-        resolvedSystem = _precision;
-    }
-    if (arguments.length === 3 && typeof _precision === 'number' && system) {
-        resolvedSystem = system;
-    }
-    if (!resolvedSystem) {
-        throw new Error('Unexpected arguments size');
-    }
-    const { result, unit } = getHumanizedBytes(value, resolvedSystem);
     return {
         value: result.toString(),
         unit
@@ -3062,10 +3758,10 @@ class KbqDataSizePipe {
         const formattedValue = this.numberPipe?.transform(value, `1.0-${precision}`, locale) || value;
         return formattedValue ? `${formattedValue}${this.nonBreakingSpace}${unit}` : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDataSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqDataSizePipe, isStandalone: true, name: "kbqDataSize", pure: false }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDataSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqDataSizePipe, isStandalone: true, name: "kbqDataSize", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDataSizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDataSizePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'kbqDataSize',
@@ -3074,8 +3770,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         }], ctorParameters: () => [] });
 
 class KbqFormattersModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFormattersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqFormattersModule, imports: [AbsoluteDateFormatterPipe,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFormattersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqFormattersModule, imports: [AbsoluteDateFormatterPipe,
             AbsoluteDateTimeFormatterPipe,
             AbsoluteDateShortFormatterPipe,
             AbsoluteShortDateTimeFormatterPipe,
@@ -3101,6 +3797,19 @@ class KbqFormattersModule {
             RangeDateTimeFormatterImpurePipe,
             RangeShortDateTimeFormatterImpurePipe,
             RangeMiddleDateTimeFormatterImpurePipe,
+            KbqAbsoluteLongDatePipe,
+            KbqAbsoluteLongDateTimePipe,
+            KbqAbsoluteShortDatePipe,
+            KbqAbsoluteShortDateTimePipe,
+            KbqRelativeLongDatePipe,
+            KbqRelativeLongDateTimePipe,
+            KbqRelativeShortDatePipe,
+            KbqRelativeShortDateTimePipe,
+            KbqRangeLongDatePipe,
+            KbqRangeLongDateTimePipe,
+            KbqRangeMiddleDateTimePipe,
+            KbqRangeShortDatePipe,
+            KbqRangeShortDateTimePipe,
             KbqDataSizePipe,
             KbqDecimalPipe,
             KbqRoundDecimalPipe,
@@ -3133,10 +3842,23 @@ class KbqFormattersModule {
             RangeDateTimeFormatterImpurePipe,
             RangeShortDateTimeFormatterImpurePipe,
             RangeMiddleDateTimeFormatterImpurePipe,
+            KbqAbsoluteLongDatePipe,
+            KbqAbsoluteLongDateTimePipe,
+            KbqAbsoluteShortDatePipe,
+            KbqAbsoluteShortDateTimePipe,
+            KbqRelativeLongDatePipe,
+            KbqRelativeLongDateTimePipe,
+            KbqRelativeShortDatePipe,
+            KbqRelativeShortDateTimePipe,
+            KbqRangeLongDatePipe,
+            KbqRangeLongDateTimePipe,
+            KbqRangeMiddleDateTimePipe,
+            KbqRangeShortDatePipe,
+            KbqRangeShortDateTimePipe,
             KbqDataSizePipe] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFormattersModule, providers: [{ provide: DateFormatter, deps: [DateAdapter, KBQ_DATE_LOCALE] }] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFormattersModule, providers: [DateFormatter] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFormattersModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFormattersModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3166,11 +3888,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         RangeDateTimeFormatterImpurePipe,
                         RangeShortDateTimeFormatterImpurePipe,
                         RangeMiddleDateTimeFormatterImpurePipe,
+                        KbqAbsoluteLongDatePipe,
+                        KbqAbsoluteLongDateTimePipe,
+                        KbqAbsoluteShortDatePipe,
+                        KbqAbsoluteShortDateTimePipe,
+                        KbqRelativeLongDatePipe,
+                        KbqRelativeLongDateTimePipe,
+                        KbqRelativeShortDatePipe,
+                        KbqRelativeShortDateTimePipe,
+                        KbqRangeLongDatePipe,
+                        KbqRangeLongDateTimePipe,
+                        KbqRangeMiddleDateTimePipe,
+                        KbqRangeShortDatePipe,
+                        KbqRangeShortDateTimePipe,
                         KbqDataSizePipe,
                         KbqDecimalPipe,
                         KbqRoundDecimalPipe,
                         KbqTableNumberPipe
                     ],
+                    providers: [DateFormatter],
                     exports: [
                         KbqDecimalPipe,
                         KbqRoundDecimalPipe,
@@ -3201,20 +3937,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         RangeDateTimeFormatterImpurePipe,
                         RangeShortDateTimeFormatterImpurePipe,
                         RangeMiddleDateTimeFormatterImpurePipe,
+                        KbqAbsoluteLongDatePipe,
+                        KbqAbsoluteLongDateTimePipe,
+                        KbqAbsoluteShortDatePipe,
+                        KbqAbsoluteShortDateTimePipe,
+                        KbqRelativeLongDatePipe,
+                        KbqRelativeLongDateTimePipe,
+                        KbqRelativeShortDatePipe,
+                        KbqRelativeShortDateTimePipe,
+                        KbqRangeLongDatePipe,
+                        KbqRangeLongDateTimePipe,
+                        KbqRangeMiddleDateTimePipe,
+                        KbqRangeShortDatePipe,
+                        KbqRangeShortDateTimePipe,
                         KbqDataSizePipe
-                    ],
-                    providers: [{ provide: DateFormatter, deps: [DateAdapter, KBQ_DATE_LOCALE] }]
+                    ]
                 }]
         }] });
 
 class KbqFormElement {
-    constructor(element) {
-        this.element = element;
+    constructor() {
+        this.element = inject(ElementRef);
         this.margin = false;
         this.isRow = false;
         this.isFieldSet = false;
         this.hasLegend = false;
         this.isHorizontal = false;
+        this.elements = contentChildren(KbqFormElement, ...(ngDevMode ? [{ debugName: "elements" }] : []));
     }
     ngAfterContentInit() {
         const classList = this.element.nativeElement.classList;
@@ -3225,60 +3974,57 @@ class KbqFormElement {
             this.hasLegend = this.element.nativeElement.firstElementChild.classList.contains('kbq-form__legend');
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFormElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqFormElement, isStandalone: true, selector: ".kbq-form__row, .kbq-form__fieldset, .kbq-form__legend", host: { properties: { "class.kbq-form-row_margin": "margin" } }, queries: [{ propertyName: "elements", predicate: KbqFormElement }], exportAs: ["kbqFormElement"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFormElement, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.25", type: KbqFormElement, isStandalone: true, selector: ".kbq-form__row, .kbq-form__fieldset, .kbq-form__legend", host: { properties: { "class.kbq-form-row_margin": "margin" } }, queries: [{ propertyName: "elements", predicate: KbqFormElement, isSignal: true }], exportAs: ["kbqFormElement"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFormElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFormElement, decorators: [{
             type: Directive,
             args: [{
                     selector: '.kbq-form__row, .kbq-form__fieldset, .kbq-form__legend',
-                    exportAs: 'kbqFormElement',
                     host: {
                         '[class.kbq-form-row_margin]': 'margin'
-                    }
+                    },
+                    exportAs: 'kbqFormElement'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { elements: [{
-                type: ContentChildren,
-                args: [KbqFormElement]
-            }] } });
+        }], propDecorators: { elements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqFormElement), { isSignal: true }] }] } });
 class KbqForm {
+    constructor() {
+        this.elements = contentChildren(KbqFormElement, ...(ngDevMode ? [{ debugName: "elements" }] : []));
+    }
     ngAfterContentInit() {
-        this.handleElements(this.elements);
+        this.handleElements(this.elements());
     }
     handleElements(elements) {
         elements.forEach((element, index) => {
-            const nextElement = elements.get(index + 1);
+            const nextElement = elements[index + 1];
             if (element.isFieldSet && !element.isHorizontal) {
-                this.handleElements(element.elements);
+                this.handleElements(element.elements());
             }
             element.margin = !!(nextElement && !nextElement.hasLegend);
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqForm, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqForm, isStandalone: true, selector: ".kbq-form-vertical, .kbq-form-horizontal", host: { classAttribute: "kbq-form" }, queries: [{ propertyName: "elements", predicate: KbqFormElement }], exportAs: ["kbqForm"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqForm, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.25", type: KbqForm, isStandalone: true, selector: ".kbq-form-vertical, .kbq-form-horizontal", host: { classAttribute: "kbq-form" }, queries: [{ propertyName: "elements", predicate: KbqFormElement, isSignal: true }], exportAs: ["kbqForm"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqForm, decorators: [{
             type: Directive,
             args: [{
                     selector: '.kbq-form-vertical, .kbq-form-horizontal',
-                    exportAs: 'kbqForm',
                     host: {
                         class: 'kbq-form'
-                    }
+                    },
+                    exportAs: 'kbqForm'
                 }]
-        }], propDecorators: { elements: [{
-                type: ContentChildren,
-                args: [KbqFormElement]
-            }] } });
+        }], propDecorators: { elements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqFormElement), { isSignal: true }] }] } });
 
 class KbqFormsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqFormsModule, imports: [KbqForm,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqFormsModule, imports: [KbqForm,
             KbqFormElement], exports: [KbqForm,
             KbqFormElement] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFormsModule }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFormsModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqFormsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqFormsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3477,8 +4223,7 @@ class FileValidators {
 const HTML_ESCAPES = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
 const HTML_SPECIAL_CHARS = /[&<>"']/;
 const HTML_SPECIAL_CHARS_GLOBAL = new RegExp(HTML_SPECIAL_CHARS.source, 'g');
-/** @docs-private */
-const kbqHighlightMark = (text) => `<mark class="kbq-highlight">${text}</mark>`;
+/** Escapes characters in the specified string that have special meaning in a regular expression. */
 function escapeRegExp(value) {
     if (value) {
         return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -3490,39 +4235,60 @@ function escapeHtml(value) {
         return value;
     return value.replace(HTML_SPECIAL_CHARS_GLOBAL, (chr) => HTML_ESCAPES[chr] ?? chr);
 }
+/** @docs-private */
+function highlight(value, keyword, mark) {
+    if (typeof value !== 'string')
+        return '';
+    if (!keyword || typeof keyword !== 'string')
+        return escapeHtml(value);
+    const parts = value.split(new RegExp(`(${escapeRegExp(keyword)})`, 'gi'));
+    return parts
+        .map((part, i) => {
+        const escaped = escapeHtml(part);
+        const isMatch = i % 2 === 1;
+        return isMatch ? mark(escaped) : escaped;
+    })
+        .join('');
+}
+
+/** @docs-private */
+const kbqHighlightBackgroundMark = (text) => `<mark class="kbq-highlight-background">${text}</mark>`;
+class KbqHighlightBackgroundPipe {
+    transform(value, keyword) {
+        return highlight(value, keyword, kbqHighlightBackgroundMark);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqHighlightBackgroundPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqHighlightBackgroundPipe, isStandalone: true, name: "kbqHighlightBackground" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqHighlightBackgroundPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'kbqHighlightBackground' }]
+        }] });
+
+/** @docs-private */
+const kbqHighlightMark = (text) => `<mark class="kbq-highlight">${text}</mark>`;
 class KbqHighlightPipe {
-    transform(value, args) {
-        if (typeof value !== 'string')
-            return '';
-        if (!args || typeof args !== 'string')
-            return escapeHtml(value);
-        const parts = value.split(new RegExp(`(${escapeRegExp(args)})`, 'gi'));
-        return parts
-            .map((part, i) => {
-            const escaped = escapeHtml(part);
-            const isMatch = i % 2 === 1;
-            return isMatch ? kbqHighlightMark(escaped) : escaped;
-        })
-            .join('');
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqHighlightPipe, isStandalone: true, name: "mcHighlight" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqHighlightPipe, decorators: [{
+    transform(value, keyword) {
+        return highlight(value, keyword, kbqHighlightMark);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqHighlightPipe, isStandalone: true, name: "mcHighlight" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqHighlightPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'mcHighlight' }]
         }] });
 
 class KbqHighlightModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqHighlightModule, imports: [CommonModule, KbqHighlightPipe], exports: [KbqHighlightPipe] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqHighlightModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqHighlightModule, imports: [KbqHighlightPipe, KbqHighlightBackgroundPipe], exports: [KbqHighlightPipe, KbqHighlightBackgroundPipe] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqHighlightModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqHighlightModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqHighlightModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, KbqHighlightPipe],
-                    exports: [KbqHighlightPipe]
+                    imports: [KbqHighlightPipe, KbqHighlightBackgroundPipe],
+                    exports: [KbqHighlightPipe, KbqHighlightBackgroundPipe]
                 }]
         }] });
 
@@ -3532,10 +4298,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
  * counted by checking the query list's length.
  */
 class KbqLine {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqLine, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqLine, isStandalone: true, selector: "[kbq-line], [mcLine]", host: { classAttribute: "kbq-line" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqLine, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqLine, isStandalone: true, selector: "[kbq-line], [mcLine]", host: { classAttribute: "kbq-line" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqLine, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqLine, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-line], [mcLine]',
@@ -3601,10 +4367,10 @@ class KbqRectangleItem {
         const { width, marginLeft, marginRight } = this.window.getComputedStyle(this.nativeElement);
         return [width, marginLeft, marginRight].reduce((acc, item) => acc + parseInt(item), 0);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqRectangleItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqRectangleItem, isStandalone: true, host: { properties: { "class.kbq-expanded": "!collapsed", "class.kbq-collapsed": "collapsed" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRectangleItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqRectangleItem, isStandalone: true, host: { properties: { "class.kbq-expanded": "!collapsed", "class.kbq-collapsed": "collapsed" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqRectangleItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqRectangleItem, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -3624,6 +4390,8 @@ class KbqOptionActionComponent {
         this.hasFocus = false;
         this.destroyRef = inject(DestroyRef);
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get disabled() {
         return this._disabled;
     }
@@ -3687,20 +4455,20 @@ class KbqOptionActionComponent {
         this.option.tooltipTrigger.disabled = true;
         setTimeout(() => (this.option.tooltipTrigger.disabled = false));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqOptionActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: KbqOptionActionComponent, isStandalone: true, selector: "kbq-option-action", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)" }, properties: { "class.kbq-expanded": "false", "class.kbq-disabled": "disabled", "attr.disabled": "disabled || null", "attr.tabIndex": "-1" }, classAttribute: "kbq-option-action" }, exportAs: ["kbqOptionAction"], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOptionActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.25", type: KbqOptionActionComponent, isStandalone: true, selector: "kbq-option-action", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)" }, properties: { "class.kbq-expanded": "false", "class.kbq-disabled": "disabled", "attr.disabled": "disabled || null", "attr.tabIndex": "-1" }, classAttribute: "kbq-option-action" }, exportAs: ["kbqOptionAction"], ngImport: i0, template: `
         <ng-content select="[kbq-icon]">
             <i class="kbq kbq-icon kbq-contrast-fade kbq-ellipsis-vertical_16"></i>
         </ng-content>
     `, isInline: true, styles: [".kbq-option-action{display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;border:var(--kbq-size-3xs) solid transparent;border-radius:var(--kbq-size-xs);width:var(--kbq-size-xl);height:var(--kbq-size-xl)}.kbq-option-action:not(.kbq-disabled):hover .kbq-icon,.kbq-option-action:not(.kbq-disabled):focus .kbq-icon{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-option-action.kbq-disabled{cursor:default}.kbq-option-action.cdk-keyboard-focused{z-index:1;border-color:var(--kbq-states-line-focus-theme)}.kbq-option-action:active .kbq-icon.kbq-empty,.kbq-option-action.kbq-pressed .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-active)}.kbq-option-action:active,.kbq-option-action.kbq-pressed{background-color:var(--kbq-background-transparent)}.kbq-option-action:hover .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-hover)}.kbq-option-action.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-states-icon-disabled)}.kbq-option-action.kbq-disabled{background-color:var(--kbq-background-transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqOptionActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOptionActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-option-action', exportAs: 'kbqOptionAction', template: `
+            args: [{ selector: 'kbq-option-action', template: `
         <ng-content select="[kbq-icon]">
             <i class="kbq kbq-icon kbq-contrast-fade kbq-ellipsis-vertical_16"></i>
         </ng-content>
-    `, host: {
+    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-option-action',
                         '[class.kbq-expanded]': 'false',
                         '[class.kbq-disabled]': 'disabled',
@@ -3708,31 +4476,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '[attr.tabIndex]': '-1',
                         '(click)': 'onClick($event)',
                         '(keydown)': 'onKeyDown($event)'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-option-action{display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;border:var(--kbq-size-3xs) solid transparent;border-radius:var(--kbq-size-xs);width:var(--kbq-size-xl);height:var(--kbq-size-xl)}.kbq-option-action:not(.kbq-disabled):hover .kbq-icon,.kbq-option-action:not(.kbq-disabled):focus .kbq-icon{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-option-action.kbq-disabled{cursor:default}.kbq-option-action.cdk-keyboard-focused{z-index:1;border-color:var(--kbq-states-line-focus-theme)}.kbq-option-action:active .kbq-icon.kbq-empty,.kbq-option-action.kbq-pressed .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-active)}.kbq-option-action:active,.kbq-option-action.kbq-pressed{background-color:var(--kbq-background-transparent)}.kbq-option-action:hover .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-hover)}.kbq-option-action.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-states-icon-disabled)}.kbq-option-action.kbq-disabled{background-color:var(--kbq-background-transparent)}\n"] }]
+                    }, exportAs: 'kbqOptionAction', styles: [".kbq-option-action{display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;border:var(--kbq-size-3xs) solid transparent;border-radius:var(--kbq-size-xs);width:var(--kbq-size-xl);height:var(--kbq-size-xl)}.kbq-option-action:not(.kbq-disabled):hover .kbq-icon,.kbq-option-action:not(.kbq-disabled):focus .kbq-icon{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-option-action.kbq-disabled{cursor:default}.kbq-option-action.cdk-keyboard-focused{z-index:1;border-color:var(--kbq-states-line-focus-theme)}.kbq-option-action:active .kbq-icon.kbq-empty,.kbq-option-action.kbq-pressed .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-active)}.kbq-option-action:active,.kbq-option-action.kbq-pressed{background-color:var(--kbq-background-transparent)}.kbq-option-action:hover .kbq-icon.kbq-empty{color:var(--kbq-states-icon-contrast-fade-hover)}.kbq-option-action.kbq-disabled .kbq-icon.kbq-empty{color:var(--kbq-states-icon-disabled)}.kbq-option-action.kbq-disabled{background-color:var(--kbq-background-transparent)}\n"] }]
         }], propDecorators: { disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }] } });
 
 class KbqActionContainer {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqActionContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqActionContainer, isStandalone: true, selector: "kbq-action-container", host: { classAttribute: "kbq-action-container" }, exportAs: ["kbqActionContainer"], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqActionContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: KbqActionContainer, isStandalone: true, selector: "kbq-action-container", host: { classAttribute: "kbq-action-container" }, exportAs: ["kbqActionContainer"], ngImport: i0, template: `
         <div class="kbq-action-container__gradient"></div>
         <div class="kbq-action-container__box">
             <ng-content />
         </div>
-    `, isInline: true, styles: [".kbq-action-container{box-sizing:border-box;position:absolute;right:0;top:0;bottom:0;display:none;align-items:center;overflow:hidden;border:1px solid transparent;border-top-right-radius:var(--kbq-size-xs);border-bottom-right-radius:var(--kbq-size-xs)}.kbq-action-container__gradient{display:flex;margin-right:calc(var(--kbq-size-xs) * -1);width:var(--kbq-size-3xl);height:100%;background:linear-gradient(var(--kbq-option-background),var(--kbq-option-background)),var(--kbq-background-bg);mask-image:linear-gradient(to right,transparent 0%,black var(--kbq-size-xxl))}.kbq-action-container__box{height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(var(--kbq-option-background),var(--kbq-option-background)),var(--kbq-background-bg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-action-container{box-sizing:border-box;position:absolute;right:0;top:0;bottom:0;display:none;align-items:center;overflow:hidden;border:1px solid transparent;border-top-right-radius:var(--kbq-size-xs);border-bottom-right-radius:var(--kbq-size-xs)}.kbq-action-container__gradient{display:flex;margin-right:calc(var(--kbq-size-xs) * -1);width:var(--kbq-size-3xl);height:100%;background:linear-gradient(var(--kbq-option-background),var(--kbq-option-background)),var(--kbq-background-bg);-webkit-mask-image:linear-gradient(to right,transparent 0%,black var(--kbq-size-xxl));mask-image:linear-gradient(to right,transparent 0%,black var(--kbq-size-xxl))}.kbq-action-container__box{height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(var(--kbq-option-background),var(--kbq-option-background)),var(--kbq-background-bg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqActionContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqActionContainer, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-action-container', exportAs: 'kbqActionContainer', template: `
+            args: [{ selector: 'kbq-action-container', template: `
         <div class="kbq-action-container__gradient"></div>
         <div class="kbq-action-container__box">
             <ng-content />
         </div>
-    `, host: {
+    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-action-container'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-action-container{box-sizing:border-box;position:absolute;right:0;top:0;bottom:0;display:none;align-items:center;overflow:hidden;border:1px solid transparent;border-top-right-radius:var(--kbq-size-xs);border-bottom-right-radius:var(--kbq-size-xs)}.kbq-action-container__gradient{display:flex;margin-right:calc(var(--kbq-size-xs) * -1);width:var(--kbq-size-3xl);height:100%;background:linear-gradient(var(--kbq-option-background),var(--kbq-option-background)),var(--kbq-background-bg);mask-image:linear-gradient(to right,transparent 0%,black var(--kbq-size-xxl))}.kbq-action-container__box{height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(var(--kbq-option-background),var(--kbq-option-background)),var(--kbq-background-bg)}\n"] }]
+                    }, exportAs: 'kbqActionContainer', styles: [".kbq-action-container{box-sizing:border-box;position:absolute;right:0;top:0;bottom:0;display:none;align-items:center;overflow:hidden;border:1px solid transparent;border-top-right-radius:var(--kbq-size-xs);border-bottom-right-radius:var(--kbq-size-xs)}.kbq-action-container__gradient{display:flex;margin-right:calc(var(--kbq-size-xs) * -1);width:var(--kbq-size-3xl);height:100%;background:linear-gradient(var(--kbq-option-background),var(--kbq-option-background)),var(--kbq-background-bg);-webkit-mask-image:linear-gradient(to right,transparent 0%,black var(--kbq-size-xxl));mask-image:linear-gradient(to right,transparent 0%,black var(--kbq-size-xxl))}.kbq-action-container__box{height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(var(--kbq-option-background),var(--kbq-option-background)),var(--kbq-background-bg)}\n"] }]
         }] });
 
 let uniqueOptgroupIdCounter = 0;
@@ -3742,10 +4510,13 @@ let uniqueOptgroupIdCounter = 0;
  */
 class KbqOptgroup {
     constructor() {
+        this.label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
         this._disabled = false;
         /** Unique id for the underlying label. */
         this.labelId = `kbq-optgroup-label-${uniqueOptgroupIdCounter++}`;
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get disabled() {
         return this._disabled;
     }
@@ -3754,18 +4525,16 @@ class KbqOptgroup {
             this._disabled = value;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqOptgroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: KbqOptgroup, isStandalone: true, selector: "kbq-optgroup", inputs: { label: "label", disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "class.kbq-disabled": "disabled" }, classAttribute: "kbq-optgroup" }, exportAs: ["kbqOptgroup"], ngImport: i0, template: "<label class=\"kbq-optgroup-label\" [id]=\"labelId\">\n    {{ label }}\n</label>\n<ng-content select=\"kbq-option, kbq-list-option, kbq-timezone-option, ng-container\" />\n", styles: [".kbq-optgroup-label{display:flex;align-items:center;box-sizing:border-box;padding:var(--kbq-size-s) var(--kbq-size-l) var(--kbq-size-s) var(--kbq-size-m);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-optgroup-label{--kbq-optgroup-label-color: var(--kbq-foreground-contrast-secondary);color:var(--kbq-optgroup-label-color)}.kbq-disabled .kbq-optgroup-label{--kbq-optgroup-label-color: var(--kbq-states-foreground-disabled)}.kbq-optgroup-label{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOptgroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: KbqOptgroup, isStandalone: true, selector: "kbq-optgroup", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, host: { properties: { "class.kbq-disabled": "disabled" }, classAttribute: "kbq-optgroup" }, exportAs: ["kbqOptgroup"], ngImport: i0, template: "<label class=\"kbq-optgroup-label\" [id]=\"labelId\">\n    {{ label() }}\n</label>\n<ng-content select=\"kbq-option, kbq-list-option, kbq-timezone-option, ng-container\" />\n", styles: [".kbq-optgroup-label{display:flex;align-items:center;box-sizing:border-box;padding:var(--kbq-size-s) var(--kbq-size-l) var(--kbq-size-s) var(--kbq-size-m);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-optgroup-label{--kbq-optgroup-label-color: var(--kbq-foreground-contrast-secondary);color:var(--kbq-optgroup-label-color)}.kbq-disabled .kbq-optgroup-label{--kbq-optgroup-label-color: var(--kbq-states-foreground-disabled)}.kbq-optgroup-label{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqOptgroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOptgroup, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-optgroup', exportAs: 'kbqOptgroup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'kbq-optgroup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-optgroup',
                         '[class.kbq-disabled]': 'disabled'
-                    }, template: "<label class=\"kbq-optgroup-label\" [id]=\"labelId\">\n    {{ label }}\n</label>\n<ng-content select=\"kbq-option, kbq-list-option, kbq-timezone-option, ng-container\" />\n", styles: [".kbq-optgroup-label{display:flex;align-items:center;box-sizing:border-box;padding:var(--kbq-size-s) var(--kbq-size-l) var(--kbq-size-s) var(--kbq-size-m);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-optgroup-label{--kbq-optgroup-label-color: var(--kbq-foreground-contrast-secondary);color:var(--kbq-optgroup-label-color)}.kbq-disabled .kbq-optgroup-label{--kbq-optgroup-label-color: var(--kbq-states-foreground-disabled)}.kbq-optgroup-label{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], disabled: [{
+                    }, exportAs: 'kbqOptgroup', template: "<label class=\"kbq-optgroup-label\" [id]=\"labelId\">\n    {{ label() }}\n</label>\n<ng-content select=\"kbq-option, kbq-list-option, kbq-timezone-option, ng-container\" />\n", styles: [".kbq-optgroup-label{display:flex;align-items:center;box-sizing:border-box;padding:var(--kbq-size-s) var(--kbq-size-l) var(--kbq-size-s) var(--kbq-size-m);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-optgroup-label{--kbq-optgroup-label-color: var(--kbq-foreground-contrast-secondary);color:var(--kbq-optgroup-label-color)}.kbq-disabled .kbq-optgroup-label{--kbq-optgroup-label-color: var(--kbq-states-foreground-disabled)}.kbq-optgroup-label{font-size:var(--kbq-typography-caps-compact-strong-font-size);font-style:var(--kbq-typography-caps-compact-strong-font-style);font-weight:var(--kbq-typography-caps-compact-strong-font-weight);line-height:var(--kbq-typography-caps-compact-strong-line-height);font-family:var(--kbq-typography-caps-compact-strong-font-family);text-transform:var(--kbq-typography-caps-compact-strong-text-transform);font-feature-settings:var(--kbq-typography-caps-compact-strong-font-feature-settings);letter-spacing:var(--kbq-typography-caps-compact-strong-letter-spacing)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }] } });
@@ -3792,39 +4561,33 @@ var MultipleMode;
 class KbqPseudoCheckbox extends KbqColorDirective {
     constructor() {
         super(...arguments);
-        this.big = false;
-        this.state = 'unchecked';
-        this.disabled = false;
+        this.big = input(false, ...(ngDevMode ? [{ debugName: "big" }] : []));
+        this.state = input('unchecked', ...(ngDevMode ? [{ debugName: "state" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPseudoCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqPseudoCheckbox, isStandalone: true, selector: "kbq-pseudo-checkbox", inputs: { big: "big", state: "state", disabled: "disabled" }, host: { properties: { "class.kbq-checkbox_big": "big", "class.kbq-indeterminate": "state === \"indeterminate\"", "class.kbq-checked": "state === true || state === \"checked\"", "class.kbq-disabled": "disabled" }, classAttribute: "kbq-pseudo-checkbox" }, usesInheritance: true, ngImport: i0, template: "<i class=\"kbq-checkbox-checkmark kbq kbq-check-s_16\"></i>\n<i class=\"kbq-checkbox-mixedmark kbq kbq-minus-s_16\"></i>\n", styles: [".kbq-pseudo-checkbox{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;width:var(--kbq-checkbox-size-normal-width);height:var(--kbq-checkbox-size-normal-width);border-radius:var(--kbq-checkbox-size-normal-border-radius);border-width:var(--kbq-checkbox-size-normal-border-width);border-style:solid;cursor:pointer;vertical-align:middle;flex-shrink:0}.kbq-pseudo-checkbox .kbq-checkbox-checkmark,.kbq-pseudo-checkbox .kbq-checkbox-mixedmark{display:none}.kbq-pseudo-checkbox.kbq-pseudo-checkbox-checked,.kbq-pseudo-checkbox.kbq-pseudo-checkbox-indeterminate{border-color:transparent}.kbq-pseudo-checkbox.kbq-checked .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-indeterminate .kbq-checkbox-mixedmark{display:inline-block}.kbq-pseudo-checkbox.kbq-disabled{cursor:default}.kbq-pseudo-checkbox.kbq-pseudo-checkbox_big{width:var(--kbq-checkbox-size-big-width);height:var(--kbq-checkbox-size-big-width);border-radius:var(--kbq-checkbox-size-big-border-radius);border-width:var(--kbq-checkbox-size-big-border-width)}.kbq-pseudo-checkbox{border-color:var(--kbq-checkbox-theme-default-border);background:var(--kbq-checkbox-theme-default-background)}.kbq-pseudo-checkbox .kbq-checkbox-checkmark,.kbq-pseudo-checkbox .kbq-checkbox-mixedmark{color:var(--kbq-checkbox-theme-default-color)}.kbq-pseudo-checkbox.kbq-checked,.kbq-pseudo-checkbox.kbq-indeterminate{border-color:var(--kbq-checkbox-theme-states-checked-border);background:var(--kbq-checkbox-theme-states-checked-background)}.kbq-pseudo-checkbox.kbq-disabled .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-disabled .kbq-checkbox-mixedmark{color:var(--kbq-checkbox-theme-states-disabled-color)}.kbq-pseudo-checkbox.kbq-disabled{border-color:var(--kbq-checkbox-theme-states-disabled-border);background:var(--kbq-checkbox-theme-states-disabled-background)}.kbq-pseudo-checkbox.kbq-error{border-color:var(--kbq-checkbox-error-default-border);background:var(--kbq-checkbox-error-default-background)}.kbq-pseudo-checkbox.kbq-error .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-error .kbq-checkbox-mixedmark{color:var(--kbq-checkbox-error-default-color)}.kbq-pseudo-checkbox.kbq-error.kbq-checked,.kbq-pseudo-checkbox.kbq-error.kbq-indeterminate{border-color:var(--kbq-checkbox-error-states-checked-border);background:var(--kbq-checkbox-error-states-checked-background)}.kbq-pseudo-checkbox.kbq-error.kbq-disabled .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-error.kbq-disabled .kbq-checkbox-mixedmark{color:var(--kbq-checkbox-error-states-disabled-color)}.kbq-pseudo-checkbox.kbq-error.kbq-disabled{border-color:var(--kbq-checkbox-error-states-disabled-border);background:var(--kbq-checkbox-error-states-disabled-background)}\n", ".kbq-pseudo-checkbox{--kbq-checkbox-size-normal-width: var(--kbq-size-l);--kbq-checkbox-size-normal-border-width: var(--kbq-size-border-width);--kbq-checkbox-size-normal-border-radius: var(--kbq-size-xxs);--kbq-checkbox-size-normal-horizontal-content-padding: var(--kbq-size-s);--kbq-checkbox-size-normal-vertical-content-padding: var(--kbq-size-3xs);--kbq-checkbox-size-normal-top: var(--kbq-size-3xs);--kbq-checkbox-size-big-width: var(--kbq-size-l);--kbq-checkbox-size-big-border-width: var(--kbq-size-border-width);--kbq-checkbox-size-big-border-radius: var(--kbq-size-xxs);--kbq-checkbox-size-big-horizontal-content-padding: var(--kbq-size-s);--kbq-checkbox-size-big-vertical-content-padding: var(--kbq-size-3xs);--kbq-checkbox-size-big-top: var(--kbq-size-xxs);--kbq-checkbox-theme-default-border: var(--kbq-line-contrast-fade);--kbq-checkbox-theme-default-color: var(--kbq-icon-white);--kbq-checkbox-theme-default-text: var(--kbq-foreground-contrast);--kbq-checkbox-theme-default-background: var(--kbq-background-bg);--kbq-checkbox-theme-default-caption: var(--kbq-foreground-contrast-secondary);--kbq-checkbox-theme-states-hover-border: var(--kbq-line-contrast-fade);--kbq-checkbox-theme-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-checkbox-theme-states-checked-border: transparent;--kbq-checkbox-theme-states-checked-background: var(--kbq-background-theme);--kbq-checkbox-theme-states-checked-hover-border: transparent;--kbq-checkbox-theme-states-checked-hover-background: var(--kbq-states-background-theme-hover);--kbq-checkbox-theme-states-focused-border: var(--kbq-states-line-focus-theme);--kbq-checkbox-theme-states-focused-background: var(--kbq-background-bg);--kbq-checkbox-theme-states-focused-outline: 1px solid var(--kbq-states-line-focus-theme);--kbq-checkbox-theme-states-checked-focused-border: var(--kbq-states-line-focus-theme);--kbq-checkbox-theme-states-checked-focused-background: var(--kbq-background-theme);--kbq-checkbox-theme-states-checked-focused-outline: 1px solid var(--kbq-states-line-focus-theme);--kbq-checkbox-theme-states-disabled-border: var(--kbq-states-line-disabled);--kbq-checkbox-theme-states-disabled-color: var(--kbq-states-icon-disabled);--kbq-checkbox-theme-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-checkbox-theme-states-disabled-background: var(--kbq-states-background-disabled);--kbq-checkbox-theme-states-disabled-caption: var(--kbq-states-icon-disabled);--kbq-checkbox-error-default-border: var(--kbq-line-error);--kbq-checkbox-error-default-color: var(--kbq-icon-white);--kbq-checkbox-error-default-text: var(--kbq-foreground-contrast);--kbq-checkbox-error-default-background: var(--kbq-background-error-less);--kbq-checkbox-error-default-caption: var(--kbq-foreground-contrast-secondary);--kbq-checkbox-error-states-hover-border: var(--kbq-line-error);--kbq-checkbox-error-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-checkbox-error-states-checked-border: transparent;--kbq-checkbox-error-states-checked-background: var(--kbq-background-error);--kbq-checkbox-error-states-checked-hover-border: transparent;--kbq-checkbox-error-states-checked-hover-background: var(--kbq-states-background-error-hover);--kbq-checkbox-error-states-focused-border: var(--kbq-line-error);--kbq-checkbox-error-states-focused-background: var(--kbq-background-error-less);--kbq-checkbox-error-states-focused-outline: 1px solid var(--kbq-states-line-focus-error);--kbq-checkbox-error-states-checked-focused-border: var(--kbq-states-line-focus-error);--kbq-checkbox-error-states-checked-focused-background: var(--kbq-background-error);--kbq-checkbox-error-states-checked-focused-outline: 1px solid var(--kbq-states-line-focus-error);--kbq-checkbox-error-states-disabled-border: var(--kbq-states-line-disabled);--kbq-checkbox-error-states-disabled-color: var(--kbq-states-icon-disabled);--kbq-checkbox-error-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-checkbox-error-states-disabled-background: var(--kbq-states-background-disabled);--kbq-checkbox-error-states-disabled-caption: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPseudoCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: KbqPseudoCheckbox, isStandalone: true, selector: "kbq-pseudo-checkbox", inputs: { big: { classPropertyName: "big", publicName: "big", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-checkbox_big": "big()", "class.kbq-indeterminate": "state() === \"indeterminate\"", "class.kbq-checked": "state() === true || state() === \"checked\"", "class.kbq-disabled": "disabled()" }, classAttribute: "kbq-pseudo-checkbox" }, usesInheritance: true, ngImport: i0, template: "<i class=\"kbq-checkbox-checkmark kbq kbq-check-s_16\"></i>\n<i class=\"kbq-checkbox-mixedmark kbq kbq-minus-s_16\"></i>\n", styles: [".kbq-pseudo-checkbox{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;width:var(--kbq-checkbox-size-normal-width);height:var(--kbq-checkbox-size-normal-width);border-radius:var(--kbq-checkbox-size-normal-border-radius);border-width:var(--kbq-checkbox-size-normal-border-width);border-style:solid;cursor:pointer;vertical-align:middle;flex-shrink:0}.kbq-pseudo-checkbox .kbq-checkbox-checkmark,.kbq-pseudo-checkbox .kbq-checkbox-mixedmark{display:none}.kbq-pseudo-checkbox.kbq-pseudo-checkbox-checked,.kbq-pseudo-checkbox.kbq-pseudo-checkbox-indeterminate{border-color:transparent}.kbq-pseudo-checkbox.kbq-checked .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-indeterminate .kbq-checkbox-mixedmark{display:inline-block}.kbq-pseudo-checkbox.kbq-disabled{cursor:default}.kbq-pseudo-checkbox.kbq-pseudo-checkbox_big{width:var(--kbq-checkbox-size-big-width);height:var(--kbq-checkbox-size-big-width);border-radius:var(--kbq-checkbox-size-big-border-radius);border-width:var(--kbq-checkbox-size-big-border-width)}.kbq-pseudo-checkbox{border-color:var(--kbq-checkbox-theme-default-border);background:var(--kbq-checkbox-theme-default-background)}.kbq-pseudo-checkbox .kbq-checkbox-checkmark,.kbq-pseudo-checkbox .kbq-checkbox-mixedmark{color:var(--kbq-checkbox-theme-default-color)}.kbq-pseudo-checkbox.kbq-checked,.kbq-pseudo-checkbox.kbq-indeterminate{border-color:var(--kbq-checkbox-theme-states-checked-border);background:var(--kbq-checkbox-theme-states-checked-background)}.kbq-pseudo-checkbox.kbq-disabled .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-disabled .kbq-checkbox-mixedmark{color:var(--kbq-checkbox-theme-states-disabled-color)}.kbq-pseudo-checkbox.kbq-disabled{border-color:var(--kbq-checkbox-theme-states-disabled-border);background:var(--kbq-checkbox-theme-states-disabled-background)}.kbq-pseudo-checkbox.kbq-error{border-color:var(--kbq-checkbox-error-default-border);background:var(--kbq-checkbox-error-default-background)}.kbq-pseudo-checkbox.kbq-error .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-error .kbq-checkbox-mixedmark{color:var(--kbq-checkbox-error-default-color)}.kbq-pseudo-checkbox.kbq-error.kbq-checked,.kbq-pseudo-checkbox.kbq-error.kbq-indeterminate{border-color:var(--kbq-checkbox-error-states-checked-border);background:var(--kbq-checkbox-error-states-checked-background)}.kbq-pseudo-checkbox.kbq-error.kbq-disabled .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-error.kbq-disabled .kbq-checkbox-mixedmark{color:var(--kbq-checkbox-error-states-disabled-color)}.kbq-pseudo-checkbox.kbq-error.kbq-disabled{border-color:var(--kbq-checkbox-error-states-disabled-border);background:var(--kbq-checkbox-error-states-disabled-background)}\n", ".kbq-pseudo-checkbox{--kbq-checkbox-size-normal-width: var(--kbq-size-l);--kbq-checkbox-size-normal-border-width: var(--kbq-size-border-width);--kbq-checkbox-size-normal-border-radius: var(--kbq-size-xxs);--kbq-checkbox-size-normal-horizontal-content-padding: var(--kbq-size-s);--kbq-checkbox-size-normal-vertical-content-padding: var(--kbq-size-3xs);--kbq-checkbox-size-normal-top: var(--kbq-size-3xs);--kbq-checkbox-size-big-width: var(--kbq-size-l);--kbq-checkbox-size-big-border-width: var(--kbq-size-border-width);--kbq-checkbox-size-big-border-radius: var(--kbq-size-xxs);--kbq-checkbox-size-big-horizontal-content-padding: var(--kbq-size-s);--kbq-checkbox-size-big-vertical-content-padding: var(--kbq-size-3xs);--kbq-checkbox-size-big-top: var(--kbq-size-xxs);--kbq-checkbox-theme-default-border: var(--kbq-line-contrast-fade);--kbq-checkbox-theme-default-color: var(--kbq-icon-white);--kbq-checkbox-theme-default-text: var(--kbq-foreground-contrast);--kbq-checkbox-theme-default-background: var(--kbq-background-bg);--kbq-checkbox-theme-default-caption: var(--kbq-foreground-contrast-secondary);--kbq-checkbox-theme-states-hover-border: var(--kbq-line-contrast-fade);--kbq-checkbox-theme-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-checkbox-theme-states-checked-border: transparent;--kbq-checkbox-theme-states-checked-background: var(--kbq-background-theme);--kbq-checkbox-theme-states-checked-hover-border: transparent;--kbq-checkbox-theme-states-checked-hover-background: var(--kbq-states-background-theme-hover);--kbq-checkbox-theme-states-focused-border: var(--kbq-states-line-focus-theme);--kbq-checkbox-theme-states-focused-background: var(--kbq-background-bg);--kbq-checkbox-theme-states-focused-outline: 1px solid var(--kbq-states-line-focus-theme);--kbq-checkbox-theme-states-checked-focused-border: var(--kbq-states-line-focus-theme);--kbq-checkbox-theme-states-checked-focused-background: var(--kbq-background-theme);--kbq-checkbox-theme-states-checked-focused-outline: 1px solid var(--kbq-states-line-focus-theme);--kbq-checkbox-theme-states-disabled-border: var(--kbq-states-line-disabled);--kbq-checkbox-theme-states-disabled-color: var(--kbq-states-icon-disabled);--kbq-checkbox-theme-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-checkbox-theme-states-disabled-background: var(--kbq-states-background-disabled);--kbq-checkbox-theme-states-disabled-caption: var(--kbq-states-icon-disabled);--kbq-checkbox-error-default-border: var(--kbq-line-error);--kbq-checkbox-error-default-color: var(--kbq-icon-white);--kbq-checkbox-error-default-text: var(--kbq-foreground-contrast);--kbq-checkbox-error-default-background: var(--kbq-background-error-less);--kbq-checkbox-error-default-caption: var(--kbq-foreground-contrast-secondary);--kbq-checkbox-error-states-hover-border: var(--kbq-line-error);--kbq-checkbox-error-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-checkbox-error-states-checked-border: transparent;--kbq-checkbox-error-states-checked-background: var(--kbq-background-error);--kbq-checkbox-error-states-checked-hover-border: transparent;--kbq-checkbox-error-states-checked-hover-background: var(--kbq-states-background-error-hover);--kbq-checkbox-error-states-focused-border: var(--kbq-line-error);--kbq-checkbox-error-states-focused-background: var(--kbq-background-error-less);--kbq-checkbox-error-states-focused-outline: 1px solid var(--kbq-states-line-focus-error);--kbq-checkbox-error-states-checked-focused-border: var(--kbq-states-line-focus-error);--kbq-checkbox-error-states-checked-focused-background: var(--kbq-background-error);--kbq-checkbox-error-states-checked-focused-outline: 1px solid var(--kbq-states-line-focus-error);--kbq-checkbox-error-states-disabled-border: var(--kbq-states-line-disabled);--kbq-checkbox-error-states-disabled-color: var(--kbq-states-icon-disabled);--kbq-checkbox-error-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-checkbox-error-states-disabled-background: var(--kbq-states-background-disabled);--kbq-checkbox-error-states-disabled-caption: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPseudoCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPseudoCheckbox, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-pseudo-checkbox', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'kbq-pseudo-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-pseudo-checkbox',
-                        '[class.kbq-checkbox_big]': 'big',
-                        '[class.kbq-indeterminate]': 'state === "indeterminate"',
-                        '[class.kbq-checked]': 'state === true || state === "checked"',
-                        '[class.kbq-disabled]': 'disabled'
+                        '[class.kbq-checkbox_big]': 'big()',
+                        '[class.kbq-indeterminate]': 'state() === "indeterminate"',
+                        '[class.kbq-checked]': 'state() === true || state() === "checked"',
+                        '[class.kbq-disabled]': 'disabled()'
                     }, preserveWhitespaces: false, template: "<i class=\"kbq-checkbox-checkmark kbq kbq-check-s_16\"></i>\n<i class=\"kbq-checkbox-mixedmark kbq kbq-minus-s_16\"></i>\n", styles: [".kbq-pseudo-checkbox{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;width:var(--kbq-checkbox-size-normal-width);height:var(--kbq-checkbox-size-normal-width);border-radius:var(--kbq-checkbox-size-normal-border-radius);border-width:var(--kbq-checkbox-size-normal-border-width);border-style:solid;cursor:pointer;vertical-align:middle;flex-shrink:0}.kbq-pseudo-checkbox .kbq-checkbox-checkmark,.kbq-pseudo-checkbox .kbq-checkbox-mixedmark{display:none}.kbq-pseudo-checkbox.kbq-pseudo-checkbox-checked,.kbq-pseudo-checkbox.kbq-pseudo-checkbox-indeterminate{border-color:transparent}.kbq-pseudo-checkbox.kbq-checked .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-indeterminate .kbq-checkbox-mixedmark{display:inline-block}.kbq-pseudo-checkbox.kbq-disabled{cursor:default}.kbq-pseudo-checkbox.kbq-pseudo-checkbox_big{width:var(--kbq-checkbox-size-big-width);height:var(--kbq-checkbox-size-big-width);border-radius:var(--kbq-checkbox-size-big-border-radius);border-width:var(--kbq-checkbox-size-big-border-width)}.kbq-pseudo-checkbox{border-color:var(--kbq-checkbox-theme-default-border);background:var(--kbq-checkbox-theme-default-background)}.kbq-pseudo-checkbox .kbq-checkbox-checkmark,.kbq-pseudo-checkbox .kbq-checkbox-mixedmark{color:var(--kbq-checkbox-theme-default-color)}.kbq-pseudo-checkbox.kbq-checked,.kbq-pseudo-checkbox.kbq-indeterminate{border-color:var(--kbq-checkbox-theme-states-checked-border);background:var(--kbq-checkbox-theme-states-checked-background)}.kbq-pseudo-checkbox.kbq-disabled .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-disabled .kbq-checkbox-mixedmark{color:var(--kbq-checkbox-theme-states-disabled-color)}.kbq-pseudo-checkbox.kbq-disabled{border-color:var(--kbq-checkbox-theme-states-disabled-border);background:var(--kbq-checkbox-theme-states-disabled-background)}.kbq-pseudo-checkbox.kbq-error{border-color:var(--kbq-checkbox-error-default-border);background:var(--kbq-checkbox-error-default-background)}.kbq-pseudo-checkbox.kbq-error .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-error .kbq-checkbox-mixedmark{color:var(--kbq-checkbox-error-default-color)}.kbq-pseudo-checkbox.kbq-error.kbq-checked,.kbq-pseudo-checkbox.kbq-error.kbq-indeterminate{border-color:var(--kbq-checkbox-error-states-checked-border);background:var(--kbq-checkbox-error-states-checked-background)}.kbq-pseudo-checkbox.kbq-error.kbq-disabled .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-error.kbq-disabled .kbq-checkbox-mixedmark{color:var(--kbq-checkbox-error-states-disabled-color)}.kbq-pseudo-checkbox.kbq-error.kbq-disabled{border-color:var(--kbq-checkbox-error-states-disabled-border);background:var(--kbq-checkbox-error-states-disabled-background)}\n", ".kbq-pseudo-checkbox{--kbq-checkbox-size-normal-width: var(--kbq-size-l);--kbq-checkbox-size-normal-border-width: var(--kbq-size-border-width);--kbq-checkbox-size-normal-border-radius: var(--kbq-size-xxs);--kbq-checkbox-size-normal-horizontal-content-padding: var(--kbq-size-s);--kbq-checkbox-size-normal-vertical-content-padding: var(--kbq-size-3xs);--kbq-checkbox-size-normal-top: var(--kbq-size-3xs);--kbq-checkbox-size-big-width: var(--kbq-size-l);--kbq-checkbox-size-big-border-width: var(--kbq-size-border-width);--kbq-checkbox-size-big-border-radius: var(--kbq-size-xxs);--kbq-checkbox-size-big-horizontal-content-padding: var(--kbq-size-s);--kbq-checkbox-size-big-vertical-content-padding: var(--kbq-size-3xs);--kbq-checkbox-size-big-top: var(--kbq-size-xxs);--kbq-checkbox-theme-default-border: var(--kbq-line-contrast-fade);--kbq-checkbox-theme-default-color: var(--kbq-icon-white);--kbq-checkbox-theme-default-text: var(--kbq-foreground-contrast);--kbq-checkbox-theme-default-background: var(--kbq-background-bg);--kbq-checkbox-theme-default-caption: var(--kbq-foreground-contrast-secondary);--kbq-checkbox-theme-states-hover-border: var(--kbq-line-contrast-fade);--kbq-checkbox-theme-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-checkbox-theme-states-checked-border: transparent;--kbq-checkbox-theme-states-checked-background: var(--kbq-background-theme);--kbq-checkbox-theme-states-checked-hover-border: transparent;--kbq-checkbox-theme-states-checked-hover-background: var(--kbq-states-background-theme-hover);--kbq-checkbox-theme-states-focused-border: var(--kbq-states-line-focus-theme);--kbq-checkbox-theme-states-focused-background: var(--kbq-background-bg);--kbq-checkbox-theme-states-focused-outline: 1px solid var(--kbq-states-line-focus-theme);--kbq-checkbox-theme-states-checked-focused-border: var(--kbq-states-line-focus-theme);--kbq-checkbox-theme-states-checked-focused-background: var(--kbq-background-theme);--kbq-checkbox-theme-states-checked-focused-outline: 1px solid var(--kbq-states-line-focus-theme);--kbq-checkbox-theme-states-disabled-border: var(--kbq-states-line-disabled);--kbq-checkbox-theme-states-disabled-color: var(--kbq-states-icon-disabled);--kbq-checkbox-theme-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-checkbox-theme-states-disabled-background: var(--kbq-states-background-disabled);--kbq-checkbox-theme-states-disabled-caption: var(--kbq-states-icon-disabled);--kbq-checkbox-error-default-border: var(--kbq-line-error);--kbq-checkbox-error-default-color: var(--kbq-icon-white);--kbq-checkbox-error-default-text: var(--kbq-foreground-contrast);--kbq-checkbox-error-default-background: var(--kbq-background-error-less);--kbq-checkbox-error-default-caption: var(--kbq-foreground-contrast-secondary);--kbq-checkbox-error-states-hover-border: var(--kbq-line-error);--kbq-checkbox-error-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-checkbox-error-states-checked-border: transparent;--kbq-checkbox-error-states-checked-background: var(--kbq-background-error);--kbq-checkbox-error-states-checked-hover-border: transparent;--kbq-checkbox-error-states-checked-hover-background: var(--kbq-states-background-error-hover);--kbq-checkbox-error-states-focused-border: var(--kbq-line-error);--kbq-checkbox-error-states-focused-background: var(--kbq-background-error-less);--kbq-checkbox-error-states-focused-outline: 1px solid var(--kbq-states-line-focus-error);--kbq-checkbox-error-states-checked-focused-border: var(--kbq-states-line-focus-error);--kbq-checkbox-error-states-checked-focused-background: var(--kbq-background-error);--kbq-checkbox-error-states-checked-focused-outline: 1px solid var(--kbq-states-line-focus-error);--kbq-checkbox-error-states-disabled-border: var(--kbq-states-line-disabled);--kbq-checkbox-error-states-disabled-color: var(--kbq-states-icon-disabled);--kbq-checkbox-error-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-checkbox-error-states-disabled-background: var(--kbq-states-background-disabled);--kbq-checkbox-error-states-disabled-caption: var(--kbq-states-icon-disabled)}\n"] }]
-        }], propDecorators: { big: [{
-                type: Input
-            }], state: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }] } });
+        }], propDecorators: { big: [{ type: i0.Input, args: [{ isSignal: true, alias: "big", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class KbqPseudoCheckboxModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPseudoCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqPseudoCheckboxModule, imports: [CommonModule, KbqPseudoCheckbox], exports: [KbqPseudoCheckbox] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPseudoCheckboxModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPseudoCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqPseudoCheckboxModule, imports: [KbqPseudoCheckbox], exports: [KbqPseudoCheckbox] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPseudoCheckboxModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPseudoCheckboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPseudoCheckboxModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, KbqPseudoCheckbox],
+                    imports: [KbqPseudoCheckbox],
                     exports: [KbqPseudoCheckbox]
                 }]
         }] });
@@ -3891,6 +4654,35 @@ class KbqVirtualOption extends KbqOptionBase {
  * Single option inside of a `<kbq-select>` element.
  */
 class KbqOption extends KbqOptionBase {
+    constructor() {
+        super(...arguments);
+        this.elementRef = inject(ElementRef);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.parent = inject(KBQ_OPTION_PARENT_COMPONENT, { optional: true });
+        this.group = inject(KbqOptgroup, { optional: true });
+        this.selectable = input(true, ...(ngDevMode ? [{ debugName: "selectable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        // todo this flag will need to be rethought in the future (added for filter panel)
+        this.userSelect = input(false, ...(ngDevMode ? [{ debugName: "userSelect", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /** Event emitted when the option is selected or deselected. */
+        this.onSelectionChange = new EventEmitter();
+        /** Emits when the state of the option changes and any parents have to be notified. */
+        this.stateChanges = new Subject();
+        this._id = `kbq-option-${uniqueIdCounter++}`;
+        this._selected = false;
+        this._disabled = false;
+        this._active = false;
+        this.mostRecentViewValue = '';
+        /**
+         * Flag that indicates whether the component is currently focused by a mouse interaction.
+         *
+         * When set to `true`, the component has focus resulting from a mouse click or
+         * other pointer event. It is automatically cleared when the component loses
+         * focus or if focus is obtained through keyboard navigation or programmatic means.
+         */
+        this.isFocusedByMouse = false;
+    }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get showCheckbox() {
         return this._showCheckbox === undefined ? this.multiple : this._showCheckbox;
     }
@@ -3901,6 +4693,8 @@ class KbqOption extends KbqOptionBase {
      * The displayed value of the option. It is necessary to show the selected option in the
      * select's trigger.
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get viewValue() {
         return this._viewValue || (this.getHostElement().textContent || '').trim();
     }
@@ -3917,6 +4711,8 @@ class KbqOption extends KbqOptionBase {
     get selected() {
         return this._selected;
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get disabled() {
         return (this.group && this.group.disabled) || this._disabled;
     }
@@ -3932,33 +4728,6 @@ class KbqOption extends KbqOptionBase {
     get active() {
         return this._active;
     }
-    constructor(elementRef, changeDetectorRef, parent, group) {
-        super();
-        this.elementRef = elementRef;
-        this.changeDetectorRef = changeDetectorRef;
-        this.parent = parent;
-        this.group = group;
-        this.selectable = true;
-        // todo this flag will need to be rethought in the future (added for filter panel)
-        this.userSelect = false;
-        /** Event emitted when the option is selected or deselected. */
-        this.onSelectionChange = new EventEmitter();
-        /** Emits when the state of the option changes and any parents have to be notified. */
-        this.stateChanges = new Subject();
-        this._id = `kbq-option-${uniqueIdCounter++}`;
-        this._selected = false;
-        this._disabled = false;
-        this._active = false;
-        this.mostRecentViewValue = '';
-        /**
-         * Flag that indicates whether the component is currently focused by a mouse interaction.
-         *
-         * When set to `true`, the component has focus resulting from a mouse click or
-         * other pointer event. It is automatically cleared when the component loses
-         * focus or if focus is obtained through keyboard navigation or programmatic means.
-         */
-        this.isFocusedByMouse = false;
-    }
     ngAfterViewChecked() {
         // Since parent components could be using the option's label to display the selected values
         // (e.g. `kbq-select`) and they don't have a way of knowing if the option's label has changed
@@ -4056,9 +4825,9 @@ class KbqOption extends KbqOptionBase {
      * determine if the select's view -> model callback should be invoked.`
      */
     selectViaInteraction() {
-        if (this.userSelect)
+        if (this.userSelect())
             return;
-        if (!this.disabled && this.selectable) {
+        if (!this.disabled && this.selectable()) {
             this._selected = this.multiple ? !this._selected : true;
             this.changeDetectorRef.markForCheck();
             this.emitSelectionChangeEvent(true);
@@ -4077,19 +4846,24 @@ class KbqOption extends KbqOptionBase {
         this.isFocusedByMouse = true;
         this.parent?.keyManager?.setActiveItem(this);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqOption, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: KBQ_OPTION_PARENT_COMPONENT, optional: true }, { token: KbqOptgroup, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqOption, isStandalone: true, selector: "kbq-option", inputs: { value: "value", selectable: ["selectable", "selectable", booleanAttribute], userSelect: ["userSelect", "userSelect", booleanAttribute], showCheckbox: "showCheckbox", viewValue: "viewValue", disabled: "disabled" }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "click": "handleClick($event)", "mouseenter": "onMouseenter()", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "getTabIndex()", "class.kbq-selected": "selected", "class.kbq-option-multiple": "multiple", "class.kbq-active": "active", "class.kbq-disabled": "disabled", "id": "id" }, classAttribute: "kbq-option" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOption, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqOption, isStandalone: true, selector: "kbq-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, userSelect: { classPropertyName: "userSelect", publicName: "userSelect", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: false, isRequired: false, transformFunction: null }, viewValue: { classPropertyName: "viewValue", publicName: "viewValue", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "click": "handleClick($event)", "mouseenter": "onMouseenter()", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "getTabIndex()", "class.kbq-selected": "selected", "class.kbq-option-multiple": "multiple", "class.kbq-active": "active", "class.kbq-disabled": "disabled", "id": "id" }, classAttribute: "kbq-option" }, providers: [
             {
                 provide: KBQ_TITLE_TEXT_REF,
                 useExisting: KbqOption
             }
-        ], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], exportAs: ["kbqOption"], usesInheritance: true, ngImport: i0, template: "@if (showCheckbox) {\n    <ng-content select=\"kbq-pseudo-checkbox\">\n        <kbq-pseudo-checkbox [disabled]=\"disabled\" [state]=\"selected ? 'checked' : 'unchecked'\" />\n    </ng-content>\n}\n\n<span #kbqTitleText class=\"kbq-option-text\">\n    <ng-content />\n</span>\n", styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option .kbq-list-text:empty{display:none}.kbq-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-option{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option>.kbq-pseudo-checkbox{margin-top:var(--kbq-size-3xs);align-self:baseline}.kbq-option{border-radius:var(--kbq-option-border-radius)}.kbq-option:not(.kbq-disabled){cursor:pointer}.kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option-text:empty{display:none}.kbq-option-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option{background:var(--kbq-list-default-container-background)}.kbq-option .kbq-option-text{color:var(--kbq-list-default-text-color)}.kbq-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color)}.kbq-option .kbq-option-caption{color:var(--kbq-list-default-caption-color)}.kbq-option.kbq-hovered:not(.kbq-disabled),.kbq-option:hover:not(.kbq-disabled){background:var(--kbq-list-states-hover-container-background)}.kbq-option.kbq-hovered:not(.kbq-disabled) .kbq-option-text,.kbq-option:hover:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-hover-text-color)}.kbq-option.kbq-hovered:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-option:hover:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color)}.kbq-option.kbq-hovered:not(.kbq-disabled) .kbq-option-caption,.kbq-option:hover:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-hover-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-states-selected-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-selected-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-selected-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-option.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-list-states-selected-hover-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-text,.kbq-option.kbq-selected:not(.kbq-disabled):hover .kbq-option-text{color:var(--kbq-list-states-selected-hover-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-option.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-caption,.kbq-option.kbq-selected:not(.kbq-disabled):hover .kbq-option-caption{color:var(--kbq-list-states-selected-hover-caption-color)}.kbq-option.kbq-disabled{background:var(--kbq-list-states-disabled-container-background)}.kbq-option.kbq-disabled .kbq-option-text{color:var(--kbq-list-states-disabled-text-color)}.kbq-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color)}.kbq-option.kbq-disabled .kbq-option-caption{color:var(--kbq-list-states-disabled-caption-color)}.kbq-option:is(.kbq-selected,.kbq-focused):has(+:is(.kbq-selected,.kbq-focused)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-option:is(.kbq-selected,.kbq-focused)+:is(.kbq-selected,.kbq-focused){border-top-left-radius:0;border-top-right-radius:0}.kbq-option-multiple.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-multiple-states-selected-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-option-multiple.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-list-multiple-states-selected-hover-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-text,.kbq-option-multiple.kbq-selected:not(.kbq-disabled):hover .kbq-option-text{color:var(--kbq-list-multiple-states-selected-hover-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-option-multiple.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-caption,.kbq-option-multiple.kbq-selected:not(.kbq-disabled):hover .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color)}.cdk-keyboard-focused .kbq-option.kbq-active{border-color:var(--kbq-list-states-focused-focus-outline-color)}.kbq-option{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-list-option-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-list,.kbq-list-selection{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-size-header-padding-top: var(--kbq-size-s);--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);--kbq-list-size-subheading-padding-top: var(--kbq-size-m);--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}.kbq-option{--kbq-option-size-horizontal-padding: var(--kbq-size-m);--kbq-option-size-height: var(--kbq-size-3xl);--kbq-option-size-border-width: 2px;--kbq-option-border-radius: var(--kbq-size-xs)}.kbq-option{--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: KbqPseudoCheckboxModule }, { kind: "component", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], exportAs: ["kbqOption"], usesInheritance: true, ngImport: i0, template: "@if (showCheckbox) {\n    <ng-content select=\"kbq-pseudo-checkbox\">\n        <kbq-pseudo-checkbox [disabled]=\"disabled\" [state]=\"selected ? 'checked' : 'unchecked'\" />\n    </ng-content>\n}\n\n<span #kbqTitleText class=\"kbq-option-text\">\n    <ng-content />\n</span>\n", styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option .kbq-list-text:empty{display:none}.kbq-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-option{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option>.kbq-pseudo-checkbox{margin-top:var(--kbq-size-3xs);align-self:baseline}.kbq-option{border-radius:var(--kbq-option-border-radius)}.kbq-option:not(.kbq-disabled){cursor:pointer}.kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option-text:empty{display:none}.kbq-option-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option{background:var(--kbq-list-default-container-background)}.kbq-option .kbq-option-text{color:var(--kbq-list-default-text-color)}.kbq-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color)}.kbq-option .kbq-option-caption{color:var(--kbq-list-default-caption-color)}.kbq-option.kbq-active:not(.kbq-disabled){background:var(--kbq-list-states-hover-container-background)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-hover-text-color)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-hover-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-states-selected-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-selected-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-selected-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active{background:var(--kbq-list-states-selected-hover-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-text{color:var(--kbq-list-states-selected-hover-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-caption{color:var(--kbq-list-states-selected-hover-caption-color)}.kbq-option.kbq-disabled{background:var(--kbq-list-states-disabled-container-background)}.kbq-option.kbq-disabled .kbq-option-text{color:var(--kbq-list-states-disabled-text-color)}.kbq-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color)}.kbq-option.kbq-disabled .kbq-option-caption{color:var(--kbq-list-states-disabled-caption-color)}.kbq-option:is(.kbq-selected,.kbq-active):has(+:is(.kbq-selected,.kbq-active)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-option:is(.kbq-selected,.kbq-active)+:is(.kbq-selected,.kbq-active){border-top-left-radius:0;border-top-right-radius:0}.kbq-option-multiple.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-multiple-states-selected-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active{background:var(--kbq-list-multiple-states-selected-hover-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-text{color:var(--kbq-list-multiple-states-selected-hover-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color)}.kbq-option{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-list-option-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-list,.kbq-list-selection{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-size-header-padding-top: var(--kbq-size-s);--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);--kbq-list-size-subheading-padding-top: var(--kbq-size-m);--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}.kbq-option{--kbq-option-size-horizontal-padding: var(--kbq-size-m);--kbq-option-size-height: var(--kbq-size-3xl);--kbq-option-size-border-width: 2px;--kbq-option-border-radius: var(--kbq-size-xs)}.kbq-option{--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: KbqPseudoCheckboxModule }, { kind: "component", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOption, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-option', imports: [
                         KbqPseudoCheckboxModule
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqOption', host: {
+                    ], providers: [
+                        {
+                            provide: KBQ_TITLE_TEXT_REF,
+                            useExisting: KbqOption
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[attr.tabindex]': 'getTabIndex()',
                         class: 'kbq-option',
                         '[class.kbq-selected]': 'selected',
@@ -4100,31 +4874,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '(click)': 'handleClick($event)',
                         '(mouseenter)': 'onMouseenter()',
                         '(keydown)': 'handleKeydown($event)'
-                    }, providers: [
-                        {
-                            provide: KBQ_TITLE_TEXT_REF,
-                            useExisting: KbqOption
-                        }
-                    ], template: "@if (showCheckbox) {\n    <ng-content select=\"kbq-pseudo-checkbox\">\n        <kbq-pseudo-checkbox [disabled]=\"disabled\" [state]=\"selected ? 'checked' : 'unchecked'\" />\n    </ng-content>\n}\n\n<span #kbqTitleText class=\"kbq-option-text\">\n    <ng-content />\n</span>\n", styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option .kbq-list-text:empty{display:none}.kbq-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-option{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option>.kbq-pseudo-checkbox{margin-top:var(--kbq-size-3xs);align-self:baseline}.kbq-option{border-radius:var(--kbq-option-border-radius)}.kbq-option:not(.kbq-disabled){cursor:pointer}.kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option-text:empty{display:none}.kbq-option-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option{background:var(--kbq-list-default-container-background)}.kbq-option .kbq-option-text{color:var(--kbq-list-default-text-color)}.kbq-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color)}.kbq-option .kbq-option-caption{color:var(--kbq-list-default-caption-color)}.kbq-option.kbq-hovered:not(.kbq-disabled),.kbq-option:hover:not(.kbq-disabled){background:var(--kbq-list-states-hover-container-background)}.kbq-option.kbq-hovered:not(.kbq-disabled) .kbq-option-text,.kbq-option:hover:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-hover-text-color)}.kbq-option.kbq-hovered:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty,.kbq-option:hover:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color)}.kbq-option.kbq-hovered:not(.kbq-disabled) .kbq-option-caption,.kbq-option:hover:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-hover-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-states-selected-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-selected-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-selected-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-option.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-list-states-selected-hover-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-text,.kbq-option.kbq-selected:not(.kbq-disabled):hover .kbq-option-text{color:var(--kbq-list-states-selected-hover-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-option.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-caption,.kbq-option.kbq-selected:not(.kbq-disabled):hover .kbq-option-caption{color:var(--kbq-list-states-selected-hover-caption-color)}.kbq-option.kbq-disabled{background:var(--kbq-list-states-disabled-container-background)}.kbq-option.kbq-disabled .kbq-option-text{color:var(--kbq-list-states-disabled-text-color)}.kbq-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color)}.kbq-option.kbq-disabled .kbq-option-caption{color:var(--kbq-list-states-disabled-caption-color)}.kbq-option:is(.kbq-selected,.kbq-focused):has(+:is(.kbq-selected,.kbq-focused)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-option:is(.kbq-selected,.kbq-focused)+:is(.kbq-selected,.kbq-focused){border-top-left-radius:0;border-top-right-radius:0}.kbq-option-multiple.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-multiple-states-selected-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-hovered,.kbq-option-multiple.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-list-multiple-states-selected-hover-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-text,.kbq-option-multiple.kbq-selected:not(.kbq-disabled):hover .kbq-option-text{color:var(--kbq-list-multiple-states-selected-hover-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-action .kbq-icon.kbq-empty,.kbq-option-multiple.kbq-selected:not(.kbq-disabled):hover .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-hovered .kbq-option-caption,.kbq-option-multiple.kbq-selected:not(.kbq-disabled):hover .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color)}.cdk-keyboard-focused .kbq-option.kbq-active{border-color:var(--kbq-list-states-focused-focus-outline-color)}.kbq-option{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-list-option-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-list,.kbq-list-selection{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-size-header-padding-top: var(--kbq-size-s);--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);--kbq-list-size-subheading-padding-top: var(--kbq-size-m);--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}.kbq-option{--kbq-option-size-horizontal-padding: var(--kbq-size-m);--kbq-option-size-height: var(--kbq-size-3xl);--kbq-option-size-border-width: 2px;--kbq-option-border-radius: var(--kbq-size-xs)}.kbq-option{--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [KBQ_OPTION_PARENT_COMPONENT]
-                }] }, { type: KbqOptgroup, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { textElement: [{
+                    }, exportAs: 'kbqOption', template: "@if (showCheckbox) {\n    <ng-content select=\"kbq-pseudo-checkbox\">\n        <kbq-pseudo-checkbox [disabled]=\"disabled\" [state]=\"selected ? 'checked' : 'unchecked'\" />\n    </ng-content>\n}\n\n<span #kbqTitleText class=\"kbq-option-text\">\n    <ng-content />\n</span>\n", styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:32px;gap:var(--kbq-size-s);border:var(--kbq-size-3xs) solid transparent;padding:var(--kbq-size-xxs) calc(var(--kbq-size-m) - var(--kbq-size-3xs))}.kbq-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option .kbq-list-text:empty{display:none}.kbq-option .kbq-list-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs)}.kbq-option{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-option>.kbq-pseudo-checkbox{margin-top:var(--kbq-size-3xs);align-self:baseline}.kbq-option{border-radius:var(--kbq-option-border-radius)}.kbq-option:not(.kbq-disabled){cursor:pointer}.kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;overflow:hidden}.kbq-option-text:empty{display:none}.kbq-option-text{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option{background:var(--kbq-list-default-container-background)}.kbq-option .kbq-option-text{color:var(--kbq-list-default-text-color)}.kbq-option .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-default-icon-button-color)}.kbq-option .kbq-option-caption{color:var(--kbq-list-default-caption-color)}.kbq-option.kbq-active:not(.kbq-disabled){background:var(--kbq-list-states-hover-container-background)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-hover-text-color)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-hover-icon-button-color)}.kbq-option.kbq-active:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-hover-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-states-selected-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-states-selected-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-states-selected-caption-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active{background:var(--kbq-list-states-selected-hover-container-background)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-text{color:var(--kbq-list-states-selected-hover-text-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-selected-hover-icon-button-color)}.kbq-option.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-caption{color:var(--kbq-list-states-selected-hover-caption-color)}.kbq-option.kbq-disabled{background:var(--kbq-list-states-disabled-container-background)}.kbq-option.kbq-disabled .kbq-option-text{color:var(--kbq-list-states-disabled-text-color)}.kbq-option.kbq-disabled .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-states-disabled-icon-button-color)}.kbq-option.kbq-disabled .kbq-option-caption{color:var(--kbq-list-states-disabled-caption-color)}.kbq-option:is(.kbq-selected,.kbq-active):has(+:is(.kbq-selected,.kbq-active)){border-bottom-left-radius:0;border-bottom-right-radius:0}.kbq-option:is(.kbq-selected,.kbq-active)+:is(.kbq-selected,.kbq-active){border-top-left-radius:0;border-top-right-radius:0}.kbq-option-multiple.kbq-selected:not(.kbq-disabled){background:var(--kbq-list-multiple-states-selected-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-text{color:var(--kbq-list-multiple-states-selected-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled) .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-caption-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active{background:var(--kbq-list-multiple-states-selected-hover-container-background)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-text{color:var(--kbq-list-multiple-states-selected-hover-text-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-action .kbq-icon.kbq-empty{color:var(--kbq-list-multiple-states-selected-hover-icon-button-color)}.kbq-option-multiple.kbq-selected:not(.kbq-disabled).kbq-active .kbq-option-caption{color:var(--kbq-list-multiple-states-selected-hover-caption-color)}.kbq-option{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-list-option-caption{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ".kbq-list,.kbq-list-selection{--kbq-list-size-container-padding-left: var(--kbq-size-m);--kbq-list-size-container-padding-right: var(--kbq-size-m);--kbq-list-size-container-padding-vertical: var(--kbq-size-xs);--kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);--kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);--kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);--kbq-list-size-header-padding-top: var(--kbq-size-s);--kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-header-padding-horizontal: var(--kbq-size-m);--kbq-list-size-subheading-padding-top: var(--kbq-size-m);--kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);--kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}.kbq-option{--kbq-option-size-horizontal-padding: var(--kbq-size-m);--kbq-option-size-height: var(--kbq-size-3xl);--kbq-option-size-border-width: 2px;--kbq-option-border-radius: var(--kbq-size-xs)}.kbq-option{--kbq-list-default-container-background: transparent;--kbq-list-default-text-color: var(--kbq-foreground-contrast);--kbq-list-default-icon-color: var(--kbq-icon-contrast);--kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);--kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);--kbq-list-states-active-container-background: var(--kbq-states-background-transparent-active);--kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-container-background: var(--kbq-background-theme-less);--kbq-list-multiple-states-selected-container-background: var(--kbq-background-contrast-less);--kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);--kbq-list-multiple-states-selected-hover-container-background: var(--kbq-states-background-contrast-less-hover);--kbq-list-states-selected-active-container-background: var(--kbq-states-background-theme-less-active);--kbq-list-multiple-states-selected-active-container-background: var(--kbq-states-background-contrast-less-active);--kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);--kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);--kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);--kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-list-states-disabled-container-background: transparent;--kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled)}\n"] }]
+        }], propDecorators: { textElement: [{
                 type: ViewChild,
                 args: ['kbqTitleText', { static: false }]
             }], value: [{
                 type: Input
-            }], selectable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], userSelect: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], showCheckbox: [{
+            }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], userSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "userSelect", required: false }] }], showCheckbox: [{
                 type: Input
             }], onSelectionChange: [{
                 type: Output
@@ -4174,11 +4930,11 @@ function getOptionScrollPosition(optionIndex, optionHeight, currentScrollPositio
 }
 
 class KbqOptionModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqOptionModule, imports: [KbqPseudoCheckbox, KbqOption, KbqOptgroup, KbqOptionActionComponent], exports: [KbqOption, KbqOptgroup, KbqOptionActionComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqOptionModule, imports: [KbqOption] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqOptionModule, imports: [KbqPseudoCheckbox, KbqOption, KbqOptgroup, KbqOptionActionComponent], exports: [KbqOption, KbqOptgroup, KbqOptionActionComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOptionModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqOptionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOptionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [KbqPseudoCheckbox, KbqOption, KbqOptgroup, KbqOptionActionComponent],
@@ -4186,6 +4942,149 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 
+/**
+ * DI token a scrollable wrapper component can provide to expose itself as the scroll source
+ * for a co-located `KbqOverflowShadowContainer` (see `KbqScrollbar`).
+ */
+const KBQ_OVERFLOW_SHADOW_SOURCE = new InjectionToken('KBQ_OVERFLOW_SHADOW_SOURCE');
+/**
+ * Container directive that sits on the scrollable element. Listens for scroll events and
+ * keeps the `overflow` signal up to date, which is then read by `KbqOverflowShadowTop` and
+ * `KbqOverflowShadowBottom`.
+ *
+ * The scroll source is auto-detected: if `KBQ_OVERFLOW_SHADOW_SOURCE` is provided in the
+ * host's DI, that source is used; otherwise the native `scroll` event on the host element
+ * is observed.
+ *
+ * In addition to scroll events, the directive observes the scroll source's box-size changes
+ * via CDK's `SharedResizeObserver` — this covers layout changes that happen without a scroll
+ * and alter the viewport size (modal open/close animation, window resize, reflow that resizes
+ * the element). Content that only grows `scrollHeight` without changing the element's box size
+ * is not detected by the resize observer; call `checkOverflow()` manually for those cases.
+ */
+class KbqOverflowShadowContainer {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.hostElement = kbqInjectNativeElement();
+        this.externalSource = inject(KBQ_OVERFLOW_SHADOW_SOURCE, { optional: true, self: true });
+        this.sharedResizeObserver = inject(SharedResizeObserver);
+        /** Optional debounce for scroll events, in milliseconds. Default is 0. */
+        this.debounce = input(0, ...(ngDevMode ? [{ debugName: "debounce", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        /** Current shadow state. Updated on every scroll event. */
+        this.overflow = signal({ top: false, bottom: false }, ...(ngDevMode ? [{ debugName: "overflow" }] : []));
+        afterNextRender(() => {
+            this.checkOverflow();
+            this.observeResize();
+        });
+    }
+    ngOnInit() {
+        const source$ = this.externalSource
+            ? this.externalSource.onScroll
+            : fromEvent(this.hostElement, 'scroll', { passive: true });
+        const stream$ = this.debounce() > 0 ? source$.pipe(debounceTime(this.debounce())) : source$;
+        stream$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.checkOverflow());
+    }
+    /**
+     * Force-rechecks overflow and updates the signal. Calling this manually is normally not
+     * necessary — scroll events plus `SharedResizeObserver` cover the standard scenarios. Kept
+     * for rare cases when external code knows about a layout change more precisely than the
+     * browser observers (e.g. content that only grows `scrollHeight`).
+     */
+    checkOverflow() {
+        const source = this.getScrollSource();
+        if (!source)
+            return;
+        // `clientHeight` (content-box) is the visible scroll-viewport height. `Math.round` on the
+        // bottom comparison absorbs sub-pixel scroll metrics (HiDPI / browser zoom) so the bottom
+        // shadow reliably clears at the very bottom instead of lingering on a fractional gap.
+        const { scrollTop, clientHeight, scrollHeight } = source;
+        this.overflow.set({
+            top: scrollTop > 0,
+            bottom: Math.round(scrollTop + clientHeight) < scrollHeight
+        });
+    }
+    getScrollSource() {
+        return this.externalSource ? this.externalSource.getScrollElement() : this.hostElement;
+    }
+    observeResize() {
+        const source = this.getScrollSource();
+        if (!source)
+            return;
+        this.sharedResizeObserver
+            .observe(source)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.checkOverflow());
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOverflowShadowContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqOverflowShadowContainer, isStandalone: true, selector: "[kbqOverflowShadowContainer]", inputs: { debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["kbqOverflowShadowContainer"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOverflowShadowContainer, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqOverflowShadowContainer]',
+                    exportAs: 'kbqOverflowShadowContainer'
+                }]
+        }], ctorParameters: () => [], propDecorators: { debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }] } });
+/**
+ * Marker directive for the top-shadow indicator. Linked to the container directive via a
+ * template ref: `<header [kbqOverflowShadowTop]="containerRef">`.
+ *
+ * Sets an inline `box-shadow` on the host element using the value from the `shadow` input
+ * (the Koobiq token by default). Consumers can override the shadow from the outside by
+ * overriding the token `--kbq-shadow-overflow-normal-bottom` (or whichever token is passed
+ * via the `shadow` input) in the relevant cascade scope.
+ */
+class KbqOverflowShadowTop {
+    constructor() {
+        /**
+         * Reference to the container directive. May be `undefined` if the container has not
+         * been rendered yet (e.g. the indicator lives in one @if block and the container in
+         * another).
+         */
+        this.ref = input(undefined, ...(ngDevMode ? [{ debugName: "ref", alias: 'kbqOverflowShadowTop' }] : [{ alias: 'kbqOverflowShadowTop' }]));
+        /** Value of `box-shadow` when the shadow is active. Defaults to the standard Koobiq token. */
+        this.shadow = input('var(--kbq-shadow-overflow-normal-bottom)', ...(ngDevMode ? [{ debugName: "shadow" }] : []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOverflowShadowTop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqOverflowShadowTop, isStandalone: true, selector: "[kbqOverflowShadowTop]", inputs: { ref: { classPropertyName: "ref", publicName: "kbqOverflowShadowTop", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.box-shadow": "ref()?.overflow()?.top ? shadow() : null" } }, exportAs: ["kbqOverflowShadowTop"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOverflowShadowTop, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqOverflowShadowTop]',
+                    host: {
+                        '[style.box-shadow]': 'ref()?.overflow()?.top ? shadow() : null'
+                    },
+                    exportAs: 'kbqOverflowShadowTop'
+                }]
+        }], propDecorators: { ref: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqOverflowShadowTop", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }] } });
+/**
+ * Marker directive for the bottom-shadow indicator. Linked to the container directive via a
+ * template ref: `<footer [kbqOverflowShadowBottom]="containerRef">`.
+ *
+ * Sets an inline `box-shadow` on the host element. See {@link KbqOverflowShadowTop}.
+ */
+class KbqOverflowShadowBottom {
+    constructor() {
+        /** Reference to the container directive. See {@link KbqOverflowShadowTop.ref}. */
+        this.ref = input(undefined, ...(ngDevMode ? [{ debugName: "ref", alias: 'kbqOverflowShadowBottom' }] : [{ alias: 'kbqOverflowShadowBottom' }]));
+        /** Value of `box-shadow` when the shadow is active. Defaults to the standard Koobiq token. */
+        this.shadow = input('var(--kbq-shadow-overflow-normal-top)', ...(ngDevMode ? [{ debugName: "shadow" }] : []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOverflowShadowBottom, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqOverflowShadowBottom, isStandalone: true, selector: "[kbqOverflowShadowBottom]", inputs: { ref: { classPropertyName: "ref", publicName: "kbqOverflowShadowBottom", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.box-shadow": "ref()?.overflow()?.bottom ? shadow() : null" } }, exportAs: ["kbqOverflowShadowBottom"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqOverflowShadowBottom, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqOverflowShadowBottom]',
+                    host: {
+                        '[style.box-shadow]': 'ref()?.overflow()?.bottom ? shadow() : null'
+                    },
+                    exportAs: 'kbqOverflowShadowBottom'
+                }]
+        }], propDecorators: { ref: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqOverflowShadowBottom", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }] } });
+
 const POSITION_MAP = {
     top: {
         originX: 'center',
@@ -4473,9 +5372,8 @@ var PopUpSizes;
 (function (PopUpSizes) {
     PopUpSizes["Small"] = "small";
     PopUpSizes["Medium"] = "medium";
-    // Normal is deprecated and will be deleted in 16.x
-    PopUpSizes["Normal"] = "medium";
     PopUpSizes["Large"] = "large";
+    PopUpSizes["Custom"] = "custom";
 })(PopUpSizes || (PopUpSizes = {}));
 /**
  * Default value when configuring overlay in popups (Autocomplete, Datepicker, Dropdown, Select, Tags Autocomplete,
@@ -4561,9 +5459,16 @@ class KbqPopUp {
         return this.visibility === PopUpVisibility.Visible;
     }
     updateClassMap(placement, customClass, classMap) {
+        // `customClass` may be a whitespace-separated list of class names; expand it into
+        // individual keys so the native `[class]` binding (which doesn't tokenise object keys)
+        // applies each class correctly.
+        const customClasses = {};
+        for (const token of (customClass ?? '').split(/\s+/).filter(Boolean)) {
+            customClasses[token] = true;
+        }
         this.classMap = {
             [`${this.prefix}_placement-${placement}`]: true,
-            [customClass]: !!customClass,
+            ...customClasses,
             ...classMap
         };
     }
@@ -4629,10 +5534,10 @@ class KbqPopUp {
             this.renderer.setStyle(this.trigger.overlayRef?.overlayElement, oppositeSide, 'unset');
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPopUp, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqPopUp, isStandalone: true, host: { listeners: { "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPopUp, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqPopUp, isStandalone: true, host: { listeners: { "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPopUp, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPopUp, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -4999,10 +5904,10 @@ class KbqPopUpTrigger {
             this.hide();
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPopUpTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqPopUpTrigger, isStandalone: true, host: { listeners: { "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPopUpTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqPopUpTrigger, isStandalone: true, host: { listeners: { "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqPopUpTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqPopUpTrigger, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -5036,10 +5941,10 @@ const KBQ_SELECT_SCROLL_STRATEGY_PROVIDER = {
 };
 
 class KbqSelectTrigger {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqSelectTrigger, isStandalone: true, selector: "kbq-select-trigger, [kbq-select-trigger]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqSelectTrigger, isStandalone: true, selector: "kbq-select-trigger, [kbq-select-trigger]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSelectTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-select-trigger, [kbq-select-trigger]'
@@ -5047,39 +5952,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         }] });
 class KbqSelectMatcher {
     constructor() {
-        this.useDefaultHandlers = true;
+        this.useDefaultHandlers = input(true, ...(ngDevMode ? [{ debugName: "useDefaultHandlers", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSelectMatcher, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: KbqSelectMatcher, isStandalone: true, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: { useDefaultHandlers: ["useDefaultHandlers", "useDefaultHandlers", booleanAttribute] }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectMatcher, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqSelectMatcher, isStandalone: true, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: { useDefaultHandlers: { classPropertyName: "useDefaultHandlers", publicName: "useDefaultHandlers", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSelectMatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectMatcher, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-select-matcher, [kbq-select-matcher]'
                 }]
-        }], propDecorators: { useDefaultHandlers: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+        }], propDecorators: { useDefaultHandlers: [{ type: i0.Input, args: [{ isSignal: true, alias: "useDefaultHandlers", required: false }] }] } });
 class KbqSelectSearchEmptyResult {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSelectSearchEmptyResult, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqSelectSearchEmptyResult, isStandalone: true, selector: "[kbq-select-search-empty-result]", host: { classAttribute: "kbq-select-search-empty-result kbq-select__no-options-message" }, exportAs: ["kbqSelectSearchEmptyResult"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectSearchEmptyResult, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqSelectSearchEmptyResult, isStandalone: true, selector: "[kbq-select-search-empty-result]", host: { classAttribute: "kbq-select-search-empty-result kbq-select__no-options-message" }, exportAs: ["kbqSelectSearchEmptyResult"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSelectSearchEmptyResult, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectSearchEmptyResult, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-select-search-empty-result]',
-                    exportAs: 'kbqSelectSearchEmptyResult',
                     host: {
                         class: 'kbq-select-search-empty-result kbq-select__no-options-message'
-                    }
+                    },
+                    exportAs: 'kbqSelectSearchEmptyResult'
                 }]
         }] });
 class KbqSelectFooter {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSelectFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqSelectFooter, isStandalone: true, selector: "kbq-select-footer, [kbq-select-footer]", host: { classAttribute: "kbq-select__footer" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqSelectFooter, isStandalone: true, selector: "kbq-select-footer, [kbq-select-footer]", host: { classAttribute: "kbq-select__footer" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSelectFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectFooter, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-select-footer, [kbq-select-footer]',
@@ -5088,10 +5990,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         }] });
 class KbqSelectSearch {
     get ngControl() {
-        return this.formField.control.ngControl;
+        return this.formField.control().ngControl;
     }
-    constructor(formField) {
-        this.formField = formField;
+    constructor() {
+        this.formField = inject(KBQ_FORM_FIELD_REF, { optional: true });
         this.changes = new EventEmitter();
         this.isSearchChanged = false;
         this.searchChangesSubscription = new Subscription();
@@ -5099,22 +6001,22 @@ class KbqSelectSearch {
         this.formField.inOverlay.set(true);
     }
     setPlaceholder(value) {
-        this.formField.control.placeholder = value;
+        this.formField.control().placeholder = value;
     }
     hasPlaceholder() {
         return !!this.formField?.control.placeholder;
     }
     focus() {
-        this.formField.focusViaKeyboard();
+        this.formField.focus();
     }
     reset() {
         this.ngControl?.reset();
     }
     value() {
-        return this.formField.control.value;
+        return this.formField.control().value;
     }
     ngAfterContentInit() {
-        if (this.formField.control.controlType !== 'input') {
+        if (this.formField.control().controlType !== 'input') {
             throw Error('KbqSelectSearch does not work without kbqInput');
         }
         if (!this.ngControl) {
@@ -5141,24 +6043,19 @@ class KbqSelectSearch {
             event.stopPropagation();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSelectSearch, deps: [{ token: KBQ_FORM_FIELD_REF, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqSelectSearch, isStandalone: true, selector: "[kbqSelectSearch]", host: { listeners: { "keydown": "handleKeydown($event)" } }, exportAs: ["kbqSelectSearch"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectSearch, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqSelectSearch, isStandalone: true, selector: "[kbqSelectSearch]", host: { listeners: { "keydown": "handleKeydown($event)" } }, exportAs: ["kbqSelectSearch"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSelectSearch, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSelectSearch, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqSelectSearch]',
-                    exportAs: 'kbqSelectSearch',
                     host: {
                         '(keydown)': 'handleKeydown($event)'
-                    }
+                    },
+                    exportAs: 'kbqSelectSearch'
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [KBQ_FORM_FIELD_REF]
-                }] }] });
+        }], ctorParameters: () => [] });
 /**
  * Abstract class representing a customizable select component with an overlay.
  *
@@ -5224,10 +6121,10 @@ class KbqAbstractSelect {
     resolveSearchMinOptionsThreshold(value) {
         return value === 'auto' ? KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD : value;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAbstractSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqAbstractSelect, isStandalone: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAbstractSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqAbstractSelect, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqAbstractSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqAbstractSelect, decorators: [{
             type: Directive
         }] });
 
@@ -5290,10 +6187,10 @@ class KbqMeasureScrollbarService {
         this.document.body.removeChild(scrollDiv);
         this._scrollBarWidth = width;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqMeasureScrollbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqMeasureScrollbarService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqMeasureScrollbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqMeasureScrollbarService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqMeasureScrollbarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqMeasureScrollbarService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -5366,45 +6263,155 @@ class ThemeService {
     getTheme() {
         return this.current.value;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/* eslint-disable no-restricted-globals -- testing utilities legitimately use raw `document`/`window` */
+/** Creates a browser MouseEvent with the specified options. */
+function createMouseEvent(type, x = 0, y = 0, button = 0) {
+    const event = document.createEvent('MouseEvent');
+    event.initMouseEvent(type, false, false, window /* view */, 0, x /* screenX */, y /* screenY */, x /* clientX */, y /* clientY */, false, false, false, false, button /* button */, null);
+    return event;
+}
+/** Creates a browser TouchEvent with the specified pointer coordinates. */
+function createTouchEvent(type, pageX = 0, pageY = 0) {
+    // In favor of creating events that work for most of the browsers, the event is created
+    // as a basic UI Event. The necessary details for the event will be set manually.
+    const event = document.createEvent('UIEvent');
+    const touchDetails = { pageX, pageY };
+    event.initUIEvent(type, true, true, window, 0);
+    // Most of the browsers don't have a "initTouchEvent" method that can be used to define
+    // the touch details.
+    Object.defineProperties(event, {
+        touches: { value: [touchDetails] }
+    });
+    return event;
+}
+/** Dispatches a keydown event from an element. */
+function createKeyboardEvent(type, keyCode, target, key) {
+    const event = document.createEvent('KeyboardEvent');
+    // Firefox does not support `initKeyboardEvent`, but supports `initKeyEvent`.
+    if (event.initKeyEvent) {
+        event.initKeyEvent(type, true, true, window, 0, 0, 0, 0, 0, keyCode);
+    }
+    else {
+        event.initKeyboardEvent(type, true, true, window, 0, key, 0, '', false);
+    }
+    // Webkit Browsers don't set the keyCode when calling the init function.
+    // See related bug https://bugs.webkit.org/show_bug.cgi?id=16735
+    Object.defineProperties(event, {
+        keyCode: { get: () => keyCode },
+        key: { get: () => key }
+    });
+    // Only override `target` when explicitly provided; otherwise let jsdom set it during dispatch.
+    if (target !== undefined) {
+        Object.defineProperty(event, 'target', { get: () => target });
+    }
+    return event;
+}
+/** Creates a fake event object with any desired event type. */
+function createFakeEvent(type, canBubble = false, cancelable = true) {
+    const event = document.createEvent('Event');
+    event.initEvent(type, canBubble, cancelable);
+    return event;
+}
+
+/** Utility to dispatch any event on a Node. */
+function dispatchEvent(node, event) {
+    node.dispatchEvent(event);
+    return event;
+}
+/** Shorthand to dispatch a fake event on a specified node. */
+function dispatchFakeEvent(node, type, canBubble) {
+    return dispatchEvent(node, createFakeEvent(type, canBubble));
+}
+/** Shorthand to dispatch a keyboard event with a specified key code. */
+function dispatchKeyboardEvent(node, type, keyCode, target) {
+    return dispatchEvent(node, createKeyboardEvent(type, keyCode, target));
+}
+/** Shorthand to dispatch a mouse event on the specified coordinates. */
+function dispatchMouseEvent(node, type, x = 0, y = 0, event = createMouseEvent(type, x, y)) {
+    return dispatchEvent(node, event);
+}
+/** Shorthand to dispatch a touch event on the specified coordinates. */
+function dispatchTouchEvent(node, type, x = 0, y = 0) {
+    return dispatchEvent(node, createTouchEvent(type, x, y));
+}
+
 /**
- * @docs-private
+ * Patches an elements focus and blur methods to emit events consistently and predictably.
+ * This is necessary, because some browsers, like IE11, will call the focus handlers asynchronously,
+ * while others won't fire them at all if the browser window is not focused.
  */
-const validationTooltipShowDelay = 10;
+function patchElementFocus(element) {
+    element.focus = () => dispatchFakeEvent(element, 'focus');
+    element.blur = () => dispatchFakeEvent(element, 'blur');
+}
+
 /**
+ * Mock synchronous NgZone implementation that can be used
+ * to flush out `onStable` subscriptions in tests.
+ *
+ * via: https://github.com/angular/angular/blob/master/packages/core/testing/src/ng_zone_mock.ts
  * @docs-private
  */
-const validationTooltipHideDelay = 3000;
+class MockNgZone extends NgZone {
+    constructor() {
+        super({ enableLongStackTrace: false });
+        this.onStable = new EventEmitter(false);
+    }
+    run(fn) {
+        return fn();
+    }
+    runOutsideAngular(fn) {
+        return fn();
+    }
+    simulateZoneExit() {
+        this.onStable.emit(null);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MockNgZone, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MockNgZone }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MockNgZone, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/**
+ * Focuses an input, sets its value and dispatches
+ * the `input` event, simulating the user typing.
+ * @param value Value to be set on the input.
+ * @param element Element onto which to set the value.
+ */
+function typeInElement(value, element) {
+    element.focus();
+    element.value = value;
+    dispatchFakeEvent(element, 'input');
+}
+
+function wrappedErrorMessage(e) {
+    const escapedMessage = e.message.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
+    return new RegExp(escapedMessage);
+}
+
 /**
- * @deprecated Will be removed in next major release.
- *
  * @docs-private
  */
-const KBQ_VALIDATION = new InjectionToken('KbqUseValidation', {
-    factory: () => ({ useValidation: true })
-});
+const validationTooltipShowDelay = 10;
 /**
- * Utility provider which disables legacy validation directive.
- *
- * Will be removed in next major release, so legacy validation will be disabled by default.
+ * @docs-private
  */
-const kbqDisableLegacyValidationDirectiveProvider = () => ({
-    provide: KBQ_VALIDATION,
-    useValue: { useValidation: false }
-});
+const validationTooltipHideDelay = 3000;
 
-const VERSION = new Version('19.8.1+sha-7bec628');
+const VERSION = new Version('20.0.0+sha-17501d3');
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ARROW_BOTTOM_MARGIN_AND_HALF_HEIGHT, AbsoluteDateFormatterImpurePipe, AbsoluteDateFormatterPipe, AbsoluteDateShortFormatterImpurePipe, AbsoluteDateShortFormatterPipe, AbsoluteDateTimeFormatterImpurePipe, AbsoluteDateTimeFormatterPipe, AbsoluteShortDateTimeFormatterImpurePipe, AbsoluteShortDateTimeFormatterPipe, AnimationCurves, BOTTOM_LEFT_POSITION_PRIORITY, BOTTOM_POSITION_PRIORITY, BOTTOM_RIGHT_POSITION_PRIORITY, BaseFormatterPipe, DateAdapter, DateFormatter, EXTENDED_OVERLAY_POSITIONS, EmptyFocusTrapStrategy, ErrorStateMatcher, FileValidators, KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER, KBQ_DATE_FORMATS, KBQ_DATE_LOCALE, KBQ_DATE_LOCALE_FACTORY, KBQ_DEFAULT_LOCALE_DATA_FACTORY, KBQ_DEFAULT_LOCALE_ID, KBQ_DEFAULT_PRECISION_SEPARATOR, KBQ_FORM_FIELD_REF, KBQ_INVALID_VALUE_ERROR, KBQ_LOCALE_DATA, KBQ_LOCALE_ID, KBQ_LOCALE_SERVICE, KBQ_LOCALE_SERVICE_LANG_ATTR_NAME, KBQ_NUMBER_FORMATTER_DEFAULT_OPTIONS, KBQ_NUMBER_FORMATTER_OPTIONS, KBQ_OPTION_ACTION_PARENT, KBQ_OPTION_PARENT_COMPONENT, KBQ_PARENT_ANIMATION_COMPONENT, KBQ_PARENT_POPUP, KBQ_SANITY_CHECKS, KBQ_SELECT_SCROLL_STRATEGY, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER, KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD, KBQ_SIZE_UNITS_CONFIG, KBQ_SIZE_UNITS_DEFAULT_CONFIG, KBQ_TITLE_TEXT_REF, KBQ_VALIDATION, KBQ_WINDOW, KbqAbstractSelect, KbqActionContainer, KbqAnimationCurves, KbqAnimationDurations, KbqColorDirective, KbqCommonModule, KbqComponentColors, KbqDataSizePipe, KbqDecimalPipe, KbqDefaultThemes, KbqErrorStateTracker, KbqFieldSizingContent, KbqForm, KbqFormElement, KbqFormattersModule, KbqFormsModule, KbqHighlightModule, KbqHighlightPipe, KbqHover, KbqLine, KbqLineSetter, KbqLocaleService, KbqLocaleServiceModule, KbqMeasureScrollbarService, KbqMeasurementSystem, KbqNormalizeWhitespace, KbqOptgroup, KbqOption, KbqOptionActionComponent, KbqOptionBase, KbqOptionModule, KbqOptionSelectionChange, KbqPopUp, KbqPopUpTrigger, KbqPseudoCheckbox, KbqPseudoCheckboxModule, KbqReadStateDirective, KbqRectangleItem, KbqRoundDecimalPipe, KbqSelectFooter, KbqSelectMatcher, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqSelectTrigger, KbqTableNumberPipe, KbqThemeSelector, KbqVirtualOption, LEFT_BOTTOM_POSITION_PRIORITY, LEFT_POSITION_PRIORITY, LEFT_TOP_POSITION_PRIORITY, MeasurementSystem, MultipleMode, NUMBER_FORMAT_REGEXP, POSITION_MAP, POSITION_PRIORITY_STRATEGY, POSITION_TO_CSS_MAP, PasswordValidators, PopUpPlacements, PopUpSizes, PopUpTriggers, PopUpVisibility, RIGHT_BOTTOM_POSITION_PRIORITY, RIGHT_POSITION_PRIORITY, RIGHT_TOP_POSITION_PRIORITY, RangeDateFormatterImpurePipe, RangeDateFormatterPipe, RangeDateTimeFormatterImpurePipe, RangeDateTimeFormatterPipe, RangeMiddleDateTimeFormatterImpurePipe, RangeMiddleDateTimeFormatterPipe, RangeShortDateFormatterImpurePipe, RangeShortDateFormatterPipe, RangeShortDateTimeFormatterImpurePipe, RangeShortDateTimeFormatterPipe, RelativeDateFormatterImpurePipe, RelativeDateFormatterPipe, RelativeDateTimeFormatterImpurePipe, RelativeDateTimeFormatterPipe, RelativeShortDateFormatterImpurePipe, RelativeShortDateFormatterPipe, RelativeShortDateTimeFormatterImpurePipe, RelativeShortDateTimeFormatterPipe, SELECT_PANEL_VIEWPORT_PADDING, ShowOnControlDirtyErrorStateMatcher, ShowOnFormSubmitErrorStateMatcher, ShowRequiredOnSubmitErrorStateMatcher, TOP_LEFT_POSITION_PRIORITY, TOP_POSITION_PRIORITY, TOP_RIGHT_POSITION_PRIORITY, ThemePalette, ThemeService, VERSION, applyPopupMargins, checkAndNormalizeLocalizedNumber, countGroupLabelsBeforeOption, defaultOffsetY, enUSFormattersData, enUSLocaleData, esLAFormattersData, esLALocaleData, escapeRegExp, fadeAnimation, formatDataSize, formatNumberWithLocale, getFormattedSizeParts, getHumanizedBytes, getKbqSelectDynamicMultipleError, getKbqSelectNonArrayValueError, getKbqSelectNonFunctionValueError, getNodesWithoutComments, getOptionScrollPosition, isBoolean, isElement, isHtmlElement, isHtmlElementOrNull, isMac, isNull, isUndefined, isWithin, kbqDisableLegacyValidationDirectiveProvider, kbqErrorStateMatcherProvider, kbqFilesizeFormatterConfigurationProvider, kbqHighlightMark, kbqInjectNativeElement, kbqLocaleServiceLangAttrNameProvider, kbqSelectAnimations, kbqSelectScrollStrategyProviderFactory, leftIconClassName, mixinColor, mixinDisabled, mixinErrorState, mixinTabIndex, normalizeNumber, numberByParts, ptBRFormattersData, ptBRLocaleData, rightIconClassName, ruRUFormattersData, ruRULocaleData, selectEvents, tkTMFormattersData, tkTMLocaleData, toBoolean, validationTooltipHideDelay, validationTooltipShowDelay };
+export { A, ALT, APOSTROPHE, ARROW_BOTTOM_MARGIN_AND_HALF_HEIGHT, AT_SIGN, AbsoluteDateFormatterImpurePipe, AbsoluteDateFormatterPipe, AbsoluteDateShortFormatterImpurePipe, AbsoluteDateShortFormatterPipe, AbsoluteDateTimeFormatterImpurePipe, AbsoluteDateTimeFormatterPipe, AbsoluteShortDateTimeFormatterImpurePipe, AbsoluteShortDateTimeFormatterPipe, ActiveDescendantKeyManager, B, BACKSLASH, BACKSPACE, BOTTOM_LEFT_POSITION_PRIORITY, BOTTOM_POSITION_PRIORITY, BOTTOM_RIGHT_POSITION_PRIORITY, BaseFormatterPipe, BaseLocaleAwareFormatterPipe, C, CAPS_LOCK, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, D, DASH, DELETE, DOWN_ARROW, DateAdapter, DateFormatter, E, EIGHT, END, ENTER, EQUALS, ESCAPE, EXTENDED_OVERLAY_POSITIONS, EmptyFocusTrapStrategy, ErrorStateMatcher, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FOUR, FileValidators, FocusKeyManager, G, H, HOME, I, INSERT, J, K, KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER, KBQ_DATE_FORMATS, KBQ_DATE_LOCALE, KBQ_DATE_LOCALE_FACTORY, KBQ_DEFAULT_LOCALE_DATA_FACTORY, KBQ_DEFAULT_LOCALE_ID, KBQ_DEFAULT_PRECISION_SEPARATOR, KBQ_FORM_FIELD_REF, KBQ_INVALID_VALUE_ERROR, KBQ_LOCALE_DATA, KBQ_LOCALE_ID, KBQ_LOCALE_SERVICE, KBQ_LOCALE_SERVICE_LANG_ATTR_NAME, KBQ_NUMBER_FORMATTER_DEFAULT_OPTIONS, KBQ_NUMBER_FORMATTER_OPTIONS, KBQ_OPTION_ACTION_PARENT, KBQ_OPTION_PARENT_COMPONENT, KBQ_OVERFLOW_SHADOW_SOURCE, KBQ_PARENT_ANIMATION_COMPONENT, KBQ_PARENT_POPUP, KBQ_SELECT_SCROLL_STRATEGY, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER, KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD, KBQ_SIZE_UNITS_CONFIG, KBQ_SIZE_UNITS_DEFAULT_CONFIG, KBQ_TITLE_TEXT_REF, KBQ_WINDOW, KbqAbsoluteLongDatePipe, KbqAbsoluteLongDateTimePipe, KbqAbsoluteShortDatePipe, KbqAbsoluteShortDateTimePipe, KbqAbstractSelect, KbqActionContainer, KbqAnimationCurves, KbqAnimationDurations, KbqColorDirective, KbqComponentColors, KbqDataSizePipe, KbqDecimalPipe, KbqDefaultThemes, KbqErrorStateTracker, KbqFieldSizingContent, KbqForm, KbqFormElement, KbqFormattersModule, KbqFormsModule, KbqHighlightBackgroundPipe, KbqHighlightModule, KbqHighlightPipe, KbqHover, KbqLine, KbqLineSetter, KbqLocaleService, KbqLocaleServiceModule, KbqMeasureScrollbarService, KbqMeasurementSystem, KbqNormalizeWhitespace, KbqOptgroup, KbqOption, KbqOptionActionComponent, KbqOptionBase, KbqOptionModule, KbqOptionSelectionChange, KbqOverflowShadowBottom, KbqOverflowShadowContainer, KbqOverflowShadowTop, KbqPopUp, KbqPopUpTrigger, KbqPseudoCheckbox, KbqPseudoCheckboxModule, KbqRangeLongDatePipe, KbqRangeLongDateTimePipe, KbqRangeMiddleDateTimePipe, KbqRangeShortDatePipe, KbqRangeShortDateTimePipe, KbqReadStateDirective, KbqRectangleItem, KbqRelativeLongDatePipe, KbqRelativeLongDateTimePipe, KbqRelativeShortDatePipe, KbqRelativeShortDateTimePipe, KbqRoundDecimalPipe, KbqSelectFooter, KbqSelectMatcher, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqSelectTrigger, KbqTableNumberPipe, KbqThemeSelector, KbqVirtualOption, L, LAST_MEDIA, LEFT_ARROW, LEFT_BOTTOM_POSITION_PRIORITY, LEFT_POSITION_PRIORITY, LEFT_TOP_POSITION_PRIORITY, ListKeyManager, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, META, MUTE, MockNgZone, MultipleMode, N, NINE, NUMBER_FORMAT_REGEXP, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PAUSE, PERIOD, PLUS_SIGN, POSITION_MAP, POSITION_PRIORITY_STRATEGY, POSITION_TO_CSS_MAP, PRINT_SCREEN, PasswordValidators, PopUpPlacements, PopUpSizes, PopUpTriggers, PopUpVisibility, Q, QUESTION_MARK, R, RIGHT_ARROW, RIGHT_BOTTOM_POSITION_PRIORITY, RIGHT_POSITION_PRIORITY, RIGHT_TOP_POSITION_PRIORITY, RangeDateFormatterImpurePipe, RangeDateFormatterPipe, RangeDateTimeFormatterImpurePipe, RangeDateTimeFormatterPipe, RangeMiddleDateTimeFormatterImpurePipe, RangeMiddleDateTimeFormatterPipe, RangeShortDateFormatterImpurePipe, RangeShortDateFormatterPipe, RangeShortDateTimeFormatterImpurePipe, RangeShortDateTimeFormatterPipe, RelativeDateFormatterImpurePipe, RelativeDateFormatterPipe, RelativeDateTimeFormatterImpurePipe, RelativeDateTimeFormatterPipe, RelativeShortDateFormatterImpurePipe, RelativeShortDateFormatterPipe, RelativeShortDateTimeFormatterImpurePipe, RelativeShortDateTimeFormatterPipe, S, SCROLL_LOCK, SELECT_PANEL_VIEWPORT_PADDING, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SPACE, ShowOnControlDirtyErrorStateMatcher, ShowOnFormSubmitErrorStateMatcher, ShowRequiredOnSubmitErrorStateMatcher, T, TAB, THREE, TILDE, TOP_LEFT_POSITION_PRIORITY, TOP_POSITION_PRIORITY, TOP_RIGHT_POSITION_PRIORITY, TWO, ThemePalette, ThemeService, U, UP_ARROW, V, VERSION, VOLUME_DOWN, VOLUME_UP, W, X, Y, Z, ZERO, applyPopupMargins, checkAndNormalizeLocalizedNumber, countGroupLabelsBeforeOption, createFakeEvent, createKeyboardEvent, createMouseEvent, createTouchEvent, defaultOffsetY, dispatchEvent, dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent, dispatchTouchEvent, enUSFormattersData, enUSLocaleData, esLAFormattersData, esLALocaleData, escapeRegExp, fadeAnimation, formatNumberWithLocale, getFormattedSizeParts, getHumanizedBytes, getKbqSelectDynamicMultipleError, getKbqSelectNonArrayValueError, getKbqSelectNonFunctionValueError, getNodesWithoutComments, getOptionScrollPosition, hasModifierKey, isBoolean, isControl, isCopy, isDigit, isElement, isFunctionKey, isHorizontalMovement, isHtmlElement, isHtmlElementOrNull, isInput, isLeftBracket, isLetterKey, isMac, isNull, isNumberKey, isNumpadKey, isRightBracket, isSelectAll, isUndefined, isVerticalMovement, isWithin, kbqErrorStateMatcherProvider, kbqFilesizeFormatterConfigurationProvider, kbqHighlightBackgroundMark, kbqHighlightMark, kbqInjectNativeElement, kbqLocaleServiceLangAttrNameProvider, kbqSelectAnimations, kbqSelectScrollStrategyProviderFactory, leftIconClassName, mixinColor, mixinDisabled, mixinErrorState, mixinTabIndex, normalizeNumber, numberByParts, patchElementFocus, ptBRFormattersData, ptBRLocaleData, rightIconClassName, ruRUFormattersData, ruRULocaleData, selectEvents, tkTMFormattersData, tkTMLocaleData, typeInElement, validationTooltipHideDelay, validationTooltipShowDelay, wrappedErrorMessage };
 //# sourceMappingURL=koobiq-components-core.mjs.map