@koobiq/components 18.35.0 → 18.37.0

package/schematics/migrations/icons-replacement/README.md

@@ -0,0 +1,93 @@
+### Icons replacement schematics
+
+This schematic provides migration for new icons naming attribute. It includes:
+
+- Replacement of old names with new based on info in `data.ts`;
+
+[Params](schema.ts)
+
+#### Usage for Angular Cli:
+
+```shell
+ng g @koobiq/components:icons-replacement --project <your project>
+```
+
+- with custom icon replacement mapping:
+
+```shell
+ng g @koobiq/components:icons-replacement --project <your project> --replacement-data-path <path-as-json>
+```
+
+```shell
+ng g @koobiq/components:icons-replacement --project <your project>
+```
+
+#### Usage for Nx:
+
+```shell
+nx g @koobiq/components:icons-replacement --project <your project>
+```
+
+- with custom icon replacement mapping:
+
+```shell
+nx g @koobiq/components:icons-replacement --project <your project> --replacement-data-path <path-as-json>
+```
+
+### Run locally
+
+Build package
+
+```shell
+yarn run build:schematics
+```
+
+Run command (for example, for `koobiq-docs` project)
+
+```shell
+ng g ./dist/components/schematics/collection.json:icons-replacement --project koobiq-docs
+```
+
+### Result
+
+#### Before
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+    template: `
+        <i kbq-icon="kbq-bolt-circle_16">...</i>
+    `,
+    styles: `
+        .custom-icon {
+            <!-- cspell:ignore xmark -->
+            @extend .kbq-xmark-circle_16;
+        }
+    `
+})
+export class MyComp {
+    iconName = 'kbq-bolt-circle_16';
+}
+```
+
+#### After
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+    template: `
+        <i kbq-icon="kbq-circle-bolt_16">...</i>
+    `,
+    styles: `
+        .custom-icon {
+            <!-- cspell:ignore xmark -->
+            @extend .kbq-circle-xmark_16;
+        }
+    `
+})
+export class MyComp {
+    iconName = 'kbq-circle-bolt_16';
+}
+```

package/schematics/migrations/icons-replacement/data.js

