@koobiq/components 17.0.0-rc.7 → 17.0.0-rc.8

package/radio/radio.scss

@@ -71,6 +71,7 @@ $tokens: meta.module-variables(tokens) !default;
         }
 
         left: 0;
+        top: var(--kbq-radio-size-normal-top, map.get($tokens, radio-size-normal-top));
 
         width: kbq-css-variable(radio-size-normal-outer-size);
         height: kbq-css-variable(radio-size-normal-outer-size);
@@ -113,7 +114,8 @@ $tokens: meta.module-variables(tokens) !default;
         );
 
         .kbq-radio-button__outer-circle {
-            top: 2px;
+            
+            top: var(--kbq-radio-size-big-top, map.get($tokens, radio-size-big-top));
 
             width: kbq-css-variable(radio-size-big-outer-size);
             height: kbq-css-variable(radio-size-big-outer-size);

package/schematics/ng-add/index.js

@@ -52,13 +52,13 @@ function ngAdd(options) {
         }
         // Installing dependencies
         addPackageToPackageJson(tree, '@angular/cdk', "^17.2.0");
-        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.0.0-rc.7");
-        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.0.0-rc.7");
+        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.0.0-rc.8");
+        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.0.0-rc.8");
         addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.1.2");
         addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.1.2");
         addPackageToPackageJson(tree, '@koobiq/icons', "^7.1.1");
-        addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.0.0-rc.9");
-        addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.0.0-rc.9");
+        addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.0.0-rc.11");
+        addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.0.0-rc.11");
         addPackageToPackageJson(tree, '@messageformat/core', "^3.0.1");
         addPackageToPackageJson(tree, 'luxon', "^3.4.4");
         addPackageToPackageJson(tree, 'marked', "^9.0.0");

package/scrollbar/scrollbar.component.scss

@@ -62,6 +62,12 @@
     }
 }
 
+[data-overlayscrollbars-contents] {
+    &:focus-visible {
+        outline: none;
+    }
+}
+
 
 // core
 .os-size-observer,

package/select/select.component.d.ts

@@ -5,11 +5,10 @@ import { CdkVirtualForOf } from '@angular/cdk/scrolling';
 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 { ActiveDescendantKeyManager } from '@koobiq/cdk/a11y';
-import { CanDisable, CanDisableCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, HasTabIndex, HasTabIndexCtor, KbqOptgroup, KbqOption, KbqOptionSelectionChange, KbqLocaleService, KbqOptionBase } from '@koobiq/components/core';
+import { CanDisable, CanDisableCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, HasTabIndex, HasTabIndexCtor, KbqOptgroup, KbqOption, KbqOptionSelectionChange, KbqLocaleService, KbqOptionBase, KbqSelectTrigger, KbqSelectMatcher, KbqSelectSearch } from '@koobiq/components/core';
 import { KbqCleaner, KbqFormField, KbqFormFieldControl } from '@koobiq/components/form-field';
-import { KbqInput } from '@koobiq/components/input';
 import { KbqTag } from '@koobiq/components/tags';
