@simplysm/angular 14.0.30 → 14.0.33

package/src/core/shared-data/sd-shared-data.provider.ts

@@ -0,0 +1,193 @@
+import { computed, ErrorHandler, inject, Injectable, signal, type Signal, type WritableSignal } from "@angular/core";
+import { defineEvent } from "@simplysm/service-common";
+import { obj, wait as waitUtil } from "@simplysm/core-common";
+import { SdServiceClientFactoryProvider } from "../service-client/sd-service-client-factory.provider";
+import "@simplysm/core-common";
+
+export interface SharedDataBase<TKey extends string | number> {
+  __valueKey: TKey;
+  __searchText: string;
+  __isHidden: boolean;
+  __parentKey?: TKey;
+}
+
+export interface SharedDataInfo<T extends SharedDataBase<string | number>> {
+  serviceKey: string;
+  getter: (changeKeys?: (string | number)[]) => Promise<T[]>;
+  filter?: unknown;
+  orderBy?: (a: T, b: T) => number;
+}
+
+export interface SharedDataHandle<T extends SharedDataBase<string | number>> {
+  items: Signal<T[]>;
+  get(key: T["__valueKey"] | undefined): T | undefined;
+}
+
+export const SdSharedDataChangeEvent = defineEvent<
+  { name: string; filter: unknown },
+  (string | number)[] | undefined
+>("SdSharedDataChange");
+
+interface SharedDataEntry<T extends SharedDataBase<string | number>> {
+  info: SharedDataInfo<T>;
+  itemsSignal: WritableSignal<T[]>;
+  handle: SharedDataHandle<T>;
+  listenerKey?: string;
+  needsReload: boolean;
+  isLoading: boolean;
+}
+
+@Injectable()
+export abstract class SdSharedDataProvider<T extends Record<string, SharedDataBase<string | number>>> {
+  private readonly _clientFactory = inject(SdServiceClientFactoryProvider);
+  private readonly _errorHandler = inject(ErrorHandler);
+
+  readonly loadingCount: WritableSignal<number> = signal(0);
+
+  private readonly _entries = new Map<string, SharedDataEntry<any>>();
+
+  abstract initialize(): void;
+
+  register<K extends string & keyof T>(name: K, info: SharedDataInfo<T[K]>): void {
+    const existing = this._entries.get(name as string);
+    if (existing != null) {
+      // 기존 리스너 키 초기화
+      if (existing.listenerKey != null) {
+        const client = this._clientFactory.get(existing.info.serviceKey);
+        void client.removeListener(existing.listenerKey);
+        existing.listenerKey = undefined;
+      }
+      existing.info = info;
+      existing.needsReload = true;
+    } else {
+      const itemsSignal = signal<T[K][]>([]);
+      const itemsMapComputed = computed(() =>
+        itemsSignal().toMap((i) => i.__valueKey),
+      );
+
+      const handle: SharedDataHandle<T[K]> = {
+        items: itemsSignal.asReadonly(),
+        get: (key: T[K]["__valueKey"] | undefined) => {
+          if (key == null) return undefined;
+          return itemsMapComputed().get(key);
+        },
+      };
+
+      this._entries.set(name as string, {
+        info,
+        itemsSignal,
+        handle,
+        needsReload: true,
+        isLoading: false,
+      });
+    }
+  }
+
+  getHandle<K extends string & keyof T>(name: K): SharedDataHandle<T[K]> {
+    const entry = this._entries.get(name as string);
+    if (entry == null) {
+      throw new Error(`등록되지 않은 공유 데이터: ${name as string}`);
+    }
+
+    if (entry.needsReload && !entry.isLoading) {
+      entry.needsReload = false;
+      this._loadAndListen(name as string, entry);
+    }
+
+    return entry.handle;
+  }
+
+  async emitAsync<K extends string & keyof T>(
+    name: K,
+    changeKeys?: (string | number)[],
+  ): Promise<void> {
+    const entry = this._entries.get(name as string);
+    if (entry == null) {
+      throw new Error(`등록되지 않은 공유 데이터: ${name as string}`);
+    }
+
+    const client = this._clientFactory.get(entry.info.serviceKey);
+    const event = client.getEvent<typeof SdSharedDataChangeEvent>("SdSharedDataChange");
+    await event.emit(
+      (item) => item.name === (name as string) && obj.equal(item.filter, entry.info.filter),
+      changeKeys,
+    );
+  }
+
+  async wait(): Promise<void> {
+    await waitUtil.until(() => this.loadingCount() <= 0);
+  }
+
+  private _loadAndListen(name: string, entry: SharedDataEntry<any>): void {
+    entry.isLoading = true;
+    this.loadingCount.update((v) => v + 1);
+
+    // 비동기 로드
+    void entry.info
+      .getter()
+      .then(async (data: any[]) => {
+        entry.itemsSignal.set(data);
+
+        // 이벤트 리스너 등록
+        if (entry.listenerKey == null) {
+          const client = this._clientFactory.get(entry.info.serviceKey);
+          const event = client.getEvent<typeof SdSharedDataChangeEvent>("SdSharedDataChange");
+          entry.listenerKey = await event.addListener(
+            { name, filter: entry.info.filter },
+            async (changeKeys) => {
+              await this._onEvent(name, entry, changeKeys);
+            },
+          );
+        }
+      })
+      .catch((err) => {
+        this._errorHandler.handleError(err);
+      })
+      .finally(() => {
+        this.loadingCount.update((v) => v - 1);
+        entry.isLoading = false;
+        if (entry.needsReload) {
+          entry.needsReload = false;
+          this._loadAndListen(name, entry);
+        }
+      });
+  }
+
+  private async _onEvent(
+    name: string,
+    entry: SharedDataEntry<any>,
+    changeKeys: (string | number)[] | undefined,
+  ): Promise<void> {
+    this.loadingCount.update((v) => v + 1);
+
+    try {
+      if (changeKeys == null) {
+        // 전체 리로드
+        const data = await entry.info.getter();
+        entry.itemsSignal.set(data);
+      } else {
+        // 부분 업데이트
+        const newItems = await entry.info.getter(changeKeys);
+        const currentItems = entry.itemsSignal();
+
+        // 변경된 키를 제거하고 새 항목 추가 (String 변환으로 타입 혼재 방지)
+        const changeKeySet = new Set(changeKeys.map(String));
+        const filtered = currentItems.filter(
+          (item: any) => !changeKeySet.has(String(item.__valueKey)),
+        );
+        const merged = [...filtered, ...newItems];
+
+        // orderBy 적용
+        if (entry.info.orderBy != null) {
+          merged.sort(entry.info.orderBy);
+        }
+
+        entry.itemsSignal.set(merged);
+      }
+    } catch (err) {
+      this._errorHandler.handleError(err);
+    } finally {
+      this.loadingCount.update((v) => v - 1);
+    }
+  }
+}

