@koobiq/components 18.29.0 → 18.30.0

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

@@ -18,58 +18,35 @@
 
         min-width: var(--kbq-file-upload-size-multiple-big-container-min-width);
 
-        & .dropzone {
+        .dropzone {
             gap: var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal);
         }
 
-        & .dropzone__text {
-            & .multiple__header {
-                display: block;
-            }
-
-            & .multiple__caption {
-                display: block;
+        .dropzone__text {
+            .multiple__caption {
                 padding-top: var(--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical);
-                // гап не применяется тк не флекс. в целом гап не нужен, тк по логике дизайна ссылка от текста отделяется пробелом
-                gap: var(--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal);
             }
         }
     }
 
     &.compact:not(.selected) {
-        padding: var(--kbq-file-upload-size-single-container-padding-vertical)
-            var(--kbq-file-upload-size-single-container-padding-horizontal);
-
-        & .dropzone {
-            gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);
+        padding: var(--kbq-file-upload-multiple-compact-container-padding-vertical)
+            var(--kbq-file-upload-multiple-compact-container-padding-horizontal);
 
-            & .dropzone__text.multiple__caption {
-                padding-top: var(--kbq-file-upload-size-single-text-block-padding-vertical);
+        .dropzone {
+            gap: var(--kbq-file-upload-multiple-compact-container-content-gap-horizontal);
 
-                padding-bottom: var(--kbq-file-upload-size-single-text-block-padding-vertical);
+            .dropzone__text.multiple__caption {
+                padding-top: var(--kbq-file-upload-multiple-compact-text-block-padding-vertical);
 
-                gap: var(--kbq-file-upload-size-single-text-block-content-gap-horizontal);
+                padding-bottom: var(--kbq-file-upload-multiple-compact-text-block-padding-vertical);
             }
         }
     }
 
-    & .kbq-list-option.multiple__uploaded-item {
-        padding: 0;
-
-        & .kbq-list-text {
-            padding: calc(
-                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - var(
-                            --kbq-list-size-container-focus-outline-width,
-                            var(--kbq-size-3xs)
-                        )
-                )
-                calc(
-                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) - var(
-                            --kbq-list-size-container-focus-outline-width,
-                            var(--kbq-size-3xs)
-                        )
-                );
-        }
+    .kbq-list-option.multiple__uploaded-item {
+        border-radius: 0;
+        padding: 0 calc(var(--kbq-size-3xs) - var(--kbq-file-upload-size-multiple-big-container-border-width));
 
         .kbq-icon {
             margin-right: 0;
@@ -86,67 +63,87 @@
         align-items: center;
 
         .kbq-file-upload__file {
-            width: 65%;
-            max-width: 65%;
-
-            gap: var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal);
+            flex-grow: 1;
         }
 
         .kbq-file-upload__size {
-            width: var(--kbq-size-7xl);
-            min-width: var(--kbq-size-7xl);
-            text-align: left;
+            width: var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);
+            min-width: var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);
+            max-width: var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);
             flex-grow: 1;
+            flex-shrink: 1;
+            text-align: left;
         }
     }
 
     .kbq-file-upload__row {
+        .kbq-file-upload__grid-cell {
+            padding: 0 var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal);
+        }
+
         .kbq-file-upload__file {
             display: flex;
             align-items: center;
+            gap: var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal);
 
             .file-item__text {
-                margin-left: 0;
                 width: 90%;
             }
         }