-import { Observable, Subject, Subscription } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 /** Change event object that is emitted when the select value has changed. */
 export declare class KbqSelectChange {
@@ -17,35 +16,6 @@ export declare class KbqSelectChange {
     value: any;
     constructor(source: KbqSelect, value: any);
 }
-export declare class KbqSelectFooter {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectFooter, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectFooter, "kbq-select-footer, [kbq-select-footer]", never, {}, {}, never, never, false, never>;
-}
-export declare class KbqSelectSearch implements AfterContentInit, OnDestroy {
-    input: KbqInput;
-    searchChangesSubscription: Subscription;
-    isSearchChanged: boolean;
-    constructor(formField: KbqFormField);
-    focus(): void;
-    reset(): void;
-    ngAfterContentInit(): void;
-    ngOnDestroy(): void;
-    handleKeydown(event: KeyboardEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectSearch, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearch, "[kbqSelectSearch]", ["kbqSelectSearch"], {}, {}, ["input"], never, false, never>;
-}
-export declare class KbqSelectSearchEmptyResult {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectSearchEmptyResult, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearchEmptyResult, "[kbq-select-search-empty-result]", ["kbqSelectSearchEmptyResult"], {}, {}, never, never, false, never>;
-}
-export declare class KbqSelectTrigger {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectTrigger, "kbq-select-trigger, [kbq-select-trigger]", never, {}, {}, never, never, false, never>;
-}
-export declare class KbqSelectMatcher {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectMatcher, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectMatcher, "kbq-select-matcher, [kbq-select-matcher]", never, {}, {}, never, never, false, never>;
-}
 /** @docs-private */
 export declare class KbqSelectBase {
     elementRef: ElementRef;

package/select/select.module.d.ts

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

package/tabs/tab-group.component.d.ts

@@ -43,6 +43,7 @@ export declare class KbqTabGroupBase {
 }
 /** @docs-private */
 export declare const KbqTabGroupMixinBase: CanDisableCtor & typeof KbqTabGroupBase;
+export type KbqTabSelectBy = string | number | ((tabs: KbqTab[]) => KbqTab | null);
 /**
  * Tab-group component.  Supports basic tab pairs (label + content) and includes
  * keyboard navigation.
@@ -64,20 +65,23 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     get selectedIndex(): number | null;
     set selectedIndex(value: number | null);
     private _selectedIndex;
+    get activeTab(): KbqTab | null;
+    set activeTab(value: KbqTabSelectBy | null);
     /** Position of the tab header. */
     headerPosition: KbqTabHeaderPosition;
     /** Duration for the tab animation. Must be a valid CSS value (e.g. 600ms). */
     animationDuration: string;
     /** Output to enable support for two-way binding on `[(selectedIndex)]` */
     readonly selectedIndexChange: EventEmitter<number>;
+    /** Event emitted when the tab selection has changed. */
+    readonly activeTabChange: EventEmitter<string | number | KbqTab>;
     /** Event emitted when focus has changed within a tab group. */
     readonly focusChange: EventEmitter<KbqTabChangeEvent>;
     /** Event emitted when the body animation has completed */
     readonly animationDone: EventEmitter<void>;
     /** Event emitted when the tab selection has changed. */
     readonly selectedTabChange: EventEmitter<KbqTabChangeEvent>;
-    /** The tab index that should be selected after the content has been checked. */
-    private indexToSelect;
+    private attributeToSelectBy;
     /** Snapshot of the height of the tab body wrapper before another tab is activated. */
     private tabBodyWrapperHeight;
     /** Subscription to tabs being added/removed. */
@@ -114,6 +118,7 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     handleClick(tab: KbqTab, tabHeader: KbqTabHeader, index: number): void;
     /** Retrieves the tabindex for the tab. */
     getTabIndex(tab: KbqTab, index: number): number | null;
+    onSelectFocusedIndex($event: number): void;
     private checkOverflow;
     private createChangeEvent;
     /**
@@ -126,6 +131,7 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     private subscribeToResize;
     /** Clamps the given index to the bounds of 0 and the tabs length. */
     private clampTabIndex;
+    private getTabIndexToSelect;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabGroup, [null, null, { attribute: "vertical"; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabGroup, "kbq-tab-group", ["kbqTabGroup"], { "disabled": { "alias": "disabled"; "required": false; }; "transparent": { "alias": "transparent"; "required": false; }; "onSurface": { "alias": "onSurface"; "required": false; }; "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, ["tabs"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabGroup, "kbq-tab-group", ["kbqTabGroup"], { "disabled": { "alias": "disabled"; "required": false; }; "transparent": { "alias": "transparent"; "required": false; }; "onSurface": { "alias": "onSurface"; "required": false; }; "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "activeTab": { "alias": "activeTab"; "required": false; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "activeTabChange": "activeTabChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, ["tabs"], never, false, never>;
 }

package/tags/_tag-theme.scss

@@ -34,8 +34,8 @@
         @include kbq-tag-state($component, $type, focus);
 
         box-shadow:
-            inset 0 0 0 1px kbq-css-variable(tag-#{$type}-focus-outline, map.get($component, $type, focus, outline)),
-            0 0 0 1px kbq-css-variable(tag-#{$type}-focus-outline, map.get($component, $type, focus, outline));
+            inset 0 0 0.1px 1px kbq-css-variable(tag-#{$type}-focus-outline, map.get($component, $type, focus, outline)),
+            0 0 0.1px 1px kbq-css-variable(tag-#{$type}-focus-outline, map.get($component, $type, focus, outline));
     }
 
     &.kbq-disabled {

package/tags/tag-default-options.d.ts

@@ -7,6 +7,7 @@ export interface KbqTagsDefaultOptions {
     separators?: {
         [key: number]: KbqTagSeparator;
     };
+    addOnPaste?: boolean;
 }
 /** Injection token to be used to override the default options for the chips module. */
 export declare const KBQ_TAGS_DEFAULT_OPTIONS: InjectionToken<KbqTagsDefaultOptions>;

package/tags/tag-input.d.ts

@@ -56,6 +56,12 @@ export declare class KbqTagInput implements KbqTagTextControl, OnChanges {
     get addOnBlur(): boolean;
     set addOnBlur(value: boolean);
     private _addOnBlur;
+    /**
+     * Whether the tagEnd event will be emitted when the text pasted.
+     */
+    get addOnPaste(): boolean;
+    set addOnPaste(value: boolean);
+    private _addOnPaste;
     /** Whether the input is disabled. */
     get disabled(): boolean;
     set disabled(value: boolean);
@@ -88,5 +94,5 @@ export declare class KbqTagInput implements KbqTagTextControl, OnChanges {
     /** Checks whether a keycode is one of the configured separators. */
     private isSeparatorKey;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagInput, [null, null, null, { optional: true; self: true; }, { optional: true; self: true; }, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagInput, "input[kbqTagInputFor]", ["kbqTagInput", "kbqTagInputFor"], { "separatorKeyCodes": { "alias": "kbqTagInputSeparatorKeyCodes"; "required": false; }; "distinct": { "alias": "distinct"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tagList": { "alias": "kbqTagInputFor"; "required": false; }; "addOnBlur": { "alias": "kbqTagInputAddOnBlur"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "tagEnd": "kbqTagInputTokenEnd"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagInput, "input[kbqTagInputFor]", ["kbqTagInput", "kbqTagInputFor"], { "separatorKeyCodes": { "alias": "kbqTagInputSeparatorKeyCodes"; "required": false; }; "distinct": { "alias": "distinct"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tagList": { "alias": "kbqTagInputFor"; "required": false; }; "addOnBlur": { "alias": "kbqTagInputAddOnBlur"; "required": false; }; "addOnPaste": { "alias": "kbqTagInputAddOnPaste"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "tagEnd": "kbqTagInputTokenEnd"; }, never, never, false, never>;
 }

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

@@ -1,5 +1,6 @@
+import { KbqSelectSearch } from '@koobiq/components/core';
 import { KbqCleaner } from '@koobiq/components/form-field';
-import { KbqSelect, KbqSelectSearch } from '@koobiq/components/select';
+import { KbqSelect } from '@koobiq/components/select';
 import * as i0 from "@angular/core";
 export declare class KbqTimezoneSelectTrigger {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneSelectTrigger, never>;

package/toast/toast.component.scss

@@ -26,7 +26,7 @@ $tokens: meta.module-variables(tokens) !default;
     height: kbq-css-variable(toast-size-icon-height);
     max-height: kbq-css-variable(toast-size-icon-height);
 
-    border-radius: kbq-css-variable(toast-size-border-raius);
+    border-radius: kbq-css-variable(toast-size-border-radius);
 
     margin-right: kbq-css-variable(toast-size-icon-margin-right);
 

package/toast/toast.service.d.ts

@@ -1,16 +1,17 @@
 import { AnimationEvent } from '@angular/animations';
 import { Overlay, OverlayContainer } from '@angular/cdk/overlay';
-import { Injector, ComponentRef, TemplateRef, EmbeddedViewRef, InjectionToken } from '@angular/core';
+import { Injector, ComponentRef, TemplateRef, EmbeddedViewRef, InjectionToken, NgZone, OnDestroy } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { KbqToastComponent } from './toast.component';
 import { KbqToastData, KbqToastConfig } from './toast.type';
 import * as i0 from "@angular/core";
 export declare const KBQ_TOAST_FACTORY: InjectionToken<unknown>;
 export declare const defaultToastConfig: KbqToastConfig;
-export declare class KbqToastService<T extends KbqToastComponent = KbqToastComponent> {
+export declare class KbqToastService<T extends KbqToastComponent = KbqToastComponent> implements OnDestroy {
     private overlay;
     private injector;
     private overlayContainer;
+    private ngZone;
     private toastFactory;
     private toastConfig;
     get toasts(): ComponentRef<T>[];
@@ -18,12 +19,15 @@ export declare class KbqToastService<T extends KbqToastComponent = KbqToastCompo
     readonly hovered: BehaviorSubject<boolean>;
     readonly focused: BehaviorSubject<boolean>;
     readonly animation: BehaviorSubject<AnimationEvent | null>;
+    timer: import("rxjs").Observable<number>;
     private containerInstance;
     private overlayRef;
     private portal;
+    private timerSubscription;
     private toastsDict;
     private templatesDict;
-    constructor(overlay: Overlay, injector: Injector, overlayContainer: OverlayContainer, toastFactory: any, toastConfig: KbqToastConfig);
+    constructor(overlay: Overlay, injector: Injector, overlayContainer: OverlayContainer, ngZone: NgZone, toastFactory: any, toastConfig: KbqToastConfig);
+    ngOnDestroy(): void;
     show(data: KbqToastData, duration?: number, onTop?: boolean): {
         ref: ComponentRef<T>;
         id: number;
@@ -50,6 +54,6 @@ export declare class KbqToastService<T extends KbqToastComponent = KbqToastCompo
     private getBottomRight;
     private getCenter;
     private getGlobalOverlayPosition;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastService<any>, [null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastService<any>, [null, null, null, null, null, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<KbqToastService<any>>;
 }

package/toggle/_toggle-theme.scss

@@ -43,7 +43,7 @@
                 toggle-#{$type}-states-focused-focus-outline,
                 map.get($component, $type, states-focused, focus-outline)
             );
-            box-shadow: 0 0 0 1px kbq-css-variable(
+            box-shadow: 0 0 0.1px 1px kbq-css-variable(
                 toggle-#{$type}-states-focused-focus-outline,
                 map.get($component, $type, states-focused, focus-outline)
             );
@@ -58,7 +58,7 @@
                 toggle-#{$type}-states-checked-focused-focus-outline,
                 map.get($component, $type, states-checked-focused, focus-outline)
             );
-            box-shadow: 0 0 0 1px kbq-css-variable(
+            box-shadow: 0 0 0.1px 1px kbq-css-variable(
                 toggle-#{$type}-states-checked-focused-focus-outline,
                 map.get($component, $type, states-checked-focused, focus-outline)
             );

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

@@ -35,7 +35,7 @@
         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 {
+        & .kbq-select__footer {
             border-color: kbq-css-variable(divider-color, map.get($divider, color));
         }
     }

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;
@@ -94,8 +81,8 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     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;
@@ -285,6 +272,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

@@ -12,7 +12,7 @@
 .kbq-tree-select__panel {
     @extend %kbq-select-panel;
 
-    & .kbq-tree-select__footer {
+    & .kbq-select__footer {
         @extend %kbq-select-footer;
     }
 }