@koobiq/components 19.8.3 → 20.1.0

package/fesm2022/koobiq-components-core.mjs

@@ -1,35 +1,591 @@
-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, ApplicationRef, 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 { Overlay, ScrollDispatcher, CdkScrollable } from '@angular/cdk/overlay';
+import { SharedResizeObserver } from '@angular/cdk/observers/private';
+import { Overlay, OverlayContainer, 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 { ViewportRuler } from '@angular/cdk/scrolling';
 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 +682,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 +750,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 +776,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 +885,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 +908,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 +940,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 +1012,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 +1029,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 +1040,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 +1054,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 +1173,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: () => [] });
 
@@ -789,10 +1268,16 @@ const enUSLocaleData = {
             error: 'The search with such name already exists',
             errorHint: 'Could not save the filter. Try again or contact the administrator.',
             saveButton: 'Save',
-            cancelButton: 'Cancel'
+            cancelButton: 'Cancel',
+            actionsTooltip: 'Filter actions'
         },
         add: {
-            tooltip: 'Add filter'
+            tooltip: 'Add filter',
+            addedAnnouncement: '{{ name }} filter added'
+        },
+        refresher: {
+            refresh: 'Refresh',
+            settings: 'Refresh settings'
         },
         pipe: {
             clearButtonTooltip: 'Clear',
@@ -846,10 +1331,13 @@ const enUSLocaleData = {
             to: 'to',
             apply: 'Apply',
             cancel: 'Cancel',
-            rangeLabel: 'for period',
+            rangeLabel: 'Period',
             allTime: 'for all time',
             currentQuarter: 'for the current quarter',
-            currentYear: 'for the current year'
+            currentYear: 'for the current year',
+            allTimeOption: 'All time',
+            currentQuarterOption: 'Current quarter',
+            currentYearOption: 'Current year'
         },
         durationTemplate: {
             title: {
@@ -891,31 +1379,31 @@ const enUSLocaleData = {
                 LAST_PART_SEPARATOR: '',
                 YEARS: `{years, plural,
                 one {# year}
-                other {last # years}
+                other {Last # years}
             }`,
                 MONTHS: `{months, plural,
-                one {last month}
-                other {last # months}
+                one {Last month}
+                other {Last # months}
             }`,
                 WEEKS: `{weeks, plural,
-                one {last week}
-                other {last # weeks}
+                one {Last week}
+                other {Last # weeks}
             }`,
                 DAYS: `{days, plural,
-                one {last day}
-                other {last # days}
+                one {Last day}
+                other {Last # days}
             }`,
                 HOURS: `{hours, plural,
-                one {last hour}
-                other {last # hours}
+                one {Last hour}
+                other {Last # hours}
             }`,
                 MINUTES: `{minutes, plural,
-                one {last minute}
-                other {last # minutes}
+                one {Last minute}
+                other {Last # minutes}
             }`,
                 SECONDS: `{seconds, plural,
-                one {last second}
-                other {last # seconds}
+                one {Last second}
+                other {Last # seconds}
             }`,
                 YEARS_FRACTION: `{years} years`,
                 MONTHS_FRACTION: `{months} months`
@@ -1005,10 +1493,16 @@ const esLALocaleData = {
             error: 'Ya existe una búsqueda con ese nombre',
             errorHint: 'No se pudo guardar el filtro. Intente de nuevo o comuníquese con el administrador.',
             saveButton: 'Guardar',
-            cancelButton: 'Cancelar'
+            cancelButton: 'Cancelar',
+            actionsTooltip: 'Acciones de filtro'
         },
         add: {
-            tooltip: 'Agregar filtro'
+            tooltip: 'Agregar filtro',
+            addedAnnouncement: 'Filtro {{ name }} agregado'
+        },
+        refresher: {
+            refresh: 'Actualizar',
+            settings: 'Configuración de actualización'
         },
         pipe: {
             clearButtonTooltip: 'Borrar',
@@ -1062,10 +1556,13 @@ const esLALocaleData = {
             to: 'a',
             apply: 'Aplicar',
             cancel: 'Cancelar',
-            rangeLabel: 'para el período',
+            rangeLabel: 'Período',
             allTime: 'por todo el tiempo',
             currentQuarter: 'por el trimestre actual',
-            currentYear: 'por el año actual'
+            currentYear: 'por el año actual',
+            allTimeOption: 'Todo el tiempo',
+            currentQuarterOption: 'Trimestre actual',
+            currentYearOption: 'Año actual'
         },
         durationTemplate: {
             title: {
@@ -1107,31 +1604,31 @@ const esLALocaleData = {
                 LAST_PART_SEPARATOR: '',
                 YEARS: `{years, plural,
                 one {# año}
-                other {últimos # años}
+                other {Últimos # años}
             }`,
                 MONTHS: `{months, plural,
-                one {último mes}
-                other {últimos # meses}
+                one {Último mes}
+                other {Últimos # meses}
             }`,
                 WEEKS: `{weeks, plural,
-                one {última semana}
-                other {últimas # semanas}
+                one {Última semana}
+                other {Últimas # semanas}
             }`,
                 DAYS: `{days, plural,
-                one {último día}
-                other {últimos # días}
+                one {Último día}
+                other {Últimos # días}
             }`,
                 HOURS: `{hours, plural,
-                one {última hora}
-                other {últimas # horas}
+                one {Última hora}
+                other {Últimas # horas}
             }`,
                 MINUTES: `{minutes, plural,
-                one {último minuto}
-                other {últimos # minutos}
+                one {Último minuto}
+                other {Últimos # minutos}
             }`,
                 SECONDS: `{seconds, plural,
-                one {último segundo}
-                other {últimos # segundos}
+                one {Último segundo}
+                other {Últimos # segundos}
             }`,
                 YEARS_FRACTION: `{years} años`,
                 MONTHS_FRACTION: `{months} meses`
@@ -1221,10 +1718,16 @@ const ptBRLocaleData = {
             error: 'A busca com esse nome já existe',
             errorHint: 'O filtro não pôde ser salvo. Tente de novo ou entre em contato com o administrador.',
             saveButton: 'Salvar',
-            cancelButton: 'Cancelar'
+            cancelButton: 'Cancelar',
+            actionsTooltip: 'Ações do filtro'
         },
         add: {
-            tooltip: 'Adicionar filtros'
+            tooltip: 'Adicionar filtros',
+            addedAnnouncement: 'Filtro {{ name }} adicionado'
+        },
+        refresher: {
+            refresh: 'Atualizar',
+            settings: 'Configurações de atualização'
         },
         pipe: {
             clearButtonTooltip: 'Apagar',
@@ -1278,10 +1781,13 @@ const ptBRLocaleData = {
             to: 'até',
             apply: 'Aplicar',
             cancel: 'Cancelar',
-            rangeLabel: 'para o período',
+            rangeLabel: 'Período',
             allTime: 'por todo o tempo',
             currentQuarter: 'pelo trimestre atual',
-            currentYear: 'pelo ano atual'
+            currentYear: 'pelo ano atual',
+            allTimeOption: 'Todo o tempo',
+            currentQuarterOption: 'Trimestre atual',
+            currentYearOption: 'Ano atual'
         },
         durationTemplate: {
             title: {
@@ -1323,31 +1829,31 @@ const ptBRLocaleData = {
                 LAST_PART_SEPARATOR: '',
                 YEARS: `{years, plural,
                 one {# ano}
-                other {últimos # anos}
+                other {Últimos # anos}
             }`,
                 MONTHS: `{months, plural,
-                one {último mês}
-                other {últimos # meses}
+                one {Último mês}
+                other {Últimos # meses}
             }`,
                 WEEKS: `{weeks, plural,
-                one {última semana}
-                other {últimas # semanas}
+                one {Última semana}
+                other {Últimas # semanas}
             }`,
                 DAYS: `{days, plural,
-                one {último dia}
-                other {últimos # dias}
+                one {Último dia}
+                other {Últimos # dias}
             }`,
                 HOURS: `{hours, plural,
-                one {última hora}
-                other {últimas # horas}
+                one {Última hora}
+                other {Últimas # horas}
             }`,
                 MINUTES: `{minutes, plural,
-                one {último minuto}
-                other {últimos # minutos}
+                one {Último minuto}
+                other {Últimos # minutos}
             }`,
                 SECONDS: `{seconds, plural,
-                one {último segundo}
-                other {últimos # segundos}
+                one {Último segundo}
+                other {Últimos # segundos}
             }`,
                 YEARS_FRACTION: `{years} anos`,
                 MONTHS_FRACTION: `{months} meses`
@@ -1438,10 +1944,16 @@ const ruRULocaleData = {
             error: 'Поиск с таким названием уже существует',
             errorHint: 'Не удалось сохранить фильтр. Попробуйте снова или сообщите администратору.',
             saveButton: 'Сохранить',
-            cancelButton: 'Отмена'
+            cancelButton: 'Отмена',
+            actionsTooltip: 'Действия с фильтром'
         },
         add: {
-            tooltip: 'Добавить фильтр'
+            tooltip: 'Добавить фильтр',
+            addedAnnouncement: 'Фильтр {{ name }} добавлен'
+        },
+        refresher: {
+            refresh: 'Обновить',
+            settings: 'Настройки обновления'
         },
         pipe: {
             clearButtonTooltip: 'Очистить',
@@ -1495,10 +2007,13 @@ const ruRULocaleData = {
             to: 'по',
             apply: 'Применить',
             cancel: 'Отмена',
-            rangeLabel: 'за период',
+            rangeLabel: 'Период',
             allTime: 'за все время',
             currentQuarter: 'за текущий квартал',
-            currentYear: 'за текущий год'
+            currentYear: 'за текущий год',
+            allTimeOption: 'Все время',
+            currentQuarterOption: 'Текущий квартал',
+            currentYearOption: 'Текущий год'
         },
         durationTemplate: {
             title: {
@@ -1506,7 +2021,7 @@ const ruRULocaleData = {
                 LAST_PART_SEPARATOR: 'и',
                 YEARS: `{years, plural,
                 one {# год}
-                few {последние # лет}
+                few {последние # года}
                 other {последние # лет}
             }`,
                 MONTHS: `{months, plural,
@@ -1546,39 +2061,39 @@ const ruRULocaleData = {
                 SEPARATOR: ' ',
                 LAST_PART_SEPARATOR: 'и',
                 YEARS: `{years, plural,
-                one {последний год}
-                few {последние # лет}
-                other {последние # лет}
+                one {Последний год}
+                few {Последние # года}
+                other {Последние # лет}
             }`,
                 MONTHS: `{months, plural,
-                one {последний месяц}
-                few {последние # месяца}
-                other {последние # месяцев}
+                one {Последний месяц}
+                few {Последние # месяца}
+                other {Последние # месяцев}
             }`,
                 WEEKS: `{weeks, plural,
-                one {последняя неделя}
-                few {последние # недели}
-                other {последние # недель}
+                one {Последняя неделя}
+                few {Последние # недели}
+                other {Последние # недель}
             }`,
                 DAYS: `{days, plural,
-                one {последний день}
-                few {последние # дня}
-                other {последние # дней}
+                one {Последний день}
+                few {Последние # дня}
+                other {Последние # дней}
             }`,
                 HOURS: `{hours, plural,
-                one {последний час}
-                few {последние # часа}
-                other {последние # часов}
+                one {Последний час}
+                few {Последние # часа}
+                other {Последние # часов}
             }`,
                 MINUTES: `{minutes, plural,
-                one {последняя минута}
-                few {последние # минуты}
-                other {последние # минут}
+                one {Последняя минута}
+                few {Последние # минуты}
+                other {Последние # минут}
             }`,
                 SECONDS: `{seconds, plural,
-                one {последняя секунда}
-                few {последние # секунды}
-                other {последние # секунд}
+                one {Последняя секунда}
+                few {Последние # секунды}
+                other {Последние # секунд}
             }`,
                 YEARS_FRACTION: `{years} лет`,
                 MONTHS_FRACTION: `{months} месяцев`
@@ -1669,10 +2184,16 @@ const tkTMLocaleData = {
             error: 'Şeýle atly gözleg eýýäm bar',
             errorHint: 'Filtri ýazdyryp bolmady. Täzeden synanyň ýa-da administratora ýüz tutuň.',
             saveButton: 'Ýazdyr',
-            cancelButton: 'Ýatyr'
+            cancelButton: 'Ýatyr',
+            actionsTooltip: 'Filtr amallary'
         },
         add: {
-            tooltip: 'Filtr goş'
+            tooltip: 'Filtr goş',
+            addedAnnouncement: '{{ name }} filtri goşuldy'
+        },
+        refresher: {
+            refresh: 'Täzele',
+            settings: 'Täzeleme sazlamalary'
         },
         pipe: {
             clearButtonTooltip: 'Arassala',
@@ -1726,10 +2247,13 @@ const tkTMLocaleData = {
             to: 'şuňa',
             apply: 'Ulanmak',
             cancel: 'Ýatyrmak',
-            rangeLabel: 'şu döwürde',
+            rangeLabel: 'Döwür',
             allTime: 'hemme döwür üçin',
             currentQuarter: 'şu çärýek üçin',
-            currentYear: 'şu ýyl üçin'
+            currentYear: 'şu ýyl üçin',
+            allTimeOption: 'Hemme döwür',
+            currentQuarterOption: 'Şu çärýek',
+            currentYearOption: 'Şu ýyl'
         },
         durationTemplate: {
             title: {
@@ -1774,27 +2298,27 @@ const tkTMLocaleData = {
                 other {# ýyl}
             }`,
                 MONTHS: `{months, plural,
-                one {aý}
+                one {Aý}
                 other {# aý}
             }`,
                 WEEKS: `{weeks, plural,
-                one {hepde}
+                one {Hepde}
                 other {# hepde}
             }`,
                 DAYS: `{days, plural,
-                one {gün}
+                one {Gün}
                 other {# gün}
             }`,
                 HOURS: `{hours, plural,
-                one {sagat}
+                one {Sagat}
                 other {# sagat}
             }`,
                 MINUTES: `{minutes, plural,
-                one {minut}
+                one {Minut}
                 other {# minut}
             }`,
                 SECONDS: `{seconds, plural,
-                one {sekunt}
+                one {Sekunt}
                 other {# sekunt}
             }`,
                 YEARS_FRACTION: `{years} ýyl`,
@@ -2052,10 +2576,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 +2601,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 +2687,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 +2703,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 +2724,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 +2800,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 +2815,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 +2829,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 +2844,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 +2858,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 +2873,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 +2887,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 +2902,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 +2916,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 +2931,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 +2945,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 +2960,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 +2974,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 +2989,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 +3003,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 +3019,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 +3033,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 +3049,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 +3063,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 +3079,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,10 +3093,10 @@ 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: "19.2.21", ngImport: i0, type: RangeDateTimeFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeDateTimeFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rangeLongDateTimeImpurePipe',
@@ -2537,10 +3109,10 @@ class RangeMiddleDateTimeFormatterPipe extends BaseFormatterPipe {
         const date2 = this.adapter.deserialize(value2);
         return this.formatter.rangeMiddleDateTime(date1, date2, options);
     }
-    /** @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: 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: "19.2.21", ngImport: i0, type: RangeMiddleDateTimeFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeMiddleDateTimeFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rangeMiddleDateTime'
@@ -2551,10 +3123,10 @@ class RangeMiddleDateTimeFormatterImpurePipe extends RangeMiddleDateTimeFormatte
     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: 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: 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: "19.2.21", ngImport: i0, type: RangeMiddleDateTimeFormatterImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeMiddleDateTimeFormatterImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rangeMiddleDateTimeImpurePipe',
@@ -2567,10 +3139,10 @@ class RangeShortDateTimeFormatterPipe extends BaseFormatterPipe {
         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: 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: 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: "19.2.21", ngImport: i0, type: RangeShortDateTimeFormatterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RangeShortDateTimeFormatterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'rangeShortDateTime'
@@ -2581,26 +3153,259 @@ class RangeShortDateTimeFormatterImpurePipe extends RangeShortDateTimeFormatterP
     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: 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: 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: "19.2.21", ngImport: i0, type: RangeShortDateTimeFormatterImpurePipe, decorators: [{
+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: "20.3.25", ngImport: i0, type: KbqRangeLongDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kbqRangeLongDate',
+                    pure: false
+                }]
+        }] });
+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.rangeShortDate(date1, date2);
+    }
+    /** @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: "20.3.25", ngImport: i0, type: KbqRangeShortDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kbqRangeShortDate',
+                    pure: false
+                }]
+        }] });
+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: "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: "20.3.25", ngImport: i0, type: KbqRangeLongDateTimePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kbqRangeLongDateTime',
+                    pure: false
+                }]
+        }] });
+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.rangeMiddleDateTime(date1, date2, options);
+    }
+    /** @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: "20.3.25", ngImport: i0, type: KbqRangeMiddleDateTimePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'kbqRangeMiddleDateTime',
+                    pure: false
+                }]
+        }] });
+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: "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: "20.3.25", ngImport: i0, type: KbqRangeShortDateTimePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    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 +3511,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 +3561,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 +3574,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 +3618,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 +3631,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 +3723,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 +3736,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
- */
-const formatDataSize = (value, precision, 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);
+/**
+ * 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" }
+ */
+function getFormattedSizeParts(value, system) {
+    const { result, unit } = getHumanizedBytes(value, system);
     return {
         value: result.toString(),
         unit
@@ -3062,10 +3809,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 +3821,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 +3848,19 @@ class KbqFormattersModule {
             RangeDateTimeFormatterImpurePipe,
             RangeShortDateTimeFormatterImpurePipe,
             RangeMiddleDateTimeFormatterImpurePipe,
+            KbqAbsoluteLongDatePipe,
+            KbqAbsoluteLongDateTimePipe,
+            KbqAbsoluteShortDatePipe,
+            KbqAbsoluteShortDateTimePipe,
+            KbqRelativeLongDatePipe,
+            KbqRelativeLongDateTimePipe,
+            KbqRelativeShortDatePipe,
+            KbqRelativeShortDateTimePipe,
+            KbqRangeLongDatePipe,
+            KbqRangeLongDateTimePipe,
+            KbqRangeMiddleDateTimePipe,
+            KbqRangeShortDatePipe,
+            KbqRangeShortDateTimePipe,
             KbqDataSizePipe,
             KbqDecimalPipe,
             KbqRoundDecimalPipe,
@@ -3133,10 +3893,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 +3939,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 +3988,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 +4025,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 +4274,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 +4286,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 +4349,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 +4418,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 +4441,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 +4506,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 +4527,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 +4561,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 +4576,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,43 +4612,89 @@ 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]
                 }]
         }] });
 
+/**
+ * Canonical "select all / deselect all" toggle shared by the multi-select components (`Ctrl`/`Cmd` + `A`).
+ *
+ * Considers only selectable items and selects them all. When `allowDeselect` is `true` and every selectable
+ * item is already selected, deselects them all instead; otherwise a repeated call is a no-op. No-op when
+ * there are no selectable items.
+ *
+ * @returns the items whose selected state actually flipped, in input order.
+ */
+function toggleSelectAll(adapter, options) {
+    const selectable = adapter.items.filter((item) => adapter.isSelectable(item));
+    if (selectable.length === 0) {
+        return [];
+    }
+    const shouldSelect = !options?.allowDeselect || selectable.some((item) => !adapter.isSelected(item));
+    const changed = selectable.filter((item) => adapter.isSelected(item) !== shouldSelect);
+    selectable.forEach((item) => adapter.setSelected(item, shouldSelect));
+    return changed;
+}
+/** Event emitted by the `onSelectAll` outputs when the select-all toggle runs. */
+class KbqSelectAllEvent {
+    constructor(
+    /** Component that emitted the event. */
+    source, 
+    /** The selectable options affected by the toggle. */
+    options, 
+    /** `true` when all options were selected, `false` when all were deselected. */
+    selected) {
+        this.source = source;
+        this.options = options;
+        this.selected = selected;
+    }
+}
+/**
+ * Whether `Ctrl`/`Cmd` + `A` should select the text of a search `<input>` rather than toggle options.
+ *
+ * Returns `true` only when the input has text that is not already fully selected (nothing selected,
+ * a partial selection, or just a caret). Returns `false` for an empty input (so select-all falls
+ * straight through to the options) and when the whole value is already selected (a second press
+ * then acts on the options).
+ */
+function shouldSelectSearchText(input) {
+    if (!input) {
+        return false;
+    }
+    const length = input.value.length;
+    if (length === 0) {
+        return false;
+    }
+    return !(input.selectionStart === 0 && input.selectionEnd === length);
+}
+
 const KBQ_TITLE_TEXT_REF = new InjectionToken('KbqTitleTextRef');
 
 /**
@@ -3891,6 +4757,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 +4796,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 +4814,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 +4831,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
@@ -3978,11 +4850,7 @@ class KbqOption extends KbqOptionBase {
     }
     /** @docs-private */
     getHeight() {
-        const element = this.elementRef.nativeElement;
-        // For SSR compatibility
-        if (typeof element.getClientRects !== 'function')
-            return 0;
-        return element.getClientRects()[0]?.height ?? 0;
+        return this.elementRef.nativeElement.getClientRects()[0]?.height ?? 0;
     }
     select(emitEvent = true) {
         if (!this._selected) {
@@ -4056,9 +4924,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 +4945,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-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 +4973,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-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"] }]
-        }], 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 +5029,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 +5041,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',
@@ -4436,6 +5434,143 @@ function objectValues(object) {
     return object === null ? [] : baseValues(object, Object.keys(object));
 }
 
+/**
+ * Element used by {@link KbqShadowDomOverlayContainer} to locate the shadow root that should host overlays.
+ *
+ * When not provided, the container falls back to the application root component element.
+ */
+const KBQ_SHADOW_DOM_OVERLAY_HOST = new InjectionToken('KBQ_SHADOW_DOM_OVERLAY_HOST');
+/** Marks the structural overlay stylesheet that {@link KbqShadowDomOverlayContainer} clones into a shadow root. */
+const overlayStructuralStylesAttribute = 'data-kbq-overlay-structural-styles';
+/**
+ * `OverlayContainer` that places the `.cdk-overlay-container` inside a shadow root instead of `document.body`.
+ *
+ * The default CDK `OverlayContainer` always appends its container to `document.body`. When the application is
+ * rendered inside a shadow root (e.g. a Module Federation micro-frontend), overlays — toasts, modals, dropdowns,
+ * tooltips, etc. — escape the shadow tree into the light DOM. There they lose access to the styles and theme tokens
+ * scoped to the shadow root (Koobiq theme tokens are defined on the `.kbq-light` / `.kbq-dark` ancestor), which
+ * results in unstyled overlays.
+ *
+ * This container resolves the target shadow root from {@link KBQ_SHADOW_DOM_OVERLAY_HOST} (or the root component when
+ * the token is absent) and relocates the overlay container into it. After relocating, it also clones CDK's own
+ * structural overlay stylesheet (`position`/`z-index`/backdrop, `.cdk-overlay-container:empty`) into the shadow root,
+ * since those `document.head` styles do not cross the shadow boundary. If no shadow root is found — the common case
+ * for an app rendered directly in the light DOM — the container is left on `document.body`, so it is safe to provide
+ * unconditionally.
+ *
+ * Only **open** shadow roots can be resolved: a closed shadow root exposes neither `Element.shadowRoot` nor a
+ * `ShadowRoot` from `getRootNode()`, so pass an element that already lives inside the closed tree if you must use one.
+ *
+ * Note: this fixes the overlay container *placement* and delivers the CDK structural overlay styles. The host
+ * application is still responsible for delivering the **Koobiq component/theme styles** (the `.kbq-light` / `.kbq-dark`
+ * tokens and component CSS) into the shadow root, since global `document.head` stylesheets do not cascade across a
+ * shadow boundary.
+ *
+ * @see kbqShadowDomOverlayProvider
+ */
+class KbqShadowDomOverlayContainer extends OverlayContainer {
+    constructor() {
+        super(...arguments);
+        this.host = inject(KBQ_SHADOW_DOM_OVERLAY_HOST, { optional: true });
+        this.applicationRef = inject(ApplicationRef);
+    }
+    /** @internal CDK lifecycle hook — overridden to relocate the container into a shadow root. */
+    _createContainer() {
+        // Let CDK create the container (and run its test-environment cleanup). It is appended to `document.body`.
+        super._createContainer();
+        const shadowRoot = this.resolveShadowRoot();
+        if (shadowRoot) {
+            // Relocate the container into the shadow root and deliver the structural overlay styles alongside it.
+            shadowRoot.appendChild(this._containerElement);
+            this.deliverStructuralStyles(shadowRoot);
+        }
+        else if (this.host != null) {
+            // An explicit host was provided but did not resolve to an open shadow root (wrong element, a closed
+            // shadow root, or an element not yet inside a shadow tree). The container stays on `document.body`, so
+            // overlays would render unstyled — warn instead of failing silently.
+            // eslint-disable-next-line no-console
+            console.warn('[KbqShadowDomOverlayContainer] The provided host did not resolve to an open shadow root; the ' +
+                'overlay container stays on document.body. Ensure the host element (or an element inside its ' +
+                'shadow tree) uses an open shadow root.');
+        }
+    }
+    /**
+     * Clones CDK's structural overlay stylesheet into the shadow root.
+     *
+     * CDK ships the overlay's structural CSS as a `ViewEncapsulation.None` component, so Angular injects it as a
+     * `<style>` in `document.head` synchronously — `OverlayContainer.getContainerElement()` loads it before
+     * `_createContainer()` runs. Those rules do not cross the shadow boundary, so a relocated container would
+     * otherwise be unpositioned. Cloning the already-injected stylesheet keeps it version-matched to the installed
+     * `@angular/cdk` and is idempotent.
+     */
+    deliverStructuralStyles(shadowRoot) {
+        if (shadowRoot.querySelector(`style[${overlayStructuralStylesAttribute}]`)) {
+            return;
+        }
+        const sourceStyle = Array.from(this._document.head.querySelectorAll('style')).find((style) => style.textContent?.includes('.cdk-overlay-pane'));
+        if (sourceStyle) {
+            const clone = sourceStyle.cloneNode(true);
+            clone.setAttribute(overlayStructuralStylesAttribute, '');
+            shadowRoot.appendChild(clone);
+        }
+    }
+    resolveShadowRoot() {
+        const element = this.resolveHostElement();
+        if (!element) {
+            return null;
+        }
+        // The host can be the shadow host itself (the common case — the MFE root element)...
+        const ownShadowRoot = element.shadowRoot;
+        if (ownShadowRoot) {
+            return ownShadowRoot;
+        }
+        // ...or an element that already lives inside the shadow tree.
+        const rootNode = element.getRootNode();
+        return typeof ShadowRoot !== 'undefined' && rootNode instanceof ShadowRoot ? rootNode : null;
+    }
+    resolveHostElement() {
+        if (this.host) {
+            const resolved = typeof this.host === 'function' ? this.host() : this.host;
+            if (resolved instanceof ElementRef) {
+                return resolved.nativeElement;
+            }
+            return resolved ?? null;
+        }
+        // No explicit host provided — fall back to the application root component element.
+        return this.applicationRef.components[0]?.location.nativeElement ?? null;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqShadowDomOverlayContainer, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqShadowDomOverlayContainer }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqShadowDomOverlayContainer, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * Providers that route all CDK overlays into a shadow root via {@link KbqShadowDomOverlayContainer}.
+ *
+ * Add it to the bootstrap providers of an application rendered inside a shadow root:
+ *
+ * ```ts
+ * bootstrapApplication(AppComponent, {
+ *     providers: kbqShadowDomOverlayProvider(() => document.querySelector('my-mfe-root')!)
+ * });
+ * ```
+ *
+ * The provider replaces the global `OverlayContainer` token, so it cannot be combined with another custom
+ * `OverlayContainer` (e.g. CDK's `FullscreenOverlayContainer`) — the last provider wins. Apps that need both must
+ * subclass `KbqShadowDomOverlayContainer`.
+ *
+ * @param host element (or getter / `ElementRef`) inside the target shadow tree. When omitted, the application root
+ * component element is used to resolve the shadow root.
+ */
+const kbqShadowDomOverlayProvider = (host) => {
+    const providers = [{ provide: OverlayContainer, useClass: KbqShadowDomOverlayContainer }];
+    if (host !== undefined) {
+        providers.push({ provide: KBQ_SHADOW_DOM_OVERLAY_HOST, useValue: host });
+    }
+    return providers;
+};
+
 /**
  * InjectionToken for providing component with popup. Used in select and tree-select for tooltip.
  */
@@ -4560,9 +5695,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
         };
     }
@@ -4628,10 +5770,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: {
@@ -4695,42 +5837,91 @@ const getOffset = ({ originX, overlayX, originY, overlayY }, { width, height })
     }
     return offset;
 };
+/**
+ * Abstract base directive for hover/focus/click-triggered pop-ups (e.g. tooltip and popover). It manages the
+ * CDK overlay lifecycle, binds the trigger event listeners, resolves placement via a flexible connected position
+ * strategy, and controls show/hide timing. Concrete subclasses supply the pop-up component type, its content,
+ * and the overlay configuration.
+ */
 class KbqPopUpTrigger {
     constructor() {
-        /** Stream that emits when the popupTrigger is hovered. */
+        /** Stream that emits when the popupTrigger is hovered.
+         * @docs-private */
         this.hovered = new BehaviorSubject(false);
+        /** RxJS scheduler that drives the hide timeout; `undefined` falls back to the default async scheduler.
+         * @docs-private */
         this.scheduler = inject(AsyncScheduler, { optional: true }) || undefined;
+        /** CDK Overlay service used to create and position the pop-up overlay.
+         * @docs-private */
         this.overlay = inject(Overlay);
+        /** Reference to the host element the pop-up is anchored to.
+         * @docs-private */
         this.elementRef = inject(ElementRef);
+        /** Angular zone, used to run the hide timer outside Angular and re-enter when hiding.
+         * @docs-private */
         this.ngZone = inject(NgZone);
+        /** CDK ScrollDispatcher, used to track ancestor scroll containers so the pop-up repositions on scroll.
+         * @docs-private */
         this.scrollDispatcher = inject(ScrollDispatcher);
+        /** CDK ViewportRuler, used to re-apply the stick-to-window position on window resize.
+         * @docs-private */
+        this.viewportRuler = inject(ViewportRuler);
+        /** View container the pop-up component portal is attached to.
+         * @docs-private */
         this.hostView = inject(ViewContainerRef);
+        /** Text direction (LTR/RTL) applied to the overlay when a `Directionality` is available.
+         * @docs-private */
         this.direction = inject(Directionality, { optional: true });
+        /** Destroy reference used to auto-unsubscribe streams when the directive is destroyed.
+         * @docs-private */
         this.destroyRef = inject(DestroyRef);
+        /** Nearest `CdkScrollable` ancestor, if any.
+         * @docs-private */
         this.scrollable = inject(CdkScrollable, { optional: true });
+        /** Change detector used to refresh the trigger when its open state changes. */
         this.popUpChangeDetectorRef = inject(ChangeDetectorRef);
+        /** Backing field for `isOpen`. */
         this._isOpen = false;
+        /** Delay in milliseconds before the pop-up is shown.
+         * @docs-private */
         this.enterDelay = 0;
+        /** Delay in milliseconds before the pop-up is hidden.
+         * @docs-private */
         this.leaveDelay = 0;
+        /** Current resolved placement of the pop-up.
+         * @docs-private */
         this.placement = PopUpPlacements.Top;
+        /** Ordered list of fallback placements to try before the default priority.
+         * @docs-private */
         this.placementPriority = null;
+        /** Whether the pop-up is currently visible.
+         * @docs-private */
         this.visible = false;
+        /** Map of event name to the handler currently bound on the host element.
+         * @docs-private */
         this.listeners = new Map();
+        /** Map of placement name to its CDK connected position pair.
+         * @docs-private */
         this.availablePositions = POSITION_MAP;
-        /** Hide pop-up with timeout. Need if you want to show pop-up after leaving trigger */
+        /** Hide pop-up with timeout. Need if you want to show pop-up after leaving trigger
+         * @docs-private */
         this.hideWithTimeout = false;
-        /** prevents closure by any event */
+        /** prevents closure by any event
+         * @docs-private */
         this.preventClose = false;
+        /** Detaches the overlay (if attached) and clears the current pop-up instance.
+         * @docs-private */
         this.detach = () => {
             if (this.overlayRef?.hasAttached()) {
                 this.overlayRef.detach();
             }
             this.instance = null;
         };
+        /** Maps the CDK connection position back to a placement name, emits `placementChange`, and updates classes.
+         * @docs-private */
         this.onPositionChange = ($event) => {
-            if (!this.instance) {
+            if (!this.instance)
                 return;
-            }
             let newPlacement = this.placement;
             const { originX, originY, overlayX, overlayY } = $event.connectionPair;
             Object.keys(this.availablePositions).some((key) => {
@@ -4747,13 +5938,16 @@ class KbqPopUpTrigger {
             this.updateClassMap(newPlacement);
             this.instance.detectChanges();
         };
+        /** Binds a single event listener to the pop-up's native element. */
         this.addEventListener = (listener, event) => {
             this.getNativeElement().addEventListener(event, listener);
         };
+        /** Unbinds a single event listener from the pop-up's native element. */
         this.removeEventListener = (listener, event) => {
             this.getNativeElement().removeEventListener(event, listener);
         };
     }
+    /** Whether the pop-up overlay is currently open. */
     get isOpen() {
         return this._isOpen;
     }
@@ -4761,14 +5955,18 @@ class KbqPopUpTrigger {
         this._isOpen = value;
         this.popUpChangeDetectorRef.markForCheck();
     }
+    /** Binds the DOM event listeners for the configured triggers. */
     ngOnInit() {
         this.initListeners();
     }
+    /** Disposes the overlay and removes all bound event listeners. */
     ngOnDestroy() {
         this.overlayRef?.dispose();
         this.listeners.forEach(this.removeEventListener);
         this.listeners.clear();
     }
+    /** Sets the placement (falling back to `Top` on an unknown value) and refreshes the classes and position.
+     * @docs-private */
     updatePlacement(value) {
         if (POSITION_TO_CSS_MAP[value]) {
             this.placement = value;
@@ -4783,6 +5981,8 @@ class KbqPopUpTrigger {
             this.updatePosition();
         }
     }
+    /** Sets the ordered list of fallback placements, or clears it when the value is empty.
+     * @docs-private */
     updatePlacementPriority(value) {
         if (value && value.length > 0) {
             this.placementPriority = value;
@@ -4791,6 +5991,8 @@ class KbqPopUpTrigger {
             this.placementPriority = null;
         }
     }
+    /** Coerces and applies an external visibility value by showing or hiding the pop-up when it changes.
+     * @docs-private */
     updateVisible(externalValue) {
         const value = coerceBooleanProperty(externalValue);
         if (this.visible !== value) {
@@ -4803,14 +6005,20 @@ class KbqPopUpTrigger {
             }
         }
     }
+    /** Closes the pop-up when `Escape` is pressed while it is open. Bound to the host `keydown` event.
+     * @docs-private */
     keydownHandler(event) {
         if (this.isOpen && event.keyCode === ESCAPE) {
             this.hide();
         }
     }
+    /** Hides the pop-up. Bound to the host `touchend` event.
+     * @docs-private */
     touchendHandler() {
         this.hide();
     }
+    /** Creates the overlay (if needed) and shows the pop-up after `delay` ms, wiring its visibility stream.
+     * @docs-private */
     show(delay = this.enterDelay) {
         if (this.disabled || this.instance) {
             return;
@@ -4833,6 +6041,14 @@ class KbqPopUpTrigger {
         });
         this.updatePosition();
         this.instance.show(delay);
+        // The position strategy re-applies the overlay position on window resize (its ViewportRuler
+        // subscription is created inside OverlayRef.attach(), i.e. before this one), wiping the manual
+        // styles written by setStickPosition. Re-apply them after the strategy has run.
+        // No-op when stickToWindow is not set.
+        this.viewportRuler
+            .change()
+            .pipe(takeUntilDestroyed(this.instance.destroyRef))
+            .subscribe(() => this.instance?.setStickPosition());
         if (this.hideWithTimeout && this.trigger.includes(PopUpTriggers.Hover)) {
             this.ngZone.runOutsideAngular(() => {
                 interval(this.leaveDelay, this.scheduler)
@@ -4841,6 +6057,8 @@ class KbqPopUpTrigger {
             });
         }
     }
+    /** Hides the pop-up after `delay` ms, honoring `preventClose` and the hover state on mouseleave.
+     * @docs-private */
     hide(delay = this.leaveDelay) {
         if (this.preventClose)
             return;
@@ -4849,7 +6067,8 @@ class KbqPopUpTrigger {
             this.ngZone.run(() => this.instance?.hide(delay));
         }
     }
-    /** Create the overlay config and position strategy */
+    /** Create the overlay config and position strategy
+     * @docs-private */
     createOverlay() {
         if (this.overlayRef) {
             return this.overlayRef;
@@ -4874,9 +6093,13 @@ class KbqPopUpTrigger {
         this.overlayRef.detachments().pipe(takeUntilDestroyed(this.destroyRef)).subscribe(this.detach);
         return this.overlayRef;
     }
+    /** Resets the overlay position origin back to the host element.
+     * @docs-private */
     resetOrigin() {
         this.strategy.setOrigin(this.getNativeElement());
     }
+    /** Rebinds the host DOM listeners (click/hover/focus/keydown) according to the configured triggers.
+     * @docs-private */
     initListeners() {
         this.clearListeners();
         if (this.trigger.includes(PopUpTriggers.Click)) {
@@ -4901,13 +6124,16 @@ class KbqPopUpTrigger {
         }
         this.listeners.forEach(this.addEventListener);
     }
+    /** Returns the `mouseleave` handler — a delayed hide when `hideWithTimeout` is set, otherwise an immediate hide.
+     * @docs-private */
     getMouseLeaveListener() {
         if (this.hideWithTimeout) {
             return () => setTimeout(() => this.hide(), this.leaveDelay);
         }
         return this.hide;
     }
-    /** Updates the position of the current popover. */
+    /** Updates the position of the current popover.
+     * @docs-private */
     updatePosition(reapplyPosition = false) {
         this.overlayRef = this.createOverlay();
         this.subscribeOnClosingActions();
@@ -4918,21 +6144,24 @@ class KbqPopUpTrigger {
             setTimeout(() => position.reapplyLastPosition());
         }
     }
+    /** Moves browser focus to the pop-up's native element.
+     * @docs-private */
     focus() {
         this.getNativeElement().focus();
     }
-    /** @docs-private */
+    /** Returns the element the pop-up is bound to: the external element when set, otherwise the host element.
+     * @docs-private */
     getNativeElement() {
         return this.externalNativeElement || this.elementRef.nativeElement;
     }
-    /** @docs-private */
+    /** Sets an external element to anchor and measure the pop-up against instead of the host element.
+     * @docs-private */
     setExternalNativeElement(value) {
         this.externalNativeElement = value;
     }
     /**
      * Returns a list of positions that are aligned with the element's dimensions and offsets.
-     * @protected
-     */
+     * @docs-private */
     getAdjustedPositions() {
         const res = [];
         for (const pos of this.getPrioritizedPositions()) {
@@ -4946,6 +6175,8 @@ class KbqPopUpTrigger {
         }
         return res;
     }
+    /** Maps a priority placement value (or array of values) to the matching connected position pairs.
+     * @docs-private */
     getPriorityPlacementStrategy(value) {
         const result = [];
         const possiblePositions = Object.keys(this.availablePositions);
@@ -4961,16 +6192,21 @@ class KbqPopUpTrigger {
         }
         return result;
     }
+    /** Returns the positions to try: the custom `placementPriority` when set, otherwise the default strategy.
+     * @docs-private */
     getPrioritizedPositions() {
         if (this.placementPriority) {
             return this.getPriorityPlacementStrategy(this.placementPriority);
         }
         return POSITION_PRIORITY_STRATEGY[this.placement];
     }
+    /** Removes all bound host event listeners and clears the listener map.
+     * @docs-private */
     clearListeners() {
         this.listeners.forEach(this.removeEventListener);
         this.listeners.clear();
     }
+    /** Wraps a trigger handler so it records the active trigger name and mouse event before running. */
     createListener(name, listener) {
         return [
             name,
@@ -4981,11 +6217,13 @@ class KbqPopUpTrigger {
             }
         ];
     }
+    /** Remembers the last mouse event on `mouseenter`, used for cursor-relative positioning. */
     saveMouseEvent(event) {
         if (this.triggerName === 'mouseenter') {
             this.mouseEvent = event;
         }
     }
+    /** (Re)subscribes to the closing-action streams and hides the pop-up, ignoring prevented click events. */
     subscribeOnClosingActions() {
         this.closingActionsSubscription?.unsubscribe();
         this.closingActionsSubscription = this.closingActions()
@@ -4998,10 +6236,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: {
@@ -5035,10 +6273,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]'
@@ -5046,39 +6284,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]',
@@ -5087,10 +6322,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();
@@ -5098,22 +6333,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) {
@@ -5140,24 +6375,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.
  *
@@ -5223,10 +6453,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
         }] });
 
@@ -5268,6 +6498,7 @@ class KbqMeasureScrollbarService {
     }
     constructor() {
         this.document = inject(DOCUMENT);
+        this.platform = inject(Platform);
         this.scrollbarMeasure = {
             position: 'absolute',
             top: '-9999px',
@@ -5278,6 +6509,10 @@ class KbqMeasureScrollbarService {
         this.initScrollBarWidth();
     }
     initScrollBarWidth() {
+        if (!this.platform.isBrowser) {
+            this._scrollBarWidth = 0;
+            return;
+        }
         const scrollDiv = this.document.createElement('div');
         for (const scrollProp in this.scrollbarMeasure) {
             if (this.scrollbarMeasure.hasOwnProperty(scrollProp)) {
@@ -5289,10 +6524,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: () => [] });
@@ -5365,45 +6600,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.3+sha-221da1d');
+const VERSION = new Version('20.1.0+sha-ba927bf');
 
 /**
  * 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_SHADOW_DOM_OVERLAY_HOST, 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, KbqSelectAllEvent, KbqSelectFooter, KbqSelectMatcher, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqSelectTrigger, KbqShadowDomOverlayContainer, 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, kbqShadowDomOverlayProvider, leftIconClassName, mixinColor, mixinDisabled, mixinErrorState, mixinTabIndex, normalizeNumber, numberByParts, patchElementFocus, ptBRFormattersData, ptBRLocaleData, rightIconClassName, ruRUFormattersData, ruRULocaleData, selectEvents, shouldSelectSearchText, tkTMFormattersData, tkTMLocaleData, toggleSelectAll, typeInElement, validationTooltipHideDelay, validationTooltipShowDelay, wrappedErrorMessage };
 //# sourceMappingURL=koobiq-components-core.mjs.map