@simplysm/angular 14.1.9 → 14.1.11

package/dist/controls/input/sd-textfield-type-handlers.d.ts

@@ -41,6 +41,11 @@ export interface TextfieldTypeHandler {
     toControlValue(value: unknown, opts: TextfieldFormatOpts): string;
     toDisplayText(value: unknown, opts: TextfieldDisplayOpts): string | undefined;
     validate(value: unknown, opts: TextfieldValidateOpts): string[];
+    /**
+     * parse 는 실패했으나 계속 입력하면 유효해질 수 있는 "완성 전 진행" 입력인지 여부.
+     * true 면 onInput 이 DOM 을 되쓰지 않아 사용자가 입력을 이어갈 수 있다 (예: number "-", "12.").
+     */
+    isIncomplete?(raw: string, opts: TextfieldParseOpts): boolean;
 }
 export declare const textfieldTypeHandlers: Record<keyof SdTextfieldTypes, TextfieldTypeHandler>;
 //# sourceMappingURL=sd-textfield-type-handlers.d.ts.map

package/dist/controls/input/sd-textfield-type-handlers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-textfield-type-handlers.d.ts","sourceRoot":"","sources":["../../../src/controls/input/sd-textfield-type-handlers.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,QAAQ,EAGR,IAAI,EACL,MAAM,uBAAuB,CAAC;AAI/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,QAAQ,CAAC;IACjB,OAAO,EAAE,QAAQ,CAAC;IAClB,MAAM,EAAE,QAAQ,CAAC;IACjB,UAAU,EAAE,QAAQ,CAAC;IACrB,cAAc,EAAE,QAAQ,CAAC;IACzB,MAAM,EAAE,IAAI,CAAC;IACb,UAAU,EAAE,IAAI,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,CAAC,MAAM,gBAAgB,CAAC,EActD,CAAC;AAMF,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAClE,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,GAAG,OAAO,CAAC;IACtD,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,mBAAmB,GAAG,MAAM,CAAC;IAClE,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,GAAG,MAAM,GAAG,SAAS,CAAC;IAC9E,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,qBAAqB,GAAG,MAAM,EAAE,CAAC;CACjE;AAkXD,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,MAAM,gBAAgB,EAAE,oBAAoB,CActF,CAAC"}
+{"version":3,"file":"sd-textfield-type-handlers.d.ts","sourceRoot":"","sources":["../../../src/controls/input/sd-textfield-type-handlers.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,QAAQ,EAGR,IAAI,EACL,MAAM,uBAAuB,CAAC;AAI/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,QAAQ,CAAC;IACjB,OAAO,EAAE,QAAQ,CAAC;IAClB,MAAM,EAAE,QAAQ,CAAC;IACjB,UAAU,EAAE,QAAQ,CAAC;IACrB,cAAc,EAAE,QAAQ,CAAC;IACzB,MAAM,EAAE,IAAI,CAAC;IACb,UAAU,EAAE,IAAI,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,CAAC,MAAM,gBAAgB,CAAC,EActD,CAAC;AAMF,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAClE,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,GAAG,OAAO,CAAC;IACtD,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,mBAAmB,GAAG,MAAM,CAAC;IAClE,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,GAAG,MAAM,GAAG,SAAS,CAAC;IAC9E,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,qBAAqB,GAAG,MAAM,EAAE,CAAC;IAChE;;;OAGG;IACH,YAAY,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,GAAG,OAAO,CAAC;CAC/D;AAuYD,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,MAAM,gBAAgB,EAAE,oBAAoB,CActF,CAAC"}

package/dist/controls/input/sd-textfield-type-handlers.js

@@ -82,6 +82,13 @@ function createNumberHandler() {
             const result = Number.parseFloat(inputValue);
             return Number.isNaN(result) ? undefined : result;
         },
+        isIncomplete(raw) {
+            const inputValue = raw.replace(/[^0-9-.]/g, "");
+            // 부호·소수점 형식은 갖췄으나 아직 완성되지 않은 진행 상태 ("-", "12.", ".", "-.")
+            // Number("12.")===12 이므로 endsWith(".") 를 별도 판정 (parse 의 실패 조건과 정합)
+            return (/^-?\d*\.?\d*$/.test(inputValue)
+                && (Number.isNaN(Number(inputValue)) || inputValue.endsWith(".")));
+        },
         toControlValue(value, opts) {
             const numValue = value;
             return opts.useNumberComma !== false
@@ -130,9 +137,25 @@ function createFormatHandler() {
             const format = opts.format;
             if (format == null || format === "")
                 return raw;
-            const nonFormatChars = format.match(/[^X]/g)?.filter((v, i, a) => a.indexOf(v) === i);
+            // 위치기반: raw 길이가 마스크(대안 중 하나)의 길이와 같으면 X 자리 문자만 추출.
+            // 리터럴이 데이터 문자와 겹쳐도(예: "2025-XXXX") 안전 (toControlValue 와 대칭).
+            const formatItems = format.split("|");
+            for (const formatItem of formatItems) {
+                if (raw.length === formatItem.length) {
+                    let result = "";
+                    for (let i = 0; i < formatItem.length; i++) {
+                        if (formatItem[i] === "X")
+                            result += raw[i];
+                    }
+                    return result;
+                }
+            }
+            // 폴백: 길이 불일치(구분자 생략 등)면 리터럴 문자를 전역 제거.
+            const nonFormatChars = format.match(/[^X|]/g)?.filter((v, i, a) => a.indexOf(v) === i);
             if (nonFormatChars != null && nonFormatChars.length > 0) {
-                const escaped = nonFormatChars.map((ch) => ch === "]" || ch === "\\" || ch === "^" || ch === "-" ? "\\" + ch : ch).join("");
+                const escaped = nonFormatChars
+                    .map((ch) => (ch === "]" || ch === "\\" || ch === "^" || ch === "-" ? "\\" + ch : ch))
+                    .join("");
                 return raw.replace(new RegExp(`[${escaped}]`, "g"), "");
             }
             return raw;

package/dist/controls/input/sd-textfield.d.ts

@@ -26,15 +26,20 @@ export declare class SdTextfield<K extends keyof SdTextfieldTypes> {
     size: import("@angular/core").InputSignal<"sm" | "lg" | undefined>;
     theme: import("@angular/core").InputSignal<"info" | "success" | "primary" | "secondary" | "warning" | "danger" | "gray" | "blue-gray" | undefined>;
     private readonly _inputElRef;
+    private readonly _nativeInvalidMessage;
+    private _composing;
     private readonly _handler;
     controlType: import("@angular/core").Signal<string>;
     controlStep: import("@angular/core").Signal<string | number>;
     controlValue: import("@angular/core").Signal<string>;
     controlValueText: import("@angular/core").Signal<string | undefined>;
     constructor();
+    onCompositionStart(): void;
+    onCompositionEnd(event: CompositionEvent): void;
     onInput(event: Event): void;
+    private _applyInput;
     onBlur(event: FocusEvent): void;
-    onInputPaste(event: ClipboardEvent): void;
+    private _syncNativeValidity;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdTextfield<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SdTextfield<any>, "sd-textfield", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "inputStyle": { "alias": "inputStyle"; "required": false; "isSignal": true; }; "inputClass": { "alias": "inputClass"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "minlength": { "alias": "minlength"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "validatorFn": { "alias": "validatorFn"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "useNumberComma": { "alias": "useNumberComma"; "required": false; "isSignal": true; }; "minDigits": { "alias": "minDigits"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "inset": { "alias": "inset"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }

package/dist/controls/input/sd-textfield.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-textfield.d.ts","sourceRoot":"","sources":["../../../src/controls/input/sd-textfield.ts"],"names":[],"mappings":"AAgBA,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,8BAA8B,CAAC;;AAEtC,qBAoRa,WAAW,CAAC,CAAC,SAAS,MAAM,gBAAgB;IACvD,KAAK,uEAAgC;IAErC,IAAI,yCAAuB;IAC3B,WAAW,0DAAmB;IAC9B,KAAK,0DAAmB;IACxB,UAAU,0DAAmB;IAC7B,UAAU,0DAAmB;IAE7B,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IAEzD,QAAQ,qEAAiD;IACzD,GAAG,uEAAgC;IACnC,GAAG,uEAAgC;IACnC,SAAS,0DAAmB;IAC5B,SAAS,0DAAmB;IAC5B,OAAO,0DAAmB;IAC1B,WAAW,+CAAiB,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,eAAI;IACtF,MAAM,0DAAmB;IAEzB,IAAI,0DAAmB;IACvB,YAAY,0DAAmB;IAC/B,cAAc,qEAAgD;IAC9D,SAAS,0DAAmB;IAE5B,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,KAAK,8IAED;IAEJ,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsD;IAElF,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAsD;IAE/E,WAAW,yCAA+C;IAE1D,WAAW,kDAA+D;IAE1E,YAAY,yCAOT;IAEH,gBAAgB,qDAMb;;IA2CH,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAc3B,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAO/B,YAAY,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;yCAxH9B,WAAW;2CAAX,WAAW;CA2IvB"}
+{"version":3,"file":"sd-textfield.d.ts","sourceRoot":"","sources":["../../../src/controls/input/sd-textfield.ts"],"names":[],"mappings":"AAiBA,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,8BAA8B,CAAC;;AAEtC,qBAqRa,WAAW,CAAC,CAAC,SAAS,MAAM,gBAAgB;IACvD,KAAK,uEAAgC;IAErC,IAAI,yCAAuB;IAC3B,WAAW,0DAAmB;IAC9B,KAAK,0DAAmB;IACxB,UAAU,0DAAmB;IAC7B,UAAU,0DAAmB;IAE7B,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IAEzD,QAAQ,qEAAiD;IACzD,GAAG,uEAAgC;IACnC,GAAG,uEAAgC;IACnC,SAAS,0DAAmB;IAC5B,SAAS,0DAAmB;IAC5B,OAAO,0DAAmB;IAC1B,WAAW,+CAAiB,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,eAAI;IACtF,MAAM,0DAAmB;IAEzB,IAAI,0DAAmB;IACvB,YAAY,0DAAmB;IAC/B,cAAc,qEAAgD;IAC9D,SAAS,0DAAmB;IAE5B,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,KAAK,8IAED;IAEJ,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsD;IAGlF,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAc;IAGpD,OAAO,CAAC,UAAU,CAAS;IAE3B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAsD;IAE/E,WAAW,yCAA+C;IAE1D,WAAW,kDAA+D;IAE1E,YAAY,yCAOT;IAEH,gBAAgB,qDAMb;;IAmEH,kBAAkB,IAAI,IAAI;IAI1B,gBAAgB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI;IAK/C,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAM3B,OAAO,CAAC,WAAW;IAiBnB,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAQ/B,OAAO,CAAC,mBAAmB;yCAzKhB,WAAW;2CAAX,WAAW;CA6KvB"}

package/dist/controls/input/sd-textfield.js

@@ -1,5 +1,5 @@
 import { isPlatformBrowser } from "@angular/common";
-import { booleanAttribute, ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input, model, PLATFORM_ID, viewChild, ViewEncapsulation, } from "@angular/core";
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input, model, PLATFORM_ID, signal, viewChild, ViewEncapsulation, } from "@angular/core";
 import { setupInvalid } from "../../core/validation/setupInvalid";
 import { textfieldTypeHandlers, } from "./sd-textfield-type-handlers";
 import * as i0 from "@angular/core";
@@ -41,7 +41,7 @@ function SdTextfield_Conditional_2_Template(rf, ctx) { if (rf & 1) {
 function SdTextfield_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵdomElementStart(0, "input", 4, 0);
-    i0.ɵɵdomListener("input", function SdTextfield_Conditional_3_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onInput($event)); })("paste", function SdTextfield_Conditional_3_Template_input_paste_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onInputPaste($event)); })("blur", function SdTextfield_Conditional_3_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onBlur($event)); });
+    i0.ɵɵdomListener("input", function SdTextfield_Conditional_3_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onInput($event)); })("compositionstart", function SdTextfield_Conditional_3_Template_input_compositionstart_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onCompositionStart()); })("compositionend", function SdTextfield_Conditional_3_Template_input_compositionend_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onCompositionEnd($event)); })("blur", function SdTextfield_Conditional_3_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onBlur($event)); });
     i0.ɵɵdomElementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -95,6 +95,11 @@ export class SdTextfield {
     ...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
     _inputElRef = viewChild("inputEl", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_inputElRef" }] : /* istanbul ignore next */ []));
+    // 실제 input 의 브라우저 native 제약 위반(이메일 형식·날짜 미완성 등) 메시지. onInput/onBlur 에서 갱신.
+    _nativeInvalidMessage = signal("", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_nativeInvalidMessage" }] : /* istanbul ignore next */ []));
+    // IME 조합(한글 등) 중 여부. 조합 중에는 미완성 자모가 model 로 흐르지 않도록 갱신을 보류.
+    _composing = false;
     _handler = computed(() => textfieldTypeHandlers[this.type()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_handler" }] : /* istanbul ignore next */ []));
     controlType = computed(() => this._handler().controlType, /* @ts-ignore */
@@ -127,15 +132,31 @@ export class SdTextfield {
                 const inputEl = this._inputElRef()?.nativeElement;
                 if (inputEl == null)
                     return;
-                // 편집(포커스) 중에는 DOM 을 되쓰면 사용자 입력(세그먼트·캐럿·IME 조합)이 깨지므로 생략
-                if (document.activeElement === inputEl)
-                    return;
+                // 편집(포커스) 중이라도 변경 origin 을 구분한다.
+                // 사용자 입력이 만든 DOM(정규화 차이·진행 중 입력 포함)은 보호하고,
+                // 모델만 외부에서 바뀐 경우(프로그래밍적 리셋·prefill·표시옵션 변경)는 되써서 반영한다.
+                if (document.activeElement === inputEl) {
+                    const domParsed = this._handler().parse(inputEl.value, { format: this.format() });
+                    // DOM raw 가 현재 모델의 유효한 표현이면(사용자 입력 유래) 되쓰지 않아 캐럿·IME 보호
+                    const domReflectsModel = domParsed != null
+                        && this._handler().toControlValue(domParsed, {
+                            useNumberComma: this.useNumberComma(),
+                            format: this.format(),
+                        }) === controlValue;
+                    // 계속 입력하면 유효해질 진행 중 입력(number "12.")도 보호
+                    const incomplete = this._handler().isIncomplete?.(inputEl.value, { format: this.format() }) === true;
+                    if (domReflectsModel || incomplete)
+                        return;
+                }
                 if (inputEl.value !== controlValue) {
                     inputEl.value = controlValue;
                 }
             });
         }
         setupInvalid(() => {
+            // 비활성·읽기전용 필드는 사용자가 편집할 수 없으므로 검증에서 제외 (네이티브 disabled 동작과 동일)
+            if (this.disabled() || this.readonly())
+                return "";
             const value = this.value();
             const handlerErrors = this._handler().validate(value, {
                 required: this.required(),
@@ -153,46 +174,55 @@ export class SdTextfield {
                     errorMessages.push(message);
                 }
             }
+            // 브라우저 native 제약 위반(이메일 형식·날짜 미완성 등)을 우리 검증(빨간점)에 합류
+            const nativeMessage = this._nativeInvalidMessage();
+            if (nativeMessage !== "") {
+                errorMessages.push(nativeMessage);
+            }
             return errorMessages.join("\r\n");
         });
     }
+    onCompositionStart() {
+        this._composing = true;
+    }
+    onCompositionEnd(event) {
+        this._composing = false;
+        this._applyInput(event.target);
+    }
     onInput(event) {
-        const inputEl = event.target;
+        // 조합 중 input 은 무시하고, 완성 시 onCompositionEnd 에서 한 번만 반영
+        if (this._composing)
+            return;
+        this._applyInput(event.target);
+    }
+    _applyInput(inputEl) {
         if (inputEl.value === "") {
             this.value.set(undefined);
-            return;
         }
-        const parsed = this._handler().parse(inputEl.value, { format: this.format() });
-        if (parsed == null) {
-            inputEl.value = this.controlValue();
-            return;
+        else {
+            const parsed = this._handler().parse(inputEl.value, { format: this.format() });
+            if (parsed == null) {
+                // 계속 입력하면 유효해질 진행 중 입력(number "12.", "-")은 되쓰지 않아 입력을 이어가게 함
+                if (this._handler().isIncomplete?.(inputEl.value, { format: this.format() }) !== true) {
+                    inputEl.value = this.controlValue();
+                }
+            }
+            else {
+                this.value.set(parsed);
+            }
         }
-        this.value.set(parsed);
+        this._syncNativeValidity(inputEl);
     }
     onBlur(event) {
         // 편집 종료 시 모델 기준값으로 동기화 (number 콤마 포맷 반영, date 미완성 입력 정리)
         // date 미완성 입력은 input.value 가 "" 라 비교 없이 무조건 되써야 남은 세그먼트가 정리됨
         const inputEl = event.target;
         inputEl.value = this.controlValue();
+        this._syncNativeValidity(inputEl);
     }
-    onInputPaste(event) {
-        // preventDefault 로 기본 붙여넣기를 막으므로, 포커스 중 동기화를 건너뛰는 effect 대신
-        // 핸들러에서 직접 input.value 를 모델 기준값으로 되써야 화면에 반영됨 (onBlur 와 동일 패턴)
-        event.preventDefault();
-        const inputEl = event.target;
-        const text = event.clipboardData?.getData("text/plain").trim();
-        if (text == null || text === "") {
-            this.value.set(undefined);
-            inputEl.value = "";
-            return;
-        }
-        const parsed = this._handler().parse(text, { format: this.format() });
-        if (parsed == null) {
-            inputEl.value = this.controlValue();
-            return;
-        }
-        this.value.set(parsed);
-        inputEl.value = this.controlValue();
+    _syncNativeValidity(inputEl) {
+        // 실제 input 의 브라우저 native 제약 위반을 signal 로 반영 → setupInvalid 콜백이 검증에 합류
+        this._nativeInvalidMessage.set(inputEl.validity.valid ? "" : inputEl.validationMessage);
     }
     static ɵfac = function SdTextfield_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdTextfield)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdTextfield, selectors: [["sd-textfield"]], viewQuery: function SdTextfield_Query(rf, ctx) { if (rf & 1) {
@@ -201,7 +231,7 @@ export class SdTextfield {
             i0.ɵɵqueryAdvance();
         } }, hostVars: 7, hostBindings: function SdTextfield_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-sd-type", ctx.type())("data-sd-disabled", ctx.disabled())("data-sd-readonly", ctx.readonly())("data-sd-inline", ctx.inline())("data-sd-inset", ctx.inset())("data-sd-size", ctx.size())("data-sd-theme", ctx.theme());
-        } }, inputs: { value: [1, "value"], type: [1, "type"], placeholder: [1, "placeholder"], title: [1, "title"], inputStyle: [1, "inputStyle"], inputClass: [1, "inputClass"], disabled: [1, "disabled"], readonly: [1, "readonly"], required: [1, "required"], min: [1, "min"], max: [1, "max"], minlength: [1, "minlength"], maxlength: [1, "maxlength"], pattern: [1, "pattern"], validatorFn: [1, "validatorFn"], format: [1, "format"], step: [1, "step"], autocomplete: [1, "autocomplete"], useNumberComma: [1, "useNumberComma"], minDigits: [1, "minDigits"], inline: [1, "inline"], inset: [1, "inset"], size: [1, "size"], theme: [1, "theme"] }, outputs: { value: "valueChange" }, decls: 4, vars: 9, consts: [["inputEl", ""], [1, "tx-trans-light"], [3, "style", "class", "type"], [1, "tx-trans-lighter"], [3, "input", "paste", "blur", "type"]], template: function SdTextfield_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { value: [1, "value"], type: [1, "type"], placeholder: [1, "placeholder"], title: [1, "title"], inputStyle: [1, "inputStyle"], inputClass: [1, "inputClass"], disabled: [1, "disabled"], readonly: [1, "readonly"], required: [1, "required"], min: [1, "min"], max: [1, "max"], minlength: [1, "minlength"], maxlength: [1, "maxlength"], pattern: [1, "pattern"], validatorFn: [1, "validatorFn"], format: [1, "format"], step: [1, "step"], autocomplete: [1, "autocomplete"], useNumberComma: [1, "useNumberComma"], minDigits: [1, "minDigits"], inline: [1, "inline"], inset: [1, "inset"], size: [1, "size"], theme: [1, "theme"] }, outputs: { value: "valueChange" }, decls: 4, vars: 9, consts: [["inputEl", ""], [1, "tx-trans-light"], [3, "style", "class", "type"], [1, "tx-trans-lighter"], [3, "input", "compositionstart", "compositionend", "blur", "type"]], template: function SdTextfield_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElementStart(0, "div");
             i0.ɵɵconditionalCreate(1, SdTextfield_Conditional_1_Template, 2, 0, "span", 1)(2, SdTextfield_Conditional_2_Template, 3, 1);
             i0.ɵɵdomElementEnd();
@@ -252,7 +282,8 @@ export class SdTextfield {
         [attr.autocomplete]="autocomplete()"
         [attr.step]="controlStep()"
         (input)="onInput($event)"
-        (paste)="onInputPaste($event)"
+        (compositionstart)="onCompositionStart()"
+        (compositionend)="onCompositionEnd($event)"
         (blur)="onBlur($event)"
       />
     }
@@ -266,4 +297,4 @@ export class SdTextfield {
                     "[attr.data-sd-theme]": "theme()",
                 }, styles: ["/*@function to-rgb($oklch-color) {\n  @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n  red: to-rgb(oklch(0.704 0.191 22.216)),\n  orange: to-rgb(oklch(0.75 0.183 55.934)),\n  amber: to-rgb(oklch(0.828 0.189 84.429)),\n  yellow: to-rgb(oklch(0.852 0.199 91.936)),\n  lime: to-rgb(oklch(0.841 0.238 128.85)),\n  green: to-rgb(oklch(0.792 0.209 151.711)),\n  emerald: to-rgb(oklch(0.765 0.177 163.223)),\n  teal: to-rgb(oklch(0.777 0.152 181.912)),\n  cyan: to-rgb(oklch(0.789 0.154 211.53)),\n  sky: to-rgb(oklch(0.746 0.16 232.661)),\n  blue: to-rgb(oklch(0.707 0.165 254.624)),\n  indigo: to-rgb(oklch(0.673 0.182 276.935)),\n  violet: to-rgb(oklch(0.702 0.183 293.541)),\n  purple: to-rgb(oklch(0.714 0.203 305.504)),\n  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n  pink: to-rgb(oklch(0.718 0.202 349.761)),\n  rose: to-rgb(oklch(0.712 0.194 13.428)),\n  slate: to-rgb(oklch(0.704 0.04 256.788)),\n  gray: to-rgb(oklch(0.707 0.022 261.325)),\n  zinc: to-rgb(oklch(0.705 0.015 286.067)),\n  neutral: to-rgb(oklch(0.708 0 0)),\n  stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-textfield {\n  display: block;\n  position: relative;\n}\nsd-textfield > input,\nsd-textfield > ._contents {\n  display: block;\n  padding: var(--gap-sm) var(--gap-default);\n  border: 1px solid transparent;\n  font-size: var(--font-size-default);\n  font-family: var(--font-family);\n  font-variant-numeric: tabular-nums;\n  line-height: var(--line-height);\n  color: var(--text-trans-default);\n  font-family: var(--font-family-field);\n  overflow: auto;\n  width: 100%;\n  border: 1px solid var(--border-color-light);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-textfield > input:focus,\nsd-textfield > ._contents:focus {\n  outline: none;\n  border-color: var(--theme-primary-default);\n}\nsd-textfield > input[type=date], sd-textfield > input[type=month], sd-textfield > input[type=datetime-local],\nsd-textfield > ._contents[type=date],\nsd-textfield > ._contents[type=month],\nsd-textfield > ._contents[type=datetime-local] {\n  padding-top: calc(var(--gap-sm) - 1px);\n  padding-bottom: calc(var(--gap-sm) - 1px);\n}\nsd-textfield > input::-webkit-scrollbar,\nsd-textfield > ._contents::-webkit-scrollbar {\n  display: none;\n}\nsd-textfield > input::-webkit-input-placeholder,\nsd-textfield > ._contents::-webkit-input-placeholder {\n  color: var(--text-trans-lighter);\n}\nsd-textfield > input::-webkit-outer-spin-button, sd-textfield > input::-webkit-inner-spin-button,\nsd-textfield > ._contents::-webkit-outer-spin-button,\nsd-textfield > ._contents::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\nsd-textfield > input::-webkit-calendar-picker-indicator,\nsd-textfield > ._contents::-webkit-calendar-picker-indicator {\n  cursor: pointer;\n  margin: auto;\n}\nsd-textfield > ._contents {\n  display: none;\n}\nsd-textfield > ._contents > pre {\n  font-family: inherit;\n}\nsd-textfield[data-sd-type=number] > input,\nsd-textfield[data-sd-type=number] > ._contents {\n  text-align: right;\n}\nsd-textfield[data-sd-theme=gray] > input,\nsd-textfield[data-sd-theme=gray] > ._contents {\n  background: var(--theme-gray-lightest);\n}\nsd-textfield[data-sd-theme=blue-gray] > input,\nsd-textfield[data-sd-theme=blue-gray] > ._contents {\n  background: var(--theme-blue-gray-lightest);\n}\nsd-textfield[data-sd-theme=primary] > input,\nsd-textfield[data-sd-theme=primary] > ._contents {\n  background: var(--theme-primary-lightest);\n}\nsd-textfield[data-sd-theme=secondary] > input,\nsd-textfield[data-sd-theme=secondary] > ._contents {\n  background: var(--theme-secondary-lightest);\n}\nsd-textfield[data-sd-theme=info] > input,\nsd-textfield[data-sd-theme=info] > ._contents {\n  background: var(--theme-info-lightest);\n}\nsd-textfield[data-sd-theme=success] > input,\nsd-textfield[data-sd-theme=success] > ._contents {\n  background: var(--theme-success-lightest);\n}\nsd-textfield[data-sd-theme=warning] > input,\nsd-textfield[data-sd-theme=warning] > ._contents {\n  background: var(--theme-warning-lightest);\n}\nsd-textfield[data-sd-theme=danger] > input,\nsd-textfield[data-sd-theme=danger] > ._contents {\n  background: var(--theme-danger-lightest);\n}\nsd-textfield[data-sd-size=sm] > input,\nsd-textfield[data-sd-size=sm] > ._contents {\n  padding: var(--gap-xs) var(--gap-sm);\n}\nsd-textfield[data-sd-size=sm] > input[type=date], sd-textfield[data-sd-size=sm] > input[type=month], sd-textfield[data-sd-size=sm] > input[type=datetime-local], sd-textfield[data-sd-size=sm] > input[type=color],\nsd-textfield[data-sd-size=sm] > ._contents[type=date],\nsd-textfield[data-sd-size=sm] > ._contents[type=month],\nsd-textfield[data-sd-size=sm] > ._contents[type=datetime-local],\nsd-textfield[data-sd-size=sm] > ._contents[type=color] {\n  padding-top: calc(var(--gap-xs) - 1px);\n  padding-bottom: calc(var(--gap-xs) - 1px);\n}\nsd-textfield[data-sd-size=lg] > input,\nsd-textfield[data-sd-size=lg] > ._contents {\n  padding: var(--gap-default) var(--gap-lg);\n}\nsd-textfield[data-sd-size=lg] > input[type=date], sd-textfield[data-sd-size=lg] > input[type=month], sd-textfield[data-sd-size=lg] > input[type=datetime-local], sd-textfield[data-sd-size=lg] > input[type=color],\nsd-textfield[data-sd-size=lg] > ._contents[type=date],\nsd-textfield[data-sd-size=lg] > ._contents[type=month],\nsd-textfield[data-sd-size=lg] > ._contents[type=datetime-local],\nsd-textfield[data-sd-size=lg] > ._contents[type=color] {\n  padding-top: calc(var(--gap-default) - 1px);\n  padding-bottom: calc(var(--gap-default) - 1px);\n}\nsd-textfield[data-sd-inline=true] {\n  display: inline-block;\n  vertical-align: top;\n}\nsd-textfield[data-sd-inline=true] > input,\nsd-textfield[data-sd-inline=true] > ._contents {\n  width: auto;\n  vertical-align: top;\n}\nsd-textfield[data-sd-inset=true] > ._contents {\n  display: block;\n}\nsd-textfield[data-sd-inset=true] > input {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\nsd-textfield[data-sd-inset=true] > input,\nsd-textfield[data-sd-inset=true] > ._contents {\n  width: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-textfield[data-sd-inset=true] > input:focus {\n  outline: 1px solid var(--theme-primary-default);\n  outline-offset: -1px;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=month] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=month] > ._contents {\n  min-width: 8.25em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=date] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=date] > ._contents {\n  min-width: 8.25em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=datetime-local] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=datetime-local] > ._contents {\n  min-width: 14em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=year] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=year] > ._contents {\n  min-width: 4em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color] > ._contents {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2);\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=sm] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=sm] > ._contents {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2);\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=lg] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=lg] > ._contents {\n  height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-textfield[data-sd-disabled=true] > ._contents {\n  display: block;\n  background: var(--trans-lightest);\n  color: var(--text-trans-light);\n}\nsd-textfield[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n  background: var(--control-color);\n  color: var(--text-trans-default);\n}\nsd-textfield[data-sd-readonly=true] > ._contents {\n  display: block;\n}"] }]
     }], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], validatorFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "validatorFn", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], useNumberComma: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNumberComma", required: false }] }], minDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDigits", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], _inputElRef: [{ type: i0.ViewChild, args: ["inputEl", { isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTextfield, { className: "SdTextfield", filePath: "packages/angular/src/controls/input/sd-textfield.ts", lineNumber: 298 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTextfield, { className: "SdTextfield", filePath: "packages/angular/src/controls/input/sd-textfield.ts", lineNumber: 300 }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/angular",
-  "version": "14.1.9",
+  "version": "14.1.11",
   "description": "심플리즘 패키지 - Angular",
   "author": "심플리즘",
   "license": "Apache-2.0",
@@ -39,6 +39,10 @@
     "@angular/service-worker": "^22.0.4",
     "@ng-icons/core": "^33.3.0",
     "@ng-icons/tabler-icons": "^33.3.0",
+    "@simplysm/core-browser": "14.1.11",
+    "@simplysm/core-common": "14.1.11",
+    "@simplysm/service-client": "14.1.11",
+    "@simplysm/service-common": "14.1.11",
     "@tiptap/core": "^3.27.1",
     "@tiptap/extension-color": "^3.27.1",
     "@tiptap/extension-document": "^3.27.1",
@@ -57,14 +61,10 @@
     "html-to-image": "^1.11.13",
     "jspdf": "^4.2.1",
     "rxjs": "^7.8.2",
-    "tabbable": "^6.5.0",
-    "@simplysm/core-browser": "14.1.9",
-    "@simplysm/core-common": "14.1.9",
-    "@simplysm/service-client": "14.1.9",
-    "@simplysm/service-common": "14.1.9"
+    "tabbable": "^6.5.0"
   },
   "devDependencies": {
     "@angular/compiler": "^22.0.4"
   },
   "scripts": {}
-}
+}

package/src/controls/input/sd-textfield-type-handlers.ts

@@ -74,6 +74,11 @@ export interface TextfieldTypeHandler {
   toControlValue(value: unknown, opts: TextfieldFormatOpts): string;
   toDisplayText(value: unknown, opts: TextfieldDisplayOpts): string | undefined;
   validate(value: unknown, opts: TextfieldValidateOpts): string[];
+  /**
+   * parse 는 실패했으나 계속 입력하면 유효해질 수 있는 "완성 전 진행" 입력인지 여부.
+   * true 면 onInput 이 DOM 을 되쓰지 않아 사용자가 입력을 이어갈 수 있다 (예: number "-", "12.").
+   */
+  isIncomplete?(raw: string, opts: TextfieldParseOpts): boolean;
 }
 
 // endregion
@@ -153,6 +158,15 @@ function createNumberHandler(): TextfieldTypeHandler {
       const result = Number.parseFloat(inputValue);
       return Number.isNaN(result) ? undefined : result;
     },
+    isIncomplete(raw) {
+      const inputValue = raw.replace(/[^0-9-.]/g, "");
+      // 부호·소수점 형식은 갖췄으나 아직 완성되지 않은 진행 상태 ("-", "12.", ".", "-.")
+      // Number("12.")===12 이므로 endsWith(".") 를 별도 판정 (parse 의 실패 조건과 정합)
+      return (
+        /^-?\d*\.?\d*$/.test(inputValue)
+        && (Number.isNaN(Number(inputValue)) || inputValue.endsWith("."))
+      );
+    },
     toControlValue(value, opts) {
       const numValue = value as number;
       return opts.useNumberComma !== false
@@ -207,13 +221,25 @@ function createFormatHandler(): TextfieldTypeHandler {
       const format = opts.format;
       if (format == null || format === "") return raw;
 
-      const nonFormatChars = format.match(/[^X]/g)?.filter(
-        (v, i, a) => a.indexOf(v) === i,
-      );
+      // 위치기반: raw 길이가 마스크(대안 중 하나)의 길이와 같으면 X 자리 문자만 추출.
+      // 리터럴이 데이터 문자와 겹쳐도(예: "2025-XXXX") 안전 (toControlValue 와 대칭).
+      const formatItems = format.split("|");
+      for (const formatItem of formatItems) {
+        if (raw.length === formatItem.length) {
+          let result = "";
+          for (let i = 0; i < formatItem.length; i++) {
+            if (formatItem[i] === "X") result += raw[i];
+          }
+          return result;
+        }
+      }
+
+      // 폴백: 길이 불일치(구분자 생략 등)면 리터럴 문자를 전역 제거.
+      const nonFormatChars = format.match(/[^X|]/g)?.filter((v, i, a) => a.indexOf(v) === i);
       if (nonFormatChars != null && nonFormatChars.length > 0) {
-        const escaped = nonFormatChars.map((ch) =>
-          ch === "]" || ch === "\\" || ch === "^" || ch === "-" ? "\\" + ch : ch,
-        ).join("");
+        const escaped = nonFormatChars
+          .map((ch) => (ch === "]" || ch === "\\" || ch === "^" || ch === "-" ? "\\" + ch : ch))
+          .join("");
         return raw.replace(new RegExp(`[${escaped}]`, "g"), "");
       }
       return raw;

package/src/controls/input/sd-textfield.ts

@@ -10,6 +10,7 @@ import {
   input,
   model,
   PLATFORM_ID,
+  signal,
   viewChild,
   ViewEncapsulation,
 } from "@angular/core";
@@ -58,7 +59,8 @@ import {
         [attr.autocomplete]="autocomplete()"
         [attr.step]="controlStep()"
         (input)="onInput($event)"
-        (paste)="onInputPaste($event)"
+        (compositionstart)="onCompositionStart()"
+        (compositionend)="onCompositionEnd($event)"
         (blur)="onBlur($event)"
       />
     }
@@ -330,6 +332,12 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
 
   private readonly _inputElRef = viewChild<ElementRef<HTMLInputElement>>("inputEl");
 
+  // 실제 input 의 브라우저 native 제약 위반(이메일 형식·날짜 미완성 등) 메시지. onInput/onBlur 에서 갱신.
+  private readonly _nativeInvalidMessage = signal("");
+
+  // IME 조합(한글 등) 중 여부. 조합 중에는 미완성 자모가 model 로 흐르지 않도록 갱신을 보류.
+  private _composing = false;
+
   private readonly _handler = computed(() => textfieldTypeHandlers[this.type()]);
 
   controlType = computed(() => this._handler().controlType);
@@ -360,8 +368,23 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
         const inputEl = this._inputElRef()?.nativeElement;
         if (inputEl == null) return;
 
-        // 편집(포커스) 중에는 DOM 을 되쓰면 사용자 입력(세그먼트·캐럿·IME 조합)이 깨지므로 생략
-        if (document.activeElement === inputEl) return;
+        // 편집(포커스) 중이라도 변경 origin 을 구분한다.
+        // 사용자 입력이 만든 DOM(정규화 차이·진행 중 입력 포함)은 보호하고,
+        // 모델만 외부에서 바뀐 경우(프로그래밍적 리셋·prefill·표시옵션 변경)는 되써서 반영한다.
+        if (document.activeElement === inputEl) {
+          const domParsed = this._handler().parse(inputEl.value, { format: this.format() });
+          // DOM raw 가 현재 모델의 유효한 표현이면(사용자 입력 유래) 되쓰지 않아 캐럿·IME 보호
+          const domReflectsModel =
+            domParsed != null
+            && this._handler().toControlValue(domParsed, {
+              useNumberComma: this.useNumberComma(),
+              format: this.format(),
+            }) === controlValue;
+          // 계속 입력하면 유효해질 진행 중 입력(number "12.")도 보호
+          const incomplete =
+            this._handler().isIncomplete?.(inputEl.value, { format: this.format() }) === true;
+          if (domReflectsModel || incomplete) return;
+        }
 
         if (inputEl.value !== controlValue) {
           inputEl.value = controlValue;
@@ -370,6 +393,9 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
     }
 
     setupInvalid(() => {
+      // 비활성·읽기전용 필드는 사용자가 편집할 수 없으므로 검증에서 제외 (네이티브 disabled 동작과 동일)
+      if (this.disabled() || this.readonly()) return "";
+
       const value = this.value();
       const handlerErrors = this._handler().validate(value, {
         required: this.required(),
@@ -390,22 +416,46 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
         }
       }
 
+      // 브라우저 native 제약 위반(이메일 형식·날짜 미완성 등)을 우리 검증(빨간점)에 합류
+      const nativeMessage = this._nativeInvalidMessage();
+      if (nativeMessage !== "") {
+        errorMessages.push(nativeMessage);
+      }
+
       return errorMessages.join("\r\n");
     });
   }
 
+  onCompositionStart(): void {
+    this._composing = true;
+  }
+
+  onCompositionEnd(event: CompositionEvent): void {
+    this._composing = false;
+    this._applyInput(event.target as HTMLInputElement);
+  }
+
   onInput(event: Event): void {
-    const inputEl = event.target as HTMLInputElement;
+    // 조합 중 input 은 무시하고, 완성 시 onCompositionEnd 에서 한 번만 반영
+    if (this._composing) return;
+    this._applyInput(event.target as HTMLInputElement);
+  }
+
+  private _applyInput(inputEl: HTMLInputElement): void {
     if (inputEl.value === "") {
       this.value.set(undefined);
-      return;
-    }
-    const parsed = this._handler().parse(inputEl.value, { format: this.format() });
-    if (parsed == null) {
-      inputEl.value = this.controlValue();
-      return;
+    } else {
+      const parsed = this._handler().parse(inputEl.value, { format: this.format() });
+      if (parsed == null) {
+        // 계속 입력하면 유효해질 진행 중 입력(number "12.", "-")은 되쓰지 않아 입력을 이어가게 함
+        if (this._handler().isIncomplete?.(inputEl.value, { format: this.format() }) !== true) {
+          inputEl.value = this.controlValue();
+        }
+      } else {
+        this.value.set(parsed as SdTextfieldTypes[K]);
+      }
     }
-    this.value.set(parsed as SdTextfieldTypes[K]);
+    this._syncNativeValidity(inputEl);
   }
 
   onBlur(event: FocusEvent): void {
@@ -413,25 +463,11 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
     // date 미완성 입력은 input.value 가 "" 라 비교 없이 무조건 되써야 남은 세그먼트가 정리됨
     const inputEl = event.target as HTMLInputElement;
     inputEl.value = this.controlValue();
+    this._syncNativeValidity(inputEl);
   }
 
-  onInputPaste(event: ClipboardEvent): void {
-    // preventDefault 로 기본 붙여넣기를 막으므로, 포커스 중 동기화를 건너뛰는 effect 대신
-    // 핸들러에서 직접 input.value 를 모델 기준값으로 되써야 화면에 반영됨 (onBlur 와 동일 패턴)
-    event.preventDefault();
-    const inputEl = event.target as HTMLInputElement;
-    const text = event.clipboardData?.getData("text/plain").trim();
-    if (text == null || text === "") {
-      this.value.set(undefined);
-      inputEl.value = "";
-      return;
-    }
-    const parsed = this._handler().parse(text, { format: this.format() });
-    if (parsed == null) {
-      inputEl.value = this.controlValue();
-      return;
-    }
-    this.value.set(parsed as SdTextfieldTypes[K] | undefined);
-    inputEl.value = this.controlValue();
+  private _syncNativeValidity(inputEl: HTMLInputElement): void {
+    // 실제 input 의 브라우저 native 제약 위반을 signal 로 반영 → setupInvalid 콜백이 검증에 합류
+    this._nativeInvalidMessage.set(inputEl.validity.valid ? "" : inputEl.validationMessage);
   }
 }