feat(popover, notification-center): added 'stickToWindow' (#DS-3621)

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;

packages/components-dev/popover/module.ts

@@ -100,6 +100,7 @@ export class DevApp {
     selectedTrigger: string = this.TRIGGERS.CLICK;
     selectedSize: PopUpSizes = PopUpSizes.Medium;
     layoutClass: string = 'layout-row layout-align-center-center';
+    stickToWindow: PopUpPlacements;
     content: string = 'button text';
     userDefinedPlacementPriority: string[] = ['bottom', 'right'];
     multipleSelected: string[] = [];

packages/components-dev/popover/template.html

@@ -139,16 +139,19 @@
                 </kbq-form-field>
             </div>
 
-            <div
-                class="kbq-form__row"
-                [style.display]="selectedElement === ELEMENTS.CONFIRM_BUTTON ? 'initial' : 'none'"
-            >
-                <label for="layout" class="kbq-form__label">Set confirm button text</label>
+            <div class="kbq-form__row">
+                <label for="layout" class="kbq-form__label">Stick to window</label>
 
                 <kbq-form-field id="layout" class="kbq-form__control">
-                    <input kbqInput [(ngModel)]="confirmButtonText" />
+                    <kbq-select [placeholder]="'Select layout'" [(value)]="stickToWindow">
+                        <kbq-option [value]="popUpPlacements.Top">{{ popUpPlacements.Top }}</kbq-option>
+                        <kbq-option [value]="popUpPlacements.Right">{{ popUpPlacements.Right }}</kbq-option>
+                        <kbq-option [value]="popUpPlacements.Bottom">{{ popUpPlacements.Bottom }}</kbq-option>
+                        <kbq-option [value]="popUpPlacements.Left">{{ popUpPlacements.Left }}</kbq-option>
+                    </kbq-select>
                 </kbq-form-field>
             </div>
+            <br />
         </div>
         <div class="flex dev-left-padding layout-align-center-center">
             <label for="trigger" class="flex kbq-form__label">Choose kbqPlacement</label>
@@ -309,6 +312,7 @@ <h3>Configuration:</h3>
                         [kbqPopoverPlacementPriority]="multipleSelected"
                         [kbqPopoverSize]="selectedSize"
                         [kbqTrigger]="selectedTrigger"
+                        [kbqPopoverStickToWindow]="stickToWindow"
                         (kbqPopoverPlacementChange)="onStrategyPlacementChange($event)"
                         (kbqPopoverVisibleChange)="onPopoverVisibleChange($event)"
                     >

packages/components/core/pop-up/pop-up-trigger.ts

@@ -112,6 +112,12 @@ export abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
 
     triggerName: string;
 
+    overlayRef: OverlayRef | null;
+
+    stickToWindow: PopUpPlacements.Top | PopUpPlacements.Right | PopUpPlacements.Bottom | PopUpPlacements.Left | string;
+
+    container: HTMLElement;
+
     abstract disabled: boolean;
     abstract arrow: boolean;
     abstract trigger: string;
@@ -133,7 +139,6 @@ export abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     protected _disabled: boolean;
     protected _customClass: string;
 
-    protected overlayRef: OverlayRef | null;
     protected portal: ComponentPortal<T>;
     protected instance: any | null;
 

packages/components/core/pop-up/pop-up.ts

@@ -11,7 +11,7 @@ import {
     TemplateRef
 } from '@angular/core';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
-import { PopUpVisibility } from './constants';
+import { PopUpPlacements, PopUpVisibility } from './constants';
 import { KbqPopUpTrigger } from './pop-up-trigger';
 
 @Directive({
@@ -162,4 +162,46 @@ export abstract class KbqPopUp implements OnDestroy {
     protected addEventListenerForHide() {
         this.elementRef.nativeElement.addEventListener('mouseleave', () => this.hide(0));
     }
+
+    protected setStickPosition() {
+        const oppositeSide = {
+            [PopUpPlacements.Top]: PopUpPlacements.Bottom,
+            [PopUpPlacements.Bottom]: PopUpPlacements.Top,
+            [PopUpPlacements.Right]: PopUpPlacements.Left,
+            [PopUpPlacements.Left]: PopUpPlacements.Right
+        }[this.trigger.stickToWindow];
+
+        if (!this.trigger.stickToWindow || !oppositeSide) return;
+
+        this.arrow = false;
+
+        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');
+        }
+    }
 }

packages/components/notification-center/notification-center.ts

@@ -177,6 +177,8 @@ export class KbqNotificationCenterComponent extends KbqPopUp implements AfterVie
                     `${this.offset!.toString()}px`
                 );
             }
+
+            this.setStickPosition();
         });
 
         this.service.changes.subscribe(() => this.changeDetectorRef.markForCheck());
@@ -322,6 +324,15 @@ export class KbqNotificationCenterTrigger
         }
     }
 
+    @Input() stickToWindow:
+        | PopUpPlacements.Top
+        | PopUpPlacements.Right
+        | PopUpPlacements.Bottom
+        | PopUpPlacements.Left
+        | string;
+
+    @Input() container: HTMLElement;
+
     /** @docs-private */
     get hasClickTrigger(): boolean {
         return this.trigger.includes(PopUpTriggers.Click);

packages/components/popover/popover.component.ts

@@ -95,6 +95,8 @@ export class KbqPopoverComponent extends KbqPopUp implements AfterViewInit {
                     this.prefix,
                     `${this.offset!.toString()}px`
                 );
+
+                this.setStickPosition();
             }
         });
     }
@@ -108,7 +110,7 @@ export class KbqPopoverComponent extends KbqPopUp implements AfterViewInit {
 
         this.isContentTopOverflow = scrollTop > 0;
 
-        this.isContentBottomOverflow = scrollTop + offsetHeight < scrollHeight;
+        this.isContentBottomOverflow = Math.round(scrollTop + offsetHeight) < scrollHeight;
 
         super.detectChanges();
     }
@@ -195,6 +197,13 @@ export class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> impl
         super.updatePlacementPriority(value);
     }
 
+    @Input('kbqPopoverStickToWindow') stickToWindow:
+        | PopUpPlacements.Top
+        | PopUpPlacements.Right
+        | PopUpPlacements.Bottom
+        | PopUpPlacements.Left
+        | string;
+
     @Input()
     get hasBackdrop(): boolean {
         return this._hasBackdrop;

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>

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(

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>

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>;
 

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>

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>;

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>
 
@@ -34,6 +34,8 @@
         <kbq-navbar-item
             #trigger="kbqNotificationCenterTrigger"
             kbqNotificationCenterTrigger
+            [stickToWindow]="'right'"
+            [container]="container"
             [popoverMode]="true"
             [popoverHeight]="'430px'"
         >

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>;