@simplysm/angular 1.0.138 → 14.0.4

package/src/core/pipes/format.pipe.ts

@@ -0,0 +1,37 @@
+import { Pipe, type PipeTransform } from "@angular/core";
+import { DateOnly, DateTime } from "@simplysm/core-common";
+
+@Pipe({
+  standalone: true,
+  name: "format",
+})
+export class FormatPipe implements PipeTransform {
+  transform(value: string | DateTime | DateOnly | undefined, format: string): string {
+    if (value == null) {
+      return "";
+    } else if (value instanceof DateTime || value instanceof DateOnly) {
+      return value.toFormatString(format);
+    } else {
+      const formatItems = format.split("|");
+
+      for (const formatItem of formatItems) {
+        const fullLength = formatItem.match(/X/g)?.length;
+        if (fullLength === value.length) {
+          let result = "";
+          let valCur = 0;
+          for (const formatItemChar of formatItem) {
+            if (formatItemChar === "X") {
+              result += value[valCur];
+              valCur++;
+            } else {
+              result += formatItemChar;
+            }
+          }
+          return result;
+        }
+      }
+
+      return value;
+    }
+  }
+}

package/src/core/plugins/commands/findTopOpenModalEl.ts

@@ -0,0 +1,23 @@
+/**
+ * DOM에서 열린 모달 중 z-index가 가장 큰 모달 요소를 반환한다.
+ * 열린 모달이 없으면 null을 반환한다.
+ *
+ * SdModalProvider를 import하지 않아 순환 의존을 회피한다.
+ */
+export function findTopOpenModalEl(): HTMLElement | null {
+  const openModals = document.querySelectorAll<HTMLElement>("sd-modal[data-sd-open]");
+  if (openModals.length === 0) return null;
+
+  let topModal: HTMLElement = openModals[0];
+  let maxZ = parseInt(topModal.style.zIndex || "0", 10);
+
+  for (let i = 1; i < openModals.length; i++) {
+    const z = parseInt(openModals[i].style.zIndex || "0", 10);
+    if (z > maxZ) {
+      maxZ = z;
+      topModal = openModals[i];
+    }
+  }
+
+  return topModal;
+}

package/src/core/plugins/commands/sd-insert-command-event.plugin.ts

@@ -0,0 +1,38 @@
+import { inject, Injectable } from "@angular/core";
+import { EventManagerPlugin } from "@angular/platform-browser";
+import { DOCUMENT } from "@angular/common";
+import { findTopOpenModalEl } from "./findTopOpenModalEl";
+
+@Injectable({ providedIn: null })
+export class SdInsertCommandEventPlugin extends EventManagerPlugin {
+  constructor() {
+    super(inject(DOCUMENT));
+  }
+
+  override supports(eventName: string): boolean {
+    return eventName === "sdInsertCommand";
+  }
+
+  override addEventListener(
+    element: HTMLElement,
+    eventName: string,
+    handler: (event: Event) => void,
+  ): () => void {
+    const listener = (event: KeyboardEvent): void => {
+      if (event.key === "Insert" && event.ctrlKey && !event.altKey && !event.shiftKey) {
+        const topModal = findTopOpenModalEl();
+        if (topModal != null && !topModal.contains(element)) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+        handler(event);
+      }
+    };
+
+    document.addEventListener("keydown", listener);
+
+    return (): void => {
+      document.removeEventListener("keydown", listener);
+    };
+  }
+}

package/src/core/plugins/commands/sd-refresh-command-event.plugin.ts

@@ -0,0 +1,43 @@
+import { inject, Injectable } from "@angular/core";
+import { EventManagerPlugin } from "@angular/platform-browser";
+import { DOCUMENT } from "@angular/common";
+import { findTopOpenModalEl } from "./findTopOpenModalEl";
+
+@Injectable({ providedIn: null })
+export class SdRefreshCommandEventPlugin extends EventManagerPlugin {
+  constructor() {
+    super(inject(DOCUMENT));
+  }
+
+  override supports(eventName: string) {
+    return eventName === "sdRefreshCommand";
+  }
+
+  override addEventListener(
+    element: HTMLElement,
+    eventName: string,
+    handler: (event: Event) => void,
+  ): () => void {
+    const listener = (event: KeyboardEvent): void => {
+      if (
+        (event.key === "l" || event.key === "L") &&
+        event.ctrlKey &&
+        event.altKey &&
+        !event.shiftKey
+      ) {
+        const topModal = findTopOpenModalEl();
+        if (topModal != null && !topModal.contains(element)) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+        handler(event);
+      }
+    };
+
+    document.addEventListener("keydown", listener);
+
+    return (): void => {
+      document.removeEventListener("keydown", listener);
+    };
+  }
+}

