fix: docs examples

lskramarov · lskramarov · commit a8b47b7d0fad · 2025-11-21T19:40:42.000+03:00
diff --git a/apps/docs/src/app/components/live-example-viewer/docs-live-example-viewer.scss b/apps/docs/src/app/components/live-example-viewer/docs-live-example-viewer.scss
@@ -1,4 +1,4 @@
-.docs-live-example__example {
+.docs-live-example__example:not(.docs-live-example__example_notification-center-popover) {
     padding: var(--kbq-size-xl);
 
     overflow: auto;
diff --git a/packages/components/core/pop-up/pop-up-trigger.ts b/packages/components/core/pop-up/pop-up-trigger.ts
@@ -116,6 +116,8 @@ export abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
 
     stickToWindow: PopUpPlacements.Top | PopUpPlacements.Right | PopUpPlacements.Bottom | PopUpPlacements.Left | string;
 
+    container: HTMLElement;
+
     abstract disabled: boolean;
     abstract arrow: boolean;
     abstract trigger: string;
diff --git a/packages/components/core/pop-up/pop-up.ts b/packages/components/core/pop-up/pop-up.ts
@@ -175,7 +175,33 @@ export abstract class KbqPopUp implements OnDestroy {
 
         this.arrow = false;
 
-        this.renderer.setStyle(this.trigger.overlayRef?.overlayElement, this.trigger.stickToWindow, 0);
-        this.renderer.setStyle(this.trigger.overlayRef?.overlayElement, oppositeSide, 'unset');
+        if (this.trigger.container) {
+            const width = this.elementRef.nativeElement.getBoundingClientRect().width;
+            const height = this.elementRef.nativeElement.getBoundingClientRect().height;
+
+            if (this.trigger.stickToWindow === PopUpPlacements.Right) {
+                const left = this.trigger.container.getBoundingClientRect().right - width;
+
+                this.renderer.setStyle(this.trigger.overlayRef?.overlayElement, 'left', `${left}px`);
+            } else if (this.trigger.stickToWindow === PopUpPlacements.Left) {
+                const left = this.trigger.container.getBoundingClientRect().left;
+
+                this.renderer.setStyle(this.trigger.overlayRef?.overlayElement, 'left', `${left}px`);
+            } else if (this.trigger.stickToWindow === PopUpPlacements.Top) {
+                const top = this.trigger.container.getBoundingClientRect().top;
+
+                this.renderer.setStyle(this.trigger.overlayRef?.overlayElement, 'top', `${top}px`);
+            } else if (this.trigger.stickToWindow === PopUpPlacements.Bottom) {
+                const top = this.trigger.container.getBoundingClientRect().bottom - height;
+
+                this.renderer.setStyle(this.trigger.overlayRef?.overlayElement, 'top', `${top}px`);
+            }
+
+            this.renderer.setStyle(this.trigger.overlayRef?.overlayElement, 'right', 'unset');
+            // this.renderer.setStyle(this.trigger.overlayRef?.overlayElement, 'bottom', 'unset');
+        } else {
+            this.renderer.setStyle(this.trigger.overlayRef?.overlayElement, this.trigger.stickToWindow, 0);
+            this.renderer.setStyle(this.trigger.overlayRef?.overlayElement, oppositeSide, 'unset');
+        }
     }
 }
diff --git a/packages/components/notification-center/notification-center.ts b/packages/components/notification-center/notification-center.ts
@@ -331,6 +331,8 @@ export class KbqNotificationCenterTrigger
         | PopUpPlacements.Left
         | string;
 
+    @Input() container: HTMLElement;
+
     /** @docs-private */
     get hasClickTrigger(): boolean {
         return this.trigger.includes(PopUpTriggers.Click);
diff --git a/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html b/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html
@@ -80,8 +80,9 @@
                 #trigger="kbqNotificationCenterTrigger"
                 kbq-navbar-ic-item
                 kbqNotificationCenterTrigger
+                [stickToWindow]="'bottom'"
+                [container]="container"
                 [popoverHeight]="'500px'"
-                [kbqNotificationCenterPanelClass]="'example-notification-center-panel'"
             >
                 <i kbq-icon="kbq-bell_16"></i>
                 <div kbqNavbarIcTitle>Notifications</div>
diff --git a/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.ts b/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.ts
@@ -5,7 +5,13 @@ import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { LuxonDateModule } from '@koobiq/angular-luxon-adapter/adapter';
 import { KbqBadgeModule } from '@koobiq/components/badge';
 import { KbqButtonModule, KbqButtonStyles } from '@koobiq/components/button';
-import { KbqComponentColors, KbqFormattersModule, PopUpPlacements, ThemeService } from '@koobiq/components/core';
+import {
+    KbqComponentColors,
+    KbqFormattersModule,
+    kbqInjectNativeElement,
+    PopUpPlacements,
+    ThemeService
+} from '@koobiq/components/core';
 import { KbqDropdownModule } from '@koobiq/components/dropdown';
 import { KbqEmptyStateModule } from '@koobiq/components/empty-state';
 import { KbqIconModule } from '@koobiq/components/icon';
@@ -40,11 +46,6 @@ enum NavbarIcItems {
     standalone: true,
     selector: 'notification-center-empty-example',
     templateUrl: 'notification-center-empty-example.html',
-    styles: `
-        ::ng-deep .example-notification-center-panel {
-            margin-top: -98px;
-        }
-    `,
     imports: [
         KbqNotificationCenterModule,
         KbqNavbarIcModule,
@@ -63,6 +64,7 @@ enum NavbarIcItems {
 })
 export class NotificationCenterEmptyExample {
     readonly notificationCenterService = inject(KbqNotificationCenterService);
+    container = kbqInjectNativeElement();
 
     protected readonly currentTheme = toSignal(
         inject(ThemeService, { optional: true })?.current.pipe(
diff --git a/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html b/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html
@@ -85,8 +85,9 @@
                 #trigger="kbqNotificationCenterTrigger"
                 kbq-navbar-ic-item
                 kbqNotificationCenterTrigger
+                [stickToWindow]="'bottom'"
+                [container]="container"
                 [popoverHeight]="'500px'"
-                [kbqNotificationCenterPanelClass]="'example-notification-center-panel'"
             >
                 <i kbq-icon="kbq-bell_16"></i>
                 <div kbqNavbarIcTitle>Notifications</div>
diff --git a/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.ts b/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.ts
@@ -5,7 +5,13 @@ import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { LuxonDateModule } from '@koobiq/angular-luxon-adapter/adapter';
 import { KbqBadgeModule } from '@koobiq/components/badge';
 import { KbqButtonModule, KbqButtonStyles } from '@koobiq/components/button';
-import { KbqComponentColors, KbqFormattersModule, PopUpPlacements, ThemeService } from '@koobiq/components/core';
+import {
+    KbqComponentColors,
+    KbqFormattersModule,
+    kbqInjectNativeElement,
+    PopUpPlacements,
+    ThemeService
+} from '@koobiq/components/core';
 import { KbqDropdownModule } from '@koobiq/components/dropdown';
 import { KbqEmptyStateModule } from '@koobiq/components/empty-state';
 import { KbqIconModule } from '@koobiq/components/icon';
@@ -42,11 +48,6 @@ enum NavbarIcItems {
     standalone: true,
     selector: 'notification-center-error-example',
     templateUrl: 'notification-center-error-example.html',
-    styles: `
-        ::ng-deep .example-notification-center-panel {
-            margin-top: -98px;
-        }
-    `,
     imports: [
         KbqNotificationCenterModule,
         KbqNavbarIcModule,
@@ -66,6 +67,7 @@ enum NavbarIcItems {
 })
 export class NotificationCenterErrorExample {
     notificationService = inject(KbqNotificationCenterService);
+    container = kbqInjectNativeElement();
 
     @ViewChild('actionsTemplate') actionsTemplateRef: TemplateRef<any>;
 
diff --git a/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html b/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html
@@ -92,8 +92,9 @@
                 #trigger="kbqNotificationCenterTrigger"
                 kbq-navbar-ic-item
                 kbqNotificationCenterTrigger
+                [stickToWindow]="'bottom'"
+                [container]="container"
                 [popoverHeight]="'500px'"
-                [kbqNotificationCenterPanelClass]="'example-notification-center-panel'"
             >
                 <i kbq-icon="kbq-bell_16"></i>
                 <div kbqNavbarIcTitle>Notifications</div>
diff --git a/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.ts b/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.ts
@@ -13,11 +13,18 @@ import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { LuxonDateModule } from '@koobiq/angular-luxon-adapter/adapter';
 import { KbqBadgeModule } from '@koobiq/components/badge';
 import { KbqButtonModule, KbqButtonStyles } from '@koobiq/components/button';
-import { KbqComponentColors, KbqFormattersModule, PopUpPlacements, ThemeService } from '@koobiq/components/core';
+import {
+    KbqComponentColors,
+    KbqFormattersModule,
+    kbqInjectNativeElement,
+    PopUpPlacements,
+    ThemeService
+} from '@koobiq/components/core';
 import { KbqDropdownModule } from '@koobiq/components/dropdown';
 import { KbqEmptyStateModule } from '@koobiq/components/empty-state';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { KbqLinkModule } from '@koobiq/components/link';
+import { KbqNavbarModule } from '@koobiq/components/navbar';
 import { KbqNavbarIcModule } from '@koobiq/components/navbar-ic';
 import { KbqNotificationCenterModule, KbqNotificationCenterService } from '@koobiq/components/notification-center';
 import { KbqToastStyle } from '@koobiq/components/toast';
@@ -50,11 +57,6 @@ enum NavbarIcItems {
     standalone: true,
     selector: 'notification-center-overview-example',
     templateUrl: 'notification-center-overview-example.html',
-    styles: `
-        ::ng-deep .example-notification-center-panel {
-            margin-top: -98px;
-        }
-    `,
     imports: [
         KbqNotificationCenterModule,
         KbqNavbarIcModule,
@@ -67,11 +69,13 @@ enum NavbarIcItems {
         AsyncPipe,
         KbqLinkModule,
         LuxonDateModule,
-        KbqFormattersModule
+        KbqFormattersModule,
+        KbqNavbarModule
     ]
 })
 export class NotificationCenterOverviewExample implements AfterViewInit {
     notificationService = inject(KbqNotificationCenterService);
+    container = kbqInjectNativeElement();
 
     @ViewChild('actionsTemplate') actionsTemplateRef!: TemplateRef<any>;
     @ViewChild('captionTemplate') captionTemplateRef: TemplateRef<any>;
diff --git a/packages/docs-examples/components/notification-center/notification-center-popover/notification-center-popover-example.html b/packages/docs-examples/components/notification-center/notification-center-popover/notification-center-popover-example.html
@@ -21,7 +21,7 @@
             <i kbq-icon="kbq-dashboard_16"></i>
         </button>
 
-        <kbq-navbar-item [collapsable]="false">
+        <kbq-navbar-item>
             <kbq-navbar-title>Issues</kbq-navbar-title>
         </kbq-navbar-item>
 
@@ -35,6 +35,7 @@
             #trigger="kbqNotificationCenterTrigger"
             kbqNotificationCenterTrigger
             [stickToWindow]="'right'"
+            [container]="container"
             [popoverMode]="true"
             [popoverHeight]="'430px'"
         >
diff --git a/packages/docs-examples/components/notification-center/notification-center-popover/notification-center-popover-example.ts b/packages/docs-examples/components/notification-center/notification-center-popover/notification-center-popover-example.ts
@@ -13,7 +13,13 @@ import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { LuxonDateModule } from '@koobiq/angular-luxon-adapter/adapter';
 import { KbqBadgeModule } from '@koobiq/components/badge';
 import { KbqButtonModule, KbqButtonStyles } from '@koobiq/components/button';
-import { KbqComponentColors, KbqFormattersModule, PopUpPlacements, ThemeService } from '@koobiq/components/core';
+import {
+    KbqComponentColors,
+    KbqFormattersModule,
+    kbqInjectNativeElement,
+    PopUpPlacements,
+    ThemeService
+} from '@koobiq/components/core';
 import { KbqDividerModule } from '@koobiq/components/divider';
 import { KbqDropdownModule } from '@koobiq/components/dropdown';
 import { KbqEmptyStateModule } from '@koobiq/components/empty-state';
@@ -75,6 +81,7 @@ enum NavbarIcItems {
 })
 export class NotificationCenterPopoverExample implements AfterViewInit {
     notificationService = inject(KbqNotificationCenterService);
+    container = kbqInjectNativeElement();
 
     @ViewChild('actionsTemplate') actionsTemplateRef: TemplateRef<any>;
 
diff --git a/tools/public_api_guard/components/core.api.md b/tools/public_api_guard/components/core.api.md
@@ -2502,6 +2502,8 @@ export abstract class KbqPopUp implements OnDestroy {
     // (undocumented)
     protected readonly renderer: Renderer2;
     // (undocumented)
+    protected setStickPosition(): void;
+    // (undocumented)
     show(delay: number): void;
     // (undocumented)
     trigger: KbqPopUpTrigger<unknown>;
@@ -2534,6 +2536,8 @@ export abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     // (undocumented)
     protected closingActionsSubscription: Subscription;
     // (undocumented)
+    container: HTMLElement;
+    // (undocumented)
     abstract content: string | TemplateRef<any>;
     // (undocumented)
     protected _content: string | TemplateRef<any>;
@@ -2602,7 +2606,7 @@ export abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     // (undocumented)
     protected abstract overlayConfig: OverlayConfig;
     // (undocumented)
-    protected overlayRef: OverlayRef | null;
+    overlayRef: OverlayRef | null;
     // (undocumented)
     protected placement: PopUpPlacements;
     // (undocumented)
@@ -2625,6 +2629,8 @@ export abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     // (undocumented)
     show(delay?: number): void;
     // (undocumented)
+    stickToWindow: PopUpPlacements.Top | PopUpPlacements.Right | PopUpPlacements.Bottom | PopUpPlacements.Left | string;
+    // (undocumented)
     protected strategy: FlexibleConnectedPositionStrategy;
     // (undocumented)
     touchendHandler(): void;
diff --git a/tools/public_api_guard/components/notification-center.api.md b/tools/public_api_guard/components/notification-center.api.md
@@ -145,6 +145,8 @@ export class KbqNotificationCenterTrigger extends KbqPopUpTrigger<KbqNotificatio
     arrow: boolean;
     backdropClass: string;
     closingActions(): Observable<void | CdkScrollable | MouseEvent>;
+    // (undocumented)
+    container: HTMLElement;
     content: string | TemplateRef<any>;
     customClass: string;
     get disabled(): boolean;
@@ -176,14 +178,16 @@ export class KbqNotificationCenterTrigger extends KbqPopUpTrigger<KbqNotificatio
     protected preventClosingByInnerScrollSubscription: Subscription;
     protected scrollStrategy: () => ScrollStrategy;
     protected readonly service: KbqNotificationCenterService;
+    // (undocumented)
+    stickToWindow: PopUpPlacements.Top | PopUpPlacements.Right | PopUpPlacements.Bottom | PopUpPlacements.Left | string;
     trigger: string;
     get unreadItemsCounter(): Observable<string>;
     updateClassMap(newPlacement?: string): void;
     updateData(): void;
     updatePosition(reapplyPosition?: boolean): void;
     readonly visibleChange: EventEmitter<boolean>;
     // (undocumented)
-    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>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNotificationCenterTrigger, never>;
 }
diff --git a/tools/public_api_guard/components/popover.api.md b/tools/public_api_guard/components/popover.api.md
@@ -238,6 +238,8 @@ export class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> impl
     get size(): PopUpSizes;
     set size(value: PopUpSizes);
     // (undocumented)
+    stickToWindow: PopUpPlacements.Top | PopUpPlacements.Right | PopUpPlacements.Bottom | PopUpPlacements.Left | string;
+    // (undocumented)
     get trigger(): string;
     set trigger(value: string);
     // (undocumented)
@@ -248,7 +250,7 @@ export class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> impl
     // (undocumented)
     readonly visibleChange: EventEmitter<boolean>;
     // (undocumented)
-    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; }; "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 ɵ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; }; "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>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, never>;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-.docs-live-example__example {`
	`1`	`+.docs-live-example__example:not(.docs-live-example__example_notification-center-popover) {`
`2`	`2`	`padding: var(--kbq-size-xl);`
`3`	`3`
`4`	`4`	`overflow: auto;`