@koobiq/components 16.0.0-beta.1 → 16.0.0-beta.10

package/fesm2022/koobiq-components-core.mjs

@@ -7,7 +7,7 @@ import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coerci
 import * as i1 from '@mosaic-design/date-adapter';
 import { DateAdapter as DateAdapter$1 } from '@mosaic-design/date-adapter';
 import { DateFormatter as DateFormatter$1 } from '@mosaic-design/date-formatter';
-import { BehaviorSubject, Subject } from 'rxjs';
+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';
@@ -38,7 +38,7 @@ var AnimationCurves;
  * const containing the metadata for one animation.
  *
  */
-const mcSelectAnimations = {
+const kbqSelectAnimations = {
     /**
      * This animation transforms the select's overlay panel on and off the page.
      *
@@ -74,8 +74,8 @@ const mcSelectAnimations = {
         ])
     ])
 };
-const transformPanel = mcSelectAnimations.transformPanel;
-const fadeInContent = mcSelectAnimations.fadeInContent;
+const transformPanel = kbqSelectAnimations.transformPanel;
+const fadeInContent = kbqSelectAnimations.fadeInContent;
 
 // Injection token that configures whether the koobiq sanity checks are enabled.
 const KBQ_SANITY_CHECKS = new InjectionToken('kbq-sanity-checks', {
@@ -86,7 +86,7 @@ function mcSanityChecksFactory() {
     return true;
 }
 /**
- * Module that captures anything that should be loaded and/or run for *all* Mosaic
+ * Module that captures anything that should be loaded and/or run for *all* Koobiq
  * components. This includes Bidi, etc.
  *
  * This module should be imported to each top-level component module (e.g., KbqTabsModule).
@@ -525,59 +525,208 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
         }], ctorParameters: function () { return [{ type: DateAdapter }, { type: DateFormatter }]; } });
 
 const enUSLocaleData = {
-    en: {
+    'en-US': {
         select: { hiddenItemsText: 'one more' },
         datepicker: {
-            placeholder: 'dd/mm/yyyy',
-            dateInput: 'dd/MM/yyyy'
+            placeholder: 'yyyy-mm-dd',
+            dateInput: 'yyyy-MM-dd'
+        },
+        formatters: {
+            number: {
+                rounding: {
+                    separator: '',
+                    groupSeparator: '.',
+                    thousand: 'K',
+                    million: 'M',
+                    billion: 'B',
+                    trillion: 'T'
+                }
+            }
+        },
+        input: {
+            number: {
+                groupSeparator: [','],
+                fractionSeparator: '.'
+            }
         }
     }
 };
 
 const esLALocaleData = {
     'es-LA': {
-        select: { hiddenItemsText: 'más' }
+        select: { hiddenItemsText: 'más' },
+        datepicker: {
+            placeholder: 'dd/mm/aaaa'
+        },
+        timepicker: {
+            placeholder: {
+                full: 'hh:mm:ss',
+                short: 'hh:mm'
+            }
+        },
+        formatters: {
+            number: {
+                rounding: {
+                    separator: '',
+                    groupSeparator: ',',
+                    thousand: 'K',
+                    million: 'M',
+                    billion: 'MRD',
+                    trillion: 'B'
+                }
+            }
+        },
+        input: {
+            number: {
+                // nbsp is generated automatically and used by default in spec
+                // tslint:disable-next-line:no-irregular-whitespace
+                groupSeparator: [' ', ' '],
+                fractionSeparator: ','
+            }
+        }
     }
 };
 
 const faIRLocaleData = {
     'fa-IR': {
-        select: { hiddenItemsText: 'أكثر' }
+        select: { hiddenItemsText: 'أكثر' },
+        datepicker: {
+            placeholder: 'روز/ ماه/سال'
+        },
+        timepicker: {
+            placeholder: {
+                full: 'ثانیه:دقیقه:ساعت',
+                short: 'دقیقه:ساعت'
+            }
+        },
+        formatters: {
+            number: {
+                rounding: {
+                    separator: ' ',
+                    groupSeparator: '٫',
+                    thousand: 'هزار',
+                    million: 'میلیون',
+                    billion: 'م',
+                    trillion: 'تریلیون',
+                    rtl: true
+                }
+            }
+        },
+        input: {
+            number: {
+                groupSeparator: ['\u066C'],
+                fractionSeparator: '\u066B'
+            }
+        }
     }
 };
 
 const ptBRLocaleData = {
     'pt-BR': {
-        select: { hiddenItemsText: 'mais' }
+        select: { hiddenItemsText: 'mais' },
+        datepicker: {
+            placeholder: 'dd/mm/yyyy'
+        },
+        timepicker: {
+            placeholder: {
+                full: 'hh:mm:ss',
+                short: 'hh:mm'
+            }
+        },
+        formatters: {
+            number: {
+                rounding: {
+                    separator: ' ',
+                    groupSeparator: ',',
+                    thousand: 'mil',
+                    million: 'mi',
+                    billion: 'bi',
+                    trillion: 'tri'
+                }
+            }
+        },
+        input: {
+            number: {
+                groupSeparator: ['.'],
+                fractionSeparator: ','
+            }
+        }
     }
 };
 
 const ruRULocaleData = {
-    ru: {
+    'ru-RU': {
         select: { hiddenItemsText: 'еще' },
         datepicker: {
             placeholder: 'дд.мм.гггг',
             dateInput: 'dd.MM.yyyy'
+        },
+        formatters: {
+            number: {
+                rounding: {
+                    separator: ' ',
+                    groupSeparator: ',',
+                    thousand: 'К',
+                    million: 'М',
+                    billion: 'М',
+                    trillion: 'Т'
+                }
+            }
+        },
+        input: {
+            number: {
+                // nbsp is generated automatically and used by default in spec
+                // tslint:disable-next-line:no-irregular-whitespace
+                groupSeparator: [' ', ' '],
+                fractionSeparator: ',',
+                startFormattingFrom: 4
+            }
         }
     }
 };
 
 const znCNLocaleData = {
     'zh-CN': {
-        select: { hiddenItemsText: '更多的' }
+        select: { hiddenItemsText: '更多的' },
+        datepicker: {
+            placeholder: '年/月/日'
+        },
+        timepicker: {
+            placeholder: {
+                full: '时:分:秒',
+                short: '时:分'
+            }
+        },
+        formatters: {
+            number: {
+                rounding: {
+                    separator: ' ',
+                    groupSeparator: '.',
+                    tenThousand: '万',
+                    oneHundredMillions: '亿',
+                    trillion: '兆'
+                }
+            }
+        },
+        input: {
+            number: {
+                groupSeparator: [','],
+                fractionSeparator: '.'
+            }
+        }
     }
 };
 
 const KBQ_LOCALE_ID$1 = new InjectionToken('KbqLocaleId');
-const KBQ_DEFAULT_LOCALE_ID = 'ru';
+const KBQ_DEFAULT_LOCALE_ID = 'ru-RU';
 function KBQ_DEFAULT_LOCALE_DATA_FACTORY() {
     return {
         items: [
-            { id: 'en', name: 'English' },
+            { id: 'en-US', name: 'English' },
             { id: 'zh-CN', name: '简体中文' },
             { id: 'es-LA', name: 'Español' },
             { id: 'pt-BR', name: 'Português' },
-            { id: 'ru', name: 'Русский' },
+            { id: 'ru-RU', name: 'Русский' },
             { id: 'fa-IR', name: 'فارسی' }
         ],
         ...ruRULocaleData,
@@ -672,8 +821,29 @@ const minIntGroupPosition = 1;
 const minFractionGroupPosition = 3;
 const maxFractionGroupPosition = 5;
 const useGroupingPosition = 7;
+// tslint:disable:no-magic-numbers
+const ROUNDING_UNITS = {
+    thousand: 1e3,
+    tenThousand: 10 * 1e3,
+    million: 1e6,
+    oneHundredMillions: 100 * 1e6,
+    billion: 1e9,
+    trillion: 1e12
+};
+const intervalsConfig = {
+    supportedLanguages: ['ru-RU', 'en-US', 'es-LA', 'pt-BR', 'fa-IR'],
+    intervals: [
+        { startRange: 1, endRange: ROUNDING_UNITS.thousand },
+        { startRange: ROUNDING_UNITS.thousand, endRange: ROUNDING_UNITS.tenThousand, precision: 1 },
+        { startRange: ROUNDING_UNITS.tenThousand, endRange: ROUNDING_UNITS.million },
+        { startRange: ROUNDING_UNITS.million, endRange: ROUNDING_UNITS.million * 10, precision: 1 },
+        { startRange: ROUNDING_UNITS.million * 10, endRange: ROUNDING_UNITS.billion }
+    ]
+};
+// tslint:enable:no-magic-numbers
 class ParsedDigitsInfo {
 }
+const defaultValueForGroupingInRULocale = 10000;
 function parseDigitsInfo(digitsInfo) {
     const parts = digitsInfo.match(NUMBER_FORMAT_REGEXP);
     if (parts === null) {
@@ -737,16 +907,28 @@ class KbqDecimalPipe {
             ...this.options,
             ...parsedDigitsInfo
         };
+        if (this.isSpecialFormatForRULocale(currentLocale, value, parsedDigitsInfo?.useGrouping)) {
+            options.useGrouping = false;
+        }
         try {
             const num = strToNumber(value);
+            /* Guideline requires for group separator to be `space`, as in 'ru-RU' locale.
+             * But by default in es-LA locale is used `comma`.
+             * To reduce data manipulation, 'ru-RU' locale is used. */
+            if (currentLocale === 'es-LA') {
+                return Intl.NumberFormat.call(this, 'ru-RU', options).format(num);
+            }
             return Intl.NumberFormat.call(this, currentLocale, options).format(num);
         }
         catch (error) {
             throw Error(`InvalidPipeArgument: KbqDecimalPipe for pipe '${JSON.stringify(error.message)}'`);
         }
     }
