@simplysm/angular 14.0.30 → 14.0.33

package/src/core/config/injectSdSystemConfigResource.ts

@@ -0,0 +1,41 @@
+import { ElementRef, ErrorHandler, inject, type ResourceRef, resource, type Signal } from "@angular/core";
+import { SdSystemConfigProvider } from "./sd-system-config.provider";
+
+export function injectSdSystemConfigResource<T>(options: { key: Signal<string | undefined> }) {
+  const sdSystemConfig = inject<SdSystemConfigProvider<Record<string, T>>>(SdSystemConfigProvider);
+  const elRef = inject(ElementRef);
+  const errorHandler = inject(ErrorHandler);
+
+  const elTag = elRef.nativeElement.tagName.toLowerCase();
+
+  const res: ResourceRef<T | undefined> = resource({
+    params: () => options.key(),
+    loader: async ({ params: key }) => {
+      return (await sdSystemConfig.getAsync(`${elTag}.${key}`)) as T | undefined;
+    },
+  });
+
+  function set(value: T | undefined) {
+    res.set(value);
+    const key = options.key();
+    if (key == null) return;
+    queueMicrotask(() => {
+      sdSystemConfig.setAsync(`${elTag}.${key}`, value as T).catch((err) => {
+        errorHandler.handleError(err);
+      });
+    });
+  }
+
+  return {
+    value: res.value,
+    isLoading: res.isLoading,
+    status: res.status,
+    hasValue: () => res.hasValue(),
+    reload: () => res.reload(),
+    set,
+    update(fn: (prev: T | undefined) => T | undefined) {
+      const newValue = fn(res.value());
+      set(newValue);
+    },
+  };
+}

package/src/core/error-handler/sd-global-error-handler.plugin.ts

@@ -0,0 +1,128 @@
+import {
+  ApplicationRef,
+  EnvironmentInjector,
+  ErrorHandler,
+  inject,
+  Injectable,
+  isDevMode,
+} from "@angular/core";
+import { SdSystemLogProvider } from "../config/sd-system-log.provider";
+
+@Injectable({ providedIn: null })
+export class SdGlobalErrorHandlerPlugin implements ErrorHandler {
+  private readonly _envInjector = inject(EnvironmentInjector);
+  private readonly _systemLog = inject(SdSystemLogProvider);
+  private _hasDisplayedError = false;
+
+  handleError(event: any) {
+    try {
+      if (event instanceof PromiseRejectionEvent) {
+        const reason = event.reason;
+
+        if (reason instanceof Error) {
+          this._displayErrorMessage("처리되지 않은 Promise 거부", {
+            Message: reason.message,
+            Stack: reason.stack ?? "(스택 없음)",
+          });
+        } else if (typeof reason === "object" && reason !== null) {
+          this._displayErrorMessage("처리되지 않은 Promise 거부", {
+            Reason: JSON.stringify(reason, null, 2),
+          });
+        } else if (typeof reason === "string") {
+          this._displayErrorMessage("처리되지 않은 Promise 거부", {
+            Reason: reason,
+          });
+        } else {
+          this._displayErrorMessage("처리되지 않은 Promise 거부", {
+            Reason: String(reason),
+          });
+        }
+      } else if (event instanceof ErrorEvent) {
+        const { message, filename, lineno, colno, error } = event;
+
+        if (error == null) {
+          void this._systemLog.writeAsync("warn", message);
+          return;
+        }
+
+        let stack = "";
+        if (error?.stack != null) {
+          stack = "\n" + error.stack;
+        }
+
+        this._displayErrorMessage("처리되지 않은 에러", {
+          Message: `${message}`,
+          Source: `${filename}(${lineno}, ${colno})${stack}`,
+        });
+      } else if (event instanceof Error) {
+        this._displayErrorMessage(
+          "처리되지 않은 에러",
+          event.stack != null
+            ? {
+                Stack: event.stack,
+              }
+            : {
+                Message: event.message,
+                Event: JSON.stringify(event, null, 2),
+              },
+        );
+      } else {
+        this._displayErrorMessage("처리되지 않은 에러", {
+          Message: String(event),
+        });
+      }
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error(err, event);
+
+      document.body.textContent =
+        `[에러 처리 실패]\n원본: ${String(event)}\n2차: ${String(err)}`;
+
+      const appRef = this._envInjector.get<ApplicationRef>(ApplicationRef);
+      appRef.destroy();
+    }
+
+    return false;
+  }
+
+  private _displayErrorMessage(title: string, param: Record<string, string>) {
+    if (this._hasDisplayedError) return;
+    this._hasDisplayedError = true;
+
+    const paramLines = Object.keys(param).map((key) => key + ": " + param[key]);
+
+    void this._systemLog.writeAsync("error", `[${title}]\n${paramLines.join("\n")}`);
+
+    const appRef = this._envInjector.get<ApplicationRef>(ApplicationRef);
+    appRef.destroy();
+
+    const plainText = `[${title}]\n${paramLines.join("\n")}`;
+
+    const divEl = document.createElement("div");
+    divEl.style.position = "fixed";
+    divEl.style.top = "0";
+    divEl.style.left = "0";
+    divEl.style.width = "100%";
+    divEl.style.height = "100%";
+    divEl.style.color = "white";
+    divEl.style.background = "rgba(0,0,0,.6)";
+    divEl.style.zIndex = "9999";
+    divEl.style.overflow = "auto";
+    divEl.style.padding = "4px";
+
+    const preEl = document.createElement("pre");
+    preEl.style.fontSize = "12px";
+    preEl.style.fontFamily = "monospace";
+    preEl.style.lineHeight = "1.4em";
+    preEl.textContent = plainText;
+    divEl.appendChild(preEl);
+
+    document.body.append(divEl);
+    divEl.onclick = () => {
+      if (!isDevMode()) {
+        location.hash = "/";
+      }
+      location.reload();
+    };
+  }
+}

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