@@ -0,0 +1,92 @@
+'use strict';
+
+const iconReplacementData = [
+    { from: 'anomaly-square_16', to: 'square-a_16' },
+    { from: 'anomaly-square_24', to: 'square-a_24' },
+    { from: 'arrow-circle-down_16', to: 'circle-arrow-down_16' },
+    { from: 'arrow-circle-down_24', to: 'circle-arrow-down_24' },
+    { from: 'arrow-circle-left_16', to: 'circle-arrow-left_16' },
+    { from: 'arrow-circle-left_24', to: 'circle-arrow-left_24' },
+    { from: 'arrow-circle-right_16', to: 'circle-arrow-right_16' },
+    { from: 'arrow-circle-right_24', to: 'circle-arrow-right_24' },
+    { from: 'arrow-circle-up_16', to: 'circle-arrow-up_16' },
+    { from: 'arrow-circle-up_24', to: 'circle-arrow-up_24' },
+    { from: 'arrow-right-circle-dot-o_16', to: 'circle-arrow-right-dot-o_16' },
+    { from: 'arrow-right-circle-dot-o_24', to: 'circle-arrow-right-dot-o_24' },
+    { from: 'bolt-circle_16', to: 'circle-bolt_16' },
+    { from: 'bolt-circle_24', to: 'circle-bolt_24' },
+    { from: 'bolt-rectangle-vertical_16', to: 'rectangle-vertical-bolt_16' },
+    { from: 'bolt-rectangle-vertical_24', to: 'rectangle-vertical-bolt_24' },
+    { from: 'bolt-rectangle-vertical-o_16', to: 'rectangle-vertical-bolt-o_16' },
+    { from: 'bolt-rectangle-vertical-o_24', to: 'rectangle-vertical-bolt-o_24' },
+    { from: 'check-circle_16', to: 'circle-check_16' },
+    { from: 'check-circle_24', to: 'circle-check_24' },
+    { from: 'chevron-circle-down_16', to: 'circle-chevron-down_16' },
+    { from: 'chevron-circle-down_24', to: 'circle-chevron-down_24' },
+    { from: 'chevron-circle-left_16', to: 'circle-chevron-left_16' },
+    { from: 'chevron-circle-left_24', to: 'circle-chevron-left_24' },
+    { from: 'chevron-circle-right_16', to: 'circle-chevron-right_16' },
+    { from: 'chevron-circle-right_24', to: 'circle-chevron-right_24' },
+    { from: 'chevron-circle-up_16', to: 'circle-chevron-up_16' },
+    { from: 'chevron-circle-up_24', to: 'circle-chevron-up_24' },
+    { from: 'compress_16', to: 'chevrons-compress_16' },
+    { from: 'compress_24', to: 'chevrons-compress_24' },
+    { from: 'ellipsis-horizontal-circle-o_16', to: 'circle-ellipsis-horizontal-o_16' },
+    { from: 'ellipsis-horizontal-circle-o_24', to: 'circle-ellipsis-horizontal-o_24' },
+    { from: 'exclamation-circle_16', to: 'circle-exclamation_16' },
+    { from: 'exclamation-circle_24', to: 'circle-exclamation_24' },
+    { from: 'exclamation-triangle_16', to: 'triangle-exclamation_16' },
+    { from: 'exclamation-triangle_24', to: 'triangle-exclamation_24' },
+    { from: 'info-circle_16', to: 'circle-info_16' },
+    { from: 'info-circle_24', to: 'circle-info_24' },
+    { from: 'ip4-rectangle_16', to: 'rectangle-ip4_16' },
+    { from: 'ip4-rectangle_24', to: 'rectangle-ip4_24' },
+    { from: 'ip6-rectangle_16', to: 'rectangle-ip6_16' },
+    { from: 'ip6-rectangle_24', to: 'rectangle-ip6_24' },
+    { from: 'location-arrow-circle-o_16', to: 'circle-location-arrow-o_16' },
+    { from: 'location-arrow-circle-o_24', to: 'circle-location-arrow-o_24' },
+    { from: 'minus-circle_16', to: 'circle-minus_16' },
+    { from: 'minus-circle_24', to: 'circle-minus_24' },
+    { from: 'minus-circle-o_16', to: 'circle-minus-o_16' },
+    { from: 'minus-circle-o_24', to: 'circle-minus-o_24' },
+    { from: 'minus-circle-s_16', to: 'circle-minus-s_16' },
+    { from: 'minus-circle-s_24', to: 'circle-minus-s_24' },
+    { from: 'minus-octagon_16', to: 'octagon-minus_16' },
+    { from: 'minus-octagon_24', to: 'octagon-minus_24' },
+    { from: 'minus-square_16', to: 'square-minus_16' },
+    { from: 'minus-square_24', to: 'square-minus_24' },
+    { from: 'pause-circle_16', to: 'circle-pause_16' },
+    { from: 'pause-circle_24', to: 'circle-pause_24' },
+    { from: 'play-circle_16', to: 'circle-play_16' },
+    { from: 'play-circle_24', to: 'circle-play_24' },
+    { from: 'plus-circle_16', to: 'circle-plus_16' },
+    { from: 'plus-circle_24', to: 'circle-plus_24' },
+    { from: 'plus-circle-s_16', to: 'circle-plus-s_16' },
+    { from: 'plus-circle-s_24', to: 'circle-plus-s_24' },
+    { from: 'plus-square_16', to: 'square-plus_16' },
+    { from: 'plus-square_24', to: 'square-plus_24' },
+    { from: 'question-circle_16', to: 'circle-question_16' },
+    { from: 'question-circle_24', to: 'circle-question_24' },
+    { from: 'stop-circle_16', to: 'circle-stop_16' },
+    { from: 'stop-circle_24', to: 'circle-stop_24' },
+    { from: 'telegram-circle_16', to: 'circle-telegram_16' },
+    { from: 'telegram-circle_24', to: 'circle-telegram_24' },
+    { from: 'user-arrow-triangle-up_16', to: 'user-badge-triangle-up_16' },
+    { from: 'user-arrow-triangle-up_24', to: 'user-badge-triangle-up_24' },
+    { from: 'windows-arrow-rotate-left_16', to: 'arrow-rotate-left-badge-windows_16' },
+    { from: 'wrap-text_16', to: 'text-wrap_16' },
+    { from: 'wrap-text_24', to: 'text-wrap_24' },
+    { from: 'wrap-text-slash_16', to: 'text-overflow_16' },
+    { from: 'wrap-text-slash_24', to: 'text-overflow_24' },
+    { from: 'xmark-circle_16', to: 'circle-xmark_16' },
+    { from: 'xmark-circle_24', to: 'circle-xmark_24' },
+    { from: 'xmark-circle-s_16', to: 'circle-xmark-s_16' },
+    { from: 'xmark-circle-s_24', to: 'circle-xmark-s_24' },
+    { from: 'table-badge-arrow-down-circle_32', to: 'table-badge-circle-arrow-down_32' },
+    { from: 'question-circle-o_32', to: 'circle-question-o_32' },
+    { from: 'gear-badge-arrowtriangle-up-square_16', to: 'gear-badge-square-arrowtriangle-up_16' },
+    { from: 'gear-badge-arrowtriangle-up-square_24', to: 'gear-badge-square-arrowtriangle-up_24' },
+    { from: 'exclamation-triangle_32', to: 'triangle-exclamation_32' }
+];
+
+exports.iconReplacementData = iconReplacementData;

