@simplysm/angular 14.0.30 → 14.0.33

package/src/data/sheet/useSheetDisplayPipeline.ts

@@ -0,0 +1,64 @@
+import { computed, type Signal, type WritableSignal } from "@angular/core";
+import { useExpandingManager } from "../../core/selection/useExpandingManager";
+
+export function useSheetDisplayPipeline<T>(options: {
+  items: Signal<T[]>;
+  useAutoSort: Signal<boolean>;
+  sortItems: (items: T[]) => T[];
+  itemsPerPage: Signal<number>;
+  currentPage: Signal<number>;
+  totalPageCount: Signal<number>;
+  expandedItems: WritableSignal<T[]>;
+  getChildrenFn: Signal<((item: T, index: number) => T[] | undefined) | undefined>;
+}) {
+  const effectivePageCount = computed(() => {
+    const total = options.totalPageCount();
+    if (total > 0) return total;
+    const perPage = options.itemsPerPage();
+    if (perPage <= 0) return 0;
+    return Math.ceil(options.items().length / perPage);
+  });
+
+  const sortedItems = computed(() => {
+    const items = options.items();
+    if (options.useAutoSort()) {
+      return options.sortItems(items);
+    }
+    return items;
+  });
+
+  const pagedItems = computed(() => {
+    const items = sortedItems();
+    const perPage = options.itemsPerPage();
+    if (perPage <= 0) return items;
+    const page = options.currentPage();
+    const start = page * perPage;
+    return items.slice(start, start + perPage);
+  });
+
+  const expanding = useExpandingManager<T>({
+    items: pagedItems,
+    expandedItems: options.expandedItems,
+    getChildrenFn: options.getChildrenFn,
+    sort: (items) => {
+      if (options.useAutoSort()) {
+        return options.sortItems(items);
+      }
+      return items;
+    },
+  });
+
+  const displayItems = computed(() => {
+    const getChildrenFn = options.getChildrenFn();
+    if (getChildrenFn != null) {
+      return expanding.displayItems().filter((item) => expanding.isVisible(item));
+    }
+    return pagedItems();
+  });
+
+  return {
+    effectivePageCount,
+    displayItems,
+    expanding,
+  };
+}

package/src/data/state-preset/sd-state-preset.ts