package/src/core/plugins/commands/sd-save-command-event.plugin.ts

@@ -0,0 +1,43 @@
+import { inject, Injectable } from "@angular/core";
+import { EventManagerPlugin } from "@angular/platform-browser";
+import { DOCUMENT } from "@angular/common";
+import { findTopOpenModalEl } from "./findTopOpenModalEl";
+
+@Injectable({ providedIn: null })
+export class SdSaveCommandEventPlugin extends EventManagerPlugin {
+  constructor() {
+    super(inject(DOCUMENT));
+  }
+
+  override supports(eventName: string) {
+    return eventName === "sdSaveCommand";
+  }
+
+  override addEventListener(
+    element: HTMLElement,
+    eventName: string,
+    handler: (event: Event) => void,
+  ): () => void {
+    const listener = (event: KeyboardEvent): void => {
+      if (
+        (event.key === "s" || event.key === "S") &&
+        event.ctrlKey &&
+        !event.altKey &&
+        !event.shiftKey
+      ) {
+        const topModal = findTopOpenModalEl();
+        if (topModal != null && !topModal.contains(element)) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+        handler(event);
+      }
+    };
+
+    document.addEventListener("keydown", listener);
+
+    return (): void => {
+      document.removeEventListener("keydown", listener);
+    };
+  }
+}

package/src/core/plugins/events/sd-intersection-event.plugin.ts

@@ -0,0 +1,36 @@
+import { inject, Injectable } from "@angular/core";
+import { EventManagerPlugin } from "@angular/platform-browser";
+import { DOCUMENT } from "@angular/common";
+
+@Injectable({ providedIn: null })
+export class SdIntersectionEventPlugin extends EventManagerPlugin {
+  constructor() {
+    super(inject(DOCUMENT));
+  }
+
+  override supports(eventName: string): boolean {
+    return eventName === "sdIntersection";
+  }
+
+  override addEventListener(
+    element: HTMLElement,
+    eventName: string,
+    handler: (entry: ISdIntersectionEvent) => void,
+  ): () => void {
+    const observer = new IntersectionObserver((entries) => {
+      const entry = entries.single();
+      if (!entry) return;
+
+      handler({ entry });
+    });
+    observer.observe(element);
+
+    return (): void => {
+      observer.disconnect();
+    };
+  }
+}
+
+export interface ISdIntersectionEvent {
+  entry: IntersectionObserverEntry;
+}

package/src/core/plugins/events/sd-option-event.plugin.ts

@@ -0,0 +1,43 @@
+import { inject, Injectable } from "@angular/core";
+import { EventManagerPlugin } from "@angular/platform-browser";
+import { DOCUMENT } from "@angular/common";
+
+@Injectable({ providedIn: null })
+export class SdOptionEventPlugin extends EventManagerPlugin {
+  constructor() {
+    super(inject(DOCUMENT));
+  }
+
+  override supports(eventName: string): boolean {
+    if (!/\.(capture|passive|once)/.test(eventName)) return false;
+
+    const realEventName = eventName.replace(/\.(capture|passive|once)/g, "");
+
+    return (
+      `on${realEventName}` in window ||
+      `on${realEventName}` in document ||
+      `on${realEventName}` in HTMLElement.prototype
+    );
+  }
+
+  override addEventListener(
+    element: HTMLElement,
+    eventName: string,
+    handler: (event: Event) => void,
+  ): () => void {
+    const options: AddEventListenerOptions = {
+      capture: eventName.includes(".capture"),
+      passive: eventName.includes(".passive"),
+      once: eventName.includes(".once"),
+    };
+
+    const realEventName = eventName.replace(
+      /\.(capture|passive|once)/g,
+      "",
+    ) as keyof HTMLElementEventMap;
+
+    element.addEventListener(realEventName, handler, options);
+
+    return () => element.removeEventListener(realEventName, handler, options);
+  }
+}

package/src/core/plugins/events/sd-resize-event.plugin.ts

