feat: implement lifecycle hooks for light bottomsheet component to manage DOM positioning

src/app/shared/components/dialog/light-bottomsheet.component.ts

@@ -1,5 +1,16 @@
 import { NgStyle } from '@angular/common';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  Renderer2,
+} from '@angular/core';
 
 @Component({
   selector: 'shared-light-bottomsheet',
@@ -91,7 +102,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
     '[style.--sheet-transition]': 'transitionOptions',
   },
 })
-export class SharedLightBottomsheetComponent {
+export class SharedLightBottomsheetComponent implements OnInit, OnDestroy {
   @Input() header = '';
   @Input() visible = false;
   @Output() visibleChange = new EventEmitter<boolean>();
@@ -104,6 +115,27 @@ export class SharedLightBottomsheetComponent {
 
   @Output() onHide = new EventEmitter<any>();
 
+  private originalParent: Node | null = null;
+
+  constructor(
+    private readonly elementRef: ElementRef<HTMLElement>,
+    private readonly renderer: Renderer2,
+    @Inject(DOCUMENT) private readonly document: Document,
+  ) {}
+
+  ngOnInit() {
+    const host = this.elementRef.nativeElement;
+    this.originalParent = host.parentNode;
+    this.renderer.appendChild(this.document.body, host);
+  }
+
+  ngOnDestroy() {
+    const host = this.elementRef.nativeElement;
+    if (this.originalParent) {
+      this.renderer.appendChild(this.originalParent, host);
+    }
+  }
+
   onVisibilityChange(nextValue: boolean) {
     this.visible = nextValue;
     this.visibleChange.emit(nextValue);