@simplysm/angular 14.0.21 → 14.0.22

package/dist/features/data-view/useDataSheetFilterManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDataSheetFilterManager.d.ts","sourceRoot":"","sources":["../../../src/features/data-view/useDataSheetFilterManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,cAAc,EAAkB,MAAM,eAAe,CAAC;AAGjF,wBAAgB,yBAAyB,CAAC,OAAO,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE;IACtF,UAAU,EAAE,MAAM,OAAO,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAC1B,MAAM,EAAE,MAAM,OAAO,CAAC;IACtB,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAC7B,kBAAkB,EAAE,MAAM,OAAO,CAAC;CACnC;;;0BAU4B,IAAI;EAUhC"}
+{"version":3,"file":"useDataSheetFilterManager.d.ts","sourceRoot":"","sources":["../../../src/features/data-view/useDataSheetFilterManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,cAAc,EAAgB,MAAM,eAAe,CAAC;AAG/E,wBAAgB,yBAAyB,CAAC,OAAO,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE;IACtF,UAAU,EAAE,MAAM,OAAO,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAC1B,MAAM,EAAE,MAAM,OAAO,CAAC;IACtB,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAC7B,kBAAkB,EAAE,MAAM,OAAO,CAAC;CACnC;;;0BAU4B,IAAI;EAUhC"}

package/dist/features/data-view/useDataSheetFilterManager.js

@@ -1,13 +1,10 @@
-import { effect, signal } from "@angular/core";
+import { linkedSignal } from "@angular/core";
 import { obj } from "@simplysm/core-common";
 export function useDataSheetFilterManager(options) {
-    const filter = signal({}, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
-    const lastFilter = signal({}, ...(ngDevMode ? [{ debugName: "lastFilter" }] : /* istanbul ignore next */ []));
-    effect(() => {
-        const f = options.bindFilter();
-        filter.set(f);
-        lastFilter.set(obj.clone(f));
-    });
+    const filter = linkedSignal({ ...(ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {}), source: options.bindFilter,
+        computation: (f) => f });
+    const lastFilter = linkedSignal({ ...(ngDevMode ? { debugName: "lastFilter" } : /* istanbul ignore next */ {}), source: options.bindFilter,
+        computation: (f) => obj.clone(f) });
     function doFilterSubmit() {
         if (options.busyCount() > 0)
             return;

package/dist/ui/data/sheet/sd-sheet-config.modal.d.ts

@@ -20,8 +20,7 @@ export declare class SdSheetConfigModal implements ISdModal<ISdSheetConfig | und
         tablerArrowDown: string;
     };
     private readonly _initialItems;
-    private readonly _editItems;
-    _items: import("@angular/core").Signal<IConfigItem[]>;
+    _items: import("@angular/core").WritableSignal<IConfigItem[]>;
     onFixedToggle(idx: number): void;
     onHiddenToggle(idx: number): void;
     onWidthChange(idx: number, event: Event): void;

package/dist/ui/data/sheet/sd-sheet-config.modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-sheet-config.modal.d.ts","sourceRoot":"","sources":["../../../../src/ui/data/sheet/sd-sheet-config.modal.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;;AAM1E,UAAU,WAAW;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,qBAoHa,kBAAmB,YAAW,QAAQ,CAAC,cAAc,GAAG,SAAS,CAAC;IAC7E,WAAW,kDAAgB;IAC3B,KAAK,uEAAwC;IAE7C,QAAQ,yEAAuD;IAC/D,MAAM,kEAAgD;IAEtD,MAAM;;;MAAsC;IAE5C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAiB3B;IAEH,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAgD;IAE3E,MAAM,gDAEH;IAEH,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAMhC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAMjC,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI;IAO9C,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAU/B,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAUjC,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAO3B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAO7B,IAAI,IAAI,IAAI;IAeZ,QAAQ,IAAI,IAAI;IAIhB,OAAO,IAAI,IAAI;yCA1GJ,kBAAkB;2CAAlB,kBAAkB;CA6G9B"}
+{"version":3,"file":"sd-sheet-config.modal.d.ts","sourceRoot":"","sources":["../../../../src/ui/data/sheet/sd-sheet-config.modal.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;;AAM1E,UAAU,WAAW;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,qBAmHa,kBAAmB,YAAW,QAAQ,CAAC,cAAc,GAAG,SAAS,CAAC;IAC7E,WAAW,kDAAgB;IAC3B,KAAK,uEAAwC;IAE7C,QAAQ,yEAAuD;IAC/D,MAAM,kEAAgD;IAEtD,MAAM;;;MAAsC;IAE5C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAiB3B;IAEH,MAAM,wDAA2D;IAEjE,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAMhC,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAMjC,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI;IAO9C,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAU/B,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAUjC,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAO3B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAO7B,IAAI,IAAI,IAAI;IAeZ,QAAQ,IAAI,IAAI;IAIhB,OAAO,IAAI,IAAI;yCAtGJ,kBAAkB;2CAAlB,kBAAkB;CAyG9B"}

package/dist/ui/data/sheet/sd-sheet-config.modal.js

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, input, output, signal, ViewEncapsulation, } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, linkedSignal, output, signal, ViewEncapsulation, } from "@angular/core";
 import { SdButtonControl } from "../../form/button/sd-button.control";
 import { SdCheckboxControl } from "../../form/checkbox/sd-checkbox.control";
 import { NgIcon } from "@ng-icons/core";
@@ -72,25 +72,22 @@ export class SdSheetConfigModal {
         })
             .sort((a, b) => a.ordering - b.ordering);
     }, ...(ngDevMode ? [{ debugName: "_initialItems" }] : /* istanbul ignore next */ []));