@@ -0,0 +1,58 @@
+import { inject, Injectable } from "@angular/core";
+import { EventManagerPlugin } from "@angular/platform-browser";
+import { DOCUMENT } from "@angular/common";
+
+@Injectable({ providedIn: null })
+export class SdResizeEventPlugin extends EventManagerPlugin {
+  constructor() {
+    super(inject(DOCUMENT));
+  }
+
+  override supports(eventName: string): boolean {
+    return eventName === "sdResize";
+  }
+
+  override addEventListener(
+    element: HTMLElement,
+    eventName: string,
+    handler: (entry: ISdResizeEvent) => void,
+  ): () => void {
+    let prevWidth = 0;
+    let prevHeight = 0;
+
+    let animationFrameId: number | undefined;
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      if (animationFrameId != null) {
+        cancelAnimationFrame(animationFrameId);
+      }
+      animationFrameId = requestAnimationFrame(() => {
+        const contentRect = entry.contentRect;
+
+        const heightChanged = contentRect.height !== prevHeight;
+        const widthChanged = contentRect.width !== prevWidth;
+        prevHeight = contentRect.height;
+        prevWidth = contentRect.width;
+
+        handler({
+          heightChanged,
+          widthChanged,
+          target: entry.target,
+          contentRect: entry.contentRect,
+        });
+      });
+    });
+
+    resizeObserver.observe(element);
+
+    return (): void => {
+      resizeObserver.disconnect();
+    };
+  }
+}
+
+export interface ISdResizeEvent {
+  heightChanged: boolean;
+  widthChanged: boolean;
+  target: Element;
+  contentRect: DOMRectReadOnly;
+}

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

