@koobiq/components 17.0.0-rc.1 → 17.0.0-rc.11

package/fesm2022/koobiq-components-core.mjs

@@ -1,30 +1,22 @@
 import { trigger, state, style, transition, animate, group } from '@angular/animations';
 import * as i0 from '@angular/core';
-import { InjectionToken, isDevMode, NgModule, Optional, Inject, inject, LOCALE_ID, Injectable, Pipe, Directive, ContentChildren, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, EventEmitter, ViewChild, Output, ContentChild, TemplateRef, Version } from '@angular/core';
+import { InjectionToken, isDevMode, NgModule, Optional, Inject, inject, LOCALE_ID, Injectable, Pipe, Directive, ContentChildren, Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChild, Input, EventEmitter, ViewChild, Output, TemplateRef, Version } from '@angular/core';
 import * as i2$1 from '@angular/cdk/bidi';
 import { BidiModule } from '@angular/cdk/bidi';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i1 from '@koobiq/date-adapter';
 import { DateAdapter as DateAdapter$1 } from '@koobiq/date-adapter';
 import { DateFormatter as DateFormatter$1 } from '@koobiq/date-formatter';
-import { BehaviorSubject, Subject, pairwise } from 'rxjs';
 import * as i2 from '@angular/common';
-import { CommonModule, DOCUMENT } from '@angular/common';
-import { ENTER, SPACE, TAB, ESCAPE } from '@koobiq/cdk/keycodes';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { BehaviorSubject, Subject, Subscription, pairwise } from 'rxjs';
 import * as i1$1 from '@angular/cdk/a11y';
+import { SPACE, ENTER, TAB, ESCAPE, HOME, END } from '@koobiq/cdk/keycodes';
 import { takeUntil, distinctUntilChanged, delay } from 'rxjs/operators';
 import * as i1$2 from '@angular/cdk/overlay';
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 
-const fadeAnimation = trigger('fadeAnimation', [
-    state('void', style({ opacity: 0 })),
-    state('true', style({ opacity: 1 })),
-    state('false', style({ opacity: 0 })),
-    transition('* => true', animate('150ms cubic-bezier(0.0, 0.0, 0.2, 1)')),
-    transition('* => void', animate('150ms cubic-bezier(0.4, 0.0, 1, 1)'))
-]);
-
 var AnimationCurves;
 (function (AnimationCurves) {
     AnimationCurves["StandardCurve"] = "cubic-bezier(0.4,0.0,0.2,1)";
@@ -33,6 +25,14 @@ var AnimationCurves;
     AnimationCurves["SharpCurve"] = "cubic-bezier(0.4,0.0,0.6,1)";
 })(AnimationCurves || (AnimationCurves = {}));
 
+const fadeAnimation = trigger('fadeAnimation', [
+    state('void', style({ opacity: 0 })),
+    state('true', style({ opacity: 1 })),
+    state('false', style({ opacity: 0 })),
+    transition('* => true', animate('150ms cubic-bezier(0.0, 0.0, 0.2, 1)')),
+    transition('* => void', animate('150ms cubic-bezier(0.4, 0.0, 1, 1)'))
+]);
+
 /**
  * The following are all the animations for the kbq-select component, with each
  * const containing the metadata for one animation.
@@ -55,10 +55,10 @@ const kbqSelectAnimations = {
             opacity: 0
         })),
         transition('void => *', group([
-            animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)')
+            animate('0ms cubic-bezier(0.25, 0.8, 0.25, 1)')
         ])),
         transition('* => void', [
-            animate('250ms 100ms linear', style({ opacity: 0 }))
+            animate('0ms 0ms linear', style({ opacity: 0 }))
         ])
     ]),
     /**
@@ -70,13 +70,60 @@ const kbqSelectAnimations = {
         state('showing', style({ opacity: 1 })),
         transition('void => showing', [
             style({ opacity: 0 }),
-            animate('150ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')
+            animate('0ms 0ms cubic-bezier(0.55, 0, 0.55, 0.2)')
         ])
     ])
 };
 const transformPanel = kbqSelectAnimations.transformPanel;
 const fadeInContent = kbqSelectAnimations.fadeInContent;
 
+var ThemePalette;
+(function (ThemePalette) {
+    ThemePalette["Primary"] = "primary";
+    ThemePalette["Secondary"] = "secondary";
+    ThemePalette["Error"] = "error";
+    ThemePalette["Info"] = "info";
+    ThemePalette["Warning"] = "warning";
+    ThemePalette["Success"] = "success";
+    ThemePalette["Default"] = "secondary";
+    ThemePalette["Empty"] = "";
+})(ThemePalette || (ThemePalette = {}));
+var KbqComponentColors;
+(function (KbqComponentColors) {
+    KbqComponentColors["Theme"] = "theme";
+    KbqComponentColors["ThemeFade"] = "theme-fade";
+    KbqComponentColors["Contrast"] = "contrast";
+    KbqComponentColors["ContrastFade"] = "contrast-fade";
+    KbqComponentColors["Error"] = "error";
+    KbqComponentColors["Warning"] = "warning";
+    KbqComponentColors["Success"] = "success";
+    KbqComponentColors["Default"] = "contrast";
+    KbqComponentColors["Empty"] = "";
+})(KbqComponentColors || (KbqComponentColors = {}));
+function mixinColor(base, defaultColor = KbqComponentColors.Empty) {
+    return class extends base {
+        get color() {
+            return this._color;
+        }
+        set color(value) {
+            const colorPalette = value || defaultColor;
+            if (colorPalette !== this._color) {
+                if (this._color) {
+                    this.elementRef.nativeElement.classList.remove(`kbq-${this._color}`);
+                }
+                if (colorPalette) {
+                    this.elementRef.nativeElement.classList.add(`kbq-${colorPalette}`);
+                }
+                this._color = colorPalette;
+            }
+        }
+        constructor(...args) {
+            super(...args);
+            this.color = defaultColor;
+        }
+    };
+}
+
 // Injection token that configures whether the koobiq sanity checks are enabled.
 const KBQ_SANITY_CHECKS = new InjectionToken('kbq-sanity-checks', {
     providedIn: 'root',
@@ -173,47 +220,23 @@ function mixinDisabled(base) {
     };
 }
 
-var ThemePalette;
-(function (ThemePalette) {
-    ThemePalette["Primary"] = "primary";
-    ThemePalette["Secondary"] = "secondary";
-    ThemePalette["Error"] = "error";
-    ThemePalette["Info"] = "info";
-    ThemePalette["Warning"] = "warning";
-    ThemePalette["Success"] = "success";
-    ThemePalette["Default"] = "secondary";
-    ThemePalette["Empty"] = "";
-})(ThemePalette || (ThemePalette = {}));
-var KbqComponentColors;
-(function (KbqComponentColors) {
-    KbqComponentColors["Theme"] = "theme";
-    KbqComponentColors["ThemeFade"] = "theme-fade";
-    KbqComponentColors["Contrast"] = "contrast";
-    KbqComponentColors["ContrastFade"] = "contrast-fade";
-    KbqComponentColors["Error"] = "error";
-    KbqComponentColors["Warning"] = "warning";
-    KbqComponentColors["Success"] = "success";
-    KbqComponentColors["Default"] = "contrast";
-    KbqComponentColors["Empty"] = "";
-})(KbqComponentColors || (KbqComponentColors = {}));
-function mixinColor(base, defaultColor = KbqComponentColors.Empty) {
+function mixinErrorState(base) {
     return class extends base {
-        get color() { return this._color; }
-        set color(value) {
-            const colorPalette = value || defaultColor;
-            if (colorPalette !== this._color) {
-                if (this._color) {
-                    this.elementRef.nativeElement.classList.remove(`kbq-${this._color}`);
-                }
-                if (colorPalette) {
-                    this.elementRef.nativeElement.classList.add(`kbq-${colorPalette}`);
-                }
-                this._color = colorPalette;
-            }
-        }
         constructor(...args) {
             super(...args);
-            this.color = defaultColor;
+            /** Whether the component is in an error state. */
+            this.errorState = false;
+        }
+        updateErrorState() {
+            const oldState = this.errorState;
+            const parent = this.parentFormGroup || this.parentForm;
+            const matcher = this.errorStateMatcher || this.defaultErrorStateMatcher;
+            const control = this.ngControl ? this.ngControl.control : null;
+            const newState = matcher.isErrorState(control, parent);
+            if (newState !== oldState) {
+                this.errorState = newState;
+                this.stateChanges.next();
+            }
         }
     };
 }
@@ -235,31 +258,8 @@ function mixinTabIndex(base, defaultTabIndex = 0) {
     };
 }
 
