@simplysm/angular 14.0.26 → 14.0.28

package/src/ui/data/sheet/{sd-sheet.control.ts → sd-sheet.ts}

@@ -11,8 +11,8 @@ import {
   ViewEncapsulation,
 } from "@angular/core";
 import { NgTemplateOutlet } from "@angular/common";
-import { SdSheetColumnDirective } from "./sd-sheet-column.directive";
-import { SdCheckboxControl } from "../../form/checkbox/sd-checkbox.control";
+import { SdSheetColumn } from "./sd-sheet-column";
+import { SdCheckbox } from "../../form/checkbox/sd-checkbox";
 import { NgIcon } from "@ng-icons/core";
 import {
   tablerArrowUp,
@@ -26,20 +26,20 @@ import {
 import { useSheetLayoutEngine } from "./useSheetLayoutEngine";
 import { useSheetColumnFixing } from "./useSheetColumnFixing";
 import { useSelectionManager } from "../../../core/utils/useSelectionManager";
-import { useSortingManager, type ISortingDef } from "../../../core/utils/useSortingManager";
-import { SdPaginationControl } from "../../navigation/pagination/sd-pagination.control";
-import { SdAnchorControl } from "../../form/button/sd-anchor.control";
-import { SdButtonControl } from "../../form/button/sd-button.control";
+import { useSortingManager, type SortingDef } from "../../../core/utils/useSortingManager";
+import { SdPagination } from "../../navigation/pagination/sd-pagination";
+import { SdAnchor } from "../../form/button/sd-anchor";
+import { SdButton } from "../../form/button/sd-button";
 import type {
-  ISdSheetCellKeydownEventParam,
-  ISdSheetConfig,
-  ISdSheetHeaderDef,
-  ISdSheetItemKeydownEventParam,
+  SdSheetCellKeydownEventParam,
+  SdSheetConfig,
+  SdSheetHeaderDef,
+  SdSheetItemKeydownEventParam,
 } from "./types";
-import { useSdSystemConfigResource } from "../../../core/utils/useSdSystemConfigResource";
-import { useSheetDomAccessor } from "./useSheetDomAccessor";
+import { injectSdSystemConfigResource } from "../../../core/utils/injectSdSystemConfigResource";
+import { injectSheetDomAccessor } from "./injectSheetDomAccessor";
 import { useSheetCellAgent } from "./useSheetCellAgent";
-import { useSheetColumnResizing } from "./useSheetColumnResizing";
+import { injectSheetColumnResizing } from "./injectSheetColumnResizing";
 import { useSheetDisplayPipeline } from "./useSheetDisplayPipeline";
 import { useSheetCellStyling } from "./useSheetCellStyling";
 import { SdModalProvider } from "../../overlay/modal/sd-modal.provider";
@@ -50,7 +50,7 @@ import { SdSheetConfigModal } from "./sd-sheet-config.modal";
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [NgTemplateOutlet, SdCheckboxControl, NgIcon, SdPaginationControl, SdAnchorControl, SdButtonControl],
+  imports: [NgTemplateOutlet, SdCheckbox, NgIcon, SdPagination, SdAnchor, SdButton],
   template: `
     @if ((key() || effectivePageCount() > 1) && !hideConfigBar()) {
       <div class="_tool">
@@ -334,7 +334,7 @@ import { SdSheetConfigModal } from "./sd-sheet-config.modal";
     "(blur.capture)": "onBlurCapture($event)",
   },
 })
-export class SdSheetControl<T> {
+export class SdSheet<T> {
   // Inputs
   key = input<string>();
   items = input<T[]>([]);
@@ -355,32 +355,32 @@ export class SdSheetControl<T> {
   hideConfigBar = input(false, { transform: booleanAttribute });
 
   // Outputs
-  itemKeydown = output<ISdSheetItemKeydownEventParam<T>>();
-  cellKeydown = output<ISdSheetCellKeydownEventParam<T>>();
+  itemKeydown = output<SdSheetItemKeydownEventParam<T>>();
+  cellKeydown = output<SdSheetCellKeydownEventParam<T>>();
 
   // Models
   selectedItems = model<T[]>([]);
   expandedItems = model<T[]>([]);
-  sorts = model<ISortingDef[]>([]); // Re-exported from useSortingManager
+  sorts = model<SortingDef[]>([]); // Re-exported from useSortingManager
   currentPage = model(0);
 
   // Content query
-  columnControls = contentChildren(SdSheetColumnDirective);
+  columnControls = contentChildren(SdSheetColumn);
 
   // Injected providers
   private readonly _modalProvider = inject(SdModalProvider);
 
   // DOM accessor & cell agent
-  domAccessor = useSheetDomAccessor();
+  domAccessor = injectSheetDomAccessor();
   cellAgent = useSheetCellAgent({ domAccessor: this.domAccessor });
 
   // Config resource
-  private readonly _configResource = useSdSystemConfigResource<ISdSheetConfig>({
+  private readonly _configResource = injectSdSystemConfigResource<SdSheetConfig>({
     key: this.key,
   });
 
   // Resizing composable
-  private readonly _resizing = useSheetColumnResizing({
+  private readonly _resizing = injectSheetColumnResizing({
     domAccessor: this.domAccessor,
     configResource: this._configResource,
   });
@@ -456,7 +456,7 @@ export class SdSheetControl<T> {
   };
 
   private readonly _columnControlMap = computed(() => {
-    const map = new Map<string, SdSheetColumnDirective>();
+    const map = new Map<string, SdSheetColumn>();
     for (const col of this.columnControls()) {
       map.set(col.key(), col);
     }
@@ -502,7 +502,7 @@ export class SdSheetControl<T> {
     }
   }
 
-  onHeaderClick(event: MouseEvent, cell: ISdSheetHeaderDef): void {
+  onHeaderClick(event: MouseEvent, cell: SdSheetHeaderDef): void {
     if (event.timeStamp - this._resizing.lastResizeEndTimeStamp() < 50) return;
     if (cell.colDef == null) return;
     if (cell.colDef.disableSorting) return;
@@ -536,7 +536,7 @@ export class SdSheetControl<T> {
     this.expanding.toggle(item);
   }
 
-  getAriaSortValue(cell: ISdSheetHeaderDef): string | null {
+  getAriaSortValue(cell: SdSheetHeaderDef): string | null {
     if (cell.colDef == null) return null;
     const sortDef = this.sorting.defMap().get(cell.colDef.key);
     if (sortDef == null) return null;
@@ -581,5 +581,5 @@ export class SdSheetControl<T> {
 
 }
 
-// Re-export ISortingDef from useSortingManager for convenience
-export type { ISortingDef } from "../../../core/utils/useSortingManager";
+// Re-export SortingDef from useSortingManager for convenience
+export type { SortingDef } from "../../../core/utils/useSortingManager";

package/src/ui/data/sheet/types.ts

@@ -1,4 +1,4 @@
-export interface ISdSheetColumnDef {
+export interface SdSheetColumnDef {
   key: string;
   header: string | string[];
   width: string | undefined;
@@ -10,15 +10,15 @@ export interface ISdSheetColumnDef {
   ordering: number;
 }
 
-export interface ISdSheetHeaderDef {
+export interface SdSheetHeaderDef {
   text: string;
   colspan: number;
   rowspan: number;
   isLastRow: boolean;
-  colDef: ISdSheetColumnDef | undefined;
+  colDef: SdSheetColumnDef | undefined;
 }
 
-export interface ISdSheetConfig {
+export interface SdSheetConfig {
   columnRecord: Record<
     string,
     {
@@ -30,12 +30,12 @@ export interface ISdSheetConfig {
   >;
 }
 
-export interface ISdSheetItemKeydownEventParam<T> {
+export interface SdSheetItemKeydownEventParam<T> {
   item: T;
   event: KeyboardEvent;
 }
 
-export interface ISdSheetCellKeydownEventParam<T> {
+export interface SdSheetCellKeydownEventParam<T> {
   item: T;
   key: string;
   event: KeyboardEvent;

package/src/ui/data/sheet/useSheetCellAgent.ts

@@ -1,8 +1,8 @@
 import { signal } from "@angular/core";
-import type { useSheetDomAccessor } from "./useSheetDomAccessor";
+import type { injectSheetDomAccessor } from "./injectSheetDomAccessor";
 
 export function useSheetCellAgent(options: {
-  domAccessor: ReturnType<typeof useSheetDomAccessor>;
+  domAccessor: ReturnType<typeof injectSheetDomAccessor>;
 }) {
   const editModeCellAddr = signal<{ r: number; c: number } | undefined>(undefined);
   let _isTransitioning = false;

package/src/ui/data/sheet/useSheetCellStyling.ts

@@ -1,14 +1,14 @@
 import { computed, type Signal } from "@angular/core";
-import type { ISdSheetColumnDef, ISdSheetHeaderDef } from "./types";
-import type { IExpandItemDef } from "../../../core/utils/useExpandingManager";
+import type { SdSheetColumnDef, SdSheetHeaderDef } from "./types";
+import type { ExpandItemDef } from "../../../core/utils/useExpandingManager";
 
 export function useSheetCellStyling<T>(options: {
-  columnDefs: Signal<ISdSheetColumnDef[]>;
+  columnDefs: Signal<SdSheetColumnDef[]>;
   fixedLeftMap: Signal<Map<string, number>>;
   getItemCellStyleFn: Signal<((item: T, colKey: string) => string | undefined) | undefined>;
   getItemCellClassFn: Signal<((item: T, colKey: string) => string) | undefined>;
   getChildrenFn: Signal<((item: T, index: number) => T[] | undefined) | undefined>;
-  expandingDef: (item: T) => IExpandItemDef<T>;
+  expandingDef: (item: T) => ExpandItemDef<T>;
   isCellEditMode: (addr: { r: number; c: number }) => boolean;
 }) {
   function getColDefStyle(colDef: { width: string | undefined; collapse: boolean }): string | null {
@@ -22,7 +22,7 @@ export function useSheetCellStyling<T>(options: {
   }
 
   function getFixedStyle(
-    colDef: ISdSheetColumnDef,
+    colDef: SdSheetColumnDef,
     zIndex: number = 1,
     background: string = "var(--control-color)",
   ): string | null {
@@ -58,12 +58,12 @@ export function useSheetCellStyling<T>(options: {
     return map;
   });
 
-  function getHeaderCellStyle(cell: ISdSheetHeaderDef): string | null {
+  function getHeaderCellStyle(cell: SdSheetHeaderDef): string | null {
     if (cell.colDef == null) return null;
     return headerColumnStyles().get(cell.colDef.key) ?? null;
   }
 
-  function getCellStyle(item: T, colDef: ISdSheetColumnDef): string | null {
+  function getCellStyle(item: T, colDef: SdSheetColumnDef): string | null {
     const baseStyle = dataColumnBaseStyles().get(colDef.key) ?? null;
     const styleFn = options.getItemCellStyleFn();
     const customStyle = styleFn != null ? styleFn(item, colDef.key) : undefined;
@@ -71,11 +71,11 @@ export function useSheetCellStyling<T>(options: {
     return customStyle ?? baseStyle ?? null;
   }
 
-  function getFixedCellStyle(colDef: ISdSheetColumnDef): string | null {
+  function getFixedCellStyle(colDef: SdSheetColumnDef): string | null {
     return getFixedStyle(colDef, 3);
   }
 
-  function getCellStyleWithIndent(item: T, colDef: ISdSheetColumnDef, colIdx: number): string | null {
+  function getCellStyleWithIndent(item: T, colDef: SdSheetColumnDef, colIdx: number): string | null {
     const parts: string[] = [];
     const cellStyle = getCellStyle(item, colDef);
     if (cellStyle != null) {
@@ -90,7 +90,7 @@ export function useSheetCellStyling<T>(options: {
     return parts.length > 0 ? parts.join("; ") : null;
   }
 
-  function getDataCellClass(item: T, colDef: ISdSheetColumnDef, r: number, c: number): string | null {
+  function getDataCellClass(item: T, colDef: SdSheetColumnDef, r: number, c: number): string | null {
     const parts: string[] = [];
     const classFn = options.getItemCellClassFn();
     const customClass = classFn != null ? classFn(item, colDef.key) : undefined;

package/src/ui/data/sheet/useSheetColumnFixing.ts

@@ -1,5 +1,5 @@
 import { computed, type Signal } from "@angular/core";
-import type { ISdSheetColumnDef } from "./types";
+import type { SdSheetColumnDef } from "./types";
 
 /**
  * Fixed column의 left offset을 계산한다.
@@ -8,7 +8,7 @@ import type { ISdSheetColumnDef } from "./types";
  * em, rem, % 등 non-px 단위의 width는 offset 누적에 반영되지 않는다 (0으로 처리).
  */
 export function useSheetColumnFixing(options: {
-  columnDefs: Signal<ISdSheetColumnDef[]>;
+  columnDefs: Signal<SdSheetColumnDef[]>;
 }) {
   const fixedLeftMap = computed((): Map<string, number> => {
     const map = new Map<string, number>();

package/src/ui/data/sheet/useSheetLayoutEngine.ts

@@ -1,17 +1,17 @@
 import { computed, type Signal } from "@angular/core";
-import type { SdSheetColumnDirective } from "./sd-sheet-column.directive";
-import type { ISdSheetColumnDef, ISdSheetConfig, ISdSheetHeaderDef } from "./types";
+import type { SdSheetColumn } from "./sd-sheet-column";
+import type { SdSheetColumnDef, SdSheetConfig, SdSheetHeaderDef } from "./types";
 
 export function useSheetLayoutEngine(options: {
-  columnControls: Signal<readonly SdSheetColumnDirective[]>;
-  config: Signal<ISdSheetConfig | undefined>;
+  columnControls: Signal<readonly SdSheetColumn[]>;
+  config: Signal<SdSheetConfig | undefined>;
 }) {
-  const columnDefs = computed((): ISdSheetColumnDef[] => {
+  const columnDefs = computed((): SdSheetColumnDef[] => {
     const cfg = options.config();
     const cols = options.columnControls();
 
     return cols
-      .map((col): ISdSheetColumnDef => {
+      .map((col): SdSheetColumnDef => {
         const key = col.key();
         const cfgCol = cfg?.columnRecord[key];
         return {
@@ -45,10 +45,10 @@ export function useSheetLayoutEngine(options: {
     return maxDepth;
   });
 
-  const headerDefTable = computed((): ISdSheetHeaderDef[][] => {
+  const headerDefTable = computed((): SdSheetHeaderDef[][] => {
     const depth = headerDepth();
     const cols = columnDefs();
-    const table: ISdSheetHeaderDef[][] = [];
+    const table: SdSheetHeaderDef[][] = [];
 
     for (let row = 0; row < depth; row++) {
       table.push([]);

package/src/ui/form/button/{sd-additional-button.control.ts → sd-additional-button.ts}

@@ -94,7 +94,7 @@ import {
     "[attr.data-sd-inset]": "inset()",
   },
 })
-export class SdAdditionalButtonControl {
+export class SdAdditionalButton {
   size = input<"sm" | "lg">();
   inset = input(false, { transform: booleanAttribute });
 }

package/src/ui/form/button/{sd-anchor.control.ts → sd-anchor.ts}

@@ -59,7 +59,7 @@ import {
     "[attr.tabindex]": "disabled() ? undefined : 0",
   },
 })
-export class SdAnchorControl {
+export class SdAnchor {
   disabled = input(false, { transform: booleanAttribute });
   theme = input<
     "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"

package/src/ui/form/button/{sd-button.control.ts → sd-button.ts}

@@ -5,14 +5,14 @@ import {
   input,
   ViewEncapsulation,
 } from "@angular/core";
-import { SdRippleDirective } from "../../../core/directives/sd-ripple.directive";
+import { SdRipple } from "../../../core/directives/sd-ripple";
 
 @Component({
   selector: "sd-button",
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [SdRippleDirective],
+  imports: [SdRipple],
   template: `
     <button
       tabindex="0"
@@ -20,7 +20,7 @@ import { SdRippleDirective } from "../../../core/directives/sd-ripple.directive"
       [disabled]="disabled()"
       [class]="buttonClass()"
       [style]="buttonStyle()"
-      [sd-ripple]="!disabled()"
+      [sdRipple]="!disabled()"
     >
       <ng-content />
     </button>
@@ -178,7 +178,7 @@ import { SdRippleDirective } from "../../../core/directives/sd-ripple.directive"
     "[attr.data-sd-disabled]": "disabled()",
   },
 })
