@koobiq/components 18.31.0 → 18.33.0

package/select/select.component.d.ts

@@ -2,7 +2,7 @@ import { Directionality } from '@angular/cdk/bidi';
 import { SelectionModel } from '@angular/cdk/collections';
 import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedPosition, OverlayContainer } from '@angular/cdk/overlay';
 import { CdkVirtualForOf } from '@angular/cdk/scrolling';
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, OnInit, Provider, QueryList, Renderer2, TemplateRef } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DestroyRef, DoCheck, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, OnInit, Provider, QueryList, Renderer2, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { ActiveDescendantKeyManager } from '@koobiq/cdk/a11y';
 import { CanUpdateErrorState, ErrorStateMatcher, KbqAbstractSelect, KbqComponentColors, KbqLocaleService, KbqOptgroup, KbqOption, KbqOptionBase, KbqOptionSelectionChange, KbqSelectMatcher, KbqSelectSearch, KbqSelectTrigger } from '@koobiq/components/core';
@@ -50,6 +50,8 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     ngControl: NgControl;
     private readonly scrollStrategyFactory;
     protected localeService?: KbqLocaleService | undefined;
+    /** @docs-private */
+    protected readonly destroyRef: DestroyRef;
     protected readonly isBrowser: boolean;
     protected readonly defaultOptions: Partial<{
         /**
@@ -58,6 +60,7 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
          */
         panelWidth: KbqSelectPanelWidth;
     }> | null;
+    private readonly window;
     /** Whether the component is in an error state. */
     errorState: boolean;
     /**
@@ -130,6 +133,10 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
      * Follows the same logic as `Array.prototype.sort`.
      */
     sortComparator: (a: KbqOptionBase, b: KbqOptionBase, options: KbqOptionBase[]) => number;
+    /**
+     * Whether to use a multiline matcher or not. Default is false
+     */
+    multiline: boolean;
     /** Combined stream of all of the child options' change events. */
     readonly optionSelectionChanges: Observable<KbqOptionSelectionChange>;
     /** Event emitted when the select panel has been toggled. */
@@ -209,6 +216,8 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     get firstFiltered(): boolean;
     /** @docs-private */
     get colorForState(): KbqComponentColors;
+    /** Whether multiple choice is enabled or not. True if multiple or multiline */
+    get multiSelection(): boolean;
     private closeSubscription;
     /** The scroll position of the overlay panel, calculated to center the selected option. */
     private scrollTop;
@@ -221,7 +230,6 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     protected overlayMinWidth: string | number;
     /** Origin for the overlay panel. */
     protected overlayOrigin?: CdkOverlayOrigin | ElementRef;
-    private readonly destroyRef;
     constructor(_changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _renderer: Renderer2, defaultErrorStateMatcher: ErrorStateMatcher, elementRef: ElementRef, overlayContainer: OverlayContainer, _dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, parentFormField: KbqFormField, ngControl: NgControl, scrollStrategyFactory: any, localeService?: KbqLocaleService | undefined);
     ngOnInit(): void;
     ngAfterContentInit(): void;
@@ -349,7 +357,8 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     private getTotalVisibleItems;
     private buildTriggerClone;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; host: true; }, { optional: true; self: true; }, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "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; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
+    static ngAcceptInputType_multiline: unknown;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_panelMinWidth: unknown;
     static ngAcceptInputType_tabIndex: unknown;

package/sidepanel/sidepanel.module.d.ts

@@ -3,13 +3,12 @@ import * as i1 from "./sidepanel-container.component";
 import * as i2 from "./sidepanel-directives";
 import * as i3 from "@angular/cdk/overlay";
 import * as i4 from "@angular/cdk/portal";