package/schematics/migrations/icons-replacement/index.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var path = require('path');
+var utils_messages = require('../../utils/messages.js');
+var utils_packageConfig = require('../../utils/package-config.js');
+var migrations_iconsReplacement_data = require('./data.js');
+require('@angular-devkit/schematics');
+require('@schematics/angular/utility');
+
+const replaceIcons = (contentToBeUpdated, replacementData) => {
+    let res = contentToBeUpdated;
+    for (const { from, to } of replacementData) {
+        res = res.replace(new RegExp(`kbq-${from}`, 'g'), `kbq-${to}`);
+    }
+    return res;
+};
+const logReplacement = ({ logger, replacementData, contentToBeUpdated, filePath }) => {
+    const foundIcons = replacementData.filter(({ from }) => contentToBeUpdated.indexOf(from) !== -1);
+    if (foundIcons.length) {
+        const parsedFilePath = path.relative(__dirname, `.${filePath}`).replace(/\\/g, '/');
+        utils_messages.logMessage(logger, [
+            `Please pay attention! Found deprecated icons in file: `,
+            parsedFilePath,
+            foundIcons.map(({ from, to }) => `\t${from} -> \t${to}`).join('\n')
+        ]);
+    }
+};
+const processIconReplacement = ({ fileContent, filePath, fix, logger, replacementData }) => {
+    if (fix) {
+        const updatedContent = replaceIcons(fileContent, replacementData);
+        return { fileContent: updatedContent, changed: updatedContent !== fileContent, errors: [] };
+    }
+    else {
+        logReplacement({
+            logger,
+            replacementData,
+            contentToBeUpdated: fileContent,
+            filePath
+        });
+        return { fileContent, changed: false, errors: [] };
+    }
+};
+const resolveReplacementData = (projectRootPath, tree, customReplacementDataPath) => {
+    if (customReplacementDataPath) {
+        const replacementData = tree.get(`${projectRootPath}/${customReplacementDataPath}`);
+        if (!replacementData)
+            return migrations_iconsReplacement_data.iconReplacementData;
+        return JSON.parse(replacementData.content.toString());
+    }
+    return migrations_iconsReplacement_data.iconReplacementData;
+};
+function migrate(options) {
+    return async (tree, context) => {
+        const { logger } = context;
+        const { project, allowed, fix, replacementDataPath } = options;
+        const projectDefinition = await utils_packageConfig.setupOptions(project, tree);
+        const replacementData = resolveReplacementData(projectDefinition.root, tree, replacementDataPath);
+        tree.getDir(projectDefinition.root).visit((filePath, entry) => {
+            if (allowed.length === 0 || allowed.some((ext) => filePath.endsWith(ext))) {
+                const initialContent = entry?.content.toString();
+                if (!initialContent)
+                    return;
+                const { fileContent, changed } = processIconReplacement({
+                    fileContent: initialContent,
+                    filePath,
+                    fix,
+                    logger,
+                    replacementData
+                });
+                if (changed) {
+                    tree.overwrite(filePath, fileContent);
+                }
+            }
+        });
+    };
+}
+
+exports.default = migrate;
+exports.logReplacement = logReplacement;
+exports.processIconReplacement = processIconReplacement;
+exports.replaceIcons = replaceIcons;
+exports.resolveReplacementData = resolveReplacementData;