@@ -0,0 +1,79 @@
+import { Directive, output } from "@angular/core";
+import type { SdResizeEvent } from "./sd-resize-event.plugin";
+
+@Directive({
+  selector: `
+    [click.capture], [click.once], [click.capture.once],
+    [mousedown.capture], [mouseup.capture], [mouseover.capture], [mouseout.capture],
+    [keydown.capture], [keyup.capture],
+    [focus.capture], [blur.capture],
+    [invalid.capture],
+    [scroll.capture], [scroll.passive], [scroll.capture.passive],
+    [wheel.passive], [wheel.capture.passive],
+    [touchstart.passive], [touchstart.capture.passive],
+    [touchmove.passive], [touchmove.capture.passive],
+    [touchend.passive],
+    [dragover.capture], [dragenter.capture], [dragleave.capture], [drop.capture],
+    [transitionend.once], [animationend.once],
+    [sdResize],
+    [sdRefreshCommand], [sdSaveCommand], [sdInsertCommand]
+  `,
+  standalone: true,
+})
+export class SdEvents {
+  // 클릭
+  "click.capture" = output<MouseEvent>();
+  "click.once" = output<MouseEvent>();
+  "click.capture.once" = output<MouseEvent>();
+
+  // 마우스
+  "mousedown.capture" = output<MouseEvent>();
+  "mouseup.capture" = output<MouseEvent>();
+  "mouseover.capture" = output<MouseEvent>();
+  "mouseout.capture" = output<MouseEvent>();
+
+  // 키보드
+  "keydown.capture" = output<KeyboardEvent>();
+  "keyup.capture" = output<KeyboardEvent>();
+
+  // Focus (버블링 안 되므로 capture 필수)
+  "focus.capture" = output<FocusEvent>();
+  "blur.capture" = output<FocusEvent>();
+
+  // 폼
+  "invalid.capture" = output<Event>();
+
+  // Scroll (passive로 성능 최적화)
+  "scroll.capture" = output<Event>();
+  "scroll.passive" = output<Event>();
+  "scroll.capture.passive" = output<Event>();
+
+  // Wheel (passive로 성능 최적화)
+  "wheel.passive" = output<WheelEvent>();
+  "wheel.capture.passive" = output<WheelEvent>();
+
+  // Touch (passive로 성능 최적화)
+  "touchstart.passive" = output<TouchEvent>();
+  "touchstart.capture.passive" = output<TouchEvent>();
+  "touchmove.passive" = output<TouchEvent>();
+  "touchmove.capture.passive" = output<TouchEvent>();
+  "touchend.passive" = output<TouchEvent>();
+
+  // 드래그 앤 드롭
+  "dragover.capture" = output<DragEvent>();
+  "dragenter.capture" = output<DragEvent>();
+  "dragleave.capture" = output<DragEvent>();
+  "drop.capture" = output<DragEvent>();
+
+  // Animation/Transition (once로 한 번만)
+  "transitionend.once" = output<TransitionEvent>();
+  "animationend.once" = output<AnimationEvent>();
+
+  // 커스텀 이벤트
+  "sdResize" = output<SdResizeEvent>();
+
+  // 커맨드 이벤트
+  "sdRefreshCommand" = output<KeyboardEvent>();
+  "sdSaveCommand" = output<KeyboardEvent>();
+  "sdInsertCommand" = output<KeyboardEvent>();
+}

