@simplysm/angular 14.0.5 → 14.0.7

package/src/core/utils/setups/setupCanDeactivate.ts

@@ -1,4 +1,4 @@
-import { ElementRef, inject, reflectComponentType } from "@angular/core";
+import { DestroyRef, ElementRef, inject, reflectComponentType } from "@angular/core";
 import { ActivatedRoute, type CanDeactivateFn } from "@angular/router";
 import { SdActivatedModalProvider } from "../../../ui/overlay/modal/sd-modal.provider";
 
@@ -8,7 +8,7 @@ export function setupCanDeactivate(fn: () => boolean): void {
   const elRef = inject(ElementRef);
 
   if (activatedModal != null) {
-    activatedModal.canDeactivefn = fn;
+    activatedModal.canDeactiveFn = fn;
     return;
   }
 
@@ -30,5 +30,13 @@ export function setupCanDeactivate(fn: () => boolean): void {
       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/utils/setups/setupInvalid.ts

@@ -26,6 +26,11 @@ export function setupInvalid(getInvalidMessage: () => string): void {
     setSafeStyle(renderer, indicatorEl, { display: isInvalid ? "block" : "none" });
   });
 
+  destroyRef.onDestroy(() => {
+    indicatorEl.remove();
+    inputEl.remove();
+  });
+
   const formEl = inputEl.form;
   if (formEl == null) return;
 

package/src/core/utils/setups/setupModelHook.ts

@@ -1,9 +1,10 @@
-import type { Signal, WritableSignal } from "@angular/core";
+import { ErrorHandler, inject, type Signal, type WritableSignal } from "@angular/core";
 
 export function setupModelHook<T, S extends WritableSignal<T>>(
   model: S,
   canFn: Signal<(item: T) => boolean | Promise<boolean>>,
 ): void {
+  const errorHandler = inject(ErrorHandler);
   const orgSet = model.set;
   model.set = (value) => {
     const canSet = canFn()(value);
@@ -21,6 +22,8 @@ export function setupModelHook<T, S extends WritableSignal<T>>(
       if (allowed !== false) {
         orgSet(value);
       }
-    }).catch(() => {});
+    }).catch((err) => {
+      errorHandler.handleError(err);
+    });
   };
 }

package/src/core/utils/setups/setupRipple.ts

@@ -44,9 +44,10 @@ export function setupRipple(enableFn?: () => boolean): void {
       });
       el.appendChild(indicatorEl);
 
