feat(pop-up): refactoring KbqPopUpTrigger, KbqPopUp (#DS-2852)

Author: lskramarov

.commitlintrc.js

@@ -40,6 +40,7 @@ const scope_types = [
     'popover',
     'progress-bar',
     'progress-spinner',
+    'pop-up',
     'radio',
     'schematics',
     'scrolling',

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

@@ -1,38 +1,37 @@
-import { ElementRef, inject, Renderer2 } from '@angular/core';
+import { Renderer2 } from '@angular/core';
 
-export const applyPopupMargins = (element: ElementRef, name: string, value: string) => {
-    const renderer = inject(Renderer2);
-    const classList = element.nativeElement.classList;
+export const applyPopupMargins = (renderer: Renderer2, element: HTMLElement, name: string, value: string) => {
+    const classList = element.classList;
 
     if (
         classList.contains(`${name}_placement-top`) ||
         classList.contains(`${name}_placement-top-left`) ||
         classList.contains(`${name}_placement-top-right`)
     ) {
-        renderer.setStyle(element.nativeElement, 'margin-bottom', value);
+        renderer.setStyle(element, 'margin-bottom', value);
     }
 
     if (
         classList.contains(`${name}_placement-right`) ||
         classList.contains(`${name}_placement-right-top`) ||
         classList.contains(`${name}_placement-right-bottom`)
     ) {
-        renderer.setStyle(element.nativeElement, 'margin-left', value);
+        renderer.setStyle(element, 'margin-left', value);
     }
 
     if (
         classList.contains(`${name}_placement-bottom`) ||
         classList.contains(`${name}_placement-bottom-left`) ||
         classList.contains(`${name}_placement-bottom-right`)
     ) {
-        renderer.setStyle(element.nativeElement, 'margin-top', value);
+        renderer.setStyle(element, 'margin-top', value);
     }
 
     if (
         classList.contains(`${name}_placement-left`) ||
         classList.contains(`${name}_placement-left-top`) ||
         classList.contains(`${name}_placement-left-bottom`)
     ) {
-        renderer.setStyle(element.nativeElement, 'margin-right', value);
+        renderer.setStyle(element, 'margin-right', value);
     }
 };

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

@@ -7,7 +7,8 @@ import {
     Overlay,
     OverlayConfig,
     OverlayRef,
-    ScrollDispatcher
+    ScrollDispatcher,
+    ScrollStrategy
 } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import {
@@ -19,7 +20,8 @@ import {
     OnInit,
     TemplateRef,
     Type,
-    ViewContainerRef
+    ViewContainerRef,
+    inject
 } from '@angular/core';
 import { ENTER, ESCAPE, SPACE } from '@koobiq/cdk/keycodes';
 import { Observable, Subject, Subscription } from 'rxjs';
@@ -34,6 +36,15 @@ import { PopUpPlacements, PopUpTriggers } from './constants';
 
 @Directive()
 export abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
+    protected overlay: Overlay = inject(Overlay);
+    protected elementRef: ElementRef = inject(ElementRef);
+    protected ngZone: NgZone = inject(NgZone);
+    protected scrollDispatcher: ScrollDispatcher = inject(ScrollDispatcher);
+    protected hostView: ViewContainerRef = inject(ViewContainerRef);
+    protected direction = inject(Directionality, { optional: true });
+
+    protected abstract scrollStrategy: () => ScrollStrategy;
+
     isOpen: boolean = false;
 
     enterDelay: number = 0;
@@ -66,22 +77,10 @@ export abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     protected listeners = new Map<string, EventListener>();
     protected closingActionsSubscription: Subscription;
 
-    protected readonly availablePositions: { [key: string]: ConnectionPositionPair };
+    protected readonly availablePositions: { [key: string]: ConnectionPositionPair } = POSITION_MAP;
     protected readonly destroyed = new Subject<void>();
     protected triggerName: string;
 
-    protected constructor(
-        protected overlay: Overlay,
-        protected elementRef: ElementRef,
-        protected ngZone: NgZone,
-        protected scrollDispatcher: ScrollDispatcher,
-        protected hostView: ViewContainerRef,
-        protected scrollStrategy,
-        protected direction?: Directionality
-    ) {
-        this.availablePositions = POSITION_MAP;
-    }
-
     abstract updateClassMap(newPlacement?: string): void;
 
     abstract updateData(): void;
@@ -217,7 +216,7 @@ export abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
 
         this.overlayRef = this.overlay.create({
             ...this.overlayConfig,
-            direction: this.direction,
+            direction: this.direction || undefined,
             positionStrategy: strategy,
             scrollStrategy: this.scrollStrategy()
         });

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

@@ -1,10 +1,13 @@
 import { AnimationEvent } from '@angular/animations';
-import { ChangeDetectorRef, Directive, EventEmitter, OnDestroy, TemplateRef } from '@angular/core';
+import { ChangeDetectorRef, Directive, EventEmitter, inject, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { PopUpVisibility } from './constants';
 
 @Directive()
 export abstract class KbqPopUp implements OnDestroy {
+    protected renderer: Renderer2 = inject(Renderer2);
+    protected changeDetectorRef: ChangeDetectorRef = inject(ChangeDetectorRef);
+
     header: string | TemplateRef<any>;
     content: string | TemplateRef<any>;
     context: { $implicit: any } | null;
@@ -29,8 +32,6 @@ export abstract class KbqPopUp implements OnDestroy {
     private showTimeoutId: any;
     private hideTimeoutId: any;
 
-    protected constructor(private changeDetectorRef: ChangeDetectorRef) {}
-
     ngOnDestroy() {
         clearTimeout(this.showTimeoutId);
         clearTimeout(this.hideTimeoutId);

packages/components/ellipsis-center/ellipsis-center.directive.ts

@@ -1,21 +1,5 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { Directionality } from '@angular/cdk/bidi';
-import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
-import {
-    AfterViewInit,
-    Directive,
-    ElementRef,
-    Inject,
-    Input,
-    NgModule,
-    NgZone,
-    OnDestroy,
-    OnInit,
-    Optional,
-    Renderer2,
-    ViewContainerRef
-} from '@angular/core';
-import { KBQ_TOOLTIP_SCROLL_STRATEGY, KbqTooltipTrigger } from '@koobiq/components/tooltip';
+import { AfterViewInit, Directive, Input, NgModule, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { Subject, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 
@@ -44,18 +28,8 @@ export class KbqEllipsisCenterDirective extends KbqTooltipTrigger implements OnI
 
     private readonly debounceInterval: number = 50;
 
-    constructor(
-        overlay: Overlay,
-        elementRef: ElementRef<HTMLElement>,
-        ngZone: NgZone,
-        scrollDispatcher: ScrollDispatcher,
-        hostView: ViewContainerRef,
-        @Inject(KBQ_TOOLTIP_SCROLL_STRATEGY) scrollStrategy: any,
-        @Optional() direction: Directionality,
-        focusMonitor: FocusMonitor,
-        private renderer: Renderer2
-    ) {
-        super(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction, focusMonitor);
+    constructor(private renderer: Renderer2) {
+        super();
     }
 
     override ngOnInit(): void {

packages/components/form-field/password-toggle.ts

@@ -1,25 +1,18 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { Directionality } from '@angular/cdk/bidi';
-import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
 import {
     AfterViewInit,
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
-    ElementRef,
     Inject,
     Input,
-    NgZone,
-    Optional,
     TemplateRef,
     ViewChild,
-    ViewContainerRef,
     ViewEncapsulation,
     forwardRef
 } from '@angular/core';
 import { KBQ_FORM_FIELD_REF, KbqFormFieldRef, PopUpTriggers } from '@koobiq/components/core';
 import { KbqIconButton } from '@koobiq/components/icon';
-import { KBQ_TOOLTIP_SCROLL_STRATEGY, KbqTooltipTrigger } from '@koobiq/components/tooltip';
+import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 
 @Component({
     selector: `kbq-password-toggle`,
@@ -66,18 +59,10 @@ export class KbqPasswordToggle extends KbqTooltipTrigger implements AfterViewIni
     }
 
     constructor(
-        overlay: Overlay,
-        elementRef: ElementRef,
-        ngZone: NgZone,
-        scrollDispatcher: ScrollDispatcher,
-        hostView: ViewContainerRef,
-        @Inject(KBQ_TOOLTIP_SCROLL_STRATEGY) scrollStrategy,
-        focusMonitor: FocusMonitor,
-        @Optional() direction: Directionality,
         @Inject(forwardRef(() => KBQ_FORM_FIELD_REF)) private formField: KbqFormFieldRef,
         private changeDetector: ChangeDetectorRef
     ) {
-        super(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction, focusMonitor);
+        super();
 
         this.trigger = `${PopUpTriggers.Hover}`;
     }

packages/components/navbar/navbar-item.component.ts

@@ -1,7 +1,5 @@
 import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
-import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
 import { DOCUMENT } from '@angular/common';
 import {
     AfterContentInit,
@@ -18,7 +16,6 @@ import {
     OnDestroy,
     Optional,
     TemplateRef,
-    ViewContainerRef,
     ViewEncapsulation
 } from '@angular/core';
 import { IFocusableOption } from '@koobiq/cdk/a11y';
@@ -28,7 +25,7 @@ import { PopUpPlacements, PopUpTriggers, toBoolean } from '@koobiq/components/co
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqFormField } from '@koobiq/components/form-field';
 import { KbqIcon } from '@koobiq/components/icon';
-import { KBQ_TOOLTIP_SCROLL_STRATEGY, KbqTooltipTrigger, TooltipModifier } from '@koobiq/components/tooltip';
+import { KbqTooltipTrigger, TooltipModifier } from '@koobiq/components/tooltip';
 import { EMPTY, Subject, merge } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
 import { KbqVerticalNavbar } from './vertical-navbar.component';
@@ -456,18 +453,10 @@ export class KbqNavbarItem extends KbqTooltipTrigger implements AfterContentInit
         public rectangleElement: KbqNavbarRectangleElement,
         public navbarFocusableItem: KbqNavbarFocusableItem,
         private changeDetectorRef: ChangeDetectorRef,
-        overlay: Overlay,
-        elementRef: ElementRef,
-        ngZone: NgZone,
-        scrollDispatcher: ScrollDispatcher,
-        hostView: ViewContainerRef,
-        @Inject(KBQ_TOOLTIP_SCROLL_STRATEGY) scrollStrategy,
-        focusMonitor: FocusMonitor,
-        @Optional() direction: Directionality,
         @Optional() private dropdownTrigger: KbqDropdownTrigger,
         @Optional() private bento: KbqNavbarBento
     ) {
-        super(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction, focusMonitor);
+        super();
 
         if (this.hasDropDownTrigger) {
             this.dropdownTrigger.openByArrowDown = false;
@@ -588,17 +577,9 @@ export class KbqNavbarToggle extends KbqTooltipTrigger implements OnDestroy {
     constructor(
         public navbar: KbqVerticalNavbar,
         private changeDetectorRef: ChangeDetectorRef,
-        overlay: Overlay,
-        elementRef: ElementRef,
-        ngZone: NgZone,
-        scrollDispatcher: ScrollDispatcher,
-        hostView: ViewContainerRef,
-        @Inject(KBQ_TOOLTIP_SCROLL_STRATEGY) scrollStrategy,
-        focusMonitor: FocusMonitor,
-        @Optional() direction: Directionality,
         @Optional() @Inject(DOCUMENT) private document: any
     ) {
-        super(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction, focusMonitor);
+        super();
 
         this.placement = PopUpPlacements.Right;
 

packages/components/popover/popover-confirm.component.ts

@@ -1,25 +1,19 @@
-import { Directionality } from '@angular/cdk/bidi';
-import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
 import {
     ChangeDetectionStrategy,
-    ChangeDetectorRef,
     Component,
     Directive,
-    ElementRef,
     EventEmitter,
     Inject,
     InjectionToken,
     Input,
-    NgZone,
     Optional,
     Output,
-    ViewContainerRef,
     ViewEncapsulation
 } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { kbqPopoverAnimations } from './popover-animations';
-import { KBQ_POPOVER_SCROLL_STRATEGY, KbqPopoverComponent, KbqPopoverTrigger } from './popover.component';
+import { KbqPopoverComponent, KbqPopoverTrigger } from './popover.component';
 
 export const KBQ_POPOVER_CONFIRM_TEXT = new InjectionToken<string>('');
 export const KBQ_POPOVER_CONFIRM_BUTTON_TEXT = new InjectionToken<string>('');
@@ -39,8 +33,8 @@ export class KbqPopoverConfirmComponent extends KbqPopoverComponent {
 
     confirmText: string;
 
-    constructor(changeDetectorRef: ChangeDetectorRef) {
-        super(changeDetectorRef);
+    constructor() {
+        super();
     }
 }
 
@@ -83,17 +77,10 @@ export class KbqPopoverConfirmTrigger extends KbqPopoverTrigger {
     private _confirmButtonText: string = 'Да';
 
     constructor(
-        overlay: Overlay,
-        elementRef: ElementRef,
-        ngZone: NgZone,
-        scrollDispatcher: ScrollDispatcher,
-        hostView: ViewContainerRef,
-        @Inject(KBQ_POPOVER_SCROLL_STRATEGY) scrollStrategy,
-        @Optional() direction: Directionality,
         @Optional() @Inject(KBQ_POPOVER_CONFIRM_TEXT) confirmText: string,
         @Optional() @Inject(KBQ_POPOVER_CONFIRM_BUTTON_TEXT) confirmButtonText: string
     ) {
-        super(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction);
+        super();
 
         this.confirmText = confirmText || 'Вы уверены, что хотите продолжить?';
         this.confirmButtonText = confirmButtonText || 'Да';