@simplysm/angular 14.0.51 → 14.0.53

package/docs/ui-data/sd-sheet.md

@@ -1,227 +0,0 @@
-# `SdSheet`
-
-스프레드시트 컴포넌트. 정렬, 컬럼 고정, 리사이즈, 페이지네이션, 설정 저장을 지원한다.
-
-```typescript
-@Component({ selector: "sd-sheet" })
-class SdSheet<T> {
-  key = input<string>();
-  items = input<T[]>([]);
-  trackByFn = input<(item: T, index: number) => unknown>();
-  selectMode = input<"single" | "multi">();
-  getItemSelectableFn = input<(item: T) => boolean | string>();
-  getChildrenFn = input<(item: T, index: number) => T[] | undefined>();
-  useAutoSort = input(false, { transform: booleanAttribute });
-  visiblePageCount = input(10);
-  totalPageCount = input(0);
-  itemsPerPage = input(0);
-  inset = input(false, { transform: booleanAttribute });
-  hideConfigBar = input(false, { transform: booleanAttribute });
-  cumulativeSelection = input(false, { transform: booleanAttribute });
-
-  itemKeydown = output<SdSheetItemKeydownEventParam<T>>();
-  cellKeydown = output<SdSheetCellKeydownEventParam<T>>();
-
-  selectedItems = model<T[]>([]);
-  expandedItems = model<T[]>([]);
-  sorts = model<SortingDef[]>([]);
-  currentPage = model(0);
-}
-```
-
-## Members
-
-| Member | Kind | Type | Default | Description |
-|--------|------|------|---------|-------------|
-| `key` | input | `string \| undefined` | `undefined` | 설정 저장 키 |
-| `items` | input | `T[]` | `[]` | 표시할 항목 |
-| `trackByFn` | input | `((item, index) => unknown) \| undefined` | `undefined` | 트랙킹 함수 |
-| `selectMode` | input | `"single" \| "multi" \| undefined` | `undefined` | 선택 모드 |
-| `getItemSelectableFn` | input | `((item) => boolean \| string) \| undefined` | `undefined` | 선택 가능 여부 함수. string은 비활성 사유 |
-| `getChildrenFn` | input | `((item, index) => T[] \| undefined) \| undefined` | `undefined` | 트리 구조 자식 반환 함수 |
-| `useAutoSort` | input | `boolean` | `false` | 클라이언트 측 자동 정렬 |
-| `visiblePageCount` | input | `number` | `10` | 한 번에 표시할 페이지 수 |
-| `totalPageCount` | input | `number` | `0` | 총 페이지 수 |
-| `itemsPerPage` | input | `number` | `0` | 페이지당 항목 수 |
-| `inset` | input | `boolean` | `false` | 삽입 스타일 |
-| `hideConfigBar` | input | `boolean` | `false` | 설정 바 숨김 |
-| `cumulativeSelection` | input | `boolean` | `false` | items 변경 시 selectedItems 유지 여부. 다중 페이지 선택 누적에 사용 |
-| `itemKeydown` | output | `SdSheetItemKeydownEventParam<T>` | - | 행 keydown 이벤트 |
-| `cellKeydown` | output | `SdSheetCellKeydownEventParam<T>` | - | 셀 keydown 이벤트 |
-| `selectedItems` | model | `T[]` | `[]` | 선택된 항목 (two-way) |
-| `expandedItems` | model | `T[]` | `[]` | 확장된 항목 (two-way) |
-| `sorts` | model | `SortingDef[]` | `[]` | 정렬 설정 (two-way) |
-| `currentPage` | model | `number` | `0` | 현재 페이지 (two-way) |
-
-### `cumulativeSelection` 사용 패턴
-
-- **선택 모달** (다중 페이지 선택 누적) → `true`. 반드시 `trackByFn` 지정 필수
-- **현재 뷰 일괄 작업** (현재 페이지 내 처리) → `false` (기본값)
-
-```html
-<sd-sheet
-  [cumulativeSelection]="viewType() === 'modal' && selectMode() === 'multi'"
-  [trackByFn]="trackById"
->
-```
-
-> `SortingDef.key`는 `"vendor.name"` 같은 체인 경로일 수 있다. 정렬 처리 시 `obj.getChainValue(item, sort.key)` (from `@simplysm/core-common`)를 사용한다.
-
-### 실사용 예
-
-- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — items·sorts·currentPage·totalPageCount·trackByFn 기본 바인딩
-- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — selectMode·selectedItems·mark 연동
-- [crud-list.md §6 확장 B: 선택 기능 + 선택 삭제/복구](../recipes/crud-list.md#6-확장-b-선택-기능--선택-삭제복구) — selectMode="multi"·selectedItems 바인딩
-- [crud-list.md §8 확장 D: 선택 모달 전환](../recipes/crud-list.md#8-확장-d-선택-모달-전환) — cumulativeSelection·selectMode 조건부 적용
-- [crud-detail.md §10 확장 F: 복합 상세](../recipes/crud-detail.md#10-확장-f-복합-상세-내부-sd-sheet) — 상세 폼 내부 하위 컬렉션 편집
-
-## Related Types
-
-### `SdSheetColumn`
-
-시트 컬럼 정의 디렉티브.
-
-```typescript
-@Directive({ selector: "sd-sheet-column" })
-class SdSheetColumn<T = unknown> {
-  key = input.required<string>();
-  header = input<string | string[]>("");
-  headerStyle = input<string>();
-  tooltip = input<string>();
-  width = input<string>();
-  fixed = input(false, { transform: booleanAttribute });
-  hidden = input(false, { transform: booleanAttribute });
-  collapse = input(false, { transform: booleanAttribute });
-  disableSorting = input(false, { transform: booleanAttribute });
-  disableResizing = input(false, { transform: booleanAttribute });
-  ordering = input(0);
-}
-```
-
-Content children: `SdSheetColumnCellTemplate` (required), `#headerTpl`, `#summaryTpl`
-
-#### 실사용 예
-
-- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — key·header 기본 컬럼 정의
-- [crud-list.md §7 확장 C: inline 삭제 열](../recipes/crud-list.md#7-확장-c-inline-삭제-열) — fixed·hidden·#headerTpl 커스텀 헤더
-- [crud-detail.md §10 확장 F: 복합 상세](../recipes/crud-detail.md#10-확장-f-복합-상세-내부-sd-sheet) — 하위 컬렉션 컬럼 정의
-
-### `SdSheetColumnCellTemplate`
-
-시트 컬럼 셀 내용을 정의하는 디렉티브. `ng-template[cell]` 셀렉터.
-
-```typescript
-@Directive({ selector: "ng-template[cell]" })
-class SdSheetColumnCellTemplate<T> {
-  cell = input.required<T[]>();
-
-  static ngTemplateContextGuard<TContextItem>(
-    _dir: SdSheetColumnCellTemplate<TContextItem>,
-    _ctx: unknown,
-  ): _ctx is SdSheetCellContext<TContextItem>;
-}
-```
-
-**셀 내용 작성 지침:**
-- **일반 텍스트**: `<div class="p-xs-sm">` 로 감싸 기본 패딩 적용
-- **컨트롤 삽입**: 반드시 `[inset]="true"` + `[size]="'sm'"` 지정
-
-#### 실사용 예
-
-- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — let-item 기본 셀 렌더링
-- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — let-edit 조건부 편집 셀 (inset+sm 컨트롤)
-- [crud-detail.md §10 확장 F: 복합 상세](../recipes/crud-detail.md#10-확장-f-복합-상세-내부-sd-sheet) — 상세 폼 내부 하위 컬렉션 셀
-
-### `SdSheetCellContext`
-
-```typescript
-interface SdSheetCellContext<T = unknown> {
-  $implicit: T;
-  item: T;
-  index: number;
-  depth: number;
-  edit: boolean;
-}
-```
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `$implicit` | `T` | 현재 항목 (let-item으로 접근) |
-| `item` | `T` | 현재 항목 |
-| `index` | `number` | 행 인덱스 |
-| `depth` | `number` | 트리 깊이 |
-| `edit` | `boolean` | 편집 모드 여부 |
-
-### `SdSheetConfigModal`
-
-```typescript
-@Component({ selector: "sd-sheet-config-modal" })
-class SdSheetConfigModal implements SdModalContentDef<SdSheetConfig> {
-  controls = input.required<readonly SdSheetColumn[]>();
-  config = input.required<SdSheetConfig | undefined>();
-  close = output<SdSheetConfig>();
-  initialized = signal(true);
-}
-```
-
-### `SdSheetColumnDef`
-
-```typescript
-interface SdSheetColumnDef {
-  key: string;
-  header: string | string[];
-  headerStyle: string | undefined;
-  tooltip: string | undefined;
-  width: string | undefined;
-  fixed: boolean;
-  hidden: boolean;
-  collapse: boolean;
-  disableSorting: boolean;
-  disableResizing: boolean;
-  ordering: number;
-}
-```
-
-### `SdSheetConfig`
-
-```typescript
-interface SdSheetConfig {
-  columnRecord: Record<string, {
-    width?: string;
-    hidden?: boolean;
-    fixed?: boolean;
-    ordering?: number;
-  }>;
-}
-```
-
-### `SdSheetHeaderDef`
-
-```typescript
-interface SdSheetHeaderDef {
-  text: string;
-  colspan: number;
-  rowspan: number;
-  isLastRow: boolean;
-  colDef: SdSheetColumnDef | undefined;
-}
-```
-
-### `SdSheetItemKeydownEventParam`
-
-```typescript
-interface SdSheetItemKeydownEventParam<T> {
-  item: T;
-  event: KeyboardEvent;
-}
-```
-
-### `SdSheetCellKeydownEventParam`
-
-```typescript
-interface SdSheetCellKeydownEventParam<T> {
-  item: T;
-  key: string;
-  event: KeyboardEvent;
-}
-```

package/docs/ui-form/sd-additional-button.md

@@ -1,26 +0,0 @@
-# `SdAdditionalButton`
-
-주 콘텐츠 영역과 추가 동작 버튼을 나란히 배치하는 복합 컴포넌트. 콘텐츠 왼쪽 `_content` 영역과 오른쪽 `_button` 영역으로 구성된다.
-
-```typescript
-@Component({ selector: "sd-additional-button", ... })
-export class SdAdditionalButton
-```
-
-## Members
-
-| Member | Kind | Type | Description |
-|--------|------|------|-------------|
-| `disabled` | input | `boolean` | 비활성화 여부 (기본값: `false`) |
-| `size` | input | `"sm" \| "lg" \| undefined` | 크기 |
-| `inset` | input | `boolean` | 인셋 스타일 여부 (기본값: `false`) |
-
-## Usage
-
-```html
-<sd-additional-button>
-  선택된 항목 이름
-  <sd-anchor>편집</sd-anchor>
-  <sd-button>삭제</sd-button>
-</sd-additional-button>
-```

package/docs/ui-form/sd-anchor.md

@@ -1,31 +0,0 @@
-# `SdAnchor`
-
-인라인 버튼 컴포넌트. 텍스트나 아이콘을 클릭 가능한 링크 스타일로 표시한다.
-
-```typescript
-@Component({ selector: "sd-anchor", ... })
-export class SdAnchor
-```
-
-## Members
-
-| Member | Kind | Type | Description |
-|--------|------|------|-------------|
-| `disabled` | input | `boolean` | 비활성화 여부 (기본값: `false`) |
-| `theme` | input | `"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "gray" \| "blue-gray"` | 색상 테마 (기본값: `"primary"`) |
-
-## Usage
-
-```html
-<sd-anchor (click)="onItemClick()">편집</sd-anchor>
-<sd-anchor [theme]="'danger'" (click)="onDeleteClick()">삭제</sd-anchor>
-<sd-anchor [disabled]="!canEdit()">설정</sd-anchor>
-```
-
-### 실사용 예
-
-- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — 시트 셀 내 인라인 앵커 버튼
-- [crud-list.md §7 확장 C: inline 삭제 열](../recipes/crud-list.md#7-확장-c-inline-삭제-열) — row별 삭제/복구 토글 아이콘
-- [crud-list.md §10 확장 F: 모달 편집 모드](../recipes/crud-list.md#10-확장-f-모달-편집-모드) — 행 클릭 편집 모달 열기 링크
-- [crud-detail.md §7 확장 C: modal 뷰](../recipes/crud-detail.md#7-확장-c-modal-뷰) — modal 우측 상단 액션 앵커
-- [crud-detail.md §10 확장 F: 복합 상세](../recipes/crud-detail.md#10-확장-f-복합-상세-내부-sd-sheet) — 행 삭제 아이콘 앵커

package/docs/ui-form/sd-button.md

@@ -1,105 +0,0 @@
-# `SdButton`
-
-버튼 컴포넌트.
-
-```typescript
-@Component({ selector: "sd-button" })
-class SdButton {
-  type = input<"button" | "submit">("button");
-  theme = input<"primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray" | "link" | "link-primary" | "link-secondary" | "link-info" | "link-success" | "link-warning" | "link-danger" | "link-gray" | "link-blue-gray" | "link-rev">();
-  inline = input(false, { transform: booleanAttribute });
-  inset = input(false, { transform: booleanAttribute });
-  size = input<"sm" | "lg">();
-  disabled = input(false, { transform: booleanAttribute });
-  buttonStyle = input<string>();
-  buttonClass = input<string>();
-}
-```
-
-## Members
-
-| Member | Kind | Type | Default | Description |
-|--------|------|------|---------|-------------|
-| `type` | input | `"button" \| "submit"` | `"button"` | 버튼 HTML 타입 |
-| `theme` | input | `string \| undefined` | `undefined` | 테마 색상 |
-| `inline` | input | `boolean` | `false` | 인라인 표시 |
-| `inset` | input | `boolean` | `false` | 테두리 없는 삽입 스타일 |
-| `size` | input | `"sm" \| "lg" \| undefined` | `undefined` | 크기 |
-| `disabled` | input | `boolean` | `false` | 비활성화 |
-| `buttonStyle` | input | `string \| undefined` | `undefined` | 버튼 인라인 스타일 |
-| `buttonClass` | input | `string \| undefined` | `undefined` | 버튼 CSS 클래스 |
-
-**스타일 적용**: 시각적 스타일은 내부 `<button>`에 적용되므로 `buttonClass`/`buttonStyle`을 사용한다. 호스트(`<sd-button>`)에 직접 `class`/`style`을 줘도 버튼 외형은 변경되지 않는다.
-
-### 실사용 예
-
-- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — 새로고침 버튼 (link-info theme)
-- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — 저장·등록 버튼 (type="submit", primary theme)
-- [crud-list.md §11 확장 G: 엑셀 업로드/다운로드](../recipes/crud-list.md#11-확장-g-엑셀-업로드다운로드) — 엑셀 업로드·다운로드 버튼
-- [crud-detail.md §3 최소 뼈대: 읽기 전용 상세 폼](../recipes/crud-detail.md#3-최소-뼈대-읽기-전용-상세-폼) — 새로고침 버튼
-- [crud-detail.md §5 확장 A: 편집/저장](../recipes/crud-detail.md#5-확장-a-편집저장) — 저장 버튼 (type="submit")
-- [crud-detail.md §6 확장 B: 삭제/복구 토글](../recipes/crud-detail.md#6-확장-b-삭제복구-토글) — 삭제·복구 버튼 (danger/warning theme)
-- [crud-detail.md §7 확장 C: modal 뷰](../recipes/crud-detail.md#7-확장-c-modal-뷰) — modal 하단 바 확인·취소 버튼
-- [crud-detail.md §8 확장 D: control 뷰](../recipes/crud-detail.md#8-확장-d-control-뷰) — control 상단 바 버튼
-
-## Related Types
-
-### `SdAnchor`
-
-앵커(인라인 버튼) 컴포넌트. 텍스트 내 클릭 가능 요소.
-
-```typescript
-@Component({ selector: "sd-anchor" })
-class SdAnchor {
-  disabled = input(false, { transform: booleanAttribute });
-  theme = input<"primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">("primary");
-}
-```
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `disabled` | `boolean` | `false` | 비활성화 |
-| `theme` | `string` | `"primary"` | 테마 색상 |
-
-### `SdAdditionalButton`
-
-추가 동작 버튼. 드롭다운 포함.
-
-```typescript
-@Component({ selector: "sd-additional-button" })
-class SdAdditionalButton {
-  size = input<"sm" | "lg">();
-  inset = input(false, { transform: booleanAttribute });
-}
-```
-
-### `SdModalSelectButton`
-
-모달을 열어 선택하는 버튼 컴포넌트.
-
-```typescript
-@Component({ selector: "sd-modal-select-button" })
-class SdModalSelectButton<T extends object, K, M extends keyof SelectModeValue<K>> {
-  modal = input.required<SdSelectModalInfo<SdSelectModal<T>>>();
-  value = model<SelectModeValue<K>[M]>();
-  selectedItems = model<T[]>([]);
-  disabled = input(false, { transform: booleanAttribute });
-  required = input(false, { transform: booleanAttribute });
-  inset = input(false, { transform: booleanAttribute });
-  size = input<"sm" | "lg">();
-  selectMode = input<M>("single" as M);
-  modalOptions = input<SdModalOptions>();
-  searchIcon = input(tablerSearch);
-}
-```
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `modal` | `SdSelectModalInfo<...>` | required | 모달 정보 |
-| `value` | `SelectModeValue<K>[M]` | - | 선택된 값 (two-way) |
-| `selectedItems` | `T[]` | `[]` | 선택된 항목 객체 배열 (two-way) |
-| `disabled` | `boolean` | `false` | 비활성화 |
-| `required` | `boolean` | `false` | 필수 (지우기 버튼 숨김) |
-| `inset` | `boolean` | `false` | 삽입 스타일 |
-| `size` | `"sm" \| "lg" \| undefined` | `undefined` | 크기 |
-| `selectMode` | `M` | `"single"` | 선택 모드 |

package/docs/ui-form/sd-checkbox-group.md

@@ -1,39 +0,0 @@
-# `SdCheckboxGroup`
-
-체크박스 그룹 컴포넌트. `SdCheckboxGroupItem`과 함께 사용하여 다중 선택을 관리한다.
-
-```typescript
-@Component({ selector: "sd-checkbox-group", ... })
-export class SdCheckboxGroup<T>
-```
-
-## Members
-
-| Member | Kind | Type | Description |
-|--------|------|------|-------------|
-| `value` | model | `T[]` | 선택된 값 배열 (기본값: `[]`) |
-| `disabled` | input | `boolean` | 비활성화 (기본값: `false`) |
-
-## Related Types
-
-### `SdCheckboxGroupItem`
-
-```typescript
-@Component({ selector: "sd-checkbox-group-item", ... })
-export class SdCheckboxGroupItem<T>
-```
-
-| Member | Kind | Type | Description |
-|--------|------|------|-------------|
-| `value` | input (required) | `T` | 이 항목의 값 |
-| `inline` | input | `boolean` | 인라인 표시 (기본값: `false`) |
-
-## Usage
-
-```html
-<sd-checkbox-group [(value)]="selectedRoles">
-  <sd-checkbox-group-item [value]="'admin'">관리자</sd-checkbox-group-item>
-  <sd-checkbox-group-item [value]="'user'">사용자</sd-checkbox-group-item>
-  <sd-checkbox-group-item [value]="'viewer'">조회</sd-checkbox-group-item>
-</sd-checkbox-group>
-```

package/docs/ui-form/sd-checkbox.md

@@ -1,81 +0,0 @@
-# `SdCheckbox`
-
-체크박스 컴포넌트.
-
-```typescript
-@Component({ selector: "sd-checkbox" })
-class SdCheckbox {
-  value = model(false);
-  canChangeFn = input<(item: boolean) => boolean | Promise<boolean>>(() => true);
-  icon = input(tablerCheck);
-  radio = input(false, { transform: booleanAttribute });
-  disabled = input(false, { transform: booleanAttribute });
-  size = input<"sm" | "lg">();
-  inline = input(false, { transform: booleanAttribute });
-  inset = input(false, { transform: booleanAttribute });
-  theme = input<"primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">();
-  contentStyle = input<string>();
-}
-```
-
-## Members
-
-| Member | Kind | Type | Default | Description |
-|--------|------|------|---------|-------------|
-| `value` | model | `boolean` | `false` | 체크 여부 (two-way) |
-| `canChangeFn` | input | `(item: boolean) => boolean \| Promise<boolean>` | `() => true` | 값 변경 가능 여부 함수 |
-| `icon` | input | `string` | `tablerCheck` | 체크 아이콘 |
-| `radio` | input | `boolean` | `false` | 라디오 버튼 스타일 |
-| `disabled` | input | `boolean` | `false` | 비활성화 |
-| `size` | input | `"sm" \| "lg" \| undefined` | `undefined` | 크기 |
-| `inline` | input | `boolean` | `false` | 인라인 표시 |
-| `inset` | input | `boolean` | `false` | 삽입 스타일 |
-| `theme` | input | `string \| undefined` | `undefined` | 테마 색상 |
-| `contentStyle` | input | `string \| undefined` | `undefined` | 라벨 텍스트 인라인 스타일 |
-
-### 실사용 예
-
-- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — 필터 영역 "삭제항목 포함" 체크박스
-
-## Related Types
-
-### `SdSwitch`
-
-스위치 토글 컴포넌트.
-
-```typescript
-@Component({ selector: "sd-switch" })
-class SdSwitch {
-  value = model(false);
-  canChangeFn = input<(item: boolean) => boolean | Promise<boolean>>(() => true);
-  disabled = input(false, { transform: booleanAttribute });
-  inline = input(false, { transform: booleanAttribute });
-  inset = input(false, { transform: booleanAttribute });
-  size = input<"sm" | "lg">();
-  theme = input<string>();
-}
-```
-
-### `SdCheckboxGroup`
-
-체크박스 그룹 컴포넌트.
-
-```typescript
-@Component({ selector: "sd-checkbox-group" })
-class SdCheckboxGroup<T> {
-  value = model<T[]>([]);
-  disabled = input(false, { transform: booleanAttribute });
-}
-```
-
-### `SdCheckboxGroupItem`
-
-체크박스 그룹 항목.
-
-```typescript
-@Component({ selector: "sd-checkbox-group-item" })
-class SdCheckboxGroupItem<T> {
-  value = input.required<T>();
-  inline = input(false, { transform: booleanAttribute });
-}
-```

package/docs/ui-form/sd-date-range-picker.md

@@ -1,27 +0,0 @@
-# `SdDateRangePicker`
-
-날짜 범위 선택 컴포넌트. 기간 유형(`일`/`월`/`범위`)을 선택하고 `from`/`to` 날짜를 입력한다.
-
-```typescript
-@Component({ selector: "sd-date-range-picker", ... })
-export class SdDateRangePicker
-```
-
-## Members
-
-| Member | Kind | Type | Description |
-|--------|------|------|-------------|
-| `periodType` | model | `"일" \| "월" \| "범위"` | 기간 유형 (기본값: `"범위"`) |
-| `from` | model | `DateOnly \| undefined` | 시작 날짜 |
-| `to` | model | `DateOnly \| undefined` | 종료 날짜 |
-| `required` | input | `boolean` | 필수 여부 (기본값: `false`) |
-
-## Usage
-
-```html
-<sd-date-range-picker
-  [(periodType)]="searchPeriodType"
-  [(from)]="searchFrom"
-  [(to)]="searchTo"
-/>
-```

package/docs/ui-form/sd-form.md

@@ -1,89 +0,0 @@
-# `SdForm`
-
-폼 래퍼 컴포넌트. `<form>` 태그를 렌더링하며 submit 이벤트 처리 및 유효성 검증을 수행한다.
-
-```typescript
-@Component({ selector: "sd-form" })
-class SdForm {
-  formSubmit = output<SubmitEvent>();
-  formInvalid = output();
-
-  requestSubmit(): void;
-}
-```
-
-## Members
-
-| Member | Kind | Type | Description |
-|--------|------|------|-------------|
-| `formSubmit` | output | `SubmitEvent` | 유효성 검증 통과 시 발생 |
-| `formInvalid` | output | `void` | 유효성 검증 실패 시 발생 (`reportValidity()` 호출 후) |
-| `requestSubmit()` | method | `() => void` | 프로그래밍 방식으로 submit 트리거 |
-
-## Usage
-
-```html
-<sd-form #formCtrl (formSubmit)="onSubmit($event)">
-  <sd-textfield [type]="'text'" [(value)]="name" [required]="true" />
-  <sd-button [type]="'submit'">저장</sd-button>
-</sd-form>
-```
-
-프로그래밍 방식 저장:
-
-```typescript
-const formCtrl = viewChild.required<SdForm>('formCtrl');
-
-onSave(): void {
-  this.formCtrl().requestSubmit();
-}
-```
-
-### 실사용 예
-
-- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — 필터 폼 래퍼 (formSubmit으로 검색 트리거)
-- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — 편집 폼 래퍼 (#formCtrl + requestSubmit)
-- [crud-detail.md §3 최소 뼈대: 읽기 전용 상세 폼](../recipes/crud-detail.md#3-최소-뼈대-읽기-전용-상세-폼) — 읽기 전용 필드 배치 컨테이너
-- [crud-detail.md §5 확장 A: 편집/저장](../recipes/crud-detail.md#5-확장-a-편집저장) — 편집 폼 래퍼 (formSubmit + #formCtrl + requestSubmit)
-
-## Related Types
-
-### `SdStatePreset`
-
-상태 프리셋 저장/불러오기 컴포넌트.
-
-```typescript
-@Component({ selector: "sd-state-preset" })
-class SdStatePreset {
-  key = input.required<string>();
-  state = model<any>();
-  size = input<"sm" | "lg">();
-}
-```
-
-### `SdTiptapEditor`
-
-TipTap 기반 리치 텍스트 에디터.
-
-```typescript
-@Component({ selector: "sd-tiptap-editor" })
-class SdTiptapEditor {
-  value = model<string>();
-  disabled = input(false, { transform: booleanAttribute });
-  readonly = input(false, { transform: booleanAttribute });
-  required = input(false, { transform: booleanAttribute });
-  placeholder = input<string>();
-  validatorFn = input<(value: string | undefined) => string | undefined>();
-  extensions = input<AnyExtension[]>();
-}
-```
-
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `value` | `string \| undefined` | - | HTML 콘텐츠 (two-way) |
-| `disabled` | `boolean` | `false` | 비활성화 |
-| `readonly` | `boolean` | `false` | 읽기 전용 |
-| `required` | `boolean` | `false` | 필수 |
-| `placeholder` | `string \| undefined` | `undefined` | 플레이스홀더 |
-| `validatorFn` | `((value) => string \| undefined) \| undefined` | `undefined` | 커스텀 유효성 검증 함수 |
-| `extensions` | `AnyExtension[] \| undefined` | `undefined` | 추가 TipTap 확장 |

package/docs/ui-form/sd-modal-select-button.md

@@ -1,54 +0,0 @@
-# `SdModalSelectButton`
-
-모달을 열어 항목을 선택하는 버튼 컴포넌트. 선택된 값은 `value`와 `selectedItems` model로 관리된다.
-
-```typescript
-@Component({ selector: "sd-modal-select-button", ... })
-export class SdModalSelectButton<T extends object, K, M extends keyof SelectModeValue<K> = keyof SelectModeValue<K>>
-```
-
-## Members
-
-| Member | Kind | Type | Description |
-|--------|------|------|-------------|
-| `modal` | input (required) | `SdSelectModalInfo<SdSelectModal<T>>` | 모달 정보 |
-| `value` | model | `SelectModeValue<K>[M] \| undefined` | 선택된 키 값 |
-| `selectedItems` | model | `T[]` | 선택된 항목 배열 (기본값: `[]`) |
-| `disabled` | input | `boolean` | 비활성화 여부 (기본값: `false`) |
-| `required` | input | `boolean` | 필수 여부 (기본값: `false`) |
-| `inset` | input | `boolean` | 인셋 스타일 (기본값: `false`) |
-| `size` | input | `"sm" \| "lg" \| undefined` | 크기 |
-| `selectMode` | input | `M` | 선택 모드 (기본값: `"single"`) |
-| `modalOptions` | input | `SdModalOptions \| undefined` | 모달 옵션 |
-| `searchIcon` | input | `string` | 검색 버튼 아이콘 SVG (기본값: `tablerSearch`) |
-
-## Related Types
-
-### `SdSelectModal<T>`
-
-```typescript
-interface SdSelectModal<T> extends SdModalContentDef<SelectModalOutputResult<T>> {
-  selectMode: InputSignal<"single" | "multi" | undefined>;
-  selectedItemKeys: InputSignal<any[]>;
-}
-```
-
-### `SdSelectModalInfo<T>`
-
-```typescript
-type SdSelectModalInfo<T extends SdSelectModal<any>> = SdModalInfo<T, "selectMode" | "selectedItemKeys">
-```
-
-`selectMode`, `selectedItemKeys`를 제외한 나머지 inputs만 전달하면 된다.
-
-## Usage
-
-```html
-<sd-modal-select-button
-  [modal]="{ title: '고객 선택', type: CustomerSelectModal, inputs: {} }"
-  [(value)]="selectedCustomerId"
-  [(selectedItems)]="selectedCustomers"
->
-  {{ selectedCustomers()[0]?.name }}
-</sd-modal-select-button>
-```