-import * as i5 from "@koobiq/components/core";
-import * as i6 from "@koobiq/components/button";
-import * as i7 from "@koobiq/components/icon";
-import * as i8 from "@koobiq/components/title";
-import * as i9 from "@angular/cdk/a11y";
+import * as i5 from "@koobiq/components/button";
+import * as i6 from "@koobiq/components/icon";
+import * as i7 from "@koobiq/components/title";
+import * as i8 from "@angular/cdk/a11y";
 export declare class KbqSidepanelModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSidepanelModule, [typeof i1.KbqSidepanelContainerComponent, typeof i2.KbqSidepanelClose, typeof i2.KbqSidepanelHeader, typeof i2.KbqSidepanelBody, typeof i2.KbqSidepanelFooter, typeof i2.KbqSidepanelActions], [typeof i3.OverlayModule, typeof i4.PortalModule, typeof i5.KbqCommonModule, typeof i6.KbqButtonModule, typeof i7.KbqIconModule, typeof i8.KbqTitleModule, typeof i9.A11yModule], [typeof i1.KbqSidepanelContainerComponent, typeof i2.KbqSidepanelClose, typeof i2.KbqSidepanelHeader, typeof i2.KbqSidepanelBody, typeof i2.KbqSidepanelFooter, typeof i2.KbqSidepanelActions]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSidepanelModule, [typeof i1.KbqSidepanelContainerComponent, typeof i2.KbqSidepanelClose, typeof i2.KbqSidepanelHeader, typeof i2.KbqSidepanelBody, typeof i2.KbqSidepanelFooter, typeof i2.KbqSidepanelActions], [typeof i3.OverlayModule, typeof i4.PortalModule, typeof i5.KbqButtonModule, typeof i6.KbqIconModule, typeof i7.KbqTitleModule, typeof i8.A11yModule], [typeof i1.KbqSidepanelContainerComponent, typeof i2.KbqSidepanelClose, typeof i2.KbqSidepanelHeader, typeof i2.KbqSidepanelBody, typeof i2.KbqSidepanelFooter, typeof i2.KbqSidepanelActions]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqSidepanelModule>;
 }

package/splitter/splitter.component.d.ts

@@ -112,6 +112,7 @@ export declare class KbqSplitterAreaDirective implements AfterViewInit, OnDestro
     private renderer;
     private splitter;
     sizeChange: EventEmitter<number>;
+    private readonly window;
     constructor(elementRef: ElementRef, renderer: Renderer2, splitter: KbqSplitterComponent);
     isResizing(): boolean;
     disableFlex(): void;

package/tabs/paginated-tab-header.d.ts

@@ -76,6 +76,7 @@ export declare abstract class KbqPaginatedTabHeader implements AfterContentCheck
     private readonly ngZone;
     private readonly platform;
     private readonly dir;
+    private readonly window;
     constructor();
     /** Called when the user has selected an item via the keyboard. */
     ngAfterViewInit(): void;

package/tabs/tabs.module.d.ts

@@ -9,13 +9,12 @@ import * as i7 from "./tab-content.directive";
 import * as i8 from "@angular/cdk/portal";
 import * as i9 from "@angular/cdk/a11y";
 import * as i10 from "@angular/cdk/scrolling";
-import * as i11 from "@koobiq/components/core";
-import * as i12 from "@koobiq/components/icon";
-import * as i13 from "@koobiq/components/tooltip";
-import * as i14 from "@angular/cdk/observers";
-import * as i15 from "./tab-nav-bar";
+import * as i11 from "@koobiq/components/icon";
+import * as i12 from "@koobiq/components/tooltip";
+import * as i13 from "@angular/cdk/observers";
+import * as i14 from "./tab-nav-bar";
 export declare class KbqTabsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTabsModule, [typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i4.KbqTabLabelWrapper, typeof i5.KbqTabBody, typeof i5.KbqTabBodyPortal, typeof i6.KbqTabHeader, typeof i7.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler], [typeof i8.PortalModule, typeof i9.A11yModule, typeof i10.CdkScrollableModule, typeof i11.KbqCommonModule, typeof i12.KbqIconModule, typeof i13.KbqToolTipModule, typeof i14.CdkObserveContent, typeof i15.KbqTabNavBar, typeof i15.KbqTabLink, typeof i15.KbqTabNavPanel], [typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i4.KbqTabLabelWrapper, typeof i5.KbqTabBody, typeof i5.KbqTabBodyPortal, typeof i6.KbqTabHeader, typeof i7.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler, typeof i15.KbqTabNavBar, typeof i15.KbqTabLink, typeof i15.KbqTabNavPanel]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTabsModule, [typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i4.KbqTabLabelWrapper, typeof i5.KbqTabBody, typeof i5.KbqTabBodyPortal, typeof i6.KbqTabHeader, typeof i7.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler], [typeof i8.PortalModule, typeof i9.A11yModule, typeof i10.CdkScrollableModule, typeof i11.KbqIconModule, typeof i12.KbqToolTipModule, typeof i13.CdkObserveContent, typeof i14.KbqTabNavBar, typeof i14.KbqTabLink, typeof i14.KbqTabNavPanel], [typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i4.KbqTabLabelWrapper, typeof i5.KbqTabBody, typeof i5.KbqTabBodyPortal, typeof i6.KbqTabHeader, typeof i7.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler, typeof i14.KbqTabNavBar, typeof i14.KbqTabLink, typeof i14.KbqTabNavPanel]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTabsModule>;
 }