+
+        .kbq-file-upload__action {
+            $list-option-border-width: var(--kbq-size-3xs);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-top: calc(
+                var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - $list-option-border-width
+            );
+            padding-bottom: calc(
+                var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) - $list-option-border-width
+            );
+            min-height: var(--kbq-size-xxl);
+            min-width: var(--kbq-size-xxl);
+        }
     }
 
     .kbq-file-multiple-uploaded__header {
-        border-bottom-width: 1px;
+        margin: -1px;
+        border-bottom-width: var(--kbq-file-upload-size-multiple-big-container-border-width);
         border-bottom-style: solid;
 
-        .kbq-file-multiple-uploaded__header-inner {
-            padding: kbq-sum-series-css-variables([file-upload-size-multiple-big-grid-cell-padding-vertical, 2px])
-                kbq-sum-series-css-variables([file-upload-size-multiple-big-grid-cell-padding-horizontal 2px]);
+        padding: 0 var(--kbq-size-xxs);
+
+        .kbq-file-upload__grid-cell {
+            $header-cell-vertical-padding: 10px;
+            padding: $header-cell-vertical-padding var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal)
+                calc($header-cell-vertical-padding - var(--kbq-file-upload-size-multiple-big-container-border-width))
+                var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal);
+        }
+
+        .kbq-file-upload__action {
+            min-height: var(--kbq-size-xxl);
+            min-width: var(--kbq-size-xxl);
+            padding: var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal)
+                var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal)
+                calc(
+                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - var(
+                            --kbq-file-upload-size-multiple-big-container-border-width
+                        )
+                );
         }
     }
 
     .btn-upload {
-        padding: kbq-difference-series-css-variables(
-                [ file-upload-size-single-container-padding-vertical,
-                file-upload-size-single-container-border-width]
-            )
-            kbq-difference-series-css-variables(
-                [ file-upload-size-single-container-padding-horizontal,
-                file-upload-size-single-container-border-width]
-            );
-        border-top-left-radius: var(--kbq-file-upload-size-single-container-border-radius);
+        margin: -1px;
+        padding: calc(var(--kbq-size-m) - var(--kbq-file-upload-size-multiple-big-container-border-width))
+            var(--kbq-size-m) var(--kbq-size-m) var(--kbq-size-m);
 
-        border-top-right-radius: var(--kbq-file-upload-size-single-container-border-radius);
-        border-top-width: var(--kbq-file-upload-size-single-container-border-width);
+        border-top-width: var(--kbq-file-upload-size-multiple-big-container-border-width);
         border-top-style: dashed;
 
-        & .dropzone {
-            gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);
-
-            & .dropzone__text.multiple__caption {
-                padding-top: var(--kbq-file-upload-size-single-text-block-padding-vertical);
-
-                padding-bottom: var(--kbq-file-upload-size-single-text-block-padding-vertical);
-
-                gap: var(--kbq-file-upload-size-single-text-block-content-gap-horizontal);
-            }
+        .dropzone {
+            gap: var(--kbq-file-upload-size-multiple-big-dropzone-content-gap-horizontal);
         }
     }
 

package/file-upload/single-file-upload.component.d.ts

@@ -27,6 +27,11 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
     private _file;
     get file(): KbqFileItem | null;
     set file(currentFile: KbqFileItem | null);
+    /**
+     * Controls whether to display the file size information.
+     * @default true
+     */
+    showFileSize: boolean;
     /** Emits an event containing updated file.
      * public output will be renamed to fileChange in next major release (#DS-3700) */
     fileChange: EventEmitter<KbqFileItem | null>;
@@ -88,5 +93,6 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
     private initDefaultParams;
     private getCaptionText;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSingleFileUploadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSingleFileUploadComponent, "kbq-single-file-upload,kbq-file-upload:not([multiple])", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "file": { "alias": "file"; "required": false; }; }, { "fileChange": "fileQueueChange"; }, ["hint"], ["[kbq-icon]", "kbq-hint"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSingleFileUploadComponent, "kbq-single-file-upload,kbq-file-upload:not([multiple])", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "file": { "alias": "file"; "required": false; }; "showFileSize": { "alias": "showFileSize"; "required": false; }; }, { "fileChange": "fileQueueChange"; }, ["hint"], ["[kbq-icon]", "kbq-hint"], false, never>;
+    static ngAcceptInputType_showFileSize: unknown;
 }

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

@@ -44,5 +44,13 @@
                 flex-grow: 1;
             }
         }
+
+        .kbq-file-item__size {
+            padding: 0 var(--kbq-size-s);
+        }
+
+        .kbq-file-upload__action {
+            padding: var(--kbq-size-xxs);
+        }
     }
 }

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

@@ -38,7 +38,9 @@ export declare class KbqFormField extends KbqColorDirective implements AfterCont
     get hasPasswordToggle(): boolean;
     get canShowCleaner(): boolean;
     get disabled(): boolean;
