refactor(backdrop, modal, offcanvas): move scrollbar adjustments to offcanvas, cleanups

Author: xidedix

projects/coreui-angular/src/lib/backdrop/backdrop.service.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { inject, Injectable, RendererFactory2 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { Subject } from 'rxjs';
 
@@ -7,53 +7,76 @@ import { Subject } from 'rxjs';
 })
 export class BackdropService {
 
-  private backdropClick = new Subject<boolean>();
-  backdropClick$ = this.backdropClick.asObservable();
+  readonly #backdropClick = new Subject<boolean>();
+  readonly backdropClick$ = this.#backdropClick.asObservable();
 
-  private renderer: Renderer2;
-  private unListen!: () => void;
+  #document = inject(DOCUMENT);
+  #rendererFactory = inject(RendererFactory2);
+  #renderer = this.#rendererFactory.createRenderer(null, null);
+  #unListen!: () => void;
 
-  constructor(
-    @Inject(DOCUMENT) private document: Document,
-    private rendererFactory: RendererFactory2
-  ) {
-    this.renderer = rendererFactory.createRenderer(null, null);
-  }
+  activeBackdrop: any;
 
-  get scrollbarWidth() {
+  get #scrollbarWidth() {
     // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
-    const documentWidth = this.document.documentElement.clientWidth;
+    const documentWidth = this.#document.documentElement.clientWidth;
     const scrollbarWidth = Math.abs((window?.innerWidth ?? documentWidth) - documentWidth);
     return `${scrollbarWidth}px`;
   }
 
+  scrollbarWidth = this.#scrollbarWidth;
+
   setBackdrop(type: string = 'modal'): any {
-    const backdropElement = this.renderer.createElement('div');
-    this.renderer.addClass(backdropElement, `${type}-backdrop`);
-    this.renderer.addClass(backdropElement, 'fade');
-    this.renderer.appendChild(this.document.body, backdropElement);
-    this.unListen = this.renderer.listen(backdropElement, 'click', (e): void => {
+    const backdropElement = this.#renderer.createElement('div');
+    this.#renderer.addClass(backdropElement, `${type}-backdrop`);
+    this.#renderer.addClass(backdropElement, 'fade');
+    this.#renderer.appendChild(this.#document.body, backdropElement);
+    this.#unListen = this.#renderer.listen(backdropElement, 'click', (e): void => {
       this.onClickHandler();
     });
+    this.scrollbarWidth = this.#scrollbarWidth;
     setTimeout(() => {
-      this.renderer.addClass(backdropElement, 'show');
+      this.#renderer.addClass(backdropElement, 'show');
+      // this.hideScrollbar();
     });
+    this.activeBackdrop = backdropElement;
     return backdropElement;
   }
 
-  clearBackdrop(backdrop: any): any {
-    if (backdrop) {
-      this.unListen();
-      this.renderer.removeClass(backdrop, 'show');
+  clearBackdrop(backdropElement: any): any {
+    if (backdropElement) {
+      this.#unListen();
+      this.#renderer.removeClass(backdropElement, 'show');
       setTimeout(() => {
-        this.renderer.removeChild(this.document.body, backdrop);
-        backdrop = undefined;
+        this.#renderer.removeChild(this.#document.body, backdropElement);
+        if (this.activeBackdrop === backdropElement) {
+          this.resetScrollbar();
+        }
+        backdropElement = undefined;
       }, 300);
     }
-    return backdrop;
+    return undefined;
+  }
+
+  get #isRTL() { return this.#document.documentElement.dir === 'rtl' || this.#document.body.dir === 'rtl'; }
+
+  #scrollBarVisible = true;
+
+  hideScrollbar(): void {
+    if (this.#scrollBarVisible) {
+      this.#renderer.setStyle(this.#document.body, 'overflow', 'hidden');
+      this.#renderer.setStyle(this.#document.body, `padding-${this.#isRTL ? 'left' : 'right'}`, this.scrollbarWidth);
+      this.#scrollBarVisible = false;
+    }
+  }
+
+  resetScrollbar(): void {
+    this.#renderer.removeStyle(this.#document.body, 'overflow');
+    this.#renderer.removeStyle(this.#document.body, `padding-${this.#isRTL ? 'left' : 'right'}`);
+    this.#scrollBarVisible = true;
   }
 
   onClickHandler(): void {
-    this.backdropClick.next(true);
+    this.#backdropClick.next(true);
   }
 }

projects/coreui-angular/src/lib/modal/modal/modal.component.html

@@ -4,7 +4,7 @@
   [scrollable]="scrollable"
   [size]="size">
   <c-modal-content>
-    <div [cdkTrapFocus]="visible" [cdkTrapFocusAutoCapture]="visible" style="display: contents;">
+    <div [cdkTrapFocus]="visible" [cdkTrapFocusAutoCapture]="visible" style="display: contents;" #modalContentRef>
       <ng-content></ng-content>
     </div>
   </c-modal-content>

projects/coreui-angular/src/lib/modal/modal/modal.component.ts

@@ -1,22 +1,28 @@
+import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
+import { DOCUMENT } from '@angular/common';
 import {
+  AfterViewInit,
+  booleanAttribute,
   Component,
+  DestroyRef,
+  effect,
   ElementRef,
   EventEmitter,
   HostBinding,
   HostListener,
+  inject,
   Inject,
   Input,
   OnDestroy,
   OnInit,
   Output,
   Renderer2,
-  ViewChild
+  signal,
+  ViewChild,
+  WritableSignal
 } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { A11yModule } from '@angular/cdk/a11y';
-import { Subscription } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { A11yModule, FocusMonitor } from '@angular/cdk/a11y';
 
 import { ModalService } from '../modal.service';
 import { BackdropService } from '../../backdrop/backdrop.service';
@@ -39,18 +45,18 @@ import { ModalDialogComponent } from '../modal-dialog/modal-dialog.component';
           // display: 'none'
         })
       ),
