@simplysm/angular 14.0.30 → 14.0.33

package/src/core/modal/sd-modal.provider.ts

@@ -0,0 +1,246 @@
+import {
+  ApplicationRef,
+  createComponent,
+  EnvironmentInjector,
+  inject,
+  Injectable,
+  Injector,
+  signal,
+  type ComponentRef,
+  type OutputEmitterRef,
+  type Signal,
+  type TemplateRef,
+  type Type,
+} from "@angular/core";
+import { outputToObservable } from "@angular/core/rxjs-interop";
+import { Subscription } from "rxjs";
+import type {
+  DirectiveInputSignals,
+  WithOptional,
+} from "../directive-input-signals";
+import { SdModal } from "./sd-modal";
+import { SdActivatedModalProvider } from "./sd-activated-modal.provider";
+import "@simplysm/core-browser";
+
+/**
+ * 모달 컴포넌트가 구현해야 하는 인터페이스
+ */
+export interface SdModalContentDef<O> {
+  initialized: Signal<boolean>;
+  close: OutputEmitterRef<O | undefined>;
+  actionTplRef?: TemplateRef<any>;
+  readonly _optionalModalInputs?: string;
+}
+
+type SdModalExcludeKeys = "initialized" | "close" | "actionTplRef" | "_optionalModalInputs";
+type SdModalOptionalKeys<T> = T extends { _optionalModalInputs?: infer K extends string }
+  ? K
+  : never;
+
+/**
+ * 모달 생성 시 전달하는 정보
+ */
+export interface SdModalInfo<T extends SdModalContentDef<any>, X extends keyof any = ""> {
+  title: string;
+  type: Type<T>;
+  inputs: WithOptional<
+    Omit<DirectiveInputSignals<T>, SdModalExcludeKeys | X>,
+    SdModalOptionalKeys<T> & keyof Omit<DirectiveInputSignals<T>, SdModalExcludeKeys | X>
+  >;
+}
+
+/**
+ * 모달 옵션
+ */
+export interface SdModalOptions {
+  key?: string;
+  hideHeader?: boolean;
+  hideCloseButton?: boolean;
+  useCloseByBackdrop?: boolean;
+  useCloseByEscapeKey?: boolean;
+  float?: boolean;
+  fill?: boolean;
+  resizable?: boolean;
+  movable?: boolean;
+  position?: "bottom-right" | "top-right";
+  minHeightPx?: number;
+  minWidthPx?: number;
+  heightPx?: number;
+  widthPx?: number;
+  headerStyle?: string;
+  noFirstControlFocusing?: boolean;
+}
+
+/**
+ * 모달을 프로그래밍 방식으로 생성하는 프로바이더
+ */
+@Injectable({ providedIn: "root" })
+export class SdModalProvider {
+  private readonly _appRef = inject(ApplicationRef);
+  private readonly _envInjector = inject(EnvironmentInjector);
+  private readonly _injector = inject(Injector);
+
+  modalCount = signal(0);
+
+  async showAsync<T extends SdModalContentDef<any>>(
+    modal: SdModalInfo<T>,
+    options?: SdModalOptions,
+  ): Promise<Parameters<T["close"]["emit"]>[0] | undefined> {
+    return new Promise<Parameters<T["close"]["emit"]>[0] | undefined>((resolve) => {
+      // 1. modalCount 증가
+      this.modalCount.update((v) => v + 1);
+
+      // 2. SdActivatedModalProvider 인스턴스 생성
+      const activatedModal = new SdActivatedModalProvider<T>();
+
+      // 3. 컨텐츠 컴포넌트 생성 (elementInjector에 SdActivatedModalProvider 주입)
+      const contentInjector = Injector.create({
+        providers: [{ provide: SdActivatedModalProvider, useValue: activatedModal }],
+        parent: this._injector,
+      });
+
+      const contentRef: ComponentRef<T> = createComponent(modal.type, {
+        environmentInjector: this._envInjector,
+        elementInjector: contentInjector,
+      });
+
+      // 4. setInput으로 inputs 바인딩
+      for (const [key, value] of Object.entries(modal.inputs as Record<string, unknown>)) {
+        contentRef.setInput(key, value);
+      }
+
+      // 5. SdModal 생성 (projectableNodes로 컨텐츠 삽입)
+      const modalRef: ComponentRef<SdModal> = createComponent(SdModal, {
+        environmentInjector: this._envInjector,
+        elementInjector: contentInjector,
+        projectableNodes: [[contentRef.location.nativeElement]],
+      });
+
+      // 6. 옵션 바인딩
+      modalRef.setInput("title", modal.title);
+      if (options !== undefined) {
+        for (const [key, value] of Object.entries(options)) {
+          if (value !== undefined) {
+            modalRef.setInput(key, value);
+          }
+        }
+      }
+
+      // 7. SdActivatedModalProvider에 컴포넌트 참조 설정
+      activatedModal.modalComponent.set(modalRef.instance);
+      activatedModal.contentComponent.set(contentRef.instance);
+
+      // 7-1. actionTplRef 브릿지: 컨텐츠 컴포넌트 → 모달 컴포넌트
+      if ("actionTplRef" in contentRef.instance) {
+        let _actionTplRef = contentRef.instance.actionTplRef;
+        Object.defineProperty(contentRef.instance, "actionTplRef", {
+          get: () => _actionTplRef,
+          set: (value: TemplateRef<any> | undefined) => {
+            _actionTplRef = value;
+            modalRef.setInput("actionTplRef", value);
+          },
+          configurable: true,
+        });
+      }
+
+      // 8. appRef에 뷰 등록 + body에 삽입
+      this._appRef.attachView(contentRef.hostView);
+      this._appRef.attachView(modalRef.hostView);
+      document.body.appendChild(modalRef.location.nativeElement);
+
+      // 9. open 설정 + z-index
+      modalRef.instance.open.set(true);
+      this._assignZIndex(modalRef.location.nativeElement);
+
+      // 10. 포커스 저장 및 설정
+      const prevActiveEl = document.activeElement as HTMLElement | null;
+
+      // 지연된 포커스 설정 (DOM 삽입 후 렌더링 완료 대기)
+      queueMicrotask(() => {
+        const modalEl = modalRef.location.nativeElement as HTMLElement;
+        const dialogEl = modalEl.querySelector<HTMLElement>("._dialog");
+        if (dialogEl == null) return;
+
+        if (options?.noFirstControlFocusing === true) {
+          dialogEl.focus();
+        } else {
+          // 컨텐츠 영역에서 첫 포커스 가능 요소 검색
+          const contentEl = modalEl.querySelector("._content");
+          const firstFocusable = contentEl?.findFirstFocusableChild();
+          if (firstFocusable !== undefined) {
+            firstFocusable.focus();
+          } else {
+            dialogEl.focus();
+          }
+        }
+      });
+
+      // cleanup 함수
+      let closeSub: Subscription | undefined;
+      let closeRequestSub: Subscription | undefined;
+
+      const cleanup = (result: Parameters<T["close"]["emit"]>[0] | undefined) => {
+        closeSub?.unsubscribe();
+        closeRequestSub?.unsubscribe();
+
+        // 닫힘 애니메이션 트리거: open(false) → CSS transition 시작
+        modalRef.instance.open.set(false);
+
+        const modalEl = modalRef.location.nativeElement as HTMLElement;
+
+        const doDestroy = () => {
+          // DOM에서 제거
+          if (modalEl.parentNode !== null) {
+            modalEl.parentNode.removeChild(modalEl);
+          }
+
+          // 뷰 분리 + 파괴
+          this._appRef.detachView(modalRef.hostView);
+          this._appRef.detachView(contentRef.hostView);
+          modalRef.destroy();
+          contentRef.destroy();
+
+          // modalCount 감소
+          this.modalCount.update((v) => v - 1);
+
+          // 포커스 복귀
+          if (prevActiveEl !== null && prevActiveEl.isConnected) {
+            prevActiveEl.focus();
+          }
+
+          resolve(result);
+        };
+
+        // transition duration 확인 후 대기 또는 즉시 destroy
+        const duration = parseFloat(getComputedStyle(modalEl).transitionDuration || "0");
+        if (duration > 0) {
+          modalEl.addEventListener("transitionend", doDestroy, { once: true });
+        } else {
+          doDestroy();
+        }
+      };
+
+      // 10. close output 구독 (컨텐츠 컴포넌트가 직접 close.emit 호출)
+      closeSub = outputToObservable(contentRef.instance.close).subscribe((result) => {
+        cleanup(result);
+      });
+
+      // 12. SdModal의 closeRequest 구독 (배경 클릭, ESC, 닫기 버튼)
+      closeRequestSub = outputToObservable(modalRef.instance.closeRequest).subscribe(() => {
+        cleanup(undefined);
+      });
+    });
+  }
+
+  private _assignZIndex(el: HTMLElement): void {
+    const allModals = document.body.findAll<HTMLElement>("sd-modal");
+    let maxZ = 4000;
+    for (const m of allModals) {
+      const z = parseInt(m.style.zIndex || "0", 10);
+      if (z > maxZ) {
+        maxZ = z;
+      }
+    }
+    el.style.zIndex = String(maxZ + 1);
+  }
+}

