@koobiq/components 17.0.0-beta.2 → 17.0.0-rc.10

package/tooltip/_tooltip-theme.scss

@@ -3,47 +3,43 @@
 
 @use '../core/pop-up/pop-up' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
+@mixin kbq-tooltip-color($component, $style-name) {
+    $style: map.get($component, $style-name);
 
-@mixin kbq-tooltip-color($tooltip) {
-    box-shadow: map.get($tooltip, shadow);
+    box-shadow: kbq-css-variable(tooltip-#{$style-name}-shadow, map.get($style, shadow));
 
     & .kbq-tooltip__inner {
-        color: map.get($tooltip, text);
+        color: kbq-css-variable(tooltip-#{$style-name}-text, map.get($style, text));
 
-        background-color: map.get($tooltip, background);
+        background-color: kbq-css-variable(tooltip-#{$style-name}-background, map.get($style, background));
     }
 
     & .kbq-tooltip__arrow {
-        background-color: map.get($tooltip, background);
-        box-shadow: map.get($tooltip, shadow);
+        background-color: kbq-css-variable(tooltip-#{$style-name}-background, map.get($style, background));
+        box-shadow: kbq-css-variable(tooltip-#{$style-name}-shadow, map.get($style, shadow));
     }
 }
 
 @mixin kbq-tooltip-theme($theme) {
     $tooltip: map.get(map.get($theme, components), tooltip);
 
-    $theme-fade-off: map.get($tooltip, theme-fade-off);
-    $contrast-fade-off: map.get($tooltip, contrast-fade-off);
-    $contrast-fade-on: map.get($tooltip, contrast-fade-on);
-
     .kbq-tooltip.kbq-theme {
-        @include kbq-tooltip-color($theme-fade-off);
+        @include kbq-tooltip-color($tooltip, theme-fade-off);
     }
 
     .kbq-tooltip.kbq-contrast {
-        @include kbq-tooltip-color($contrast-fade-off);
+        @include kbq-tooltip-color($tooltip, contrast-fade-off);
     }
 
     .kbq-tooltip.kbq-contrast-fade {
-        @include kbq-tooltip-color($contrast-fade-on);
+        @include kbq-tooltip-color($tooltip, contrast-fade-on);
     }
 }
 
 @mixin kbq-tooltip-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-tooltip {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, tooltip-font-default));
+        @include kbq-typography-css-variables(tooltip, default);
     }
 }

package/tooltip/tooltip.component.d.ts

@@ -1,6 +1,7 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollDispatcher, ScrollStrategy, OverlayConfig } from '@angular/cdk/overlay';
-import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, TemplateRef, Type, ViewContainerRef } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, TemplateRef, Type, ViewContainerRef } from '@angular/core';
 import { KbqPopUp, KbqPopUpTrigger, PopUpPlacements, KbqComponentColors } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 export declare enum TooltipModifier {
@@ -37,7 +38,8 @@ export declare const KBQ_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER: {
     deps: (typeof Overlay)[];
     useFactory: typeof kbqTooltipScrollStrategyFactory;
 };
-export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> {
+export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> implements OnDestroy {
+    protected focusMonitor: FocusMonitor;
     get tooltipVisible(): boolean;
     set tooltipVisible(value: boolean);
     get tooltipPlacement(): PopUpPlacements;
@@ -64,20 +66,22 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     protected originSelector: string;
     protected overlayConfig: OverlayConfig;
     protected modifier: TooltipModifier;
-    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality);
+    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, focusMonitor: FocusMonitor);
+    ngOnDestroy(): void;
+    show(delay?: number): void;
     updateData(): void;
     closingActions(): import("rxjs").Observable<void | MouseEvent>;
     getOverlayHandleComponentType(): Type<KbqTooltipComponent>;
     updateClassMap(newPlacement?: string): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTooltipTrigger, [null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTooltipTrigger, [null, null, null, null, null, null, { optional: true; }, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[kbqTooltip]", ["kbqTooltip"], { "tooltipVisible": { "alias": "kbqVisible"; "required": false; }; "tooltipPlacement": { "alias": "kbqPlacement"; "required": false; }; "tooltipPlacementPriority": { "alias": "kbqPlacementPriority"; "required": false; }; "content": { "alias": "kbqTooltip"; "required": false; }; "disabled": { "alias": "kbqTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "kbqEnterDelay"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "customClass": { "alias": "kbqTooltipClass"; "required": false; }; "color": { "alias": "kbqTooltipColor"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, false, never>;
 }
 export declare class KbqWarningTooltipTrigger extends KbqTooltipTrigger {
     get content(): string | TemplateRef<any>;
     set content(content: string | TemplateRef<any>);
     protected modifier: TooltipModifier;
-    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality);
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqWarningTooltipTrigger, [null, null, null, null, null, null, { optional: true; }]>;
+    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, focusMonitor: FocusMonitor);
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqWarningTooltipTrigger, [null, null, null, null, null, null, { optional: true; }, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqWarningTooltipTrigger, "[kbqWarningTooltip]", ["kbqWarningTooltip"], { "content": { "alias": "kbqWarningTooltip"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class KbqExtendedTooltipTrigger extends KbqTooltipTrigger {
@@ -87,8 +91,8 @@ export declare class KbqExtendedTooltipTrigger extends KbqTooltipTrigger {
     set header(header: string | TemplateRef<any>);
     private _header;
     protected modifier: TooltipModifier;
-    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality);
+    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, focusMonitor: FocusMonitor);
     updateData(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqExtendedTooltipTrigger, [null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqExtendedTooltipTrigger, [null, null, null, null, null, null, { optional: true; }, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqExtendedTooltipTrigger, "[kbqExtendedTooltip]", ["kbqExtendedTooltip"], { "content": { "alias": "kbqExtendedTooltip"; "required": false; }; "header": { "alias": "kbqTooltipHeader"; "required": false; }; }, {}, never, never, false, never>;
 }

package/tooltip/tooltip.scss

@@ -3,42 +3,36 @@
 
 @use '../core/pop-up/pop-up';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 $trigger-margin: 8px;
 
-
 .kbq-tooltip__inner {
-    border-radius: var(--kbq-tooltip-size-border-radius, map.get($tokens, tooltip-size-border-radius));
+    border-radius: kbq-css-variable(tooltip-size-border-radius);
     word-break: break-word;
 }
 
 .kbq-tooltip {
     box-sizing: border-box;
 
-    border-radius: var(--kbq-tooltip-size-border-radius, map.get($tokens, tooltip-size-border-radius));
+    border-radius: kbq-css-variable(tooltip-size-border-radius);
 
     white-space: pre-line;
 
     @include pop-up.popup-margins(kbq-tooltip, $trigger-margin);
 
-    max-width: var(--kbq-tooltip-size-max-width, map.get($tokens, tooltip-size-max-width));
+    max-width: kbq-css-variable(tooltip-size-max-width);
 
     .kbq-tooltip__inner {
-        padding:
-            var(--kbq-tooltip-size-padding-vertical, map.get($tokens, tooltip-size-padding-vertical))
-            var(--kbq-tooltip-size-padding-horizontal, map.get($tokens, tooltip-size-padding-horizontal));
+        padding: kbq-css-variable(tooltip-size-padding-vertical) kbq-css-variable(tooltip-size-padding-horizontal);
     }
 }
 
 .kbq-tooltip__arrow {
     position: absolute;
 
-    width: var(--kbq-tooltip-size-arrow-size, map.get($tokens, tooltip-size-arrow-size));
-    height: var(--kbq-tooltip-size-arrow-size, map.get($tokens, tooltip-size-arrow-size));
+    width: kbq-css-variable(tooltip-size-arrow-size);
+    height: kbq-css-variable(tooltip-size-arrow-size);
 
     transform: rotate(45deg);
 

package/tree/_tree-theme.scss

@@ -3,63 +3,62 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
+@mixin kbq-tree-option($component, $state-name) {
+    $state: map.get($component, $state-name);
 
-@mixin kbq-tree-option($state) {
-    background: map.get($state, container-background);
+    background: kbq-css-variable(tree-#{$state-name}-container-background, map.get($state, container-background));
 
     .kbq-option-text {
-        color: map.get($state, text);
+        color: kbq-css-variable(tree-#{$state-name}-text, map.get($state, text));
     }
 
-    // todo выглядит как баг
-    //.kbq-icon {
-    //    color: map.get($state, icon);
-    //}
-
     .kbq-tree-node-toggle .kbq-icon {
-        color: map.get($state, tree-toggle);
+        color: kbq-css-variable(tree-#{$state-name}-tree-toggle, map.get($state, tree-toggle));
     }
 
     .kbq-option-action .kbq-icon {
-        color: map.get($state, action-button);
+        color: kbq-css-variable(tree-#{$state-name}-action-button, map.get($state, action-button));
     }
 
     .kbq-option-caption {
-        color: map.get($state, caption);
+        color: kbq-css-variable(tree-#{$state-name}-caption, map.get($state, caption));
     }
 }
 
-
 @mixin kbq-tree-theme($theme) {
     .kbq-tree-selection:focus {
         outline: none;
     }
 
     .kbq-tree-option {
-        $tree-item: map.get(map.get($theme, components), tree-item);
+        $tree-item: map.get($theme, components, tree-item);
 
-        @include kbq-tree-option(map.get($tree-item, default));
+        @include kbq-tree-option($tree-item, default);
 
         &:hover:not(.kbq-disabled) {
-            @include kbq-tree-option(map.get($tree-item, hover));
+            @include kbq-tree-option($tree-item, states-hover);
         }
 
         &.kbq-focused,
         &.kbq-active {
-            border-color: map.get(map.get($tree-item, focused), focus-outline);
+            border-color: kbq-css-variable(
+                tree-states-focused-focus-outline,
+                map.get($tree-item, states-focused, focus-outline)
+            );
         }
 
         &.kbq-selected {
-            @include kbq-tree-option(map.get($tree-item, selected));
+            @include kbq-tree-option($tree-item, states-selected);
 
             &:hover:not(.kbq-disabled) {
-                @include kbq-tree-option(map.get($tree-item, selected-hover));
+                @include kbq-tree-option($tree-item, states-selected-hover);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-tree-option(map.get($tree-item, disabled));
+            @include kbq-tree-option($tree-item, states-disabled);
 
             & .kbq-icon {
                 cursor: default;
@@ -69,13 +68,11 @@
 }
 
 @mixin kbq-tree-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-tree-option {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, tree-font-text));
+        @include kbq-typography-css-variables(tree, text);
     }
 
     .kbq-tree-option-caption {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, tree-font-caption));
+        @include kbq-typography-css-variables(tree, caption);
     }
 }

package/tree/toggle.scss

@@ -1,10 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-tree-node-toggle {
     display: flex;
@@ -14,8 +11,8 @@ $tokens: meta.module-variables(tokens) !default;
 
     height: 100%;
 
-    padding-left: var(--kbq-tree-size-toggle-padding, map.get($tokens, tree-size-toggle-padding));
-    padding-right: var(--kbq-tree-size-toggle-padding, map.get($tokens, tree-size-toggle-padding));
+    padding-left: kbq-css-variable(tree-size-toggle-padding);
+    padding-right: kbq-css-variable(tree-size-toggle-padding);
 
     cursor: pointer;
 

package/tree/tree-base.d.ts

@@ -41,7 +41,7 @@ export declare class KbqTreeBase<T> implements AfterContentChecked, CollectionVi
     /**
      * Provides a stream containing the latest data array to render. Influenced by the tree's
      * stream of view window (what dataNodes are currently on screen).
-     * Data source can be an observable of data array, or a dara array to render.
+     * Data source can be an observable of data array, or a data array to render.
      */
     get dataSource(): DataSource<T> | Observable<T[]> | T[];
     set dataSource(dataSource: DataSource<T> | Observable<T[]> | T[]);

package/tree/tree-option.scss

@@ -3,11 +3,10 @@
 
 @use '../core/styles/common';
 @use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
-
 .kbq-tree-option {
     @include common.kbq-no-select;
 
@@ -25,26 +24,30 @@ $tokens: meta.module-variables(tokens) !default;
 
     word-wrap: break-word;
 
-    border-width: var(--kbq-tree-size-container-focus-outline-width, $outline-width);
+    border-width: kbq-css-variable(tree-size-container-focus-outline-width);
     border-style: solid;
     border-color: transparent;
 
     padding-top: calc(
-        var(--kbq-tree-size-container-padding-vertical, $padding-vertical) -
-        var(--kbq-tree-size-container-focus-outline-width, $outline-width)
+        var(--kbq-tree-size-container-padding-vertical, $padding-vertical) - var(
+                --kbq-tree-size-container-focus-outline-width,
+                $outline-width
+            )
     );
     padding-right: calc(
-        var(--kbq-tree-size-container-padding-right, $padding-right) -
-        var(--kbq-tree-size-container-focus-outline-width, $outline-width)
+        var(--kbq-tree-size-container-padding-right, $padding-right) - var(
+                --kbq-tree-size-container-focus-outline-width,
+                $outline-width
+            )
     );
     padding-bottom: calc(
-        var(--kbq-tree-size-container-padding-vertical, $padding-vertical) -
-        var(--kbq-tree-size-container-focus-outline-width, $outline-width)
+        var(--kbq-tree-size-container-padding-vertical, $padding-vertical) - var(
+                --kbq-tree-size-container-focus-outline-width,
+                $outline-width
+            )
     );
 
-    gap: var(
-        --kbq-tree-size-container-content-gap-horizontal, map.get($tokens, tree-size-container-content-gap-horizontal)
-    );
+    gap: kbq-css-variable(tree-size-container-content-gap-horizontal);
 
     & .kbq-option-text {
         $tokens: meta.module-variables(tokens) !default;
@@ -54,8 +57,8 @@ $tokens: meta.module-variables(tokens) !default;
 
         @include common.kbq-truncate-line();
 
-        padding-top: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
-        padding-bottom: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
+        padding-top: kbq-css-variable(list-size-text-padding-vertical);
+        padding-bottom: kbq-css-variable(list-size-text-padding-vertical);
     }
 
     &:focus {

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

@@ -79,6 +79,7 @@ export declare class KbqTreeSelection extends KbqTreeBase<any> implements Contro
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     focus($event: any): void;
+    highlightSelectedOption(): void;
     blur(): void;
     onKeyDown(event: KeyboardEvent): void;
     updateScrollSize(): void;

package/tree-select/_tree-select-theme.scss

@@ -4,48 +4,45 @@
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/popup' as *;
-
+@use '../core/styles/common/tokens' as *;
 
 @mixin kbq-tree-select-theme($theme) {
     $foreground: map.get($theme, foreground);
-    $error: map.get($theme, error);
 
-    $select-panel: map.get(map.get($theme, components), select-panel);
-    $divider: map.get(map.get($theme, components), divider);
+    $select-panel: map.get($theme, components, select-panel);
+    $divider: map.get($theme, components, divider);
 
     .kbq-tree-select {
-        color: map.get($foreground, contrast);
+        color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
 
         &.ng-invalid {
-            color: kbq-color($error);
+            color: kbq-css-variable(error-default, map.get($theme, error, default));
         }
 
         &.kbq-disabled {
-            color: map.get($foreground, text-disabled);
+            color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
         }
     }
 
     .kbq-select__placeholder {
         text-overflow: ellipsis;
 
-        color: map.get($foreground, text-disabled);
+        color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
     }
 
     .kbq-tree-select__panel {
-        box-shadow: map.get($select-panel, shadow);
-        background: map.get($select-panel, background);
+        box-shadow: kbq-css-variable(select-panel-shadow, map.get($select-panel, shadow));
+        background: kbq-css-variable(select-panel-background, map.get($select-panel, background));
 
-        & .kbq-tree-select__footer {
-            border-color: map.get($divider, color);
+        & .kbq-select__footer {
+            border-color: kbq-css-variable(divider-color, map.get($divider, color));
         }
     }
 }
 
 @mixin kbq-tree-select-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-tree-select,
     .kbq-tree-select__panel {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, select-panel-font-default));
+        @include kbq-typography-css-variables(select-panel, default);
     }
 }

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

@@ -3,9 +3,8 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { CdkConnectedOverlay, ConnectedPosition, ViewportRuler } from '@angular/cdk/overlay';
 import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, QueryList, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
-import { CanDisable, CanUpdateErrorState, ErrorStateMatcher, HasTabIndex, CanDisableCtor, HasTabIndexCtor, CanUpdateErrorStateCtor } from '@koobiq/components/core';
+import { CanDisable, CanUpdateErrorState, ErrorStateMatcher, HasTabIndex, CanDisableCtor, HasTabIndexCtor, CanUpdateErrorStateCtor, KbqSelectSearch, KbqSelectTrigger, KbqSelectMatcher } from '@koobiq/components/core';
 import { KbqCleaner, KbqFormField, KbqFormFieldControl } from '@koobiq/components/form-field';
-import { KbqSelectSearch } from '@koobiq/components/select';
 import { KbqTag } from '@koobiq/components/tags';
 import { KbqTreeSelection, KbqTreeOption } from '@koobiq/components/tree';
 import { Observable, Subject } from 'rxjs';
@@ -22,18 +21,6 @@ export declare class KbqTreeSelectChange {
     isUserInput: boolean;
     constructor(source: KbqTreeSelect, value: any, isUserInput?: boolean);
 }
-export declare class KbqTreeSelectTrigger {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelectTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeSelectTrigger, "kbq-tree-select-trigger,[kbq-tree-select-trigger]", never, {}, {}, never, never, false, never>;
-}
-export declare class KbqTreeSelectMatcher {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelectMatcher, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeSelectMatcher, "kbq-tree-select-matcher", never, {}, {}, never, never, false, never>;
-}
-export declare class KbqTreeSelectFooter {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelectFooter, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeSelectFooter, "kbq-tree-select-footer, [kbq-tree-select-footer]", never, {}, {}, never, never, false, never>;
-}
 /** @docs-private */
 declare class KbqTreeSelectBase {
     elementRef: ElementRef;
@@ -88,14 +75,17 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
      */
     positions: ConnectedPosition[];
     options: QueryList<KbqTreeOption>;
+    /**
+     * Trigger - is a clickable field to open select dropdown panel
+     */
     trigger: ElementRef;
     panel: ElementRef;
     overlayDir: CdkConnectedOverlay;
     tags: QueryList<KbqTag>;
     cleaner: KbqCleaner;
     /** User-supplied override of the trigger element. */
-    customTrigger: KbqTreeSelectTrigger;
-    customMatcher: KbqTreeSelectMatcher;
+    customTrigger: KbqSelectTrigger;
+    customMatcher: KbqSelectMatcher;
     customTagTemplateRef: TemplateRef<any>;
     tree: KbqTreeSelection;
     search: KbqSelectSearch;
@@ -228,6 +218,7 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     get triggerValue(): string;
     get empty(): boolean;
     isRtl(): boolean;
+    get firstSelected(): any;
     handleKeydown(event: KeyboardEvent): void;
     onFocus(): void;
     /**
@@ -284,6 +275,6 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     private _compareWith;
     private subscribeOnSearchChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelect, [null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "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; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-tree-select-trigger", "kbq-cleaner", "kbq-tree-select-matcher, [kbq-tree-select-matcher]", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-tree-select-footer,[kbq-tree-select-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "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; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "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-trigger", "kbq-cleaner", "kbq-select-matcher, [kbq-select-matcher]", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], false, never>;
 }
 export {};

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

@@ -6,9 +6,8 @@ import * as i4 from "@koobiq/components/tree";
 import * as i5 from "@koobiq/components/icon";
 import * as i6 from "@koobiq/components/tags";
 import * as i7 from "@koobiq/components/core";
-import * as i8 from "@koobiq/components/select";
 export declare class KbqTreeSelectModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelectModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTreeSelectModule, [typeof i1.KbqTreeSelect, typeof i1.KbqTreeSelectTrigger, typeof i1.KbqTreeSelectMatcher, typeof i1.KbqTreeSelectFooter], [typeof i2.CommonModule, typeof i3.OverlayModule, typeof i4.KbqTreeModule, typeof i5.KbqIconModule, typeof i6.KbqTagsModule, typeof i7.KbqPseudoCheckboxModule, typeof i8.KbqSelectModule], [typeof i1.KbqTreeSelect, typeof i1.KbqTreeSelectTrigger, typeof i1.KbqTreeSelectMatcher, typeof i1.KbqTreeSelectFooter, typeof i2.CommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTreeSelectModule, [typeof i1.KbqTreeSelect], [typeof i2.CommonModule, typeof i3.OverlayModule, typeof i4.KbqTreeModule, typeof i5.KbqIconModule, typeof i6.KbqTagsModule, typeof i7.KbqPseudoCheckboxModule, typeof i7.KbqSelectSearch, typeof i7.KbqSelectFooter, typeof i7.KbqSelectMatcher, typeof i7.KbqSelectTrigger, typeof i7.KbqSelectSearchEmptyResult], [typeof i1.KbqTreeSelect, typeof i2.CommonModule, typeof i7.KbqSelectSearch, typeof i7.KbqSelectFooter, typeof i7.KbqSelectMatcher, typeof i7.KbqSelectTrigger, typeof i7.KbqSelectSearchEmptyResult]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTreeSelectModule>;
 }

package/tree-select/tree-select.scss

@@ -4,11 +4,6 @@
 @use '../core/styles/common';
 @use '../core/styles/common/select' as *;
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-tree-select {
     @extend %kbq-select-base;
 }
@@ -16,7 +11,7 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-tree-select__panel {
     @extend %kbq-select-panel;
 
-    & .kbq-tree-select__footer {
+    & .kbq-select__footer {
         @extend %kbq-select-footer;
     }
 }

package/core/styles/_variables.scss

@@ -1 +0,0 @@
-$z-index-loader-overlay: 10;