@koobiq/components 18.36.0 → 18.38.0

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,16 +19,19 @@
 
     & .kbq-navbar-container + .kbq-navbar-container {
         padding-top: var(--kbq-size-xxl);
+        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 {
@@ -30,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/navbar-ic/navbar-ic-header.d.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, DestroyRef } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, DestroyRef } from '@angular/core';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { KbqNavbarIc } from './navbar-ic';
 import { KbqNavbarIcLogo, KbqNavbarIcTitle } from './navbar-ic-item';
@@ -7,6 +7,7 @@ export declare class KbqNavbarIcHeader extends KbqTooltipTrigger implements Afte
     protected readonly navbar: KbqNavbarIc;
     protected readonly nativeElement: HTMLElement;
     protected readonly destroyRef: DestroyRef;
+    protected readonly changeDetectorRef: ChangeDetectorRef;
     logo: KbqNavbarIcLogo;
     title: KbqNavbarIcTitle;
     get titleText(): string;
@@ -14,5 +15,5 @@ export declare class KbqNavbarIcHeader extends KbqTooltipTrigger implements Afte
     constructor();
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarIcHeader, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarIcHeader, "kbq-navbar-ic-header, [kbq-navbar-ic-header]", ["kbqNavbarIcHeader"], {}, {}, ["logo", "title"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarIcHeader, "kbq-navbar-ic-header, [kbq-navbar-ic-header]", ["kbqNavbarIcHeader"], {}, {}, ["logo", "title"], ["[kbqNavbarIcLogo]", "[kbqNavbarIcTitle]", "*"], true, never>;
 }

package/navbar-ic/navbar-ic-header.scss

@@ -42,10 +42,6 @@
     &.kbq-navbar-ic-header_interactive {
         cursor: pointer;
     }
-
-    &.kbq-collapsed .kbq-navbar-ic-title {
-        display: none;
-    }
 }
 
 a.kbq-navbar-ic-header {

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

@@ -78,6 +78,7 @@ export declare class KbqNavbarIcFocusableItem implements AfterContentInit, After
 }
 export declare class KbqNavbarIcItem extends KbqTooltipTrigger implements AfterContentInit {
     readonly rectangleElement: KbqRectangleItem;
+    readonly navbar: KbqNavbarIc;
     readonly navbarFocusableItem: KbqNavbarIcFocusableItem;
     private changeDetectorRef;
     private dropdownTrigger;

package/navbar-ic/navbar-ic-item.scss

@@ -23,10 +23,6 @@
             top: 0;
             right: 0;
         }