-    _editItems = signal(undefined, ...(ngDevMode ? [{ debugName: "_editItems" }] : /* istanbul ignore next */ []));
-    _items = computed(() => {
-        return this._editItems() ?? this._initialItems();
-    }, ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    _items = linkedSignal(() => this._initialItems(), ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
     onFixedToggle(idx) {
         const items = [...this._items()];
         items[idx] = { ...items[idx], fixed: !items[idx].fixed };
-        this._editItems.set(items);
+        this._items.set(items);
     }
     onHiddenToggle(idx) {
         const items = [...this._items()];
         items[idx] = { ...items[idx], hidden: !items[idx].hidden };
-        this._editItems.set(items);
+        this._items.set(items);
     }
     onWidthChange(idx, event) {
         const inputEl = event.target;
         const items = [...this._items()];
         items[idx] = { ...items[idx], width: inputEl.value };
-        this._editItems.set(items);
+        this._items.set(items);
     }
     canMoveUp(idx) {
         if (idx <= 0)
@@ -119,14 +116,14 @@ export class SdSheetConfigModal {
             return;
         const items = [...this._items()];
         [items[idx - 1], items[idx]] = [items[idx], items[idx - 1]];
-        this._editItems.set(items);
+        this._items.set(items);
     }
     onMoveDown(idx) {
         if (!this.canMoveDown(idx))
             return;
         const items = [...this._items()];
         [items[idx], items[idx + 1]] = [items[idx + 1], items[idx]];
-        this._editItems.set(items);
+        this._items.set(items);
     }
     onOk() {
         const items = this._items();
@@ -189,7 +186,7 @@ export class SdSheetConfigModal {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSheetConfigModal, [{
         type: Component,
-        args: [{ selector: "sd-sheet-config-modal", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdButtonControl, SdCheckboxControl, NgIcon], template: `
+        args: [{ selector: "sd-sheet-config-modal", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SdButtonControl, SdCheckboxControl, NgIcon], template: `
     <div class="_sd-sheet-config-modal">
       <table class="_config-table">
         <thead>

package/dist/ui/form/select/sd-select.control.d.ts

@@ -29,7 +29,7 @@ export declare class SdSelectControl<M extends "single" | "multi", T> {
     _beforeTpl: import("@angular/core").Signal<TemplateRef<void> | undefined>;
     _itemOfTpl: import("@angular/core").Signal<TemplateRef<any> | undefined>;
     _selectedItemContentHTML: import("@angular/core").WritableSignal<string | undefined>;
-    _flatItems: import("@angular/core").WritableSignal<{
+    _flatItems: import("@angular/core").Signal<{
         data: T;
         index: number;
         depth: number;

package/dist/ui/form/select/sd-select.control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-select.control.d.ts","sourceRoot":"","sources":["../../../../src/ui/form/select/sd-select.control.ts"],"names":[],"mappings":"AAAA,OAAO,EAWL,WAAW,EAIZ,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;;AAU/D,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI;IAChC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,MAAM,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,qBAmJa,eAAe,CAAC,CAAC,SAAS,QAAQ,GAAG,OAAO,EAAE,CAAC;IAC1D,UAAU,yCAAwB;IAClC,KAAK,4EAAqC;IAC1C,WAAW,0DAAmB;IAC9B,QAAQ,qEAAiD;IACzD,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,QAAQ,qEAAiD;IAEzD,aAAa,qEAAiD;IAC9D,8BAA8B,8DAAuB;IAErD,KAAK,uDAAgB;IACrB,aAAa,8CAAgB,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,eAAI;IAEtD,YAAY,0DAAmB;IAC/B,YAAY,0DAAmB;IAE/B,YAAY,kDAAiB;IAE7B,SAAS,CAAC,QAAQ,CAAC,eAAe,iUAAmB;IAErD,aAAa,sEAAwC;IACrD,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAyC;IAC1E,OAAO,CAAC,QAAQ,CAAC,cAAc,CAG7B;IAEF,UAAU,gEAAgD;IAC1D,UAAU,gEAAgD;IAC1D,UAAU,+DAAkE;IAE5E,wBAAwB,6DAAyC;IAEjE,UAAU;cAAkB,CAAC;eAAS,MAAM;eAAS,MAAM;SAAU;;IA2JrE,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI;IAO9B,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI;IAI9B,OAAO,CAAC,YAAY;IAepB,WAAW,IAAI,IAAI;IAQnB,aAAa,IAAI,IAAI;IAIrB,aAAa,IAAI,IAAI;IAIrB,YAAY,IAAI,IAAI;yCAzOT,eAAe;2CAAf,eAAe;CA6O3B"}
+{"version":3,"file":"sd-select.control.d.ts","sourceRoot":"","sources":["../../../../src/ui/form/select/sd-select.control.ts"],"names":[],"mappings":"AAAA,OAAO,EAYL,WAAW,EAIZ,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;;AAU/D,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI;IAChC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,MAAM,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,qBAmJa,eAAe,CAAC,CAAC,SAAS,QAAQ,GAAG,OAAO,EAAE,CAAC;IAC1D,UAAU,yCAAwB;IAClC,KAAK,4EAAqC;IAC1C,WAAW,0DAAmB;IAC9B,QAAQ,qEAAiD;IACzD,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,QAAQ,qEAAiD;IAEzD,aAAa,qEAAiD;IAC9D,8BAA8B,8DAAuB;IAErD,KAAK,uDAAgB;IACrB,aAAa,8CAAgB,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,eAAI;IAEtD,YAAY,0DAAmB;IAC/B,YAAY,0DAAmB;IAE/B,YAAY,kDAAiB;IAE7B,SAAS,CAAC,QAAQ,CAAC,eAAe,iUAAmB;IAErD,aAAa,sEAAwC;IACrD,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAyC;IAC1E,OAAO,CAAC,QAAQ,CAAC,cAAc,CAG7B;IAEF,UAAU,gEAAgD;IAC1D,UAAU,gEAAgD;IAC1D,UAAU,+DAAkE;IAE5E,wBAAwB,6DAAyC;IAEjE,UAAU;cAIY,CAAC;eAAS,MAAM;eAAS,MAAM;SAelD;;IAkIH,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI;IAO9B,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI;IAI9B,OAAO,CAAC,YAAY;IAepB,WAAW,IAAI,IAAI;IAQnB,aAAa,IAAI,IAAI;IAIrB,aAAa,IAAI,IAAI;IAIrB,YAAY,IAAI,IAAI;yCAnOT,eAAe;2CAAf,eAAe;CAuO3B"}

package/dist/ui/form/select/sd-select.control.js

@@ -1,4 +1,4 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, contentChild, contentChildren, effect, ElementRef, input, model, signal, TemplateRef, untracked, viewChild, ViewEncapsulation, } from "@angular/core";
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, effect, ElementRef, input, model, signal, TemplateRef, untracked, viewChild, ViewEncapsulation, } from "@angular/core";
 import { NgTemplateOutlet } from "@angular/common";
 import { SdDropdownControl } from "../../overlay/dropdown/sd-dropdown.control";
 import { SdDropdownPopupControl } from "../../overlay/dropdown/sd-dropdown-popup.control";
@@ -119,7 +119,27 @@ export class SdSelectControl {
     _beforeTpl = contentChild("beforeTpl", ...(ngDevMode ? [{ debugName: "_beforeTpl" }] : /* istanbul ignore next */ []));
     _itemOfTpl = contentChild(SdItemOfTemplateDirective, { ...(ngDevMode ? { debugName: "_itemOfTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
     _selectedItemContentHTML = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectedItemContentHTML" }] : /* istanbul ignore next */ []));
-    _flatItems = signal([], ...(ngDevMode ? [{ debugName: "_flatItems" }] : /* istanbul ignore next */ []));
+    _flatItems = computed(() => {
+        const items = this.items();
+        if (items == null)
+            return [];
+        const getChildren = this.getChildrenFn();
+        const flat = [];
+        let index = 0;
+        const walk = (list, depth) => {
+            for (const item of list) {
+                flat.push({ data: item, index: index++, depth });
+                if (getChildren !== undefined) {
+                    const children = getChildren(item);
+                    if (children !== undefined) {
+                        walk(children, depth + 1);
+                    }
+                }
+            }
+        };
+        walk(items, 0);
+        return flat;
+    }, ...(ngDevMode ? [{ debugName: "_flatItems" }] : /* istanbul ignore next */ []));
     constructor() {
         // Required validation
         setupInvalid(() => {
@@ -132,30 +152,6 @@ export class SdSelectControl {
                 return "선택된 항목이 없습니다.";
             return "";
         });
-        // Flatten items array (with hierarchy support)
-        effect(() => {
-            const items = this.items();
-            if (items == null) {
-                this._flatItems.set([]);
-                return;
-            }
-            const getChildren = this.getChildrenFn();
-            const flat = [];
-            let index = 0;
-            const walk = (list, depth) => {
-                for (const item of list) {
-                    flat.push({ data: item, index: index++, depth });
-                    if (getChildren !== undefined) {
-                        const children = getChildren(item);
-                        if (children !== undefined) {
-                            walk(children, depth + 1);
-                        }
-                    }
-                }
-            };
-            walk(items, 0);
-            this._flatItems.set(flat);
-        });
         // D3: contentClass/contentStyle via effect() on popup element
         // + D4: keyboard navigation via tabbable()
         effect((onCleanup) => {
@@ -431,4 +427,4 @@ export class SdSelectControl {
                     "[attr.data-sd-disabled]": "disabled()",
                 }, styles: ["sd-select {\n  display: block;\n  position: relative;\n}\nsd-select > sd-dropdown > ._sd-select-control {\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  display: flex;\n  align-items: center;\n  cursor: pointer;\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  background: var(--theme-secondary-lightest);\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-content {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n  margin-left: var(--gap-sm);\n  opacity: 0.3;\n}\nsd-select > sd-dropdown:focus-within > ._sd-select-control {\n  border-color: var(--theme-secondary-default);\n}\nsd-select[data-sd-size=sm] > sd-dropdown > ._sd-select-control {\n  padding: var(--gap-xs) var(--gap-sm);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > ._sd-select-control {\n  padding: var(--gap-default) var(--gap-lg);\n}\nsd-select[data-sd-inline=true] {\n  display: inline-block;\n  width: auto;\n}\nsd-select[data-sd-inset=true] > sd-dropdown > ._sd-select-control {\n  border: none;\n  border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown > ._sd-select-control:focus-within {\n  outline: 1px solid var(--theme-primary-default);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n  background: var(--trans-lighter);\n  cursor: default;\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n  display: none;\n}\n\n._sd-select-all-bar {\n  display: flex;\n  padding: var(--gap-sm) var(--gap-default);\n  border-bottom: 1px solid var(--border-color-light);\n}"] }]
     }], () => [], { selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", 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 }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hideSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSelectAll", required: false }] }], multiSelectionDisplayDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelectionDisplayDirection", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], getChildrenFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getChildrenFn", required: false }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }], _itemControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdSelectItemControl), { isSignal: true }] }], _dropdownControl: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdDropdownControl), { isSignal: true }] }], _dropdownElRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdDropdownControl), { ...{ read: ElementRef }, isSignal: true }] }], _headerTpl: [{ type: i0.ContentChild, args: ["headerTpl", { isSignal: true }] }], _beforeTpl: [{ type: i0.ContentChild, args: ["beforeTpl", { isSignal: true }] }], _itemOfTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdItemOfTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelectControl, { className: "SdSelectControl", filePath: "packages/angular/src/ui/form/select/sd-select.control.ts", lineNumber: 182, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelectControl, { className: "SdSelectControl", filePath: "packages/angular/src/ui/form/select/sd-select.control.ts", lineNumber: 183, forbidOrphanRendering: true }); })();