package/tags/tag-list.scss

@@ -57,9 +57,13 @@
 
 .kbq-form-field-type-tag-list {
     & .kbq-form-field__container {
-        padding: kbq-difference-series-css-variables([tag-input-size-padding-vertical, form-field-size-border-width])
-            var(--kbq-tag-input-size-padding-right)
-            kbq-difference-series-css-variables([tag-input-size-padding-vertical, form-field-size-border-width])
-            var(--kbq-tag-input-size-padding-left);
+        padding-top: kbq-difference-series-css-variables(
+            [tag-input-size-padding-vertical,
+            form-field-size-border-width]
+        );
+        padding-bottom: kbq-difference-series-css-variables(
+            [tag-input-size-padding-vertical,
+            form-field-size-border-width]
+        );
     }
 }

package/textarea/textarea.component.d.ts

@@ -23,6 +23,7 @@ export declare class KbqTextarea implements KbqFormFieldControl<any>, OnInit, On
     set canGrow(value: boolean);
     protected readonly isBrowser: boolean;
     protected readonly renderer: Renderer2;
+    private readonly window;
     private _canGrow;
     /** Maximum number of lines to which the textarea will grow. Default unlimited */
     maxRows: number;

package/textarea/textarea.module.d.ts

@@ -1,10 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./textarea.component";
 import * as i2 from "@angular/cdk/a11y";
-import * as i3 from "@koobiq/components/core";
-import * as i4 from "@angular/forms";
+import * as i3 from "@angular/forms";
 export declare class KbqTextareaModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTextareaModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTextareaModule, [typeof i1.KbqTextarea], [typeof i2.A11yModule, typeof i3.KbqCommonModule, typeof i4.FormsModule], [typeof i1.KbqTextarea]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTextareaModule, [typeof i1.KbqTextarea], [typeof i2.A11yModule, typeof i3.FormsModule], [typeof i1.KbqTextarea]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTextareaModule>;
 }

package/timepicker/timepicker.scss

@@ -6,5 +6,5 @@
 }
 
 .kbq-form-field-type-timepicker {
-    width: auto;
+    width: 136px;
 }

package/toast/toast.component.scss

@@ -70,6 +70,8 @@
 .kbq-toast__content {
     display: flex;
     flex-direction: column;
+
+    white-space: pre-wrap;
 }
 
 .kbq-toast__actions {

package/toggle/_toggle-theme.scss

@@ -49,10 +49,18 @@
         }
     }
 
-    &.kbq-disabled,
-    &.kbq-active.kbq-disabled {
+    &.kbq-disabled {
         @include _kbq-toggle-state($type, states-disabled);
     }
+
+    &.kbq-active.kbq-disabled,
+    &.kbq-indeterminate.kbq-disabled {
+        @include _kbq-toggle-state($type, states-active-disabled);
+
+        .kbq-toggle-bar {
+            opacity: var(--kbq-opacity-disabled);
+        }
+    }
 }
 
 @mixin kbq-toggle-theme() {

package/toggle/toggle-tokens.scss

@@ -30,13 +30,16 @@
     --kbq-toggle-theme-states-disabled-border: var(--kbq-states-line-disabled);
     --kbq-toggle-theme-states-disabled-background: var(--kbq-states-background-disabled);
     --kbq-toggle-theme-states-disabled-circle-background: var(--kbq-states-icon-disabled);
+    --kbq-toggle-theme-states-active-disabled-border: var(--kbq-background-theme);
+    --kbq-toggle-theme-states-active-disabled-background: var(--kbq-background-theme);
+    --kbq-toggle-theme-states-active-disabled-circle-background: var(--kbq-icon-white);
     --kbq-toggle-error-default-border: var(--kbq-line-error);
     --kbq-toggle-error-default-background: var(--kbq-background-error-less);
     --kbq-toggle-error-default-circle-background: var(--kbq-icon-error);
     --kbq-toggle-error-states-hover-border: var(--kbq-line-error);
     --kbq-toggle-error-states-hover-background: var(--kbq-states-background-error-fade-hover);
     --kbq-toggle-error-states-hover-circle-background: var(--kbq-icon-error);
-    --kbq-toggle-error-states-checked-border: var(--kbq-line-error);
+    --kbq-toggle-error-states-checked-border: var(--kbq-background-error);
     --kbq-toggle-error-states-checked-background: var(--kbq-background-error);
     --kbq-toggle-error-states-checked-circle-background: var(--kbq-icon-white);
     --kbq-toggle-error-states-checked-hover-border: var(--kbq-line-error);
@@ -53,4 +56,7 @@
     --kbq-toggle-error-states-disabled-border: var(--kbq-states-line-disabled);
     --kbq-toggle-error-states-disabled-background: var(--kbq-states-background-disabled);
     --kbq-toggle-error-states-disabled-circle-background: var(--kbq-states-icon-disabled);
+    --kbq-toggle-error-states-active-disabled-border: var(--kbq-background-error);
+    --kbq-toggle-error-states-active-disabled-background: var(--kbq-background-error);
+    --kbq-toggle-error-states-active-disabled-circle-background: var(--kbq-icon-white);
 }