-      indicatorEl.ontransitionend = () => {
-        if (indicatorEl !== undefined && getComputedStyle(indicatorEl).opacity === "0") {
+      indicatorEl.ontransitionend = (ev: TransitionEvent) => {
+        if (ev.propertyName === "opacity" && indicatorEl !== undefined) {
           indicatorEl.remove();
+          indicatorEl = undefined;
         }
       };
 

package/src/core/utils/useExpandingManager.ts

@@ -86,9 +86,10 @@ export function useExpandingManager<T>(binding: {
     const itemDef = map.get(item);
     if (itemDef == null) return false;
 
+    const expandedSet = new Set(binding.expandedItems());
     let current = itemDef.parentDef;
     while (current != null) {
-      if (!binding.expandedItems().includes(current.item)) {
+      if (!expandedSet.has(current.item)) {
         return false;
       }
       current = current.parentDef;

package/src/core/utils/useSdSystemConfigResource.ts

@@ -1,9 +1,10 @@
-import { ElementRef, inject, type ResourceRef, resource, type Signal } from "@angular/core";
+import { ElementRef, ErrorHandler, inject, type ResourceRef, resource, type Signal } from "@angular/core";
 import { SdSystemConfigProvider } from "../providers/sd-system-config.provider";
 
 export function useSdSystemConfigResource<T>(options: { key: Signal<string | undefined> }) {
   const sdSystemConfig = inject<SdSystemConfigProvider<Record<string, T>>>(SdSystemConfigProvider);
   const elRef = inject(ElementRef);
+  const errorHandler = inject(ErrorHandler);
 
   const elTag = elRef.nativeElement.tagName.toLowerCase();
 
@@ -24,8 +25,10 @@ export function useSdSystemConfigResource<T>(options: { key: Signal<string | und
       res.set(value);
       const key = options.key();
       if (key == null) return;
-      queueMicrotask(async () => {
-        await sdSystemConfig.setAsync(`${elTag}.${key}`, value as T);
+      queueMicrotask(() => {
+        sdSystemConfig.setAsync(`${elTag}.${key}`, value as T).catch((err) => {
+          errorHandler.handleError(err);
+        });
       });
     },
     update(fn: (prev: T | undefined) => T | undefined) {

package/src/ui/form/editor/sd-tiptap-editor.control.ts

@@ -9,8 +9,10 @@ import {
   inject,
   input,
   model,
+  signal,
   untracked,
   ViewEncapsulation,
+  type WritableSignal,
 } from "@angular/core";
 import { setupInvalid } from "../../../core/utils/setups/setupInvalid";
 import { Editor, type AnyExtension } from "@tiptap/core";
@@ -41,55 +43,55 @@ const DEFAULT_EXTENSIONS: AnyExtension[] = [
     @if (!disabled()) {
       <div class="_toolbar">
         <div class="_btn-group">
-          <button type="button" data-cmd="h1" [class._active]="activeStates.h1"
+          <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"
+          <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"
+          <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"
+          <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"
+          <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"
+          <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>
+            <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>
+            <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"
+          <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"
+          <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"
+          <button type="button" data-cmd="blockquote" [class._active]="activeStates().blockquote"
                   (click)="execCmd('blockquote')">❝</button>
-          <button type="button" data-cmd="codeBlock" [class._active]="activeStates.codeBlock"
+          <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"
+          <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"
+          <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"
+          <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"
+          <button type="button" data-cmd="alignJustify" [class._active]="activeStates().alignJustify"
                   (click)="execCmd('alignJustify')">≡J</button>
         </div>
         <div class="_btn-group">
@@ -249,13 +251,13 @@ export class SdTiptapEditorControl {
     "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#a4c2f4", "#9fc5e8", "#b4a7d6", "#d5a6bd",
   ];
 
-  activeStates: Record<string, boolean> = {};
-  activeColor = "";
-  activeBgColor = "";
+  activeStates: WritableSignal<Record<string, boolean>> = signal({});
+  activeColor = signal("");
+  activeBgColor = signal("");
   colorPickerMode: "text" | "bg" | undefined;
 
   /** @internal -- TipTap Editor 인스턴스. 테스트 및 고급 사용자용 */
-  editor: Editor | undefined;
+  editor: WritableSignal<Editor | undefined> = signal(undefined);
   private updatingFromEditor = false;
   private lastExtensions: AnyExtension[] | undefined;
 
@@ -288,17 +290,19 @@ export class SdTiptapEditorControl {
       }
 
       // Sync value to existing editor
-      if (this.editor == null) return;
-      const currentHtml = this.getEditorHtml();
+      const currentEditor = untracked(() => this.editor());
+      if (currentEditor == null) return;
+      const currentHtml = this.getEditorHtmlFrom(currentEditor);
       if (currentHtml === val) return;
-      this.editor.commands.setContent(val ?? "", { emitUpdate: false });
+      currentEditor.commands.setContent(val ?? "", { emitUpdate: false });
     });
 
     // disabled/readonly → editor.setEditable()
     effect(() => {
-      if (this.editor == null) return;
+      const ed = this.editor();
+      if (ed == null) return;
       const editable = !this.disabled() && !this.readonly();
-      this.editor.setEditable(editable);
+      ed.setEditable(editable);
     });
 
     // setupInvalid for form validation
@@ -329,7 +333,7 @@ export class SdTiptapEditorControl {
     const container = this.elRef.nativeElement.querySelector("._editor-container");
     if (container == null) return;
 
-    this.editor = new Editor({
+    this.editor.set(new Editor({
       element: container,
       extensions,
       content: initialContent ?? "",
@@ -343,21 +347,17 @@ export class SdTiptapEditorControl {
       onTransaction: () => {
         this.refreshActiveStates();
       },
-    });
+    }));
   }
 
   private destroyEditor(): void {
-    if (this.editor != null) {
-      this.editor.destroy();
-      this.editor = undefined;
+    const ed = untracked(() => this.editor());
+    if (ed != null) {
+      ed.destroy();
+      this.editor.set(undefined);
     }
   }
 
-  private getEditorHtml(): string | undefined {
-    if (this.editor == null) return undefined;
-    return this.getEditorHtmlFrom(this.editor);
-  }
-
   private getEditorHtmlFrom(editor: Editor): string | undefined {
     const html = editor.getHTML();
     if (editor.isEmpty) return undefined;
@@ -365,9 +365,10 @@ export class SdTiptapEditorControl {
   }
 
   execCmd(cmd: string): void {
-    if (this.editor == null) return;
+    const ed = this.editor();
+    if (ed == null) return;
 
-    const chain = this.editor.chain().focus();
+    const chain = ed.chain().focus();
     switch (cmd) {
       case "bold":
         chain.toggleBold().run();
@@ -428,9 +429,10 @@ export class SdTiptapEditorControl {
   }
 
   applyColor(color: string | undefined): void {
-    if (this.editor == null) return;
+    const ed = this.editor();
+    if (ed == null) return;
 
-    const chain = this.editor.chain().focus();
+    const chain = ed.chain().focus();
     if (this.colorPickerMode === "text") {
       if (color !== undefined) {
         chain.setColor(color).run();
@@ -448,27 +450,28 @@ export class SdTiptapEditorControl {
   }
 
   private refreshActiveStates(): void {
-    if (this.editor == null) return;
-    this.activeStates = {
-      bold: this.editor.isActive("bold"),
-      italic: this.editor.isActive("italic"),
-      underline: this.editor.isActive("underline"),
-      strike: this.editor.isActive("strike"),
-      h1: this.editor.isActive("heading", { level: 1 }),
-      h2: this.editor.isActive("heading", { level: 2 }),
-      bulletList: this.editor.isActive("bulletList"),
-      orderedList: this.editor.isActive("orderedList"),
-      blockquote: this.editor.isActive("blockquote"),
-      codeBlock: this.editor.isActive("codeBlock"),
-      alignLeft: this.editor.isActive({ textAlign: "left" }),
-      alignCenter: this.editor.isActive({ textAlign: "center" }),
-      alignRight: this.editor.isActive({ textAlign: "right" }),
-      alignJustify: this.editor.isActive({ textAlign: "justify" }),
-    };
-
-    const textColor = this.editor.getAttributes("textStyle")["color"];
-    this.activeColor = typeof textColor === "string" ? textColor : "";
-    const bgColor = this.editor.getAttributes("highlight")["color"];
-    this.activeBgColor = typeof bgColor === "string" ? bgColor : "";
+    const ed = this.editor();
+    if (ed == null) return;
+    this.activeStates.set({
+      bold: ed.isActive("bold"),
+      italic: ed.isActive("italic"),
+      underline: ed.isActive("underline"),
+      strike: ed.isActive("strike"),
+      h1: ed.isActive("heading", { level: 1 }),
+      h2: ed.isActive("heading", { level: 2 }),
+      bulletList: ed.isActive("bulletList"),
+      orderedList: ed.isActive("orderedList"),
+      blockquote: ed.isActive("blockquote"),
+      codeBlock: ed.isActive("codeBlock"),
+      alignLeft: ed.isActive({ textAlign: "left" }),
+      alignCenter: ed.isActive({ textAlign: "center" }),
+      alignRight: ed.isActive({ textAlign: "right" }),
+      alignJustify: ed.isActive({ textAlign: "justify" }),
+    });
+
+    const textColor = ed.getAttributes("textStyle")["color"];
+    this.activeColor.set(typeof textColor === "string" ? textColor : "");
+    const bgColor = ed.getAttributes("highlight")["color"];
+    this.activeBgColor.set(typeof bgColor === "string" ? bgColor : "");
   }
 }

package/src/ui/form/input/sd-date-range.picker.ts

@@ -70,8 +70,9 @@ export class SdDateRangePicker {
     if (this.periodType() === "월") {
       const fromDate = this.from();
       if (fromDate) {
-        this.from.set(fromDate.setDay(1));
-        this.to.set(fromDate.addMonths(1).setDay(1).addDays(-1));
+        const firstOfMonth = fromDate.setDay(1);
+        this.from.set(firstOfMonth);
+        this.to.set(firstOfMonth.addMonths(1).addDays(-1));
       } else {
         this.to.set(undefined);
       }
@@ -83,7 +84,7 @@ export class SdDateRangePicker {
   handleFromDateChanged(): void {
     if (this.periodType() === "월") {
       const fromDate = this.from();
-      this.to.set(fromDate?.addMonths(1).setDay(1).addDays(-1));
+      this.to.set(fromDate?.setDay(1).addMonths(1).addDays(-1));
     } else if (this.periodType() === "일") {
       this.to.set(this.from());
     } else if (

package/src/ui/form/input/sd-textfield-type-handlers.ts

@@ -103,7 +103,7 @@ function createStringHandler(type: "text" | "password" | "email" | "color"): ITe
         return errors;
       }
 
-      if (type === "text") {
+      if (type !== "color") {
         const str = value as string;
         if (opts.minlength !== undefined && opts.minlength > str.length) {
           errors.push(`문자의 길이가 ${opts.minlength}보다 길거나 같아야 합니다.`);
@@ -213,10 +213,10 @@ function createFormatHandler(): ITextfieldTypeHandler {
         (v, i, a) => a.indexOf(v) === i,
       );
       if (nonFormatChars != null && nonFormatChars.length > 0) {
-        return raw.replace(
-          new RegExp(`[${nonFormatChars.map((item) => "\\" + item).join("")}]`, "g"),
-          "",
-        );
+        const escaped = nonFormatChars.map((ch) =>
+          ch === "]" || ch === "\\" || ch === "^" || ch === "-" ? "\\" + ch : ch,
+        ).join("");
+        return raw.replace(new RegExp(`[${escaped}]`, "g"), "");
       }
       return raw;
     },
@@ -371,6 +371,16 @@ function createDateTimeHandler(withSeconds: boolean): ITextfieldTypeHandler {
 
       if (!(value instanceof DateTime)) {
         errors.push("날짜 및 시간을 입력하세요");
+        return errors;
+      }
+
+      const min = opts.min;
+      const max = opts.max;
+      if (min instanceof DateTime && min.tick > value.tick) {
+        errors.push(`${min}보다 크거나 같아야 합니다.`);
+      }
+      if (max instanceof DateTime && max.tick < value.tick) {
+        errors.push(`${max}보다 작거나 같아야 합니다.`);
       }
 
       return errors;
@@ -415,6 +425,16 @@ function createTimeHandler(withSeconds: boolean): ITextfieldTypeHandler {
 
       if (!(value instanceof Time)) {
         errors.push("시간을 입력하세요");
+        return errors;
+      }
+
+      const min = opts.min;
+      const max = opts.max;
+      if (min instanceof Time && min.tick > value.tick) {
+        errors.push(`${min}보다 크거나 같아야 합니다.`);
+      }
+      if (max instanceof Time && max.tick < value.tick) {
+        errors.push(`${max}보다 작거나 같아야 합니다.`);
       }
 
       return errors;

package/src/ui/form/input/sd-textfield.control.ts

@@ -379,6 +379,7 @@ export class SdTextfieldControl<K extends keyof TSdTextfieldTypes> {
   }
 
   onInputPaste(event: ClipboardEvent): void {
+    event.preventDefault();
     const text = event.clipboardData?.getData("text/plain").trim();
     if (text == null || text === "") {
       this.value.set(undefined);

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

@@ -208,7 +208,7 @@ export class SdModalControl {
   }
 
   private _requestClose(): void {
-    if (this._activatedModal !== null && !this._activatedModal.canDeactivefn()) {
+    if (this._activatedModal !== null && !this._activatedModal.canDeactiveFn()) {
       return;
     }
     void this._saveConfig();

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

@@ -65,7 +65,7 @@ export interface ISdModalOptions {
 export class SdActivatedModalProvider<T extends ISdModal<any> = ISdModal<any>> {
   modalComponent = signal<any>(undefined);
   contentComponent = signal<T | undefined>(undefined);
-  canDeactivefn: () => boolean = () => true;
+  canDeactiveFn: () => boolean = () => true;
 }
 
 /**