@koobiq/components 16.0.0-beta.1 → 16.0.0-beta.10

package/tooltip/tooltip.component.d.ts

@@ -30,12 +30,12 @@ export declare class KbqTooltipComponent extends KbqPopUp {
 }
 export declare const KBQ_TOOLTIP_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 /** @docs-private */
-export declare function mcTooltipScrollStrategyFactory(overlay: Overlay): () => ScrollStrategy;
+export declare function kbqTooltipScrollStrategyFactory(overlay: Overlay): () => ScrollStrategy;
 /** @docs-private */
 export declare const KBQ_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER: {
     provide: InjectionToken<() => ScrollStrategy>;
     deps: (typeof Overlay)[];
-    useFactory: typeof mcTooltipScrollStrategyFactory;
+    useFactory: typeof kbqTooltipScrollStrategyFactory;
 };
 export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> {
     get tooltipVisible(): boolean;
@@ -70,7 +70,7 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     getOverlayHandleComponentType(): Type<KbqTooltipComponent>;
     updateClassMap(newPlacement?: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTooltipTrigger, [null, null, null, null, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[mcTooltip]", ["mcTooltip"], { "tooltipVisible": { "alias": "mcVisible"; "required": false; }; "tooltipPlacement": { "alias": "mcPlacement"; "required": false; }; "tooltipPlacementPriority": { "alias": "mcPlacementPriority"; "required": false; }; "content": { "alias": "mcTooltip"; "required": false; }; "disabled": { "alias": "mcTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "mcEnterDelay"; "required": false; }; "leaveDelay": { "alias": "mcLeaveDelay"; "required": false; }; "trigger": { "alias": "mcTrigger"; "required": false; }; "customClass": { "alias": "mcTooltipClass"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, { "placementChange": "mcPlacementChange"; "visibleChange": "mcVisibleChange"; }, never, never, false, never>;
+    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": "mcEnterDelay"; "required": false; }; "leaveDelay": { "alias": "mcLeaveDelay"; "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>;
@@ -78,7 +78,7 @@ export declare class KbqWarningTooltipTrigger extends KbqTooltipTrigger {
     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; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqWarningTooltipTrigger, "[mcWarningTooltip]", ["mcWarningTooltip"], { "content": { "alias": "mcWarningTooltip"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqWarningTooltipTrigger, "[kbqWarningTooltip]", ["kbqWarningTooltip"], { "content": { "alias": "kbqWarningTooltip"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class KbqExtendedTooltipTrigger extends KbqTooltipTrigger {
     get content(): string | TemplateRef<any>;
@@ -90,5 +90,5 @@ export declare class KbqExtendedTooltipTrigger extends KbqTooltipTrigger {
     constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality);
     updateData(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqExtendedTooltipTrigger, [null, null, null, null, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqExtendedTooltipTrigger, "[mcExtendedTooltip]", ["mcExtendedTooltip"], { "content": { "alias": "mcExtendedTooltip"; "required": false; }; "header": { "alias": "mcTooltipHeader"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqExtendedTooltipTrigger, "[kbqExtendedTooltip]", ["kbqExtendedTooltip"], { "content": { "alias": "kbqExtendedTooltip"; "required": false; }; "header": { "alias": "kbqTooltipHeader"; "required": false; }; }, {}, never, never, false, never>;
 }

package/tree/_tree-theme.scss

@@ -5,65 +5,77 @@
 @use '../core/styles/typography/typography-utils' as *;
 
 
-@mixin kbq-tree-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
+@mixin kbq-tree-option($state) {
+    background: map.get($state, container-background);
+
+    .kbq-option-text {
+        color: map.get($state, text);
+    }
+
+    // todo выглядит как баг
+    //.kbq-icon {
+    //    color: map.get($state, icon);
+    //}
+
+    .kbq-tree-node-toggle .kbq-icon {
+        color: map.get($state, tree-toggle);
+    }
 
-    $secondary: map.get($theme, secondary);
+    .kbq-option-action .kbq-icon {
+        color: map.get($state, action-button);
+    }
+
+    .kbq-option-caption {
+        color: map.get($state, caption);
+    }
+}
 
-    $is-dark: map.get($theme, is-dark);
 
+@mixin kbq-tree-theme($theme) {
     .kbq-tree-selection:focus {
         outline: none;
     }
 
     .kbq-tree-option {
-        color: map.get($foreground, text);
-
-        &:hover {
-            background-color: map.get($background, overlay-hover);
-        }
+        $tree-item: map.get(map.get($theme, components), tree-item);
 
-        &.kbq-focused {
-            border-color: map.get(map.get($theme, states), focused-color);
+        @include kbq-tree-option(map.get($tree-item, default));
 
-            & .kbq-tree-node-toggle:not([disabled]) .kbq-icon {
-                color: kbq-color($secondary, if($is-dark, 70, 30));
-            }
+        &:hover:not(.kbq-disabled) {
+            @include kbq-tree-option(map.get($tree-item, hover));
         }
 
-        &.kbq-selected {
-            background: map.get(map.get($theme, states), selected-color);
+        &.kbq-focused,
+        &.kbq-active {
+            border-color: map.get(map.get($tree-item, focused), focus-outline);
         }
 
-        &[disabled] {
-            background-color: transparent;
-
-            color: map.get($foreground, text-disabled);
-        }
-    }
+        &.kbq-selected {
+            @include kbq-tree-option(map.get($tree-item, selected));
 
-    /* stylelint-disable no-descending-specificity */
-    .kbq-tree-node-toggle {
-        & .kbq-icon {
-            color: kbq-color($secondary, 10);
+            &:hover:not(.kbq-disabled) {
+                @include kbq-tree-option(map.get($tree-item, selected-hover));
+            }
         }
 
-        &:hover .kbq-icon {
-            color: kbq-color($secondary, if($is-dark, 70, 30));
-        }
+        &.kbq-disabled {
+            @include kbq-tree-option(map.get($tree-item, disabled));
 
-        &[disabled] .kbq-icon {
-            color: kbq-color($secondary, if($is-dark, 30, 70));
+            & .kbq-icon {
+                cursor: default;
+            }
         }
     }
-    /* stylelint-enable no-descending-specificity */
 }
 
 @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-node));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, tree-font-text));
+    }
+
+    .kbq-tree-option-caption {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, tree-font-caption));
     }
 }

package/tree/control/base-tree-control.d.ts

@@ -7,7 +7,7 @@ export declare abstract class BaseTreeControl<T> implements TreeControl<T> {
     /** A selection model with multi-selection to track expansion status. */
     expansionModel: SelectionModel<T>;
     filterModel: SelectionModel<T>;
-    filterValue: BehaviorSubject<string>;
+    filterValue: BehaviorSubject<string | null>;
     /** Get depth of a given data node, return the level number. This is for flat tree node. */
     getLevel: (dataNode: T) => number;
     /**

package/tree/control/tree-control.d.ts

@@ -11,7 +11,7 @@ export interface TreeControl<T> {
     /** The expansion model */
     expansionModel: SelectionModel<T>;
     filterModel: SelectionModel<T>;
-    filterValue: BehaviorSubject<string>;
+    filterValue: BehaviorSubject<string | null>;
     /** Get depth of a given data node, return the level number. This is for flat tree node. */
     getLevel(dataNode: T): number;
     /**

package/tree/node.d.ts

@@ -30,5 +30,5 @@ export declare class KbqTreeNodeDef<T> {
     /** @docs-private */
     constructor(template: TemplateRef<any>);
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeNodeDef<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeNodeDef<any>, "[mcTreeNodeDef]", never, { "when": { "alias": "mcTreeNodeDefWhen"; "required": false; }; "data": { "alias": "mcTreeNode"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeNodeDef<any>, "[kbqTreeNodeDef]", never, { "when": { "alias": "kbqTreeNodeDefWhen"; "required": false; }; "data": { "alias": "kbqTreeNode"; "required": false; }; }, {}, never, never, false, never>;
 }

package/tree/outlet.d.ts

@@ -5,5 +5,5 @@ export declare class KbqTreeNodeOutlet {
     changeDetectorRef: ChangeDetectorRef;
     constructor(viewContainer: ViewContainerRef, changeDetectorRef: ChangeDetectorRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeNodeOutlet, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeNodeOutlet, "[mcTreeNodeOutlet]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeNodeOutlet, "[kbqTreeNodeOutlet]", never, {}, {}, never, never, false, never>;
 }

package/tree/padding.directive.d.ts

@@ -43,5 +43,5 @@ export declare class KbqTreeNodePadding<T> implements OnDestroy, AfterViewInit {
     private setIndentInput;
     private setPadding;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeNodePadding<any>, [null, null, null, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeNodePadding<any>, "[mcTreeNodePadding]", ["mcTreeNodePadding"], { "indent": { "alias": "mcTreeNodePaddingIndent"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeNodePadding<any>, "[kbqTreeNodePadding]", ["kbqTreeNodePadding"], { "indent": { "alias": "kbqTreeNodePaddingIndent"; "required": false; }; }, {}, never, never, false, never>;
 }

package/tree/toggle.d.ts

@@ -18,13 +18,13 @@ export declare class KbqTreeNodeToggleBaseDirective<T> extends KbqTreeNodeToggle
     constructor(tree: KbqTreeBase<T>, treeNode: KbqTreeNode<T>);
     toggle(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeNodeToggleBaseDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeNodeToggleBaseDirective<any>, never, never, { "node": { "alias": "node"; "required": false; }; "recursive": { "alias": "mcTreeNodeToggleRecursive"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeNodeToggleBaseDirective<any>, never, never, { "node": { "alias": "node"; "required": false; }; "recursive": { "alias": "kbqTreeNodeToggleRecursive"; "required": false; }; }, {}, never, never, false, never>;
 }
 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", ["mcTreeNodeToggle"], { "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeNodeToggleComponent<any>, "kbq-tree-node-toggle", ["kbqTreeNodeToggle"], { "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class KbqTreeNodeToggleDirective<T> extends KbqTreeNodeToggleBaseDirective<T> {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeNodeToggleDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeNodeToggleDirective<any>, "[kbq-tree-node-toggle], [mcTreeNodeToggle]", ["mcTreeNodeToggle"], {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeNodeToggleDirective<any>, "[kbq-tree-node-toggle], [kbqTreeNodeToggle]", ["kbqTreeNodeToggle"], {}, {}, never, never, false, never>;
 }

package/tree/tree-base.d.ts

@@ -93,5 +93,5 @@ export declare class KbqTreeNode<T> implements IFocusableOption, OnDestroy {
     ngOnDestroy(): void;
     focus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeNode<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeNode<any>, "kbq-tree-node", ["mcTreeNode"], {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeNode<any>, "kbq-tree-node", ["kbqTreeNode"], {}, {}, never, never, false, never>;
 }

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

@@ -27,7 +27,6 @@ export declare class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements
     readonly onBlur: Subject<KbqTreeOptionEvent>;
     preventBlur: boolean;
     parentTextElement: ElementRef;
-    toggleWrapper: ElementRef;
     toggleElementDirective: KbqTreeNodeToggleBaseDirective<KbqTreeOption>;
     toggleElementComponent: KbqTreeNodeToggleBaseDirective<KbqTreeOption>;
     pseudoCheckbox: KbqPseudoCheckbox;
@@ -76,5 +75,5 @@ export declare class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements
     getHostElement(): HTMLElement;
     markForCheck(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeOption, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeOption, "kbq-tree-option", ["mcTreeOption"], { "checkboxThirdState": { "alias": "checkboxThirdState"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; }, { "onSelectionChange": "onSelectionChange"; }, ["toggleElementDirective", "toggleElementComponent", "pseudoCheckbox", "actionButton", "tooltipTrigger", "dropdownTrigger"], ["kbq-tree-node-toggle, [kbq-tree-node-toggle], [mcTreeNodeToggle]", "kbq-pseudo-checkbox", "kbq-checkbox", "[kbq-icon]", "kbq-progress-spinner", "*", "kbq-option-action"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeOption, "kbq-tree-option", ["kbqTreeOption"], { "checkboxThirdState": { "alias": "checkboxThirdState"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; }, { "onSelectionChange": "onSelectionChange"; }, ["toggleElementDirective", "toggleElementComponent", "pseudoCheckbox", "actionButton", "tooltipTrigger", "dropdownTrigger"], ["kbq-tree-node-toggle, [kbq-tree-node-toggle], [kbqTreeNodeToggle]", "kbq-pseudo-checkbox", "kbq-checkbox", "[kbq-icon]", "kbq-progress-spinner", "*", "kbq-option-action"], false, never>;
 }

package/tree/tree-option.scss

@@ -1,65 +1,78 @@
 @use 'sass:meta';
 @use 'sass:map';
 
+@use '../core/styles/common';
 @use '../core/styles/tokens';
 
 
 $tokens: meta.module-variables(tokens) !default;
 
+
 .kbq-tree-option {
+    @include common.kbq-no-select;
+
+    $padding-vertical: map.get($tokens, tree-size-container-padding-vertical);
+    $padding-right: map.get($tokens, tree-size-container-padding-right);
+
+    $outline-width: map.get($tokens, tree-size-container-focus-outline-width);
+
     box-sizing: border-box;
 
     display: flex;
     align-items: center;
 
-    height: var(--kbq-tree-size-node-height, map.get($tokens, tree-size-node-height));
+    min-height: 32px;
 
     word-wrap: break-word;
 
-    border: 2px solid transparent;
+    border-width: var(--kbq-tree-size-container-focus-outline-width, $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)
+    );
+    padding-right: calc(
+        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)
+    );
+
+    gap: var(
+        --kbq-tree-size-container-content-gap-horizontal, map.get($tokens, tree-size-container-content-gap-horizontal)
+    );
 
     & .kbq-option-text {
-        display: inline-block;
-        flex-grow: 1;
-
-        overflow: hidden;
-
-        white-space: nowrap;
-        text-overflow: ellipsis;
+        $tokens: meta.module-variables(tokens) !default;
 
-        margin-right: var(--kbq-tree-size-padding-right, map.get($tokens, tree-size-padding-right));
-    }
+        @include common.kbq-line-wrapper-base();
+        display: inline-block;
 
-    & > .kbq-icon, > .toggle-wrapper > .kbq-icon {
-        margin-right: var(--kbq-tree-size-icon-padding, map.get($tokens, tree-size-icon-padding));
+        @include common.kbq-truncate-line();
 
-        cursor: pointer;
-    }
-
-    & > .kbq-progress-spinner {
-        margin-right: 8px;
+        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));
     }
 
     &:focus {
         outline: none;
     }
 
-    &:not([disabled]) {
+    &:not(.kbq-disabled) {
         cursor: pointer;
     }
 
-    & > .kbq-pseudo-checkbox,
-    & > .kbq-checkbox {
-        margin-right: var(--kbq-tree-size-icon-padding, map.get($tokens, tree-size-icon-padding));
-    }
-
     & .kbq-option-action {
         display: none;
     }
 
-    &:not([disabled]):hover,
-    &:not([disabled]).kbq-focused,
-    &:not([disabled]).kbq-action-button-focused {
+    &:not(.kbq-disabled):hover,
+    &:not(.kbq-disabled).kbq-focused,
+    &:not(.kbq-disabled).kbq-action-button-focused {
         & .kbq-option-action {
             display: flex;
         }

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

@@ -129,6 +129,6 @@ export declare class KbqTreeSelection extends KbqTreeBase<any> implements Contro
     private canDeselectLast;
     private isFocusReceivedFromNestedOption;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelection, [null, null, null, null, { attribute: "multiple"; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelection, "kbq-tree-selection", ["mcTreeSelection"], { "treeControl": { "alias": "treeControl"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "noUnselectLast": { "alias": "noUnselectLast"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "navigationChange": "navigationChange"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; "onCopy": "onCopy"; }, ["unorderedOptions"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelection, "kbq-tree-selection", ["kbqTreeSelection"], { "treeControl": { "alias": "treeControl"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "noUnselectLast": { "alias": "noUnselectLast"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "navigationChange": "navigationChange"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; "onCopy": "onCopy"; }, ["unorderedOptions"], never, false, never>;
 }
 export {};

package/tree/tree.d.ts

@@ -2,5 +2,5 @@ import { KbqTreeBase } from './tree-base';
 import * as i0 from "@angular/core";
 export declare class KbqTree extends KbqTreeBase<any> {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTree, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTree, "kbq-tree", ["mcTree"], {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTree, "kbq-tree", ["kbqTree"], {}, {}, never, never, false, never>;
 }

package/tree/tree.module.d.ts

@@ -9,8 +9,9 @@ import * as i7 from "./tree-option.component";
 import * as i8 from "./toggle";
 import * as i9 from "@angular/common";
 import * as i10 from "@koobiq/components/core";
+import * as i11 from "@koobiq/components/icon";
 export declare class KbqTreeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTreeModule, [typeof i1.KbqTreeNodeOutlet, typeof i2.KbqTreeNodeDef, typeof i3.KbqTreeNode, typeof i4.KbqTreeNodePadding, typeof i5.KbqTree, typeof i6.KbqTreeSelection, typeof i7.KbqTreeOption, typeof i8.KbqTreeNodeToggleComponent, typeof i8.KbqTreeNodeToggleDirective], [typeof i9.CommonModule, typeof i10.KbqPseudoCheckboxModule], [typeof i1.KbqTreeNodeOutlet, typeof i2.KbqTreeNodeDef, typeof i3.KbqTreeNode, typeof i4.KbqTreeNodePadding, typeof i5.KbqTree, typeof i6.KbqTreeSelection, typeof i7.KbqTreeOption, typeof i8.KbqTreeNodeToggleComponent, typeof i8.KbqTreeNodeToggleDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTreeModule, [typeof i1.KbqTreeNodeOutlet, typeof i2.KbqTreeNodeDef, typeof i3.KbqTreeNode, typeof i4.KbqTreeNodePadding, typeof i5.KbqTree, typeof i6.KbqTreeSelection, typeof i7.KbqTreeOption, typeof i8.KbqTreeNodeToggleComponent, typeof i8.KbqTreeNodeToggleDirective], [typeof i9.CommonModule, typeof i10.KbqPseudoCheckboxModule, typeof i11.KbqIconModule], [typeof i1.KbqTreeNodeOutlet, typeof i2.KbqTreeNodeDef, typeof i3.KbqTreeNode, typeof i4.KbqTreeNodePadding, typeof i5.KbqTree, typeof i6.KbqTreeSelection, typeof i7.KbqTreeOption, typeof i8.KbqTreeNodeToggleComponent, typeof i8.KbqTreeNodeToggleDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTreeModule>;
 }

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

@@ -10,8 +10,11 @@
     $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);
+
     .kbq-tree-select {
-        color: map.get($foreground, text);
+        color: map.get($foreground, contrast);
 
         &.ng-invalid {
             color: kbq-color($error);
@@ -22,12 +25,19 @@
         }
     }
 
-    .kbq-tree-select__placeholder {
+    .kbq-select__placeholder {
+        text-overflow: ellipsis;
+
         color: map.get($foreground, text-disabled);
     }
 
     .kbq-tree-select__panel {
-        @include popup-params($theme);
+        box-shadow: map.get($select-panel, shadow);
+        background: map.get($select-panel, background);
+
+        & .kbq-tree-select__footer {
+            border-color: map.get($divider, color);
+        }
     }
 }
 

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

@@ -1,11 +1,11 @@
 import { Directionality } from '@angular/cdk/bidi';
 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 } from '@angular/core';
+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 { KbqCleaner, KbqFormField, KbqFormFieldControl } from '@koobiq/components/form-field';
-import { KbqSelectSearch } from '@koobiq/components/select';
+import { KbqSelectMatcher, KbqSelectSearch } from '@koobiq/components/select';
 import { KbqTag } from '@koobiq/components/tags';
 import { KbqTreeSelection, KbqTreeOption } from '@koobiq/components/tree';
 import { Observable, Subject } from 'rxjs';
@@ -28,7 +28,7 @@ export declare class KbqTreeSelectTrigger {
 }
 export declare class KbqTreeSelectFooter {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelectFooter, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeSelectFooter, "kbq-tree-select-footer, [kbq-tree-select-footer], [kbq-tree-selection-footer]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeSelectFooter, "kbq-tree-select-footer, [kbq-tree-select-footer]", never, {}, {}, never, never, false, never>;
 }
 /** @docs-private */
 declare class KbqTreeSelectBase {
@@ -91,6 +91,8 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     cleaner: KbqCleaner;
     /** User-supplied override of the trigger element. */
     customTrigger: KbqTreeSelectTrigger;
+    customMatcher: KbqSelectMatcher;
+    customTagTemplateRef: TemplateRef<any>;
     tree: KbqTreeSelection;
     search: KbqSelectSearch;
     hiddenItemsText: string;
@@ -278,6 +280,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", ["mcTreeSelect"], { "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", "tree", "search"], ["kbq-tree-select-trigger", "kbq-cleaner", "[mcSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-tree-select-footer,[kbq-tree-select-footer],[kbq-tree-selection-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-tree-select-trigger", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-tree-select-footer,[kbq-tree-select-footer]"], false, never>;
 }
 export {};