@@ -0,0 +1,121 @@
+import {
+  ApplicationRef,
+  EnvironmentInjector,
+  ErrorHandler,
+  inject,
+  Injectable,
+  isDevMode,
+} from "@angular/core";
+import { SdSystemLogProvider } from "../providers/sd-system-log.provider";
+
+@Injectable({ providedIn: null })
+export class SdGlobalErrorHandlerPlugin implements ErrorHandler {
+  private readonly _envInjector = inject(EnvironmentInjector);
+  private readonly _systemLog = inject(SdSystemLogProvider);
+
+  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 거부", {
+            Event: JSON.stringify(event, null, 2),
+          });
+        }
+      } 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);
+
+      const appRef = this._envInjector.get<ApplicationRef>(ApplicationRef);
+      appRef.destroy();
+    }
+
+    return false;
+  }
+
+  private _displayErrorMessage(title: string, param: Record<string, string>) {
+    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/provideSdAngular.ts

@@ -0,0 +1,154 @@
+import type { EnvironmentProviders } from "@angular/core";
+import {
+  DestroyRef,
+  effect,
+  EnvironmentInjector,
+  ErrorHandler,
+  inject,
+  makeEnvironmentProviders,
+  provideAppInitializer,
+  provideEnvironmentInitializer,
+  provideZonelessChangeDetection,
+} from "@angular/core";
+import { IMAGE_CONFIG } from "@angular/common";
+import { EVENT_MANAGER_PLUGINS } from "@angular/platform-browser";
+import { toSignal } from "@angular/core/rxjs-interop";
+import {
+  NavigationCancel,
+  NavigationEnd,
+  NavigationError,
+  NavigationStart,
+  Router,
+} from "@angular/router";
+import { SwUpdate } from "@angular/service-worker";
+import { provideNgIconsConfig } from "@ng-icons/core";
+import { SdBusyProvider } from "../ui/overlay/busy/sd-busy.provider";
+import { SdAngularConfigProvider } from "./providers/sd-angular-config.provider";
+import { SdThemeProvider } from "./providers/sd-theme-provider";
+import { SdLocalStorageProvider } from "./providers/sd-local-storage.provider";
+import { SdGlobalErrorHandlerPlugin } from "./plugins/sd-global-error-handler.plugin";
+import { SdSaveCommandEventPlugin } from "./plugins/commands/sd-save-command-event.plugin";
+import { SdRefreshCommandEventPlugin } from "./plugins/commands/sd-refresh-command-event.plugin";
+import { SdInsertCommandEventPlugin } from "./plugins/commands/sd-insert-command-event.plugin";
+import { SdResizeEventPlugin } from "./plugins/events/sd-resize-event.plugin";
+import { SdIntersectionEventPlugin } from "./plugins/events/sd-intersection-event.plugin";
+import { SdOptionEventPlugin } from "./plugins/events/sd-option-event.plugin";
+
+export function provideSdAngular(opt: { clientName: string }): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    {
+      provide: IMAGE_CONFIG,
+      useValue: {
+        disableImageSizeWarning: true,
+        disableImageLazyLoadWarning: true,
+      },
+    },
+    provideNgIconsConfig({
+      strokeWidth: 1.5,
+      size: "1.33em",
+    }),
+    provideEnvironmentInitializer(() => {
+      const sdTheme = inject(SdThemeProvider);
+      const sdLocalStorage = inject(SdLocalStorageProvider);
+
+      const savedDark = sdLocalStorage.get("sd-theme-dark");
+      if (savedDark != null) {
+        sdTheme.dark.set(savedDark);
+      }
+
+      effect(() => {
+        sdLocalStorage.set("sd-theme-dark", sdTheme.dark());
+      });
+    }),
+    provideEnvironmentInitializer(() => {
+      const envInjector = inject(EnvironmentInjector);
+
+      const rejectionListener = (event: PromiseRejectionEvent) => {
+        event.preventDefault();
+        const errorHandler = envInjector.get(ErrorHandler);
+        errorHandler.handleError(event);
+      };
+
+      const errorListener = (event: ErrorEvent) => {
+        event.preventDefault();
+        const errorHandler = envInjector.get(ErrorHandler);
+        errorHandler.handleError(event);
+      };
+
+      window.addEventListener("unhandledrejection", rejectionListener);
+      window.addEventListener("error", errorListener);
+      inject(DestroyRef).onDestroy(() => {
+        window.removeEventListener("error", errorListener);
+        window.removeEventListener("unhandledrejection", rejectionListener);
+      });
+    }),
+    {
+      provide: SdAngularConfigProvider,
+      useFactory: () => {
+        const provider = new SdAngularConfigProvider();
+        provider.clientName = opt.clientName;
+        return provider;
+      },
+    },
+    { provide: EVENT_MANAGER_PLUGINS, useClass: SdSaveCommandEventPlugin, multi: true },
+    { provide: EVENT_MANAGER_PLUGINS, useClass: SdRefreshCommandEventPlugin, multi: true },
+    { provide: EVENT_MANAGER_PLUGINS, useClass: SdInsertCommandEventPlugin, multi: true },
+    { provide: EVENT_MANAGER_PLUGINS, useClass: SdResizeEventPlugin, multi: true },
+    { provide: EVENT_MANAGER_PLUGINS, useClass: SdIntersectionEventPlugin, multi: true },
+    { provide: EVENT_MANAGER_PLUGINS, useClass: SdOptionEventPlugin, multi: true },
+    { provide: ErrorHandler, useClass: SdGlobalErrorHandlerPlugin },
+    provideZonelessChangeDetection(),
+    provideAppInitializer(() => {
+      const swUpdate = inject(SwUpdate, { optional: true });
+      const destroyRef = inject(DestroyRef);
+      let timerId: ReturnType<typeof setTimeout> | undefined;
+
+      const updateFn = async () => {
+        try {
+          if (swUpdate?.isEnabled) {
+            if (await swUpdate.checkForUpdate()) {
+              if (
+                window.confirm(
+                  "클라이언트가 업데이트되었습니다. 새로고침하시겠습니까?\n\n" +
+                    "  - 새로고침하지 않으면 몇몇 기능이 정상적으로 동작하지 않을 수 있습니다.",
+                )
+              ) {
+                await swUpdate.activateUpdate();
+                window.location.reload();
+              }
+            }
+          }
+        } catch {
+          // checkForUpdate 실패 시 무시하고 다음 폴링 주기에 재시도
+        } finally {
+          timerId = setTimeout(updateFn, 5 * 60 * 1000);
+        }
+      };
+      void updateFn();
+
+      destroyRef.onDestroy(() => {
+        if (timerId != null) {
+          clearTimeout(timerId);
+        }
+      });
+    }),
+    provideAppInitializer(() => {
+      const router = inject(Router, { optional: true });
+      if (router == null) return;
+      const sdBusy = inject(SdBusyProvider);
+      const navEvent = toSignal(router.events);
+      effect(() => {
+        const event = navEvent();
+        if (event instanceof NavigationStart) {
+          sdBusy.globalBusyCount.update((v) => v + 1);
+        } else if (
+          event instanceof NavigationEnd ||
+          event instanceof NavigationCancel ||
+          event instanceof NavigationError
+        ) {
+          sdBusy.globalBusyCount.update((v) => v - 1);
+        }
+      });
+    }),
+  ]);
+}

package/src/core/providers/sd-angular-config.provider.ts

@@ -0,0 +1,6 @@
+import { Injectable } from "@angular/core";
+
+@Injectable({ providedIn: "root" })
+export class SdAngularConfigProvider {
+  clientName!: string;
+}