package/src/core/mark.ts

@@ -0,0 +1,9 @@
+import type { WritableSignal } from "@angular/core";
+
+/**
+ * WritableSignal의 값이 in-place mutation된 후 소비자에게 변경을 알린다.
+ * shallow copy로 새 참조를 생성하여 signal을 업데이트한다.
+ */
+export function mark(sig: WritableSignal<any>): void {
+  sig.update((v) => (Array.isArray(v) ? [...v] : { ...v }));
+}

package/src/core/modal/injectDragResize.ts

@@ -0,0 +1,158 @@
+import { type Signal, inject, DestroyRef } from "@angular/core";
+
+interface DragResizeOptions {
+  getDialogEl: () => HTMLElement | null;
+  minWidthPx: Signal<number | undefined>;
+  minHeightPx: Signal<number | undefined>;
+  onEnd: () => void;
+}
+
+export function injectDragResize(opt: DragResizeOptions): {
+  startDrag: (event: MouseEvent) => void;
+  startResize: (event: MouseEvent, dir: string) => void;
+} {
+  const destroyRef = inject(DestroyRef);
+
+  let dragState:
+    | { startX: number; startY: number; startLeft: number; startTop: number }
+    | undefined;
+
+  let resizeState:
+    | {
+        dir: string;
+        startX: number;
+        startY: number;
+        startWidth: number;
+        startHeight: number;
+        startLeft: number;
+        startTop: number;
+      }
+    | undefined;
+
+  function applyDrag(event: MouseEvent): void {
+    if (dragState === undefined) return;
+
+    const dialogEl = opt.getDialogEl();
+    if (dialogEl === null) return;
+
+    const dx = event.clientX - dragState.startX;
+    const dy = event.clientY - dragState.startY;
+
+    dialogEl.style.left = `${dragState.startLeft + dx}px`;
+    dialogEl.style.top = `${dragState.startTop + dy}px`;
+  }
+
+  function applyResize(event: MouseEvent): void {
+    if (resizeState === undefined) return;
+
+    const dialogEl = opt.getDialogEl();
+    if (dialogEl === null) return;
+
+    const dx = event.clientX - resizeState.startX;
+    const dy = event.clientY - resizeState.startY;
+    const minW = opt.minWidthPx() ?? 0;
+    const minH = opt.minHeightPx() ?? 0;
+
+    let newWidth = resizeState.startWidth;
+    let newHeight = resizeState.startHeight;
+    let newLeft = resizeState.startLeft;
+    let newTop = resizeState.startTop;
+
+    if (resizeState.dir.includes("right")) {
+      newWidth = Math.max(resizeState.startWidth + dx, minW);
+    }
+    if (resizeState.dir.includes("left")) {
+      const proposed = resizeState.startWidth - dx;
+      if (proposed >= minW) {
+        newWidth = proposed;
+        newLeft = resizeState.startLeft + dx;
+      }
+    }
+    if (resizeState.dir.includes("bottom")) {
+      newHeight = Math.max(resizeState.startHeight + dy, minH);
+    }
+    if (resizeState.dir.includes("top")) {
+      const proposed = resizeState.startHeight - dy;
+      if (proposed >= minH) {
+        newHeight = proposed;
+        newTop = resizeState.startTop + dy;
+      }
+    }
+
+    dialogEl.style.width = `${newWidth}px`;
+    dialogEl.style.height = `${newHeight}px`;
+    dialogEl.style.left = `${newLeft}px`;
+    dialogEl.style.top = `${newTop}px`;
+  }
+
+  function onDocumentMouseMove(event: MouseEvent): void {
+    if (resizeState !== undefined) {
+      applyResize(event);
+    }
+    if (dragState !== undefined) {
+      applyDrag(event);
+    }
+  }
+
+  function onDocumentMouseUp(): void {
+    const hadState = resizeState !== undefined || dragState !== undefined;
+    resizeState = undefined;
+    dragState = undefined;
+    document.removeEventListener("mousemove", onDocumentMouseMove);
+    document.removeEventListener("mouseup", onDocumentMouseUp);
+    if (hadState) {
+      opt.onEnd();
+    }
+  }
+
+  function getParentRect(dialogEl: HTMLElement): { left: number; top: number } {
+    return (dialogEl.offsetParent as HTMLElement | null)?.getBoundingClientRect() ?? {
+      left: 0,
+      top: 0,
+    };
+  }
+
+  function startDrag(event: MouseEvent): void {
+    const dialogEl = opt.getDialogEl();
+    if (dialogEl === null) return;
+
+    const dialogRect = dialogEl.getBoundingClientRect();
+    const parentRect = getParentRect(dialogEl);
+
+    dragState = {
+      startX: event.clientX,
+      startY: event.clientY,
+      startLeft: dialogRect.left - parentRect.left,
+      startTop: dialogRect.top - parentRect.top,
+    };
+    document.addEventListener("mousemove", onDocumentMouseMove);
+    document.addEventListener("mouseup", onDocumentMouseUp);
+  }
+
+  function startResize(event: MouseEvent, dir: string): void {
+    const dialogEl = opt.getDialogEl();
+    if (dialogEl === null) return;
+
+    const dialogRect = dialogEl.getBoundingClientRect();
+    const parentRect = getParentRect(dialogEl);
+
+    resizeState = {
+      dir,
+      startX: event.clientX,
+      startY: event.clientY,
+      startWidth: dialogEl.offsetWidth,
+      startHeight: dialogEl.offsetHeight,
+      startLeft: dialogRect.left - parentRect.left,
+      startTop: dialogRect.top - parentRect.top,
+    };
+    document.addEventListener("mousemove", onDocumentMouseMove);
+    document.addEventListener("mouseup", onDocumentMouseUp);
+  }
+
+  destroyRef.onDestroy(() => {
+    document.removeEventListener("mousemove", onDocumentMouseMove);
+    document.removeEventListener("mouseup", onDocumentMouseUp);
+  });
+
+  return { startDrag, startResize };
+}

