@koobiq/components 18.37.0 → 18.38.1

package/navbar/_navbar-theme.scss

@@ -21,24 +21,30 @@
     }
 }
 
+button {
+    &.kbq-navbar-item,
+    &.kbq-navbar-brand {
+        background: transparent;
+        border: none;
+    }
+}
+
 @mixin kbq-navbar-theme() {
-    .kbq-navbar,
-    .kbq-vertical-navbar .kbq-vertical-navbar__container {
+    .kbq-navbar {
         background-color: var(--kbq-navbar-background);
     }
 
     .kbq-vertical-navbar .kbq-vertical-navbar__container {
+        background-color: var(--kbq-navbar-vertical-background);
         border-right: 1px solid var(--kbq-navbar-border);
     }
 
-    .kbq-navbar-item,
-    .kbq-navbar-brand,
-    .kbq-navbar-toggle {
+    .kbq-navbar-item {
         cursor: pointer;
 
         @include kbq-navbar-item(default);
 
-        &:hover:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand) {
+        &:hover:not(.kbq-disabled) {
             @include kbq-navbar-item(states-hover);
         }
 
@@ -51,8 +57,8 @@
             }
         }
 
-        &:active:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand),
-        &.kbq-active:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand) {
+        &:active:not(.kbq-disabled),
+        &.kbq-active:not(.kbq-disabled) {
             @include kbq-navbar-item(states-selected);
         }
 
@@ -68,40 +74,13 @@
         }
     }
 
-    .kbq-navbar-brand.kbq-vertical:hover {
-        .kbq-navbar-logo {
-            transform: scale(1.06);
-        }
-    }
-
-    .kbq-navbar-brand.kbq-horizontal:hover {
-        .kbq-navbar-logo {
-            z-index: 1;
-        }
-    }
-
     .kbq-navbar-divider {
         background: var(--kbq-line-contrast-less);
     }
 }
 
-button {
-    &.kbq-navbar-item,
-    &.kbq-navbar-brand,
-    &.kbq-navbar-toggle {
-        background: transparent;
-        border: none;
-    }
-}
-
 @mixin kbq-navbar-typography() {
     .kbq-navbar-title {
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
     }
-
-    .kbq-navbar-brand {
-        .kbq-navbar-title {
-            @include kbq-typography-level-to-styles-css-variables(typography, navbar-title);
-        }
-    }
 }

package/navbar/navbar-brand.component.d.ts

@@ -0,0 +1,39 @@
+import { AfterContentInit, ChangeDetectorRef } from '@angular/core';
+import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
+import { KbqNavbarFocusableItem, KbqNavbarRectangleElement, KbqNavbarTitle } from './navbar-item.component';
+import * as i0 from "@angular/core";
+export declare class KbqNavbarBrand extends KbqTooltipTrigger implements AfterContentInit {
+    /** @docs-private */
+    protected readonly nativeElement: HTMLElement;
+    /** @docs-private */
+    protected readonly changeDetectorRef: ChangeDetectorRef;
+    /** @docs-private */
+    protected readonly rectangleElement: KbqNavbarRectangleElement;
+    /** @docs-private */
+    protected readonly navbarFocusableItem: KbqNavbarFocusableItem;
+    /** @docs-private */
+    title: KbqNavbarTitle;
+    /** alternative display of the brand name in two lines */
+    longTitle: boolean;
+    /** text that will be displayed in the tooltip. By default, the text is taken from kbq-navbar-title. */
+    collapsedText: string;
+    get isLink(): boolean;
+    /** @docs-private */
+    get croppedText(): string;
+    /** @docs-private */
+    get hasCroppedText(): boolean;
+    /** @docs-private */
+    get titleText(): string | null;
+    /** @docs-private */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /** @docs-private */
+    get collapsed(): boolean;
+    set collapsed(value: boolean);
+    private _collapsed;
+    constructor();
+    ngAfterContentInit(): void;
+    private updateTooltip;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarBrand, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarBrand, "kbq-navbar-brand, [kbq-navbar-brand]", ["kbqNavbarBrand"], { "longTitle": { "alias": "longTitle"; "required": false; }; "collapsedText": { "alias": "collapsedText"; "required": false; }; }, {}, ["title"], ["*"], false, never>;
+}

