@koobiq/components 18.35.0 → 18.37.0

package/time-range/types.d.ts

@@ -0,0 +1,69 @@
+import { KbqPopoverTrigger } from '@koobiq/components/popover';
+import { DurationObjectUnits, DurationUnit } from '@koobiq/date-adapter';
+/**
+ * Represents a time range with optional start and end date-time values.
+ * Used as a form value when range in popover change.
+ */
+export interface KbqRangeValue<T> {
+    fromTime?: T;
+    fromDate?: T;
+    toTime?: T;
+    toDate?: T;
+}
+/**
+ * Represents a time range with optional start and end date-time values.
+ * Used as a range value by default.
+ */
+export type KbqRange = {
+    startDateTime?: string;
+    endDateTime?: string;
+};
+/** Range type selected */
+export type KbqTimeRangeTypeContext = {
+    type: KbqTimeRangeType;
+};
+/**
+ * Main range information.
+ * Used for a popover date range selection, when selected type is range,
+ * and for trigger information calculation.
+ */
+export type KbqTimeRangeRange = KbqRange & KbqTimeRangeTypeContext;
+/** Default accepted “time‑range” identifiers. */
+export type KbqTimeRangeType = 'lastMinute' | 'last5Minutes' | 'last15Minutes' | 'last30Minutes' | 'lastHour' | 'last24Hours' | 'last3Days' | 'last7Days' | 'last14Days' | 'last30Days' | 'last3Months' | 'last12Months' | 'allTime' | 'currentQuarter' | 'currentYear' | 'range';
+/** Property representing duration output unit */
+export type KbqTimeRangeTranslationType = Exclude<DurationUnit, 'quarters' | 'milliseconds'> | 'other';
+/**
+ * Configuration for a custom time range with duration metadata.
+ * Defines a time range with its identifier, duration units, and optional fixed date range.
+ */
+export interface KbqTimeRangeUnits extends DurationObjectUnits {
+}
+export type KbqCustomTimeRangeType = {
+    /** time range identifier. Used as config key */
+    type: KbqTimeRangeType | string;
+    /** Duration metadata */
+    units: KbqTimeRangeUnits;
+    /** Property representing duration output unit */
+    translationType: KbqTimeRangeTranslationType;
+    /** Custom range of start/end date-times */
+    range?: KbqRange;
+};
+/** Context for a time range trigger, combining range info and type. */
+export type KbqTimeRangeTitleContext = KbqTimeRangeRange & KbqTimeRangeUnits;
+/** Context for a time range trigger customization, combining meta information. */
+export type KbqTimeRangeCustomizableTitleContext = Partial<KbqTimeRangeTitleContext> & {
+    $implicit: Partial<KbqTimeRangeTitleContext> & {
+        formattedDate: string;
+        popover: KbqPopoverTrigger;
+    };
+} & {
+    formattedDate: string;
+    popover: KbqPopoverTrigger;
+};
+/** @docs-private */
+export type KbqTimeRangeTranslateTypeMap = Record<KbqTimeRangeType, KbqTimeRangeTranslationType>;
+/** Context for a time range option customization, combining meta information. */
+export type KbqTimeRangeOptionContext = KbqTimeRangeTypeContext & KbqTimeRangeUnits & {
+    translationType: KbqTimeRangeTranslationType;
+    formattedValue: string;
+};

package/timepicker/timepicker.directive.d.ts

@@ -20,7 +20,7 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
      * @docs-private
      */
     readonly stateChanges: Subject<void>;