-    get canShowStepper(): boolean;
+    /** @deprecated stepper should be always visible when provided, so this parameter is redundant,
+     * use `hasStepper` instead */
+    canShowStepper: boolean;
     constructor(changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
     ngAfterContentInit(): void;
     ngAfterContentChecked(): void;

package/form-field/stepper.d.ts

@@ -1,11 +1,25 @@
 import { EventEmitter } from '@angular/core';
+import { KbqFormFieldControl } from './form-field-control';
 import * as i0 from "@angular/core";
+/**
+ * Used as temporary solution to resolve circular dependency.
+ * Moving `KbqStepper` to standalone will resolve the issue
+ */
+type KbqNumberInput = KbqFormFieldControl<unknown> & {
+    stepUp: (val: number) => void;
+    stepDown: (val: number) => void;
+    step: number;
+};
 export declare class KbqStepper {
+    private readonly formField;
     readonly stepUp: EventEmitter<void>;
     readonly stepDown: EventEmitter<void>;
-    connectTo(numberInput: any): void;
+    /** Form field number control. */
+    protected get control(): KbqNumberInput;
+    connectTo(numberInput: KbqNumberInput): void;
     onStepUp($event: MouseEvent): void;
     onStepDown($event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqStepper, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqStepper, "kbq-stepper", never, {}, { "stepUp": "stepUp"; "stepDown": "stepDown"; }, never, never, false, never>;
 }
+export {};

package/overflow-items/overflow-items.d.ts

@@ -1,4 +1,3 @@
-import { ElementRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Manages the visibility of the element.
@@ -7,18 +6,14 @@ import * as i0 from "@angular/core";
  */
 export declare class ElementVisibilityManager {
     private readonly renderer;
-    /**
-     * Reference to the element.
-     *
-     * @docs-private
-     */
-    readonly elementRef: ElementRef<any>;
+    private readonly elementRef;
+    private readonly hiddenState;
     /**
      * Whether the element is hidden.
      *
      * @docs-private
      */
-    readonly hidden: import("@angular/core").WritableSignal<boolean>;
+    readonly hidden: import("@angular/core").Signal<boolean>;
     /**
      * Hides the element.
      *
@@ -59,6 +54,10 @@ export declare class KbqOverflowItem extends ElementVisibilityManager {
      * @default false
      */
     readonly alwaysVisible: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * @docs-private
+     */
+    hide(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOverflowItem, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItem, "[kbqOverflowItem]", ["kbqOverflowItem"], { "id": { "alias": "kbqOverflowItem"; "required": true; "isSignal": true; }; "order": { "alias": "order"; "required": false; "isSignal": true; }; "alwaysVisible": { "alias": "alwaysVisible"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -68,14 +67,10 @@ export declare class KbqOverflowItem extends ElementVisibilityManager {
 export declare class KbqOverflowItems {
     /**
      * `KbqOverflowItem` directive references.
-     *
-     * @docs-private
      */
     private readonly items;
     /**
      * `KbqOverflowItemsResult` directive reference.
-     *
-     * @docs-private
      */
     private readonly result;
     /**
@@ -104,31 +99,27 @@ export declare class KbqOverflowItems {
     private readonly document;
     constructor();
     /**
-     * Returns a list of items sorted by their specified `order` value.
+     * Sort items by their `order` attribute.
      * If an item does not have an `order` defined, its index is used as a fallback.
-     * This ensures a stable order while allowing custom positioning.
      */
-    private getSortedItemsByOrder;
+    private sortItemsByOrder;
     /**
-     * Calculates the visibility of items, based on the container width and `reverseOverflowOrder` property.
+     * Excludes items that have the `alwaysVisible` attribute.
      */
-    private calculateItemsVisibility;
+    private excludeAlwaysVisibleItems;
     /**
-     * Returns the width of the element including margins.
+     * Manages the visibility of items based on the available space in the container and returns the hidden items.
+     * Direction of hiding is determined by the `reverseOverflowOrder` attribute.
      */
-    private getElementWidthWithMargins;
+    private getHiddenItems;
     /**
      * This method sets the necessary styles for the directive.
      */
     private setStyles;
     /**
-     * Determines if the given item is hidden.
-     */
-    private isHiddenItem;
-    /**
-     * Returns the window object.
+     * Determines if the given element has a scrollbar.
      */
-    private getWindow;
+    private readonly hasScrollbar;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOverflowItems, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItems, "[kbqOverflowItems]", ["kbqOverflowItems"], { "reverseOverflowOrder": { "alias": "reverseOverflowOrder"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; }, { "changes": "changes"; }, ["items", "result"], never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.29.0",
+    "version": "18.30.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -24,9 +24,9 @@
         "@angular/cdk": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@angular/forms": "^18.0.0",
-        "@koobiq/cdk": "18.29.0",
-        "@koobiq/angular-moment-adapter": "18.29.0",
-        "@koobiq/angular-luxon-adapter": "18.29.0",
+        "@koobiq/cdk": "18.30.0",
+        "@koobiq/angular-moment-adapter": "18.30.0",
+        "@koobiq/angular-luxon-adapter": "18.30.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^10.1.0",
         "@koobiq/tokens-builder": "3.11.0",

package/popover/popover.component.d.ts

@@ -14,7 +14,6 @@ export declare class KbqPopoverComponent extends KbqPopUp implements AfterViewIn
     elementRef: ElementRef;
     cdkTrapFocus: CdkTrapFocus;
     private debounceTime;
-    private readonly destroyRef;
     isContentTopOverflow: boolean;
     isContentBottomOverflow: boolean;
     ngAfterViewInit(): void;
@@ -82,6 +81,8 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     backdropClass: string;
     arrow: boolean;
     offset: number | null;
+    /** Delay before closing in milliseconds. The default value for kbqTrigger=PopUpTriggers.Hover is 500 ms. */
+    leaveDelay: number;
     placementChange: EventEmitter<any>;
     visibleChange: EventEmitter<boolean>;
     protected originSelector: string;
@@ -98,7 +99,8 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     closingActions(): import("rxjs").Observable<void | CdkScrollable | MouseEvent>;
     private hideIfNotInViewPort;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "header": { "alias": "kbqPopoverHeader"; "required": false; }; "content": { "alias": "kbqPopoverContent"; "required": false; }; "footer": { "alias": "kbqPopoverFooter"; "required": false; }; "disabled": { "alias": "kbqPopoverDisabled"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "size": { "alias": "kbqPopoverSize"; "required": false; }; "customClass": { "alias": "kbqPopoverClass"; "required": false; }; "hasCloseButton": { "alias": "hasCloseButton"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "arrow": { "alias": "kbqPopoverArrow"; "required": false; }; "offset": { "alias": "kbqPopoverOffset"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "header": { "alias": "kbqPopoverHeader"; "required": false; }; "content": { "alias": "kbqPopoverContent"; "required": false; }; "footer": { "alias": "kbqPopoverFooter"; "required": false; }; "disabled": { "alias": "kbqPopoverDisabled"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "size": { "alias": "kbqPopoverSize"; "required": false; }; "customClass": { "alias": "kbqPopoverClass"; "required": false; }; "hasCloseButton": { "alias": "hasCloseButton"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "arrow": { "alias": "kbqPopoverArrow"; "required": false; }; "offset": { "alias": "kbqPopoverOffset"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
     static ngAcceptInputType_arrow: unknown;
     static ngAcceptInputType_offset: unknown;
+    static ngAcceptInputType_leaveDelay: unknown;
 }

package/schematics/ng-add/index.js

@@ -27,8 +27,8 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.14");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.29.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.29.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.30.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.30.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.2.3");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.2.3");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^10.1.0");

package/tooltip/tooltip.component.d.ts

@@ -42,6 +42,12 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     protected scrollStrategy: () => ScrollStrategy;
     protected parentPopup: KbqParentPopup | null;
     protected focusMonitor: FocusMonitor;
+    /**
+     * Changes hiding behavior. By default, tooltip is hidden on mouseleave from trigger.
+     * Setting hideWithTimeout to true will delay tooltip hiding and will not hide when the mouse moves from trigger
+     * to tooltip.
+     */
+    hideWithTimeout: boolean;
     get tooltipVisible(): boolean;
     set tooltipVisible(value: boolean);
     get tooltipPlacement(): PopUpPlacements;
@@ -96,7 +102,8 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     updateClassMap(newPlacement?: string): void;
     protected applyRelativeToPointer(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTooltipTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[kbqTooltip]", ["kbqTooltip"], { "tooltipVisible": { "alias": "kbqVisible"; "required": false; }; "tooltipPlacement": { "alias": "kbqPlacement"; "required": false; }; "relativeToPointer": { "alias": "kbqRelativeToPointer"; "required": false; }; "tooltipPlacementPriority": { "alias": "kbqPlacementPriority"; "required": false; }; "content": { "alias": "kbqTooltip"; "required": false; }; "disabled": { "alias": "kbqTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "kbqEnterDelay"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "customClass": { "alias": "kbqTooltipClass"; "required": false; }; "context": { "alias": "kbqTooltipContext"; "required": false; }; "color": { "alias": "kbqTooltipColor"; "required": false; }; "arrow": { "alias": "kbqTooltipArrow"; "required": false; }; "offset": { "alias": "kbqTooltipOffset"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[kbqTooltip]", ["kbqTooltip"], { "hideWithTimeout": { "alias": "hideWithTimeout"; "required": false; }; "tooltipVisible": { "alias": "kbqVisible"; "required": false; }; "tooltipPlacement": { "alias": "kbqPlacement"; "required": false; }; "relativeToPointer": { "alias": "kbqRelativeToPointer"; "required": false; }; "tooltipPlacementPriority": { "alias": "kbqPlacementPriority"; "required": false; }; "content": { "alias": "kbqTooltip"; "required": false; }; "disabled": { "alias": "kbqTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "kbqEnterDelay"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "customClass": { "alias": "kbqTooltipClass"; "required": false; }; "context": { "alias": "kbqTooltipContext"; "required": false; }; "color": { "alias": "kbqTooltipColor"; "required": false; }; "arrow": { "alias": "kbqTooltipArrow"; "required": false; }; "offset": { "alias": "kbqTooltipOffset"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, true, never>;
+    static ngAcceptInputType_hideWithTimeout: unknown;
     static ngAcceptInputType_relativeToPointer: unknown;
     static ngAcceptInputType_arrow: unknown;
     static ngAcceptInputType_offset: unknown;

package/top-bar/top-bar.scss

@@ -33,6 +33,7 @@
 
     .kbq-top-bar-container__with-overflow-items {
         gap: unset;
+        justify-content: unset;
         padding: 1px;
 
         > .kbq-overflow-item {