+    isSpecialFormatForRULocale(locale, value, grouping) {
+        return ['ru', 'ru-RU'].includes(locale) && grouping === undefined && value < defaultValueForGroupingInRULocale;
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDecimalPipe, deps: [{ token: KBQ_LOCALE_ID, optional: true }, { token: KBQ_LOCALE_SERVICE, optional: true }, { token: KBQ_NUMBER_FORMATTER_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: KbqDecimalPipe, name: "mcNumber", pure: false }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: KbqDecimalPipe, name: "kbqNumber", pure: false }); }
     /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDecimalPipe, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDecimalPipe, decorators: [{
@@ -754,7 +936,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
             args: [{ providedIn: 'root' }]
         }, {
             type: Pipe,
-            args: [{ name: 'mcNumber', pure: false }]
+            args: [{ name: 'kbqNumber', pure: false }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [KBQ_LOCALE_ID]
+                }] }, { type: KbqLocaleService, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [KBQ_LOCALE_SERVICE]
+                }] }, { type: ParsedDigitsInfo, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [KBQ_NUMBER_FORMATTER_OPTIONS]
+                }] }]; } });
+class KbqTableNumberPipe {
+    constructor(id, localeService, options) {
+        this.id = id;
+        this.localeService = localeService;
+        this.options = options;
+        this.options = this.options || KBQ_NUMBER_FORMATTER_DEFAULT_OPTIONS;
+        this.localeService?.changes
+            .subscribe((newId) => this.id = newId);
+    }
+    /**
+     * @param value The number to be formatted.
+     * @param digitsInfo Decimal representation options, specified by a string
+     * in the following format:<br>
+     * <code>{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}</code>.
+     *   - `minIntegerDigits`: The minimum number of integer digits before the decimal point.
+     * Default is `1`.
+     *   - `minFractionDigits`: The minimum number of digits after the decimal point.
+     * Default is `0`.
+     *   - `maxFractionDigits`: The maximum number of digits after the decimal point.
+     * Default is `3`.
+     * @param locale A locale code for the locale format rules to use.
+     * When not supplied, uses the value of `KBQ_LOCALE_ID`, which is `ru` by default.
+     */
+    transform(value, digitsInfo, locale) {
+        if (isEmpty(value)) {
+            return null;
+        }
+        const currentLocale = locale || this.id || KBQ_DEFAULT_LOCALE_ID;
+        let parsedDigitsInfo;
+        if (digitsInfo) {
+            parsedDigitsInfo = parseDigitsInfo(digitsInfo);
+        }
+        const options = {
+            ...this.options,
+            ...parsedDigitsInfo
+        };
+        try {
+            const num = strToNumber(value);
+            /* Guideline requires for group separator to be `space`, as in 'ru-RU' locale.
+             * But by default in es-LA locale is used `comma`.
+             * To reduce data manipulation, 'ru-RU' locale is used. */
+            if (currentLocale === 'es-LA') {
+                return Intl.NumberFormat.call(this, 'ru-RU', options).format(num);
+            }
+            return Intl.NumberFormat.call(this, currentLocale, options).format(num);
+        }
+        catch (error) {
+            throw Error(`InvalidPipeArgument: KbqTableNumberPipe for pipe '${JSON.stringify(error.message)}'`);
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTableNumberPipe, deps: [{ token: KBQ_LOCALE_ID, optional: true }, { token: KBQ_LOCALE_SERVICE, optional: true }, { token: KBQ_NUMBER_FORMATTER_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: KbqTableNumberPipe, name: "kbqTableNumber", pure: false }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTableNumberPipe, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTableNumberPipe, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }, {
+            type: Pipe,
+            args: [{ name: 'kbqTableNumber', pure: false }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -771,10 +1029,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                     type: Inject,
                     args: [KBQ_NUMBER_FORMATTER_OPTIONS]
                 }] }]; } });
