@simplysm/angular 14.0.49 → 14.0.51

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

@@ -0,0 +1,105 @@
+# `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

@@ -0,0 +1,39 @@
+# `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

@@ -0,0 +1,81 @@
+# `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

@@ -0,0 +1,27 @@
+# `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

@@ -0,0 +1,89 @@
+# `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

@@ -0,0 +1,54 @@
+# `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>
+```

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

@@ -0,0 +1,26 @@
+# `SdNumpad`
+
+숫자 패드 입력 컴포넌트. 버튼을 클릭하여 숫자를 입력한다.
+
+```typescript
+@Component({ selector: "sd-numpad", ... })
+export class SdNumpad
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `value` | model | `number \| undefined` | 숫자 값 |
+| `placeholder` | input | `string \| undefined` | 플레이스홀더 |
+| `required` | input | `boolean` | 필수 여부 (기본값: `false`) |
+| `inputDisabled` | input | `boolean` | 상단 텍스트 입력 비활성화 (기본값: `false`) |
+| `useEnterButton` | input | `boolean` | 확인 버튼 표시 (기본값: `false`) |
+| `useMinusButton` | input | `boolean` | 부호 반전 버튼 표시 (기본값: `false`) |
+| `enterButtonClick` | output | `void` | 확인 버튼 클릭 이벤트 |
+
+## Usage
+
+```html
+<sd-numpad [(value)]="quantity" [useEnterButton]="true" (enterButtonClick)="onConfirm()" />
+```

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

@@ -0,0 +1,26 @@
+# `SdRange`
+
+범위 입력 컴포넌트. `from`/`to` 두 개의 `SdTextfield`를 나란히 배치한다.
+
+```typescript
+@Component({ selector: "sd-range", ... })
+export class SdRange<K extends keyof SdTextfieldTypes>
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `type` | input (required) | `K` | 텍스트필드 타입 (`SdTextfieldTypes`의 키) |
+| `from` | model | `SdTextfieldTypes[K] \| undefined` | 시작 값 |
+| `to` | model | `SdTextfieldTypes[K] \| undefined` | 종료 값 |
+| `inputStyle` | input | `string \| undefined` | 인라인 스타일 |
+| `required` | input | `boolean` | 필수 여부 (기본값: `false`) |
+| `disabled` | input | `boolean` | 비활성화 (기본값: `false`) |
+
+## Usage
+
+```html
+<sd-range [type]="'date'" [(from)]="startDate" [(to)]="endDate" />
+<sd-range [type]="'number'" [(from)]="minValue" [(to)]="maxValue" />
+```

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

@@ -0,0 +1,68 @@
+# `SdSelect`
+
+드롭다운 선택 컴포넌트. single/multi 모드를 지원한다.
+
+```typescript
+@Component({ selector: "sd-select" })
+class SdSelect<T, M extends keyof SelectModeValue<T>> {
+  selectMode = input("single" as M);
+  value = model<SelectModeValue<any>[M]>();
+  placeholder = input<string>();
+  disabled = input(false, { transform: booleanAttribute });
+  inline = input(false, { transform: booleanAttribute });
+  inset = input(false, { transform: booleanAttribute });
+  size = input<"sm" | "lg">();
+  required = input(false, { transform: booleanAttribute });
+  hideSelectAll = input(false, { transform: booleanAttribute });
+  multiSelectionDisplayDirection = input<"vertical">();
+  items = input<T[]>();
+  getChildrenFn = input<(item: T) => T[] | undefined>();
+  contentClass = input<string>();
+  contentStyle = input<string>();
+}
+```
+
+## Members
+
+| Member | Kind | Type | Default | Description |
+|--------|------|------|---------|-------------|
+| `selectMode` | input | `M` | `"single"` | 선택 모드 |
+| `value` | model | `SelectModeValue<any>[M]` | - | 선택된 값 (two-way) |
+| `placeholder` | input | `string \| undefined` | `undefined` | 플레이스홀더 |
+| `disabled` | input | `boolean` | `false` | 비활성화 |
+| `inline` | input | `boolean` | `false` | 인라인 표시 |
+| `inset` | input | `boolean` | `false` | 삽입 스타일 |
+| `size` | input | `"sm" \| "lg" \| undefined` | `undefined` | 크기 |
+| `required` | input | `boolean` | `false` | 필수 |
+| `hideSelectAll` | input | `boolean` | `false` | multi 모드에서 전체 선택 숨김 |
+| `multiSelectionDisplayDirection` | input | `"vertical" \| undefined` | `undefined` | multi 모드 표시 방향 |
+| `items` | input | `T[] \| undefined` | `undefined` | 항목 배열 |
+| `getChildrenFn` | input | `((item) => T[] \| undefined) \| undefined` | `undefined` | 트리 구조 자식 함수 |
+| `contentClass` | input | `string \| undefined` | `undefined` | 트리거 영역 CSS 클래스 |
+| `contentStyle` | input | `string \| undefined` | `undefined` | 트리거 영역 인라인 스타일 |
+
+**스타일 적용**: `contentClass`/`contentStyle`은 트리거 영역(선택값 텍스트와 드롭다운 화살표가 함께 놓인 박스)에만 적용된다.
+
+## Related Types
+
+### `SdSelectItem`
+
+드롭다운 선택 항목.
+
+```typescript
+@Component({ selector: "sd-select-item" })
+class SdSelectItem<T> {
+  value = input.required<T>();
+  disabled = input(false, { transform: booleanAttribute });
+  hidden = input(false, { transform: booleanAttribute });
+}
+```
+
+### `SdSelectButton`
+
+버튼 스타일 선택 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-select-button" })
+class SdSelectButton<T> { }
+```

