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

Author: lskramarov

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,10 @@ export abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
 
     triggerName: string;
 
+    overlayRef: OverlayRef | null;
+
+    stickToWindow: PopUpPlacements.Top | PopUpPlacements.Right | PopUpPlacements.Bottom | PopUpPlacements.Left | string;
+
     abstract disabled: boolean;
     abstract arrow: boolean;
     abstract trigger: string;
@@ -133,7 +137,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,20 @@ 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;
+
+        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,13 @@ export class KbqNotificationCenterTrigger
         }
     }
 
+    @Input() stickToWindow:
+        | PopUpPlacements.Top
+        | PopUpPlacements.Right
+        | PopUpPlacements.Bottom
+        | PopUpPlacements.Left
+        | string;
+
     /** @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-popover/notification-center-popover-example.html

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