@simplysm/angular 14.0.1 → 14.0.4

package/src/ui/overlay/modal/sd-prompt-modal.control.ts

@@ -0,0 +1,92 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+  signal,
+  ViewEncapsulation,
+} from "@angular/core";
+import type { ISdModal } from "./sd-modal.provider";
+import { SdButtonControl } from "../../form/button/sd-button.control";
+
+/**
+ * 범용 프롬프트 모달.
+ * ISdModal<string> 구현. message를 표시하고, 텍스트 입력 후 확인/취소.
+ * 확인 시 입력값 emit, 취소 시 undefined emit.
+ */
+@Component({
+  selector: "sd-prompt-modal",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdButtonControl],
+  template: `
+    <div class="_sd-prompt-modal">
+      <p class="_message">{{ message() }}</p>
+      <input
+        class="_input"
+        type="text"
+        [value]="_inputValue()"
+        (input)="onInputChange($event)"
+        (keydown.enter)="onConfirm()"
+      />
+      <div class="_actions">
+        <sd-button [theme]="'primary'" (click)="onConfirm()">확인</sd-button>
+        <sd-button (click)="onCancel()">취소</sd-button>
+      </div>
+    </div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-prompt-modal {
+        display: block;
+        padding: var(--gap-default);
+
+        > ._sd-prompt-modal {
+          > ._message {
+            margin-bottom: var(--gap-default);
+          }
+
+          > ._input {
+            display: block;
+            width: 100%;
+            padding: var(--gap-sm) var(--gap-default);
+            border: 1px solid var(--trans-lighter);
+            border-radius: var(--border-radius-default);
+            margin-bottom: var(--gap-default);
+          }
+
+          > ._actions {
+            display: flex;
+            justify-content: flex-end;
+            gap: var(--gap-sm);
+          }
+        }
+      }
+    `,
+  ],
+})
+export class SdPromptModalControl implements ISdModal<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/ui/overlay/toast/sd-toast-container.control.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 SdToastContainerControl {
+  overlap = input(false, { transform: booleanAttribute });
+}

package/src/ui/overlay/toast/sd-toast.control.ts

@@ -0,0 +1,123 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  model,
+  ViewEncapsulation,
+} from "@angular/core";
+import type { TSdToastTheme } from "./sd-toast.provider";
+
+const POLITE_THEMES: ReadonlySet<string> = new Set(["info", "success"]);
+const ASSERTIVE_THEMES: ReadonlySet<string> = new Set(["warning", "danger"]);
+
+@Component({
+  selector: "sd-toast",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  host: {
+    "[attr.data-sd-open]": "open() || undefined",
+    "[attr.data-sd-theme]": "theme()",
+    "[attr.role]": "ariaRole()",
+    "[attr.aria-live]": "ariaLive()",
+  },
+  template: `
+    @if (message() !== undefined) {
+      <div class="_message">{{ message() }}</div>
+    }
+    <ng-content />
+    @if (useProgress()) {
+      <div class="_progress">
+        <div class="_progress-bar" [style.width.%]="progress()"></div>
+      </div>
+    }
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "../../../../scss/commons/variables";
+      @use "../../../../scss/commons/mixins";
+      @use "sass:map";
+
+      sd-toast {
+        display: block;
+        position: relative;
+        max-width: 32.5rem;
+        width: 100%;
+        margin: var(--gap-sm);
+        padding: var(--gap-default) var(--gap-lg);
+        border-radius: var(--border-radius-default);
+        color: var(--text-trans-rev-default);
+        pointer-events: auto;
+        transform: translateY(-100%);
+        opacity: 0;
+        transition:
+          transform var(--animation-duration) ease,
+          opacity var(--animation-duration) ease;
+
+        @include mixins.elevation(12);
+
+        &[data-sd-open] {
+          transform: translateY(0);
+          opacity: 1;
+        }
+
+        @each $theme-name, $theme-map in map.get(variables.$vars, theme) {
+          &[data-sd-theme="#{$theme-name}"] {
+            background: map.get($theme-map, default);
+          }
+        }
+
+        > ._message {
+          word-break: break-all;
+          white-space: pre-wrap;
+        }
+
+        > ._progress {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 0.25rem;
+          background: var(--trans-lighter);
+          border-radius: 0 0 var(--border-radius-default) var(--border-radius-default);
+          overflow: hidden;
+
+          > ._progress-bar {
+            height: 100%;
+            background: var(--trans-default);
+            transition: width 0.3s ease;
+          }
+        }
+
+        @media all and (max-width: variables.$breakpoint-mobile) {
+          max-width: none;
+          margin: var(--gap-xs);
+          border-radius: 0;
+        }
+      }
+    `,
+  ],
+})
+export class SdToastControl {
+  open = model(false);
+  useProgress = input(false, { transform: booleanAttribute });
+  theme = input<TSdToastTheme>("info");
+  progress = model(0);
+  message = model<string | undefined>(undefined);
+
+  ariaRole = computed(() => {
+    const t = this.theme();
+    if (POLITE_THEMES.has(t)) return "status";
+    if (ASSERTIVE_THEMES.has(t)) return "alert";
+    return undefined;
+  });
+
+  ariaLive = computed(() => {
+    const t = this.theme();
+    if (POLITE_THEMES.has(t)) return "polite";
+    if (ASSERTIVE_THEMES.has(t)) return "assertive";
+    return undefined;
+  });
+}