@@ -0,0 +1,173 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  model,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdModalProvider } from "../../core/modal/sd-modal.provider";
+import { SdToastProvider } from "../../core/toast/sd-toast.provider";
+import { SdPromptModal } from "../../core/modal/sd-prompt-modal";
+import { SdConfirmModal } from "../../core/modal/sd-confirm-modal";
+import { injectSdSystemConfigResource } from "../../core/config/injectSdSystemConfigResource";
+import { SdAnchor } from "../../controls/button/sd-anchor";
+import { NgIcon } from "@ng-icons/core";
+import { tablerStar, tablerDeviceFloppy, tablerX } from "@ng-icons/tabler-icons";
+import { obj } from "@simplysm/core-common";
+
+export interface SdStatePresetDef {
+  name: string;
+  state: any;
+}
+
+@Component({
+  selector: "sd-state-preset",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdAnchor, NgIcon],
+  template: `
+    <div class="_sd-state-preset">
+      <sd-anchor (click)="onAddClick()" class="_add-btn">
+        <ng-icon [svg]="tablerStar" />
+      </sd-anchor>
+      @for (preset of _presets(); track preset.name) {
+        <div class="_preset-item">
+          <sd-anchor class="_preset-name" (click)="onPresetClick(preset)">
+            {{ preset.name }}
+          </sd-anchor>
+          <sd-anchor class="_preset-save" (click)="onSaveClick(preset)">
+            <ng-icon [svg]="tablerDeviceFloppy" />
+          </sd-anchor>
+          <sd-anchor class="_preset-delete" [theme]="'danger'" (click)="onDeleteClick(preset)">
+            <ng-icon [svg]="tablerX" />
+          </sd-anchor>
+        </div>
+      }
+    </div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-state-preset {
+        display: block;
+
+        > ._sd-state-preset {
+          display: flex;
+          align-items: center;
+          gap: var(--gap-sm);
+          flex-wrap: wrap;
+
+          > ._add-btn {
+            padding: var(--gap-xs);
+          }
+
+          > ._preset-item {
+            display: inline-flex;
+            align-items: center;
+            gap: var(--gap-xs);
+            border: 1px solid var(--trans-lighter);
+            border-radius: var(--border-radius-default);
+            padding: var(--gap-xs) var(--gap-sm);
+          }
+        }
+
+        &[data-sd-size="sm"] > ._sd-state-preset {
+          > ._add-btn {
+            padding: var(--gap-xxs);
+          }
+
+          > ._preset-item {
+            padding: var(--gap-xxs) var(--gap-xs);
+          }
+        }
+
+        &[data-sd-size="lg"] > ._sd-state-preset {
+          > ._add-btn {
+            padding: var(--gap-sm);
+          }
+
+          > ._preset-item {
+            padding: var(--gap-sm) var(--gap-default);
+          }
+        }
+      }
+    `,
+  ],
+  host: {
+    "[attr.data-sd-size]": "size()",
+  },
+})
+export class SdStatePreset {
+  private readonly _sdModal = inject(SdModalProvider);
+  private readonly _sdToast = inject(SdToastProvider);
+
+  key = input.required<string>();
+  state = model<any>();
+  size = input<"sm" | "lg">();
+
+  protected readonly tablerStar = tablerStar;
+  protected readonly tablerDeviceFloppy = tablerDeviceFloppy;
+  protected readonly tablerX = tablerX;
+
+  private readonly _configResource = injectSdSystemConfigResource<SdStatePresetDef[]>({
+    key: this.key,
+  });
+
+  _presets = computed(() => this._configResource.value() ?? []);
+
+  async onAddClick(): Promise<void> {
+    const name = await this._sdModal.showAsync(
+      {
+        title: "프리셋 추가",
+        type: SdPromptModal,
+        inputs: { message: "프리셋 이름을 입력하세요." },
+      },
+      { useCloseByBackdrop: false },
+    );
+
+    if (name == null) return;
+
+    const currentPresets = this._presets();
+    const newPreset: SdStatePresetDef = {
+      name,
+      state: obj.clone(this.state()),
+    };
+
+    this._configResource.set([...currentPresets, newPreset]);
+    this._sdToast.info(`현재 상태가 '${name}'에 저장되었습니다.`);
+  }
+
+  onPresetClick(preset: SdStatePresetDef): void {
+    const currentState = this.state();
+    if (obj.equal(currentState, preset.state)) return;
+    this.state.set(obj.clone(preset.state));
+  }
+
+  onSaveClick(preset: SdStatePresetDef): void {
+    const currentPresets = this._presets();
+    const updated = currentPresets.map((p) =>
+      p.name === preset.name ? { ...p, state: obj.clone(this.state()) } : p,
+    );
+    this._configResource.set(updated);
+    this._sdToast.info(`현재 상태가 ${preset.name}에 저장되었습니다.`);
+  }
+
+  async onDeleteClick(preset: SdStatePresetDef): Promise<void> {
+    const confirmed = await this._sdModal.showAsync(
+      {
+        title: "프리셋 삭제",
+        type: SdConfirmModal,
+        inputs: { message: `저장된 '${preset.name}' 상태가 삭제됩니다.` },
+      },
+      { useCloseByBackdrop: false },
+    );
+
+    if (confirmed !== true) return;
+
+    const currentPresets = this._presets();
+    const filtered = currentPresets.filter((p) => p.name !== preset.name);
+    this._configResource.set(filtered);
+  }
+}

package/src/features/address/sd-address-search.modal.ts

@@ -8,8 +8,8 @@ import {
   ViewEncapsulation,
 } from "@angular/core";
 import type { OnInit } from "@angular/core";