-      transition('visible <=> *', [animate('300ms')])
+      transition('visible <=> *', [animate('150ms')])
     ])
   ],
   templateUrl: './modal.component.html',
   exportAs: 'cModal',
   standalone: true,
   imports: [ModalDialogComponent, ModalContentComponent, A11yModule]
 })
-export class ModalComponent implements OnInit, OnDestroy {
+export class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
 
-  static ngAcceptInputType_scrollable: BooleanInput;
-  static ngAcceptInputType_visible: BooleanInput;
+  #destroyRef = inject(DestroyRef);
+  #focusMonitor = inject(FocusMonitor);
 
   constructor(
     @Inject(DOCUMENT) private document: Document,
@@ -83,7 +89,7 @@ export class ModalComponent implements OnInit, OnDestroy {
    * @type boolean
    * @default true
    */
-  @Input() keyboard = true;
+  @Input({ transform: booleanAttribute }) keyboard = true;
   @Input() id?: string;
   /**
    * Size the component small, large, or extra large.
@@ -92,64 +98,65 @@ export class ModalComponent implements OnInit, OnDestroy {
   /**
    * Remove animation to create modal that simply appear rather than fade in to view.
    */
-  @Input() transition = true;
+  @Input({ transform: booleanAttribute }) transition = true;
   /**
    * Default role for modal. [docs]
    * @type string
    * @default 'dialog'
    */
   @Input() @HostBinding('attr.role') role = 'dialog';
+
   /**
    * Set aria-modal html attr for modal. [docs]
    * @type boolean
-   * @default true
+   * @default null
    */
-  @Input() @HostBinding('attr.aria-modal') ariaModal = true;
+  @Input() @HostBinding('attr.aria-modal')
+  set ariaModal(value: boolean | null) {
+    this.#ariaModal = value;
+  }
+
+  get ariaModal(): boolean | null {
+    return this.visible || this.#ariaModal ? true : null;
+  };
+
+  #ariaModal: boolean | null = null;
 
   /**
    * Create a scrollable modal that allows scrolling the modal body.
    * @type boolean
    */
-  @Input()
-  set scrollable(value: boolean) {
-    this._scrollable = coerceBooleanProperty(value);
-  }
-
-  get scrollable(): boolean {
-    return this._scrollable;
-  }
-
-  private _scrollable = false;
+  @Input({ transform: booleanAttribute }) scrollable: boolean = false;
 
   /**
    * Toggle the visibility of modal component.
    * @type boolean
    */
-  @Input()
+  @Input({ transform: booleanAttribute })
   set visible(value: boolean) {
-    const newValue = coerceBooleanProperty(value);
-    if (this._visible !== newValue) {
-      this._visible = newValue;
-      this.setBackdrop(this.backdrop !== false && newValue);
-      this.setBodyStyles(newValue);
-      this.visibleChange.emit(newValue);
+    if (this.#visible() !== value) {
+      this.#visible.set(value);
+      this.setBackdrop(this.backdrop !== false && value);
+      this.setBodyStyles(value);
+      this.visibleChange.emit(value);
     }
   }
 
   get visible(): boolean {
-    return this._visible;
+    return this.#visible();
   }
 
-  private _visible!: boolean;
+  #visible: WritableSignal<boolean> = signal(false);
 
   /**
    * Event triggered on modal dismiss.
    */
   @Output() visibleChange = new EventEmitter<boolean>();
 
   @ViewChild(ModalContentComponent, { read: ElementRef }) modalContent!: ElementRef;
-  private activeBackdrop!: any;
-  private stateToggleSubscription!: Subscription;
+  @ViewChild('modalContentRef', { read: ElementRef }) modalContentRef!: ElementRef;
+
+  #activeBackdrop!: any;
 
   // private inBoundingClientRect!: boolean;
 
@@ -189,10 +196,8 @@ export class ModalComponent implements OnInit, OnDestroy {
 
   @HostListener('@showHide.start', ['$event'])
   animateStart(event: AnimationEvent) {
-    const scrollbarWidth = this.backdropService.scrollbarWidth;
     if (event.toState === 'visible') {
-      this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
-      this.renderer.setStyle(this.document.body, 'padding-right', scrollbarWidth);
+      this.backdropService.hideScrollbar();
       this.renderer.setStyle(this.hostElement.nativeElement, 'display', 'block');
     } else {
       if (!this.transition) {
@@ -206,8 +211,6 @@ export class ModalComponent implements OnInit, OnDestroy {
     setTimeout(() => {
       if (event.toState === 'hidden') {
         this.renderer.setStyle(this.hostElement.nativeElement, 'display', 'none');
-        this.renderer.removeStyle(this.document.body, 'overflow');
-        this.renderer.removeStyle(this.document.body, 'padding-right');
       }
     });
     this.show = this.visible;
@@ -255,14 +258,23 @@ export class ModalComponent implements OnInit, OnDestroy {
     this.stateToggleSubscribe();
   }
 
+  #afterViewInit = signal(false);
+
+  ngAfterViewInit(): void {
+    this.#afterViewInit.set(true);
+  }
+
   ngOnDestroy(): void {
     this.modalService.toggle({ show: false, modal: this });
-    this.stateToggleSubscribe(false);
+    this.#afterViewInit.set(false);
   }
 
-  private stateToggleSubscribe(subscribe: boolean = true): void {
-    if (subscribe) {
-      this.stateToggleSubscription = this.modalService.modalState$.subscribe(
+  private stateToggleSubscribe(): void {
+    this.modalService.modalState$
+      .pipe(
+        takeUntilDestroyed(this.#destroyRef)
+      )
+      .subscribe(
         (action) => {
           if (this === action.modal || this.id === action.id) {
             if ('show' in action) {
@@ -275,17 +287,10 @@ export class ModalComponent implements OnInit, OnDestroy {
           }
         }
       );
-    } else {
-      this.stateToggleSubscription?.unsubscribe();
-    }
   }
 
   private setBackdrop(setBackdrop: boolean): void {
-    if (setBackdrop) {
-      this.activeBackdrop = this.backdropService.setBackdrop('modal');
-    } else {
-      this.activeBackdrop = this.backdropService.clearBackdrop(this.activeBackdrop);
-    }
+    this.#activeBackdrop = setBackdrop ? this.backdropService.setBackdrop('modal') : this.backdropService.clearBackdrop(this.#activeBackdrop);
   }
 
   private setBodyStyles(open: boolean): void {