package/docs/ui-form/sd-shared-data-select.md

@@ -0,0 +1,52 @@
+# `SdSharedDataSelect`
+
+공유 데이터 드롭다운 선택 컴포넌트. 검색 기능 포함. 상세 API는 [features/sd-shared-data-components.md](../features/sd-shared-data-components.md#sdshareddataselect)를 참조한다.
+
+## 시트 셀 내 사용 패턴
+
+시트 셀 안에서 사용할 때 `[inset]="true" [size]="'sm'"`을 반드시 지정한다.
+
+```html
+<sd-sheet-column [header]="'거래처'" [key]="'vendorId'">
+  <ng-template [cell]="items()" let-item let-edit="edit">
+    <sd-shared-data-select
+      [items]="sharedVendors()"
+      [inset]="true"
+      [size]="'sm'"
+      [disabled]="!canEdit()"
+      [readonly]="!edit"
+      [(value)]="item.vendorId"
+      (valueChange)="mark(items)"
+    >
+      <ng-template [itemOf]="sharedVendors()">
+        <div class="flex-row gap-sm">
+          <div>{{ item.__searchText }}</div>
+        </div>
+      </ng-template>
+    </sd-shared-data-select>
+  </ng-template>
+</sd-sheet-column>
+```
+
+## 일반 form 내 사용 패턴
+
+```html
+<sd-shared-data-select
+  [items]="sharedVendors()"
+  [(value)]="data().vendorId"
+  (valueChange)="mark(data)"
+>
+  <ng-template [itemOf]="sharedVendors()">
+    <div class="flex-row gap-sm">
+      <div>{{ item.__searchText }}</div>
+    </div>
+  </ng-template>
+</sd-shared-data-select>
+```
+
+`<ng-template [itemOf]>` 패턴으로 드롭다운 항목의 표시 형식을 커스터마이징한다.
+
+### 실사용 예
+
+- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — 시트 셀 내 공유 데이터 선택
+- [crud-detail.md §9 확장 E: 보조 기능 영역](../recipes/crud-detail.md#9-확장-e-보조-기능-영역) — 보조 form 셀렉터

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

@@ -0,0 +1,37 @@
+# `SdStatePreset`
+
+화면 상태(검색 조건 등)를 로컬 스토리지에 저장하고 불러오는 프리셋 컴포넌트.
+`SdSystemConfigProvider`를 통해 설정 키 기반으로 저장한다.
+
+```typescript
+@Component({ selector: "sd-state-preset", ... })
+export class SdStatePreset
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `key` | input (required) | `string` | 저장 키 (`SdSystemConfigProvider` 기반) |
+| `state` | model | `any` | 현재 상태 객체. 프리셋 클릭 시 해당 프리셋의 상태로 업데이트됨 |
+| `size` | input | `"sm" \| "lg" \| undefined` | 크기 |
+
+## Related Types
+
+### `SdStatePresetDef`
+
+```typescript
+interface SdStatePresetDef {
+  name: string;
+  state: any;
+}
+```
+
+## Usage
+
+```html
+<sd-state-preset [key]="'order-list-search'" [(state)]="searchState" />
+```
+
+> 프리셋 아이콘 클릭 → 이름 입력 모달 → 현재 `state`를 해당 이름으로 저장.
+> 저장된 프리셋 클릭 → `state`가 해당 프리셋의 값으로 업데이트됨.

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

@@ -0,0 +1,27 @@
+# `SdSwitch`
+
+토글 스위치 컴포넌트. `value` model로 on/off 상태를 관리한다.
+
+```typescript
+@Component({ selector: "sd-switch", ... })
+export class SdSwitch
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `value` | model | `boolean` | on/off 상태 (기본값: `false`) |
+| `canChangeFn` | input | `(item: boolean) => boolean \| Promise<boolean>` | 변경 가드 함수 (기본값: 항상 `true`) |
+| `disabled` | input | `boolean` | 비활성화 (기본값: `false`) |
+| `inline` | input | `boolean` | 인라인 표시 (기본값: `false`) |
+| `inset` | input | `boolean` | 인셋 스타일 (기본값: `false`) |
+| `size` | input | `"sm" \| "lg" \| undefined` | 크기 |
+| `theme` | input | `"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "gray" \| "blue-gray" \| undefined` | 색상 테마 |
+
+## Usage
+
+```html
+<sd-switch [(value)]="isActive" [theme]="'primary'" />
+<sd-switch [(value)]="isEnabled" [canChangeFn]="canChangeActiveAsync" />
+```

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

@@ -0,0 +1,33 @@
+# `SdTextarea`
+
+멀티라인 텍스트 입력 컴포넌트. 내용에 따라 행 수가 자동으로 늘어난다.
+
+```typescript
+@Component({ selector: "sd-textarea", ... })
+export class SdTextarea
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `value` | model | `string \| undefined` | 입력 값 |
+| `placeholder` | input | `string \| undefined` | 플레이스홀더 텍스트 |
+| `title` | input | `string \| undefined` | 툴팁 |
+| `minRows` | input | `number` | 최소 행 수 (기본값: `1`) |
+| `disabled` | input | `boolean` | 비활성화 (기본값: `false`) |
+| `readonly` | input | `boolean` | 읽기 전용 (기본값: `false`) |
+| `required` | input | `boolean` | 필수 여부 (기본값: `false`) |
+| `inline` | input | `boolean` | 인라인 표시 (기본값: `false`) |
+| `inset` | input | `boolean` | 인셋 스타일 (기본값: `false`) |
+| `size` | input | `"sm" \| "lg" \| undefined` | 크기 |
+| `validatorFn` | input | `(value: string \| undefined) => string \| undefined` | 커스텀 유효성 검사 함수 |
+| `theme` | input | `"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "gray" \| "blue-gray" \| undefined` | 배경 테마 |
+| `inputStyle` | input | `string \| undefined` | 인라인 스타일 |
+| `inputClass` | input | `string \| undefined` | 추가 CSS 클래스 |
+
+## Usage
+
+```html
+<sd-textarea [(value)]="description" [placeholder]="'설명을 입력하세요'" [minRows]="3" />
+```