-import { SdBusyContainer } from "../../ui/overlay/busy/sd-busy-container";
-import type { SdModalContentDef } from "../../ui/overlay/modal/sd-modal.provider";
+import { SdBusyContainer } from "../../core/busy/sd-busy-container";
+import type { SdModalContentDef } from "../../core/modal/sd-modal.provider";
 
 declare const daum: {
   postcode: {
@@ -61,10 +61,10 @@ export class SdAddressSearchModal implements SdModalContentDef<Address>, OnInit
   initialized = signal(false);
 
   ngOnInit() {
-    void this.initAsync();
+    void this._initAsync();
   }
 
-  private async initAsync() {
+  private async _initAsync() {
     if (!document.getElementById("daum_address")) {
       await new Promise<void>((resolve, reject) => {
         const scriptEl = document.createElement("script");

package/src/features/editor/sd-tiptap-editor.ts

@@ -0,0 +1,374 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  model,
+  signal,
+  untracked,
+  ViewEncapsulation,
+  type WritableSignal,
+} from "@angular/core";
+import { setupInvalid } from "../../core/validation/setupInvalid";
+import { Editor, type AnyExtension } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import { TextStyle } from "@tiptap/extension-text-style";
+import Color from "@tiptap/extension-color";
+import Highlight from "@tiptap/extension-highlight";
+import TextAlign from "@tiptap/extension-text-align";
+import Image from "@tiptap/extension-image";
+import Placeholder from "@tiptap/extension-placeholder";
+import { useTiptapToolbar } from "./useTiptapToolbar";
+
+const DEFAULT_EXTENSIONS: AnyExtension[] = [
+  StarterKit,
+  TextStyle,
+  Color,
+  Highlight.configure({ multicolor: true }),
+  TextAlign.configure({ types: ["heading", "paragraph"] }),
+  Image.configure({ inline: false, allowBase64: true }),
+];
+
+@Component({
+  selector: "sd-tiptap-editor",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  template: `
+    @if (!disabled()) {
+      <div class="_toolbar">
+        <div class="_btn-group">
+          <button type="button" data-cmd="h1" [class._active]="activeStates().h1"
+                  (click)="execCmd('h1')">H1</button>
+          <button type="button" data-cmd="h2" [class._active]="activeStates().h2"
+                  (click)="execCmd('h2')">H2</button>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="bold" [class._active]="activeStates().bold"
+                  (click)="execCmd('bold')">B</button>
+          <button type="button" data-cmd="italic" [class._active]="activeStates().italic"
+                  (click)="execCmd('italic')">I</button>
+          <button type="button" data-cmd="underline" [class._active]="activeStates().underline"
+                  (click)="execCmd('underline')">U</button>
+          <button type="button" data-cmd="strike" [class._active]="activeStates().strike"
+                  (click)="execCmd('strike')">S</button>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="textColor" class="_color-btn"
+                  (click)="toggleColorPicker('text')">
+            <span class="_color-indicator" [style.background-color]="activeColor()"></span>
+            A
+          </button>
+          <button type="button" data-cmd="bgColor" class="_color-btn"
+                  (click)="toggleColorPicker('bg')">
+            <span class="_color-indicator" [style.background-color]="activeBgColor()"></span>
+            BG
+          </button>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="bulletList" [class._active]="activeStates().bulletList"
+                  (click)="execCmd('bulletList')">UL</button>
+          <button type="button" data-cmd="orderedList" [class._active]="activeStates().orderedList"
+                  (click)="execCmd('orderedList')">OL</button>
+          <button type="button" data-cmd="indent" (click)="execCmd('indent')">→</button>
+          <button type="button" data-cmd="outdent" (click)="execCmd('outdent')">←</button>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="blockquote" [class._active]="activeStates().blockquote"
+                  (click)="execCmd('blockquote')">❝</button>
+          <button type="button" data-cmd="codeBlock" [class._active]="activeStates().codeBlock"
+                  (click)="execCmd('codeBlock')">&lt;/&gt;</button>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="alignLeft" [class._active]="activeStates().alignLeft"
+                  (click)="execCmd('alignLeft')">≡L</button>
+          <button type="button" data-cmd="alignCenter" [class._active]="activeStates().alignCenter"
+                  (click)="execCmd('alignCenter')">≡C</button>
+          <button type="button" data-cmd="alignRight" [class._active]="activeStates().alignRight"
+                  (click)="execCmd('alignRight')">≡R</button>
+          <button type="button" data-cmd="alignJustify" [class._active]="activeStates().alignJustify"
+                  (click)="execCmd('alignJustify')">≡J</button>
+        </div>
+        <div class="_btn-group">
+          <button type="button" data-cmd="clean" (click)="execCmd('clean')">Tx</button>
+        </div>
+      </div>
+      @if (colorPickerMode() !== undefined) {
+        <div class="_color-picker">
+          @for (color of colorPresets; track color) {
+            <button type="button" class="_color-swatch"
+                    [style.background-color]="color"
+                    [attr.aria-label]="color"
+                    (click)="applyColor(color)"></button>
+          }
+          <button type="button" class="_color-swatch _no-color"
+                  (click)="applyColor(undefined)">✕</button>
+        </div>
+      }
+    }
+    <div class="_editor-container"></div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-tiptap-editor {
+        display: block;
+        position: relative;
+        border: 1px solid var(--trans-lighter);
+        border-radius: var(--border-radius-default);
+        background: var(--theme-secondary-lightest);
+
+        > ._toolbar {
+          display: flex;
+          flex-wrap: wrap;
+          gap: var(--gap-xs);
+          padding: var(--gap-xs);
+          border-bottom: 1px solid var(--trans-lighter);
+
+          > ._btn-group {
+            display: flex;
+            gap: 1px;
+
+            > button {
+              padding: var(--gap-xs) var(--gap-sm);
+              border: 1px solid var(--trans-lighter);
+              border-radius: var(--border-radius-default);
+              background: transparent;
+              cursor: pointer;
+              font-size: var(--font-size-default);
+              line-height: 1;
+
+              &._active {
+                background: var(--theme-primary-default);
+                color: var(--text-trans-rev-default);
+              }
+
+              &:hover {
+                background: var(--trans-lighter);
+              }
+
+              &._active:hover {
+                background: var(--theme-primary-default);
+              }
+            }
+          }
+        }
+
+        > ._color-picker {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 2px;
+          padding: var(--gap-xs);
+          border-bottom: 1px solid var(--trans-lighter);
+
+          > ._color-swatch {
+            width: 1.25rem;
+            height: 1.25rem;
+            border: 1px solid var(--trans-lighter);
+            border-radius: 2px;
+            cursor: pointer;
+            padding: 0;
+
+            &._no-color {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              background: var(--control-color);
+              font-size: 0.625rem;
+            }
+          }
+        }
+
+        > ._editor-container {
+          padding: var(--gap-sm);
+          min-height: 6.25rem;
+
+          > .tiptap {
+            outline: none;
+
+            &:focus {
+              outline: none;
+            }
+          }
+        }
+
+        &[data-sd-disabled="true"] {
+          background: var(--theme-gray-lightest);
+          color: var(--text-trans-light);
+
+          > ._editor-container > .tiptap {
+            cursor: not-allowed;
+          }
+        }
+
+        &[data-sd-readonly="true"] {
+          > ._editor-container > .tiptap {
+            cursor: default;
+          }
+        }
+
+        ._color-btn {
+          position: relative;
+
+          > ._color-indicator {
+            display: block;
+            height: 2px;
+            width: 100%;
+            position: absolute;
+            bottom: 2px;
+            left: 0;
+          }
+        }
+      }
+    `,
+  ],
+  host: {
+    "[attr.data-sd-disabled]": "disabled()",
+    "[attr.data-sd-readonly]": "readonly()",
+  },
+})
+export class SdTiptapEditor {
+  value = model<string>();
+  disabled = input(false, { transform: booleanAttribute });
+  readonly = input(false, { transform: booleanAttribute });
+  required = input(false, { transform: booleanAttribute });
+  placeholder = input<string>();
+  validatorFn = input<(value: string | undefined) => string | undefined>();
+  extensions = input<AnyExtension[]>();
+
+  private readonly _elRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly _destroyRef = inject(DestroyRef);
+
+  readonly colorPresets = [
+    "#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef",
+    "#f3f3f3", "#ffffff", "#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff",
+    "#4a86e8", "#0000ff", "#9900ff", "#ff00ff", "#e6b8af", "#f4cccc", "#fce5cd", "#fff2cc",
+    "#d9ead3", "#d0e0e3", "#c9daf8", "#cfe2f3", "#d9d2e9", "#ead1dc", "#dd7e6b", "#ea9999",
+    "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#a4c2f4", "#9fc5e8", "#b4a7d6", "#d5a6bd",
+  ];
+
+  /** @internal -- TipTap Editor 인스턴스. 테스트 및 고급 사용자용 */
+  editor: WritableSignal<Editor | undefined> = signal(undefined);
+
+  private readonly _toolbar = useTiptapToolbar({ editor: this.editor });
+  activeStates = this._toolbar.activeStates;
+  activeColor = this._toolbar.activeColor;
+  activeBgColor = this._toolbar.activeBgColor;
+  colorPickerMode = this._toolbar.colorPickerMode;
+  execCmd = this._toolbar.execCmd;
+  toggleColorPicker = this._toolbar.toggleColorPicker;
+  applyColor = this._toolbar.applyColor;
+
+  private _lastEditorHtml: string | undefined;
+  private _lastExtensions: AnyExtension[] | undefined;
+
+  private readonly _resolvedExtensions = computed(() => {
+    const custom = this.extensions();
+    if (custom !== undefined) return custom;
+
+    const ph = this.placeholder();
+    if (ph !== undefined) {
+      return [...DEFAULT_EXTENSIONS, Placeholder.configure({ placeholder: ph })];
+    }
+    return DEFAULT_EXTENSIONS;
+  });
+
+  constructor() {
+    // Single effect that tracks both extensions and value
+    effect(() => {
+      const extensions = this._resolvedExtensions();
+      const val = this.value();
+
+      // Recreate editor if extensions changed
+      if (this._lastExtensions !== extensions) {
+        this._lastExtensions = extensions;
+        this._destroyEditor();
+        this._createEditor(extensions, val);
+        return;
+      }
+
+      // Skip if value matches last editor output (editor-originated change)
+      if (val === this._lastEditorHtml) return;
+
+      // Sync value to existing editor
+      const currentEditor = untracked(() => this.editor());
+      if (currentEditor == null) return;
+      const currentHtml = this._getEditorHtmlFrom(currentEditor);
+      if (currentHtml === val) return;
+      currentEditor.commands.setContent(val ?? "", { emitUpdate: false });
+      this._lastEditorHtml = undefined;
+    });
+
+    // disabled/readonly → editor.setEditable()
+    effect(() => {
+      const ed = this.editor();
+      if (ed == null) return;
+      const editable = !this.disabled() && !this.readonly();
+      ed.setEditable(editable);
+    });
+
+    // setupInvalid for form validation
+    setupInvalid(() => {
+      const errorMessages: string[] = [];
+      if (this.value() == null) {
+        if (this.required()) {
+          errorMessages.push("값을 입력하세요.");
+        }
+      }
+
+      if (this.validatorFn()) {
+        const message = this.validatorFn()!(this.value());
+        if (message !== undefined) {
+          errorMessages.push(message);
+        }
+      }
+
+      return errorMessages.join("\r\n");
+    });
+
+    this._destroyRef.onDestroy(() => {
+      this._destroyEditor();
+    });
+  }
+
+  private _createEditor(extensions: AnyExtension[], initialContent: string | undefined): void {
+    const container = this._elRef.nativeElement.querySelector("._editor-container");
+    if (container == null) return;
+
+    this.editor.set(new Editor({
+      element: container,
+      extensions,
+      content: initialContent ?? "",
+      editable: untracked(() => !this.disabled() && !this.readonly()),
+      onUpdate: ({ editor }) => {
+        const html = this._getEditorHtmlFrom(editor);
+        this._lastEditorHtml = html;
+        this.value.set(html);
+      },
+      onTransaction: () => {
+        this._toolbar.refreshActiveStates();
+      },
+    }));
+  }
+
+  private _destroyEditor(): void {
+    const ed = untracked(() => this.editor());
+    if (ed != null) {
+      ed.destroy();
+      this.editor.set(undefined);
+    }
+    this._lastEditorHtml = undefined;
+  }
+
+  private _getEditorHtmlFrom(editor: Editor): string | undefined {
+    const html = editor.getHTML();
+    if (editor.isEmpty) return undefined;
+    return html;
+  }
+
+}