package/src/core/show-effect/sd-show-effect.ts

@@ -0,0 +1,18 @@
+import { booleanAttribute, Directive, input } from "@angular/core";
+import { setupRevealOnShow } from "./setupRevealOnShow";
+
+@Directive({
+  selector: "[sdShowEffect]",
+  standalone: true,
+})
+export class SdShowEffect {
+  enabled = input.required({ alias: "sdShowEffect", transform: booleanAttribute });
+  sdShowEffectType = input<"l2r" | "t2b">("t2b");
+
+  constructor() {
+    setupRevealOnShow(() => ({
+      type: this.sdShowEffectType(),
+      enabled: this.enabled(),
+    }));
+  }
+}

package/src/core/toast/sd-toast-container.ts

@@ -0,0 +1,58 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+
+@Component({
+  selector: "sd-toast-container",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  host: {
+    "[attr.data-sd-overlap]": "overlap() || undefined",
+  },
+  template: `<ng-content />`,
+  styles: [
+    /* language=SCSS */ `
+      @use "../../../scss/commons/variables";
+      @use "sass:map";
+
+      sd-toast-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        z-index: map.get(variables.$vars, z-index, toast);
+        pointer-events: none;
+
+        @media all and (max-width: variables.$breakpoint-mobile) {
+          flex-direction: column-reverse;
+        }
+
+        &[data-sd-overlap] {
+          display: block;
+          bottom: 0;
+          height: 100%;
+
+          > sd-toast {
+            position: absolute;
+            bottom: var(--gap-xxl);
+            left: var(--gap-xxl);
+            right: var(--gap-xxl);
+            width: auto;
+            max-width: none;
+          }
+        }
+      }
+    `,
+  ],
+})
+export class SdToastContainer {
+  overlap = input(false, { transform: booleanAttribute });
+}

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

