@simplysm/angular 14.0.6 → 14.0.8

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/layout/dock/sd-dock.control.ts

@@ -2,6 +2,7 @@ import {
   booleanAttribute,
   ChangeDetectionStrategy,
   Component,
+  DestroyRef,
   effect,
   ElementRef,
   inject,
@@ -87,6 +88,9 @@ import type { ISdResizeEvent } from "../../../core/plugins/events/sd-resize-even
 })
 export class SdDockControl {
   private readonly _elRef = inject(ElementRef<HTMLElement>);
+  private readonly _destroyRef = inject(DestroyRef);
+
+  private _dragCleanup: (() => void) | undefined;
 
   key = input<string>();
   position = input<"top" | "bottom" | "right" | "left">("top");
@@ -97,6 +101,10 @@ export class SdDockControl {
   private readonly _config = useSdSystemConfigResource<{ size?: string }>({ key: this.key });
 
   constructor() {
+    this._destroyRef.onDestroy(() => {
+      this._dragCleanup?.();
+    });
+
     effect(() => {
       const conf = this._config.value();
       if (this.resizable() && conf && conf.size != null) {
@@ -151,8 +159,7 @@ export class SdDockControl {
       e.stopPropagation();
       e.preventDefault();
 
-      document.removeEventListener("mousemove", doDrag);
-      document.removeEventListener("mouseup", stopDrag);
+      this._dragCleanup?.();
 
       if (this.key() != null) {
         const newConf: { size?: string } = {};
@@ -167,5 +174,11 @@ export class SdDockControl {
 
     document.addEventListener("mousemove", doDrag);
     document.addEventListener("mouseup", stopDrag);
+
+    this._dragCleanup = () => {
+      document.removeEventListener("mousemove", doDrag);
+      document.removeEventListener("mouseup", stopDrag);
+      this._dragCleanup = undefined;
+    };
   }
 }

package/src/ui/layout/kanban/sd-kanban-lane.control.ts

@@ -136,9 +136,10 @@ export class SdKanbanLaneControl<L, T> implements ISdKanbanDropTarget<L, T> {
   toolTplRef = contentChild<any, TemplateRef<void>>("toolTpl", { read: TemplateRef });
   titleTplRef = contentChild<any, TemplateRef<void>>("titleTpl", { read: TemplateRef });
 
-  isAllSelected = computed(() =>
-    this.kanbanControls().length > 0 && this.kanbanControls().every((ctrl) => ctrl.selected()),
-  );
+  isAllSelected = computed(() => {
+    const selectableControls = this.kanbanControls().filter((ctrl) => ctrl.selectable());
+    return selectableControls.length > 0 && selectableControls.every((ctrl) => ctrl.selected());
+  });
 
   dragKanban = computed(() => this._boardControl.dragKanban());
 
@@ -161,6 +162,7 @@ export class SdKanbanLaneControl<L, T> implements ISdKanbanDropTarget<L, T> {
       this._boardControl.selectedValues.update((v) => {
         const r = [...v];
         for (const ctrl of this.kanbanControls()) {
+          if (!ctrl.selectable()) continue;
           if (ctrl.value() == null) continue;
           if (!v.includes(ctrl.value()!)) {
             r.push(ctrl.value()!);
@@ -171,6 +173,7 @@ export class SdKanbanLaneControl<L, T> implements ISdKanbanDropTarget<L, T> {
     } else {
       this._boardControl.selectedValues.update((v) => {
         const kanbanValues = this.kanbanControls()
+          .filter((ctrl) => ctrl.selectable())
           .map((ctrl) => ctrl.value())
           .filter((v2): v2 is T => v2 != null);
         const result = v.filter((item) => !kanbanValues.includes(item));

package/src/ui/navigation/pagination/sd-pagination.control.ts

@@ -67,7 +67,7 @@ export class SdPaginationControl {
   visiblePageCount = input(10, { transform: numberAttribute });
 
   private readonly groupIndex = computed(() => {
-    return Math.floor(this.currentPage() / this.visiblePageCount());
+    return Math.floor(this.currentPage() / Math.max(this.visiblePageCount(), 1));
   });
 
   hasPrev = computed(() => {
@@ -82,7 +82,7 @@ export class SdPaginationControl {
     if (totalPageCount === 0) {
       return false;
     }
-    const lastGroupIndex = Math.floor((totalPageCount - 1) / this.visiblePageCount());
+    const lastGroupIndex = Math.floor((totalPageCount - 1) / Math.max(this.visiblePageCount(), 1));
     return this.groupIndex() < lastGroupIndex;
   });
 
@@ -112,7 +112,8 @@ export class SdPaginationControl {
   }
 
   goToPrevGroup(): void {
-    this.currentPage.set((this.groupIndex() - 1) * this.visiblePageCount());
+    if (!this.hasPrev()) return;
+    this.currentPage.set((this.groupIndex() - 1) * Math.max(this.visiblePageCount(), 1));
   }
 
   goToFirst(): void {
@@ -120,6 +121,7 @@ export class SdPaginationControl {
   }
 
   goToLast(): void {
+    if (this.totalPageCount() === 0) return;
     this.currentPage.set(this.totalPageCount() - 1);
   }
 }

package/src/ui/navigation/sidebar/sd-sidebar-container.control.ts

@@ -87,6 +87,6 @@ export class SdSidebarContainerControl {
   }
 
   onBackdropClick(): void {
-    this.toggle.update((v) => !v);
+    this.toggle.set(false);
   }
 }

package/src/ui/overlay/dropdown/sd-dropdown-popup.control.ts

@@ -102,7 +102,7 @@ export class SdDropdownPopupControl {
     const divEl = el.firstElementChild as HTMLElement;
 
     if (divEl.clientHeight > 300) {
-      el.style.height = "18.75rem";
+      el.style.height = "300px";
     } else {
       el.style.height = "";
     }

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

@@ -1,6 +1,7 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  DestroyRef,
   effect,
   ElementRef,
   inject,
@@ -62,6 +63,7 @@ export class SdModalControl {
   private readonly _elRef = inject(ElementRef<HTMLElement>);
   private readonly _activatedModal = inject(SdActivatedModalProvider, { optional: true });
   private readonly _systemConfig = inject(SdSystemConfigProvider, { optional: true });
+  private readonly _destroyRef = inject(DestroyRef);
 
   open = model(false);
   key = input<string | undefined>(undefined);
@@ -147,6 +149,11 @@ export class SdModalControl {
         void this._saveConfig();
       }
     };
+
+    this._destroyRef.onDestroy(() => {
+      document.removeEventListener("mousemove", this._onDocumentMouseMove);
+      document.removeEventListener("mouseup", this._onDocumentMouseUp);
+    });
   }
 
   onResizeMouseDown(event: MouseEvent, dir: string): void {
@@ -208,7 +215,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();
@@ -262,6 +269,8 @@ export class SdModalControl {
         maxZ = z;
       }
     }
+    const currentZ = parseInt(hostEl.style.zIndex, 10);
+    if (currentZ >= maxZ) return;
     hostEl.style.zIndex = String(maxZ + 1);
   }
 

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;
 }
 
 /**

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

@@ -201,12 +201,13 @@ export class SdToastProvider {
       const progressSignal = toastRef.instance.progress;
 
       effect(
-        () => {
+        (onCleanup) => {
           const val = progressSignal();
           if (val >= 100) {
-            setTimeout(() => {
+            const timerId = setTimeout(() => {
               this._dismissToast(toastRef);
             }, 1000);
+            onCleanup(() => clearTimeout(timerId));
           }
         },
         { injector: toastRef.injector },
@@ -260,14 +261,19 @@ export class SdToastProvider {
     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 후 파괴
-    setTimeout(() => {
+    fallbackId = setTimeout(() => {
+      el.removeEventListener("transitionend", onTransitionEnd);
       this._destroyToast(toastRef);
     }, 300);
   }

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

@@ -2,6 +2,7 @@ import {
   booleanAttribute,
   ChangeDetectionStrategy,
   Component,
+  computed,
   input,
   ViewEncapsulation,
 } from "@angular/core";
@@ -22,7 +23,7 @@ import { PercentPipe } from "@angular/common";
     <div class="_content tx-right">
       {{ value() | percent: "1.0-2" }}
     </div>
-    <div class="_progress" [style.width]="value() * 100 + '%'"></div>
+    <div class="_progress" [style.width]="_barWidth()"></div>
   `,
   styles: [
     /* language=SCSS */ `
@@ -85,4 +86,6 @@ export class SdProgressControl {
   >();
 
   value = input.required<number>();
+
+  _barWidth = computed(() => Math.min(this.value() * 100, 100) + "%");
 }