@simplysm/angular 14.0.1 → 14.0.4

package/src/ui/overlay/modal/sd-confirm-modal.control.ts

@@ -0,0 +1,66 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+  signal,
+  ViewEncapsulation,
+} from "@angular/core";
+import type { ISdModal } from "./sd-modal.provider";
+import { SdButtonControl } from "../../form/button/sd-button.control";
+
+/**
+ * 범용 확인 모달.
+ * ISdModal<boolean> 구현. message를 표시하고, 확인/취소.
+ * 확인 시 true emit, 취소 시 undefined emit.
+ */
+@Component({
+  selector: "sd-confirm-modal",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdButtonControl],
+  template: `
+    <div class="_sd-confirm-modal">
+      <p class="_message">{{ message() }}</p>
+      <div class="_actions">
+        <sd-button [theme]="'primary'" (click)="onConfirm()">확인</sd-button>
+        <sd-button (click)="onCancel()">취소</sd-button>
+      </div>
+    </div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-confirm-modal {
+        display: block;
+        padding: var(--gap-default);
+
+        > ._sd-confirm-modal {
+          > ._message {
+            margin-bottom: var(--gap-default);
+          }
+
+          > ._actions {
+            display: flex;
+            justify-content: flex-end;
+            gap: var(--gap-sm);
+          }
+        }
+      }
+    `,
+  ],
+})
+export class SdConfirmModalControl implements ISdModal<boolean> {
+  initialized = signal(true);
+  close = output<boolean | undefined>();
+
+  message = input.required<string>();
+
+  onConfirm(): void {
+    this.close.emit(true);
+  }
+
+  onCancel(): void {
+    this.close.emit(undefined);
+  }
+}

package/src/ui/overlay/modal/sd-modal.control.ts

@@ -0,0 +1,362 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  model,
+  output,
+  type TemplateRef,
+  ViewEncapsulation,
+} from "@angular/core";
+import { isTabbable } from "tabbable";
+import { NgTemplateOutlet } from "@angular/common";
+import { SdActivatedModalProvider } from "./sd-modal.provider";
+import { SdSystemConfigProvider } from "../../../core/providers/sd-system-config.provider";
+import "@simplysm/core-browser";
+
+@Component({
+  selector: "sd-modal",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [NgTemplateOutlet],
+  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()">×</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>
+  `,
+})
+export class SdModalControl {
+  private readonly _elRef = inject(ElementRef<HTMLElement>);
+  private readonly _activatedModal = inject(SdActivatedModalProvider, { optional: true });
+  private readonly _systemConfig = inject(SdSystemConfigProvider, { optional: true });
+
+  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 _dragState:
+    | { startX: number; startY: number; startLeft: number; startTop: number }
+    | undefined;
+
+  private _resizeState:
+    | {
+        dir: string;
+        startX: number;
+        startY: number;
+        startWidth: number;
+        startHeight: number;
+        startLeft: number;
+        startTop: number;
+      }
+    | undefined;
+
+  private readonly _onDocumentMouseMove: (event: MouseEvent) => void;
+  private readonly _onDocumentMouseUp: () => void;
+
+  constructor() {
+    // 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`;
+      }
+      if (h !== undefined) {
+        dialogEl.style.height = `${h}px`;
+      }
+    });
+
+    // key 기반 설정 복원
+    effect(() => {
+      const k = this.key();
+      if (k === undefined || this._systemConfig == null) return;
+
+      void this._restoreConfig(k);
+    });
+
+    // mousemove/mouseup을 document에 등록 (리사이즈 & 드래그 공용)
+    this._onDocumentMouseMove = (event: MouseEvent) => {
+      if (this._resizeState !== undefined) {
+        this._applyResize(event);
+      }
+      if (this._dragState !== undefined) {
+        this._applyDrag(event);
+      }
+    };
+    this._onDocumentMouseUp = () => {
+      const hadState = this._resizeState !== undefined || this._dragState !== undefined;
+      this._resizeState = undefined;
+      this._dragState = undefined;
+      document.removeEventListener("mousemove", this._onDocumentMouseMove);
+      document.removeEventListener("mouseup", this._onDocumentMouseUp);
+      if (hadState) {
+        void this._saveConfig();
+      }
+    };
+  }
+
+  onResizeMouseDown(event: MouseEvent, dir: string): void {
+    event.preventDefault();
+    const dialogEl = this._getDialogEl();
+    if (dialogEl === null) return;
+
+    this._resizeState = {
+      dir,
+      startX: event.clientX,
+      startY: event.clientY,
+      startWidth: dialogEl.offsetWidth,
+      startHeight: dialogEl.offsetHeight,
+      startLeft: dialogEl.offsetLeft,
+      startTop: dialogEl.offsetTop,
+    };
+    document.addEventListener("mousemove", this._onDocumentMouseMove);
+    document.addEventListener("mouseup", this._onDocumentMouseUp);
+  }
+
+  onHeaderMouseDown(event: MouseEvent): void {
+    if (!this.movable()) return;
+    if ((event.target as HTMLElement).closest("button") !== null) return;
+
+    event.preventDefault();
+    const dialogEl = this._getDialogEl();
+    if (dialogEl === null) return;
+
+    this._dragState = {
+      startX: event.clientX,
+      startY: event.clientY,
+      startLeft: dialogEl.offsetLeft,
+      startTop: dialogEl.offsetTop,
+    };
+    document.addEventListener("mousemove", this._onDocumentMouseMove);
+    document.addEventListener("mouseup", this._onDocumentMouseUp);
+  }
+
+  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._handleTabTrap(event);
+    }
+  }
+
+  onDialogFocus(): void {
+    this._bringToFront();
+  }
+
+  private _requestClose(): void {
+    if (this._activatedModal !== null && !this._activatedModal.canDeactivefn()) {
+      return;
+    }
+    void this._saveConfig();
+    this.closeRequest.emit();
+  }
+
+  private _handleTabTrap(event: KeyboardEvent): void {
+    const hostEl = this._elRef.nativeElement;
+    const focusableElements = this._getTabbableElements(hostEl);
+    if (focusableElements.length === 0) return;
+
+    const first = focusableElements[0];
+    const last = focusableElements[focusableElements.length - 1];
+
+    if (event.shiftKey) {
+      // Shift+Tab: 첫 요소에서 → 마지막 요소로
+      if (document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      }
+    } else {
+      // Tab: 마지막 요소에서 → 첫 요소로
+      if (document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  }
+
+  private _getTabbableElements(container: HTMLElement): HTMLElement[] {
+    const result: HTMLElement[] = [];
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT);
+    let node = walker.nextNode();
+    while (node !== null) {
+      if (node instanceof HTMLElement && isTabbable(node)) {
+        result.push(node);
+      }
+      node = walker.nextNode();
+    }
+    return result;
+  }
+
+  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;
+      }
+    }
+    hostEl.style.zIndex = String(maxZ + 1);
+  }
+
+  private _getDialogEl(): HTMLElement | null {
+    return this._elRef.nativeElement.querySelector("._dialog");
+  }
+
+  private _applyResize(event: MouseEvent): void {
+    const state = this._resizeState;
+    if (state === undefined) return;
+
+    const dialogEl = this._getDialogEl();
+    if (dialogEl === null) return;
+
+    const dx = event.clientX - state.startX;
+    const dy = event.clientY - state.startY;
+    const minW = this.minWidthPx() ?? 0;
+    const minH = this.minHeightPx() ?? 0;
+
+    let newWidth = state.startWidth;
+    let newHeight = state.startHeight;
+    let newLeft = state.startLeft;
+    let newTop = state.startTop;
+
+    if (state.dir.includes("right")) {
+      newWidth = Math.max(state.startWidth + dx, minW);
+    }
+    if (state.dir.includes("left")) {
+      const proposed = state.startWidth - dx;
+      if (proposed >= minW) {
+        newWidth = proposed;
+        newLeft = state.startLeft + dx;
+      }
+    }
+    if (state.dir.includes("bottom")) {
+      newHeight = Math.max(state.startHeight + dy, minH);
+    }
+    if (state.dir.includes("top")) {
+      const proposed = state.startHeight - dy;
+      if (proposed >= minH) {
+        newHeight = proposed;
+        newTop = state.startTop + dy;
+      }
+    }
+
+    dialogEl.style.width = `${newWidth}px`;
+    dialogEl.style.height = `${newHeight}px`;
+    dialogEl.style.left = `${newLeft}px`;
+    dialogEl.style.top = `${newTop}px`;
+  }
+
+  private _applyDrag(event: MouseEvent): void {
+    const state = this._dragState;
+    if (state === undefined) return;
+
+    const dialogEl = this._getDialogEl();
+    if (dialogEl === null) return;
+
+    const dx = event.clientX - state.startX;
+    const dy = event.clientY - state.startY;
+
+    dialogEl.style.left = `${state.startLeft + dx}px`;
+    dialogEl.style.top = `${state.startTop + dy}px`;
+  }
+
+  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"];
+  }
+}