+function isWithin(startRange, endRange, valueToCheck) {
+    return startRange <= valueToCheck && valueToCheck < endRange;
+}
+class KbqRoundDecimalPipe {
+    constructor(id, localeService) {
+        this.id = id;
+        this.localeService = localeService;
+        this.localeService?.changes
+            .subscribe((newId) => this.id = newId);
+    }
+    transform(value, locale) {
+        if (isEmpty(value)) {
+            return null;
+        }
+        const currentLocale = locale || this.id || KBQ_DEFAULT_LOCALE_ID;
+        this.roundingOptions = this.localeService.locales[currentLocale].formatters.number.rounding;
+        try {
+            const num = strToNumber(value);
+            const unit = this.calculateUnit(num);
+            if (!unit) {
+                return Intl.NumberFormat.call(this, currentLocale, { useGrouping: false }).format(num);
+            }
+            let parts = {};
+            if (intervalsConfig.supportedLanguages.includes(currentLocale)) {
+                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])
+                                };
+                        }
+                        else {
+                            parts = { num: Math.round(num / ROUNDING_UNITS[unit]) };
+                        }
+                    }
+                    return within;
+                });
+            }
+            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]);
+            });
+            const calculatedValue = parts.fraction
+                ? `${parts.num}${this.roundingOptions.groupSeparator}${parts.fraction}`
+                : `${parts.num}`;
+            return `${calculatedValue}${this.roundingOptions.separator}${this.roundingOptions[unit]}`;
+        }
+        catch (error) {
+            throw Error(`InvalidPipeArgument: KbqRoundDecimalPipe for pipe '${JSON.stringify(error.message)}'`);
+        }
+    }
+    calculateDecimal(num, divider) {
+        /* tslint:disable-next-line:no-magic-numbers */
+        return Math.round(num / divider % 1 * 10);
+    }
+    /**
+     * 2 * 1000 is a number in the interval of [1500...2500)
+     *
+     * 2,0 * 1000 is a number in the interval of [1950...2050)
+     */
+    calculatePartsForThousands(num) {
+        const dividedValue = num / ROUNDING_UNITS.thousand;
+        const div = Math.round(dividedValue) * ROUNDING_UNITS.thousand;
+        const fifty = 50;
+        return isWithin(div - fifty, div + fifty, num)
+            ? { num: Math.round(dividedValue), fraction: 0 }
+            : { num: Math.round(dividedValue) };
+    }
+    calculateUnit(num) {
+        let currentUnit;
+        const localizedOptions = Object.keys(this.roundingOptions);
+        Object.keys(ROUNDING_UNITS).every((key) => {
+            if (!localizedOptions.includes(key)) {
+                return true;
+            }
+            if (num / ROUNDING_UNITS[key] >= 1) {
+                currentUnit = key;
+                return true;
+            }
+            return false;
+        });
+        return currentUnit;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqRoundDecimalPipe, deps: [{ token: KBQ_LOCALE_ID, optional: true }, { token: KBQ_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: KbqRoundDecimalPipe, name: "kbqRoundNumber", pure: false }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqRoundDecimalPipe, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqRoundDecimalPipe, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }, {
+            type: Pipe,
+            args: [{ name: 'kbqRoundNumber', pure: false }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [KBQ_LOCALE_ID]
+                }] }, { type: KbqLocaleService, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [KBQ_LOCALE_SERVICE]
+                }] }]; } });
 
 class KbqFormattersModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqFormattersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: KbqFormattersModule, declarations: [KbqDecimalPipe,
+            KbqRoundDecimalPipe,
+            KbqTableNumberPipe,
             AbsoluteDateFormatterPipe,
             AbsoluteDateTimeFormatterPipe,
             AbsoluteDateShortFormatterPipe,
@@ -788,6 +1160,8 @@ class KbqFormattersModule {
             RangeDateTimeFormatterPipe,
             RangeShortDateTimeFormatterPipe,
             RangeMiddleDateTimeFormatterPipe], exports: [KbqDecimalPipe,
+            KbqRoundDecimalPipe,
+            KbqTableNumberPipe,
             AbsoluteDateFormatterPipe,
             AbsoluteDateTimeFormatterPipe,
             AbsoluteDateShortFormatterPipe,
@@ -808,6 +1182,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
             args: [{
                     declarations: [
                         KbqDecimalPipe,
+                        KbqRoundDecimalPipe,
+                        KbqTableNumberPipe,
                         AbsoluteDateFormatterPipe,
                         AbsoluteDateTimeFormatterPipe,
                         AbsoluteDateShortFormatterPipe,
@@ -824,6 +1200,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                     ],
                     exports: [
                         KbqDecimalPipe,
+                        KbqRoundDecimalPipe,
+                        KbqTableNumberPipe,
                         AbsoluteDateFormatterPipe,
                         AbsoluteDateTimeFormatterPipe,
                         AbsoluteDateShortFormatterPipe,
@@ -868,13 +1246,13 @@ class KbqFormElement {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqFormElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqFormElement, selector: ".kbq-form__row, .kbq-form__fieldset, .kbq-form__legend", host: { properties: { "class.kbq-form-row_margin": "margin" } }, queries: [{ propertyName: "elements", predicate: KbqFormElement }], exportAs: ["mcFormElement"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqFormElement, selector: ".kbq-form__row, .kbq-form__fieldset, .kbq-form__legend", host: { properties: { "class.kbq-form-row_margin": "margin" } }, queries: [{ propertyName: "elements", predicate: KbqFormElement }], exportAs: ["kbqFormElement"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqFormElement, decorators: [{
             type: Directive,
             args: [{
                     selector: '.kbq-form__row, .kbq-form__fieldset, .kbq-form__legend',
-                    exportAs: 'mcFormElement',
+                    exportAs: 'kbqFormElement',
                     host: {
                         '[class.kbq-form-row_margin]': 'margin'
                     }
@@ -897,13 +1275,13 @@ class KbqForm {
         });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqForm, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqForm, selector: ".kbq-form-vertical, .kbq-form-horizontal", host: { classAttribute: "kbq-form" }, queries: [{ propertyName: "elements", predicate: KbqFormElement }], exportAs: ["mcForm"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqForm, selector: ".kbq-form-vertical, .kbq-form-horizontal", host: { classAttribute: "kbq-form" }, queries: [{ propertyName: "elements", predicate: KbqFormElement }], exportAs: ["kbqForm"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqForm, decorators: [{
             type: Directive,
             args: [{
                     selector: '.kbq-form-vertical, .kbq-form-horizontal',
-                    exportAs: 'mcForm',
+                    exportAs: 'kbqForm',
                     host: {
                         class: 'kbq-form'
                     }
@@ -1058,11 +1436,11 @@ class KbqOptgroup extends KbqOptgroupMixinBase {
         this.labelId = `kbq-optgroup-label-${uniqueOptgroupIdCounter++}`;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqOptgroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqOptgroup, selector: "kbq-optgroup", inputs: { disabled: "disabled", label: "label" }, host: { properties: { "class.kbq-disabled": "disabled" }, classAttribute: "kbq-optgroup" }, exportAs: ["mcOptgroup"], 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;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: "16.1.5", 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;user-select:none;cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqOptgroup, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-optgroup', exportAs: 'mcOptgroup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['disabled'], host: {
+            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;user-select:none;cursor:default}\n"] }]
@@ -1100,7 +1478,7 @@ class KbqPseudoCheckbox extends KbqPseudoCheckboxMixinBase {
         this.disabled = false;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqPseudoCheckbox, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", 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 kbq-check_16\"></i>\n<i class=\"kbq-checkbox-mixedmark mc kbq-minus_16\"></i>\n", styles: [".kbq-pseudo-checkbox{position:relative;display:inline-block;box-sizing:border-box;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;position:absolute;top:calc(-1 * var(--kbq-checkbox-size-normal-border-width, 1px));left:calc(-1 * var(--kbq-checkbox-size-normal-border-width, 1px))}.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)}.kbq-pseudo-checkbox.kbq-pseudo-checkbox_big .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-pseudo-checkbox_big .kbq-checkbox-mixedmark{top:calc(-1 * var(--kbq-checkbox-size-big-border-width, 1px));left:calc(-1 * var(--kbq-checkbox-size-big-border-width, 1px))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", 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-block;box-sizing:border-box;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;position:absolute;top:calc(-1 * var(--kbq-checkbox-size-normal-border-width, 1px));left:calc(-1 * var(--kbq-checkbox-size-normal-border-width, 1px))}.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)}.kbq-pseudo-checkbox.kbq-pseudo-checkbox_big .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-pseudo-checkbox_big .kbq-checkbox-mixedmark{top:calc(-1 * var(--kbq-checkbox-size-big-border-width, 1px));left:calc(-1 * var(--kbq-checkbox-size-big-border-width, 1px))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqPseudoCheckbox, decorators: [{
             type: Component,
@@ -1110,7 +1488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                         '[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 kbq-check_16\"></i>\n<i class=\"kbq-checkbox-mixedmark mc kbq-minus_16\"></i>\n", styles: [".kbq-pseudo-checkbox{position:relative;display:inline-block;box-sizing:border-box;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;position:absolute;top:calc(-1 * var(--kbq-checkbox-size-normal-border-width, 1px));left:calc(-1 * var(--kbq-checkbox-size-normal-border-width, 1px))}.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)}.kbq-pseudo-checkbox.kbq-pseudo-checkbox_big .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-pseudo-checkbox_big .kbq-checkbox-mixedmark{top:calc(-1 * var(--kbq-checkbox-size-big-border-width, 1px));left:calc(-1 * var(--kbq-checkbox-size-big-border-width, 1px))}\n"] }]
+                    }, 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-block;box-sizing:border-box;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;position:absolute;top:calc(-1 * var(--kbq-checkbox-size-normal-border-width, 1px));left:calc(-1 * var(--kbq-checkbox-size-normal-border-width, 1px))}.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)}.kbq-pseudo-checkbox.kbq-pseudo-checkbox_big .kbq-checkbox-checkmark,.kbq-pseudo-checkbox.kbq-pseudo-checkbox_big .kbq-checkbox-mixedmark{top:calc(-1 * var(--kbq-checkbox-size-big-border-width, 1px));left:calc(-1 * var(--kbq-checkbox-size-big-border-width, 1px))}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { big: [{
                 type: Input
             }], state: [{
@@ -1135,10 +1513,49 @@ class KbqOptionSelectionChange {
  * Injection token used to provide the parent component to options.
  */
 const KBQ_OPTION_PARENT_COMPONENT = new InjectionToken('KBQ_OPTION_PARENT_COMPONENT');
+class KbqOptionBase {
+    /** Emits the selection change event. */
+    emitSelectionChangeEvent(isUserInput = false) {
+        this.onSelectionChange.emit(new KbqOptionSelectionChange(this, isUserInput));
+    }
+}
+class KbqVirtualOption extends KbqOptionBase {
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+    }
+    get selected() {
+        return this._selected;
+    }
+    get viewValue() {
+        return this.value;
+    }
+    constructor(value, _disabled = false) {
+        super();
+        this.value = value;
+        this._disabled = _disabled;
+        this._selected = false;
+        this.onSelectionChange = new EventEmitter();
+    }
+    select() {
+        if (!this._selected) {
+            this._selected = true;
+            this.emitSelectionChangeEvent();
+        }
+    }
+    deselect() {
+        if (this._selected) {
+            this._selected = false;
+            this.emitSelectionChangeEvent();
+        }
+    }
+}
 /**
  * Single option inside of a `<kbq-select>` element.
  */
-class KbqOption {
+class KbqOption extends KbqOptionBase {
     get showCheckbox() {
         return this._showCheckbox === undefined ? this.multiple : this._showCheckbox;
     }
@@ -1179,6 +1596,7 @@ class KbqOption {
         return this._active;
     }
     constructor(element, changeDetectorRef, parent, group) {
+        super();
         this.element = element;
         this.changeDetectorRef = changeDetectorRef;
         this.parent = parent;
@@ -1269,6 +1687,7 @@ class KbqOption {
             this.selectViaInteraction();
             // Prevent the page from scrolling down and form submits.
             event.preventDefault();
+            event.stopPropagation();
         }
     }
     /**
@@ -1288,18 +1707,14 @@ class KbqOption {
     getHostElement() {
         return this.element.nativeElement;
     }
-    /** Emits the selection change event. */
-    emitSelectionChangeEvent(isUserInput = false) {
-        this.onSelectionChange.emit(new KbqOptionSelectionChange(this, isUserInput));
-    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", 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: "16.1.5", 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: ["mcTitleText"], descendants: true }], exportAs: ["mcOption"], ngImport: i0, template: "<kbq-pseudo-checkbox\n    *ngIf=\"showCheckbox\"\n    [state]=\"selected ? 'checked' : 'unchecked'\"\n    [disabled]=\"disabled\">\n</kbq-pseudo-checkbox>\n\n<span #mcTitleText class=\"kbq-option-text\"><ng-content></ng-content></span>\n\n<div class=\"kbq-option-overlay\"></div>\n", styles: [".kbq-option{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:var(--kbq-option-size-height, 32px);border:var(--kbq-option-size-border-width, 2px) solid transparent;cursor:pointer;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, 12px);padding-right:var(--kbq-option-size-horizontal-padding, 12px);-webkit-tap-highlight-color:transparent}.kbq-option.kbq-disabled{cursor:default}.kbq-option .kbq-pseudo-checkbox{margin-right:8px}.kbq-option .kbq-option-overlay{position:absolute;top:calc(-1 * var(--kbq-option-size-border-width, 2px));left:calc(-1 * var(--kbq-option-size-border-width, 2px));right:calc(-1 * var(--kbq-option-size-border-width, 2px));bottom:calc(-1 * var(--kbq-option-size-border-width, 2px));pointer-events:none;border-radius:inherit}.kbq-option-text{display:inline-block;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\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 }); }
+            }], 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,rgba(0,0,0,.04) 10px,rgba(255,255,255,.04) 10px,rgba(255,255,255,.04) 20px,rgba(0,0,0,.04) 20px,rgba(0,0,0,.04) 30px,rgba(255,255,255,.04) 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;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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqOption, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-option', exportAs: 'mcOption', host: {
+            args: [{ selector: 'kbq-option', exportAs: 'kbqOption', host: {
                         '[attr.tabindex]': 'getTabIndex()',
                         class: 'kbq-option',
                         '[class.kbq-selected]': 'selected',
@@ -1311,7 +1726,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                         '(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 #mcTitleText class=\"kbq-option-text\"><ng-content></ng-content></span>\n\n<div class=\"kbq-option-overlay\"></div>\n", styles: [".kbq-option{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:var(--kbq-option-size-height, 32px);border:var(--kbq-option-size-border-width, 2px) solid transparent;cursor:pointer;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, 12px);padding-right:var(--kbq-option-size-horizontal-padding, 12px);-webkit-tap-highlight-color:transparent}.kbq-option.kbq-disabled{cursor:default}.kbq-option .kbq-pseudo-checkbox{margin-right:8px}.kbq-option .kbq-option-overlay{position:absolute;top:calc(-1 * var(--kbq-option-size-border-width, 2px));left:calc(-1 * var(--kbq-option-size-border-width, 2px));right:calc(-1 * var(--kbq-option-size-border-width, 2px));bottom:calc(-1 * var(--kbq-option-size-border-width, 2px));pointer-events:none;border-radius:inherit}.kbq-option-text{display:inline-block;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
+                        }], 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,rgba(0,0,0,.04) 10px,rgba(255,255,255,.04) 10px,rgba(255,255,255,.04) 20px,rgba(0,0,0,.04) 20px,rgba(0,0,0,.04) 30px,rgba(255,255,255,.04) 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;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"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -1321,7 +1736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                     type: Optional
                 }] }]; }, propDecorators: { textElement: [{
                 type: ViewChild,
-                args: ['mcTitleText', { static: false }]
+                args: ['kbqTitleText', { static: false }]
             }], value: [{
                 type: Input
             }], showCheckbox: [{
@@ -1452,30 +1867,31 @@ class KbqOptionActionComponent extends KbqOptionActionMixinBase {
         setTimeout(() => this.option.tooltipTrigger.disabled = false);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", 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: "16.1.5", 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", "attr.disabled": "disabled || null", "attr.tabIndex": "-1" }, classAttribute: "kbq-option-action" }, queries: [{ propertyName: "customIcon", first: true, predicate: ["customIcon"], descendants: true }], exportAs: ["mcOptionAction"], usesInheritance: true, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", 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 kbq-ellipsis_16" *ngSwitchCase="false"></i>
+            <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:unset;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:-2px;width:28px;height:100%;cursor:pointer;outline:none;border:2px solid transparent;background:transparent}.kbq-option-action[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 }); }
+    `, 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: "16.1.5", ngImport: i0, type: KbqOptionActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-option-action', exportAs: 'mcOptionAction', template: `
+            args: [{ selector: 'kbq-option-action', exportAs: 'kbqOptionAction', template: `
         <ng-container [ngSwitch]="!!customIcon">
-            <i class="mc kbq-icon kbq-ellipsis_16" *ngSwitchCase="false"></i>
+            <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:unset;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:-2px;width:28px;height:100%;cursor:pointer;outline:none;border:2px solid transparent;background:transparent}.kbq-option-action[disabled]{cursor:default}\n"] }]
+                    }, 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: function () { return [{ type: i0.ElementRef }, { type: i1$1.FocusMonitor }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [KBQ_OPTION_ACTION_PARENT]
@@ -1621,6 +2037,7 @@ const EXTENDED_OVERLAY_POSITIONS = objectValues([
 const TOP_POSITION_PRIORITY = objectValues([
     POSITION_MAP.top,
     POSITION_MAP.bottom,
+    POSITION_MAP.right,
     POSITION_MAP.rightBottom,
     POSITION_MAP.leftBottom,
     POSITION_MAP.bottomLeft,
@@ -1746,6 +2163,11 @@ const POSITION_TO_CSS_MAP = {
     bottomLeft: 'bottom-left',
     bottomRight: 'bottom-right'
 };
+const KBQ_CUSTOM_SCROLL_STRATEGY_PROVIDER = (token, factory) => ({
+    provide: token,
+    deps: [Overlay],
+    useFactory: factory
+});
 function arrayMap(array, iteratee) {
     let index = -1;
     const length = array === null ? 0 : array.length;
@@ -1788,6 +2210,7 @@ var PopUpTriggers;
     PopUpTriggers["Click"] = "click";
     PopUpTriggers["Focus"] = "focus";
     PopUpTriggers["Hover"] = "hover";
+    PopUpTriggers["Keydown"] = "keydown";
 })(PopUpTriggers || (PopUpTriggers = {}));
 var PopUpSizes;
 (function (PopUpSizes) {
@@ -2066,6 +2489,15 @@ class KbqPopUpTrigger {
                 .set('blur', () => this.hide())
                 .forEach(this.addEventListener);
         }
+        if (this.trigger.includes(PopUpTriggers.Keydown)) {
+            this.listeners
+                .set('keydown', (event) => {
+                if (event instanceof KeyboardEvent && [ENTER, SPACE].includes(event.keyCode)) {
+                    this.show();
+                }
+            })
+                .forEach(this.addEventListener);
+        }
     }
     /** Updates the position of the current popover. */
     updatePosition(reapplyPosition = false) {
@@ -2109,7 +2541,7 @@ class KbqPopUpTrigger {
             .pipe(takeUntil(this.destroyed))
             .pipe(delay(0))
             .subscribe((event) => {
-            if (event?.type === 'click' && event.mcPopoverPreventHide) {
+            if (event?.type === 'click' && event.kbqPopoverPreventHide) {
                 return;
             }
             this.hide();
@@ -2165,14 +2597,14 @@ 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 mcSelectScrollStrategyProviderFactory(overlay) {
+function kbqSelectScrollStrategyProviderFactory(overlay) {
     return () => overlay.scrollStrategies.reposition();
 }
 /** @docs-private */
 const KBQ_SELECT_SCROLL_STRATEGY_PROVIDER = {
     provide: KBQ_SELECT_SCROLL_STRATEGY,
     deps: [Overlay],
-    useFactory: mcSelectScrollStrategyProviderFactory
+    useFactory: kbqSelectScrollStrategyProviderFactory
 };
 
 class KbqMeasureScrollbarService {
@@ -2220,6 +2652,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                     args: [DOCUMENT]
                 }] }]; } });
 
+const KbqDefaultThemes = [
+    {
+        name: 'light',
+        className: 'kbq-theme-light',
+        selected: true
+    },
+    {
+        name: 'dark',
+        className: 'kbq-theme-dark',
+        selected: false
+    }
+];
+class ThemeService {
+    constructor(rendererFactory) {
+        this.rendererFactory = rendererFactory;
+        this.current = new BehaviorSubject(null);
+        this.themes = KbqDefaultThemes;
+        this.update = ([prev, current]) => {
+            if (prev) {
+                prev.selected = false;
+                this.renderer.removeClass(document.body, prev.className);
+            }
+            if (current) {
+                this.renderer.addClass(document.body, current.className);
+                current.selected = true;
+            }
+        };
+        this.renderer = this.rendererFactory.createRenderer(null, null);
+        this.subscription = this.current
+            .pipe(pairwise())
+            .subscribe(this.update);
+    }
+    setThemes(items) {
+        this.themes = items;
+    }
+    setTheme(value) {
+        if (typeof value === 'number') {
+            this.current.next(this.themes[value]);
+        }
+        else if (typeof value === 'object' && this.themes.includes(value)) {
+            this.current.next(value);
+        }
+        else {
+            throw Error(`value has unsupported type: ${typeof value}`);
+        }
+    }
+    getTheme() {
+        return this.current.value;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: ThemeService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
+
 function isBoolean(val) { return typeof val === 'boolean'; }
 function toBoolean(value) {
     return value != null && `${value}` !== 'false';
@@ -2328,11 +2817,11 @@ const validationTooltipShowDelay = 10;
 const validationTooltipHideDelay = 3000;
 const KBQ_VALIDATION = new InjectionToken('KbqUseValidation', { factory: () => ({ useValidation: true }) });
 
-const VERSION = new Version('16.0.0-beta.1+sha-9882803');
+const VERSION = new Version('16.0.0-beta.8+sha-d1a32007');
 
 /**
  * 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_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_SANITY_CHECKS, KBQ_SELECT_SCROLL_STRATEGY, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER, KBQ_TITLE_TEXT_REF, KBQ_VALIDATION, KbqCommonModule, KbqComponentColors, KbqDataSizeModule, KbqDataSizePipe, KbqDecimalPipe, KbqForm, KbqFormElement, KbqFormattersModule, KbqFormsModule, KbqHighlightModule, KbqHighlightPipe, KbqLine, KbqLineModule, KbqLineSetter, KbqLocaleService, KbqLocaleServiceModule, KbqMeasureScrollbarService, KbqOptgroup, KbqOptgroupBase, KbqOptgroupMixinBase, KbqOption, KbqOptionActionBase, KbqOptionActionComponent, KbqOptionActionMixinBase, KbqOptionModule, KbqOptionSelectionChange, KbqPopUp, KbqPopUpTrigger, KbqPseudoCheckbox, KbqPseudoCheckboxBase, KbqPseudoCheckboxMixinBase, KbqPseudoCheckboxModule, 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, VERSION, countGroupLabelsBeforeOption, escapeRegExp, fadeAnimation, formatDataSize, getHumanizedBytes, getKbqSelectDynamicMultipleError, getKbqSelectNonArrayValueError, getKbqSelectNonFunctionValueError, getOptionScrollPosition, isBoolean, mcSelectAnimations, mcSelectScrollStrategyProviderFactory, mixinColor, mixinDisabled, mixinErrorState, mixinTabIndex, selectEvents, sizeUnitsConfig, toBoolean, validationTooltipHideDelay, validationTooltipShowDelay };
+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_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, escapeRegExp, fadeAnimation, formatDataSize, getHumanizedBytes, getKbqSelectDynamicMultipleError, getKbqSelectNonArrayValueError, getKbqSelectNonFunctionValueError, getOptionScrollPosition, isBoolean, isWithin, kbqSelectAnimations, kbqSelectScrollStrategyProviderFactory, mixinColor, mixinDisabled, mixinErrorState, mixinTabIndex, selectEvents, sizeUnitsConfig, toBoolean, validationTooltipHideDelay, validationTooltipShowDelay };
 //# sourceMappingURL=koobiq-components-core.mjs.map