@koobiq/components 18.27.0 → 18.29.0

package/file-upload/_file-upload-theme.scss

@@ -16,6 +16,20 @@
             background-color: var(--kbq-file-upload-single-default-container-background);
             border-color: var(--kbq-file-upload-single-default-container-border) !important;
 
+            &:not(.kbq-disabled, .kbq-error) {
+                .kbq-file-upload__action {
+                    color: var(--kbq-file-upload-single-default-icon-button-color);
+                }
+
+                .kbq-dropzone__icon {
+                    color: var(--kbq-file-upload-single-default-upload-icon-color);
+                }
+
+                .file-item__text-wrapper .kbq-icon.kbq-empty {
+                    color: var(--kbq-file-upload-single-default-left-icon-color);
+                }
+            }
+
             &.dragover {
                 background-color: var(--kbq-file-upload-single-states-on-drag-container-background);
                 border-color: var(--kbq-file-upload-single-states-on-drag-container-border) !important;
@@ -27,20 +41,43 @@
                     border-color: var(--kbq-file-upload-single-states-error-container-border) !important;
                 }
 
-                :not(.kbq-link),
-                .kbq-icon.kbq-empty {
+                .kbq-dropzone__icon {
+                    color: var(--kbq-file-upload-single-states-error-upload-icon-color);
+                }
+
+                .file-item__text-wrapper .kbq-icon.kbq-empty {
+                    color: var(--kbq-file-upload-single-states-error-left-icon-color);
+                }
+
+                .file-item__text,
+                .dropzone__text:not(.kbq-link) {
                     color: var(--kbq-file-upload-single-states-error-text-block-color);
                 }
+
+                .kbq-file-upload__action {
+                    color: var(--kbq-file-upload-single-states-error-icon-button-color);
+                }
             }
 
             &.kbq-disabled {
                 background-color: var(--kbq-file-upload-single-states-disabled-container-background);
                 border-color: var(--kbq-file-upload-single-states-disabled-container-border) !important;
 
-                &,
-                .kbq-icon.kbq-empty,
-                .kbq-link {
-                    color: var(--kbq-file-upload-single-states-disabled-container-border);
+                .kbq-dropzone__icon {
+                    color: var(--kbq-file-upload-single-states-disabled-upload-icon-color);
+                }
+
+                .file-item__text-wrapper .kbq-icon.kbq-empty {
+                    color: var(--kbq-file-upload-single-states-disabled-left-icon-color);
+                }
+
+                .dropzone__text,
+                .file-item__text {
+                    color: var(--kbq-file-upload-single-states-disabled-text-block-color);
+                }
+
+                .kbq-file-upload__action {
+                    color: var(--kbq-file-upload-single-states-disabled-icon-button-color);
                 }
             }
         }
@@ -59,6 +96,12 @@
                 border-bottom-color: var(--kbq-file-upload-multiple-default-grid-divider-color);
             }
 
+            &:not(.kbq-disabled, .kbq-error) {
+                .kbq-dropzone__icon {
+                    color: var(--kbq-file-upload-multiple-default-upload-icon-color);
+                }
+            }
+
             &.dragover {
                 background-color: var(--kbq-file-upload-multiple-states-on-drag-container-background);
                 border-color: var(--kbq-file-upload-multiple-states-on-drag-container-border) !important;
@@ -67,6 +110,10 @@
                     border-bottom-color: var(--kbq-file-upload-multiple-states-on-drag-container-background) !important;
                 }
 
