@simplysm/angular 14.0.1 → 14.0.5

package/src/core/directives/sd-item-of-template.directive.ts

@@ -0,0 +1,23 @@
+import { Directive, input } from "@angular/core";
+
+@Directive({
+  selector: "ng-template[itemOf]",
+  standalone: true,
+})
+export class SdItemOfTemplateDirective<TItem> {
+  itemOf = input.required<TItem[]>();
+
+  static ngTemplateContextGuard<TContextItem>(
+    _dir: SdItemOfTemplateDirective<TContextItem>,
+    _ctx: unknown,
+  ): _ctx is SdItemOfTemplateContext<TContextItem> {
+    return true;
+  }
+}
+
+export interface SdItemOfTemplateContext<TItem> {
+  $implicit: TItem;
+  item: TItem;
+  index: number;
+  depth: number;
+}

package/src/core/directives/sd-router-link.directive.ts

@@ -0,0 +1,81 @@
+import { Directive, inject, input } from "@angular/core";
+import { Router } from "@angular/router";
+import { SdNavigateWindowProvider } from "../providers/sd-navigate-window.provider";
+
+@Directive({
+  selector: "[sd-router-link]",
+  standalone: true,
+  host: {
+    "[style.cursor]": "'pointer'",
+    "(click)": "onClick($event)",
+  },
+})
+export class SdRouterLinkDirective {
+  private readonly _router = inject(Router);
+  private readonly _navWindow = inject(SdNavigateWindowProvider);
+
+  option = input<
+    | {
+        link: string;
+        params?: Record<string, string>;
+        window?: {
+          width?: number;
+          height?: number;
+        };
+        outletName?: string;
+        queryParams?: Record<string, string>;
+      }
+    | undefined
+  >(undefined, { alias: "sd-router-link" });
+
+  async onClick(event: MouseEvent): Promise<void> {
+    const option = this.option();
+
+    if (!option) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (this._navWindow.isWindow) {
+      const width = option.window?.width ?? 800;
+      const height = option.window?.height ?? 800;
+      const qp = option.queryParams
+        ? "?" + new URLSearchParams(option.queryParams).toString()
+        : "";
+      this._navWindow.open(
+        option.link + qp,
+        option.params,
+        `width=${width},height=${height}`,
+      );
+    } else if (event.ctrlKey || event.altKey) {
+      const qp = option.queryParams
+        ? "?" + new URLSearchParams(option.queryParams).toString()
+        : "";
+      this._navWindow.open(option.link + qp, option.params, "_blank");
+    } else if (event.shiftKey) {
+      const width = option.window?.width ?? 800;
+      const height = option.window?.height ?? 800;
+      const qp = option.queryParams
+        ? "?" + new URLSearchParams(option.queryParams).toString()
+        : "";
+      this._navWindow.open(
+        option.link + qp,
+        option.params,
+        `width=${width},height=${height}`,
+      );
+    } else if (option.outletName === undefined) {
+      await this._router.navigate(
+        [option.link, ...(option.params ? [option.params] : [])],
+        option.queryParams ? { queryParams: option.queryParams } : undefined,
+      );
+    } else {
+      await this._router.navigate(
+        [
+          { outlets: { [option.outletName]: option.link } },
+          ...(option.params ? [option.params] : []),
+        ],
+        option.queryParams ? { queryParams: option.queryParams } : undefined,
+      );
+    }
+  }
+}

package/src/core/directives/sd-typed-template.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, input } from "@angular/core";
+
+@Directive({
+  selector: "ng-template[typed]",
+  standalone: true,
+})
+export class SdTypedTemplateDirective<T> {
+  typed = input.required<T>();
+
+  static ngTemplateContextGuard<TypeToken>(
+    _dir: SdTypedTemplateDirective<TypeToken>,
+    _ctx: unknown,
+  ): _ctx is TypeToken {
+    return true;
+  }
+}

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

@@ -1,6 +1,7 @@
 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 {
@@ -19,6 +20,9 @@ export class SdInsertCommandEventPlugin extends EventManagerPlugin {
   ): () => 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);

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