package/schematics/migrations/icons-replacement/schema.json

@@ -0,0 +1,32 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "$id": "koobiq-components-icons-replacement",
+    "title": "koobiq-components icons-replacement schematic",
+    "type": "object",
+    "properties": {
+        "project": {
+            "type": "string",
+            "description": "Name of the project",
+            "$default": {
+                "$source": "projectName"
+            }
+        },
+        "fix": {
+            "type": "boolean",
+            "default": false,
+            "description": "Whether overwrite icons prefixes or simply inform in console"
+        },
+        "allowed": {
+            "type": "array",
+            "default": [".html", ".ts", ".scss"],
+            "items": {
+                "type": "string"
+            },
+            "description": "Allowed file extensions to check"
+        },
+        "replacementDataPath": {
+            "type": "string",
+            "description": "Custom replacement data path. Will be used as relative to `project.root`"
+        }
+    }
+}

package/schematics/ng-add/index.js

@@ -27,16 +27,16 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.14");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.35.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.35.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.2.3");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.2.3");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^10.7.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.37.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.37.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.4.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.4.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^10.10.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.14.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.14.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@messageformat/core', "^3.4.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@radix-ng/primitives', "^0.23.0");
-        utils_packageConfig.addPackageToPackageJson(tree, 'luxon', "^3.7.1");
+        utils_packageConfig.addPackageToPackageJson(tree, 'luxon', "^3.7.2");
     };
 }
 

package/scrollbar/scrollbar.component.scss

@@ -1,7 +1,4 @@
-// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
-/* stylelint-disable selector-class-pattern */
 @use '../core/styles/common/tokens' as *;
