@koobiq/components 17.0.0-rc.10 → 17.0.0-rc.12

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, Subscription, pairwise } from 'rxjs';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import { ENTER, SPACE, TAB, ESCAPE, HOME, END } from '@koobiq/cdk/keycodes';
+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.
@@ -77,6 +77,53 @@ const kbqSelectAnimations = {
 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: {
@@ -950,7 +959,10 @@ 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) {
@@ -1090,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.
@@ -1172,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.
@@ -1249,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)) {
@@ -1266,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]) };
@@ -1285,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]);
             });
@@ -1303,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)
@@ -1433,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;
@@ -1631,7 +1635,127 @@ 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 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
+                *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 {
@@ -1649,18 +1773,20 @@ class KbqOptgroup extends KbqOptgroupMixinBase {
         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 }); }
+    /** @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 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"] }]
+                    }, 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 {
@@ -1921,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, 6px) - 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, 6px) - 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, 0);padding-bottom:var(--kbq-list-size-text-padding-vertical, 0)}.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, 0);padding-bottom:var(--kbq-list-size-text-padding-vertical, 0)}.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:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) 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,
@@ -1937,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, 6px) - 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, 6px) - 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, 0);padding-bottom:var(--kbq-list-size-text-padding-vertical, 0)}.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, 0);padding-bottom:var(--kbq-list-size-text-padding-vertical, 0)}.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:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) 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
                 }, {
@@ -1999,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";
@@ -2562,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;
                 }
@@ -2625,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();
         }
     }
@@ -2641,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;
@@ -2675,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,
@@ -2685,16 +2700,13 @@ 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(...this.createListener('click', this.show));
+            this.listeners.set(...this.createListener('click', this.show));
         }
         if (this.trigger.includes(PopUpTriggers.Hover)) {
             this.listeners
@@ -2707,15 +2719,13 @@ class KbqPopUpTrigger {
                 .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();
                 }
             });
         }
-        this.listeners
-            .forEach(this.addEventListener);
+        this.listeners.forEach(this.addEventListener);
     }
     /** Updates the position of the current popover. */
     updatePosition(reapplyPosition = false) {
@@ -2781,59 +2791,6 @@ 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.');
-}
-/**
- * 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.');
-}
-
-/** The max height of the select's overlay panel */
-const SELECT_PANEL_MAX_HEIGHT = 224;
-/** The panel's padding on the x-axis */
-const SELECT_PANEL_PADDING_X = 1;
-/** The panel's x axis padding if it is indented (e.g. there is an option group). */
-/* tslint:disable-next-line:no-magic-numbers */
-const SELECT_PANEL_INDENT_PADDING_X = SELECT_PANEL_PADDING_X * 2;
-/**
- * The select panel will only "fit" inside the viewport if it is positioned at
- * this value or more away from the viewport boundary.
- */
-const SELECT_PANEL_VIEWPORT_PADDING = 8;
-/** Injection token that determines the scroll handling while a select is open. */
-const KBQ_SELECT_SCROLL_STRATEGY = new InjectionToken('kbq-select-scroll-strategy');
-/** @docs-private */
-function kbqSelectScrollStrategyProviderFactory(overlay) {
-    return () => overlay.scrollStrategies.reposition();
-}
-/** @docs-private */
-const KBQ_SELECT_SCROLL_STRATEGY_PROVIDER = {
-    provide: KBQ_SELECT_SCROLL_STRATEGY,
-    deps: [Overlay],
-    useFactory: kbqSelectScrollStrategyProviderFactory
-};
-
 /* 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 }); }
@@ -2949,6 +2906,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                 }]
         }] });
 
+/** The max height of the select's overlay panel */
+const SELECT_PANEL_MAX_HEIGHT = 224;
+/** The panel's padding on the x-axis */
+const SELECT_PANEL_PADDING_X = 1;
+/** The panel's x axis padding if it is indented (e.g. there is an option group). */
+/* tslint:disable-next-line:no-magic-numbers */
+const SELECT_PANEL_INDENT_PADDING_X = SELECT_PANEL_PADDING_X * 2;
+/**
+ * The select panel will only "fit" inside the viewport if it is positioned at
+ * this value or more away from the viewport boundary.
+ */
+const SELECT_PANEL_VIEWPORT_PADDING = 8;
+/** Injection token that determines the scroll handling while a select is open. */
+const KBQ_SELECT_SCROLL_STRATEGY = new InjectionToken('kbq-select-scroll-strategy');
+/** @docs-private */
+function kbqSelectScrollStrategyProviderFactory(overlay) {
+    return () => overlay.scrollStrategies.reposition();
+}
+/** @docs-private */
+const KBQ_SELECT_SCROLL_STRATEGY_PROVIDER = {
+    provide: KBQ_SELECT_SCROLL_STRATEGY,
+    deps: [Overlay],
+    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) {
@@ -3022,9 +3032,7 @@ 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();
@@ -3054,11 +3062,6 @@ 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";
@@ -3074,9 +3077,7 @@ const formatDataSize = (value, precision, system) => {
         volume = result.toString();
     }
     else {
-        volume = result
-            .toFixed(precision)
-            .replace(/\./g, ',');
+        volume = result.toFixed(precision).replace(/\./g, ',');
     }
     return {
         value: volume,
@@ -3094,8 +3095,7 @@ const getHumanizedBytes = (value, system, threshold) => {
     if (!Number.isFinite(value)) {
         throw new Error('Argument "value" must be number!');
     }
-    const calculatedThreshold = 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;
@@ -3120,8 +3120,7 @@ class KbqDataSizePipe {
         this.updateLocaleParams = () => {
             this.config = this.externalConfig || this.localeService?.getParams('sizeUnits');
         };
-        this.localeService?.changes
-            .subscribe(this.updateLocaleParams);
+        this.localeService?.changes.subscribe(this.updateLocaleParams);
         if (!localeService) {
             this.config = KBQ_SIZE_UNITS_DEFAULT_CONFIG;
         }
@@ -3153,11 +3152,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                     args: [KBQ_LOCALE_SERVICE]
                 }] }] });
 
+function isBoolean(val) {
+    return typeof val === 'boolean';
+}
+function toBoolean(value) {
+    return value != null && `${value}` !== 'false';
+}
+
 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.10+sha-f28bf2f');
+const VERSION = new Version('17.0.0-rc.12+sha-3d08353');
 
 /**
  * Generated bundle index. Do not edit.