package/src/ui/overlay/toast/sd-toast.provider.ts

@@ -0,0 +1,302 @@
+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 { TDirectiveInputSignals } from "../../../core/utils/TDirectiveInputSignals";
+import { SdToastControl } from "./sd-toast.control";
+import { SdToastContainerControl } from "./sd-toast-container.control";
+import { SdSystemLogProvider } from "../../../core/providers/sd-system-log.provider";
+import "@simplysm/core-browser";
+
+export type TSdToastSeverity = "info" | "success" | "warning" | "danger";
+export type TSdToastTheme = "primary" | "secondary" | TSdToastSeverity | "gray" | "blue-gray";
+
+export interface ISdToast<O> {
+  close: OutputEmitterRef<O | undefined>;
+}
+
+export interface ISdToastInput<T extends ISdToast<any>> {
+  type: Type<T>;
+  inputs: Omit<TDirectiveInputSignals<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<TSdToastSeverity[]>([]);
+  overlap = signal(false);
+  beforeShowFn?: (theme: TSdToastSeverity) => void;
+
+  private _containerRef: ComponentRef<SdToastContainerControl> | undefined;
+  private readonly _toastRefs: ComponentRef<SdToastControl>[] = [];
+  private readonly _contentRefs = new Map<ComponentRef<SdToastControl>, ComponentRef<any>>();
+
+  private get containerRef(): ComponentRef<SdToastContainerControl> {
+    if (this._containerRef === undefined) {
+      this._containerRef = createComponent(SdToastContainerControl, {
+        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 ISdToast<any>>(input: ISdToastInput<T>): Promise<Parameters<T["close"]["emit"]>[0] | undefined> {
+    return new Promise((resolve) => {
+      // overlap 모드: 기존 토스트 모두 제거
+      if (this.overlap()) {
+        this._removeAllToasts();
+      }
+
+      const containerEl = this.containerRef.location.nativeElement as HTMLElement;
+
+      // 토스트 래퍼 생성
+      const toastRef = createComponent(SdToastControl, {
+        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: TSdToastSeverity,
+    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.containerRef.location.nativeElement as HTMLElement;
+    const toastRef = createComponent(SdToastControl, {
+      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(
+        () => {
+          const val = progressSignal();
+          if (val >= 100) {
+            setTimeout(() => {
+              this._dismissToast(toastRef);
+            }, 1000);
+          }
+        },
+        { injector: toastRef.injector },
+      );
+
+      return progressSignal;
+    } else {
+      // 일반 모드: 3초 후 자동 해제 (호버 중이면 1초 지연)
+      this._setupAutoDismiss(toastRef, 3000);
+    }
+  }
+
+  private _setupAutoDismiss(
+    toastRef: ComponentRef<SdToastControl>,
+    delayMs: number,
+    onDismiss?: () => void,
+  ): void {
+    const el = toastRef.location.nativeElement as HTMLElement;
+    let isHovering = false;
+    let dismissPending = false;
+
+    const dismiss = () => {
+      onDismiss?.();
+      this._dismissToast(toastRef);
+    };
+
+    const dismissAfterDelay = (ms: number) => {
+      setTimeout(() => {
+        if (isHovering) {
+          dismissPending = true;
+        } else {
+          dismiss();
+        }
+      }, ms);
+    };
+
+    el.addEventListener("mouseenter", () => {
+      isHovering = true;
+    });
+    el.addEventListener("mouseleave", () => {
+      isHovering = false;
+      if (dismissPending) {
+        dismissAfterDelay(1000);
+      }
+    });
+
+    dismissAfterDelay(delayMs);
+  }
+
+  private _dismissToast(toastRef: ComponentRef<SdToastControl>): void {
+    toastRef.instance.open.set(false);
+
+    const el = toastRef.location.nativeElement as HTMLElement;
+    const onTransitionEnd = () => {
+      el.removeEventListener("transitionend", onTransitionEnd);
+      this._destroyToast(toastRef);
+    };
+    el.addEventListener("transitionend", onTransitionEnd);
+
+    // fallback: transition이 없는 경우 300ms 후 파괴
+    setTimeout(() => {
+      this._destroyToast(toastRef);
+    }, 300);
+  }
+
+  private _destroyToast(toastRef: ComponentRef<SdToastControl>): 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);
+    }
+  }
+}

package/src/ui/visual/sd-barcode.control.ts

@@ -0,0 +1,62 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+import bwipjs from "bwip-js";
+
+@Component({
+  selector: "sd-barcode",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  template: ``,
+})
+export class SdBarcodeControl {
+  private readonly _elRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  type = input.required<TBarcodeType>();
+  value = input<string>();
+
+  constructor() {
+    effect(() => {
+      const text = this.value();
+      if (text == null || text === "") {
+        this._elRef.nativeElement.innerHTML = "";
+        return;
+      }
+      this._elRef.nativeElement.innerHTML = bwipjs.toSVG({
+        bcid: this.type(),
+        text,
+      });
+    });
+  }
+}
+
+export type TBarcodeType =
+  | "auspost" | "azteccode" | "azteccodecompact" | "aztecrune" | "bc412"
+  | "channelcode" | "codablockf" | "code11" | "code128" | "code16k"
+  | "code2of5" | "code32" | "code39" | "code39ext" | "code49" | "code93"
+  | "code93ext" | "codeone" | "coop2of5" | "daft" | "databarexpanded"
+  | "databarexpandedcomposite" | "databarexpandedstacked" | "databarexpandedstackedcomposite"
+  | "databarlimited" | "databarlimitedcomposite" | "databaromni" | "databaromnicomposite"
+  | "databarstacked" | "databarstackedcomposite" | "databarstackedomni" | "databarstackedomnicomposite"
+  | "databartruncated" | "databartruncatedcomposite" | "datalogic2of5" | "datamatrix"
+  | "datamatrixrectangular" | "datamatrixrectangularextension" | "dotcode" | "ean13"
+  | "ean13composite" | "ean14" | "ean2" | "ean5" | "ean8" | "ean8composite" | "flattermarken"
+  | "gs1-128" | "gs1-128composite" | "gs1-cc" | "gs1datamatrix" | "gs1datamatrixrectangular"
+  | "gs1dldatamatrix" | "gs1dlqrcode" | "gs1dotcode" | "gs1northamericancoupon" | "gs1qrcode"
+  | "hanxin" | "hibcazteccode" | "hibccodablockf" | "hibccode128" | "hibccode39" | "hibcdatamatrix"
+  | "hibcdatamatrixrectangular" | "hibcmicropdf417" | "hibcpdf417" | "hibcqrcode" | "iata2of5"
+  | "identcode" | "industrial2of5" | "interleaved2of5" | "isbn" | "ismn" | "issn" | "itf14"
+  | "japanpost" | "kix" | "leitcode" | "mailmark" | "mands" | "matrix2of5" | "maxicode"
+  | "micropdf417" | "microqrcode" | "msi" | "onecode" | "pdf417" | "pdf417compact"
+  | "pharmacode" | "pharmacode2" | "planet" | "plessey" | "posicode" | "postnet" | "pzn"
+  | "qrcode" | "rationalizedCodabar" | "raw" | "rectangularmicroqrcode" | "royalmail"
+  | "sscc18" | "swissqrcode" | "symbol" | "telepen" | "telepennumeric" | "ultracode"
+  | "upca" | "upcacomposite" | "upce" | "upcecomposite";