@@ -1,6 +1,7 @@
 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 {
@@ -24,6 +25,9 @@ export class SdRefreshCommandEventPlugin extends EventManagerPlugin {
         event.altKey &&
         !event.shiftKey
       ) {
+        const topModal = findTopOpenModalEl();
+        if (topModal != null && !topModal.contains(element)) return;
+
         event.preventDefault();
         event.stopPropagation();
         handler(event);

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

@@ -1,6 +1,7 @@
 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 {
@@ -24,6 +25,9 @@ export class SdSaveCommandEventPlugin extends EventManagerPlugin {
         !event.altKey &&
         !event.shiftKey
       ) {
+        const topModal = findTopOpenModalEl();
+        if (topModal != null && !topModal.contains(element)) return;
+
         event.preventDefault();
         event.stopPropagation();
         handler(event);

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

@@ -20,26 +20,6 @@ export class SdResizeEventPlugin extends EventManagerPlugin {
     let prevWidth = 0;
     let prevHeight = 0;
 
-    const intersectionObserver = new IntersectionObserver(([entry]) => {
-      if (!entry.isIntersecting) return;
-
-      const contentRect = entry.boundingClientRect;
-
-      const heightChanged = contentRect.height !== prevHeight;
-      const widthChanged = contentRect.width !== prevWidth;
-      prevHeight = contentRect.height;
-      prevWidth = contentRect.width;
-
-      handler({
-        heightChanged,
-        widthChanged,
-        target: entry.target,
-        contentRect: entry.boundingClientRect,
-      });
-
-      intersectionObserver.unobserve(entry.target);
-    });
-
     let animationFrameId: number | undefined;
     const resizeObserver = new ResizeObserver(([entry]) => {
       if (animationFrameId != null) {
@@ -63,10 +43,8 @@ export class SdResizeEventPlugin extends EventManagerPlugin {
     });
 
     resizeObserver.observe(element);
-    intersectionObserver.observe(element);
 
     return (): void => {
-      intersectionObserver.disconnect();
       resizeObserver.disconnect();
     };
   }

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

@@ -6,10 +6,12 @@ import {
   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 {
@@ -17,20 +19,20 @@ export class SdGlobalErrorHandlerPlugin implements ErrorHandler {
         const reason = event.reason;
 
         if (reason instanceof Error) {
-          this._displayErrorMessage("Unhandled Promise Rejection", {
+          this._displayErrorMessage("처리되지 않은 Promise 거부", {
             Message: reason.message,
-            Stack: reason.stack ?? "(no stack)",
+            Stack: reason.stack ?? "(스택 없음)",
           });
         } else if (typeof reason === "object" && reason !== null) {
-          this._displayErrorMessage("Unhandled Promise Rejection", {
+          this._displayErrorMessage("처리되지 않은 Promise 거부", {
             Reason: JSON.stringify(reason, null, 2),
           });
         } else if (typeof reason === "string") {
-          this._displayErrorMessage("Unhandled Promise Rejection", {
+          this._displayErrorMessage("처리되지 않은 Promise 거부", {
             Reason: reason,
           });
         } else {
-          this._displayErrorMessage("Unhandled Promise Rejection", {
+          this._displayErrorMessage("처리되지 않은 Promise 거부", {
             Event: JSON.stringify(event, null, 2),
           });
         }
@@ -38,8 +40,7 @@ export class SdGlobalErrorHandlerPlugin implements ErrorHandler {
         const { message, filename, lineno, colno, error } = event;
 
         if (error == null) {
-          // eslint-disable-next-line no-console
-          console.warn(message);
+          void this._systemLog.writeAsync("warn", message);
           return;
         }
 
@@ -48,13 +49,13 @@ export class SdGlobalErrorHandlerPlugin implements ErrorHandler {
           stack = "\n" + error.stack;
         }
 
-        this._displayErrorMessage("Uncaught Error", {
+        this._displayErrorMessage("처리되지 않은 에러", {
           Message: `${message}`,
           Source: `${filename}(${lineno}, ${colno})${stack}`,
         });
       } else if (event instanceof Error) {
         this._displayErrorMessage(
-          "Uncaught Error",
+          "처리되지 않은 에러",
           event.stack != null
             ? {
                 Stack: event.stack,
@@ -64,6 +65,10 @@ export class SdGlobalErrorHandlerPlugin implements ErrorHandler {
                 Event: JSON.stringify(event, null, 2),
               },
         );
+      } else {
+        this._displayErrorMessage("처리되지 않은 에러", {
+          Message: String(event),
+        });
       }
     } catch (err) {
       // eslint-disable-next-line no-console
@@ -79,13 +84,12 @@ export class SdGlobalErrorHandlerPlugin implements ErrorHandler {
   private _displayErrorMessage(title: string, param: Record<string, string>) {
     const paramLines = Object.keys(param).map((key) => key + ": " + param[key]);
 
-    // eslint-disable-next-line no-console
-    console.error(`[${title}]\n${paramLines.join("\n")}`);
+    void this._systemLog.writeAsync("error", `[${title}]\n${paramLines.join("\n")}`);
 
     const appRef = this._envInjector.get<ApplicationRef>(ApplicationRef);
     appRef.destroy();
 
-    const htmlText = `[${title}]<br />${paramLines.join("<br />")}`;
+    const plainText = `[${title}]\n${paramLines.join("\n")}`;
 
     const divEl = document.createElement("div");
     divEl.style.position = "fixed";
@@ -99,7 +103,12 @@ export class SdGlobalErrorHandlerPlugin implements ErrorHandler {
     divEl.style.overflow = "auto";
     divEl.style.padding = "4px";
 
-    divEl.innerHTML = `<pre style="font-size: 12px; font-family: monospace; line-height: 1.4em;">${htmlText}</pre>`;
+    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 = () => {

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;
+}