-    readonly errorState: boolean;
+    errorState: boolean;
     /**
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
@@ -90,7 +90,7 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
     private onChange;
     private onTouched;
     private localeSubscription;
-    constructor(elementRef: ElementRef, renderer: Renderer2, dateAdapter: DateAdapter<any>, localeService?: KbqLocaleService | undefined);
+    constructor(elementRef: ElementRef<HTMLInputElement>, renderer: Renderer2, dateAdapter: DateAdapter<any>, localeService?: KbqLocaleService | undefined);
     ngOnDestroy(): void;
     getSize(): number;
     focus(): void;

package/timepicker/timepicker.module.d.ts

@@ -3,8 +3,9 @@ import * as i1 from "./timepicker.directive";
 import * as i2 from "@angular/cdk/a11y";
 import * as i3 from "@angular/cdk/platform";
 import * as i4 from "@angular/forms";
+import * as i5 from "@koobiq/components/form-field";
 export declare class KbqTimepickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimepickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTimepickerModule, [typeof i1.KbqTimepicker], [typeof i2.A11yModule, typeof i3.PlatformModule, typeof i4.FormsModule], [typeof i1.KbqTimepicker]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTimepickerModule, [typeof i1.KbqTimepicker], [typeof i2.A11yModule, typeof i3.PlatformModule, typeof i4.FormsModule], [typeof i1.KbqTimepicker, typeof i5.KbqFormFieldModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTimepickerModule>;
 }

package/timezone/timezone-option.component.scss

@@ -32,6 +32,12 @@
 
 .kbq-select__panel .kbq-timezone-option {
     height: var(--kbq-timezone-option-size-height);
+
+    &:before,
+    &:after {
+        top: calc(-1 * var(--kbq-size-3xs));
+        bottom: calc(-1 * var(--kbq-size-3xs));
+    }
 }
 
 @include kbq-timezone-option-theme();

package/timezone/timezone.module.d.ts

@@ -15,6 +15,6 @@ import * as i13 from "@angular/common";
 import * as i14 from "@angular/cdk/a11y";
 export declare class KbqTimezoneModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTimezoneModule, [typeof i1.UtcOffsetPipe, typeof i2.CitiesByFilterPipe, typeof i3.KbqTimezoneSelect, typeof i4.KbqTimezoneOption, typeof i5.KbqTimezoneOptionTooltip, typeof i3.KbqTimezoneSelectTrigger], [typeof i6.OverlayModule, typeof i7.KbqFormFieldModule, typeof i8.KbqOptionModule, typeof i9.KbqSelectModule, typeof i10.KbqIconModule, typeof i11.KbqTagsModule, typeof i12.KbqToolTipModule, typeof i8.KbqHighlightModule, typeof i13.NgClass, typeof i13.KeyValuePipe, typeof i14.A11yModule], [typeof i3.KbqTimezoneSelect, typeof i4.KbqTimezoneOption, typeof i5.KbqTimezoneOptionTooltip, typeof i3.KbqTimezoneSelectTrigger]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTimezoneModule, [typeof i1.UtcOffsetPipe, typeof i2.CitiesByFilterPipe, typeof i3.KbqTimezoneSelect, typeof i4.KbqTimezoneOption, typeof i5.KbqTimezoneOptionTooltip, typeof i3.KbqTimezoneSelectTrigger], [typeof i6.OverlayModule, typeof i7.KbqFormFieldModule, typeof i8.KbqOptionModule, typeof i9.KbqSelectModule, typeof i10.KbqIconModule, typeof i11.KbqTagsModule, typeof i12.KbqToolTipModule, typeof i8.KbqHighlightModule, typeof i13.NgClass, typeof i13.KeyValuePipe, typeof i14.A11yModule], [typeof i3.KbqTimezoneSelect, typeof i4.KbqTimezoneOption, typeof i5.KbqTimezoneOptionTooltip, typeof i3.KbqTimezoneSelectTrigger, typeof i7.KbqFormFieldModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTimezoneModule>;
 }

package/toast/toast.component.d.ts

@@ -1,11 +1,12 @@
 import { AnimationEvent } from '@angular/animations';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { ElementRef, OnDestroy } from '@angular/core';
-import { ThemePalette } from '@koobiq/components/core';
+import { KbqReadStateDirective, ThemePalette } from '@koobiq/components/core';
 import { BehaviorSubject } from 'rxjs';
 import { KbqToastService } from './toast.service';
 import { KbqToastData } from './toast.type';
 import * as i0 from "@angular/core";
+import * as i1 from "@koobiq/components/core";
 export declare class KbqToastCloseButton {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastCloseButton, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqToastCloseButton, "[kbq-toast-close-button]", never, {}, {}, never, never, true, never>;
@@ -13,8 +14,9 @@ export declare class KbqToastCloseButton {
 export declare class KbqToastComponent implements OnDestroy {
     readonly data: KbqToastData;
     readonly service: KbqToastService;
-    elementRef: ElementRef;
+    elementRef: ElementRef<HTMLElement>;
     private focusMonitor;
+    protected readonly readStateDirective: KbqReadStateDirective;
     themePalette: typeof ThemePalette;
     animationState: string;
     readonly hovered: BehaviorSubject<boolean>;
@@ -27,7 +29,7 @@ export declare class KbqToastComponent implements OnDestroy {
         [x: string]: boolean;
     };
     get isFocusedOrHovered(): boolean;
-    constructor(data: KbqToastData, service: KbqToastService, elementRef: ElementRef, focusMonitor: FocusMonitor);
+    constructor(data: KbqToastData, service: KbqToastService, elementRef: ElementRef<HTMLElement>, focusMonitor: FocusMonitor);
     ngOnDestroy(): void;
     close(): void;
     isTemplateRef(value: any): boolean;
@@ -35,5 +37,5 @@ export declare class KbqToastComponent implements OnDestroy {
     private runFocusMonitor;
     private stopFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqToastComponent, "kbq-toast", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqToastComponent, "kbq-toast", never, {}, {}, never, never, true, [{ directive: typeof i1.KbqReadStateDirective; inputs: {}; outputs: {}; }]>;
 }

package/toast/toast.component.scss

@@ -55,6 +55,10 @@
         overflow: hidden;
         text-overflow: ellipsis;
     }
+
+    &.kbq-toast__title_only-text {
+        white-space: pre-wrap;
+    }
 }
 
 .kbq-toast__title_with-content {
@@ -65,13 +69,19 @@
     display: flex;
     flex: 1;
     align-items: center;
+
+    &.kbq-toast__text_only-text {
+        white-space: pre-wrap;
+    }
 }
 
 .kbq-toast__content {
     display: flex;
     flex-direction: column;
 
-    white-space: pre-wrap;
+    &.kbq-toast__content_only-text {
+        white-space: pre-wrap;
+    }
 }
 
 .kbq-toast__actions {

package/toast/toast.service.d.ts

@@ -15,6 +15,7 @@ export declare class KbqToastService<T extends KbqToastComponent = KbqToastCompo
     private toastConfig;
     get toasts(): ComponentRef<T>[];
     get templates(): EmbeddedViewRef<T>[];
+    readonly read: BehaviorSubject<KbqToastData | null>;
     readonly hovered: BehaviorSubject<boolean>;
     readonly focused: BehaviorSubject<boolean>;
     readonly animation: BehaviorSubject<AnimationEvent | null>;

package/toast/toast.type.d.ts

@@ -15,6 +15,7 @@ export declare enum KbqToastPosition {
     CENTER = "center"
 }
 export declare class KbqToastData {
+    id?: string;
     title?: string | TemplateRef<any>;
     style?: KbqToastStyle | string;
     icon?: TemplateRef<any> | boolean;

package/toggle/_toggle-theme.scss

@@ -16,18 +16,17 @@
 @mixin _kbq-toggle-color($type) {
     @include _kbq-toggle-state($type, default);
 
-    &:hover {
+    &:is(:hover, .kbq-hovered) {
         @include _kbq-toggle-state($type, states-hover);
     }
 
     &.kbq-active,
     &.kbq-indeterminate {
         @include _kbq-toggle-state($type, states-checked);
-    }
 
-    &.kbq-active:hover,
-    &.kbq-indeterminate:hover {
-        @include _kbq-toggle-state($type, states-checked-hover);
+        &:is(:hover, .kbq-hovered) {
+            @include _kbq-toggle-state($type, states-checked-hover);
+        }
     }
 
     &.cdk-keyboard-focused {
@@ -73,6 +72,10 @@
 
         &.kbq-disabled {
             color: var(--kbq-states-foreground-disabled);
+
+            .kbq-hint .kbq-hint__text {
+                color: inherit;
+            }
         }
 
         .kbq-toggle-bar {

package/toggle/toggle-tokens.scss

@@ -5,7 +5,6 @@
     --kbq-toggle-size-big-height: var(--kbq-size-l);
     --kbq-toggle-size-big-width: 28px;
     --kbq-toggle-size-big-horizontal-content-padding: var(--kbq-size-s);
-    --kbq-toggle-size-big-vertical-content-padding: var(--kbq-size-s);
     /* THEME TOKENS */
     --kbq-toggle-theme-default-border: var(--kbq-line-contrast-less);
     --kbq-toggle-theme-default-background: var(--kbq-background-bg);