package/navbar/navbar-brand.scss

@@ -1,5 +1,6 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
+@use './navbar-theme';
 
 .kbq-navbar-logo {
     display: flex;
@@ -50,6 +51,18 @@ a.kbq-navbar-brand {
 }
 
 .kbq-navbar-brand.kbq-vertical {
+    flex-direction: row;
+    align-items: center;
+
+    padding: var(--kbq-size-xxs) var(--kbq-size-m) var(--kbq-size-m);
+
+    &:after {
+        top: 0;
+        right: var(--kbq-size-s);
+        bottom: var(--kbq-size-s);
+        left: var(--kbq-size-s);
+    }
+
     & .kbq-navbar-logo {
         align-items: center;
     }
@@ -58,68 +71,85 @@ a.kbq-navbar-brand {
         display: block;
         align-items: center;
 
-        padding-top: var(--kbq-size-xxs);
-        padding-bottom: var(--kbq-size-xxs);
-
-        height: var(--kbq-size-3xl);
-
-        padding-left: 0;
-
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
+        padding-left: var(--kbq-size-s);
     }
 
     &.kbq-expanded {
-        position: relative;
-
-        height: var(--kbq-size-4xl);
-        width: var(--kbq-size-4xl);
-
-        margin-top: var(--kbq-size-s);
-        margin-right: var(--kbq-size-l);
-        margin-left: var(--kbq-size-l);
-        margin-bottom: 60px;
-
-        flex-direction: column;
-
-        &:after {
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
+        & .kbq-navbar-title {
+            max-width: 200px;
         }
+    }
 
-        & .kbq-navbar-logo {
-            min-height: var(--kbq-size-4xl);
-
-            justify-content: center;
+    &.kbq-collapsed {
+        & .kbq-navbar-title {
+            display: none !important;
         }
+    }
 
-        & .kbq-navbar-title {
-            position: absolute;
+    &.kbq-navbar-brand_long-title .kbq-navbar-title {
+        display: -webkit-box;
 
-            left: var(--kbq-size-xxs);
-            top: var(--kbq-size-6xl);
-            max-width: 200px;
-        }
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        white-space: normal;
     }
+}
 
-    &.kbq-collapsed {
-        height: var(--kbq-size-5xl);
-        width: var(--kbq-size-5xl);
-
-        &:after {
-            top: var(--kbq-size-xxs);
-            right: var(--kbq-size-xxs);
-            bottom: var(--kbq-size-xxs);
-            left: var(--kbq-size-xxs);
+@mixin kbq-navbar-brand-theme() {
+    .kbq-navbar-brand {
+        @include navbar-theme.kbq-navbar-item(default);
+
+        &.kbq-navbar-brand_link {
+            cursor: pointer;
+
+            &:hover:not(.kbq-disabled) {
+                @include navbar-theme.kbq-navbar-item(states-hover);
+            }
+
+            &.cdk-focused.cdk-keyboard-focused {
+                outline: none;
+
+                &:after {
+                    display: block;
+                    box-shadow: inset 0 0 0 2px var(--kbq-states-line-focus-theme);
+                }
+            }
+
+            &:active:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand),
+            &.kbq-active:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand) {
+                @include navbar-theme.kbq-navbar-item(states-selected);
+            }
+
+            &.kbq-vertical:hover {
+                .kbq-navbar-logo {
+                    transform: scale(1.06);
+                }
+            }
+
+            &.kbq-horizontal:hover {
+                .kbq-navbar-logo {
+                    z-index: 1;
+                }
+            }
         }
 
+        &.kbq-navbar-focusable-item {
+            outline: none;
+        }
+    }
+}
+
+@mixin kbq-navbar-brand-typography() {
+    .kbq-navbar-brand {
         & .kbq-navbar-title {
-            display: none;
+            @include kbq-typography-level-to-styles-css-variables(typography, navbar-title);
         }
 
-        justify-content: center;
+        &.kbq-navbar-brand_long-title .kbq-navbar-title {
+            @include kbq-typography-level-to-styles-css-variables(typography, text-normal-strong);
+        }
     }
 }
+
+@include kbq-navbar-brand-theme();
+@include kbq-navbar-brand-typography();

package/navbar/navbar-divider.scss

@@ -7,7 +7,7 @@
 .kbq-navbar-divider.kbq-vertical {
     height: 1px;
 
-    margin: var(--kbq-size-s) var(--kbq-size-l);
+    margin: var(--kbq-size-xs) var(--kbq-size-l);
 }
 
 .kbq-navbar-divider.kbq-horizontal {

package/navbar/navbar-item.component.d.ts

@@ -1,13 +1,12 @@
 import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy, TemplateRef } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy } from '@angular/core';
 import { IFocusableOption } from '@koobiq/cdk/a11y';
 import { KbqButton, KbqButtonCssStyler } from '@koobiq/components/button';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqFormField } from '@koobiq/components/form-field';
 import { KbqIcon } from '@koobiq/components/icon';
-import { KbqTooltipTrigger, TooltipModifier } from '@koobiq/components/tooltip';
+import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { Subject } from 'rxjs';
-import { KbqVerticalNavbar } from './vertical-navbar.component';
 import * as i0 from "@angular/core";
 export interface KbqNavbarFocusableItemEvent {
     item: KbqNavbarFocusableItem;
@@ -36,18 +35,6 @@ export declare class KbqNavbarTitle implements AfterViewInit {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarTitle, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarTitle, "kbq-navbar-title, [kbq-navbar-title]", never, {}, {}, never, never, false, never>;
 }
-export declare class KbqNavbarBrand implements AfterContentInit {
-    private navbar;
-    logo: KbqNavbarLogo;
-    title: KbqNavbarTitle;
-    hovered: boolean;
-    get hasBento(): boolean;
-    private readonly destroyRef;
-    constructor(navbar: KbqVerticalNavbar);
-    ngAfterContentInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarBrand, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarBrand, "kbq-navbar-brand, [kbq-navbar-brand]", ["kbqNavbarBrand"], {}, {}, ["logo", "title"], ["*"], false, never>;
-}
 export declare class KbqNavbarDivider {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarDivider, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarDivider, "kbq-navbar-divider", never, {}, {}, never, never, false, never>;
@@ -112,7 +99,6 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger implements AfterCon
     private changeDetectorRef;
     private dropdownTrigger;
     private bento;
-    private tooltip;
     title: KbqNavbarTitle;
     icon: KbqIcon;
     collapsedText: string;
@@ -132,29 +118,11 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger implements AfterCon
     get showVerticalDropDownAngle(): boolean;
     get showHorizontalDropDownAngle(): boolean;
     get hasCroppedText(): boolean;
-    constructor(rectangleElement: KbqNavbarRectangleElement, navbarFocusableItem: KbqNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, dropdownTrigger: KbqDropdownTrigger, bento: KbqNavbarBento, tooltip: KbqTooltipTrigger);
+    constructor(rectangleElement: KbqNavbarRectangleElement, navbarFocusableItem: KbqNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, dropdownTrigger: KbqDropdownTrigger, bento: KbqNavbarBento);
     ngAfterContentInit(): void;
     updateTooltip(): void;
     getTitleWidth(): number;
     onKeyDown($event: KeyboardEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItem, [null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItem, [null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarItem, "kbq-navbar-item, [kbq-navbar-item]", ["kbqNavbarItem"], { "collapsedText": { "alias": "collapsedText"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "collapsable": { "alias": "collapsable"; "required": false; }; }, {}, ["title", "icon"], ["[kbq-icon]", "kbq-navbar-title, [kbq-navbar-title]", "*"], false, never>;
 }
-export declare class KbqNavbarToggle extends KbqTooltipTrigger implements OnDestroy {
-    navbar: KbqVerticalNavbar;
-    private changeDetectorRef;
-    protected readonly document: Document;
-    private readonly window;
-    customIcon: KbqIcon;
-    get content(): string | TemplateRef<any>;
-    set content(content: string | TemplateRef<any>);
-    get disabled(): boolean;
-    protected modifier: TooltipModifier;
-    constructor(navbar: KbqVerticalNavbar, changeDetectorRef: ChangeDetectorRef);
-    onKeydown($event: KeyboardEvent): void;
-    ngOnDestroy(): void;
-    toggle: () => void;
-    private windowToggleHandler;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarToggle, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarToggle, "kbq-navbar-toggle", never, { "content": { "alias": "kbqCollapsedTooltip"; "required": false; }; }, {}, ["customIcon"], ["[kbq-icon]", "kbq-navbar-title"], false, never>;
-}

package/navbar/navbar-toggle.component.d.ts

@@ -0,0 +1,23 @@
+import { OnDestroy } from '@angular/core';
+import { KbqVerticalNavbar } from './vertical-navbar.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/a11y";
+import * as i2 from "@koobiq/components/tooltip";
+export declare class KbqNavbarToggle implements OnDestroy {
+    private readonly window;
+    private readonly ngZone;
+    private readonly changeDetectorRef;
+    private readonly tooltip;
+    /** @docs-private */
+    protected readonly navbar: KbqVerticalNavbar;
+    constructor();
+    ngOnDestroy(): void;
+    /** @docs-private */
+    keydownHandler($event: KeyboardEvent): void;
+    /** toggles the state of the navbar */
+    toggle(): void;
+    private updateTooltipContent;
+    private windowToggleHandler;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarToggle, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarToggle, "kbq-navbar-toggle, [kbq-navbar-toggle]", never, {}, {}, never, ["[kbq-icon]"], false, [{ directive: typeof i1.CdkMonitorFocus; inputs: {}; outputs: {}; }, { directive: typeof i2.KbqTooltipTrigger; inputs: {}; outputs: {}; }]>;
+}

package/navbar/navbar-toggle.scss

@@ -0,0 +1,64 @@
+.kbq-navbar-toggle {
+    position: absolute;
+
+    top: var(--kbq-size-3xl);
+    right: calc(-1 * var(--kbq-size-l));
+    z-index: 1;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    padding: var(--kbq-size-3xs);
+    border-width: 0;
+
+    cursor: pointer;
+
+    & .kbq-navbar-toggle__circle {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        width: 28px;
+        height: 28px;
+
+        border-radius: 50%;
+    }
+}
+
+@mixin kbq-navbar-toggle-theme() {
+    .kbq-navbar-toggle {
+        outline: none;
+        border-color: transparent;
+
+        background: transparent;
+
+        & .kbq-navbar-toggle__circle {
+            background: var(--kbq-background-card);
+
+            box-shadow:
+                0 3px 8px 0 var(--kbq-shadow-ambient),
+                0 2px 8px 0 var(--kbq-shadow-key),
+                0 0 0 1px var(--kbq-shadow-outline);
+        }
+
+        & .kbq-icon {
+            color: var(--kbq-icon-contrast-fade);
+        }
+
+        &:hover,
+        &:active,
+        &.kbq-hover,
+        &.kbq-active {
+            & .kbq-icon {
+                color: var(--kbq-states-icon-contrast-hover);
+            }
+        }
+
+        &.cdk-keyboard-focused .kbq-navbar-toggle__circle {
+            box-shadow: 0 0 0 2px var(--kbq-states-line-focus-theme);
+        }
+    }
+}
+
+@include kbq-navbar-toggle-theme();

package/navbar/navbar-tokens.scss

@@ -3,6 +3,7 @@
     --kbq-navbar-item-size-content-border-radius: var(--kbq-size-border-radius);
     /* THEME TOKENS */
     --kbq-navbar-background: var(--kbq-background-bg);
+    --kbq-navbar-vertical-background: var(--kbq-background-bg-tertiary);
     --kbq-navbar-border: var(--kbq-line-contrast-less);
     --kbq-navbar-item-default-content-text: var(--kbq-foreground-contrast);
     --kbq-navbar-item-default-content-background: transparent;

package/navbar/navbar.module.d.ts

@@ -1,13 +1,15 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./navbar.component";
 import * as i2 from "./navbar-item.component";
-import * as i3 from "./vertical-navbar.component";
-import * as i4 from "@angular/cdk/a11y";
-import * as i5 from "@angular/cdk/platform";
-import * as i6 from "@koobiq/components/icon";
-import * as i7 from "@koobiq/components/tooltip";
+import * as i3 from "./navbar-brand.component";
+import * as i4 from "./navbar-toggle.component";
+import * as i5 from "./vertical-navbar.component";
+import * as i6 from "@angular/cdk/a11y";
+import * as i7 from "@angular/cdk/platform";
+import * as i8 from "@koobiq/components/icon";
+import * as i9 from "@koobiq/components/tooltip";
 export declare class KbqNavbarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqNavbarModule, [typeof i1.KbqNavbar, typeof i1.KbqNavbarContainer, typeof i2.KbqNavbarTitle, typeof i2.KbqNavbarItem, typeof i2.KbqNavbarBrand, typeof i2.KbqNavbarLogo, typeof i2.KbqNavbarToggle, typeof i3.KbqVerticalNavbar, typeof i2.KbqNavbarDivider, typeof i2.KbqNavbarFocusableItem, typeof i2.KbqNavbarRectangleElement, typeof i2.KbqNavbarBento], [typeof i4.A11yModule, typeof i5.PlatformModule, typeof i6.KbqIconModule, typeof i7.KbqToolTipModule], [typeof i1.KbqNavbar, typeof i1.KbqNavbarContainer, typeof i2.KbqNavbarTitle, typeof i2.KbqNavbarItem, typeof i2.KbqNavbarBrand, typeof i2.KbqNavbarLogo, typeof i2.KbqNavbarToggle, typeof i3.KbqVerticalNavbar, typeof i2.KbqNavbarDivider, typeof i2.KbqNavbarFocusableItem, typeof i2.KbqNavbarRectangleElement, typeof i2.KbqNavbarBento]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqNavbarModule, [typeof i1.KbqNavbar, typeof i1.KbqNavbarContainer, typeof i2.KbqNavbarTitle, typeof i2.KbqNavbarItem, typeof i3.KbqNavbarBrand, typeof i2.KbqNavbarLogo, typeof i4.KbqNavbarToggle, typeof i5.KbqVerticalNavbar, typeof i2.KbqNavbarDivider, typeof i2.KbqNavbarFocusableItem, typeof i2.KbqNavbarRectangleElement, typeof i2.KbqNavbarBento], [typeof i6.A11yModule, typeof i7.PlatformModule, typeof i8.KbqIconModule, typeof i9.KbqToolTipModule], [typeof i1.KbqNavbar, typeof i1.KbqNavbarContainer, typeof i2.KbqNavbarTitle, typeof i2.KbqNavbarItem, typeof i3.KbqNavbarBrand, typeof i2.KbqNavbarLogo, typeof i4.KbqNavbarToggle, typeof i5.KbqVerticalNavbar, typeof i2.KbqNavbarDivider, typeof i2.KbqNavbarFocusableItem, typeof i2.KbqNavbarRectangleElement, typeof i2.KbqNavbarBento]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqNavbarModule>;
 }

package/navbar/public-api.d.ts

@@ -1,4 +1,6 @@
+export * from './navbar-brand.component';
 export * from './navbar-item.component';
+export * from './navbar-toggle.component';
 export * from './navbar.component';
 export * from './navbar.module';
 export * from './vertical-navbar.component';

package/navbar/vertical-navbar.component.d.ts

@@ -1,11 +1,27 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterContentInit, ChangeDetectorRef, ElementRef, QueryList } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, InjectionToken, QueryList } from '@angular/core';
 import { Subject } from 'rxjs';
 import { KbqNavbarBento, KbqNavbarItem } from './navbar-item.component';
 import { KbqFocusableComponent } from './navbar.component';
 import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/a11y";
+/** default configuration of navbar */
+/** @docs-private */
+export declare const KBQ_VERTICAL_NAVBAR_DEFAULT_CONFIGURATION: {
+    toggle: {
+        expand: string;
+        collapse: string;
+    };
+};
+/** Injection Token for providing configuration of navbar */
+/** @docs-private */
+export declare const KBQ_VERTICAL_NAVBAR_CONFIGURATION: InjectionToken<unknown>;
 export declare class KbqVerticalNavbar extends KbqFocusableComponent implements AfterContentInit {
     protected elementRef: ElementRef<HTMLElement>;
+    /** @docs-private */
+    protected readonly localeService: import("@koobiq/components/core").KbqLocaleService | null;
+    readonly externalConfiguration: unknown;
+    configuration: any;
     rectangleElements: import("@angular/core").Signal<readonly any[]>;
     items: QueryList<KbqNavbarItem>;
     bento: KbqNavbarBento;
@@ -24,6 +40,8 @@ export declare class KbqVerticalNavbar extends KbqFocusableComponent implements
     private setItemVerticalStateAndUpdateExpandedState;
     private setItemVerticalState;
     private updateItemExpandedState;
+    private updateLocaleParams;
+    private initDefaultParams;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqVerticalNavbar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqVerticalNavbar, "kbq-vertical-navbar", ["KbqVerticalNavbar"], { "openOver": { "alias": "openOver"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; }, {}, ["rectangleElements", "bento", "items"], ["[kbq-navbar-container], kbq-navbar-container", "[kbq-navbar-toggle], kbq-navbar-toggle"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqVerticalNavbar, "kbq-vertical-navbar", ["KbqVerticalNavbar"], { "openOver": { "alias": "openOver"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; }, {}, ["rectangleElements", "bento", "items"], ["[kbq-navbar-container], kbq-navbar-container", "[kbq-navbar-toggle], kbq-navbar-toggle"], false, [{ directive: typeof i1.CdkMonitorFocus; inputs: {}; outputs: {}; }]>;
 }

package/navbar/vertical-navbar.scss

@@ -3,9 +3,15 @@
 @use './navbar-theme' as *;
 
 .kbq-vertical-navbar {
-    min-width: 48px;
+    position: relative;
+
+    min-width: var(--kbq-size-5xl);
     height: 100%;
 
+    &:not(:hover, .cdk-keyboard-focused) .kbq-navbar-toggle {
+        display: none;
+    }
+
     & .kbq-navbar-container {
         flex-direction: column;
         align-items: unset;
@@ -13,17 +19,19 @@
 
     & .kbq-navbar-container + .kbq-navbar-container {
         padding-top: var(--kbq-size-xxl);
-        padding-bottom: var(--kbq-size-xxs);
+        padding-bottom: var(--kbq-size-s);
     }
 
     & .kbq-vertical-navbar__container {
+        position: relative;
+
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         height: 100%;
 
         &.kbq-collapsed {
-            width: var(--kbq-size-5xl);
+            width: var(--kbq-size-6xl);
         }
 
         &.kbq-expanded {
@@ -31,13 +39,9 @@
         }
     }
 
-    &.kbq-vertical-navbar_open-over {
-        position: relative;
-
-        & .kbq-vertical-navbar__container {
-            position: absolute;
-            z-index: 998;
-        }
+    &.kbq-vertical-navbar_open-over .kbq-vertical-navbar__container {
+        position: absolute;
+        z-index: 998;
     }
 }
 

package/notification-center/notification-center.d.ts

@@ -1,5 +1,5 @@
-import { CdkScrollable, Overlay, OverlayConfig, ScrollStrategy } from '@angular/cdk/overlay';
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, EventEmitter, InjectionToken, OnInit, TemplateRef, Type } from '@angular/core';
+import { Overlay, OverlayConfig, ScrollStrategy } from '@angular/cdk/overlay';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, EventEmitter, InjectionToken, TemplateRef, Type } from '@angular/core';
 import { KbqButton } from '@koobiq/components/button';
 import { DateAdapter, KbqPopUp, KbqPopUpTrigger, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
 import { Subscription } from 'rxjs';
@@ -73,7 +73,7 @@ export declare class KbqNotificationCenterComponent extends KbqPopUp implements
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNotificationCenterComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqNotificationCenterComponent, "kbq-notification-center", never, {}, {}, never, never, true, never>;
 }
-export declare class KbqNotificationCenterTrigger extends KbqPopUpTrigger<KbqNotificationCenterComponent> implements AfterContentInit, OnInit {
+export declare class KbqNotificationCenterTrigger extends KbqPopUpTrigger<KbqNotificationCenterComponent> implements AfterContentInit {
     /** @docs-private */
     protected scrollStrategy: () => ScrollStrategy;
     /** @docs-private */
@@ -92,8 +92,6 @@ export declare class KbqNotificationCenterTrigger extends KbqPopUpTrigger<KbqNot
     header: string | TemplateRef<any>;
     /** @docs-private */
     footer: string | TemplateRef<any>;
-    /** @docs-private */
-    private closeOnScroll;
     /** Number of unread notifications */
     get unreadItemsCounter(): import("rxjs").Observable<string>;
     /** Placement of popUp */
@@ -115,6 +113,13 @@ export declare class KbqNotificationCenterTrigger extends KbqPopUpTrigger<KbqNot
     /** Whether the trigger is disabled. */
     get disabled(): boolean;
     set disabled(value: boolean);
+    /**
+     * Additionally positions the element relative to the window side (Top, Right, Bottom and Left).
+     * If container is specified, the positioning will be relative to it.
+     * */
+    stickToWindow: PopUpPlacements.Top | PopUpPlacements.Right | PopUpPlacements.Bottom | PopUpPlacements.Left | string;
+    /** Container for additional positioning, used with stickToWindow */
+    container: HTMLElement;
     /** @docs-private */
     get hasClickTrigger(): boolean;
     /** Emits a change event whenever the placement state changes. */
@@ -130,7 +135,6 @@ export declare class KbqNotificationCenterTrigger extends KbqPopUpTrigger<KbqNot
     /** @docs-private */
     protected preventClosingByInnerScrollSubscription: Subscription;
     constructor();
-    ngOnInit(): void;
     ngAfterContentInit(): void;
     /** @docs-private */
     updateData(): void;
@@ -143,10 +147,9 @@ export declare class KbqNotificationCenterTrigger extends KbqPopUpTrigger<KbqNot
     /** @docs-private */
     updateClassMap(newPlacement?: string): void;
     /** @docs-private */
-    closingActions(): import("rxjs").Observable<void | CdkScrollable | MouseEvent>;
-    private hideIfNotInViewPort;
+    closingActions(): import("rxjs").Observable<void | import("@angular/cdk/scrolling").CdkScrollable | MouseEvent>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNotificationCenterTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNotificationCenterTrigger, "[kbqNotificationCenterTrigger]", ["kbqNotificationCenterTrigger"], { "placement": { "alias": "kbqNotificationCenterPlacement"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "panelClass": { "alias": "kbqNotificationCenterPanelClass"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "popoverMode": { "alias": "popoverMode"; "required": false; }; "popoverHeight": { "alias": "popoverHeight"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNotificationCenterTrigger, "[kbqNotificationCenterTrigger]", ["kbqNotificationCenterTrigger"], { "placement": { "alias": "kbqNotificationCenterPlacement"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "panelClass": { "alias": "kbqNotificationCenterPanelClass"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "popoverMode": { "alias": "popoverMode"; "required": false; }; "popoverHeight": { "alias": "popoverHeight"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "stickToWindow": { "alias": "stickToWindow"; "required": false; }; "container": { "alias": "container"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, true, never>;
     static ngAcceptInputType_offset: unknown;
     static ngAcceptInputType_popoverMode: unknown;
     static ngAcceptInputType_disabled: unknown;