-export class SdButtonControl {
+export class SdButton {
   type = input<"button" | "submit">("button");
   theme = input<
     | "primary"

package/src/ui/form/button/{sd-modal-select-button.control.ts → sd-modal-select-button.ts}

@@ -11,23 +11,23 @@ import {
 } from "@angular/core";
 import {
   SdModalProvider,
-  type ISdModal,
-  type ISdModalInfo,
-  type ISdModalOptions,
+  type SdModalContentDef,
+  type SdModalInfo,
+  type SdModalOptions,
 } from "../../overlay/modal/sd-modal.provider";
-import type { TSelectModeValue } from "../select/sd-select.control";
-import { SdAnchorControl } from "./sd-anchor.control";
-import { SdButtonControl } from "./sd-button.control";
+import type { SelectModeValue } from "../select/sd-select";
+import { SdAnchor } from "./sd-anchor";
+import { SdButton } from "./sd-button";
 import { setupInvalid } from "../../../core/utils/setups/setupInvalid";
-import type { ISelectModalOutputResult } from "../../../core/types/select-modal-output-result";
+import type { SelectModalOutputResult } from "../../../core/types/select-modal-output-result";
 import { NgIcon } from "@ng-icons/core";
 import { tablerSearch, tablerEraser } from "@ng-icons/tabler-icons";
 
 /**
  * 모달 선택 컴포넌트가 구현해야 하는 인터페이스
- * ISdModal을 확장하여 selectMode와 selectedItemKeys를 추가한다.
+ * SdModalContentDef을 확장하여 selectMode와 selectedItemKeys를 추가한다.
  */
-export interface ISdSelectModal<T> extends ISdModal<ISelectModalOutputResult<T>> {
+export interface SdSelectModal<T> extends SdModalContentDef<SelectModalOutputResult<T>> {
   selectMode: InputSignal<"single" | "multi" | undefined>;
   selectedItemKeys: InputSignal<any[]>;
 }
@@ -35,7 +35,7 @@ export interface ISdSelectModal<T> extends ISdModal<ISelectModalOutputResult<T>>
 /**
  * 모달 선택 정보 (selectMode/selectedItemKeys를 제외한 inputs)
  */
-export type TSdSelectModalInfo<T extends ISdSelectModal<any>> = ISdModalInfo<
+export type SdSelectModalInfo<T extends SdSelectModal<any>> = SdModalInfo<
   T,
   "selectMode" | "selectedItemKeys"
 >;
@@ -45,7 +45,7 @@ export type TSdSelectModalInfo<T extends ISdSelectModal<any>> = ISdModalInfo<
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [SdAnchorControl, SdButtonControl, NgIcon],
+  imports: [SdAnchor, SdButton, NgIcon],
   template: `
     <div class="_content">
       <ng-content />
@@ -143,16 +143,16 @@ export type TSdSelectModalInfo<T extends ISdSelectModal<any>> = ISdModalInfo<
     "[attr.data-sd-disabled]": "disabled()",
   },
 })
-export class SdModalSelectButtonControl<
+export class SdModalSelectButton<
   T extends object,
   K,
-  M extends keyof TSelectModeValue<K> = keyof TSelectModeValue<K>,
+  M extends keyof SelectModeValue<K> = keyof SelectModeValue<K>,
 > {
   private readonly _sdModal = inject(SdModalProvider);
 
-  modal = input.required<TSdSelectModalInfo<ISdSelectModal<T>>>();
+  modal = input.required<SdSelectModalInfo<SdSelectModal<T>>>();
 
-  value = model<TSelectModeValue<K>[M]>();
+  value = model<SelectModeValue<K>[M]>();
   selectedItems = model<T[]>([]);
 
   disabled = input(false, { transform: booleanAttribute });
@@ -160,7 +160,7 @@ export class SdModalSelectButtonControl<
   inset = input(false, { transform: booleanAttribute });
   size = input<"sm" | "lg">();
   selectMode = input<M>("single" as M);
-  modalOptions = input<ISdModalOptions>();
+  modalOptions = input<SdModalOptions>();
 
   searchIcon = input(tablerSearch);
 

package/src/ui/form/checkbox/{sd-checkbox-group-item.control.ts → sd-checkbox-group-item.ts}

@@ -8,15 +8,15 @@ import {
   input,
   ViewEncapsulation,
 } from "@angular/core";
-import { SdCheckboxGroupControl } from "./sd-checkbox-group.control";
-import { SdCheckboxControl } from "./sd-checkbox.control";
+import { SdCheckboxGroup } from "./sd-checkbox-group";
+import { SdCheckbox } from "./sd-checkbox";
 
 @Component({
   selector: "sd-checkbox-group-item",
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [SdCheckboxControl],
+  imports: [SdCheckbox],
   template: `
     <sd-checkbox
       [value]="isSelected()"
@@ -28,9 +28,9 @@ import { SdCheckboxControl } from "./sd-checkbox.control";
     </sd-checkbox>
   `,
 })
-export class SdCheckboxGroupItemControl<T> {
-  private readonly _parentControl = inject<SdCheckboxGroupControl<T>>(
-    forwardRef(() => SdCheckboxGroupControl),
+export class SdCheckboxGroupItem<T> {
+  private readonly _parentControl = inject<SdCheckboxGroup<T>>(
+    forwardRef(() => SdCheckboxGroup),
   );
 
   value = input.required<T>();

package/src/ui/form/checkbox/{sd-checkbox-group.control.ts → sd-checkbox-group.ts}

@@ -17,7 +17,7 @@ import {
     <ng-content></ng-content>
   `,
 })
-export class SdCheckboxGroupControl<T> {
+export class SdCheckboxGroup<T> {
   value = model<T[]>([]);
 
   disabled = input(false, { transform: booleanAttribute });

package/src/ui/form/checkbox/{sd-checkbox.control.ts → sd-checkbox.ts}

@@ -252,7 +252,7 @@ import { tablerCheck } from "@ng-icons/tabler-icons";
     "(keydown)": "onKeydown($event)",
   },
 })