+                .kbq-dropzone__icon {
+                    color: var(--kbq-file-upload-multiple-states-on-drag-upload-icon-color);
+                }
+
                 &.selected {
                     .dropzone {
                         border-top-color: var(--kbq-file-upload-multiple-states-on-drag-container-border);
@@ -78,10 +125,28 @@
                 background-color: var(--kbq-file-upload-multiple-states-disabled-container-background);
                 border-color: var(--kbq-file-upload-multiple-states-disabled-container-border) !important;
 
-                &,
-                .kbq-icon.kbq-empty,
-                .kbq-link {
-                    color: var(--kbq-file-upload-multiple-states-disabled-container-border);
+                .kbq-dropzone__icon {
+                    color: var(--kbq-file-upload-multiple-states-disabled-upload-icon-color);
+                }
+
+                .dropzone__text,
+                .kbq-file-multiple-uploaded__header {
+                    color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
+                }
+
+                .multiple__uploaded-item {
+                    .kbq-file-upload__file .kbq-icon.kbq-empty {
+                        color: var(--kbq-file-upload-multiple-states-disabled-left-icon-color);
+                    }
+
+                    .file-item__text,
+                    .kbq-file-upload__size {
+                        color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
+                    }
+
+                    .kbq-file-upload__action .kbq-icon.kbq-empty {
+                        color: var(--kbq-file-upload-multiple-states-disabled-icon-button-color);
+                    }
                 }
 
                 &.selected {
@@ -96,9 +161,13 @@
                     background-color: var(--kbq-background-error-less);
                     border-color: var(--kbq-line-error) !important;
 
-                    :not(.kbq-link),
-                    .kbq-icon.kbq-empty {
-                        color: var(--kbq-foreground-error);
+                    .kbq-dropzone__icon {
+                        color: var(--kbq-file-upload-single-states-error-upload-icon-color);
+                    }
+
+                    .dropzone__text:not(.kbq-link),
+                    .kbq-file-multiple-uploaded__header {
+                        color: var(--kbq-file-upload-single-states-error-text-block-color);
                     }
                 }
 
@@ -106,20 +175,28 @@
                     &:has(.kbq-file-upload__row.error) {
                         background-color: var(--kbq-background-error-less);
 
-                        :not(.kbq-link),
-                        .kbq-icon.kbq-empty {
+                        .file-item__text,
+                        .kbq-file-upload__size {
                             color: var(--kbq-foreground-error);
                         }
+
+                        .kbq-file-upload__file .kbq-icon.kbq-empty {
+                            color: var(--kbq-file-upload-multiple-states-error-left-icon-color);
+                        }
+
+                        .kbq-file-upload__action .kbq-icon.kbq-empty {
+                            color: var(--kbq-file-upload-multiple-states-error-icon-button-color);
+                        }
                     }
                 }
             }
 
             .multiple__uploaded-item {
-                & .kbq-file-upload__file .kbq-icon.kbq-empty {
+                .kbq-file-upload__file .kbq-icon.kbq-empty {
                     color: var(--kbq-file-upload-multiple-default-left-icon-color);
                 }
 
-                & .kbq-file-upload__action .kbq-icon.kbq-empty {
+                .kbq-file-upload__action .kbq-icon.kbq-empty {
                     color: var(--kbq-file-upload-multiple-default-icon-button-color);
                 }
             }

package/file-upload/file-upload-tokens.scss

@@ -6,6 +6,7 @@
     --kbq-file-upload-size-single-container-padding-horizontal: var(--kbq-size-m);
     --kbq-file-upload-size-single-text-block-padding-vertical: var(--kbq-size-3xs);
     --kbq-file-upload-size-single-text-block-content-gap-horizontal: var(--kbq-size-xxs);
+    --kbq-file-upload-single-min-height: var(--kbq-size-5xl);
     --kbq-file-upload-size-multiple-big-container-min-height: 160px;
     --kbq-file-upload-size-multiple-big-container-min-width: 320px;
     --kbq-file-upload-size-multiple-big-container-border-radius: var(--kbq-size-s);
@@ -32,12 +33,15 @@
     --kbq-file-upload-single-states-on-drag-text-block-color: var(--kbq-foreground-contrast);
     --kbq-file-upload-single-states-error-container-border: var(--kbq-line-error);
     --kbq-file-upload-single-states-error-container-background: var(--kbq-background-error-less);
+    --kbq-file-upload-single-states-error-upload-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-single-states-error-left-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-single-states-error-text-block-color: var(--kbq-foreground-error);
+    --kbq-file-upload-single-states-error-icon-button-color: var(--kbq-icon-error);
     --kbq-file-upload-single-states-disabled-container-border: var(--kbq-states-line-disabled);
     --kbq-file-upload-single-states-disabled-container-background: var(--kbq-states-background-disabled);
     --kbq-file-upload-single-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-single-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);
+    --kbq-file-upload-single-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-single-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);
     --kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
     --kbq-file-upload-multiple-default-container-border: var(--kbq-line-contrast-fade);
@@ -62,6 +66,7 @@
     --kbq-file-upload-multiple-states-disabled-container-background: var(--kbq-states-background-disabled);
     --kbq-file-upload-multiple-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-multiple-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);
+    --kbq-file-upload-multiple-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-multiple-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);
     --kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);
     --kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);