package/src/ui/overlay/modal/sd-modal.provider.ts

@@ -0,0 +1,216 @@
+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 { TDirectiveInputSignals } from "../../../core/utils/TDirectiveInputSignals";
+import { SdModalControl } from "./sd-modal.control";
+import "@simplysm/core-browser";
+
+/**
+ * 모달 컴포넌트가 구현해야 하는 인터페이스
+ */
+export interface ISdModal<O> {
+  initialized: Signal<boolean>;
+  close: OutputEmitterRef<O | undefined>;
+  actionTplRef?: TemplateRef<any>;
+}
+
+/**
+ * 모달 생성 시 전달하는 정보
+ */
+export interface ISdModalInfo<T extends ISdModal<any>> {
+  title: string;
+  type: Type<T>;
+  inputs: Omit<TDirectiveInputSignals<T>, "initialized" | "close" | "actionTplRef">;
+}
+
+/**
+ * 모달 옵션
+ */
+export interface ISdModalOptions {
+  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;
+}
+
+/**
+ * 모달 내부에서 inject하여 사용하는 프로바이더
+ */
+@Injectable()
+export class SdActivatedModalProvider<T extends ISdModal<any> = ISdModal<any>> {
+  modalComponent = signal<any>(undefined);
+  contentComponent = signal<T | undefined>(undefined);
+  canDeactivefn: () => boolean = () => true;
+}
+
+/**
+ * 모달을 프로그래밍 방식으로 생성하는 프로바이더
+ */
+@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 ISdModal<any>>(
+    modal: ISdModalInfo<T>,
+    options?: ISdModalOptions,
+  ): 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. SdModalControl 생성 (projectableNodes로 컨텐츠 삽입)
+      const modalRef: ComponentRef<SdModalControl> = createComponent(SdModalControl, {
+        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);
+
+      // 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();
+
+        // DOM에서 제거
+        const modalEl = modalRef.location.nativeElement as HTMLElement;
+        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);
+      };
+
+      // 10. close output 구독 (컨텐츠 컴포넌트가 직접 close.emit 호출)
+      closeSub = outputToObservable(contentRef.instance.close).subscribe((result) => {
+        cleanup(result);
+      });
+
+      // 12. SdModalControl의 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);
+  }
+}