-export class SdCheckboxControl {
+export class SdCheckbox {
   value = model(false);
   canChangeFn = input<(item: boolean) => boolean | Promise<boolean>>(() => true);
 

package/src/ui/form/checkbox/{sd-switch.control.ts → sd-switch.ts}

@@ -114,7 +114,7 @@ import {
     `,
   ],
 })
-export class SdSwitchControl {
+export class SdSwitch {
   value = model(false);
 
   disabled = input(false, { transform: booleanAttribute });

package/src/ui/form/choice/{sd-state-preset.control.ts → sd-state-preset.ts}

@@ -9,15 +9,15 @@ import {
 } from "@angular/core";
 import { SdModalProvider } from "../../overlay/modal/sd-modal.provider";
 import { SdToastProvider } from "../../../core/providers/sd-toast.provider";
-import { SdPromptModalControl } from "../../overlay/modal/sd-prompt-modal.control";
-import { SdConfirmModalControl } from "../../overlay/modal/sd-confirm-modal.control";
-import { useSdSystemConfigResource } from "../../../core/utils/useSdSystemConfigResource";
-import { SdAnchorControl } from "../button/sd-anchor.control";
+import { SdPromptModal } from "../../overlay/modal/sd-prompt-modal";
+import { SdConfirmModal } from "../../overlay/modal/sd-confirm-modal";
+import { injectSdSystemConfigResource } from "../../../core/utils/injectSdSystemConfigResource";
+import { SdAnchor } from "../button/sd-anchor";
 import { NgIcon } from "@ng-icons/core";
 import { tablerStar, tablerDeviceFloppy, tablerX } from "@ng-icons/tabler-icons";
 import { obj } from "@simplysm/core-common";
 
-export interface ISdStatePreset {
+export interface SdStatePresetDef {
   name: string;
   state: any;
 }
@@ -27,7 +27,7 @@ export interface ISdStatePreset {
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [SdAnchorControl, NgIcon],
+  imports: [SdAnchor, NgIcon],
   template: `
     <div class="_sd-state-preset">
       <sd-anchor (click)="onAddClick()" class="_add-btn">
@@ -99,7 +99,7 @@ export interface ISdStatePreset {
     "[attr.data-sd-size]": "size()",
   },
 })
-export class SdStatePresetControl {
+export class SdStatePreset {
   private readonly _sdModal = inject(SdModalProvider);
   private readonly _sdToast = inject(SdToastProvider);
 
@@ -111,7 +111,7 @@ export class SdStatePresetControl {
   protected readonly tablerDeviceFloppy = tablerDeviceFloppy;
   protected readonly tablerX = tablerX;
 
-  private readonly _configResource = useSdSystemConfigResource<ISdStatePreset[]>({
+  private readonly _configResource = injectSdSystemConfigResource<SdStatePresetDef[]>({
     key: this.key,
   });
 
@@ -121,7 +121,7 @@ export class SdStatePresetControl {
     const name = await this._sdModal.showAsync(
       {
         title: "프리셋 추가",
-        type: SdPromptModalControl,
+        type: SdPromptModal,
         inputs: { message: "프리셋 이름을 입력하세요." },
       },
       { useCloseByBackdrop: false },
@@ -130,7 +130,7 @@ export class SdStatePresetControl {
     if (name == null) return;
 
     const currentPresets = this._presets();
-    const newPreset: ISdStatePreset = {
+    const newPreset: SdStatePresetDef = {
       name,
       state: obj.clone(this.state()),
     };
@@ -139,13 +139,13 @@ export class SdStatePresetControl {
     this._sdToast.info(`현재 상태가 '${name}'에 저장되었습니다.`);
   }
 
-  onPresetClick(preset: ISdStatePreset): void {
+  onPresetClick(preset: SdStatePresetDef): void {
     const currentState = this.state();
     if (obj.equal(currentState, preset.state)) return;
     this.state.set(obj.clone(preset.state));
   }
 
-  onSaveClick(preset: ISdStatePreset): void {
+  onSaveClick(preset: SdStatePresetDef): void {
     const currentPresets = this._presets();
     const updated = currentPresets.map((p) =>
       p.name === preset.name ? { ...p, state: obj.clone(this.state()) } : p,
@@ -154,11 +154,11 @@ export class SdStatePresetControl {
     this._sdToast.info(`현재 상태가 ${preset.name}에 저장되었습니다.`);
   }
 
-  async onDeleteClick(preset: ISdStatePreset): Promise<void> {
+  async onDeleteClick(preset: SdStatePresetDef): Promise<void> {
     const confirmed = await this._sdModal.showAsync(
       {
         title: "프리셋 삭제",
-        type: SdConfirmModalControl,
+        type: SdConfirmModal,
         inputs: { message: `저장된 '${preset.name}' 상태가 삭제됩니다.` },
       },
       { useCloseByBackdrop: false },

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

@@ -265,7 +265,7 @@ const DEFAULT_EXTENSIONS: AnyExtension[] = [
     "[attr.data-sd-readonly]": "readonly()",
   },
 })
-export class SdTiptapEditorControl {
+export class SdTiptapEditor {
   value = model<string>();
   disabled = input(false, { transform: booleanAttribute });
   readonly = input(false, { transform: booleanAttribute });

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

@@ -6,10 +6,10 @@ import {
   model,
   ViewEncapsulation,
 } from "@angular/core";
-import { SdSelectControl } from "../select/sd-select.control";
-import { SdSelectItemControl } from "../select/sd-select-item.control";
-import { SdRangeControl } from "./sd-range.control";
-import { SdTextfieldControl } from "./sd-textfield.control";
+import { SdSelect } from "../select/sd-select";
+import { SdSelectItem } from "../select/sd-select-item";
+import { SdRange } from "./sd-range";
+import { SdTextfield } from "./sd-textfield";
 import { DateOnly } from "@simplysm/core-common";
 
 @Component({
@@ -17,7 +17,7 @@ import { DateOnly } from "@simplysm/core-common";
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [SdSelectControl, SdSelectItemControl, SdRangeControl, SdTextfieldControl],
+  imports: [SdSelect, SdSelectItem, SdRange, SdTextfield],
   styles: [
     /* language=SCSS */ `
       @use "../../../../scss/commons/mixins";