package/toggle/toggle.scss

@@ -1,5 +1,3 @@
-// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
-/* stylelint-disable selector-class-pattern */
 @use '../core/styles/common/tokens';
 @use '../core/styles/common/animation';
 @use './toggle-theme' as theme;
@@ -27,11 +25,11 @@ $toggle-thumb-offset: 8px;
 
         cursor: inherit;
 
-        &.left {
+        &.kbq-toggle-layout_left {
             flex-direction: row-reverse;
         }
 
-        .kbq-toggle-bar-container:has(+ .kbq-toggle__content) {
+        &:has(.kbq-toggle-label:not(:empty)) .kbq-toggle-bar-container {
             padding-top: tokens.kbq-css-half-difference(typography-text-normal-line-height, toggle-size-normal-height);
         }
     }
@@ -104,12 +102,14 @@ $toggle-thumb-offset: 8px;
 
     flex: 1;
 
-    &.left {
-        margin-right: var(--kbq-toggle-size-normal-horizontal-content-padding);
-    }
+    &:has(.kbq-toggle-label:not(:empty)) {
+        &.kbq-toggle__content_left {
+            margin-right: var(--kbq-toggle-size-normal-horizontal-content-padding);
+        }
 
-    &.right {
-        margin-left: var(--kbq-toggle-size-normal-horizontal-content-padding);
+        &.kbq-toggle__content_right {
+            margin-left: var(--kbq-toggle-size-normal-horizontal-content-padding);
+        }
     }
 }
 
@@ -119,13 +119,9 @@ $toggle-thumb-offset: 8px;
         width: var(--kbq-toggle-size-big-width);
     }
 