package/file-upload/single-file-upload.component.scss

@@ -11,6 +11,7 @@
             [ file-upload-size-single-container-padding-horizontal,
             file-upload-size-single-container-border-width]
         );
+    min-height: var(--kbq-file-upload-single-min-height);
 
     border-radius: var(--kbq-file-upload-size-single-container-border-radius);
     border-width: var(--kbq-file-upload-size-single-container-border-width);

package/filter-bar/filter-bar.d.ts

@@ -20,8 +20,8 @@ export declare class KbqFilterBar {
     set filter(value: KbqFilter | null);
     private _filter;
     /** An array of templates that are used when adding a pipe. Also contains lists of options to select (values). */
-    set pipeTemplates(value: KbqPipeTemplate[]);
     get pipeTemplates(): KbqPipeTemplate[];
+    set pipeTemplates(value: KbqPipeTemplate[]);
     private _templates;
     /**
      * Event that emits whenever the raw value of the filter changes. This is here primarily
@@ -33,6 +33,8 @@ export declare class KbqFilterBar {
     readonly onChangePipe: EventEmitter<KbqPipe>;
     /** Event that emits whenever the pipe deleted. */
     readonly onRemovePipe: EventEmitter<KbqPipe>;
+    /** Event that emits whenever the select or multiselect pipe closed. */
+    readonly onClosePipe: EventEmitter<KbqPipe>;
     /** Whether the current filter is saved and changed */
     get isSavedAndChanged(): boolean;
     /** Whether the current filter is saved */
@@ -65,5 +67,5 @@ export declare class KbqFilterBar {
     private updateLocaleParams;
     private initDefaultParams;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFilterBar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFilterBar, "kbq-filter-bar, [kbq-filter-bar]", never, { "filter": { "alias": "filter"; "required": false; }; "pipeTemplates": { "alias": "pipeTemplates"; "required": false; }; }, { "filterChange": "filterChange"; "onChangePipe": "onChangePipe"; "onRemovePipe": "onRemovePipe"; }, ["filters", "filterReset"], ["kbq-filters", "*", "kbq-pipe-add", "kbq-filter-reset", "kbq-filter-search, [kbq-filter-search]", "kbq-filter-refresher, [kbq-filter-refresher]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFilterBar, "kbq-filter-bar, [kbq-filter-bar]", never, { "filter": { "alias": "filter"; "required": false; }; "pipeTemplates": { "alias": "pipeTemplates"; "required": false; }; }, { "filterChange": "filterChange"; "onChangePipe": "onChangePipe"; "onRemovePipe": "onRemovePipe"; "onClosePipe": "onClosePipe"; }, ["filters", "filterReset"], ["kbq-filters", "*", "kbq-pipe-add", "kbq-filter-reset", "kbq-filter-search, [kbq-filter-search]", "kbq-filter-refresher, [kbq-filter-refresher]"], true, never>;
 }

package/filter-bar/filter-bar.types.d.ts

@@ -55,7 +55,9 @@ export declare enum KbqPipeTypes {
     ReadOnly = "readonly",
     Text = "text",
     Select = "select",
+    TreeSelect = "tree-select",
     MultiSelect = "multiselect",
+    MultiTreeSelect = "multi-tree-select",
     Date = "date",
     Datetime = "datetime"
 }
@@ -86,10 +88,11 @@ export interface KbqPipe {
     value: unknown | null;
     search?: boolean;
     selectAll?: boolean;
-    required: boolean;
-    cleanable?: boolean;
-    removable?: boolean;
-    disabled?: boolean;
+    /** @deprecated use cleanable = false and removable = false instead */
+    required?: boolean;
+    cleanable: boolean;
+    removable: boolean;
+    disabled: boolean;
 }
 export interface KbqPipeData<V> extends KbqPipe {
     value: V | null;
@@ -104,7 +107,32 @@ export interface KbqSaveFilterError {
     text?: string;
     nameAlreadyExists?: boolean;
 }
+/** saving statuses for KbqSaveFilterEvent */
+export declare enum KbqSaveFilterStatuses {
+    OnlyChanges = "onlyChanges",
+    NewName = "newName",
+    NewFilter = "newFilter"
+}
 export interface KbqSaveFilterEvent {
-    filter: KbqFilter | null;
+    filter: KbqFilter;
     filterBar: KbqFilterBar;
+    status?: KbqSaveFilterStatuses;
+}
+/** Flattened node */
+export declare class KbqTreeSelectFlatNode {
+    name: string;
+    value: unknown;
+    level: number;
+    expandable: boolean;
+    parent?: KbqTreeSelectFlatNode;
+}
+export interface KbqTreeSelectNode {
+    children: KbqTreeSelectNode[] | null;
+    name: string;
+    value: unknown;
 }
+/**
+ * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
+ * The return value is the list of extends `KbqTreeSelectNode`.
+ */
+export declare function kbqBuildTree<T extends KbqTreeSelectNode>(value: any, level: number): T[];

package/filter-bar/filters.d.ts

@@ -41,7 +41,8 @@ export declare class KbqFilters implements OnInit {
     readonly onSave: EventEmitter<KbqSaveFilterEvent>;
     /** Event that is generated whenever the user change a filter. */
     readonly onChangeFilter: EventEmitter<KbqSaveFilterEvent>;
-    /** Event that is generated whenever the user saves a filter as new. */
+    /** Event that is generated whenever the user saves a filter as new.
+     * @deprecated use onSave with status = newFilter. */
     readonly onSaveAsNew: EventEmitter<KbqSaveFilterEvent>;
     /** Event that is generated whenever the user remove a filter. */
     readonly onRemoveFilter: EventEmitter<KbqFilter>;
@@ -62,7 +63,7 @@ export declare class KbqFilters implements OnInit {
     ngOnInit(): void;
     selectFilter(filter: KbqFilter): void;
     saveChanges(): void;
-    saveAsNew(): void;
+    saveAsNew(event?: Event): void;
     showError(error?: KbqSaveFilterError): void;
     restoreFocus(): void;
     preparePopover(): void;

package/filter-bar/filters.scss

@@ -18,6 +18,10 @@
 
     & .kbq-filters__filter-name {
         @include common.kbq-truncate-line();
+
+        & .kbq-icon {
+            margin-bottom: var(--kbq-size-3xs);
+        }
     }
 
     & .kbq-filter-bar__separator {

package/filter-bar/pipes/base-pipe.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectorRef, ElementRef, InjectionToken, TemplateRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, DestroyRef, ElementRef, InjectionToken, TemplateRef } from '@angular/core';
 import { Subject } from 'rxjs';
 import { KbqFilterBar } from '../filter-bar';
 import { KbqPipeData, KbqPipeTemplate, KbqPipeType } from '../filter-bar.types';
@@ -17,6 +17,8 @@ export declare abstract class KbqBasePipe<V> implements AfterViewInit {
     protected readonly filterBar: KbqFilterBar | null;
     /** @docs-private */
     protected readonly changeDetectorRef: ChangeDetectorRef;
+    /** @docs-private */
+    protected readonly destroyRef: DestroyRef;
     /** values to select from the pipe template */
     protected values: any;
     /** TemplateRef for selecting an option */

package/filter-bar/pipes/base-pipe.scss

@@ -47,7 +47,8 @@
     }
 
     .kbq-select:not(:hover, .kbq-active),
-    .kbq-button:not(:hover, .kbq-active) {
+    .kbq-tree-select:not(:hover, .kbq-active),
+    .kbq-button:not(:hover, .kbq-active, [disabled]) {
         & + .kbq-pipe-button:not(:hover, .kbq-active)::after {
             content: '';
             position: absolute;

package/filter-bar/pipes/pipe-multi-select.d.ts

@@ -1,4 +1,4 @@
-import { OnInit, QueryList } from '@angular/core';
+import { AfterViewInit, OnInit, QueryList } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { KbqOption, KbqPseudoCheckboxState } from '@koobiq/components/core';
 import { KbqSelect } from '@koobiq/components/select';
@@ -6,7 +6,7 @@ import { Observable } from 'rxjs';
 import { KbqSelectValue } from '../filter-bar.types';
 import { KbqBasePipe } from './base-pipe';
 import * as i0 from "@angular/core";
-export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> implements OnInit {
+export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> implements AfterViewInit, OnInit {
     /** control for search options */
     searchControl: UntypedFormControl;
     /** filtered by search options */
@@ -21,11 +21,17 @@ export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectVa
     get isEmpty(): boolean;
     /** state for checkbox 'select all'. */
     get checkboxState(): KbqPseudoCheckboxState;
+    /** true if all visible options selected */
+    get allVisibleOptionsSelected(): boolean;
+    /** true if all options selected */
+    get allOptionsSelected(): boolean;
     private get visibleOptions();
-    private get allOptionsSelected();
+    private selectionAllInProgress;
     /** @docs-private */
     ngOnInit(): void;
     /** @docs-private */
+    ngAfterViewInit(): void;
+    /** @docs-private */
     onSelect(item: KbqSelectValue[]): void;
     /** @docs-private */
     onClear(): void;
@@ -35,6 +41,7 @@ export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectVa
     toggleSelectionAll(): void;
     /** Comparator of selected options */
     compareByValue: (o1: any, o2: any) => boolean;
+    onClose(): void;
     /** opens select */
     open(): void;
     private getFilteredOptions;

package/filter-bar/pipes/pipe-multi-tree-select.d.ts

@@ -0,0 +1,57 @@
+import { OnInit } from '@angular/core';
+import { UntypedFormControl } from '@angular/forms';
+import { KbqPseudoCheckboxState } from '@koobiq/components/core';
+import { FlatTreeControl, KbqTreeFlatDataSource, KbqTreeFlattener, KbqTreeSelection } from '@koobiq/components/tree';
+import { KbqTreeSelect } from '@koobiq/components/tree-select';
+import { Observable } from 'rxjs';
+import { KbqPipeTemplate, KbqSelectValue, KbqTreeSelectFlatNode, KbqTreeSelectNode } from '../filter-bar.types';
+import { KbqBasePipe } from './base-pipe';
+import * as i0 from "@angular/core";
+export declare class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSelectValue[]> implements OnInit {
+    /** control for search options */
+    searchControl: UntypedFormControl;
+    /** filtered by search options */
+    filteredOptions: Observable<any[]>;
+    treeControl: FlatTreeControl<KbqTreeSelectFlatNode>;
+    treeFlattener: KbqTreeFlattener<KbqTreeSelectNode, KbqTreeSelectFlatNode>;
+    dataSource: KbqTreeFlatDataSource<KbqTreeSelectNode, KbqTreeSelectFlatNode>;
+    template: any;
+    /** @docs-private */
+    select: KbqTreeSelect;
+    /** @docs-private */
+    tree: KbqTreeSelection;
+    /** selected value */
+    get selected(): KbqSelectValue[] | null;
+    /** Whether the current pipe is empty. */
+    get isEmpty(): boolean;
+    get selectAllCheckboxState(): KbqPseudoCheckboxState;
+    get numberOfSelectedLeaves(): number;
+    /** true if all options selected */
+    get allOptionsSelected(): boolean;
+    /** true if all visible options selected */
+    get allVisibleOptionsSelected(): boolean;
+    constructor();
+    ngOnInit(): void;
+    isNodeHasChild(_: number, nodeData: any): any;
+    isNodeSelectAll(_: number, nodeData: any): boolean;
+    onSelect({ value: option }: {
+        value: any;
+    }): void;
+    searchKeydownHandler(): void;
+    toggleSelectAllNode(): void;
+    /** updates values for selection and value template */
+    updateTemplates: (templates: KbqPipeTemplate[] | null) => void;
+    /** opens select */
+    open(): void;
+    onOpen(): void;
+    onClose(): void;
+    private toggleParents;
+    private transformer;
+    private getLevel;
+    private isExpandable;
+    private getChildren;
+    private getValue;
+    private getViewValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeMultiTreeSelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeMultiTreeSelectComponent, "kbq-pipe-multi-tree-select", never, {}, {}, never, never, true, never>;
+}

package/filter-bar/pipes/pipe-multi-tree-select.scss

@@ -0,0 +1,19 @@
+.kbq-pipe__multi-tree-select {
+    .kbq-pipe__value {
+        margin-left: var(--kbq-size-xxs);
+    }
+
+    .kbq-badge {
+        align-self: center;
+
+        margin-left: var(--kbq-size-xs);
+    }
+
+    & .kbq-tree-select .kbq-select__trigger {
+        height: unset;
+    }
+}
+
+.kbq-pipe-multi-tree-select__panel .kbq-select__content {
+    max-height: 404px;
+}

package/filter-bar/pipes/pipe-readonly.scss

@@ -0,0 +1,18 @@
+.kbq-pipe.kbq-pipe__readonly {
+    & .kbq-button {
+        cursor: default;
+    }
+
+    &:not(.kbq-pipe_cleanable) {
+        & .kbq-button-icon.kbq-button_filled:not(:hover),
+        & .kbq-button.kbq-button_filled,
+        & .kbq-button.kbq-button_filled:hover {
+            background: var(--kbq-states-background-disabled);
+        }
+
+        & .kbq-pipe__name,
+        & .kbq-pipe__value {
+            color: var(--kbq-states-foreground-disabled);
+        }
+    }
+}

package/filter-bar/pipes/pipe-select.d.ts

@@ -1,11 +1,11 @@
-import { OnInit } from '@angular/core';
+import { AfterViewInit, OnInit } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { KbqSelect } from '@koobiq/components/select';
 import { Observable } from 'rxjs';
 import { KbqSelectValue } from '../filter-bar.types';
 import { KbqBasePipe } from './base-pipe';
 import * as i0 from "@angular/core";
-export declare class KbqPipeSelectComponent extends KbqBasePipe<KbqSelectValue> implements OnInit {
+export declare class KbqPipeSelectComponent extends KbqBasePipe<KbqSelectValue> implements AfterViewInit, OnInit {
     /** control for search options */
     searchControl: UntypedFormControl;
     /** filtered by search options */
@@ -16,7 +16,10 @@ export declare class KbqPipeSelectComponent extends KbqBasePipe<KbqSelectValue>
     get selected(): KbqSelectValue | null;
     /** Whether the current pipe is empty. */
     get isEmpty(): boolean;
+    /** @docs-private */
     ngOnInit(): void;
+    /** @docs-private */
+    ngAfterViewInit(): void;
     onSelect(item: KbqSelectValue): void;
     /** Comparator of selected options */
     compareByValue: (o1: any, o2: any) => boolean;

package/filter-bar/pipes/pipe-state.d.ts

@@ -11,8 +11,8 @@ export declare class KbqPipeState<T> implements OnInit {
      * @docs-private */
     private readonly filterBar;
     /** calculates and updates styles of button from pipe state */
-    set state(pipe: T | null);
     get state(): T | null;
+    set state(pipe: T | null);
     private _state;
     ngOnInit(): void;
     private updateState;

package/filter-bar/pipes/pipe-tree-select.d.ts

@@ -0,0 +1,41 @@
+import { OnInit } from '@angular/core';
+import { UntypedFormControl } from '@angular/forms';
+import { FlatTreeControl, KbqTreeFlatDataSource, KbqTreeFlattener, KbqTreeOption } from '@koobiq/components/tree';
+import { KbqTreeSelect } from '@koobiq/components/tree-select';
+import { Observable } from 'rxjs';
+import { KbqPipeTemplate, KbqSelectValue, KbqTreeSelectFlatNode, KbqTreeSelectNode } from '../filter-bar.types';
+import { KbqBasePipe } from './base-pipe';
+import * as i0 from "@angular/core";
+export declare class KbqPipeTreeSelectComponent extends KbqBasePipe<KbqSelectValue> implements OnInit {
+    /** control for search options */
+    searchControl: UntypedFormControl;
+    /** filtered by search options */
+    filteredOptions: Observable<any[]>;
+    treeControl: FlatTreeControl<KbqTreeSelectFlatNode>;
+    treeFlattener: KbqTreeFlattener<KbqTreeSelectNode, KbqTreeSelectFlatNode>;
+    dataSource: KbqTreeFlatDataSource<KbqTreeSelectNode, KbqTreeSelectFlatNode>;
+    template: any;
+    /** @docs-private */
+    select: KbqTreeSelect;
+    /** selected value */
+    get selected(): KbqSelectValue | null;
+    /** Whether the current pipe is empty. */
+    get isEmpty(): boolean;
+    constructor();
+    ngOnInit(): void;
+    hasChild(_: number, nodeData: any): any;
+    onSelect(item: KbqTreeOption): void;
+    /** updates values for selection and value template */
+    updateTemplates: (templates: KbqPipeTemplate[] | null) => void;
+    /** opens select */
+    open(): void;
+    onOpen(): void;
+    private transformer;
+    private getLevel;
+    private isExpandable;
+    private getChildren;
+    private getValue;
+    private getViewValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeTreeSelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeTreeSelectComponent, "kbq-pipe-tree-select", never, {}, {}, never, never, true, never>;
+}

package/filter-bar/pipes/pipe-tree-select.scss

@@ -0,0 +1,9 @@
+.kbq-pipe-tree-select__panel .kbq-tree-select__content {
+    max-height: 404px;
+}
+
+.kbq-pipe__tree-select {
+    .kbq-select__trigger {
+        height: unset;
+    }
+}

package/filter-bar/public-api.d.ts

@@ -18,3 +18,4 @@ export * from './pipes/pipe-select';
 export * from './pipes/pipe-state';
 export * from './pipes/pipe-text';
 export * from './pipes/pipe-title';
+export * from './pipes/pipe-tree-select';

package/form-field/_form-field-theme.scss

@@ -82,18 +82,18 @@
                 -webkit-text-fill-color: var(--kbq-form-field-states-disabled-text);
             }
         }
-    }
 
-    .kbq-form-field__prefix,
-    .kbq-form-field__suffix {
-        .kbq-icon.kbq-empty {
-            color: var(--kbq-icon-contrast-fade);
+        .kbq-form-field__prefix,
+        .kbq-form-field__suffix {
+            .kbq-icon.kbq-empty {
+                color: var(--kbq-icon-contrast-fade);
+            }
         }
-    }
 
-    .kbq-form-field__hint {
-        & > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
-            color: var(--kbq-form-field-hint-text);
+        .kbq-form-field__hint {
+            & > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
+                color: var(--kbq-form-field-hint-text);
+            }
         }
     }
 }
@@ -101,9 +101,9 @@
 @mixin kbq-form-field-typography() {
     .kbq-form-field {
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
-    }
 
-    .kbq-form-field__hint > .kbq-hint:not(.kbq-password-hint) .kbq-hint__text {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
+        .kbq-form-field__hint > .kbq-hint:not(.kbq-password-hint) .kbq-hint__text {
+            @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
+        }
     }
 }