-function mixinErrorState(base) {
-    return class extends base {
-        constructor(...args) {
-            super(...args);
-            /** Whether the component is in an error state. */
-            this.errorState = false;
-        }
-        updateErrorState() {
-            const oldState = this.errorState;
-            const parent = this.parentFormGroup || this.parentForm;
-            const matcher = this.errorStateMatcher || this.defaultErrorStateMatcher;
-            const control = this.ngControl ? this.ngControl.control : null;
-            const newState = matcher.isErrorState(control, parent);
-            if (newState !== oldState) {
-                this.errorState = newState;
-                this.stateChanges.next();
-            }
-        }
-    };
-}
-
 const KBQ_PARENT_ANIMATION_COMPONENT = new InjectionToken('kbq-parent-animation-component');
 
-const KBQ_DATE_FORMATS = new InjectionToken('kbq-date-formats');
-
 /** InjectionToken for datepicker that can be used to override default locale code. */
 const KBQ_DATE_LOCALE = new InjectionToken('KBQ_DATE_LOCALE', {
     providedIn: 'root',
@@ -273,6 +273,8 @@ function KBQ_DATE_LOCALE_FACTORY() {
 class DateAdapter extends DateAdapter$1 {
 }
 
+const KBQ_DATE_FORMATS = new InjectionToken('kbq-date-formats');
+
 /** Error state matcher that matches when a control is invalid and dirty. */
 class ShowOnDirtyErrorStateMatcher {
     isErrorState(control, form) {
@@ -297,6 +299,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * Injection token that can be used to inject an instances of `KbqFormField`. It serves
+ * as alternative token to the actual `KbqFormField` class which would cause unnecessary
+ * retention of the `KbqFormField` class and its component metadata.
+ */
+const KBQ_FORM_FIELD_REF = new InjectionToken('KbqFormFieldRef');
+
 class DateFormatter extends DateFormatter$1 {
     constructor(adapter, locale) {
         super(adapter, locale);
@@ -655,8 +664,8 @@ const ruRULocaleData = {
     },
     timepicker: {
         placeholder: {
-            full: 'hh:mm:ss',
-            short: 'hh:mm'
+            full: 'чч:мм:сс',
+            short: 'чч:мм'
         }
     },
     fileUpload: {
@@ -726,6 +735,22 @@ const enUSFormattersData = {
             groupSeparator: [','],
             fractionSeparator: '.'
         }
+    },
+    sizeUnits: {
+        defaultUnitSystem: 'SI',
+        defaultPrecision: 2,
+        unitSystems: {
+            SI: {
+                abbreviations: ['B', 'KB', 'MB', 'GB', 'TB'],
+                base: 10,
+                power: 3
+            },
+            IEC: {
+                abbreviations: ['B', 'KiB', 'MiB', 'GiB', 'TiB'],
+                base: 2,
+                power: 10
+            }
+        }
     }
 };
 const esLAFormattersData = {
@@ -748,6 +773,22 @@ const esLAFormattersData = {
             groupSeparator: [' ', ' '],
             fractionSeparator: ','
         }
+    },
+    sizeUnits: {
+        defaultUnitSystem: 'SI',
+        defaultPrecision: 2,
+        unitSystems: {
+            SI: {
+                abbreviations: ['Б', 'КБ', 'МБ', 'ГБ', 'ТБ'],
+                base: 10,
+                power: 3
+            },
+            IEC: {
+                abbreviations: ['Б', 'КиБ', 'МиБ', 'ГиБ', 'ТиБ'],
+                base: 2,
+                power: 10
+            }
+        }
     }
 };
 const faIRFormattersData = {
@@ -769,6 +810,22 @@ const faIRFormattersData = {
             groupSeparator: ['\u066C'],
             fractionSeparator: '\u066B'
         }
+    },
+    sizeUnits: {
+        defaultUnitSystem: 'SI',
+        defaultPrecision: 2,
+        unitSystems: {
+            SI: {
+                abbreviations: ['Б', 'КБ', 'МБ', 'ГБ', 'ТБ'],
+                base: 10,
+                power: 3
+            },
+            IEC: {
+                abbreviations: ['Б', 'КиБ', 'МиБ', 'ГиБ', 'ТиБ'],
+                base: 2,
+                power: 10
+            }
+        }
     }
 };
 const ptBRFormattersData = {
@@ -789,6 +846,22 @@ const ptBRFormattersData = {
             groupSeparator: ['.'],
             fractionSeparator: ','
         }
+    },
+    sizeUnits: {
+        defaultUnitSystem: 'SI',
+        defaultPrecision: 2,
+        unitSystems: {
+            SI: {
+                abbreviations: ['Б', 'КБ', 'МБ', 'ГБ', 'ТБ'],
+                base: 10,
+                power: 3
+            },
+            IEC: {
+                abbreviations: ['Б', 'КиБ', 'МиБ', 'ГиБ', 'ТиБ'],
+                base: 2,
+                power: 10
+            }
+        }
     }
 };
 const ruRUFormattersData = {
@@ -812,6 +885,22 @@ const ruRUFormattersData = {
             fractionSeparator: ',',
             startFormattingFrom: 4
         }
+    },
+    sizeUnits: {
+        defaultUnitSystem: 'SI',
+        defaultPrecision: 2,
+        unitSystems: {
+            SI: {
+                abbreviations: ['Б', 'КБ', 'МБ', 'ГБ', 'ТБ'],
+                base: 10,
+                power: 3
+            },
+            IEC: {
+                abbreviations: ['Б', 'КиБ', 'МиБ', 'ГиБ', 'ТиБ'],
+                base: 2,
+                power: 10
+            }
+        }
     }
 };
 const zhCNFormattersData = {
@@ -831,6 +920,22 @@ const zhCNFormattersData = {
             groupSeparator: [','],
             fractionSeparator: '.'
         }
+    },
+    sizeUnits: {
+        defaultUnitSystem: 'SI',
+        defaultPrecision: 2,
+        unitSystems: {
+            SI: {
+                abbreviations: ['Б', 'КБ', 'МБ', 'ГБ', 'ТБ'],
+                base: 10,
+                power: 3
+            },
+            IEC: {
+                abbreviations: ['Б', 'КиБ', 'МиБ', 'ГиБ', 'ТиБ'],
+                base: 2,
+                power: 10
+            }
+        }
     }
 };
 
@@ -854,11 +959,15 @@ function KBQ_DEFAULT_LOCALE_DATA_FACTORY() {
         'fa-IR': { ...faIRLocaleData, ...faIRFormattersData }
     };
 }
-const KBQ_LOCALE_DATA = new InjectionToken('KBQ_LOCALE_DATA', { providedIn: 'root', factory: KBQ_DEFAULT_LOCALE_DATA_FACTORY });
+const KBQ_LOCALE_DATA = new InjectionToken('KBQ_LOCALE_DATA', {
+    providedIn: 'root',
+    factory: KBQ_DEFAULT_LOCALE_DATA_FACTORY
+});
 const KBQ_LOCALE_SERVICE = new InjectionToken('KBQ_LOCALE_SERVICE');
 class KbqLocaleService {
     constructor(id, localeData) {
         this.locales = {};
+        this.document = inject(DOCUMENT);
         this.locales = localeData;
         this.id = id || KBQ_DEFAULT_LOCALE_ID;
         this.current = this.locales[this.id];
@@ -867,6 +976,7 @@ class KbqLocaleService {
     setLocale(id) {
         this.id = id;
         this.current = this.locales[this.id];
+        this.document.documentElement.lang = this.id;
         this.changes.next(this.id);
     }
     addLocale(id, localeData) {
@@ -992,8 +1102,7 @@ class KbqDecimalPipe {
         this.localeService = localeService;
         this.options = options;
         this.options = this.options || KBQ_NUMBER_FORMATTER_DEFAULT_OPTIONS;
-        this.localeService?.changes
-            .subscribe((newId) => this.id = newId);
+        this.localeService?.changes.subscribe((newId) => (this.id = newId));
     }
     /**
      * @param value The number to be formatted.
@@ -1074,8 +1183,7 @@ class KbqTableNumberPipe {
         this.localeService = localeService;
         this.options = options;
         this.options = this.options || KBQ_NUMBER_FORMATTER_DEFAULT_OPTIONS;
-        this.localeService?.changes
-            .subscribe((newId) => this.id = newId);
+        this.localeService?.changes.subscribe((newId) => (this.id = newId));
     }
     /**
      * @param value The number to be formatted.
@@ -1151,8 +1259,7 @@ class KbqRoundDecimalPipe {
     constructor(id, localeService) {
         this.id = id;
         this.localeService = localeService;
-        this.localeService?.changes
-            .subscribe((newId) => this.id = newId);
+        this.localeService?.changes.subscribe((newId) => (this.id = newId));
     }
     transform(value, locale) {
         if (isEmpty(value)) {
@@ -1168,17 +1275,17 @@ class KbqRoundDecimalPipe {
             }
             let parts = {};
             if (intervalsConfig.supportedLanguages.includes(currentLocale)) {
-                intervalsConfig.intervals
-                    .find(({ startRange, endRange, precision }) => {
+                intervalsConfig.intervals.find(({ startRange, endRange, precision }) => {
                     const within = isWithin(startRange, endRange, num);
                     if (within) {
                         if (precision) {
-                            parts = unit === 'thousand' ?
-                                this.calculatePartsForThousands(num) :
-                                {
-                                    num: Math.trunc(num / ROUNDING_UNITS[unit]),
-                                    fraction: this.calculateDecimal(num, ROUNDING_UNITS[unit])
-                                };
+                            parts =
+                                unit === 'thousand'
+                                    ? this.calculatePartsForThousands(num)
+                                    : {
+                                        num: Math.trunc(num / ROUNDING_UNITS[unit]),
+                                        fraction: this.calculateDecimal(num, ROUNDING_UNITS[unit])
+                                    };
                         }
                         else {
                             parts = { num: Math.round(num / ROUNDING_UNITS[unit]) };
@@ -1187,10 +1294,12 @@ class KbqRoundDecimalPipe {
                     return within;
                 });
             }
-            parts = parts.num ? parts : {
-                num: Math.trunc(num / ROUNDING_UNITS[unit]),
-                fraction: this.calculateDecimal(num, ROUNDING_UNITS[unit])
-            };
+            parts = parts.num
+                ? parts
+                : {
+                    num: Math.trunc(num / ROUNDING_UNITS[unit]),
+                    fraction: this.calculateDecimal(num, ROUNDING_UNITS[unit])
+                };
             Object.keys(parts).forEach((key) => {
                 parts[key] = Intl.NumberFormat.call(this, currentLocale, { useGrouping: false }).format(parts[key]);
             });
@@ -1205,7 +1314,7 @@ class KbqRoundDecimalPipe {
     }
     calculateDecimal(num, divider) {
         /* tslint:disable-next-line:no-magic-numbers */
-        return Math.round(num / divider % 1 * 10);
+        return Math.round(((num / divider) % 1) * 10);
     }
     /**
      * 2 * 1000 is a number in the interval of [1500...2500)
@@ -1335,13 +1444,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                 }]
         }] });
 
-/**
- * Injection token that can be used to inject an instances of `KbqFormField`. It serves
- * as alternative token to the actual `KbqFormField` class which would cause unnecessary
- * retention of the `KbqFormField` class and its component metadata.
- */
-const KBQ_FORM_FIELD_REF = new InjectionToken('KbqFormFieldRef');
-
 class KbqFormElement {
     constructor(element) {
         this.element = element;
@@ -1533,75 +1635,197 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                 }]
         }] });
 
