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

import { NgStyle } from '@angular/common';
import { DOCUMENT } from '@angular/common';
import {
  Component,
  ElementRef,
  EventEmitter,
  Inject,
  Input,
  OnDestroy,
  OnInit,
  Output,
  Renderer2,
} from '@angular/core';

@Component({
  selector: 'shared-light-bottomsheet',
  templateUrl: './light-bottomsheet.component.html',
  imports: [NgStyle],
  styles: [
    `
      :host {
        position: fixed;
        inset: 0;
        z-index: 11020;
      }

      .light-bottomsheet-mask {
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, 0.22);
        will-change: opacity;
        animation: sheetFadeIn var(--sheet-transition, 130ms cubic-bezier(0.2, 0, 0, 1));
      }

      .light-bottomsheet-panel {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        max-height: 80svh;
        background: var(--surface-card, #fff);
        border-radius: 12px 12px 0 0;
        box-shadow: none;
        transform: translate3d(0, 0, 0);
        will-change: transform;
        backface-visibility: hidden;
        animation: sheetSlideUp var(--sheet-transition, 130ms cubic-bezier(0.2, 0, 0, 1));
        overflow: hidden;
      }

      .light-bottomsheet-content {
        max-height: 80svh;
        overflow: auto;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }

      .light-bottomsheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
      }

      .light-bottomsheet-title {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 600;
      }

      .light-bottomsheet-close {
        border: 0;
        background: transparent;
        padding: 0.25rem;
        line-height: 1;
        font-size: 1.25rem;
      }

      @keyframes sheetSlideUp {
        from {
          transform: translate3d(0, 100%, 0);
        }
        to {
          transform: translate3d(0, 0, 0);
        }
      }

      @keyframes sheetFadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
    `,
  ],
  host: {
    '[style.display]': 'visible ? "block" : "none"',
    '[style.--sheet-transition]': 'transitionOptions',
  },
})
export class SharedLightBottomsheetComponent implements OnInit, OnDestroy {
  @Input() header = '';
  @Input() visible = false;
  @Output() visibleChange = new EventEmitter<boolean>();

  @Input() modal = true;
  @Input() closable = true;
  @Input() style: Record<string, string> | undefined;
  @Input() mobileDrawerHeight = '80svh';
  @Input() transitionOptions = '130ms cubic-bezier(0.2, 0, 0, 1)';

  @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);
    if (!nextValue) {
      this.onHide.emit();
    }
  }

  onMaskClick() {
    if (this.modal && this.closable) {
      this.onVisibilityChange(false);
    }
  }
}