-
 @use './scrollbar-component-theme' as *;
 
 .kbq-scrollbar-component {
@@ -143,11 +140,13 @@
     transform: scale(calc(1 / 0.1));
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
 .os-size-observer-listener.ltr {
     margin-right: -266px;
     margin-left: 0;
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
 .os-size-observer-listener.rtl {
     margin-left: -266px;
     margin-right: 0;

package/search-expandable/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/search-expandable/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './search-expandable';
+export * from './search-expandable.module';

package/search-expandable/search-expandable.d.ts

@@ -0,0 +1,70 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { AfterViewInit, ChangeDetectorRef, DestroyRef, EventEmitter, InjectionToken } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { BehaviorSubject } from 'rxjs';
+import * as i0 from "@angular/core";
+/** default configuration of search-expandable */
+export declare const KBQ_SEARCH_EXPANDABLE_DEFAULT_CONFIGURATION: {
+    tooltip: string;
+    placeholder: string;
+};
+/** Injection Token for providing configuration of search-expandable */
+export declare const KBQ_SEARCH_EXPANDABLE_CONFIGURATION: InjectionToken<unknown>;
+export declare const defaultValue = "";
+export declare const defaultEmitValueTimeout = 200;
+export declare class KbqSearchExpandable implements ControlValueAccessor, AfterViewInit {
+    /** @docs-private */
+    protected readonly focusMonitor: FocusMonitor;
+    /** @docs-private */
+    protected readonly localeService: import("@koobiq/components/core").KbqLocaleService | null;
+    /** @docs-private */
+    protected readonly destroyRef: DestroyRef;
+    /** @docs-private */
+    protected readonly changeDetectorRef: ChangeDetectorRef;
+    /** @docs-private */
+    protected readonly nativeElement: HTMLElement;
+    readonly externalConfiguration: unknown;
+    private input;
+    private button;
+    private tooltip;
+    configuration: any;
+    /** Current value in input. */
+    value: BehaviorSubject<string>;
+    protected lastFocusOrigin: 'touch' | 'mouse' | 'keyboard' | 'program' | null;
+    /** state of component. */
+    isOpened: boolean;
+    /** Emit event by enter or not. Default is false */
+    isEmitValueByEnterEnabled: boolean;
+    /** Timeout in milliseconds for emit event. The default value is taken from defaultEmitValueTimeout */
+    emitValueTimeout: number;
+    /** Placeholder for input when expanded */
+    get placeholder(): string;
+    set placeholder(value: string);
+    private _placeholder;
+    /** Event emitted when the search has been toggled. */
+    readonly isOpenedChange: EventEmitter<boolean>;
+    /** localized data
+     * @docs-private */
+    get localeData(): any;
+    private lastEmittedValue;
+    constructor();
+    ngAfterViewInit(): void;
+    /** @docs-private */
+    onChange: (value: string) => void;
+    /** @docs-private */
+    onTouch: () => void;
+    /** Implemented as part of ControlValueAccessor. */
+    registerOnChange(fn: (value: string) => void): void;
+    /** Implemented as part of ControlValueAccessor. */
+    registerOnTouched(fn: () => void): void;
+    /** Implemented as part of ControlValueAccessor. */
+    writeValue(value: string): void;
+    toggle(): void;
+    private updateLocaleParams;
+    private initDefaultParams;
+    private emitValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSearchExpandable, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSearchExpandable, "kbq-search-expandable", never, { "isOpened": { "alias": "isOpened"; "required": false; }; "isEmitValueByEnterEnabled": { "alias": "isEmitValueByEnterEnabled"; "required": false; }; "emitValueTimeout": { "alias": "emitValueTimeout"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; }, { "isOpenedChange": "isOpenedChange"; }, never, never, true, never>;
+    static ngAcceptInputType_isOpened: unknown;
+    static ngAcceptInputType_emitValueTimeout: unknown;
+}

package/search-expandable/search-expandable.module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./search-expandable";
+export declare class KbqSearchExpandableModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSearchExpandableModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSearchExpandableModule, never, [typeof i1.KbqSearchExpandable], [typeof i1.KbqSearchExpandable]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqSearchExpandableModule>;
+}

package/search-expandable/search-expandable.scss

@@ -0,0 +1,21 @@
+.kbq-search-expandable {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: flex-start;
+
+    min-width: 0;
+    min-height: 0;
+}
+
+.kbq-search-expandable__search {
+    & .kbq-icon-button.kbq-suffix {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        border-radius: var(--kbq-size-xxs);
+
+        height: var(--kbq-size-xxl);
+    }
+}

package/select/select.component.d.ts

@@ -29,6 +29,14 @@ export type KbqSelectOptions = Partial<{
      * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
      */
     panelMinWidth: Exclude<KbqSelectPanelWidth, 'auto'>;
+    /**
+     * Whether to enable hiding search by default if options is less than minimum.
+     *
+     * - `'auto'` uses `KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD` as min value.
+     * - number - will enables search hiding and uses value as min.
+     * @see KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD
+     */
+    searchMinOptionsThreshold: 'auto' | number;
 }>;
 /** Injection token that can be used to provide the default options for the `kbq-select`. */
 export declare const KBQ_SELECT_OPTIONS: InjectionToken<Partial<{
@@ -41,6 +49,14 @@ export declare const KBQ_SELECT_OPTIONS: InjectionToken<Partial<{
      * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
      */
     panelMinWidth: Exclude<KbqSelectPanelWidth, "auto">;
+    /**
+     * Whether to enable hiding search by default if options is less than minimum.
+     *
+     * - `'auto'` uses `KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD` as min value.
+     * - number - will enables search hiding and uses value as min.
+     * @see KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD
+     */
+    searchMinOptionsThreshold: "auto" | number;
 }>>;
 /** Utility provider for `KBQ_SELECT_OPTIONS`. */
 export declare const kbqSelectOptionsProvider: (options: KbqSelectOptions) => Provider;
@@ -49,7 +65,7 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     private readonly _ngZone;
     private readonly _renderer;
     defaultErrorStateMatcher: ErrorStateMatcher;
-    elementRef: ElementRef;
+    elementRef: ElementRef<HTMLElement>;
     private overlayContainer;
     private readonly _dir;
     parentForm: NgForm;
@@ -71,6 +87,14 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
          * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
          */
         panelMinWidth: Exclude<KbqSelectPanelWidth, "auto">;
+        /**
+         * Whether to enable hiding search by default if options is less than minimum.
+         *
+         * - `'auto'` uses `KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD` as min value.
+         * - number - will enables search hiding and uses value as min.
+         * @see KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD
+         */
+        searchMinOptionsThreshold: "auto" | number;
     }> | null;
     private readonly window;
     /** Whether the component is in an error state. */
@@ -149,6 +173,15 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
      * Whether to use a multiline matcher or not. Default is false
      */
     multiline: boolean;
+    /**
+     * Controls when the search functionality is displayed based on the number of available options.
+     *
+     * Automatically enables search hiding if value provided, even if `defaultOptions.minOptionsThreshold` is provided.
+     * @default undefined
+     */
+    set searchMinOptionsThreshold(value: 'auto' | number | undefined);
+    get searchMinOptionsThreshold(): number | undefined;
+    private _searchMinOptionsThreshold;
     /** Combined stream of all of the child options' change events. */
     readonly optionSelectionChanges: Observable<KbqOptionSelectionChange>;
     /** Event emitted when the select panel has been toggled. */
@@ -242,7 +275,7 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     protected overlayMinWidth: string | number;
     /** Origin for the overlay panel. */
     protected overlayOrigin?: CdkOverlayOrigin | ElementRef;
-    constructor(_changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _renderer: Renderer2, defaultErrorStateMatcher: ErrorStateMatcher, elementRef: ElementRef, overlayContainer: OverlayContainer, _dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, parentFormField: KbqFormField, ngControl: NgControl, scrollStrategyFactory: any, localeService?: KbqLocaleService | undefined);
+    constructor(_changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _renderer: Renderer2, defaultErrorStateMatcher: ErrorStateMatcher, elementRef: ElementRef<HTMLElement>, overlayContainer: OverlayContainer, _dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, parentFormField: KbqFormField, ngControl: NgControl, scrollStrategyFactory: any, localeService?: KbqLocaleService | undefined);
     ngOnInit(): void;
     ngDoCheck(): void;
     ngAfterContentInit(): void;
@@ -318,6 +351,8 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     calculateHiddenItems(): void;
     getItemHeight(): number;
     handleClick($event: MouseEvent): void;
+    /** @docs-private */
+    protected shouldShowSearch(): boolean;
     private updateLocaleParams;
     private isVisible;
     private currentOverlayPosition;
@@ -369,7 +404,7 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     private getTotalVisibleItems;
     private buildTriggerClone;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; host: true; }, { optional: true; self: true; }, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
     static ngAcceptInputType_multiline: unknown;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_panelMinWidth: unknown;

package/select/select.module.d.ts

@@ -8,8 +8,9 @@ import * as i6 from "@koobiq/components/tags";
 import * as i7 from "@koobiq/components/tooltip";
 import * as i8 from "@angular/common";
 import * as i9 from "@angular/cdk/a11y";
+import * as i10 from "@koobiq/components/form-field";
 export declare class KbqSelectModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSelectModule, [typeof i1.KbqSelect, typeof i2.KbqOptionTooltip], [typeof i3.OverlayModule, typeof i4.KbqOptionModule, typeof i5.KbqIconModule, typeof i6.KbqTagsModule, typeof i7.KbqToolTipModule, typeof i4.KbqSelectSearch, typeof i4.KbqSelectFooter, typeof i4.KbqSelectMatcher, typeof i4.KbqSelectTrigger, typeof i4.KbqSelectSearchEmptyResult, typeof i8.NgClass, typeof i8.NgTemplateOutlet, typeof i9.A11yModule], [typeof i1.KbqSelect, typeof i2.KbqOptionTooltip, typeof i4.KbqOptionModule, typeof i4.KbqSelectSearch, typeof i4.KbqSelectFooter, typeof i4.KbqSelectMatcher, typeof i4.KbqSelectTrigger, typeof i4.KbqSelectSearchEmptyResult]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSelectModule, [typeof i1.KbqSelect, typeof i2.KbqOptionTooltip], [typeof i3.OverlayModule, typeof i4.KbqOptionModule, typeof i5.KbqIconModule, typeof i6.KbqTagsModule, typeof i7.KbqToolTipModule, typeof i4.KbqSelectSearch, typeof i4.KbqSelectFooter, typeof i4.KbqSelectMatcher, typeof i4.KbqSelectTrigger, typeof i4.KbqSelectSearchEmptyResult, typeof i8.NgClass, typeof i8.NgTemplateOutlet, typeof i9.A11yModule], [typeof i1.KbqSelect, typeof i2.KbqOptionTooltip, typeof i4.KbqOptionModule, typeof i4.KbqSelectSearch, typeof i4.KbqSelectFooter, typeof i4.KbqSelectMatcher, typeof i4.KbqSelectTrigger, typeof i4.KbqSelectSearchEmptyResult, typeof i10.KbqFormFieldModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqSelectModule>;
 }

package/select/select.scss

@@ -22,23 +22,7 @@
     box-sizing: initial;
 
     .kbq-option {
-        position: relative;
-
-        &:before,
-        &:after {
-            position: absolute;
-            content: '';
-            width: var(--kbq-size-xxs);
-            height: calc(100% + var(--kbq-size-3xs) * 2); // outline size * 2
-        }
-
-        &:before {
-            right: calc(100% + var(--kbq-size-3xs)); // outline size
-        }
-
-        &:after {
-            left: calc(100% + var(--kbq-size-3xs)); // outline size
-        }
+        @include item-active-area(var(--kbq-size-3xs));
     }
 
     &:not(:has(> .kbq-select__no-options-message)) .cdk-virtual-scroll-viewport {

package/sidepanel/sidepanel-tokens.scss

@@ -8,6 +8,8 @@
     --kbq-sidepanel-size-close-button-margin-left: var(--kbq-size-s);
     --kbq-sidepanel-size-content-padding-horizontal: var(--kbq-size-xxl);
     --kbq-sidepanel-size-content-padding-bottom: var(--kbq-size-xxl);
+    // Added top padding to prevent the outline of the first focused field from being clipped
+    --kbq-sidepanel-size-content-padding-top: 1px;
     --kbq-sidepanel-size-footer-padding-top: var(--kbq-size-s);
     --kbq-sidepanel-size-footer-padding-bottom: var(--kbq-size-3xl);
     --kbq-sidepanel-size-footer-padding-horizontal: var(--kbq-size-xxl);

package/sidepanel/sidepanel.scss

@@ -149,6 +149,8 @@
     flex-direction: column;
     min-height: 0;
 
+    padding-top: var(--kbq-sidepanel-size-content-padding-top);
+
     padding-right: var(--kbq-sidepanel-size-content-padding-horizontal);
 
     padding-left: var(--kbq-sidepanel-size-content-padding-horizontal);