-const KBQ_TITLE_TEXT_REF = new InjectionToken('KbqTitleTextRef');
-
+const KBQ_OPTION_ACTION_PARENT = new InjectionToken('KBQ_OPTION_ACTION_PARENT');
 /** @docs-private */
-class KbqOptgroupBase {
-}
-// tslint:disable-next-line: naming-convention
-const KbqOptgroupMixinBase = mixinDisabled(KbqOptgroupBase);
-let uniqueOptgroupIdCounter = 0;
-/**
- * Component that is used to group instances of `kbq-option`.
- */
-class KbqOptgroup extends KbqOptgroupMixinBase {
-    constructor() {
-        super(...arguments);
-        /** Unique id for the underlying label. */
-        this.labelId = `kbq-optgroup-label-${uniqueOptgroupIdCounter++}`;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqOptgroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqOptgroup, selector: "kbq-optgroup", inputs: { disabled: "disabled", label: "label" }, host: { properties: { "class.kbq-disabled": "disabled" }, classAttribute: "kbq-optgroup" }, exportAs: ["kbqOptgroup"], usesInheritance: true, ngImport: i0, template: "<label class=\"kbq-optgroup-label\" [id]=\"labelId\">{{ label }}</label>\n<ng-content select=\"kbq-option, kbq-list-option, kbq-timezone-option, ng-container\"></ng-content>\n", styles: [".kbq-optgroup-label{padding-left:var(--kbq-optgroup-size-padding-left, 17px);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+class KbqOptionActionBase {
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqOptgroup, decorators: [{
-            type: Component,
-            args: [{ selector: 'kbq-optgroup', exportAs: 'kbqOptgroup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['disabled'], host: {
-                        class: 'kbq-optgroup',
-                        '[class.kbq-disabled]': 'disabled'
-                    }, template: "<label class=\"kbq-optgroup-label\" [id]=\"labelId\">{{ label }}</label>\n<ng-content select=\"kbq-option, kbq-list-option, kbq-timezone-option, ng-container\"></ng-content>\n", styles: [".kbq-optgroup-label{padding-left:var(--kbq-optgroup-size-padding-left, 17px);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }] } });
-
-// Boilerplate for applying mixins to KbqPseudoCheckbox.
 /** @docs-private */
-class KbqPseudoCheckboxBase {
-    constructor(elementRef) {
+const KbqOptionActionMixinBase = mixinTabIndex(mixinDisabled(KbqOptionActionBase));
+class KbqOptionActionComponent extends KbqOptionActionMixinBase {
+    get active() {
+        return this.hasFocus || !!this.option.dropdownTrigger?.opened;
+    }
+    constructor(elementRef, focusMonitor, option) {
+        super();
         this.elementRef = elementRef;
+        this.focusMonitor = focusMonitor;
+        this.option = option;
+        this.hasFocus = false;
+        this.destroy = new Subject();
+        this.focusMonitor.monitor(this.elementRef.nativeElement);
     }
-}
-/** @docs-private */
-const KbqPseudoCheckboxMixinBase = mixinColor(mixinDisabled(KbqPseudoCheckboxBase), KbqComponentColors.Theme);
-/**
- * Component that shows a simplified checkbox without including any kind of "real" checkbox.
- * Meant to be used when the checkbox is purely decorative and a large number of them will be
- * included, such as for the options in a multi-select. Uses no SVGs or complex animations.
- * Note that theming is meant to be handled by the parent element, e.g.
- * `kbq-primary .kbq-pseudo-checkbox`.
- *
- * Note that this component will be completely invisible to screen-reader users. This is *not*
- * interchangeable with `<kbq-checkbox>` and should *not* be used if the user would directly
- * interact with the checkbox. The pseudo-checkbox should only be used as an implementation detail
- * of more complex components that appropriately handle selected / checked state.
- * @docs-private
- */
-class KbqPseudoCheckbox extends KbqPseudoCheckboxMixinBase {
-    constructor(elementRef) {
-        super(elementRef);
-        this.big = false;
-        this.state = 'unchecked';
-        this.disabled = false;
+    ngAfterViewInit() {
+        if (!this.option.dropdownTrigger) {
+            return;
+        }
+        this.option.dropdownTrigger.restoreFocus = false;
+        this.option.dropdownTrigger.dropdownClosed.pipe(takeUntil(this.destroy)).subscribe(() => {
+            this.preventShowingTooltip();
+            const destroyReason = this.option.dropdownTrigger.lastDestroyReason === 'keydown' ? 'keyboard' : 'program';
+            this.focus(destroyReason);
+        });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqPseudoCheckbox, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: { color: "color", big: "big", state: "state", disabled: "disabled" }, host: { properties: { "class.kbq-checkbox_big": "big", "class.kbq-indeterminate": "state === \"indeterminate\"", "class.kbq-checked": "state === \"checked\"", "class.kbq-disabled": "disabled" }, classAttribute: "kbq-pseudo-checkbox" }, usesInheritance: true, ngImport: i0, template: "<i class=\"kbq-checkbox-checkmark mc mc-check_16\"></i>\n<i class=\"kbq-checkbox-mixedmark mc mc-minus_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, 16px);height:var(--kbq-checkbox-size-normal-width, 16px);border-radius:var(--kbq-checkbox-size-normal-border-radius, 4px);border-width:var(--kbq-checkbox-size-normal-border-width, 1px);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, 16px);height:var(--kbq-checkbox-size-big-width, 16px);border-radius:var(--kbq-checkbox-size-big-border-radius, 4px);border-width:var(--kbq-checkbox-size-big-border-width, 1px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqPseudoCheckbox, decorators: [{
-            type: Component,
-            args: [{ selector: 'kbq-pseudo-checkbox', host: {
-                        class: 'kbq-pseudo-checkbox',
-                        '[class.kbq-checkbox_big]': 'big',
-                        '[class.kbq-indeterminate]': 'state === "indeterminate"',
-                        '[class.kbq-checked]': 'state === "checked"',
+    ngOnDestroy() {
+        this.destroy.next();
+        this.destroy.complete();
+        this.focusMonitor.stopMonitoring(this.elementRef.nativeElement);
+    }
+    focus(origin, options) {
+        if (this.focusMonitor && origin) {
+            this.focusMonitor.focusVia(this.elementRef.nativeElement, origin, options);
+        }
+        else {
+            this.elementRef.nativeElement.focus();
+        }
+        this.hasFocus = true;
+    }
+    onFocus($event) {
+        $event.stopPropagation();
+        this.hasFocus = true;
+    }
+    onBlur() {
+        this.hasFocus = false;
+    }
+    onClick($event) {
+        $event.stopPropagation();
+    }
+    onKeyDown($event) {
+        if ([SPACE, ENTER].includes($event.keyCode) && this.option.dropdownTrigger) {
+            this.option.dropdownTrigger.openedBy = 'keyboard';
+            this.option.dropdownTrigger.toggle();
+        }
+        else if ($event.shiftKey && $event.keyCode === TAB) {
+            this.hasFocus = false;
+            this.option.focus();
+        }
+        else if ($event.keyCode === TAB) {
+            return;
+        }
+        $event.preventDefault();
+        $event.stopPropagation();
+    }
+    preventShowingTooltip() {
+        if (!this.option.tooltipTrigger) {
+            return;
+        }
+        this.option.tooltipTrigger.disabled = true;
+        setTimeout(() => (this.option.tooltipTrigger.disabled = false));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqOptionActionComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.FocusMonitor }, { token: KBQ_OPTION_ACTION_PARENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqOptionActionComponent, selector: "kbq-option-action", inputs: { disabled: "disabled" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur()", "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" }, queries: [{ propertyName: "customIcon", first: true, predicate: ["customIcon"], descendants: true }], exportAs: ["kbqOptionAction"], usesInheritance: true, ngImport: i0, template: `
+        <ng-container [ngSwitch]="!!customIcon">
+            <i
+                class="mc kbq-icon mc-ellipsis_16"
+                *ngSwitchCase="false"
+            ></i>
+            <ng-content
+                *ngSwitchCase="true"
+                select="[kbq-icon]"
+            ></ng-content>
+        </ng-container>
+    `, isInline: true, styles: [".kbq-option-action{box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:-2px;width:24px;height:24px;cursor:pointer;outline:none;border:2px solid transparent;background:transparent}.kbq-option-action.kbq-disabled{cursor:default}\n"], dependencies: [{ kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqOptionActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-option-action', exportAs: 'kbqOptionAction', template: `
+        <ng-container [ngSwitch]="!!customIcon">
+            <i
+                class="mc kbq-icon mc-ellipsis_16"
+                *ngSwitchCase="false"
+            ></i>
+            <ng-content
+                *ngSwitchCase="true"
+                select="[kbq-icon]"
+            ></ng-content>
+        </ng-container>
+    `, host: {
+                        class: 'kbq-option-action',
+                        '[class.kbq-expanded]': 'false',
+                        '[class.kbq-disabled]': 'disabled',
+                        '[attr.disabled]': 'disabled || null',
+                        '[attr.tabIndex]': '-1',
+                        '(focus)': 'onFocus($event)',
+                        '(blur)': 'onBlur()',
+                        '(click)': 'onClick($event)',
+                        '(keydown)': 'onKeyDown($event)'
+                    }, inputs: ['disabled'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-option-action{box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:-2px;width:24px;height:24px;cursor:pointer;outline:none;border:2px solid transparent;background:transparent}.kbq-option-action.kbq-disabled{cursor:default}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.FocusMonitor }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [KBQ_OPTION_ACTION_PARENT]
+                }] }], propDecorators: { customIcon: [{
+                type: ContentChild,
+                args: ['customIcon']
+            }] } });
+
+/** @docs-private */
+class KbqOptgroupBase {
+}
+// tslint:disable-next-line: naming-convention
+const KbqOptgroupMixinBase = mixinDisabled(KbqOptgroupBase);
+let uniqueOptgroupIdCounter = 0;
+/**
+ * Component that is used to group instances of `kbq-option`.
+ */
+class KbqOptgroup extends KbqOptgroupMixinBase {
+    constructor() {
+        super(...arguments);
+        /** Unique id for the underlying label. */
+        this.labelId = `kbq-optgroup-label-${uniqueOptgroupIdCounter++}`;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqOptgroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqOptgroup, selector: "kbq-optgroup", inputs: { disabled: "disabled", label: "label" }, host: { properties: { "class.kbq-disabled": "disabled" }, classAttribute: "kbq-optgroup" }, exportAs: ["kbqOptgroup"], usesInheritance: true, ngImport: i0, template: "<label\n    class=\"kbq-optgroup-label\"\n    [id]=\"labelId\"\n>\n    {{ label }}\n</label>\n<ng-content select=\"kbq-option, kbq-list-option, kbq-timezone-option, ng-container\"></ng-content>\n", styles: [".kbq-optgroup-label{padding-left:var(--kbq-size-m, 12px);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqOptgroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-optgroup', exportAs: 'kbqOptgroup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['disabled'], host: {
+                        class: 'kbq-optgroup',
+                        '[class.kbq-disabled]': 'disabled'
+                    }, template: "<label\n    class=\"kbq-optgroup-label\"\n    [id]=\"labelId\"\n>\n    {{ label }}\n</label>\n<ng-content select=\"kbq-option, kbq-list-option, kbq-timezone-option, ng-container\"></ng-content>\n", styles: [".kbq-optgroup-label{padding-left:var(--kbq-size-m, 12px);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }] } });
+
+const KBQ_TITLE_TEXT_REF = new InjectionToken('KbqTitleTextRef');
+
+// Boilerplate for applying mixins to KbqPseudoCheckbox.
+/** @docs-private */
+class KbqPseudoCheckboxBase {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+}
+/** @docs-private */
+const KbqPseudoCheckboxMixinBase = mixinColor(mixinDisabled(KbqPseudoCheckboxBase), KbqComponentColors.Theme);
+/**
+ * Component that shows a simplified checkbox without including any kind of "real" checkbox.
+ * Meant to be used when the checkbox is purely decorative and a large number of them will be
+ * included, such as for the options in a multi-select. Uses no SVGs or complex animations.
+ * Note that theming is meant to be handled by the parent element, e.g.
+ * `kbq-primary .kbq-pseudo-checkbox`.
+ *
+ * Note that this component will be completely invisible to screen-reader users. This is *not*
+ * interchangeable with `<kbq-checkbox>` and should *not* be used if the user would directly
+ * interact with the checkbox. The pseudo-checkbox should only be used as an implementation detail
+ * of more complex components that appropriately handle selected / checked state.
+ * @docs-private
+ */
+class KbqPseudoCheckbox extends KbqPseudoCheckboxMixinBase {
+    constructor(elementRef) {
+        super(elementRef);
+        this.big = false;
+        this.state = 'unchecked';
+        this.disabled = false;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqPseudoCheckbox, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: { color: "color", big: "big", state: "state", disabled: "disabled" }, host: { properties: { "class.kbq-checkbox_big": "big", "class.kbq-indeterminate": "state === \"indeterminate\"", "class.kbq-checked": "state === \"checked\"", "class.kbq-disabled": "disabled" }, classAttribute: "kbq-pseudo-checkbox" }, usesInheritance: true, ngImport: i0, template: "<i class=\"kbq-checkbox-checkmark mc mc-check_16\"></i>\n<i class=\"kbq-checkbox-mixedmark mc mc-minus_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, 16px);height:var(--kbq-checkbox-size-normal-width, 16px);border-radius:var(--kbq-checkbox-size-normal-border-radius, 4px);border-width:var(--kbq-checkbox-size-normal-border-width, 1px);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, 16px);height:var(--kbq-checkbox-size-big-width, 16px);border-radius:var(--kbq-checkbox-size-big-border-radius, 4px);border-width:var(--kbq-checkbox-size-big-border-width, 1px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqPseudoCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-pseudo-checkbox', host: {
+                        class: 'kbq-pseudo-checkbox',
+                        '[class.kbq-checkbox_big]': 'big',
+                        '[class.kbq-indeterminate]': 'state === "indeterminate"',
+                        '[class.kbq-checked]': 'state === "checked"',
                         '[class.kbq-disabled]': 'disabled'
                     }, preserveWhitespaces: false, inputs: ['color'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<i class=\"kbq-checkbox-checkmark mc mc-check_16\"></i>\n<i class=\"kbq-checkbox-mixedmark mc mc-minus_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, 16px);height:var(--kbq-checkbox-size-normal-width, 16px);border-radius:var(--kbq-checkbox-size-normal-border-radius, 4px);border-width:var(--kbq-checkbox-size-normal-border-width, 1px);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, 16px);height:var(--kbq-checkbox-size-big-width, 16px);border-radius:var(--kbq-checkbox-size-big-border-radius, 4px);border-width:var(--kbq-checkbox-size-big-border-width, 1px)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { big: [{
@@ -1823,9 +2047,12 @@ class KbqOption extends KbqOptionBase {
         return this.element.nativeElement;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", 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: "14.0.0", version: "17.2.0", type: KbqOption, selector: "kbq-option", inputs: { value: "value", showCheckbox: "showCheckbox", disabled: "disabled" }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "click": "selectViaInteraction()", "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: "<kbq-pseudo-checkbox\n    *ngIf=\"showCheckbox\"\n    [state]=\"selected ? 'checked' : 'unchecked'\"\n    [disabled]=\"disabled\">\n</kbq-pseudo-checkbox>\n\n<span #kbqTitleText class=\"kbq-option-text\">\n    <ng-content></ng-content>\n</span>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-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-list-size-container-content-gap-horizontal, 8px);border-width:var(--kbq-list-size-container-focus-outline-width, 2px);border-style:solid;border-color:transparent;padding:calc(var(--kbq-list-size-container-padding-vertical, 4px) - var(--kbq-list-size-container-focus-outline-width, 2px)) calc(var(--kbq-list-size-container-padding-right, 12px) - var(--kbq-list-size-container-focus-outline-width, 2px)) calc(var(--kbq-list-size-container-padding-vertical, 4px) - var(--kbq-list-size-container-focus-outline-width, 2px)) calc(var(--kbq-list-size-container-padding-left, 12px) - var(--kbq-list-size-container-focus-outline-width, 2px))}.kbq-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 4px);padding-bottom:var(--kbq-list-size-text-padding-vertical, 4px)}.kbq-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option .kbq-list-text:empty{display:none}.kbq-option .kbq-list-option-caption{padding-top:var(--kbq-list-size-container-content-gap-vertical, 2px)}.kbq-option:not(.kbq-disabled){cursor:pointer}.kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 4px);padding-bottom:var(--kbq-list-size-text-padding-vertical, 4px)}.kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option-text:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["color", "big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqOption, selector: "kbq-option", inputs: { value: "value", showCheckbox: "showCheckbox", disabled: "disabled" }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "click": "selectViaInteraction()", "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: "<kbq-pseudo-checkbox\n    *ngIf=\"showCheckbox\"\n    [disabled]=\"disabled\"\n    [state]=\"selected ? 'checked' : 'unchecked'\"\n></kbq-pseudo-checkbox>\n\n<span\n    #kbqTitleText\n    class=\"kbq-option-text\"\n>\n    <ng-content></ng-content>\n</span>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-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, 8px);border:var(--kbq-size-3xs, 2px) solid transparent;padding-top:var(--kbq-size-xxs, 4px);padding-left:var(--kbq-size-m, 12px);padding-right:var(--kbq-size-m, 12px);padding-bottom:var(--kbq-size-xxs, 4px)}.kbq-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option .kbq-list-text:empty{display:none}.kbq-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs, 2px)}.kbq-option:not(.kbq-disabled){cursor:pointer}.kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option-text:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["color", "big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqOption, decorators: [{
             type: Component,
@@ -1839,9 +2066,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                         '[id]': 'id',
                         '(click)': 'selectViaInteraction()',
                         '(keydown)': 'handleKeydown($event)'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
-                            provide: KBQ_TITLE_TEXT_REF, useExisting: KbqOption
-                        }], template: "<kbq-pseudo-checkbox\n    *ngIf=\"showCheckbox\"\n    [state]=\"selected ? 'checked' : 'unchecked'\"\n    [disabled]=\"disabled\">\n</kbq-pseudo-checkbox>\n\n<span #kbqTitleText class=\"kbq-option-text\">\n    <ng-content></ng-content>\n</span>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-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-list-size-container-content-gap-horizontal, 8px);border-width:var(--kbq-list-size-container-focus-outline-width, 2px);border-style:solid;border-color:transparent;padding:calc(var(--kbq-list-size-container-padding-vertical, 4px) - var(--kbq-list-size-container-focus-outline-width, 2px)) calc(var(--kbq-list-size-container-padding-right, 12px) - var(--kbq-list-size-container-focus-outline-width, 2px)) calc(var(--kbq-list-size-container-padding-vertical, 4px) - var(--kbq-list-size-container-focus-outline-width, 2px)) calc(var(--kbq-list-size-container-padding-left, 12px) - var(--kbq-list-size-container-focus-outline-width, 2px))}.kbq-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 4px);padding-bottom:var(--kbq-list-size-text-padding-vertical, 4px)}.kbq-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option .kbq-list-text:empty{display:none}.kbq-option .kbq-list-option-caption{padding-top:var(--kbq-list-size-container-content-gap-vertical, 2px)}.kbq-option:not(.kbq-disabled){cursor:pointer}.kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 4px);padding-bottom:var(--kbq-list-size-text-padding-vertical, 4px)}.kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option-text:empty{display:none}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: KBQ_TITLE_TEXT_REF,
+                            useExisting: KbqOption
+                        }
+                    ], template: "<kbq-pseudo-checkbox\n    *ngIf=\"showCheckbox\"\n    [disabled]=\"disabled\"\n    [state]=\"selected ? 'checked' : 'unchecked'\"\n></kbq-pseudo-checkbox>\n\n<span\n    #kbqTitleText\n    class=\"kbq-option-text\"\n>\n    <ng-content></ng-content>\n</span>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-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, 8px);border:var(--kbq-size-3xs, 2px) solid transparent;padding-top:var(--kbq-size-xxs, 4px);padding-left:var(--kbq-size-m, 12px);padding-right:var(--kbq-size-m, 12px);padding-bottom:var(--kbq-size-xxs, 4px)}.kbq-option .kbq-list-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option .kbq-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option .kbq-list-text:empty{display:none}.kbq-option .kbq-list-option-caption{padding-top:var(--kbq-size-3xs, 2px)}.kbq-option:not(.kbq-disabled){cursor:pointer}.kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:content-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-option-text:empty{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -1901,120 +2131,6 @@ function getOptionScrollPosition(optionIndex, optionHeight, currentScrollPositio
     return currentScrollPosition;
 }
 
-const KBQ_OPTION_ACTION_PARENT = new InjectionToken('KBQ_OPTION_ACTION_PARENT');
-/** @docs-private */
-class KbqOptionActionBase {
-}
-/** @docs-private */
-const KbqOptionActionMixinBase = mixinTabIndex(mixinDisabled(KbqOptionActionBase));
-class KbqOptionActionComponent extends KbqOptionActionMixinBase {
-    get active() {
-        return this.hasFocus || !!this.option.dropdownTrigger?.opened;
-    }
-    constructor(elementRef, focusMonitor, option) {
-        super();
-        this.elementRef = elementRef;
-        this.focusMonitor = focusMonitor;
-        this.option = option;
-        this.hasFocus = false;
-        this.destroy = new Subject();
-        this.focusMonitor.monitor(this.elementRef.nativeElement);
-    }
-    ngAfterViewInit() {
-        if (!this.option.dropdownTrigger) {
-            return;
-        }
-        this.option.dropdownTrigger.restoreFocus = false;
-        this.option.dropdownTrigger.dropdownClosed
-            .pipe(takeUntil(this.destroy))
-            .subscribe(() => {
-            this.preventShowingTooltip();
-            const destroyReason = this.option.dropdownTrigger.lastDestroyReason === 'keydown' ?
-                'keyboard' :
-                'program';
-            this.focus(destroyReason);
-        });
-    }
-    ngOnDestroy() {
-        this.destroy.next();
-        this.destroy.complete();
-        this.focusMonitor.stopMonitoring(this.elementRef.nativeElement);
-    }
-    focus(origin, options) {
-        if (this.focusMonitor && origin) {
-            this.focusMonitor.focusVia(this.elementRef.nativeElement, origin, options);
-        }
-        else {
-            this.elementRef.nativeElement.focus();
-        }
-        this.hasFocus = true;
-    }
-    onFocus($event) {
-        $event.stopPropagation();
-        this.hasFocus = true;
-    }
-    onBlur() {
-        this.hasFocus = false;
-    }
-    onClick($event) {
-        $event.stopPropagation();
-    }
-    onKeyDown($event) {
-        if ([SPACE, ENTER].includes($event.keyCode) && this.option.dropdownTrigger) {
-            this.option.dropdownTrigger.openedBy = 'keyboard';
-            this.option.dropdownTrigger.toggle();
-        }
-        else if ($event.shiftKey && $event.keyCode === TAB) {
-            this.hasFocus = false;
-            this.option.focus();
-        }
-        else if ($event.keyCode === TAB) {
-            return;
-        }
-        $event.preventDefault();
-        $event.stopPropagation();
-    }
-    preventShowingTooltip() {
-        if (!this.option.tooltipTrigger) {
-            return;
-        }
-        this.option.tooltipTrigger.disabled = true;
-        setTimeout(() => this.option.tooltipTrigger.disabled = false);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqOptionActionComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.FocusMonitor }, { token: KBQ_OPTION_ACTION_PARENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqOptionActionComponent, selector: "kbq-option-action", inputs: { disabled: "disabled" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur()", "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" }, queries: [{ propertyName: "customIcon", first: true, predicate: ["customIcon"], descendants: true }], exportAs: ["kbqOptionAction"], usesInheritance: true, ngImport: i0, template: `
-        <ng-container [ngSwitch]="!!customIcon">
-            <i class="mc kbq-icon mc-ellipsis_16" *ngSwitchCase="false"></i>
-            <ng-content select="[kbq-icon]" *ngSwitchCase="true"></ng-content>
-        </ng-container>
-    `, isInline: true, styles: [".kbq-option-action{box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:-2px;width:24px;height:24px;cursor:pointer;outline:none;border:2px solid transparent;background:transparent}.kbq-option-action.kbq-disabled{cursor:default}\n"], dependencies: [{ kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqOptionActionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kbq-option-action', exportAs: 'kbqOptionAction', template: `
-        <ng-container [ngSwitch]="!!customIcon">
-            <i class="mc kbq-icon mc-ellipsis_16" *ngSwitchCase="false"></i>
-            <ng-content select="[kbq-icon]" *ngSwitchCase="true"></ng-content>
-        </ng-container>
-    `, host: {
-                        class: 'kbq-option-action',
-                        '[class.kbq-expanded]': 'false',
-                        '[class.kbq-disabled]': 'disabled',
-                        '[attr.disabled]': 'disabled || null',
-                        '[attr.tabIndex]': '-1',
-                        '(focus)': 'onFocus($event)',
-                        '(blur)': 'onBlur()',
-                        '(click)': 'onClick($event)',
-                        '(keydown)': 'onKeyDown($event)'
-                    }, inputs: ['disabled'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kbq-option-action{box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:-2px;width:24px;height:24px;cursor:pointer;outline:none;border:2px solid transparent;background:transparent}.kbq-option-action.kbq-disabled{cursor:default}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.FocusMonitor }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [KBQ_OPTION_ACTION_PARENT]
-                }] }], propDecorators: { customIcon: [{
-                type: ContentChild,
-                args: ['customIcon']
-            }] } });
-
 var MultipleMode;
 (function (MultipleMode) {
     MultipleMode["CHECKBOX"] = "checkbox";
@@ -2464,8 +2580,10 @@ class KbqPopUpTrigger {
             let newPlacement = this.placement;
             const { originX, originY, overlayX, overlayY } = $event.connectionPair;
             Object.keys(this.availablePositions).some((key) => {
-                if (originX === this.availablePositions[key].originX && originY === this.availablePositions[key].originY &&
-                    overlayX === this.availablePositions[key].overlayX && overlayY === this.availablePositions[key].overlayY) {
+                if (originX === this.availablePositions[key].originX &&
+                    originY === this.availablePositions[key].originY &&
+                    overlayX === this.availablePositions[key].overlayX &&
+                    overlayY === this.availablePositions[key].overlayY) {
                     newPlacement = key;
                     return true;
                 }
@@ -2527,7 +2645,8 @@ class KbqPopUpTrigger {
         }
     }
     handleKeydown(event) {
-        if (this.isOpen && event.keyCode === ESCAPE) { // tslint:disable-line
+        if (this.isOpen && event.keyCode === ESCAPE) {
+            // tslint:disable-line
             this.hide();
         }
     }
@@ -2543,14 +2662,10 @@ class KbqPopUpTrigger {
         this.detach();
         this.portal = this.portal || new ComponentPortal(this.getOverlayHandleComponentType(), this.hostView);
         this.instance = this.overlayRef.attach(this.portal).instance;
-        this.instance.afterHidden()
-            .pipe(takeUntil(this.destroyed))
-            .subscribe(this.detach);
+        this.instance.afterHidden().pipe(takeUntil(this.destroyed)).subscribe(this.detach);
         this.updateClassMap();
         this.updateData();
-        this.instance.visibleChange
-            .pipe(takeUntil(this.destroyed), distinctUntilChanged())
-            .subscribe((value) => {
+        this.instance.visibleChange.pipe(takeUntil(this.destroyed), distinctUntilChanged()).subscribe((value) => {
             this.visible = value;
             this.visibleChange.emit(value);
             this.isOpen = value;
@@ -2577,9 +2692,7 @@ class KbqPopUpTrigger {
             .withPositions([...EXTENDED_OVERLAY_POSITIONS])
             .withLockedPosition()
             .withScrollableContainers(this.scrollDispatcher.getAncestorScrollContainers(this.elementRef));
-        strategy.positionChanges
-            .pipe(takeUntil(this.destroyed))
-            .subscribe(this.onPositionChange);
+        strategy.positionChanges.pipe(takeUntil(this.destroyed)).subscribe(this.onPositionChange);
         this.overlayRef = this.overlay.create({
             ...this.overlayConfig,
             direction: this.direction,
@@ -2587,39 +2700,32 @@ class KbqPopUpTrigger {
             scrollStrategy: this.scrollStrategy()
         });
         this.subscribeOnClosingActions();
-        this.overlayRef.detachments()
-            .pipe(takeUntil(this.destroyed))
-            .subscribe(this.detach);
+        this.overlayRef.detachments().pipe(takeUntil(this.destroyed)).subscribe(this.detach);
         return this.overlayRef;
     }
     initListeners() {
         this.clearListeners();
         if (this.trigger.includes(PopUpTriggers.Click)) {
-            this.listeners
-                .set('click', () => this.show())
-                .forEach(this.addEventListener);
+            this.listeners.set(...this.createListener('click', this.show));
         }
         if (this.trigger.includes(PopUpTriggers.Hover)) {
             this.listeners
-                .set('mouseenter', () => this.show())
-                .set('mouseleave', () => this.hide())
-                .forEach(this.addEventListener);
+                .set(...this.createListener('mouseenter', this.show))
+                .set(...this.createListener('mouseleave', this.hide));
         }
         if (this.trigger.includes(PopUpTriggers.Focus)) {
             this.listeners
-                .set('focus', () => this.show())
-                .set('blur', () => this.hide())
-                .forEach(this.addEventListener);
+                .set(...this.createListener('focus', this.show))
+                .set(...this.createListener('blur', this.hide));
         }
         if (this.trigger.includes(PopUpTriggers.Keydown)) {
-            this.listeners
-                .set('keydown', (event) => {
+            this.listeners.set('keydown', (event) => {
                 if (event instanceof KeyboardEvent && [ENTER, SPACE].includes(event.keyCode)) {
                     this.show();
                 }
-            })
-                .forEach(this.addEventListener);
+            });
         }
+        this.listeners.forEach(this.addEventListener);
     }
     /** Updates the position of the current popover. */
     updatePosition(reapplyPosition = false) {
@@ -2657,6 +2763,15 @@ class KbqPopUpTrigger {
         this.listeners.forEach(this.removeEventListener);
         this.listeners.clear();
     }
+    createListener(name, listener) {
+        return [
+            name,
+            () => {
+                this.triggerName = name;
+                return listener.call(this);
+            }
+        ];
+    }
     subscribeOnClosingActions() {
         this.closingActionsSubscription?.unsubscribe();
         this.closingActionsSubscription = this.closingActions()
@@ -2676,33 +2791,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
             type: Directive
         }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$2.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: undefined }, { type: i2$1.Directionality }] });
 
-const selectEvents = 'selectEvents';
-
-/**
- * Returns an exception to be thrown when attempting to change a select's `multiple` option
- * after initialization.
- * @docs-private
- */
-function getKbqSelectDynamicMultipleError() {
-    return Error('Cannot change `multiple` mode of select after initialization.');
+/* tslint:disable:no-empty */
+class KbqSelectTrigger {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqSelectTrigger, isStandalone: true, selector: "kbq-select-trigger, [kbq-select-trigger]", ngImport: i0 }); }
 }
-/**
- * Returns an exception to be thrown when attempting to assign a non-array value to a select
- * in `multiple` mode. Note that `undefined` and `null` are still valid values to allow for
- * resetting the value.
- * @docs-private
- */
-function getKbqSelectNonArrayValueError() {
-    return Error('Value must be an array in multiple-selection mode.');
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kbq-select-trigger, [kbq-select-trigger]',
+                    standalone: true
+                }]
+        }] });
+class KbqSelectMatcher {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectMatcher, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqSelectMatcher, isStandalone: true, selector: "kbq-select-matcher, [kbq-select-matcher]", ngImport: i0 }); }
 }
-/**
- * Returns an exception to be thrown when assigning a non-function value to the comparator
- * used to determine if a value corresponds to an option. Note that whether the function
- * actually takes two values and returns a boolean is not checked.
- */
-function getKbqSelectNonFunctionValueError() {
-    return Error('`compareWith` must be a function.');
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectMatcher, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kbq-select-matcher, [kbq-select-matcher]',
+                    standalone: true
+                }]
+        }] });
+class KbqSelectFooter {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", 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: "17.2.0", ngImport: i0, type: KbqSelectFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kbq-select-footer, [kbq-select-footer]',
+                    host: { class: 'kbq-select__footer' },
+                    standalone: true
+                }]
+        }] });
+class KbqSelectSearch {
+    get ngControl() {
+        return this.formField.control.ngControl;
+    }
+    constructor(formField) {
+        this.formField = formField;
+        this.searchChangesSubscription = new Subscription();
+        this.isSearchChanged = false;
+        formField.canCleanerClearByEsc = false;
+    }
+    focus() {
+        this.formField.focusViaKeyboard();
+    }
+    reset() {
+        this.ngControl.reset();
+    }
+    value() {
+        return this.formField.control.value;
+    }
+    ngAfterContentInit() {
+        if (this.formField.control.controlType !== 'input') {
+            throw Error('KbqSelectSearch does not work without kbqInput');
+        }
+        if (!this.ngControl) {
+            throw Error('KbqSelectSearch does not work without ngControl');
+        }
+        Promise.resolve().then(() => {
+            this.searchChangesSubscription = this.ngControl.valueChanges.subscribe(() => {
+                this.isSearchChanged = true;
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.searchChangesSubscription.unsubscribe();
+    }
+    handleKeydown(event) {
+        // tslint:disable-next-line:deprecation
+        if (event.keyCode === ESCAPE) {
+            if (this.value()) {
+                this.reset();
+                event.stopPropagation();
+            }
+        }
+        // tslint:disable-next-line:deprecation
+        if ([SPACE, HOME, END].includes(event.keyCode)) {
+            event.stopPropagation();
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", 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: "17.2.0", type: KbqSelectSearch, isStandalone: true, selector: "[kbqSelectSearch]", host: { listeners: { "keydown": "handleKeydown($event)" } }, exportAs: ["kbqSelectSearch"], ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectSearch, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqSelectSearch]',
+                    exportAs: 'kbqSelectSearch',
+                    standalone: true,
+                    host: {
+                        '(keydown)': 'handleKeydown($event)'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [KBQ_FORM_FIELD_REF]
+                }] }] });
+class KbqSelectSearchEmptyResult {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectSearchEmptyResult, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqSelectSearchEmptyResult, isStandalone: true, selector: "[kbq-select-search-empty-result]", exportAs: ["kbqSelectSearchEmptyResult"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSelectSearchEmptyResult, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbq-select-search-empty-result]',
+                    exportAs: 'kbqSelectSearchEmptyResult',
+                    standalone: true
+                }]
+        }] });
 
 /** The max height of the select's overlay panel */
 const SELECT_PANEL_MAX_HEIGHT = 224;
@@ -2729,6 +2931,34 @@ const KBQ_SELECT_SCROLL_STRATEGY_PROVIDER = {
     useFactory: kbqSelectScrollStrategyProviderFactory
 };
 
+/**
+ * Returns an exception to be thrown when attempting to change a select's `multiple` option
+ * after initialization.
+ * @docs-private
+ */
+function getKbqSelectDynamicMultipleError() {
+    return Error('Cannot change `multiple` mode of select after initialization.');
+}
+/**
+ * Returns an exception to be thrown when attempting to assign a non-array value to a select
+ * in `multiple` mode. Note that `undefined` and `null` are still valid values to allow for
+ * resetting the value.
+ * @docs-private
+ */
+function getKbqSelectNonArrayValueError() {
+    return Error('Value must be an array in multiple-selection mode.');
+}
+/**
+ * Returns an exception to be thrown when assigning a non-function value to the comparator
+ * used to determine if a value corresponds to an option. Note that whether the function
+ * actually takes two values and returns a boolean is not checked.
+ */
+function getKbqSelectNonFunctionValueError() {
+    return Error('`compareWith` must be a function.');
+}
+
+const selectEvents = 'selectEvents';
+
 class KbqMeasureScrollbarService {
     get scrollBarWidth() {
         if (this._scrollBarWidth) {
@@ -2802,9 +3032,10 @@ class ThemeService {
             }
         };
         this.renderer = this.rendererFactory.createRenderer(null, null);
-        this.subscription = this.current
-            .pipe(pairwise())
-            .subscribe(this.update);
+        this.subscription = this.current.pipe(pairwise()).subscribe(this.update);
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
     }
     setThemes(items) {
         this.themes = items;
@@ -2831,36 +3062,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i0.RendererFactory2 }] });
 
-function isBoolean(val) { return typeof val === 'boolean'; }
-function toBoolean(value) {
-    return value != null && `${value}` !== 'false';
-}
-
 var MeasurementSystem;
 (function (MeasurementSystem) {
     MeasurementSystem["SI"] = "SI";
     MeasurementSystem["IEC"] = "IEC";
 })(MeasurementSystem || (MeasurementSystem = {}));
-const sizeUnitsConfig = {
-    defaultUnitSystem: MeasurementSystem.SI,
-    defaultPrecision: 2,
-    unitSystems: {
-        [MeasurementSystem.SI]: {
-            abbreviations: ['B', 'KB', 'MB', 'GB', 'TB'],
-            base: 10,
-            power: 3
-        },
-        [MeasurementSystem.IEC]: {
-            abbreviations: ['B', 'KiB', 'MiB', 'GiB', 'TiB'],
-            base: 2,
-            power: 10
-        }
-    }
-};
+const KBQ_SIZE_UNITS_DEFAULT_CONFIG = enUSFormattersData.sizeUnits;
+const KBQ_SIZE_UNITS_CONFIG = new InjectionToken('KbqSizeUnitsConfig');
 
-const formatDataSize = (value, systemCode = sizeUnitsConfig.defaultUnitSystem, precision = sizeUnitsConfig.defaultPrecision) => {
-    const system = sizeUnitsConfig.unitSystems[systemCode];
-    const { result, unit } = getHumanizedBytes(value, systemCode);
+const formatDataSize = (value, precision, system) => {
+    const { result, unit } = getHumanizedBytes(value, system);
     let volume;
     if (system.abbreviations[0] === unit) {
         volume = result.toString();
@@ -2877,25 +3088,20 @@ const formatDataSize = (value, systemCode = sizeUnitsConfig.defaultUnitSystem, p
  * Переводит байты в Кб, Мб, Гб
  *
  * @param value количество байт
- * @param systemCode система измерения
+ * @param system система измерения
  * @param threshold нижний порог подсчета
  */
-const getHumanizedBytes = (value, systemCode = sizeUnitsConfig.defaultUnitSystem, threshold) => {
-    const system = sizeUnitsConfig.unitSystems[systemCode];
-    if (!system) {
-        throw new Error(`Unit system "${systemCode}" not configured!`);
-    }
+const getHumanizedBytes = (value, system, threshold) => {
     if (!Number.isFinite(value)) {
         throw new Error('Argument "value" must be number!');
     }
-    const caculatedThreshold = Number.isFinite(threshold)
-        ? threshold : Math.pow(system.base, system.power);
+    const calculatedThreshold = Number.isFinite(threshold) ? threshold : Math.pow(system.base, system.power);
     const orderOfMagnitude = Math.pow(system.base, system.power);
     let result = value;
     let step = 0;
     const len = system.abbreviations.length - 1;
     while (step < len) {
-        if (caculatedThreshold !== undefined && result < caculatedThreshold) {
+        if (calculatedThreshold !== undefined && result < calculatedThreshold) {
             break;
         }
         step++;
@@ -2908,42 +3114,62 @@ const getHumanizedBytes = (value, systemCode = sizeUnitsConfig.defaultUnitSystem
 };
 
 class KbqDataSizePipe {
-    transform(source, precision = 2, measurementSystem = MeasurementSystem.SI) {
-        const { value, unit } = formatDataSize(source, measurementSystem, precision);
+    constructor(externalConfig, localeService) {
+        this.externalConfig = externalConfig;
+        this.localeService = localeService;
+        this.updateLocaleParams = () => {
+            this.config = this.externalConfig || this.localeService?.getParams('sizeUnits');
+        };
+        this.localeService?.changes.subscribe(this.updateLocaleParams);
+        if (!localeService) {
+            this.config = KBQ_SIZE_UNITS_DEFAULT_CONFIG;
+        }
+    }
+    transform(source, precision, unitSystemName) {
+        const unitSystem = this.config.unitSystems[unitSystemName || this.config.defaultUnitSystem];
+        const { value, unit } = formatDataSize(source, precision || this.config.defaultPrecision, unitSystem);
         return `${value} ${unit}`;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqDataSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.2.0", ngImport: i0, type: KbqDataSizePipe, name: "kbqDataSize" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqDataSizePipe, deps: [{ token: KBQ_SIZE_UNITS_CONFIG, optional: true }, { token: KBQ_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.2.0", ngImport: i0, type: KbqDataSizePipe, isStandalone: true, name: "kbqDataSize", pure: false }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqDataSizePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'kbqDataSize'
+                    name: 'kbqDataSize',
+                    standalone: true,
+                    pure: false
                 }]
-        }] });
-class KbqDataSizeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqDataSizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.0", ngImport: i0, type: KbqDataSizeModule, declarations: [KbqDataSizePipe], exports: [KbqDataSizePipe] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqDataSizeModule }); }
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [KBQ_SIZE_UNITS_CONFIG]
+                }] }, { type: KbqLocaleService, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [KBQ_LOCALE_SERVICE]
+                }] }] });
+
+function isBoolean(val) {
+    return typeof val === 'boolean';
+}
+function toBoolean(value) {
+    return value != null && `${value}` !== 'false';
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqDataSizeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [],
-                    exports: [KbqDataSizePipe],
-                    declarations: [KbqDataSizePipe]
-                }]
-        }] });
 
 const validationTooltipShowDelay = 10;
 const validationTooltipHideDelay = 3000;
-const KBQ_VALIDATION = new InjectionToken('KbqUseValidation', { factory: () => ({ useValidation: true }) });
+const KBQ_VALIDATION = new InjectionToken('KbqUseValidation', {
+    factory: () => ({ useValidation: true })
+});
 
-const VERSION = new Version('17.0.0-rc.1+sha-975286a');
+const VERSION = new Version('17.0.0-rc.9+sha-ba3b07d');
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AbsoluteDateFormatterPipe, AbsoluteDateShortFormatterPipe, AbsoluteDateTimeFormatterPipe, AbsoluteShortDateTimeFormatterPipe, AnimationCurves, BOTTOM_LEFT_POSITION_PRIORITY, BOTTOM_POSITION_PRIORITY, BOTTOM_RIGHT_POSITION_PRIORITY, DateAdapter, DateFormatter, EXTENDED_OVERLAY_POSITIONS, ErrorStateMatcher, 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_FORM_FIELD_REF, KBQ_LABEL_GLOBAL_OPTIONS, KBQ_LOCALE_DATA, KBQ_LOCALE_ID, KBQ_LOCALE_SERVICE, KBQ_NUMBER_FORMATTER_DEFAULT_OPTIONS, KBQ_NUMBER_FORMATTER_OPTIONS, KBQ_OPTION_ACTION_PARENT, KBQ_OPTION_PARENT_COMPONENT, KBQ_PARENT_ANIMATION_COMPONENT, KBQ_SANITY_CHECKS, KBQ_SELECT_SCROLL_STRATEGY, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER, KBQ_TITLE_TEXT_REF, KBQ_VALIDATION, KbqCommonModule, KbqComponentColors, KbqDataSizeModule, KbqDataSizePipe, KbqDecimalPipe, KbqDefaultThemes, KbqForm, KbqFormElement, KbqFormattersModule, KbqFormsModule, KbqHighlightModule, KbqHighlightPipe, KbqLine, KbqLineModule, KbqLineSetter, KbqLocaleService, KbqLocaleServiceModule, KbqMeasureScrollbarService, KbqOptgroup, KbqOptgroupBase, KbqOptgroupMixinBase, KbqOption, KbqOptionActionBase, KbqOptionActionComponent, KbqOptionActionMixinBase, KbqOptionBase, KbqOptionModule, KbqOptionSelectionChange, KbqPopUp, KbqPopUpTrigger, KbqPseudoCheckbox, KbqPseudoCheckboxBase, KbqPseudoCheckboxMixinBase, KbqPseudoCheckboxModule, KbqRoundDecimalPipe, KbqTableNumberPipe, 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, PopUpPlacements, PopUpSizes, PopUpTriggers, PopUpVisibility, RIGHT_BOTTOM_POSITION_PRIORITY, RIGHT_POSITION_PRIORITY, RIGHT_TOP_POSITION_PRIORITY, RangeDateFormatterPipe, RangeDateTimeFormatterPipe, RangeMiddleDateTimeFormatterPipe, RangeShortDateFormatterPipe, RangeShortDateTimeFormatterPipe, RelativeDateFormatterPipe, RelativeDateTimeFormatterPipe, RelativeShortDateFormatterPipe, RelativeShortDateTimeFormatterPipe, SELECT_PANEL_INDENT_PADDING_X, SELECT_PANEL_MAX_HEIGHT, SELECT_PANEL_PADDING_X, SELECT_PANEL_VIEWPORT_PADDING, ShowOnDirtyErrorStateMatcher, TOP_LEFT_POSITION_PRIORITY, TOP_POSITION_PRIORITY, TOP_RIGHT_POSITION_PRIORITY, ThemePalette, ThemeService, VERSION, countGroupLabelsBeforeOption, enUSFormattersData, enUSLocaleData, esLAFormattersData, esLALocaleData, escapeRegExp, faIRFormattersData, faIRLocaleData, fadeAnimation, formatDataSize, getHumanizedBytes, getKbqSelectDynamicMultipleError, getKbqSelectNonArrayValueError, getKbqSelectNonFunctionValueError, getOptionScrollPosition, isBoolean, isWithin, kbqSelectAnimations, kbqSelectScrollStrategyProviderFactory, mixinColor, mixinDisabled, mixinErrorState, mixinTabIndex, ptBRFormattersData, ptBRLocaleData, ruRUFormattersData, ruRULocaleData, selectEvents, sizeUnitsConfig, toBoolean, validationTooltipHideDelay, validationTooltipShowDelay, zhCNFormattersData, zhCNLocaleData };
+export { AbsoluteDateFormatterPipe, AbsoluteDateShortFormatterPipe, AbsoluteDateTimeFormatterPipe, AbsoluteShortDateTimeFormatterPipe, AnimationCurves, BOTTOM_LEFT_POSITION_PRIORITY, BOTTOM_POSITION_PRIORITY, BOTTOM_RIGHT_POSITION_PRIORITY, DateAdapter, DateFormatter, EXTENDED_OVERLAY_POSITIONS, ErrorStateMatcher, 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_FORM_FIELD_REF, KBQ_LABEL_GLOBAL_OPTIONS, KBQ_LOCALE_DATA, KBQ_LOCALE_ID, KBQ_LOCALE_SERVICE, KBQ_NUMBER_FORMATTER_DEFAULT_OPTIONS, KBQ_NUMBER_FORMATTER_OPTIONS, KBQ_OPTION_ACTION_PARENT, KBQ_OPTION_PARENT_COMPONENT, KBQ_PARENT_ANIMATION_COMPONENT, KBQ_SANITY_CHECKS, KBQ_SELECT_SCROLL_STRATEGY, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER, KBQ_SIZE_UNITS_CONFIG, KBQ_SIZE_UNITS_DEFAULT_CONFIG, KBQ_TITLE_TEXT_REF, KBQ_VALIDATION, KbqCommonModule, KbqComponentColors, KbqDataSizePipe, KbqDecimalPipe, KbqDefaultThemes, KbqForm, KbqFormElement, KbqFormattersModule, KbqFormsModule, KbqHighlightModule, KbqHighlightPipe, KbqLine, KbqLineModule, KbqLineSetter, KbqLocaleService, KbqLocaleServiceModule, KbqMeasureScrollbarService, KbqOptgroup, KbqOptgroupBase, KbqOptgroupMixinBase, KbqOption, KbqOptionActionBase, KbqOptionActionComponent, KbqOptionActionMixinBase, KbqOptionBase, KbqOptionModule, KbqOptionSelectionChange, KbqPopUp, KbqPopUpTrigger, KbqPseudoCheckbox, KbqPseudoCheckboxBase, KbqPseudoCheckboxMixinBase, KbqPseudoCheckboxModule, KbqRoundDecimalPipe, KbqSelectFooter, KbqSelectMatcher, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqSelectTrigger, KbqTableNumberPipe, 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, PopUpPlacements, PopUpSizes, PopUpTriggers, PopUpVisibility, RIGHT_BOTTOM_POSITION_PRIORITY, RIGHT_POSITION_PRIORITY, RIGHT_TOP_POSITION_PRIORITY, RangeDateFormatterPipe, RangeDateTimeFormatterPipe, RangeMiddleDateTimeFormatterPipe, RangeShortDateFormatterPipe, RangeShortDateTimeFormatterPipe, RelativeDateFormatterPipe, RelativeDateTimeFormatterPipe, RelativeShortDateFormatterPipe, RelativeShortDateTimeFormatterPipe, SELECT_PANEL_INDENT_PADDING_X, SELECT_PANEL_MAX_HEIGHT, SELECT_PANEL_PADDING_X, SELECT_PANEL_VIEWPORT_PADDING, ShowOnDirtyErrorStateMatcher, TOP_LEFT_POSITION_PRIORITY, TOP_POSITION_PRIORITY, TOP_RIGHT_POSITION_PRIORITY, ThemePalette, ThemeService, VERSION, countGroupLabelsBeforeOption, enUSFormattersData, enUSLocaleData, esLAFormattersData, esLALocaleData, escapeRegExp, faIRFormattersData, faIRLocaleData, fadeAnimation, formatDataSize, getHumanizedBytes, getKbqSelectDynamicMultipleError, getKbqSelectNonArrayValueError, getKbqSelectNonFunctionValueError, getOptionScrollPosition, isBoolean, isWithin, kbqSelectAnimations, kbqSelectScrollStrategyProviderFactory, mixinColor, mixinDisabled, mixinErrorState, mixinTabIndex, ptBRFormattersData, ptBRLocaleData, ruRUFormattersData, ruRULocaleData, selectEvents, toBoolean, validationTooltipHideDelay, validationTooltipShowDelay, zhCNFormattersData, zhCNLocaleData };
 //# sourceMappingURL=koobiq-components-core.mjs.map