-
-        & .kbq-navbar-ic-item__title-container {
-            display: none;
-        }
     }
 
     & > .kbq-icon {

package/navbar-ic/navbar-ic.animation.d.ts

@@ -1,2 +1,3 @@
 import { AnimationTriggerMetadata } from '@angular/animations';
 export declare function toggleNavbarIcAnimation(): AnimationTriggerMetadata;
+export declare function toggleNavbarIcItemAnimation(): AnimationTriggerMetadata;

package/navbar-ic/navbar-ic.d.ts

@@ -8,6 +8,10 @@ export declare enum KbqExpandEvents {
     toggle = 0,
     hoverOrFocus = 1
 }
+/** minimum timeout to use KBQ_ENTER_DELAY */
+export declare const KBQ_MIN_TIMEOUT_FOR_ENTER_DELAY = 2000;
+/** delay before open navbar-ic */
+export declare const KBQ_ENTER_DELAY = 400;
 /** default configuration of navbar-ic */
 /** @docs-private */
 export declare const KBQ_NAVBAR_IC_DEFAULT_CONFIGURATION: {
@@ -58,6 +62,7 @@ export declare class KbqNavbarIc extends KbqFocusable implements AfterContentIni
     /** @docs-private */
     protected readonly localeService: import("@koobiq/components/core").KbqLocaleService | null;
     readonly externalConfiguration: unknown;
+    readonly state: BehaviorSubject<"expanded" | "collapsed" | null>;
     configuration: any;
     /** @docs-private */
     rectangleElements: import("@angular/core").Signal<readonly any[]>;
@@ -85,12 +90,14 @@ export declare class KbqNavbarIc extends KbqFocusable implements AfterContentIni
     get expandedByToggle(): boolean;
     get expandedByHoverOrFocus(): boolean;
     get currentWidth(): number;
+    private lastOpeningTime;
     constructor();
     /** @docs-private */
     ngAfterContentInit(): void;
     toggle(): void;
     /** @docs-private */
     onKeyDown(event: KeyboardEvent): void;
+    private getExpandDelay;
     protected updateTooltipForItems: () => void;
     protected updateExpandedStateForItems: () => void;
     protected updateItemExpandedState: (item: KbqNavbarIcItem) => void;

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;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.36.0",
+    "version": "18.38.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.36.0",
-        "@koobiq/angular-moment-adapter": "18.36.0",
-        "@koobiq/angular-luxon-adapter": "18.36.0",
+        "@koobiq/cdk": "18.38.0",
+        "@koobiq/angular-moment-adapter": "18.38.0",
+        "@koobiq/angular-luxon-adapter": "18.38.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^10.4.0",
         "@koobiq/tokens-builder": "3.11.0",
@@ -100,18 +100,18 @@
             "esm": "./esm2022/badge/koobiq-components-badge.mjs",
             "default": "./fesm2022/koobiq-components-badge.mjs"
         },
-        "./button": {
-            "types": "./button/index.d.ts",
-            "esm2022": "./esm2022/button/koobiq-components-button.mjs",
-            "esm": "./esm2022/button/koobiq-components-button.mjs",
-            "default": "./fesm2022/koobiq-components-button.mjs"
-        },
         "./breadcrumbs": {
             "types": "./breadcrumbs/index.d.ts",
             "esm2022": "./esm2022/breadcrumbs/koobiq-components-breadcrumbs.mjs",
             "esm": "./esm2022/breadcrumbs/koobiq-components-breadcrumbs.mjs",
             "default": "./fesm2022/koobiq-components-breadcrumbs.mjs"
         },
+        "./button": {
+            "types": "./button/index.d.ts",
+            "esm2022": "./esm2022/button/koobiq-components-button.mjs",
+            "esm": "./esm2022/button/koobiq-components-button.mjs",
+            "default": "./fesm2022/koobiq-components-button.mjs"
+        },
         "./button-toggle": {
             "types": "./button-toggle/index.d.ts",
             "esm2022": "./esm2022/button-toggle/koobiq-components-button-toggle.mjs",
@@ -304,6 +304,12 @@
             "esm": "./esm2022/radio/koobiq-components-radio.mjs",
             "default": "./fesm2022/koobiq-components-radio.mjs"
         },
+        "./resizer": {
+            "types": "./resizer/index.d.ts",
+            "esm2022": "./esm2022/resizer/koobiq-components-resizer.mjs",
+            "esm": "./esm2022/resizer/koobiq-components-resizer.mjs",
+            "default": "./fesm2022/koobiq-components-resizer.mjs"
+        },
         "./risk-level": {
             "types": "./risk-level/index.d.ts",
             "esm2022": "./esm2022/risk-level/koobiq-components-risk-level.mjs",

package/popover/popover-tokens.scss

@@ -10,6 +10,7 @@
     --kbq-popover-size-header-padding-horizontal: var(--kbq-size-xxl);
     --kbq-popover-size-header-padding-top: var(--kbq-size-l);
     --kbq-popover-size-header-padding-bottom: var(--kbq-size-xs);
+    // Added top padding to prevent the outline of the first focused field from being clipped
     --kbq-popover-size-content-padding-top: var(--kbq-size-xxl);
     --kbq-popover-size-content-padding-bottom: var(--kbq-size-3xl);
     --kbq-popover-size-content-padding-horizontal: var(--kbq-size-xxl);

package/popover/popover.component.d.ts

@@ -50,6 +50,13 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     set popoverPlacement(value: PopUpPlacements);
     get popoverPlacementPriority(): string | string[] | null;
     set popoverPlacementPriority(value: string | string[] | null);
+    /**
+     * 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 kbqPopoverStickToWindow */
+    container: HTMLElement;
     get hasBackdrop(): boolean;
     set hasBackdrop(value: boolean);
     private _hasBackdrop;
@@ -71,6 +78,10 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     private _size;
     get customClass(): string;
     set customClass(value: string);
+    /** Context for popover templates (kbqPopoverHeader, kbqPopoverContent and kbqPopoverFooter). */
+    get context(): unknown;
+    set context(ctx: unknown);
+    private _context;
     get hasCloseButton(): boolean;
     set hasCloseButton(value: boolean);
     private _hasCloseButton;
@@ -104,7 +115,7 @@ 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"], { "preventClose": { "alias": "kbqPopoverPreventClose"; "required": false; }; "defaultPaddings": { "alias": "defaultPaddings"; "required": false; }; "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 ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "preventClose": { "alias": "kbqPopoverPreventClose"; "required": false; }; "defaultPaddings": { "alias": "defaultPaddings"; "required": false; }; "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "stickToWindow": { "alias": "kbqPopoverStickToWindow"; "required": false; }; "container": { "alias": "container"; "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; }; "context": { "alias": "kbqPopoverContext"; "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_preventClose: unknown;
     static ngAcceptInputType_defaultPaddings: unknown;
     static ngAcceptInputType_arrow: unknown;

package/popover/popover.scss

@@ -6,7 +6,9 @@
 @use './popover-theme' as *;
 
 $arrow-size: 12px;
-$trigger-margin: 9px;
+
+$arrow-offset: calc(($arrow-size - 1px) / -2);
+$arrow-padding: 24px;
 
 .kbq-popover {
     position: relative;
@@ -130,9 +132,6 @@ $trigger-margin: 9px;
     transform: rotate(45deg);
 }
 
-$arrow-offset: calc(($arrow-size - 1px) / -2);
-$arrow-padding: calc(18px - $trigger-margin);
-
 @include pop-up.popup-arrow-positions(kbq-popover, $arrow-offset, $arrow-padding);
 
 .kbq-popover__close {