@simplysm/angular 14.1.14 → 14.1.17

package/dist/controls/collapse/sd-collapse.js

@@ -5,7 +5,8 @@ const _c0 = ["contentEl"];
 const _c1 = ["*"];
 export class SdCollapse {
     open = input(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    _contentElRef = viewChild.required("contentEl");
+    _contentElRef = viewChild.required("contentEl", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_contentElRef" }] : /* istanbul ignore next */ []));
     contentHeight = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "contentHeight" }] : /* istanbul ignore next */ []));
     _initialized = signal(false, /* @ts-ignore */

package/dist/controls/dropdown/sd-dropdown.js

@@ -9,9 +9,7 @@ export class SdDropdown {
     open = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    popupElRef = contentChild.required(SdDropdownPopup, {
-        read: ElementRef,
-    });
+    popupElRef = contentChild.required(SdDropdownPopup, { ...(ngDevMode ? { debugName: "popupElRef" } : /* istanbul ignore next */ {}), read: ElementRef });
     _popupEl;
     _mouseoverEl;
     _backdropEl;

package/dist/controls/form/sd-form.js

@@ -3,9 +3,7 @@ import * as i0 from "@angular/core";
 const _c0 = ["formEl"];
 const _c1 = ["*"];
 export class SdForm {
-    formElRef = viewChild.required("formEl", {
-        read: ElementRef,
-    });
+    formElRef = viewChild.required("formEl", { ...(ngDevMode ? { debugName: "formElRef" } : /* istanbul ignore next */ {}), read: ElementRef });
     get formEl() {
         return this.formElRef().nativeElement;
     }

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":"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"}
+{"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;;IAuEH,kBAAkB,IAAI,IAAI;IAI1B,gBAAgB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI;IAK/C,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAO3B,OAAO,CAAC,WAAW;IAiBnB,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAU/B,OAAO,CAAC,mBAAmB;yCAhLhB,WAAW;2CAAX,WAAW;CAoLvB"}

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

@@ -132,6 +132,10 @@ export class SdTextfield {
                 const inputEl = this._inputElRef()?.nativeElement;
                 if (inputEl == null)
                     return;
+                // IME 조합 중에는 DOM 을 되쓰지 않는다. 되쓰면 진행 중 조합이 깨진다.
+                // 조합이 끝나면 onCompositionEnd → value.set 이 controlValue 를 바꿔 effect 가 다시 돌아 최종값을 반영한다.
+                if (this._composing)
+                    return;
                 // 편집(포커스) 중이라도 변경 origin 을 구분한다.
                 // 사용자 입력이 만든 DOM(정규화 차이·진행 중 입력 포함)은 보호하고,
                 // 모델만 외부에서 바뀐 경우(프로그래밍적 리셋·prefill·표시옵션 변경)는 되써서 반영한다.
@@ -191,7 +195,8 @@ export class SdTextfield {
     }
     onInput(event) {
         // 조합 중 input 은 무시하고, 완성 시 onCompositionEnd 에서 한 번만 반영
-        if (this._composing)
+        // isComposing 은 compositionstart 가 늦거나 누락된 IME 에서도 브라우저가 조합 구간 input 에 직접 실어주는 신호
+        if (event.isComposing || this._composing)
             return;
         this._applyInput(event.target);
     }
@@ -216,6 +221,8 @@ export class SdTextfield {
     onBlur(event) {
         // 편집 종료 시 모델 기준값으로 동기화 (number 콤마 포맷 반영, date 미완성 입력 정리)
         // date 미완성 입력은 input.value 가 "" 라 비교 없이 무조건 되써야 남은 세그먼트가 정리됨
+        // compositionend 가 스킵된 채 blur 되면 _composing 이 true 로 고착되므로 여기서 리셋한다.
+        this._composing = false;
         const inputEl = event.target;
         inputEl.value = this.controlValue();
         this._syncNativeValidity(inputEl);

package/dist/controls/select/sd-select.js

@@ -129,8 +129,9 @@ export class SdSelect {
     tablerCaretDown = tablerCaretDown;
     _itemControls = contentChildren(SdSelectItem, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_itemControls" }] : /* istanbul ignore next */ []));
-    _dropdownControl = viewChild.required(SdDropdown);
-    _dropdownElRef = viewChild.required(SdDropdown, { read: ElementRef });
+    _dropdownControl = viewChild.required(SdDropdown, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dropdownControl" }] : /* istanbul ignore next */ []));
+    _dropdownElRef = viewChild.required(SdDropdown, { ...(ngDevMode ? { debugName: "_dropdownElRef" } : /* istanbul ignore next */ {}), read: ElementRef });
     _headerTpl = contentChild("headerTpl", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_headerTpl" }] : /* istanbul ignore next */ []));
     _beforeTpl = contentChild("beforeTpl", /* @ts-ignore */

package/dist/data/shared-data/sd-shared-data-select-button.js

@@ -35,7 +35,7 @@ export class SdSharedDataSelectButton {
     inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     size = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
-    itemTplRef = contentChild.required(SdItemOfTemplate, { read: TemplateRef });
+    itemTplRef = contentChild.required(SdItemOfTemplate, { ...(ngDevMode ? { debugName: "itemTplRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
     _selectedItems = computed(() => {
         const v = this.value();
         const items = this.items();

package/dist/data/sheet/sd-sheet-column.js

@@ -21,7 +21,7 @@ export class SdSheetColumn {
     disableResizing = input(false, { ...(ngDevMode ? { debugName: "disableResizing" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     ordering = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ordering" }] : /* istanbul ignore next */ []));
-    cellTplRef = contentChild.required(SdSheetColumnCellTemplate, { read: TemplateRef });
+    cellTplRef = contentChild.required(SdSheetColumnCellTemplate, { ...(ngDevMode ? { debugName: "cellTplRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
     headerTplRef = contentChild("headerTpl", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "headerTplRef" }] : /* istanbul ignore next */ []));
     summaryTplRef = contentChild("summaryTpl", /* @ts-ignore */

package/dist/features/theme/sd-theme-selector.js

@@ -71,48 +71,48 @@ export class SdThemeSelector {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdThemeSelector, [{
         type: Component,
-        args: [{ selector: "sd-theme-selector", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdDropdown, SdDropdownPopup, SdButton, SdSwitch, NgIcon], template: `
-    <sd-dropdown>
-      <sd-button [inline]="true" [theme]="'link-gray'">
-        <ng-icon [svg]="tablerPalette" />
-      </sd-button>
-      <sd-dropdown-popup>
-        <div class="p-default">
-          <div class="flex-row gap-sm cross-align-center">
-            <span>글자 크기</span>
-            <div class="flex-row gap-xs cross-align-center">
-              <sd-button
-                [inline]="true"
-                [theme]="'link-gray'"
-                [size]="'sm'"
-                [disabled]="isMinFontSize()"
-                (click)="_sdTheme.decreaseFontSize()"
-              >
-                <ng-icon [svg]="tablerMinus" />
-              </sd-button>
-              <span>{{ _sdTheme.fontSize() }}px</span>
-              <sd-button
-                [inline]="true"
-                [theme]="'link-gray'"
-                [size]="'sm'"
-                [disabled]="isMaxFontSize()"
-                (click)="_sdTheme.increaseFontSize()"
-              >
-                <ng-icon [svg]="tablerPlus" />
-              </sd-button>
-            </div>
-          </div>
-          <div class="flex-row gap-sm cross-align-center">
-            <span>다크 모드</span>
-            <sd-switch [(value)]="_sdTheme.dark" />
-          </div>
-          <div class="flex-row gap-sm cross-align-center">
-            <span>블루프린트</span>
-            <sd-switch [(value)]="_sdTheme.blueprint" />
-          </div>
-        </div>
-      </sd-dropdown-popup>
-    </sd-dropdown>
+        args: [{ selector: "sd-theme-selector", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdDropdown, SdDropdownPopup, SdButton, SdSwitch, NgIcon], template: `
+    <sd-dropdown>
+      <sd-button [inline]="true" [theme]="'link-gray'">
+        <ng-icon [svg]="tablerPalette" />
+      </sd-button>
+      <sd-dropdown-popup>
+        <div class="p-default">
+          <div class="flex-row gap-sm cross-align-center">
+            <span>글자 크기</span>
+            <div class="flex-row gap-xs cross-align-center">
+              <sd-button
+                [inline]="true"
+                [theme]="'link-gray'"
+                [size]="'sm'"
+                [disabled]="isMinFontSize()"
+                (click)="_sdTheme.decreaseFontSize()"
+              >
+                <ng-icon [svg]="tablerMinus" />
+              </sd-button>
+              <span>{{ _sdTheme.fontSize() }}px</span>
+              <sd-button
+                [inline]="true"
+                [theme]="'link-gray'"
+                [size]="'sm'"
+                [disabled]="isMaxFontSize()"
+                (click)="_sdTheme.increaseFontSize()"
+              >
+                <ng-icon [svg]="tablerPlus" />
+              </sd-button>
+            </div>
+          </div>
+          <div class="flex-row gap-sm cross-align-center">
+            <span>다크 모드</span>
+            <sd-switch [(value)]="_sdTheme.dark" />
+          </div>
+          <div class="flex-row gap-sm cross-align-center">
+            <span>블루프린트</span>
+            <sd-switch [(value)]="_sdTheme.blueprint" />
+          </div>
+        </div>
+      </sd-dropdown-popup>
+    </sd-dropdown>
   ` }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdThemeSelector, { className: "SdThemeSelector", filePath: "packages/angular/src/features/theme/sd-theme-selector.ts", lineNumber: 67 }); })();

package/dist/features/visual/sd-calendar.js

@@ -48,7 +48,7 @@ export class SdCalendar {
     ...(ngDevMode ? [{ debugName: "getItemDateFn" }] : /* istanbul ignore next */ []));
     yearMonth = input(new DateOnly().setDay(1), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "yearMonth" }] : /* istanbul ignore next */ []));
-    itemTplRef = contentChild.required(SdItemOfTemplate, { read: TemplateRef });
+    itemTplRef = contentChild.required(SdItemOfTemplate, { ...(ngDevMode ? { debugName: "itemTplRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
     weekStartDay = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "weekStartDay" }] : /* istanbul ignore next */ []));
     minDaysInFirstWeek = input(1, /* @ts-ignore */

package/dist/layout/sidebar/sd-sidebar.js

@@ -12,7 +12,7 @@ export class SdSidebar {
         } }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdSidebar_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, 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-sidebar {\n  position: absolute;\n  z-index: var(--z-index-sidebar);\n  top: 0;\n  left: 0;\n  width: var(--sidebar-width);\n  height: 100%;\n}\n@media not all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--animation-duration) ease-out;\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: translateX(-100%);\n    transition: transform var(--animation-duration) ease-in;\n  }\n}\n@media all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--animation-duration) ease-in;\n    transform: translateX(-100%);\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: none;\n    transition: transform var(--animation-duration) ease-out;\n    box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n  }\n}"], encapsulation: 2 });
+        } }, 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-sidebar {\n  position: absolute;\n  z-index: var(--z-index-sidebar);\n  top: 0;\n  left: 0;\n  width: var(--sidebar-width);\n  height: 100%;\n  border-right: 1px solid var(--border-color-lighter);\n}\n@media not all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--animation-duration) ease-out;\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: translateX(-100%);\n    transition: transform var(--animation-duration) ease-in;\n  }\n}\n@media all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--animation-duration) ease-in;\n    transform: translateX(-100%);\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: none;\n    transition: transform var(--animation-duration) ease-out;\n    box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n  }\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSidebar, [{
         type: Component,
@@ -20,6 +20,6 @@ export class SdSidebar {
                     "[attr.data-sd-toggle]": "toggle()",
                 }, template: `
     <ng-content />
-  `, 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-sidebar {\n  position: absolute;\n  z-index: var(--z-index-sidebar);\n  top: 0;\n  left: 0;\n  width: var(--sidebar-width);\n  height: 100%;\n}\n@media not all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--animation-duration) ease-out;\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: translateX(-100%);\n    transition: transform var(--animation-duration) ease-in;\n  }\n}\n@media all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--animation-duration) ease-in;\n    transform: translateX(-100%);\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: none;\n    transition: transform var(--animation-duration) ease-out;\n    box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n  }\n}"] }]
+  `, 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-sidebar {\n  position: absolute;\n  z-index: var(--z-index-sidebar);\n  top: 0;\n  left: 0;\n  width: var(--sidebar-width);\n  height: 100%;\n  border-right: 1px solid var(--border-color-lighter);\n}\n@media not all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--animation-duration) ease-out;\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: translateX(-100%);\n    transition: transform var(--animation-duration) ease-in;\n  }\n}\n@media all and (max-width: 520px) {\n  sd-sidebar {\n    transition: transform var(--animation-duration) ease-in;\n    transform: translateX(-100%);\n  }\n  sd-sidebar[data-sd-toggle=true] {\n    transform: none;\n    transition: transform var(--animation-duration) ease-out;\n    box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n  }\n}"] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSidebar, { className: "SdSidebar", filePath: "packages/angular/src/layout/sidebar/sd-sidebar.ts", lineNumber: 62 }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/angular",
-  "version": "14.1.14",
+  "version": "14.1.17",
   "description": "심플리즘 패키지 - Angular",
   "author": "심플리즘",
   "license": "Apache-2.0",
@@ -32,39 +32,39 @@
     "./styles.css"
   ],
   "dependencies": {
-    "@angular/common": "^22.0.4",
-    "@angular/core": "^22.0.4",
-    "@angular/platform-browser": "^22.0.4",
-    "@angular/router": "^22.0.4",
-    "@angular/service-worker": "^22.0.4",
-    "@ng-icons/core": "^33.3.0",
-    "@ng-icons/tabler-icons": "^33.3.0",
-    "@tiptap/core": "^3.27.1",
-    "@tiptap/extension-color": "^3.27.1",
-    "@tiptap/extension-document": "^3.27.1",
-    "@tiptap/extension-highlight": "^3.27.1",
-    "@tiptap/extension-image": "^3.27.1",
-    "@tiptap/extension-paragraph": "^3.27.1",
-    "@tiptap/extension-placeholder": "^3.27.1",
-    "@tiptap/extension-text": "^3.27.1",
-    "@tiptap/extension-text-align": "^3.27.1",
-    "@tiptap/extension-text-style": "^3.27.1",
-    "@tiptap/extension-underline": "^3.27.1",
-    "@tiptap/markdown": "^3.27.1",
-    "@tiptap/starter-kit": "^3.27.1",
-    "bwip-js": "^4.11.1",
+    "@angular/common": "^22.0.6",
+    "@angular/core": "^22.0.6",
+    "@angular/platform-browser": "^22.0.6",
+    "@angular/router": "^22.0.6",
+    "@angular/service-worker": "^22.0.6",
+    "@ng-icons/core": "^33.4.0",
+    "@ng-icons/tabler-icons": "^33.4.0",
+    "@tiptap/core": "^3.27.4",
+    "@tiptap/extension-color": "^3.27.4",
+    "@tiptap/extension-document": "^3.27.4",
+    "@tiptap/extension-highlight": "^3.27.4",
+    "@tiptap/extension-image": "^3.27.4",
+    "@tiptap/extension-paragraph": "^3.27.4",
+    "@tiptap/extension-placeholder": "^3.27.4",
+    "@tiptap/extension-text": "^3.27.4",
+    "@tiptap/extension-text-align": "^3.27.4",
+    "@tiptap/extension-text-style": "^3.27.4",
+    "@tiptap/extension-underline": "^3.27.4",
+    "@tiptap/markdown": "^3.27.4",
+    "@tiptap/starter-kit": "^3.27.4",
+    "bwip-js": "^4.11.2",
     "echarts": "^6.1.0",
     "html-to-image": "^1.11.13",
     "jspdf": "^4.2.1",
     "rxjs": "^7.8.2",
     "tabbable": "^6.5.0",
-    "@simplysm/service-client": "14.1.14",
-    "@simplysm/core-browser": "14.1.14",
-    "@simplysm/service-common": "14.1.14",
-    "@simplysm/core-common": "14.1.14"
+    "@simplysm/core-browser": "14.1.17",
+    "@simplysm/service-common": "14.1.17",
+    "@simplysm/core-common": "14.1.17",
+    "@simplysm/service-client": "14.1.17"
   },
   "devDependencies": {
-    "@angular/compiler": "^22.0.4"
+    "@angular/compiler": "^22.0.6"
   },
   "scripts": {}
 }

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

@@ -368,6 +368,10 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
         const inputEl = this._inputElRef()?.nativeElement;
         if (inputEl == null) return;
 
+        // IME 조합 중에는 DOM 을 되쓰지 않는다. 되쓰면 진행 중 조합이 깨진다.
+        // 조합이 끝나면 onCompositionEnd → value.set 이 controlValue 를 바꿔 effect 가 다시 돌아 최종값을 반영한다.
+        if (this._composing) return;
+
         // 편집(포커스) 중이라도 변경 origin 을 구분한다.
         // 사용자 입력이 만든 DOM(정규화 차이·진행 중 입력 포함)은 보호하고,
         // 모델만 외부에서 바뀐 경우(프로그래밍적 리셋·prefill·표시옵션 변경)는 되써서 반영한다.
@@ -437,7 +441,8 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
 
   onInput(event: Event): void {
     // 조합 중 input 은 무시하고, 완성 시 onCompositionEnd 에서 한 번만 반영
-    if (this._composing) return;
+    // isComposing 은 compositionstart 가 늦거나 누락된 IME 에서도 브라우저가 조합 구간 input 에 직접 실어주는 신호
+    if ((event as InputEvent).isComposing || this._composing) return;
     this._applyInput(event.target as HTMLInputElement);
   }
 
@@ -461,6 +466,8 @@ export class SdTextfield<K extends keyof SdTextfieldTypes> {
   onBlur(event: FocusEvent): void {
     // 편집 종료 시 모델 기준값으로 동기화 (number 콤마 포맷 반영, date 미완성 입력 정리)
     // date 미완성 입력은 input.value 가 "" 라 비교 없이 무조건 되써야 남은 세그먼트가 정리됨
+    // compositionend 가 스킵된 채 blur 되면 _composing 이 true 로 고착되므로 여기서 리셋한다.
+    this._composing = false;
     const inputEl = event.target as HTMLInputElement;
     inputEl.value = this.controlValue();
     this._syncNativeValidity(inputEl);

package/src/features/theme/sd-theme-selector.ts

@@ -1,81 +1,81 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  ViewEncapsulation,
-} from "@angular/core";
-import { SdDropdown } from "../../controls/dropdown/sd-dropdown";
-import { SdDropdownPopup } from "../../controls/dropdown/sd-dropdown-popup";
-import { SdButton } from "../../controls/button/sd-button";
-import { SdSwitch } from "../../controls/checkbox/sd-switch";
-import { NgIcon } from "@ng-icons/core";
-import { SdThemeProvider } from "./sd-theme-provider";
-import { tablerMinus, tablerPalette, tablerPlus } from "@ng-icons/tabler-icons";
-
-@Component({
-  selector: "sd-theme-selector",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [SdDropdown, SdDropdownPopup, SdButton, SdSwitch, NgIcon],
-  template: `
-    <sd-dropdown>
-      <sd-button [inline]="true" [theme]="'link-gray'">
-        <ng-icon [svg]="tablerPalette" />
-      </sd-button>
-      <sd-dropdown-popup>
-        <div class="p-default">
-          <div class="flex-row gap-sm cross-align-center">
-            <span>글자 크기</span>
-            <div class="flex-row gap-xs cross-align-center">
-              <sd-button
-                [inline]="true"
-                [theme]="'link-gray'"
-                [size]="'sm'"
-                [disabled]="isMinFontSize()"
-                (click)="_sdTheme.decreaseFontSize()"
-              >
-                <ng-icon [svg]="tablerMinus" />
-              </sd-button>
-              <span>{{ _sdTheme.fontSize() }}px</span>
-              <sd-button
-                [inline]="true"
-                [theme]="'link-gray'"
-                [size]="'sm'"
-                [disabled]="isMaxFontSize()"
-                (click)="_sdTheme.increaseFontSize()"
-              >
-                <ng-icon [svg]="tablerPlus" />
-              </sd-button>
-            </div>
-          </div>
-          <div class="flex-row gap-sm cross-align-center">
-            <span>다크 모드</span>
-            <sd-switch [(value)]="_sdTheme.dark" />
-          </div>
-          <div class="flex-row gap-sm cross-align-center">
-            <span>블루프린트</span>
-            <sd-switch [(value)]="_sdTheme.blueprint" />
-          </div>
-        </div>
-      </sd-dropdown-popup>
-    </sd-dropdown>
-  `,
-  styles: [],
-})
-export class SdThemeSelector {
-  protected readonly _sdTheme = inject(SdThemeProvider);
-
-  isMinFontSize = computed(() => this._sdTheme.fontSize() <= this._sdTheme.fontSizePresets[0]);
-
-  isMaxFontSize = computed(
-    () =>
-      this._sdTheme.fontSize() >=
-      this._sdTheme.fontSizePresets[this._sdTheme.fontSizePresets.length - 1],
-  );
-
-  protected readonly tablerPlus = tablerPlus;
-  protected readonly tablerMinus = tablerMinus;
-  protected readonly tablerPalette = tablerPalette;
-}
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdDropdown } from "../../controls/dropdown/sd-dropdown";
+import { SdDropdownPopup } from "../../controls/dropdown/sd-dropdown-popup";
+import { SdButton } from "../../controls/button/sd-button";
+import { SdSwitch } from "../../controls/checkbox/sd-switch";
+import { NgIcon } from "@ng-icons/core";
+import { SdThemeProvider } from "./sd-theme-provider";
+import { tablerMinus, tablerPalette, tablerPlus } from "@ng-icons/tabler-icons";
+
+@Component({
+  selector: "sd-theme-selector",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdDropdown, SdDropdownPopup, SdButton, SdSwitch, NgIcon],
+  template: `
+    <sd-dropdown>
+      <sd-button [inline]="true" [theme]="'link-gray'">
+        <ng-icon [svg]="tablerPalette" />
+      </sd-button>
+      <sd-dropdown-popup>
+        <div class="p-default">
+          <div class="flex-row gap-sm cross-align-center">
+            <span>글자 크기</span>
+            <div class="flex-row gap-xs cross-align-center">
+              <sd-button
+                [inline]="true"
+                [theme]="'link-gray'"
+                [size]="'sm'"
+                [disabled]="isMinFontSize()"
+                (click)="_sdTheme.decreaseFontSize()"
+              >
+                <ng-icon [svg]="tablerMinus" />
+              </sd-button>
+              <span>{{ _sdTheme.fontSize() }}px</span>
+              <sd-button
+                [inline]="true"
+                [theme]="'link-gray'"
+                [size]="'sm'"
+                [disabled]="isMaxFontSize()"
+                (click)="_sdTheme.increaseFontSize()"
+              >
+                <ng-icon [svg]="tablerPlus" />
+              </sd-button>
+            </div>
+          </div>
+          <div class="flex-row gap-sm cross-align-center">
+            <span>다크 모드</span>
+            <sd-switch [(value)]="_sdTheme.dark" />
+          </div>
+          <div class="flex-row gap-sm cross-align-center">
+            <span>블루프린트</span>
+            <sd-switch [(value)]="_sdTheme.blueprint" />
+          </div>
+        </div>
+      </sd-dropdown-popup>
+    </sd-dropdown>
+  `,
+  styles: [],
+})
+export class SdThemeSelector {
+  protected readonly _sdTheme = inject(SdThemeProvider);
+
+  isMinFontSize = computed(() => this._sdTheme.fontSize() <= this._sdTheme.fontSizePresets[0]);
+
+  isMaxFontSize = computed(
+    () =>
+      this._sdTheme.fontSize() >=
+      this._sdTheme.fontSizePresets[this._sdTheme.fontSizePresets.length - 1],
+  );
+
+  protected readonly tablerPlus = tablerPlus;
+  protected readonly tablerMinus = tablerMinus;
+  protected readonly tablerPalette = tablerPalette;
+}

package/src/layout/sidebar/sd-sidebar.ts

@@ -34,7 +34,7 @@ import { SdSidebarContainer } from "./sd-sidebar-container";
         height: 100%;
         //background: var(--control-color);
         //background: var(--theme-gray-lightest);
-        //border-right: 1px solid var(--border-color-lighter);
+        border-right: 1px solid var(--border-color-lighter);
 
         @media not all and (max-width: variables.$breakpoint-mobile) {
           transition: transform var(--animation-duration) ease-out;