package/dist/ui/layout/sd-gap.control.d.ts

@@ -1,12 +1,11 @@
 import * as i0 from "@angular/core";
 export declare class SdGapControl {
-    private readonly _elRef;
     height: import("@angular/core").InputSignal<"default" | "sm" | "lg" | "xxs" | "xs" | "xl" | "xxl" | undefined>;
     heightPx: import("@angular/core").InputSignal<number | undefined>;
     width: import("@angular/core").InputSignal<"default" | "sm" | "lg" | "xxs" | "xs" | "xl" | "xxl" | undefined>;
     widthPx: import("@angular/core").InputSignal<number | undefined>;
     widthEm: import("@angular/core").InputSignal<number | undefined>;
-    constructor();
+    _displayStyle: import("@angular/core").Signal<"none" | "block" | "inline-block" | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdGapControl, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SdGapControl, "sd-gap", never, { "height": { "alias": "height"; "required": false; "isSignal": true; }; "heightPx": { "alias": "heightPx"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "widthPx": { "alias": "widthPx"; "required": false; "isSignal": true; }; "widthEm": { "alias": "widthEm"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/dist/ui/layout/sd-gap.control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-gap.control.d.ts","sourceRoot":"","sources":["../../../src/ui/layout/sd-gap.control.ts"],"names":[],"mappings":";AAEA,qBAkCa,YAAY;IACvB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAE1D,MAAM,yGAAkE;IACxE,QAAQ,0DAAmB;IAC3B,KAAK,yGAAkE;IACvE,OAAO,0DAAmB;IAC1B,OAAO,0DAAmB;;yCAPf,YAAY;2CAAZ,YAAY;CA0BxB"}
+{"version":3,"file":"sd-gap.control.d.ts","sourceRoot":"","sources":["../../../src/ui/layout/sd-gap.control.ts"],"names":[],"mappings":";AAEA,qBAkCa,YAAY;IACvB,MAAM,yGAAkE;IACxE,QAAQ,0DAAmB;IAC3B,KAAK,yGAAkE;IACvE,OAAO,0DAAmB;IAC1B,OAAO,0DAAmB;IAE1B,aAAa,gFAcV;yCArBQ,YAAY;2CAAZ,YAAY;CAsBxB"}

package/dist/ui/layout/sd-gap.control.js

@@ -1,44 +1,42 @@
-import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, input, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from "@angular/core";
 import * as i0 from "@angular/core";
 export class SdGapControl {
-    _elRef = inject((ElementRef));
     height = input(...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
     heightPx = input(...(ngDevMode ? [undefined, { debugName: "heightPx" }] : /* istanbul ignore next */ []));
     width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
     widthPx = input(...(ngDevMode ? [undefined, { debugName: "widthPx" }] : /* istanbul ignore next */ []));
     widthEm = input(...(ngDevMode ? [undefined, { debugName: "widthEm" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            if (this.widthPx() === 0 || this.heightPx() === 0 || this.widthEm() === 0) {
-                this._elRef.nativeElement.style.display = "none";
-            }
-            else if (this.width() !== undefined ||
-                this.widthPx() !== undefined ||
-                this.widthEm() !== undefined) {
-                this._elRef.nativeElement.style.display = "inline-block";
-            }
-            else if (this.height() !== undefined || this.heightPx() !== undefined) {
-                this._elRef.nativeElement.style.display = "block";
-            }
-            else {
-                this._elRef.nativeElement.style.display = "";
-            }
-        });
-    }
+    _displayStyle = computed(() => {
+        if (this.widthPx() === 0 || this.heightPx() === 0 || this.widthEm() === 0) {
+            return "none";
+        }
+        else if (this.width() !== undefined ||
+            this.widthPx() !== undefined ||
+            this.widthEm() !== undefined) {
+            return "inline-block";
+        }
+        else if (this.height() !== undefined || this.heightPx() !== undefined) {
+            return "block";
+        }
+        else {
+            return undefined;
+        }
+    }, ...(ngDevMode ? [{ debugName: "_displayStyle" }] : /* istanbul ignore next */ []));
     static ɵfac = function SdGapControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdGapControl)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdGapControl, selectors: [["sd-gap"]], hostVars: 8, hostBindings: function SdGapControl_HostBindings(rf, ctx) { if (rf & 2) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdGapControl, selectors: [["sd-gap"]], hostVars: 10, hostBindings: function SdGapControl_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-sd-height", ctx.height())("data-sd-width", ctx.width());
-            i0.ɵɵstyleProp("height", ctx.heightPx(), "px")("width", ctx.widthPx(), "px")("width", ctx.widthEm(), "em");
+            i0.ɵɵstyleProp("height", ctx.heightPx(), "px")("width", ctx.widthPx(), "px")("width", ctx.widthEm(), "em")("display", ctx._displayStyle());
         } }, inputs: { height: [1, "height"], heightPx: [1, "heightPx"], width: [1, "width"], widthPx: [1, "widthPx"], widthEm: [1, "widthEm"] }, decls: 0, vars: 0, template: function SdGapControl_Template(rf, ctx) { }, styles: ["sd-gap[data-sd-height=xxs] {\n  height: var(--gap-xxs);\n}\nsd-gap[data-sd-width=xxs] {\n  width: var(--gap-xxs);\n}\nsd-gap[data-sd-height=xs] {\n  height: var(--gap-xs);\n}\nsd-gap[data-sd-width=xs] {\n  width: var(--gap-xs);\n}\nsd-gap[data-sd-height=sm] {\n  height: var(--gap-sm);\n}\nsd-gap[data-sd-width=sm] {\n  width: var(--gap-sm);\n}\nsd-gap[data-sd-height=default] {\n  height: var(--gap-default);\n}\nsd-gap[data-sd-width=default] {\n  width: var(--gap-default);\n}\nsd-gap[data-sd-height=lg] {\n  height: var(--gap-lg);\n}\nsd-gap[data-sd-width=lg] {\n  width: var(--gap-lg);\n}\nsd-gap[data-sd-height=xl] {\n  height: var(--gap-xl);\n}\nsd-gap[data-sd-width=xl] {\n  width: var(--gap-xl);\n}\nsd-gap[data-sd-height=xxl] {\n  height: var(--gap-xxl);\n}\nsd-gap[data-sd-width=xxl] {\n  width: var(--gap-xxl);\n}\nsd-gap[data-sd-height=\"0\"] {\n  height: var(--gap-0);\n}\nsd-gap[data-sd-width=\"0\"] {\n  width: var(--gap-0);\n}\nsd-gap[data-sd-height=auto] {\n  height: var(--gap-auto);\n}\nsd-gap[data-sd-width=auto] {\n  width: var(--gap-auto);\n}"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdGapControl, [{
         type: Component,
-        args: [{ selector: "sd-gap", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: "", host: {
+        args: [{ selector: "sd-gap", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [], template: "", host: {
                     "[attr.data-sd-height]": "height()",
                     "[style.height.px]": "heightPx()",
                     "[attr.data-sd-width]": "width()",
                     "[style.width.px]": "widthPx()",
                     "[style.width.em]": "widthEm()",
+                    "[style.display]": "_displayStyle()",
                 }, styles: ["sd-gap[data-sd-height=xxs] {\n  height: var(--gap-xxs);\n}\nsd-gap[data-sd-width=xxs] {\n  width: var(--gap-xxs);\n}\nsd-gap[data-sd-height=xs] {\n  height: var(--gap-xs);\n}\nsd-gap[data-sd-width=xs] {\n  width: var(--gap-xs);\n}\nsd-gap[data-sd-height=sm] {\n  height: var(--gap-sm);\n}\nsd-gap[data-sd-width=sm] {\n  width: var(--gap-sm);\n}\nsd-gap[data-sd-height=default] {\n  height: var(--gap-default);\n}\nsd-gap[data-sd-width=default] {\n  width: var(--gap-default);\n}\nsd-gap[data-sd-height=lg] {\n  height: var(--gap-lg);\n}\nsd-gap[data-sd-width=lg] {\n  width: var(--gap-lg);\n}\nsd-gap[data-sd-height=xl] {\n  height: var(--gap-xl);\n}\nsd-gap[data-sd-width=xl] {\n  width: var(--gap-xl);\n}\nsd-gap[data-sd-height=xxl] {\n  height: var(--gap-xxl);\n}\nsd-gap[data-sd-width=xxl] {\n  width: var(--gap-xxl);\n}\nsd-gap[data-sd-height=\"0\"] {\n  height: var(--gap-0);\n}\nsd-gap[data-sd-width=\"0\"] {\n  width: var(--gap-0);\n}\nsd-gap[data-sd-height=auto] {\n  height: var(--gap-auto);\n}\nsd-gap[data-sd-width=auto] {\n  width: var(--gap-auto);\n}"] }]
-    }], () => [], { height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], heightPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightPx", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], widthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "widthPx", required: false }] }], widthEm: [{ type: i0.Input, args: [{ isSignal: true, alias: "widthEm", required: false }] }] }); })();
+    }], null, { height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], heightPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightPx", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], widthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "widthPx", required: false }] }], widthEm: [{ type: i0.Input, args: [{ isSignal: true, alias: "widthEm", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdGapControl, { className: "SdGapControl", filePath: "packages/angular/src/ui/layout/sd-gap.control.ts", lineNumber: 37, forbidOrphanRendering: true }); })();

package/dist/ui/overlay/modal/sd-confirm-modal.control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-confirm-modal.control.d.ts","sourceRoot":"","sources":["../../../../src/ui/overlay/modal/sd-confirm-modal.control.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;;AAGpD;;;;GAIG;AACH,qBAoCa,qBAAsB,YAAW,QAAQ,CAAC,OAAO,CAAC;IAC7D,WAAW,kDAAgB;IAC3B,KAAK,gEAAiC;IAEtC,OAAO,8CAA4B;IAEnC,SAAS,IAAI,IAAI;IAIjB,QAAQ,IAAI,IAAI;yCAVL,qBAAqB;2CAArB,qBAAqB;CAajC"}
+{"version":3,"file":"sd-confirm-modal.control.d.ts","sourceRoot":"","sources":["../../../../src/ui/overlay/modal/sd-confirm-modal.control.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;;AAGpD;;;;GAIG;AACH,qBAkBa,qBAAsB,YAAW,QAAQ,CAAC,OAAO,CAAC;IAC7D,WAAW,kDAAgB;IAC3B,KAAK,gEAAiC;IAEtC,OAAO,8CAA4B;IAEnC,SAAS,IAAI,IAAI;IAIjB,QAAQ,IAAI,IAAI;yCAVL,qBAAqB;2CAArB,qBAAqB;CAajC"}

package/dist/ui/overlay/modal/sd-confirm-modal.control.js

@@ -17,35 +17,41 @@ export class SdConfirmModalControl {
         this.close.emit(undefined);
     }
     static ɵfac = function SdConfirmModalControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdConfirmModalControl)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdConfirmModalControl, selectors: [["sd-confirm-modal"]], inputs: { message: [1, "message"] }, outputs: { close: "close" }, decls: 8, vars: 2, consts: [[1, "_sd-confirm-modal"], [1, "_message"], [1, "_actions"], [3, "click", "theme"], [3, "click"]], template: function SdConfirmModalControl_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "p", 1);
-            i0.ɵɵtext(2);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdConfirmModalControl, selectors: [["sd-confirm-modal"]], hostAttrs: [1, "p-default", 2, "display", "block"], inputs: { message: [1, "message"] }, outputs: { close: "close" }, decls: 6, vars: 2, consts: [[1, "mb-default", 3, "innerHTML"], [1, "flex-row", "main-align-end", "gap-sm"], [3, "click", "theme"], [3, "click"]], template: function SdConfirmModalControl_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelement(0, "p", 0);
+            i0.ɵɵelementStart(1, "div", 1)(2, "sd-button", 2);
+            i0.ɵɵlistener("click", function SdConfirmModalControl_Template_sd_button_click_2_listener() { return ctx.onConfirm(); });
+            i0.ɵɵtext(3, "\uD655\uC778");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "div", 2)(4, "sd-button", 3);
-            i0.ɵɵlistener("click", function SdConfirmModalControl_Template_sd_button_click_4_listener() { return ctx.onConfirm(); });
-            i0.ɵɵtext(5, "\uD655\uC778");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "sd-button", 4);
-            i0.ɵɵlistener("click", function SdConfirmModalControl_Template_sd_button_click_6_listener() { return ctx.onCancel(); });
-            i0.ɵɵtext(7, "\uCDE8\uC18C");
-            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(4, "sd-button", 3);
+            i0.ɵɵlistener("click", function SdConfirmModalControl_Template_sd_button_click_4_listener() { return ctx.onCancel(); });
+            i0.ɵɵtext(5, "\uCDE8\uC18C");
+            i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(ctx.message());
+            i0.ɵɵproperty("innerHTML", ctx.message(), i0.ɵɵsanitizeHtml);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("theme", "primary");
-        } }, dependencies: [SdButtonControl], styles: ["sd-confirm-modal {\n  display: block;\n  padding: var(--gap-default);\n}\nsd-confirm-modal > ._sd-confirm-modal > ._message {\n  margin-bottom: var(--gap-default);\n}\nsd-confirm-modal > ._sd-confirm-modal > ._actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--gap-sm);\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [SdButtonControl], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdConfirmModalControl, [{
         type: Component,
-        args: [{ selector: "sd-confirm-modal", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdButtonControl], template: `
-    <div class="_sd-confirm-modal">
-      <p class="_message">{{ message() }}</p>
-      <div class="_actions">
-        <sd-button [theme]="'primary'" (click)="onConfirm()">확인</sd-button>
-        <sd-button (click)="onCancel()">취소</sd-button>
-      </div>
+        args: [{
+                selector: "sd-confirm-modal",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                standalone: true,
+                imports: [SdButtonControl],
+                host: {
+                    style: "display: block",
+                    class: "p-default",
+                },
+                template: `
+    <p class="mb-default" [innerHTML]="message()"></p>
+    <div class="flex-row main-align-end gap-sm">
+      <sd-button [theme]="'primary'" (click)="onConfirm()">확인</sd-button>
+      <sd-button (click)="onCancel()">취소</sd-button>
     </div>
-  `, styles: ["sd-confirm-modal {\n  display: block;\n  padding: var(--gap-default);\n}\nsd-confirm-modal > ._sd-confirm-modal > ._message {\n  margin-bottom: var(--gap-default);\n}\nsd-confirm-modal > ._sd-confirm-modal > ._actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--gap-sm);\n}"] }]
+  `,
+            }]
     }], null, { close: [{ type: i0.Output, args: ["close"] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdConfirmModalControl, { className: "SdConfirmModalControl", filePath: "packages/angular/src/ui/overlay/modal/sd-confirm-modal.control.ts", lineNumber: 53, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdConfirmModalControl, { className: "SdConfirmModalControl", filePath: "packages/angular/src/ui/overlay/modal/sd-confirm-modal.control.ts", lineNumber: 35, forbidOrphanRendering: true }); })();

package/dist/ui/overlay/modal/sd-prompt-modal.control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-prompt-modal.control.d.ts","sourceRoot":"","sources":["../../../../src/ui/overlay/modal/sd-prompt-modal.control.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;;AAGpD;;;;GAIG;AACH,qBAoDa,oBAAqB,YAAW,QAAQ,CAAC,MAAM,CAAC;IAC3D,WAAW,kDAAgB;IAC3B,KAAK,+DAAgC;IAErC,OAAO,8CAA4B;IAEnC,WAAW,iDAAc;IAEzB,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAKjC,SAAS,IAAI,IAAI;IAOjB,QAAQ,IAAI,IAAI;yCApBL,oBAAoB;2CAApB,oBAAoB;CAuBhC"}
+{"version":3,"file":"sd-prompt-modal.control.d.ts","sourceRoot":"","sources":["../../../../src/ui/overlay/modal/sd-prompt-modal.control.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;;AAIpD;;;;GAIG;AACH,qBAyBa,oBAAqB,YAAW,QAAQ,CAAC,MAAM,CAAC;IAC3D,WAAW,kDAAgB;IAC3B,KAAK,+DAAgC;IAErC,OAAO,8CAA4B;IAEnC,WAAW,iDAAc;IAEzB,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAKjC,SAAS,IAAI,IAAI;IAOjB,QAAQ,IAAI,IAAI;yCApBL,oBAAoB;2CAApB,oBAAoB;CAuBhC"}

package/dist/ui/overlay/modal/sd-prompt-modal.control.js

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, input, output, signal, ViewEncapsulation, } from "@angular/core";
 import { SdButtonControl } from "../../form/button/sd-button.control";
+import { SdTextfieldControl } from "../../form/input/sd-textfield.control";
 import * as i0 from "@angular/core";
 /**
  * 범용 프롬프트 모달.
@@ -25,47 +26,53 @@ export class SdPromptModalControl {
         this.close.emit(undefined);
     }
     static ɵfac = function SdPromptModalControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdPromptModalControl)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdPromptModalControl, selectors: [["sd-prompt-modal"]], inputs: { message: [1, "message"] }, outputs: { close: "close" }, decls: 9, vars: 3, consts: [[1, "_sd-prompt-modal"], [1, "_message"], ["type", "text", 1, "_input", 3, "input", "keydown.enter", "value"], [1, "_actions"], [3, "click", "theme"], [3, "click"]], template: function SdPromptModalControl_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "p", 1);
-            i0.ɵɵtext(2);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdPromptModalControl, selectors: [["sd-prompt-modal"]], hostAttrs: [1, "p-default", 2, "display", "block"], inputs: { message: [1, "message"] }, outputs: { close: "close" }, decls: 7, vars: 4, consts: [[1, "mb-default", 3, "innerHTML"], [1, "mb-default", 3, "input", "keydown.enter", "type", "value"], [1, "flex-row", "main-align-end", "gap-sm"], [3, "click", "theme"], [3, "click"]], template: function SdPromptModalControl_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelement(0, "p", 0);
+            i0.ɵɵelementStart(1, "sd-textfield", 1);
+            i0.ɵɵlistener("input", function SdPromptModalControl_Template_sd_textfield_input_1_listener($event) { return ctx.onInputChange($event); })("keydown.enter", function SdPromptModalControl_Template_sd_textfield_keydown_enter_1_listener() { return ctx.onConfirm(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "input", 2);
-            i0.ɵɵlistener("input", function SdPromptModalControl_Template_input_input_3_listener($event) { return ctx.onInputChange($event); })("keydown.enter", function SdPromptModalControl_Template_input_keydown_enter_3_listener() { return ctx.onConfirm(); });
+            i0.ɵɵelementStart(2, "div", 2)(3, "sd-button", 3);
+            i0.ɵɵlistener("click", function SdPromptModalControl_Template_sd_button_click_3_listener() { return ctx.onConfirm(); });
+            i0.ɵɵtext(4, "\uD655\uC778");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "div", 3)(5, "sd-button", 4);
-            i0.ɵɵlistener("click", function SdPromptModalControl_Template_sd_button_click_5_listener() { return ctx.onConfirm(); });
-            i0.ɵɵtext(6, "\uD655\uC778");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(7, "sd-button", 5);
-            i0.ɵɵlistener("click", function SdPromptModalControl_Template_sd_button_click_7_listener() { return ctx.onCancel(); });
-            i0.ɵɵtext(8, "\uCDE8\uC18C");
-            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(5, "sd-button", 4);
+            i0.ɵɵlistener("click", function SdPromptModalControl_Template_sd_button_click_5_listener() { return ctx.onCancel(); });
+            i0.ɵɵtext(6, "\uCDE8\uC18C");
+            i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(ctx.message());
+            i0.ɵɵproperty("innerHTML", ctx.message(), i0.ɵɵsanitizeHtml);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("value", ctx._inputValue());
+            i0.ɵɵproperty("type", "text")("value", ctx._inputValue());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("theme", "primary");
-        } }, dependencies: [SdButtonControl], styles: ["sd-prompt-modal {\n  display: block;\n  padding: var(--gap-default);\n}\nsd-prompt-modal > ._sd-prompt-modal > ._message {\n  margin-bottom: var(--gap-default);\n}\nsd-prompt-modal > ._sd-prompt-modal > ._input {\n  display: block;\n  width: 100%;\n  padding: var(--gap-sm) var(--gap-default);\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  margin-bottom: var(--gap-default);\n}\nsd-prompt-modal > ._sd-prompt-modal > ._actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--gap-sm);\n}"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [SdButtonControl, SdTextfieldControl], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdPromptModalControl, [{
         type: Component,
-        args: [{ selector: "sd-prompt-modal", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdButtonControl], template: `
-    <div class="_sd-prompt-modal">
-      <p class="_message">{{ message() }}</p>
-      <input
-        class="_input"
-        type="text"
-        [value]="_inputValue()"
-        (input)="onInputChange($event)"
-        (keydown.enter)="onConfirm()"
-      />
-      <div class="_actions">
-        <sd-button [theme]="'primary'" (click)="onConfirm()">확인</sd-button>
-        <sd-button (click)="onCancel()">취소</sd-button>
-      </div>
+        args: [{
+                selector: "sd-prompt-modal",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                standalone: true,
+                imports: [SdButtonControl, SdTextfieldControl],
+                host: {
+                    style: "display: block",
+                    class: "p-default",
+                },
+                template: `
+    <p class="mb-default" [innerHTML]="message()"></p>
+    <sd-textfield
+      [type]="'text'"
+      [value]="_inputValue()"
+      (input)="onInputChange($event)"
+      (keydown.enter)="onConfirm()"
+      class="mb-default"
+    />
+    <div class="flex-row main-align-end gap-sm">
+      <sd-button [theme]="'primary'" (click)="onConfirm()">확인</sd-button>
+      <sd-button (click)="onCancel()">취소</sd-button>
     </div>
-  `, styles: ["sd-prompt-modal {\n  display: block;\n  padding: var(--gap-default);\n}\nsd-prompt-modal > ._sd-prompt-modal > ._message {\n  margin-bottom: var(--gap-default);\n}\nsd-prompt-modal > ._sd-prompt-modal > ._input {\n  display: block;\n  width: 100%;\n  padding: var(--gap-sm) var(--gap-default);\n  border: 1px solid var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  margin-bottom: var(--gap-default);\n}\nsd-prompt-modal > ._sd-prompt-modal > ._actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--gap-sm);\n}"] }]
+  `,
+            }]
     }], null, { close: [{ type: i0.Output, args: ["close"] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdPromptModalControl, { className: "SdPromptModalControl", filePath: "packages/angular/src/ui/overlay/modal/sd-prompt-modal.control.ts", lineNumber: 69, forbidOrphanRendering: true }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdPromptModalControl, { className: "SdPromptModalControl", filePath: "packages/angular/src/ui/overlay/modal/sd-prompt-modal.control.ts", lineNumber: 43, forbidOrphanRendering: true }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/angular",
-  "version": "14.0.21",
+  "version": "14.0.22",
   "description": "심플리즘 패키지 - Angular",
   "author": "심플리즘",
   "license": "Apache-2.0",
@@ -50,10 +50,10 @@
     "jspdf": "^4.2.1",
     "rxjs": "^7.8.2",
     "tabbable": "^6.4.0",
-    "@simplysm/core-browser": "14.0.21",
-    "@simplysm/core-common": "14.0.21",
-    "@simplysm/service-client": "14.0.21",
-    "@simplysm/service-common": "14.0.21"
+    "@simplysm/core-browser": "14.0.22",
+    "@simplysm/service-common": "14.0.22",
+    "@simplysm/service-client": "14.0.22",
+    "@simplysm/core-common": "14.0.22"
   },
   "devDependencies": {
     "@angular/compiler": "^21.2.7",

package/src/features/data-view/useDataSheetFilterManager.ts

@@ -1,4 +1,4 @@
-import { type Signal, type WritableSignal, effect, signal } from "@angular/core";
+import { type Signal, type WritableSignal, linkedSignal } from "@angular/core";
 import { obj } from "@simplysm/core-common";
 
 export function useDataSheetFilterManager<TFilter extends Record<string, any>>(options: {
@@ -8,13 +8,13 @@ export function useDataSheetFilterManager<TFilter extends Record<string, any>>(o
   page: WritableSignal<number>;
   checkIgnoreChanges: () => boolean;
 }) {
-  const filter = signal<TFilter>({} as TFilter);
-  const lastFilter = signal<TFilter>({} as TFilter);
-
-  effect(() => {
-    const f = options.bindFilter();
-    filter.set(f);
-    lastFilter.set(obj.clone(f));
+  const filter = linkedSignal<TFilter, TFilter>({
+    source: options.bindFilter,
+    computation: (f) => f,
+  });
+  const lastFilter = linkedSignal<TFilter, TFilter>({
+    source: options.bindFilter,
+    computation: (f) => obj.clone(f),
   });
 
   function doFilterSubmit(): void {

package/src/ui/data/sheet/sd-sheet-config.modal.ts

@@ -3,6 +3,7 @@ import {
   Component,
   computed,
   input,
+  linkedSignal,
   output,
   signal,
   ViewEncapsulation,
@@ -28,7 +29,6 @@ interface IConfigItem {
   selector: "sd-sheet-config-modal",
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  standalone: true,
   imports: [SdButtonControl, SdCheckboxControl, NgIcon],
   template: `
     <div class="_sd-sheet-config-modal">
@@ -168,29 +168,25 @@ export class SdSheetConfigModal implements ISdModal<ISdSheetConfig | undefined>
       .sort((a, b) => a.ordering - b.ordering);
   });
 
-  private readonly _editItems = signal<IConfigItem[] | undefined>(undefined);
-
-  _items = computed((): IConfigItem[] => {
-    return this._editItems() ?? this._initialItems();
-  });
+  _items = linkedSignal<IConfigItem[]>(() => this._initialItems());
 
   onFixedToggle(idx: number): void {
     const items = [...this._items()];
     items[idx] = { ...items[idx], fixed: !items[idx].fixed };
-    this._editItems.set(items);
+    this._items.set(items);
   }
 
   onHiddenToggle(idx: number): void {
     const items = [...this._items()];
     items[idx] = { ...items[idx], hidden: !items[idx].hidden };
-    this._editItems.set(items);
+    this._items.set(items);
   }
 
   onWidthChange(idx: number, event: Event): void {
     const inputEl = event.target as HTMLInputElement;
     const items = [...this._items()];
     items[idx] = { ...items[idx], width: inputEl.value };
-    this._editItems.set(items);
+    this._items.set(items);
   }
 
   canMoveUp(idx: number): boolean {
@@ -217,14 +213,14 @@ export class SdSheetConfigModal implements ISdModal<ISdSheetConfig | undefined>
     if (!this.canMoveUp(idx)) return;
     const items = [...this._items()];
     [items[idx - 1], items[idx]] = [items[idx], items[idx - 1]];
-    this._editItems.set(items);
+    this._items.set(items);
   }
 
   onMoveDown(idx: number): void {
     if (!this.canMoveDown(idx)) return;
     const items = [...this._items()];
     [items[idx], items[idx + 1]] = [items[idx + 1], items[idx]];
-    this._editItems.set(items);
+    this._items.set(items);
   }
 
   onOk(): void {

package/src/ui/form/select/sd-select.control.ts

@@ -2,6 +2,7 @@ import {
   booleanAttribute,
   ChangeDetectionStrategy,
   Component,
+  computed,
   contentChild,
   contentChildren,
   effect,
@@ -215,7 +216,26 @@ export class SdSelectControl<M extends "single" | "multi", T> {
 
   _selectedItemContentHTML = signal<string | undefined>(undefined);
 
-  _flatItems = signal<{ data: T; index: number; depth: number }[]>([]);
+  _flatItems = computed(() => {
+    const items = this.items();
+    if (items == null) return [];
+    const getChildren = this.getChildrenFn();
+    const flat: { data: T; index: number; depth: number }[] = [];
+    let index = 0;
+    const walk = (list: T[], depth: number) => {
+      for (const item of list) {
+        flat.push({ data: item, index: index++, depth });
+        if (getChildren !== undefined) {
+          const children = getChildren(item);
+          if (children !== undefined) {
+            walk(children, depth + 1);
+          }
+        }
+      }
+    };
+    walk(items, 0);
+    return flat;
+  });
 
   constructor() {
     // Required validation
@@ -227,31 +247,6 @@ export class SdSelectControl<M extends "single" | "multi", T> {
       return "";
     });
 
-    // Flatten items array (with hierarchy support)
-    effect(() => {
-      const items = this.items();
-      if (items == null) {
-        this._flatItems.set([]);
-        return;
-      }
-      const getChildren = this.getChildrenFn();
-      const flat: { data: T; index: number; depth: number }[] = [];
-      let index = 0;
-      const walk = (list: T[], depth: number) => {
-        for (const item of list) {
-          flat.push({ data: item, index: index++, depth });
-          if (getChildren !== undefined) {
-            const children = getChildren(item);
-            if (children !== undefined) {
-              walk(children, depth + 1);
-            }
-          }
-        }
-      };
-      walk(items, 0);
-      this._flatItems.set(flat);
-    });
-
     // D3: contentClass/contentStyle via effect() on popup element
     // + D4: keyboard navigation via tabbable()
     effect((onCleanup) => {

package/src/ui/layout/sd-gap.control.ts

@@ -1,10 +1,9 @@
-import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, input, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from "@angular/core";
 
 @Component({
   selector: "sd-gap",
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  standalone: true,
   imports: [],
   styles: [
     /* language=SCSS */ `
@@ -32,32 +31,29 @@ import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, input,
     "[attr.data-sd-width]": "width()",
     "[style.width.px]": "widthPx()",
     "[style.width.em]": "widthEm()",
+    "[style.display]": "_displayStyle()",
   },
 })
 export class SdGapControl {
-  private readonly _elRef = inject(ElementRef<HTMLElement>);
-
   height = input<"xxs" | "xs" | "sm" | "default" | "lg" | "xl" | "xxl">();
   heightPx = input<number>();
   width = input<"xxs" | "xs" | "sm" | "default" | "lg" | "xl" | "xxl">();
   widthPx = input<number>();
   widthEm = input<number>();
 
-  constructor() {
-    effect(() => {
-      if (this.widthPx() === 0 || this.heightPx() === 0 || this.widthEm() === 0) {
-        this._elRef.nativeElement.style.display = "none";
-      } else if (
-        this.width() !== undefined ||
-        this.widthPx() !== undefined ||
-        this.widthEm() !== undefined
-      ) {
-        this._elRef.nativeElement.style.display = "inline-block";
-      } else if (this.height() !== undefined || this.heightPx() !== undefined) {
-        this._elRef.nativeElement.style.display = "block";
-      } else {
-        this._elRef.nativeElement.style.display = "";
-      }
-    });
-  }
+  _displayStyle = computed(() => {
+    if (this.widthPx() === 0 || this.heightPx() === 0 || this.widthEm() === 0) {
+      return "none";
+    } else if (
+      this.width() !== undefined ||
+      this.widthPx() !== undefined ||
+      this.widthEm() !== undefined
+    ) {
+      return "inline-block";
+    } else if (this.height() !== undefined || this.heightPx() !== undefined) {
+      return "block";
+    } else {
+      return undefined;
+    }
+  });
 }

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

@@ -20,35 +20,17 @@ import { SdButtonControl } from "../../form/button/sd-button.control";
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [SdButtonControl],
+  host: {
+    style: "display: block",
+    class: "p-default",
+  },
   template: `
-    <div class="_sd-confirm-modal">
-      <p class="_message">{{ message() }}</p>
-      <div class="_actions">
-        <sd-button [theme]="'primary'" (click)="onConfirm()">확인</sd-button>
-        <sd-button (click)="onCancel()">취소</sd-button>
-      </div>
+    <p class="mb-default" [innerHTML]="message()"></p>
+    <div class="flex-row main-align-end gap-sm">
+      <sd-button [theme]="'primary'" (click)="onConfirm()">확인</sd-button>
+      <sd-button (click)="onCancel()">취소</sd-button>
     </div>
   `,
-  styles: [
-    /* language=SCSS */ `
-      sd-confirm-modal {
-        display: block;
-        padding: var(--gap-default);
-
-        > ._sd-confirm-modal {
-          > ._message {
-            margin-bottom: var(--gap-default);
-          }
-
-          > ._actions {
-            display: flex;
-            justify-content: flex-end;
-            gap: var(--gap-sm);
-          }
-        }
-      }
-    `,
-  ],
 })
 export class SdConfirmModalControl implements ISdModal<boolean> {
   initialized = signal(true);

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

@@ -8,6 +8,7 @@ import {
 } from "@angular/core";
 import type { ISdModal } from "./sd-modal.provider";
 import { SdButtonControl } from "../../form/button/sd-button.control";
+import { SdTextfieldControl } from "../../form/input/sd-textfield.control";
 
 /**
  * 범용 프롬프트 모달.
@@ -19,52 +20,25 @@ import { SdButtonControl } from "../../form/button/sd-button.control";
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [SdButtonControl],
+  imports: [SdButtonControl, SdTextfieldControl],
+  host: {
+    style: "display: block",
+    class: "p-default",
+  },
   template: `
-    <div class="_sd-prompt-modal">
-      <p class="_message">{{ message() }}</p>
-      <input
-        class="_input"
-        type="text"
-        [value]="_inputValue()"
-        (input)="onInputChange($event)"
-        (keydown.enter)="onConfirm()"
-      />
-      <div class="_actions">
-        <sd-button [theme]="'primary'" (click)="onConfirm()">확인</sd-button>
-        <sd-button (click)="onCancel()">취소</sd-button>
-      </div>
+    <p class="mb-default" [innerHTML]="message()"></p>
+    <sd-textfield
+      [type]="'text'"
+      [value]="_inputValue()"
+      (input)="onInputChange($event)"
+      (keydown.enter)="onConfirm()"
+      class="mb-default"
+    />
+    <div class="flex-row main-align-end gap-sm">
+      <sd-button [theme]="'primary'" (click)="onConfirm()">확인</sd-button>
+      <sd-button (click)="onCancel()">취소</sd-button>
     </div>
   `,
-  styles: [
-    /* language=SCSS */ `
-      sd-prompt-modal {
-        display: block;
-        padding: var(--gap-default);
-
-        > ._sd-prompt-modal {
-          > ._message {
-            margin-bottom: var(--gap-default);
-          }
-
-          > ._input {
-            display: block;
-            width: 100%;
-            padding: var(--gap-sm) var(--gap-default);
-            border: 1px solid var(--trans-lighter);
-            border-radius: var(--border-radius-default);
-            margin-bottom: var(--gap-default);
-          }
-
-          > ._actions {
-            display: flex;
-            justify-content: flex-end;
-            gap: var(--gap-sm);
-          }
-        }
-      }
-    `,
-  ],
 })
 export class SdPromptModalControl implements ISdModal<string> {
   initialized = signal(true);