@simplysm/angular 14.0.30 → 14.0.33

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

@@ -0,0 +1,66 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+  signal,
+  ViewEncapsulation,
+} from "@angular/core";
+import type { SdModalContentDef } from "./sd-modal.provider";
+import { SdButton } from "../../controls/button/sd-button";
+import { SdTextfield } from "../../controls/input/sd-textfield";
+
+/**
+ * 범용 프롬프트 모달.
+ * SdModalContentDef<string> 구현. message를 표시하고, 텍스트 입력 후 확인/취소.
+ * 확인 시 입력값 emit, 취소 시 undefined emit.
+ */
+@Component({
+  selector: "sd-prompt-modal",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdButton, SdTextfield],
+  host: {
+    style: "display: block",
+    class: "p-default",
+  },
+  template: `
+    <p class="mb-default" [innerHTML]="message()"></p>
+    <sd-textfield
+      [type]="'text'"
+      [value]="_inputValue()"
+      (input)="onInputChange($event)"
+      (keydown.enter)="onConfirm()"
+      class="mb-default"
+    />
+    <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 SdPromptModal implements SdModalContentDef<string> {
+  initialized = signal(true);
+  close = output<string | undefined>();
+
+  message = input.required<string>();
+
+  _inputValue = signal("");
+
+  onInputChange(event: Event): void {
+    const inputEl = event.target as HTMLInputElement;
+    this._inputValue.set(inputEl.value);
+  }
+
+  onConfirm(): void {
+    const val = this._inputValue();
+    if (val !== "") {
+      this.close.emit(val);
+    }
+  }
+
+  onCancel(): void {
+    this.close.emit(undefined);
+  }
+}

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

@@ -0,0 +1,197 @@
+import {
+  ApplicationRef,
+  createComponent,
+  inject,
+  Injectable,
+  inputBinding,
+  type Signal,
+  type Type,
+} from "@angular/core";
+import type { DirectiveInputSignals, WithOptional } from "../directive-input-signals";
+import { SdBusyProvider } from "../busy/sd-busy.provider";
+import { wait } from "@simplysm/core-common";
+import { jsPDF } from "jspdf";
+import * as htmlToImage from "html-to-image";
+
+export interface SdPrint {
+  initialized: Signal<boolean>;
+  readonly _optionalPrintInputs?: string;
+}
+
+type SdPrintOptionalKeys<T> = T extends { _optionalPrintInputs?: infer K extends string }
+  ? K
+  : never;
+
+export interface SdPrintInput<T, X extends keyof any = ""> {
+  type: Type<T>;
+  inputs: WithOptional<
+    Omit<DirectiveInputSignals<T>, "_optionalPrintInputs" | X>,
+    SdPrintOptionalKeys<T> & keyof Omit<DirectiveInputSignals<T>, "_optionalPrintInputs" | X>
+  >;
+}
+
+@Injectable({ providedIn: "root" })
+export class SdPrintProvider {
+  private readonly _appRef = inject(ApplicationRef);
+  private readonly _sdBusy = inject(SdBusyProvider);
+
+  async printAsync<T extends SdPrint>(
+    template: SdPrintInput<T>,
+    options?: {
+      size?: string;
+      margin?: string;
+    },
+  ): Promise<void> {
+    this._sdBusy.globalBusyCount.update((v) => v + 1);
+    try {
+      const compRef = createComponent(template.type, {
+        environmentInjector: this._appRef.injector,
+        bindings: [
+          ...Object.keys(template.inputs).map((inputKey) =>
+            inputBinding(inputKey, () => (template.inputs as Record<string, unknown>)[inputKey]),
+          ),
+        ],
+      });
+
+      const compEl = compRef.location.nativeElement as HTMLElement;
+      compEl.classList.add("_sd-print-template");
+
+      const styleEl = document.createElement("style");
+      styleEl.innerHTML = `
+  @page {
+      size: ${options?.size ?? "A4 auto"};
+      margin: ${options?.margin ?? "0"};
+  }
+  body > ._sd-print-template { display: none; }
+  @media print
+  {
+      html, body { -webkit-print-color-adjust: exact; background: white; }
+      body > * { display: none !important; }
+      body > ._sd-print-template { display: block !important; }
+  }`;
+
+      this._appRef.attachView(compRef.hostView);
+      document.body.appendChild(compEl);
+      document.head.appendChild(styleEl);
+
+      try {
+        this._appRef.tick();
+        await wait.until(() => compRef.instance.initialized(), 100, 300);
+        await this._waitForAllImagesLoadedAsync(compEl);
+
+        window.print();
+      } finally {
+        styleEl.remove();
+        compEl.remove();
+        compRef.destroy();
+      }
+    } finally {
+      this._sdBusy.globalBusyCount.update((v) => v - 1);
+    }
+  }
+
+  async getPdfBufferAsync<T extends SdPrint>(
+    template: SdPrintInput<T>,
+    options?: {
+      orientation?: "portrait" | "landscape";
+      pageSize?: string;
+    },
+  ): Promise<Uint8Array> {
+    this._sdBusy.globalBusyCount.update((v) => v + 1);
+    try {
+      const compRef = createComponent(template.type, {
+        environmentInjector: this._appRef.injector,
+        bindings: [
+          ...Object.keys(template.inputs).map((inputKey) =>
+            inputBinding(inputKey, () => (template.inputs as Record<string, unknown>)[inputKey]),
+          ),
+        ],
+      });
+
+      const compEl = compRef.location.nativeElement as HTMLElement;
+      compEl.classList.add("_sd-print-template");
+
+      const styleEl = document.createElement("style");
+      styleEl.innerHTML = `html, body { overflow: hidden }`;
+
+      this._appRef.attachView(compRef.hostView);
+      document.body.appendChild(compEl);
+      document.head.appendChild(styleEl);
+
+      const headStylesBefore = new Set(document.head.querySelectorAll("style"));
+
+      try {
+        this._appRef.tick();
+        await wait.until(() => compRef.instance.initialized(), 100, 300);
+        await this._waitForAllImagesLoadedAsync(compEl);
+
+        const pageSize = options?.pageSize ?? "a4";
+        const orientation = options?.orientation ?? "p";
+        const doc = new jsPDF(orientation, "pt", pageSize);
+        const pageWidth = doc.internal.pageSize.getWidth();
+        doc.deletePage(1);
+
+        let els = Array.from(compEl.querySelectorAll<HTMLElement>(".page"));
+        if (els.length === 0) {
+          els = [compEl];
+        }
+
+        for (const el of els) {
+          el.style.width = pageWidth + "pt";
+
+          const canvas = await htmlToImage.toCanvas(el, {
+            backgroundColor: "white",
+            pixelRatio: 4,
+          });
+
+          const imgWidth = pageWidth;
+          const imgHeight = canvas.height * (pageWidth / canvas.width);
+
+          doc.addPage(pageSize, orientation).addImage({
+            imageData: canvas,
+            x: 0,
+            y: 0,
+            width: imgWidth,
+            height: imgHeight,
+          });
+        }
+
+        const arrayBuffer = doc.output("arraybuffer");
+        return new Uint8Array(arrayBuffer);
+      } finally {
+        styleEl.remove();
+        for (const s of document.head.querySelectorAll("style")) {
+          if (!headStylesBefore.has(s)) {
+            s.remove();
+          }
+        }
+        compEl.remove();
+        compRef.destroy();
+      }
+    } finally {
+      this._sdBusy.globalBusyCount.update((v) => v - 1);
+    }
+  }
+
+  private async _waitForAllImagesLoadedAsync(container: HTMLElement): Promise<void> {
+    const imgs = Array.from(container.querySelectorAll("img"));
+
+    await Promise.all(
+      imgs.map((img) => {
+        return new Promise<void>((resolve) => {
+          if (img.complete && img.naturalWidth !== 0) {
+            resolve();
+          } else {
+            const onDone = () => {
+              img.removeEventListener("load", onDone);
+              img.removeEventListener("error", onDone);
+              resolve();
+            };
+            img.addEventListener("load", onDone);
+            img.addEventListener("error", onDone);
+          }
+        });
+      }),
+    );
+  }
+}

package/src/core/provideSdAngular.ts

@@ -22,17 +22,17 @@ import {
 } from "@angular/router";
 import { SwUpdate } from "@angular/service-worker";
 import { provideNgIconsConfig } from "@ng-icons/core";
-import { SdBusyProvider } from "./providers/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";
+import { SdBusyProvider } from "./busy/sd-busy.provider";
+import { SdAngularConfigProvider } from "./config/sd-angular-config.provider";
+import { SdThemeProvider } from "../features/theme/sd-theme-provider";
+import { SdLocalStorageProvider } from "./config/sd-local-storage.provider";
+import { SdGlobalErrorHandlerPlugin } from "./error-handler/sd-global-error-handler.plugin";
+import { SdSaveCommandEventPlugin } from "./commands/sd-save-command-event.plugin";
+import { SdRefreshCommandEventPlugin } from "./commands/sd-refresh-command-event.plugin";
+import { SdInsertCommandEventPlugin } from "./commands/sd-insert-command-event.plugin";
+import { SdResizeEventPlugin } from "./events/sd-resize-event.plugin";
+import { SdIntersectionEventPlugin } from "./events/sd-intersection-event.plugin";
+import { SdOptionEventPlugin } from "./events/sd-option-event.plugin";
 
 export function provideSdAngular(opt: { clientName: string }): EnvironmentProviders {
   return makeEnvironmentProviders([
@@ -64,6 +64,20 @@ export function provideSdAngular(opt: { clientName: string }): EnvironmentProvid
           prevDark = dark;
         }
       });
+
+      const savedFontSize = sdLocalStorage.get("sd-theme-font-size");
+      if (savedFontSize != null) {
+        sdTheme.fontSize.set(savedFontSize);
+      }
+
+      let prevFontSize = sdTheme.fontSize();
+      effect(() => {
+        const fontSize = sdTheme.fontSize();
+        if (fontSize !== prevFontSize) {
+          sdLocalStorage.set("sd-theme-font-size", fontSize);
+          prevFontSize = fontSize;
+        }
+      });
     }),
     provideEnvironmentInitializer(() => {
       const envInjector = inject(EnvironmentInjector);

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

@@ -0,0 +1,14 @@
+import { booleanAttribute, Directive, input } from "@angular/core";
+import { setupRipple } from "./setupRipple";
+
+@Directive({
+  selector: "[sdRipple]",
+  standalone: true,
+})
+export class SdRipple {
+  enabled = input.required({ alias: "sdRipple", transform: booleanAttribute });
+
+  constructor() {
+    setupRipple(() => this.enabled());
+  }
+}

package/src/core/routing/injectViewTitleSignal.ts

@@ -0,0 +1,25 @@
+import { computed, inject, type Signal } from "@angular/core";
+import { SdActivatedModalProvider } from "../modal/sd-activated-modal.provider";
+import { SdAppStructureProvider } from "../app-structure/sd-app-structure.provider";
+import { injectFullPageCodeSignal } from "./injectFullPageCodeSignal";
+import { injectCurrentPageCodeSignal } from "./injectCurrentPageCodeSignal";
+
+export function injectViewTitleSignal(): Signal<string> {
+  const activatedModal = inject(SdActivatedModalProvider, { optional: true });
+  const sdAppStructure = inject(SdAppStructureProvider);
+
+  const fullPageCode = injectFullPageCodeSignal();
+  const currPageCode = injectCurrentPageCodeSignal();
+
+  return computed(() => {
+    if (activatedModal != null) {
+      return activatedModal.modalComponent()?.title() ?? "";
+    }
+
+    try {
+      return sdAppStructure.getTitleByFullCode(currPageCode?.() ?? fullPageCode());
+    } catch {
+      return "";
+    }
+  });
+}

package/src/core/routing/injectViewTypeSignal.ts

@@ -0,0 +1,33 @@
+import { computed, inject, type Signal } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { SdActivatedModalProvider } from "../modal/sd-activated-modal.provider";
+import { injectCurrentPageCodeSignal } from "./injectCurrentPageCodeSignal";
+import { injectFullPageCodeSignal } from "./injectFullPageCodeSignal";
+
+export function injectViewTypeSignal(getComp: () => object): Signal<SdViewType> {
+  const activatedModal = inject(SdActivatedModalProvider, { optional: true });
+  const activatedRoute = inject(ActivatedRoute, { optional: true });
+
+  const fullPageCode = injectFullPageCodeSignal();
+  const currPageCode = injectCurrentPageCodeSignal();
+
+  return computed<SdViewType>(() => {
+    if (activatedModal != null) {
+      return "modal";
+    }
+
+    const comp = getComp();
+
+    if (
+      activatedRoute &&
+      activatedRoute.component === comp.constructor &&
+      fullPageCode() === currPageCode?.()
+    ) {
+      return "page";
+    }
+
+    return "control";
+  });
+}
+
+export type SdViewType = "page" | "modal" | "control";

package/src/core/routing/menu-utils.ts

@@ -0,0 +1,32 @@
+import type { SdMenu } from "../app-structure/sd-app-structure.types";
+
+export type { SdMenu } from "../app-structure/sd-app-structure.types";
+
+export function getMenuRouterLinkOption(
+  menu: SdMenu,
+): { link: string; queryParams: Record<string, string> | undefined } | undefined {
+  if (menu.children !== undefined || menu.url != null) {
+    return undefined;
+  }
+
+  const relNav = menu.codeChain.join("/");
+  const n = relNav.split("?")[0];
+  const q = relNav.split("?")[1] as string | undefined;
+  const qp =
+    q == null
+      ? undefined
+      : (Object.fromEntries(new URLSearchParams(q)) as Record<string, string>);
+
+  return {
+    link: "/home/" + n,
+    queryParams: qp,
+  };
+}
+
+export function getIsMenuSelected(
+  menu: SdMenu,
+  fullPageCode: string | undefined,
+  customFn?: (menu: SdMenu) => boolean,
+): boolean {
+  return customFn ? customFn(menu) : fullPageCode === menu.codeChain.join(".");
+}

package/src/core/routing/sd-router-link.ts

@@ -0,0 +1,73 @@
+import { Directive, inject, input } from "@angular/core";
+import { Router } from "@angular/router";
+import { SdNavigateWindowProvider } from "./sd-navigate-window.provider";
+
+@Directive({
+  selector: "[sdRouterLink]",
+  standalone: true,
+  host: {
+    "[style.cursor]": "option() ? 'pointer' : ''",
+    "(click)": "onClick($event)",
+  },
+})
+export class SdRouterLink {
+  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: "sdRouterLink" });
+
+  async onClick(event: MouseEvent): Promise<void> {
+    const option = this.option();
+
+    if (!option) return;
+
+    // Alt+click → 무시 (Chrome 표준: 다운로드, SPA에서는 해당 없음)
+    if (event.altKey) 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.shiftKey) {
+      const qp = option.queryParams
+        ? "?" + new URLSearchParams(option.queryParams).toString()
+        : "";
+      this._navWindow.open(option.link + qp, option.params);
+    } 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/routing/setupCanDeactivate.ts

@@ -0,0 +1,42 @@
+import { DestroyRef, ElementRef, inject, reflectComponentType } from "@angular/core";
+import { ActivatedRoute, type CanDeactivateFn } from "@angular/router";
+import { SdActivatedModalProvider } from "../modal/sd-activated-modal.provider";
+
+export function setupCanDeactivate(fn: () => boolean): void {
+  const activatedModal = inject(SdActivatedModalProvider, { optional: true });
+  const activatedRoute = inject(ActivatedRoute, { optional: true });
+  const elRef = inject(ElementRef);
+
+  if (activatedModal != null) {
+    activatedModal.canDeactiveFn = fn;
+    return;
+  }
+
+  if (activatedRoute) {
+    if (!activatedRoute.routeConfig) return;
+
+    const component = activatedRoute.component;
+    if (component == null || typeof component === "string") return;
+
+    if (
+      reflectComponentType(component)?.selector !==
+      elRef.nativeElement.tagName.toLowerCase()
+    ) {
+      return;
+    }
+
+    const canDeactivateFn: CanDeactivateFn<unknown> = () => fn();
+    if (activatedRoute.routeConfig.canDeactivate == null) {
+      activatedRoute.routeConfig.canDeactivate = [];
+    }
+    activatedRoute.routeConfig.canDeactivate.push(canDeactivateFn);
+
+    const destroyRef = inject(DestroyRef);
+    destroyRef.onDestroy(() => {
+      const idx = activatedRoute.routeConfig!.canDeactivate!.indexOf(canDeactivateFn);
+      if (idx !== -1) {
+        activatedRoute.routeConfig!.canDeactivate!.splice(idx, 1);
+      }
+    });
+  }
+}

package/src/core/service-client/sd-service-client-factory.provider.ts

@@ -0,0 +1,98 @@
+import { DestroyRef, inject, Injectable, type WritableSignal } from "@angular/core";
+import type { ServiceConnectionOptions, ServiceProgressState } from "@simplysm/service-client";
+import { createServiceClient, ServiceClient } from "@simplysm/service-client";
+import { SdAngularConfigProvider } from "../config/sd-angular-config.provider";
+import { SdToastProvider } from "../toast/sd-toast.provider";
+
+@Injectable({ providedIn: "root" })
+export class SdServiceClientFactoryProvider {
+  private readonly _toastProvider = inject(SdToastProvider);
+  private readonly _configProvider = inject(SdAngularConfigProvider);
+  private readonly _destroyRef = inject(DestroyRef);
+
+  private readonly _clientMap = new Map<string, ServiceClient>();
+  private readonly _closedKeys = new Set<string>();
+  private readonly _progressMap = new Map<string, WritableSignal<number>>();
+
+  constructor() {
+    this._destroyRef.onDestroy(() => {
+      for (const client of this._clientMap.values()) {
+        void client.close();
+      }
+      this._clientMap.clear();
+    });
+  }
+
+  async connectAsync(key: string, options?: Partial<ServiceConnectionOptions>): Promise<void> {
+    if (this._closedKeys.has(key)) {
+      throw new Error("이미 연결이 끊긴 클라이언트");
+    }
+    if (this._clientMap.has(key)) {
+      throw new Error("이미 연결된 클라이언트");
+    }
+
+    const ssl = location.protocol.startsWith("https");
+    const defaultOptions: ServiceConnectionOptions = {
+      host: location.hostname,
+      port: location.port !== "" ? Number(location.port) : ssl ? 443 : 80,
+      ssl,
+    };
+
+    const mergedOptions: ServiceConnectionOptions = {
+      ...defaultOptions,
+      ...options,
+    };
+
+    const client = createServiceClient(this._configProvider.clientName, mergedOptions);
+
+    client.on("request-progress", (state: ServiceProgressState) => {
+      this._handleProgress("요청을 전송하는 중입니다.", state);
+    });
+
+    client.on("response-progress", (state: ServiceProgressState) => {
+      this._handleProgress("응답을 전송받는 중입니다.", state);
+    });
+
+    await client.connect();
+    this._clientMap.set(key, client);
+  }
+
+  async closeAsync(key: string): Promise<void> {
+    const client = this._clientMap.get(key);
+    if (client == null) {
+      throw new Error("연결하지 않은 클라이언트 키");
+    }
+
+    await client.close();
+    this._clientMap.delete(key);
+    this._closedKeys.add(key);
+  }
+
+  get(key: string): ServiceClient {
+    const client = this._clientMap.get(key);
+    if (client == null) {
+      if (this._closedKeys.has(key)) {
+        throw new Error("이미 연결이 끊긴 클라이언트");
+      }
+      throw new Error("연결하지 않은 클라이언트 키");
+    }
+    return client;
+  }
+
+  private _handleProgress(message: string, state: ServiceProgressState): void {
+    const { uuid, totalSize, completedSize } = state;
+    const progress = totalSize === 0 ? 0 : Math.round((completedSize / totalSize) * 100);
+
+    let progressSignal = this._progressMap.get(uuid);
+    if (progressSignal == null) {
+      progressSignal = this._toastProvider.info(message, true);
+      this._progressMap.set(uuid, progressSignal);
+    }
+
+    progressSignal.set(progress);
+
+    if (completedSize === totalSize) {
+      this._progressMap.delete(uuid);
+    }
+  }
+}