package/src/core/modal/sd-modal.ts

@@ -0,0 +1,451 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  model,
+  output,
+  type TemplateRef,
+  ViewEncapsulation,
+} from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { NgIcon } from "@ng-icons/core";
+import { tablerX } from "@ng-icons/tabler-icons";
+import { SdActivatedModalProvider } from "./sd-activated-modal.provider";
+import { SdSystemConfigProvider } from "../config/sd-system-config.provider";
+import { injectFocusTrap } from "./injectFocusTrap";
+import { injectDragResize } from "./injectDragResize";
+import "@simplysm/core-browser";
+
+@Component({
+  selector: "sd-modal",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [NgTemplateOutlet, NgIcon],
+  host: {
+    "[attr.data-sd-open]": "open() || undefined",
+    "[attr.data-sd-float]": "float() || undefined",
+    "[attr.data-sd-fill]": "fill() || undefined",
+    "[attr.data-sd-position]": "position() || undefined",
+  },
+  template: `
+    <div class="_backdrop" (mousedown)="onBackdropClick()"></div>
+    <div class="_dialog" tabindex="-1"
+         (keydown)="onDialogKeydown($event)"
+         (focus)="onDialogFocus()">
+      @if (!hideHeader()) {
+        <div class="_header" (mousedown)="onHeaderMouseDown($event)">
+          <span class="_title">{{ title() }}</span>
+          @if (actionTplRef()) {
+            <ng-container *ngTemplateOutlet="actionTplRef()!" />
+          }
+          @if (!hideCloseButton()) {
+            <button class="_close-btn" (click)="onCloseButtonClick()"><ng-icon [svg]="tablerX" /></button>
+          }
+        </div>
+      }
+      <div class="_content"><ng-content /></div>
+      @if (resizable()) {
+        <div class="_resize-handle _resize-top" data-resize-dir="top" (mousedown)="onResizeMouseDown($event, 'top')"></div>
+        <div class="_resize-handle _resize-bottom" data-resize-dir="bottom" (mousedown)="onResizeMouseDown($event, 'bottom')"></div>
+        <div class="_resize-handle _resize-left" data-resize-dir="left" (mousedown)="onResizeMouseDown($event, 'left')"></div>
+        <div class="_resize-handle _resize-right" data-resize-dir="right" (mousedown)="onResizeMouseDown($event, 'right')"></div>
+        <div class="_resize-handle _resize-top-left" data-resize-dir="top-left" (mousedown)="onResizeMouseDown($event, 'top-left')"></div>
+        <div class="_resize-handle _resize-top-right" data-resize-dir="top-right" (mousedown)="onResizeMouseDown($event, 'top-right')"></div>
+        <div class="_resize-handle _resize-bottom-left" data-resize-dir="bottom-left" (mousedown)="onResizeMouseDown($event, 'bottom-left')"></div>
+        <div class="_resize-handle _resize-bottom-right" data-resize-dir="bottom-right" (mousedown)="onResizeMouseDown($event, 'bottom-right')"></div>
+      }
+    </div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "../../../scss/commons/mixins";
+
+      sd-modal {
+        display: block;
+        position: fixed;
+        z-index: var(--z-index-modal);
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding-top: calc(var(--topbar-height) + var(--gap-sm));
+        opacity: 0;
+        transition: opacity var(--animation-duration) ease-in-out;
+        pointer-events: none;
+
+        > ._backdrop {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: var(--trans-default);
+        }
+
+        > ._dialog {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          margin: 0 auto;
+          width: fit-content;
+          min-width: 200px;
+          background: var(--control-color);
+          overflow: hidden;
+          @include mixins.elevation(16);
+          border-radius: var(--border-radius-default);
+          transform: translateY(-25px);
+          transition: transform var(--animation-duration) ease-in-out;
+
+          &:focus {
+            outline: none;
+          }
+
+          > ._header {
+            display: flex;
+            align-items: center;
+            user-select: none;
+            border-bottom: 1px solid var(--theme-gray-lightest);
+
+            > ._title {
+              flex: 1;
+              padding: var(--gap-sm) var(--gap-default);
+            }
+
+            > ._close-btn {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              padding: var(--gap-sm) var(--gap-default);
+              border: none;
+              background: transparent;
+              cursor: pointer;
+              font-size: inherit;
+              color: inherit;
+
+              &:hover {
+                background: var(--trans-lightest);
+              }
+            }
+          }
+
+          > ._content {
+            flex: 1;
+            overflow: auto;
+          }
+
+          > ._resize-handle {
+            position: absolute;
+
+            &._resize-left {
+              top: 0;
+              left: 0;
+              width: var(--gap-sm);
+              height: 100%;
+              cursor: ew-resize;
+            }
+
+            &._resize-right {
+              top: 0;
+              right: 0;
+              width: var(--gap-sm);
+              height: 100%;
+              cursor: ew-resize;
+            }
+
+            &._resize-top {
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: var(--gap-sm);
+              cursor: ns-resize;
+            }
+
+            &._resize-top-right {
+              right: 0;
+              top: 0;
+              width: var(--gap-sm);
+              height: var(--gap-sm);
+              z-index: 1;
+              cursor: nesw-resize;
+            }
+
+            &._resize-top-left {
+              left: 0;
+              top: 0;
+              width: var(--gap-sm);
+              height: var(--gap-sm);
+              cursor: nwse-resize;
+              z-index: 1;
+            }
+
+            &._resize-bottom {
+              bottom: 0;
+              left: 0;
+              width: 100%;
+              height: var(--gap-sm);
+              cursor: ns-resize;
+            }
+
+            &._resize-bottom-right {
+              right: 0;
+              bottom: 0;
+              width: var(--gap-sm);
+              height: var(--gap-sm);
+              z-index: 1;
+              cursor: nwse-resize;
+            }
+
+            &._resize-bottom-left {
+              left: 0;
+              bottom: 0;
+              width: var(--gap-sm);
+              height: var(--gap-sm);
+              cursor: nesw-resize;
+              z-index: 1;
+            }
+          }
+        }
+
+        &[data-sd-open][data-sd-init] {
+          opacity: 1;
+          pointer-events: auto;
+
+          > ._dialog {
+            transform: none;
+          }
+        }
+
+        &[data-sd-float] {
+          pointer-events: none;
+
+          > ._backdrop {
+            display: none;
+          }
+
+          > ._dialog {
+            pointer-events: auto;
+            opacity: 0;
+            @include mixins.elevation(4);
+            border: 1px solid var(--theme-gray-lighter);
+
+            &:focus {
+              @include mixins.elevation(16);
+            }
+          }
+
+          &[data-sd-open][data-sd-init] {
+            pointer-events: none;
+
+            > ._dialog {
+              pointer-events: auto;
+              opacity: 1;
+            }
+          }
+        }
+
+        &[data-sd-position="bottom-right"] {
+          > ._dialog {
+            position: absolute;
+            right: calc(var(--gap-xxl) * 2);
+            bottom: var(--gap-xxl);
+          }
+        }
+
+        &[data-sd-position="top-right"] {
+          > ._dialog {
+            position: absolute;
+            right: var(--gap-xxl);
+            top: var(--gap-xxl);
+          }
+        }
+
+        &[data-sd-fill] {
+          padding-top: 0;
+
+          > ._dialog {
+            width: 100%;
+            height: 100%;
+            border: none;
+            border-radius: 0;
+
+            > ._header {
+              background: transparent;
+              color: var(--text-trans-lighter);
+            }
+          }
+        }
+      }
+    `,
+  ],
+})
+export class SdModal {
+  private readonly _elRef = inject(ElementRef<HTMLElement>);
+  private readonly _activatedModal = inject(SdActivatedModalProvider, { optional: true });
+  private readonly _systemConfig = inject(SdSystemConfigProvider, { optional: true });
+  private readonly _focusTrap = injectFocusTrap();
+
+  protected readonly tablerX = tablerX;
+
+  open = model(false);
+  key = input<string | undefined>(undefined);
+  title = input("");
+  hideHeader = input(false);
+  hideCloseButton = input(false);
+  useCloseByBackdrop = input(true);
+  useCloseByEscapeKey = input(true);
+  float = input(false);
+  fill = input(false);
+  resizable = input(false);
+  movable = input(false);
+  position = input<"bottom-right" | "top-right" | undefined>(undefined);
+  minHeightPx = input<number | undefined>(undefined);
+  minWidthPx = input<number | undefined>(undefined);
+  heightPx = input<number | undefined>(undefined);
+  widthPx = input<number | undefined>(undefined);
+  headerStyle = input<string | undefined>(undefined);
+  noFirstControlFocusing = input(false);
+  actionTplRef = input<TemplateRef<any> | undefined>(undefined);
+
+  closeRequest = output<void>();
+
+  private readonly _dragResize = injectDragResize({
+    getDialogEl: () => this._getDialogEl(),
+    minWidthPx: this.minWidthPx,
+    minHeightPx: this.minHeightPx,
+    onEnd: () => void this._saveConfig(),
+  });
+
+  constructor() {
+    // data-sd-init: 첫 렌더 후 설정하여 CSS transition 트리거 허용
+    effect(() => {
+      this._elRef.nativeElement.setAttribute("data-sd-init", "");
+    });
+
+    // widthPx/heightPx를 dialog 스타일에 적용
+    effect(() => {
+      const dialogEl = this._getDialogEl();
+      if (dialogEl === null) return;
+
+      const w = this.widthPx();
+      const h = this.heightPx();
+      if (w !== undefined) {
+        dialogEl.style.width = `${w}px`;
+      } else {
+        dialogEl.style.width = "";
+      }
+      if (h !== undefined) {
+        dialogEl.style.height = `${h}px`;
+      } else {
+        dialogEl.style.height = "";
+      }
+    });
+
+    // key 기반 설정 복원
+    effect(() => {
+      const k = this.key();
+      if (k === undefined || this._systemConfig == null) return;
+
+      void this._restoreConfig(k);
+    });
+
+  }
+
+  onResizeMouseDown(event: MouseEvent, dir: string): void {
+    event.preventDefault();
+    this._dragResize.startResize(event, dir);
+  }
+
+  onHeaderMouseDown(event: MouseEvent): void {
+    if (!this.movable()) return;
+    if ((event.target as HTMLElement).closest("button") !== null) return;
+    event.preventDefault();
+    this._dragResize.startDrag(event);
+  }
+
+  onBackdropClick(): void {
+    if (!this.useCloseByBackdrop()) return;
+    this._requestClose();
+  }
+
+  onCloseButtonClick(): void {
+    this._requestClose();
+  }
+
+  onDialogKeydown(event: KeyboardEvent): void {
+    if (event.key === "Escape") {
+      if (!this.useCloseByEscapeKey()) return;
+      this._requestClose();
+    } else if (event.key === "Tab") {
+      this._focusTrap.handleTabTrap(event);
+    }
+  }
+
+  onDialogFocus(): void {
+    this._bringToFront();
+  }
+
+  private _requestClose(): void {
+    if (this._activatedModal !== null && !this._activatedModal.canDeactiveFn()) {
+      return;
+    }
+    void this._saveConfig();
+    this.closeRequest.emit();
+  }
+
+  private _bringToFront(): void {
+    const hostEl = this._elRef.nativeElement;
+    const allModals = document.body.findAll<HTMLElement>("sd-modal");
+    let maxZ = 4000;
+    for (const m of allModals) {
+      if (m === hostEl) continue;
+      const z = parseInt(m.style.zIndex || "0", 10);
+      if (z > maxZ) {
+        maxZ = z;
+      }
+    }
+    const currentZ = parseInt(hostEl.style.zIndex !== "" ? hostEl.style.zIndex : "0", 10);
+    if (currentZ >= maxZ) return;
+    hostEl.style.zIndex = String(maxZ + 1);
+  }
+
+  private _getDialogEl(): HTMLElement | null {
+    return this._elRef.nativeElement.querySelector("._dialog");
+  }
+
+  private async _saveConfig(): Promise<void> {
+    const k = this.key();
+    if (k === undefined || this._systemConfig == null) return;
+
+    const dialogEl = this._getDialogEl();
+    if (dialogEl === null) return;
+
+    const config: Record<string, string> = {};
+    if (dialogEl.style.width !== "") config["width"] = dialogEl.style.width;
+    if (dialogEl.style.height !== "") config["height"] = dialogEl.style.height;
+    if (dialogEl.style.left !== "") config["left"] = dialogEl.style.left;
+    if (dialogEl.style.top !== "") config["top"] = dialogEl.style.top;
+
+    await this._systemConfig.setAsync(`sd-modal.${k}` as any, config as any);
+  }
+
+  private async _restoreConfig(k: string): Promise<void> {
+    if (this._systemConfig == null) return;
+
+    const config = (await this._systemConfig.getAsync(`sd-modal.${k}` as any)) as
+      | Record<string, string | undefined>
+      | undefined;
+    if (config == null) return;
+
+    const dialogEl = this._getDialogEl();
+    if (dialogEl === null) return;
+
+    if (config["width"] !== undefined) dialogEl.style.width = config["width"];
+    if (config["height"] !== undefined) dialogEl.style.height = config["height"];
+    if (config["left"] !== undefined) dialogEl.style.left = config["left"];
+    if (config["top"] !== undefined) dialogEl.style.top = config["top"];
+  }
+}