@@ -0,0 +1,321 @@
+import {
+  ApplicationRef,
+  createComponent,
+  effect,
+  EnvironmentInjector,
+  inject,
+  Injectable,
+  Injector,
+  signal,
+  type ComponentRef,
+  type OutputEmitterRef,
+  type Type,
+  type WritableSignal,
+} from "@angular/core";
+import { outputToObservable } from "@angular/core/rxjs-interop";
+import type { DirectiveInputSignals } from "../directive-input-signals";
+import { SdToast } from "./sd-toast";
+import { SdToastContainer } from "./sd-toast-container";
+import { SdSystemLogProvider } from "../config/sd-system-log.provider";
+import "@simplysm/core-browser";
+
+export type SdToastSeverity = "info" | "success" | "warning" | "danger";
+export type SdToastTheme = "primary" | "secondary" | SdToastSeverity | "gray" | "blue-gray";
+
+export interface SdToastContentDef<O> {
+  close: OutputEmitterRef<O | undefined>;
+}
+
+export interface SdToastInput<T extends SdToastContentDef<any>> {
+  type: Type<T>;
+  inputs: Omit<DirectiveInputSignals<T>, "close">;
+}
+
+@Injectable({ providedIn: "root" })
+export class SdToastProvider {
+  private readonly _appRef = inject(ApplicationRef);
+  private readonly _envInjector = inject(EnvironmentInjector);
+  private readonly _injector = inject(Injector);
+  private readonly _systemLog = inject(SdSystemLogProvider);
+
+  alertThemes = signal<SdToastSeverity[]>([]);
+  overlap = signal(false);
+  beforeShowFn?: (theme: SdToastSeverity) => void;
+
+  private _containerRef: ComponentRef<SdToastContainer> | undefined;
+  private readonly _toastRefs: ComponentRef<SdToast>[] = [];
+  private readonly _contentRefs = new Map<ComponentRef<SdToast>, ComponentRef<any>>();
+
+  constructor() {
+    effect(() => {
+      if (this._containerRef !== undefined) {
+        this._containerRef.setInput("overlap", this.overlap());
+      }
+    });
+  }
+
+  private _getContainerRef(): ComponentRef<SdToastContainer> {
+    if (this._containerRef === undefined) {
+      this._containerRef = createComponent(SdToastContainer, {
+        environmentInjector: this._envInjector,
+      });
+      this._appRef.attachView(this._containerRef.hostView);
+      document.body.appendChild(this._containerRef.location.nativeElement);
+      this._containerRef.setInput("overlap", this.overlap());
+    }
+    return this._containerRef;
+  }
+
+  info(message: string, useProgress?: true): WritableSignal<number>;
+  info(message: string, useProgress?: false): void;
+  info(message: string, useProgress = false): WritableSignal<number> | void {
+    return this._show("info", message, useProgress);
+  }
+
+  success(message: string, useProgress?: true): WritableSignal<number>;
+  success(message: string, useProgress?: false): void;
+  success(message: string, useProgress = false): WritableSignal<number> | void {
+    return this._show("success", message, useProgress);
+  }
+
+  warning(message: string, useProgress?: true): WritableSignal<number>;
+  warning(message: string, useProgress?: false): void;
+  warning(message: string, useProgress = false): WritableSignal<number> | void {
+    return this._show("warning", message, useProgress);
+  }
+
+  danger(message: string, useProgress?: true): WritableSignal<number>;
+  danger(message: string, useProgress?: false): void;
+  danger(message: string, useProgress = false): WritableSignal<number> | void {
+    return this._show("danger", message, useProgress);
+  }
+
+  notify<T extends SdToastContentDef<any>>(input: SdToastInput<T>): Promise<Parameters<T["close"]["emit"]>[0] | undefined> {
+    return new Promise((resolve) => {
+      // overlap 모드: 기존 토스트 모두 제거
+      if (this.overlap()) {
+        this._removeAllToasts();
+      }
+
+      const containerEl = this._getContainerRef().location.nativeElement as HTMLElement;
+
+      // 토스트 래퍼 생성
+      const toastRef = createComponent(SdToast, {
+        environmentInjector: this._envInjector,
+      });
+      this._appRef.attachView(toastRef.hostView);
+
+      // 커스텀 컴포넌트 생성 (projectableNodes로 토스트 래퍼 안에 삽입)
+      const contentRef: ComponentRef<T> = createComponent(input.type, {
+        environmentInjector: this._envInjector,
+        elementInjector: this._injector,
+      });
+      this._appRef.attachView(contentRef.hostView);
+
+      // inputs 바인딩
+      for (const [key, value] of Object.entries(input.inputs as Record<string, unknown>)) {
+        contentRef.setInput(key, value);
+      }
+
+      // 컨텐츠를 토스트 래퍼 안에 삽입
+      const toastEl = toastRef.location.nativeElement as HTMLElement;
+      toastEl.appendChild(contentRef.location.nativeElement);
+      containerEl.appendChild(toastEl);
+      this._toastRefs.push(toastRef);
+
+      // repaint 후 open 설정
+      toastEl.repaint();
+      toastRef.instance.open.set(true);
+
+      // contentRef를 추적하여 토스트 파괴 시 함께 정리
+      this._contentRefs.set(toastRef, contentRef);
+
+      // close output 구독
+      const closeSub = outputToObservable(contentRef.instance.close).subscribe((result) => {
+        closeSub.unsubscribe();
+        this._dismissToast(toastRef);
+        resolve(result);
+      });
+
+      // 5초 후 자동 해제 (resolve 연동)
+      this._setupAutoDismiss(toastRef, 5000, () => {
+        closeSub.unsubscribe();
+        resolve(undefined);
+      });
+    });
+  }
+
+  async try<R>(fn: () => Promise<R>): Promise<R | undefined>;
+  async try<R>(fn: () => Promise<R>, messageFn: (err: unknown) => string): Promise<R | undefined>;
+  async try<R>(
+    fn: () => Promise<R>,
+    messageFn?: (err: unknown) => string,
+  ): Promise<R | undefined> {
+    try {
+      return await fn();
+    } catch (err) {
+      if (!(err instanceof Error)) {
+        throw err;
+      }
+
+      const message = messageFn !== undefined ? messageFn(err) : err.message;
+      this.danger(message);
+      await this._systemLog.writeAsync("error", err.stack ?? err.message);
+      return undefined;
+    }
+  }
+
+  private _show(
+    theme: SdToastSeverity,
+    message: string,
+    useProgress: boolean,
+  ): WritableSignal<number> | void {
+    // alertThemes 체크
+    if (this.alertThemes().includes(theme)) {
+      window.alert(message);
+      return;
+    }
+
+    // beforeShowFn 콜백
+    if (this.beforeShowFn !== undefined) {
+      this.beforeShowFn(theme);
+    }
+
+    // overlap 모드: 기존 토스트 모두 제거
+    if (this.overlap()) {
+      this._removeAllToasts();
+    }
+
+    // 토스트 컴포넌트 생성
+    const containerEl = this._getContainerRef().location.nativeElement as HTMLElement;
+    const toastRef = createComponent(SdToast, {
+      environmentInjector: this._envInjector,
+    });
+    this._appRef.attachView(toastRef.hostView);
+
+    toastRef.setInput("theme", theme);
+    toastRef.setInput("useProgress", useProgress);
+    toastRef.instance.message.set(message);
+
+    containerEl.appendChild(toastRef.location.nativeElement);
+    this._toastRefs.push(toastRef);
+
+    // repaint 후 open 설정
+    (toastRef.location.nativeElement as HTMLElement).repaint();
+    toastRef.instance.open.set(true);
+
+    if (useProgress) {
+      // progress 모드: effect로 100% 감지 후 1초 뒤 자동 해제
+      const progressSignal = toastRef.instance.progress;
+
+      effect(
+        (onCleanup) => {
+          const val = progressSignal();
+          if (val >= 100) {
+            const timerId = setTimeout(() => {
+              this._dismissToast(toastRef);
+            }, 1000);
+            onCleanup(() => clearTimeout(timerId));
+          }
+        },
+        { injector: toastRef.injector },
+      );
+
+      return progressSignal;
+    } else {
+      // 일반 모드: 3초 후 자동 해제 (호버 중이면 1초 지연)
+      this._setupAutoDismiss(toastRef, 3000);
+    }
+  }
+
+  private _setupAutoDismiss(
+    toastRef: ComponentRef<SdToast>,
+    delayMs: number,
+    onDismiss?: () => void,
+  ): void {
+    const el = toastRef.location.nativeElement as HTMLElement;
+    let isHovering = false;
+    let dismissPending = false;
+    let dismissed = false;
+
+    const dismiss = () => {
+      if (dismissed) return;
+      dismissed = true;
+      onDismiss?.();
+      this._dismissToast(toastRef);
+    };
+
+    const dismissAfterDelay = (ms: number) => {
+      setTimeout(() => {
+        if (dismissed) return;
+        if (isHovering) {
+          dismissPending = true;
+        } else {
+          dismiss();
+        }
+      }, ms);
+    };
+
+    el.addEventListener("mouseenter", () => {
+      isHovering = true;
+    });
+    el.addEventListener("mouseleave", () => {
+      isHovering = false;
+      if (dismissPending) {
+        dismissPending = false;
+        dismissAfterDelay(1000);
+      }
+    });
+
+    dismissAfterDelay(delayMs);
+  }
+
+  private _dismissToast(toastRef: ComponentRef<SdToast>): void {
+    toastRef.instance.open.set(false);
+
+    const el = toastRef.location.nativeElement as HTMLElement;
+    let fallbackId: ReturnType<typeof setTimeout>;
+
+    const onTransitionEnd = () => {
+      clearTimeout(fallbackId);
+      el.removeEventListener("transitionend", onTransitionEnd);
+      this._destroyToast(toastRef);
+    };
+
+    el.addEventListener("transitionend", onTransitionEnd);
+
+    // fallback: transition이 없는 경우 300ms 후 파괴
+    fallbackId = setTimeout(() => {
+      el.removeEventListener("transitionend", onTransitionEnd);
+      this._destroyToast(toastRef);
+    }, 300);
+  }
+
+  private _destroyToast(toastRef: ComponentRef<SdToast>): void {
+    const idx = this._toastRefs.indexOf(toastRef);
+    if (idx === -1) return; // 이미 파괴됨
+
+    this._toastRefs.splice(idx, 1);
+
+    // 연결된 contentRef 파괴
+    const contentRef = this._contentRefs.get(toastRef);
+    if (contentRef !== undefined) {
+      this._contentRefs.delete(toastRef);
+      this._appRef.detachView(contentRef.hostView);
+      contentRef.destroy();
+    }
+
+    const el = toastRef.location.nativeElement as HTMLElement;
+    if (el.parentNode !== null) {
+      el.parentNode.removeChild(el);
+    }
+    this._appRef.detachView(toastRef.hostView);
+    toastRef.destroy();
+  }
+
+  private _removeAllToasts(): void {
+    for (const ref of [...this._toastRefs]) {
+      this._destroyToast(ref);
+    }
+  }
+}