package/src/core/modal/injectFocusTrap.ts

@@ -0,0 +1,44 @@
+import { ElementRef, inject } from "@angular/core";
+import { isTabbable } from "tabbable";
+
+export function injectFocusTrap(): {
+  handleTabTrap: (event: KeyboardEvent) => void;
+} {
+  const elRef = inject(ElementRef<HTMLElement>);
+
+  function 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;
+  }
+
+  function handleTabTrap(event: KeyboardEvent): void {
+    const hostEl = elRef.nativeElement;
+    const focusableElements = getTabbableElements(hostEl);
+    if (focusableElements.length === 0) return;
+
+    const first = focusableElements[0];
+    const last = focusableElements[focusableElements.length - 1];
+
+    if (event.shiftKey) {
+      if (document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  }
+
+  return { handleTabTrap };
+}

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

@@ -0,0 +1,12 @@
+import { Injectable, signal } from "@angular/core";
+import type { SdModalContentDef } from "./sd-modal.provider";
+
+/**
+ * 모달 내부에서 inject하여 사용하는 프로바이더
+ */
+@Injectable()
+export class SdActivatedModalProvider<T extends SdModalContentDef<any> = SdModalContentDef<any>> {
+  modalComponent = signal<any>(undefined);
+  contentComponent = signal<T | undefined>(undefined);
+  canDeactiveFn: () => boolean = () => true;
+}

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

@@ -0,0 +1,48 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+  signal,
+  ViewEncapsulation,
+} from "@angular/core";
+import type { SdModalContentDef } from "./sd-modal.provider";
+import { SdButton } from "../../controls/button/sd-button";
+
+/**
+ * 범용 확인 모달.
+ * SdModalContentDef<boolean> 구현. message를 표시하고, 확인/취소.
+ * 확인 시 true emit, 취소 시 undefined emit.
+ */
+@Component({
+  selector: "sd-confirm-modal",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdButton],
+  host: {
+    style: "display: block",
+    class: "p-default",
+  },
+  template: `
+    <p class="mb-default" [innerHTML]="message()"></p>
+    <div class="flex-row main-align-end gap-sm">
+      <sd-button [theme]="'primary'" (click)="onConfirm()">확인</sd-button>
+      <sd-button (click)="onCancel()">취소</sd-button>
+    </div>
+  `,
+})
+export class SdConfirmModal implements SdModalContentDef<boolean> {
+  initialized = signal(true);
+  close = output<boolean | undefined>();
+
+  message = input.required<string>();
+
+  onConfirm(): void {
+    this.close.emit(true);
+  }
+
+  onCancel(): void {
+    this.close.emit(undefined);
+  }
+}