package/toggle/toggle.module.d.ts

@@ -1,9 +1,8 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./toggle.component";
 import * as i2 from "@angular/cdk/a11y";
-import * as i3 from "@koobiq/components/core";
 export declare class KbqToggleModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToggleModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToggleModule, [typeof i1.KbqToggleComponent], [typeof i2.A11yModule, typeof i3.KbqCommonModule], [typeof i1.KbqToggleComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToggleModule, [typeof i1.KbqToggleComponent], [typeof i2.A11yModule], [typeof i1.KbqToggleComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqToggleModule>;
 }

package/toggle/toggle.scss

@@ -84,15 +84,15 @@ $toggle-thumb-offset: 8px;
             }
         }
 
-        .kbq-toggle-bar {
+        &:not(.kbq-disabled) .kbq-toggle-bar:hover {
             .kbq-toggle__thumb {
-                display: block;
+                left: $toggle-thumb-offset + 2px;
             }
+        }
 
-            &:hover {
-                .kbq-toggle__thumb {
-                    left: $toggle-thumb-offset + 2px;
-                }
+        .kbq-toggle-bar {
+            .kbq-toggle__thumb {
+                display: block;
             }
         }
     }

package/top-bar/top-bar.scss

@@ -1,5 +1,24 @@
 @use '../core/styles/common/tokens';
 
+@mixin _overflow-items-margins {
+    padding: var(--kbq-size-border-width);
+
+    > .kbq-overflow-item {
+        &:not(:last-of-type) {
+            margin-right: var(--kbq-top-bar-container-end-gap);
+        }
+
+        // apply margin if the last item needs to be alwaysVisible
+        &:last-of-type:is(.kbq-overflow-item_always-visible) + .kbq-overflow-items-result {
+            margin-left: var(--kbq-top-bar-container-end-gap);
+        }
+    }
+
+    .kbq-overflow-items-result:first-child {
+        margin-right: var(--kbq-top-bar-container-end-gap);
+    }
+}
+
 .kbq-top-bar {
     display: flex;
     align-items: center;
@@ -12,49 +31,46 @@
     padding: var(--kbq-top-bar-padding-vertical) var(--kbq-top-bar-padding-horizontal);
     border-radius: var(--kbq-top-bar-border-radius);
 
+    &.kbq-top-bar_with-shadow {
+        box-shadow: var(--kbq-top-bar-shadow-bottom);
+        transition: box-shadow var(--kbq-top-bar-shadow-transition);
+    }
+
     .kbq-top-bar-spacer {
         height: 100%;
         flex: 0 0 var(--kbq-top-bar-spacer-min-width);
     }
 
-    .kbq-top-bar-container__start {
-        display: flex;
-        gap: var(--kbq-top-bar-container-start-gap);
-        flex: 1 0 var(--kbq-top-bar-container-start-basis);
-        justify-content: flex-start;
-        min-width: 0;
-    }
-
-    .kbq-top-bar-container__end {
-        display: flex;
-        gap: var(--kbq-top-bar-container-end-gap);
-        justify-content: end;
-    }
-
-    .kbq-top-bar-container__with-overflow-items {
-        gap: unset;
-        justify-content: unset;
-        padding: 1px;
+    .kbq-top-bar-container {
+        &:has(> .kbq-overflow-items) {
+            gap: unset;
+            overflow: hidden;
+        }
 
-        > .kbq-overflow-item {
-            &:not(:last-of-type) {
-                margin-right: var(--kbq-top-bar-container-end-gap);
-            }
+        .kbq-overflow-items {
+            @include _overflow-items-margins;
+        }
 
-            // apply margin if the last item needs to be alwaysVisible
-            &:last-of-type:is([aria-hidden='false']) + .kbq-overflow-items-result {
-                margin-left: var(--kbq-top-bar-container-end-gap);
-            }
+        &.kbq-top-bar-container__start {
+            display: flex;
+            gap: var(--kbq-top-bar-container-start-gap);
+            flex: 1 0 var(--kbq-top-bar-container-start-basis);
+            justify-content: flex-start;
+            min-width: 0;
         }
 
-        .kbq-overflow-items-result:first-child {
-            margin-right: var(--kbq-top-bar-container-end-gap);
+        &.kbq-top-bar-container__end {
+            display: flex;
+            gap: var(--kbq-top-bar-container-end-gap);
+            justify-content: end;
         }
-    }
 
-    &.kbq-top-bar_with-shadow {
-        box-shadow: var(--kbq-top-bar-shadow-bottom);
-        transition: box-shadow var(--kbq-top-bar-shadow-transition);
+        &.kbq-top-bar-container__with-overflow-items {
+            gap: unset;
+            justify-content: unset;
+
+            @include _overflow-items-margins;
+        }
     }
 
     @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);

package/tree/_tree-theme.scss

@@ -3,6 +3,8 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-tree-option($state-name) {
+    --kbq-option-background: var(--kbq-tree-#{$state-name}-container-background);
+
     background: var(--kbq-tree-#{$state-name}-container-background);
 
     .kbq-option-text {
@@ -34,11 +36,14 @@
         @include kbq-tree-option(default);
 
         &:not(.kbq-disabled) {
-            &:hover {
+            &:hover,
+            &.kbq-action-button-focused {
                 @include kbq-tree-option(states-hover);
             }
 
             &:active {
+                --kbq-option-background: var(--kbq-tree-states-active-container-background);
+
                 background: var(--kbq-tree-states-active-container-background);
             }
 
@@ -50,6 +55,8 @@
                 }
 
                 &:active {
+                    --kbq-option-background: var(--kbq-tree-states-selected-active-container-background);
+
                     background: var(--kbq-tree-states-selected-active-container-background);
                 }
             }
@@ -78,8 +85,12 @@
     }
 
     .cdk-keyboard-focused {
-        & .kbq-tree-option.kbq-focused {
+        & .kbq-tree-option.kbq-focused:not(.kbq-action-button-focused) {
             border-color: var(--kbq-tree-states-focused-focus-outline-color);
+
+            & .kbq-action-container {
+                display: flex;
+            }
         }
     }
 }

package/tree/padding.directive.d.ts

@@ -17,9 +17,9 @@ export declare class KbqTreeNodePadding<T> implements AfterViewInit {
     set indent(indent: number | string);
     private _indent;
     get leftPadding(): number;
+    get leftPaddingForFirstLevel(): number;
     /** CSS units used for the indentation value. */
     indentUnits: string;
-    baseLeftPadding: number;
     withIcon: boolean;
     iconWidth: number;
     constructor(treeNode: KbqTreeNode<T>, tree: KbqTreeBase<T>, renderer: Renderer2, element: ElementRef<HTMLElement>, option: KbqTreeOption, dir: Directionality);

package/tree/tree-option.scss

@@ -5,6 +5,8 @@
 .kbq-tree-option {
     @include vendor-prefixes.user-select(none);
 
+    position: relative;
+
     box-sizing: border-box;
 
     display: flex;
@@ -20,15 +22,15 @@
     border-radius: var(--kbq-tree-option-border-radius);
 
     padding-top: kbq-difference-series-css-variables(
-        [ tree-size-container-padding-vertical,
+        [tree-size-container-padding-vertical,
         tree-size-container-focus-outline-width]
     );
     padding-right: kbq-difference-series-css-variables(
-        [ tree-size-container-padding-right,
+        [tree-size-container-padding-right,
         tree-size-container-focus-outline-width]
     );
     padding-bottom: kbq-difference-series-css-variables(
-        [ tree-size-container-padding-vertical,
+        [tree-size-container-padding-vertical,
         tree-size-container-focus-outline-width]
     );
 
@@ -48,25 +50,18 @@
         outline: none;
     }
 
-    &.kbq-disabled {
-        .kbq-icon {
-            cursor: default;
-        }
+    &.kbq-disabled .kbq-icon {
+        cursor: default;
     }
 
     &:not(.kbq-disabled) {
         cursor: pointer;
-    }
-
-    & .kbq-option-action {
-        display: none;
-    }
 
-    &:not(.kbq-disabled):hover,
-    &:not(.kbq-disabled).kbq-focused,
-    &:not(.kbq-disabled).kbq-action-button-focused {
-        & .kbq-option-action {
-            display: flex;
+        &:hover,
+        &.kbq-action-button-focused {
+            & .kbq-action-container {
+                display: flex;
+            }
         }
     }
 

package/tree/tree.module.d.ts

@@ -11,6 +11,6 @@ import * as i9 from "@koobiq/components/core";
 import * as i10 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.KbqPseudoCheckboxModule, typeof i10.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 ɵ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.KbqPseudoCheckboxModule, typeof i10.KbqIconModule, typeof i9.KbqActionContainer], [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.component.d.ts

@@ -135,6 +135,10 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
      * Follows the same logic as `Array.prototype.sort`.
      */
     sortComparator: (a: KbqTreeOption, b: KbqTreeOption, options: KbqTreeOption[]) => number;
+    /**
+     * Whether to use a multiline matcher or not. Default is false
+     */
+    multiline: boolean;
     /** Combined stream of all of the child options' change events. */
     readonly optionSelectionChanges: Observable<KbqTreeSelectChange>;
     /** Combined stream of all of the child options userInteraction events. */
@@ -174,6 +178,8 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     /** Whether the select is focused. */
     get focused(): boolean;
     set focused(value: boolean);
+    /** Whether multiple choice is enabled or not. True if multiple or multiline */
+    get multiSelection(): boolean;
     private _focused;
     /** Width of the overlay panel. */
     protected overlayWidth: string | number;
@@ -201,6 +207,7 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     private readonly uid;
     private tempValues;
     private readonly destroyRef;
+    private readonly window;
     constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, renderer: Renderer2, defaultErrorStateMatcher: ErrorStateMatcher, scrollStrategyFactory: any, dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, parentFormField: KbqFormField, ngControl: NgControl, localeService?: KbqLocaleService | undefined);
     ngOnInit(): void;
     ngAfterContentInit(): void;
@@ -302,7 +309,9 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     private scrollActiveOptionIntoView;
     private subscribeOnSearchChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; host: true; }, { optional: true; self: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], false, never>;
+    static ngAcceptInputType_multiline: unknown;
+    static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_tabIndex: unknown;
     static ngAcceptInputType_disabled: unknown;
 }

package/esm2022/form-field/form-field-errors.mjs

@@ -1,7 +0,0 @@
-export function getKbqFormFieldMissingControlError() {
-    return Error('kbq-form-field must contain a KbqFormFieldControl.');
-}
-export function getKbqFormFieldYouCanNotUseCleanerInNumberInputError() {
-    return Error(`You can't use kbq-cleaner with input that have type="number"`);
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1maWVsZC1lcnJvcnMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wYWNrYWdlcy9jb21wb25lbnRzL2Zvcm0tZmllbGQvZm9ybS1maWVsZC1lcnJvcnMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxVQUFVLGtDQUFrQztJQUM5QyxPQUFPLEtBQUssQ0FBQyxvREFBb0QsQ0FBQyxDQUFDO0FBQ3ZFLENBQUM7QUFFRCxNQUFNLFVBQVUsb0RBQW9EO0lBQ2hFLE9BQU8sS0FBSyxDQUFDLDhEQUE4RCxDQUFDLENBQUM7QUFDakYsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBmdW5jdGlvbiBnZXRLYnFGb3JtRmllbGRNaXNzaW5nQ29udHJvbEVycm9yKCk6IEVycm9yIHtcbiAgICByZXR1cm4gRXJyb3IoJ2ticS1mb3JtLWZpZWxkIG11c3QgY29udGFpbiBhIEticUZvcm1GaWVsZENvbnRyb2wuJyk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXRLYnFGb3JtRmllbGRZb3VDYW5Ob3RVc2VDbGVhbmVySW5OdW1iZXJJbnB1dEVycm9yKCk6IEVycm9yIHtcbiAgICByZXR1cm4gRXJyb3IoYFlvdSBjYW4ndCB1c2Uga2JxLWNsZWFuZXIgd2l0aCBpbnB1dCB0aGF0IGhhdmUgdHlwZT1cIm51bWJlclwiYCk7XG59XG4iXX0=

package/form-field/form-field-errors.d.ts

@@ -1,2 +0,0 @@
-export declare function getKbqFormFieldMissingControlError(): Error;
-export declare function getKbqFormFieldYouCanNotUseCleanerInNumberInputError(): Error;