-    & .kbq-hint {
-        margin-top: var(--kbq-toggle-size-big-vertical-content-padding);
-    }
-
     .kbq-toggle-layout {
-        .kbq-toggle-bar-container:has(+ .kbq-toggle__content) {
-            padding-top: tokens.kbq-css-half-difference(toggle-font-big-label-line-height, toggle-size-big-height);
+        &:has(.kbq-toggle-label:not(:empty)) .kbq-toggle-bar-container {
+            padding-top: tokens.kbq-css-half-difference(typography-text-big-line-height, toggle-size-big-height);
         }
     }
 }

package/top-bar/top-bar-tokens.scss

@@ -2,7 +2,7 @@
     --kbq-top-bar-position: sticky;
     --kbq-top-bar-background: var(--kbq-background-bg);
     --kbq-top-bar-spacer-min-width: 80px;
-    --kbq-top-bar-padding-vertical: var(--kbq-size-xl);
+    --kbq-top-bar-padding-vertical: var(--kbq-size-m);
     --kbq-top-bar-padding-horizontal: var(--kbq-size-xxl);
     --kbq-top-bar-border-radius: 0;
     --kbq-top-bar-container-start-gap: 0;

package/top-bar/top-bar.scss

@@ -45,6 +45,9 @@
         &:has(> .kbq-overflow-items) {
             gap: unset;
             overflow: hidden;
+            // reduce height added by overflow-items' padding
+            margin-top: calc(-1 * var(--kbq-size-border-width));
+            margin-bottom: calc(-1 * var(--kbq-size-border-width));
         }
 
         .kbq-overflow-items {

package/tree/toggle.d.ts

@@ -20,7 +20,7 @@ export declare class KbqTreeNodeToggleBaseDirective<T> {
 }
 export declare class KbqTreeNodeToggleComponent<T> extends KbqTreeNodeToggleBaseDirective<T> {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeNodeToggleComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeNodeToggleComponent<any>, "kbq-tree-node-toggle", ["kbqTreeNodeToggle"], {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeNodeToggleComponent<any>, "kbq-tree-node-toggle", ["kbqTreeNodeToggle"], {}, {}, never, ["*"], false, never>;
 }
 export declare class KbqTreeNodeToggleDirective<T> extends KbqTreeNodeToggleBaseDirective<T> {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeNodeToggleDirective<any>, never>;

package/tree/tree-base.d.ts

@@ -75,7 +75,7 @@ export declare class KbqTreeBase<T> implements AfterContentChecked, CollectionVi
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeBase<any>, never, never, { "treeControl": { "alias": "treeControl"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; "dataSource": { "alias": "dataSource"; "required": false; }; }, {}, ["nodeDefs"], never, false, never>;
 }
 export declare class KbqTreeNode<T> implements IFocusableOption, OnDestroy {
-    protected elementRef: ElementRef;
+    protected elementRef: ElementRef<HTMLElement>;
     tree: KbqTreeBase<T>;
     /**
      * The most recently created `KbqTreeNode`. We save it in static variable so we can retrieve it
@@ -88,7 +88,7 @@ export declare class KbqTreeNode<T> implements IFocusableOption, OnDestroy {
     private _data;
     get isExpanded(): boolean;
     get level(): number;
-    constructor(elementRef: ElementRef, tree: KbqTreeBase<T>);
+    constructor(elementRef: ElementRef<HTMLElement>, tree: KbqTreeBase<T>);
     ngOnDestroy(): void;
     focus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeNode<any>, never>;

package/tree/tree-option.component.d.ts

@@ -58,7 +58,7 @@ export declare class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements
     get toggleElement(): KbqTreeNodeToggleBaseDirective<KbqTreeOption>;
     get isToggleInDefaultPlace(): boolean;
     checkboxState: KbqPseudoCheckboxState;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, tree: any);
+    constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, tree: any);
     ngAfterContentInit(): void;
     descendantsAllSelected(): boolean;
     descendantsPartiallySelected(): boolean;
@@ -68,6 +68,7 @@ export declare class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements
     setSelected(selected: boolean): void;
     focus(focusOrigin?: FocusOrigin): void;
     blur(): void;
+    /** @docs-private */
     getHeight(): number;
     select(setFocus?: boolean): void;
     deselect(): void;

package/tree/tree-selection.component.d.ts

@@ -18,10 +18,19 @@ export declare class KbqTreeSelectAllEvent<T> {
     options: T[];
     constructor(source: KbqTreeSelection, options: T[]);
 }
+/**
+ * Event class that occurs when copying an item from the KbqTreeSelection.
+ * Used to pass data about the copied item and copy context.
+ *
+ * @param source - instance of KbqTreeSelection
+ * @param option - instance of KbqTreeOption
+ * @param event - original keyboard event (optional) that triggered the copy
+ */
 export declare class KbqTreeCopyEvent<T> {
     source: KbqTreeSelection;
     option: T;
-    constructor(source: KbqTreeSelection, option: T);
+    event?: KeyboardEvent | undefined;
+    constructor(source: KbqTreeSelection, option: T, event?: KeyboardEvent | undefined);
 }
 export declare class KbqTreeNavigationChange<T> {
     source: KbqTreeSelection;
@@ -76,7 +85,7 @@ export declare class KbqTreeSelection extends KbqTreeBase<any> implements Contro
     get isEmpty(): boolean;
     private optionFocusSubscription;
     private optionBlurSubscription;
-    constructor(elementRef: ElementRef, scheduler: AsyncScheduler, differs: IterableDiffers, changeDetectorRef: ChangeDetectorRef, multiple: MultipleMode, clipboard: Clipboard);
+    constructor(elementRef: ElementRef<HTMLElement>, scheduler: AsyncScheduler, differs: IterableDiffers, changeDetectorRef: ChangeDetectorRef, multiple: MultipleMode, clipboard: Clipboard);
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -94,7 +103,7 @@ export declare class KbqTreeSelection extends KbqTreeBase<any> implements Contro
     emitNavigationEvent(option: KbqTreeOption): void;
     emitChangeEvent(option: KbqTreeOption): void;
     selectAllOptions(): void;
-    copyActiveOption(): void;
+    copyActiveOption(event: KeyboardEvent): void;
     writeValue(value: any): void;
     /** `View -> model callback called when value changes` */
     onChange: (value: any) => void;

package/tree-select/tree-select.component.d.ts

@@ -24,6 +24,18 @@ export type KbqTreeSelectOptions = Partial<{
      * If set to null or an empty string, the panel will grow to match the longest option's text.
      */
     panelWidth: KbqTreeSelectPanelWidth;
+    /**
+     * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
+     */
+    panelMinWidth: Exclude<KbqTreeSelectPanelWidth, '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-tree-select`. */
 export declare const KBQ_TREE_SELECT_OPTIONS: InjectionToken<Partial<{
@@ -32,6 +44,18 @@ export declare const KBQ_TREE_SELECT_OPTIONS: InjectionToken<Partial<{
      * If set to null or an empty string, the panel will grow to match the longest option's text.
      */
     panelWidth: KbqTreeSelectPanelWidth;
+    /**
+     * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
+     */
+    panelMinWidth: Exclude<KbqTreeSelectPanelWidth, "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_TREE_SELECT_OPTIONS`. */
 export declare const kbqTreeSelectOptionsProvider: (options: KbqTreeSelectOptions) => Provider;
@@ -43,7 +67,7 @@ export declare class KbqTreeSelectChange {
     constructor(source: KbqTreeSelect, value: any, isUserInput?: boolean);
 }
 export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentInit, AfterViewInit, OnDestroy, OnInit, DoCheck, ControlValueAccessor, KbqFormFieldControl<KbqTreeOption>, CanUpdateErrorState {
-    elementRef: ElementRef;
+    elementRef: ElementRef<HTMLElement>;
     readonly changeDetectorRef: ChangeDetectorRef;
     private readonly ngZone;
     private readonly renderer;
@@ -162,8 +186,8 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     get hasBackdrop(): boolean;
     set hasBackdrop(value: boolean);
     private _hasBackdrop;
-    get tabIndex(): number;
-    set tabIndex(value: number);
+    get tabIndex(): number | null;
+    set tabIndex(value: number | null);
     private _tabIndex;
     get disabled(): boolean;
     set disabled(value: boolean);
@@ -185,6 +209,11 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     protected overlayWidth: string | number;
     /** Min width of the overlay panel. */
     protected overlayMinWidth: string | number;
+    /**
+     * Minimum width of the panel.
+     * If minWidth is larger than window width, it will be ignored.
+     */
+    panelMinWidth: Exclude<KbqTreeSelectPanelWidth, 'auto'>;
     /** Origin for the overlay panel. */
     protected overlayOrigin?: CdkOverlayOrigin | ElementRef;
     /**
@@ -192,6 +221,15 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
      * If set to null or an empty string, the panel will grow to match the longest option's text.
      */
     panelWidth: KbqTreeSelectPanelWidth;
+    /**
+     * Controls when the search functionality is displayed based on the number of available options.
+     *
+     * Automatically enables search hiding if value provided, even if `defaultOptions.searchMinOptionsThreshold` is provided.
+     * @default undefined
+     */
+    set searchMinOptionsThreshold(value: 'auto' | number | undefined);
+    get searchMinOptionsThreshold(): number | undefined;
+    private _searchMinOptionsThreshold;
     get panelOpen(): boolean;
     get canShowCleaner(): boolean;
     /** @docs-private */
@@ -208,7 +246,7 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     private tempValues;
     private readonly destroyRef;
     private readonly window;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, renderer: Renderer2, defaultErrorStateMatcher: ErrorStateMatcher, scrollStrategyFactory: any, dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, parentFormField: KbqFormField, ngControl: NgControl, localeService?: KbqLocaleService | undefined);
+    constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, renderer: Renderer2, defaultErrorStateMatcher: ErrorStateMatcher, scrollStrategyFactory: any, dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, parentFormField: KbqFormField, ngControl: NgControl, localeService?: KbqLocaleService | undefined);
     ngOnInit(): void;
     ngDoCheck(): void;
     ngAfterContentInit(): void;
@@ -221,6 +259,7 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     onChange: (value: any) => void;
     /** `View -> model callback called when select has been touched` */
     onTouched: () => void;
+    handleClick(): void;
     toggle(): void;
     open(): void;
     /** Closes the overlay panel and focuses the host element. */
@@ -281,6 +320,10 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     /** Invoked when an option is clicked. */
     onRemoveSelectedOption(selectedOption: any, $event: any): void;
     calculateHiddenItems(): void;
+    triggerKeydownHandler(event: KeyboardEvent): void;
+    panelKeydownHandler(event: KeyboardEvent): any;
+    /** @docs-private */
+    protected shouldShowSearch(): boolean;
     private updateLocaleParams;
     private closingActions;
     private getTotalItemsWidthInMatcher;
@@ -289,8 +332,6 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     private getOverlayWidth;
     private buildTriggerClone;
     private getItemWidth;
-    private handleClosedKeydown;
-    private handleOpenKeydown;
     private refreshTriggerValues;
     /**
      * Sets the selected option based on a value. If no option can be
@@ -309,9 +350,9 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     private scrollActiveOptionIntoView;
     private subscribeOnSearchChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; host: true; }, { optional: true; self: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "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; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "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; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], false, never>;
     static ngAcceptInputType_multiline: unknown;
     static ngAcceptInputType_multiple: unknown;
-    static ngAcceptInputType_tabIndex: unknown;
     static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_panelMinWidth: unknown;
 }

package/tree-select/tree-select.module.d.ts

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

package/tree-select/tree-select.scss

@@ -19,6 +19,10 @@
 
     & .kbq-tree-selection {
         height: 100%;
+
+        .kbq-tree-option {
+            @include item-active-area(var(--kbq-size-3xs));
+        }
     }
 }