@simplysm/sd-claude 14.0.94 → 14.0.95

package/claude/references/sd-simplysm14/apis/angular/controls.md

@@ -1,146 +1,296 @@
 # @simplysm/angular — 폼·입력 컨트롤
 
-버튼·앵커, 텍스트/숫자/날짜 입력, 체크박스/스위치, 셀렉트/드롭다운, 폼/접기/탭/리스트/페이지네이션 등 폼·UI 기본 컨트롤 군. 화면 폼·필터·시트 셀에서 함께 쓰임. 공통: 대부분 컨트롤이 `size: "sm"|"lg"`(미지정=기본), `inline`, `inset`(테두리 제거·셀 내장용), `disabled`, `theme` 을 가짐. 매뉴얼(client-component.md "표준 입력 컨트롤"·"버튼 스타일")의 역할별 theme/size 규약을 따름.
+버튼·앵커, 텍스트/숫자/날짜 입력, 체크박스/스위치, 셀렉트/드롭다운, 폼/접기/탭/리스트/페이지네이션 등 폼·UI 기본 컨트롤 군. 화면 폼·필터·시트 셀에서 함께 쓰임. 공통: 대부분 컨트롤이 `size: "sm"|"lg"`(미지정=기본), `inline`(인라인 배치), `inset`(테두리 제거·셀 내장용), `disabled`, `theme` 을 가짐. 값 입력 컨트롤은 `model()` 양방향, 검증 컨트롤은 `required`/`validatorFn` 보유.
 
-테마 계열(여러 컨트롤 공통): `"primary"|"secondary"|"info"|"success"|"warning"|"danger"|"gray"|"blue-gray"`. 버튼은 추가로 link 계열(`"link"`·`"link-primary"`…`"link-rev"`)을 가짐.
+## 버튼
 
-## 버튼·앵커
+### SdButton — `<sd-button>`
 
-### SdButton — `sd-button`
-- `type: "button"|"submit"` — 폼 제출 버튼이면 `"submit"`.
-- `theme` — 위 테마 계열 + link 계열. 데이터 변경 액션은 일반 계열, 유틸/시트 버튼은 link 계열.
-- `size: "sm"|"lg"` — 크기. 시트 위 버튼은 `"sm"`.
-- `inline`/`inset`/`disabled: boolean` — 인라인 배치/테두리 제거/비활성.
-- `buttonStyle`/`buttonClass: string` — 내부 `<button>` 에 스타일/클래스 주입.
+```ts
+type = input<"button" | "submit">("button");
+theme = input<"primary"|"secondary"|"info"|"success"|"warning"|"danger"|"gray"|"blue-gray"
+  | "link"|"link-primary"|...|"link-blue-gray"|"link-rev">();
+inline; inset; disabled; size = input<"xs"|"sm"|"lg">();
+buttonStyle = input<string>(); buttonClass = input<string>();
+```
+
+- `type` — `"submit"` 이면 폼 제출 트리거(sd-form 안에서). 기본 `"button"`.
+- `theme` — 채움 테마 또는 `link-*`(테두리·배경 없는 링크형), `link-rev`(어두운 배경용 반전). 액션 강조면 채움, 보조면 link.
+- `inset` — 테두리·라운드 제거 후 primary 텍스트색(셀·툴바 내장 버튼). `size="xs"` 는 가장 촘촘한 패딩.
+- `buttonStyle`/`buttonClass` — 내부 `<button>` 에 직접 적용할 style/class 문자열.
+
+```html
+<sd-button [type]="'submit'" [theme]="'primary'">저장</sd-button>
+```
+
+### SdAnchor — `<sd-anchor>`
 
-### SdAnchor — `sd-anchor`
-- `disabled: boolean` — 비활성(클릭/포커스 차단).
-- `theme` — 테마 계열(기본 `"primary"`). 텍스트 링크형 액션.
+```ts
+disabled = input(false);
+theme = input<"primary"|"secondary"|"info"|"success"|"warning"|"danger"|"gray"|"blue-gray">("primary");
+```
+
+- 텍스트 링크형 클릭 요소. `disabled` 면 흐려지고 tabindex 제거. 아이콘/짧은 액션에 사용.
+
+### SdAdditionalButton — `<sd-additional-button>`
 
-### SdAdditionalButton — `sd-additional-button`
-입력 옆에 버튼을 붙이는 컨테이너.
-- `size: "sm"|"lg"` — 크기.
-- `inset: boolean` — 테두리 제거.
+```ts
+size = input<"sm" | "lg">();
+inset = input(false);
+```
+
+- 본문(좌) + 우측 버튼 영역 묶음 컨트롤. `<sd-anchor>`/`<sd-button>` 을 콘텐츠로 투영하면 우측 버튼 영역에 배치. 값 표시 + 보조 액션 조합용.
 
-### SdModalSelectButton<K> — `sd-modal-select-button`
-모달로 항목을 골라 값으로 받는 버튼(필수 검증 내장).
-- `modal: input.required<SdSelectModalInfo<...>>` — 선택 모달. `selectMode`/현재 선택키 주입.
-- `value: model<단일|배열>` — 선택 결과.
-- `selectMode: "single"|"multi"` — 선택 모드(기본 single).
-- `required`/`disabled`/`inset: boolean`, `size: "sm"|"lg"` — 상태/크기.
-- `modalOptions: SdModalOptions` — 모달 옵션.
-- `searchIcon` — 검색 버튼 아이콘.
+### SdModalSelectButton — `<sd-modal-select-button>`
+
+```ts
+modal = input.required<SdSelectModalInfo<SdSelectModal<K>>>();
+value = model<SelectModeValue<K>[M]>();
+disabled; required; inset; size = input<"sm"|"lg">();
+selectMode = input<M>("single"); // "single" | "multi"
+modalOptions = input<SdModalOptions>();
+searchIcon = input(tablerSearch);
+// SdSelectModal<TKey> = SdModalContentDef<SelectModalOutputResult<TKey>> + selectMode/selectedKeys inputs
+// SdSelectModalInfo<T> = SdModalInfo<T, "selectMode" | "selectedKeys">
+```
+
+- 모달로 선택해 값을 채우는 버튼. 검색 버튼 클릭 시 `modal` 을 띄워(현재 값·selectMode 자동 주입) 결과 `{ selectedKeys }` 로 `value` 갱신.
+- `selectMode` — `"single"`=`value` 가 단일 키, `"multi"`=키 배열. 지우기(eraser) 버튼은 `required=false` 이고 값이 있을 때만 노출.
+- `required` 면 빈 선택 시 native invalid(`setupInvalid`). `modal` 은 `SdSelectModal` 계약(selectMode input + selectedKeys model)을 구현한 모달.
 
 ## 텍스트·숫자·날짜 입력
 
-### SdTextfield<K> — `sd-textfield`
-타입별(`type` 으로 결정) 단일 입력. `SdTextfieldTypes` 키로 값 타입 결정.
-- `type: input.required<K>` — `SdTextfieldTypes` 의 키. 값 타입을 결정.
-- `value: model<SdTextfieldTypes[K]>` — 값(타입에 따라 string/number/`DateOnly`/`DateTime`/`Time`).
-- `placeholder`/`title: string` — 안내/타이틀.
-- `disabled`/`readonly`/`required: boolean` — 상태.
-- `min`/`max: SdTextfieldTypes[K]`, `minlength`/`maxlength`/`pattern`/`step` — 검증 제약.
-- `validatorFn: (value) => string | undefined` — 커스텀 검증(반환 문자열이 오류 메시지).
-- `format: string` — `format` 타입의 마스킹 패턴.
-- `useNumberComma: boolean` — 숫자 천단위 콤마(기본 true).
-- `minDigits: number` — 숫자 표시 최소 자릿수.
-- `inline`/`inset: boolean`, `size: "sm"|"lg"`, `theme` — 배치/크기/테마.
-- `inputStyle`/`inputClass`/`autocomplete` — 내부 input 속성.
-
-`SdTextfieldTypes` 키: `number`(number), `text`/`password`/`color`/`email`/`format`(string), `date`/`month`/`year`(`DateOnly`), `datetime`/`datetime-sec`(`DateTime`), `time`/`time-sec`(`Time`). 런타임 키 배열 `sdTextfieldTypes`.
+### SdTextfield — `<sd-textfield>`
+
+```ts
+value = model<SdTextfieldTypes[K]>();
+type = input.required<K>(); // K extends keyof SdTextfieldTypes
+placeholder; title; inputStyle; inputClass;
+disabled; readonly; required;
+min/max = input<SdTextfieldTypes[K]>(); minlength; maxlength; pattern = input<string>();
+validatorFn = input<(value) => string | undefined>(); format = input<string>();
+step; autocomplete; useNumberComma = input(true); minDigits = input<number>();
+inline; inset; size = input<"sm"|"lg">(); theme;
+// SdTextfieldTypes: number, text, password, color, email, format,
+//   date/month/year(DateOnly), datetime/datetime-sec(DateTime), time/time-sec(Time)
+```
+
+- `type` — 값 타입을 결정(제네릭으로 `value` 타입 추론). 날짜·시간 타입은 `DateOnly`/`DateTime`/`Time` 객체를 값으로 주고받음(문자열 아님).
+- `format` — `type="format"` 에서 `X` 자리 마스크(예: `"XXX-XXXX"`, `|` 로 길이 분기). `type="number"` 의 `useNumberComma`=천단위 콤마 표시, `minDigits`=최소 소수자릿수.
+- `required`/`min`/`max`/`minlength`/`maxlength`/`pattern`/`validatorFn` — 타입별 핸들러 + 사용자 함수로 검증, 실패 시 native invalid 표시. `readonly`/`disabled` 면 input 대신 표시용 텍스트만 렌더.
+- `sdTextfieldTypes` — `(keyof SdTextfieldTypes)[]` 상수. 타입 목록을 순회/검증할 때 사용.
 
 ```html
-<sd-textfield [type]="'number'" [(value)]="data().qty" (valueChange)="mark(data)" [required]="true" />
+<sd-textfield [type]="'number'" [(value)]="qty" [required]="true" [min]="1" />
+<sd-textfield [type]="'date'" [(value)]="orderDate" />
 ```
 
-### SdTextarea — `sd-textarea`
-여러 줄 텍스트. `value: model<string>`, `minRows: number`(기본 1), 외에 textfield 와 유사한 `placeholder`/`disabled`/`readonly`/`required`/`validatorFn`/`size`/`theme`/`inline`/`inset`/`inputStyle`/`inputClass`.
+### SdTextarea — `<sd-textarea>`
+
+```ts
+value = model<string>();
+placeholder; title; minRows = input(1);
+disabled; readonly; required; inline; inset; size = input<"sm"|"lg">();
+validatorFn = input<(value: string | undefined) => string | undefined>();
+theme; inputStyle; inputClass;
+```
 
-### SdNumpad — `sd-numpad`
-화면 숫자 키패드 입력.
-- `value: model<number>` — 값.
-- `placeholder: string`, `required`/`inputDisabled: boolean` — 안내/필수/직접입력 비활성.
-- `useEnterButton`/`useMinusButton: boolean` — 엔터/마이너스 버튼 노출.
-- `enterButtonClick: output` — 엔터 버튼 클릭.
+- 여러 줄 텍스트. 행 수는 `minRows` 와 줄바꿈 개수 중 큰 값으로 자동 확장. 빈 입력은 undefined(결측 보존).
 
-### SdRange<K> — `sd-range`
-같은 타입 두 값(from/to) 범위 입력.
-- `type: input.required<K>` — `SdTextfieldTypes` 키.
-- `from`/`to: model<SdTextfieldTypes[K]>` — 범위 양끝.
-- `required`/`disabled: boolean`, `inputStyle: string`.
+### SdNumpad — `<sd-numpad>`
 
-### SdDateRangePicker — `sd-date-range-picker`
-기간 유형 + 날짜 범위 입력.
-- `periodType: model<"일"|"월"|"범위">` — 기간 단위(기본 `"범위"`). `"일"`/`"월"` 은 단일 날짜를 from/to 로 환산.
-- `from`/`to: model<DateOnly>` — 시작/끝 날짜.
-- `required: boolean`.
+```ts
+value = model<number>(); placeholder; required;
+inputDisabled = input(false); useEnterButton = input(false); useMinusButton = input(false);
+enterButtonClick = output();
+```
+
+- 터치 숫자 키패드. 상단 표시 textfield + 0~9·소수점·BS·C 버튼. `useEnterButton`=ENT 버튼 노출(눌리면 `enterButtonClick`), `useMinusButton`=부호 토글 버튼, `inputDisabled`=상단 직접 입력 차단(버튼만).
+
+### SdRange — `<sd-range>`
+
+```ts
+type = input.required<K>(); // keyof SdTextfieldTypes
+from = model<SdTextfieldTypes[K]>(); to = model<SdTextfieldTypes[K]>();
+inputStyle; required; disabled;
+```
+
+- `from ~ to` 두 textfield 묶음. `to` 의 min 이 `from` 으로 자동 설정. 날짜/숫자 범위 입력에 사용.
+
+### SdDateRangePicker — `<sd-date-range-picker>`
+
+```ts
+periodType = model<"일" | "월" | "범위">("범위");
+from = model<DateOnly>(); to = model<DateOnly>(); required;
+```
+
+- 기간 선택. `periodType` `"일"`=단일 날짜(from=to), `"월"`=해당 월 1일~말일 자동 세팅, `"범위"`=from/to 직접. 검색 필터의 기간 조건에 사용.
 
 ## 체크박스·스위치
 
-### SdCheckbox — `sd-checkbox`
-- `value: model<boolean>` — 체크 여부.
-- `radio: boolean` — 라디오 모양(그룹 내 단일 선택).
-- `canChangeFn: (item) => boolean | Promise<boolean>` — 변경 허용 가드(`setupModelHook` 경유).
-- `icon` — 체크 아이콘(기본 `tablerCheck`).
-- `disabled`/`inline`/`inset: boolean`, `size: "sm"|"lg"` — 상태/크기.
-- `theme` — 테마 계열 + `"white"`. `contentStyle: string`.
-
-### SdSwitch — `sd-switch`
-- `value: model<boolean>` — on/off.
-- `canChangeFn` — 변경 가드.
-- `disabled`/`inline`/`inset: boolean`, `size`, `theme` — 상태/크기/테마.
-
-### SdCheckboxGroup<T> / SdCheckboxGroupItem<T>
-여러 항목 다중 선택 그룹.
-- `SdCheckboxGroup`: `value: model<T[]>`(선택된 값 배열), `disabled: boolean`.
-- `SdCheckboxGroupItem`: `value: input.required<T>`(이 항목 값), `inline: boolean`.
-
-## 셀렉트·드롭다운
-
-### SdSelect<T, M> — `sd-select`
-드롭다운 선택. 직속 `<sd-select-item>` 들 또는 `[items]`+`[itemOf]` 템플릿으로 옵션 구성.
-- `selectMode: M`("single"|"multi", 기본 single) — 선택 모드.
-- `value: model<단일|배열>` — 선택 값(들).
-- `items: input<T[]>` + `trackByFn`/`getChildrenFn` — 데이터 기반 옵션(트리 지원).
-- `placeholder: string`, `required`/`disabled`/`inline`/`inset: boolean`, `size`.
-- `hideSelectAll: boolean` — multi 모드 전체선택 숨김.
-- `multiSelectionDisplayDirection: "vertical"` — 다중 선택 표시를 세로로.
-- `dropdownOpen: model<boolean>` — 드롭다운 열림 상태.
-- `contentClass`/`contentStyle: string`.
-
-`SelectModeValue<T>` — `{ multi: T[]; single: T }`(선택 모드별 값 타입).
-
-### SdSelectItem<T> — `sd-select-item`
-- `value: input<T>` — 항목 값.
-- `disabled`/`hidden: boolean` — 비활성/숨김.
-
-### SdSelectButton — `sd-select-button`
-셀렉트 드롭다운 안에 끼우는 액션 버튼(리플 내장). 입력 없음.
-
-### SdDropdown / SdDropdownPopup — `sd-dropdown` / `sd-dropdown-popup`
-범용 드롭다운. `SdDropdown`: `open: model<boolean>`, `disabled: boolean`. 자식으로 트리거 컨텐츠 + `<sd-dropdown-popup>`(팝업 본문) 배치.
-
-## 폼·레이아웃 컨트롤
-
-### SdForm — `sd-form`
-Enter 로 submit 처리. `formSubmit: output<SubmitEvent>`, `formInvalid: output`. (`sd-crud-*` 는 내부에 폼 보유, 별도 래핑 불필요.)
-
-### SdCollapse / SdCollapseIcon
-- `SdCollapse`(`sd-collapse`): `open: boolean` — 펼침. 자식을 높이 애니메이션으로 접기/펼치기.
-- `SdCollapseIcon`(`sd-collapse-icon`): `icon`(기본 chevron), `open: boolean`, `openRotate: number`(열림 시 회전각, 기본 90).
-
-### SdTab / SdTabItem
-- `SdTab`(`sd-tab`): `value: model<any>` — 선택된 탭 값.
-- `SdTabItem`(`sd-tab-item`): `value: input<any>` — 이 탭 값. 클릭 시 부모 `value` 갱신.
-
-### SdList / SdListItem
-- `SdList`(`sd-list`): `inset: boolean` — 테두리 제거(중첩 리스트).
-- `SdListItem`(`sd-list-item`): `layout: "accordion"|"flat"`(기본 accordion, 자식 펼침 방식), `open: model<boolean>`, `selected: boolean`, `selectedIcon: string`, `readonly: boolean`, `contentStyle`/`contentClass: string`.
-
-### SdGap — `sd-gap`
-빈 간격. `height`/`width: "xxs"|"xs"|"sm"|"default"|"lg"|"xl"|"xxl"`(토큰 간격), `heightPx`/`widthPx`/`widthEm: number`(절대 간격).
-
-### SdPagination — `sd-pagination`
-- `currentPage: model<number>` — 현재 페이지(0 기반).
-- `totalPageCount: number` — 총 페이지 수.
-- `visiblePageCount: number` — 한 번에 보이는 페이지 번호 수(기본 10).
+### SdCheckbox — `<sd-checkbox>`
+
+```ts
+value = model(false);
+canChangeFn = input<(item: boolean) => boolean | Promise<boolean>>(() => true);
+icon = input(tablerCheck); radio = input(false); disabled;
+size = input<"sm"|"lg">(); inline; inset;
+theme = input<...|"white">(); contentStyle = input<string>();
+```
+
+- `value` — 체크 상태(model 양방향). `canChangeFn` 이 false 반환 시 변경 거부(`setupModelHook`), Promise 면 비동기 확인 후 적용.
+- `radio` — true 면 라디오 외형(클릭 시 항상 true 로만 set, 해제 불가). `icon` 으로 체크 아이콘 교체, `theme="white"` 는 어두운 배경용.
+
+### SdSwitch — `<sd-switch>`
+
+```ts
+value = model(false);
+canChangeFn = input<(item: boolean) => boolean | Promise<boolean>>(() => true);
+disabled; inline; inset; size = input<"sm"|"lg">(); theme;
+```
+
+- 토글 스위치. on 이면 success(또는 `theme`) 색. `canChangeFn` 동작은 체크박스와 동일.
+
+### SdCheckboxGroup / SdCheckboxGroupItem — `<sd-checkbox-group>` / `<sd-checkbox-group-item>`
+
+```ts
+// group
+value = model<T[]>([]); disabled = input(false);
+// item
+value = input.required<T>(); inline = input(false);
+```
+
+- 그룹은 선택된 값 배열(`T[]`)을 보유. 각 item 의 `value` 가 그룹 배열에 포함되면 체크, 토글 시 배열에서 추가/제거. 다중 선택 묶음에 사용.
+
+## 선택(select)·드롭다운
+
+### SdSelect — `<sd-select>`
+
+```ts
+selectMode = input("single"); // "single" | "multi"
+value = model<SelectModeValue<any>[M]>(); // single=T, multi=T[]
+placeholder; disabled; inline; inset; size = input<"sm"|"lg">(); required;
+hideSelectAll = input(false); multiSelectionDisplayDirection = input<"vertical">();
+items = input<T[]>(); trackByFn = input<(item, index) => unknown>((item)=>item);
+getChildrenFn = input<(item: T) => T[] | undefined>();
+contentClass; contentStyle; dropdownOpen = model(false);
+// SelectModeValue<T> = { multi: T[]; single: T }
+selectItem(v); toggleItem(v); onSelectAll(); onDeselectAll(); openDropdown(); closeDropdown();
+```
+
+- `selectMode` — `"single"`=단일(선택 시 닫힘), `"multi"`=다중(체크박스·전체선택바). `value` 타입이 모드에 따라 분기.
+- 항목은 `<sd-select-item>` 을 콘텐츠로 두거나 `items`+`itemOf` 템플릿으로 렌더. `getChildrenFn` 지정 시 트리 평탄화. `hideSelectAll`=multi 전체선택바 숨김, `multiSelectionDisplayDirection="vertical"`=선택 표시 세로 나열.
+- `#headerTpl`/`#beforeTpl`/`itemOf` 템플릿 슬롯으로 검색바·상단 항목·반복 항목 커스터마이즈. `<sd-select-button>` 콘텐츠는 우측 액션 버튼으로 투영.
+
+```html
+<sd-select [(value)]="status" [required]="true">
+  <sd-select-item [value]="'active'">사용</sd-select-item>
+  <sd-select-item [value]="'inactive'">미사용</sd-select-item>
+</sd-select>
+```
+
+### SdSelectItem — `<sd-select-item>`
+
+```ts
+value = input<T | undefined>(undefined); disabled = input(false); hidden = input(false);
+```
+
+- 한 선택 항목. multi 모드면 좌측 체크박스 자동 표시. `value` 가 부모 select 값과 매칭되면 선택 강조. `hidden`=DOM 유지하되 숨김(검색 필터 등).
+
+### SdSelectButton — `<sd-select-button>`
+
+```ts
+// 입력 없음. 콘텐츠 투영용.
+```
+
+- select 우측에 붙는 액션 버튼 슬롯(ripple 내장). 관리/검색 모달 트리거 등에 사용.
+
+### SdDropdown / SdDropdownPopup — `<sd-dropdown>` / `<sd-dropdown-popup>`
+
+```ts
+// dropdown
+open = model(false); disabled = input(false);
+// popup: 입력 없음
+```
+
+- 임의 콘텐츠를 여는 드롭다운. 트리거 콘텐츠 + `<sd-dropdown-popup>` 한 쌍. 열리면 popup 을 body 로 이동해 위치 계산(모바일은 하단 시트 + backdrop). 키보드 ↑/↓/Esc/Space 로 열고닫기·이동. select·테마셀렉터·탑바메뉴가 내부 사용.
+
+## 폼·접기·탭·리스트·기타
+
+### SdForm — `<sd-form>`
+
+```ts
+formElRef = viewChild.required<ElementRef<HTMLFormElement>>("formEl");
+get formEl: HTMLFormElement;
+formSubmit = output<SubmitEvent>(); formInvalid = output();
+requestSubmit(): void;
+```
+
+- native form 래퍼. 제출 시 `checkValidity()` 통과하면 `formSubmit`, 실패하면 `reportValidity()` 후 `formInvalid`. `requestSubmit()` 으로 외부에서 제출 트리거(CTRL+S 등).
+
+```html
+<sd-form (formSubmit)="onSubmit()"> ... <sd-button [type]="'submit'">저장</sd-button> </sd-form>
+```
+
+### SdCollapse / SdCollapseIcon — `<sd-collapse>` / `<sd-collapse-icon>`
+
+```ts
+// collapse
+open = input(false);
+// collapse-icon
+icon = input(tablerChevronDown); open = input(false); openRotate = input(90);
+```
+
+- `sd-collapse` 는 `open` 에 따라 콘텐츠 높이를 애니메이션 접기/펼치기. `sd-collapse-icon` 은 `open` 시 `openRotate`(deg) 회전하는 펼침 표시 아이콘(보통 collapse 헤더에 동반).
+
+### SdTab / SdTabItem — `<sd-tab>` / `<sd-tab-item>`
+
+```ts
+// tab
+value = model<any>();
+// tab-item
+value = input<any>();
+```
+
+- `sd-tab` 은 현재 탭 값을 고르는 선택 컨트롤(콘텐츠 컨테이너 아님). `sd-tab-item` 의 `value` 가 부모 값과 같으면 선택. 콘텐츠 분기는 바깥에서 `@if`/`@switch` 로. 값 시그널은 literal union 으로.
+
+```html
+<sd-tab [(value)]="activeTab">
+  <sd-tab-item [value]="'info'">기본정보</sd-tab-item>
+  <sd-tab-item [value]="'history'">이력</sd-tab-item>
+</sd-tab>
+```
+
+### SdList / SdListItem — `<sd-list>` / `<sd-list-item>`
+
+```ts
+// list
+inset = input(false);
+// list-item
+layout = input<"accordion" | "flat">("accordion");
+open = model(false); selected = input(false); selectedIcon = input<string>();
+readonly = input(false); contentStyle; contentClass;
+// #toolTpl 슬롯, 중첩 <sd-list> 로 트리
+```
+
+- `inset` — 카드 외형(테두리·배경) 제거(임베드용). list-item 의 `layout` `"accordion"`=클릭 시 자식 펼침(트리), `"flat"`=섹션 헤더(항상 펼침).
+- `selected`=선택 강조, `selectedIcon`=리프 항목 좌측 선택 아이콘, `readonly`=클릭 펼침 비활성. 자식 `<sd-list>` 중첩으로 다단 트리. 사이드바 메뉴가 이를 사용.
+
+### SdGap — `<sd-gap>`
+
+```ts
+height/width = input<"xxs"|"xs"|"sm"|"default"|"lg"|"xl"|"xxl">();
+heightPx; widthPx; widthEm = input<number>();
+```
+
+- 간격 스페이서. 토큰(`height`/`width`) 또는 px/em 으로 지정. width 류면 inline-block, height 면 block, 값 0 이면 미표시.
+
+### SdPagination — `<sd-pagination>`
+
+```ts
+currentPage = model(0); // 0-based
+totalPageCount = input(0); visiblePageCount = input(10);
+goToPage(p); goToFirst(); goToLast(); goToNextGroup(); goToPrevGroup();
+```
+
+- 페이지 네비게이션. `currentPage` 는 0-base 양방향. `visiblePageCount` 묶음 단위로 이전/다음 그룹·처음/끝 이동. 시트·리스트 페이징에 사용.

package/claude/references/sd-simplysm14/apis/angular/crud.md

@@ -1,80 +1,75 @@
 # @simplysm/angular — CRUD 화면 골격
 
-목록/단건 화면의 표준 컨테이너 골격. `sd-base-container`(공통 셸) 위에 `sd-crud-list`(목록), `sd-crud-detail`(단건)이 얹힘. 표준 시그널(ready/initialized/busyCount/viewType)·page/modal/control 컨텍스트별 탑바·하단바 자동 구성·CTRL+S 저장을 내장. 화면 데이터 흐름·시그널 전파 규약은 client-component.md / client-crud.md 를 따름.
+목록/단건 화면의 표준 컨테이너 골격. `sd-base-container`(공통 셸) 위에 `sd-crud-list`(목록), `sd-crud-detail`(단건)이 얹힘. 표준 시그널(ready/initialized/busyCount/viewType)·page/modal/control 컨텍스트별 탑바·하단바 자동 구성·CTRL+S 저장을 내장. 사용 절차는 [client-crud.md](../manuals/client-crud.md) 참조.
 
-## 표준 시그널 (3 컴포넌트 공통)
+## SdBaseContainer — `<sd-base-container>`
 
-세 컴포넌트 모두 화면 표준 시그널을 입력/모델로 받음:
-- `ready: model<boolean>` — 자식이 데이터 로드를 시작해도 되는 시점. 컨테이너가 공유데이터 로드 완료 후 true 로 set.
-- `initialized: input<boolean>` — 첫 데이터 로드 완료 여부(자식이 set 한 값을 받음). true 가 되어야 본문 렌더.
-- `busyCount: model<number>` — 진행 중 비동기 작업 수. 0 보다 크면 busy 표시.
-- `restricted: input<boolean>` — 권한 없음. true 면 "사용권한이 없습니다" 안내만 표시.
-- `viewType: input.required<SdViewType>` — page/modal/control 컨텍스트(`injectViewTypeSignal()` 전달). page 면 탑바를, modal 이면 하단 확인/취소를 구성.
-
-## SdBaseContainer
-
-selector `sd-base-container`. 모든 화면의 공통 셸(busy·권한 안내·page 탑바·콘텐츠/명령 슬롯).
-
-- 위 표준 시그널 + 슬롯: `#topbarTpl`(page 탑바 추가 영역), `#commandTpl`(상단 명령 줄), `#contentTpl`(본문), `#bottomCommandTpl`(하단 명령 줄).
-- 생성자에서 `SdSharedDataProvider` 가 있으면 그 로드 완료(`wait()`)를 기다린 뒤 `ready` 를 true 로 set.
-
-```html
-<sd-base-container [(ready)]="ready" [initialized]="initialized()" [(busyCount)]="busyCount"
-  [restricted]="!perms().includes('use')" [viewType]="viewType()">
-  <ng-template #contentTpl>...</ng-template>
-</sd-base-container>
+```ts
+ready = model(false); initialized = input(false); busyCount = model(0);
+restricted = input(false); viewType = input.required<SdViewType>(); // "page"|"modal"|"control"
+viewTitle = injectViewTitleSignal(); // 자동
+// 슬롯: #topbarTpl #commandTpl #contentTpl #bottomCommandTpl
 ```
 
-## SdCrudList<TItem, TKey>
-
-selector `sd-crud-list`. 검색폼·등록/삭제/복원 버튼·시트·페이지네이션을 갖춘 목록 골격. 직속 자식 `<sd-sheet-column>` 들을 내부 시트로 투영. `Ctrl+S` 로 저장 명령.
-
-추가 입력:
-- `readonly: input<boolean>` — 읽기 전용. true 면 등록/삭제/저장 버튼 숨김.
-- `inlineEdit: input<boolean>` — 시트 셀 인라인 편집 + 저장 버튼 노출(기본 true). `readonly` 면 무시.
-- `selectMode: "single"|"multi"` — 선택 모드. 모달 선택 시 하단 확인/해제 버튼 구성.
-- `key: input.required<string>` — 시트 컬럼 구성 영속화 키.
-- `items: input<TItem[]>` — 행 데이터.
-- `selectedKeys: model<NonNullable<TKey>[]>` — 선택 키.
-- `currDeletedItems: input<TItem[]>` — 삭제 표시 행(복원 대상 판정).
-- `currentPage: model<number>`, `totalPageCount`/`itemsPerPage`/`visiblePageCount: input<number>` — 페이징(서버 페이징은 `totalPageCount`, 클라 페이징은 `itemsPerPage`).
-- `sorts: model<SortingDef[]>` — 정렬 상태.
-- `trackByFn: input.required<(item) => TKey>` — 행 키 함수.
-- `getItemSelectableFn: input<(item) => boolean | string>` — 행 선택 가능 여부(문자열 반환 시 불가 사유). 내부 시트로 전달.
-
-출력:
-- `filterSubmit: output` — 검색폼 제출(조회).
-- `submit: output` — 인라인 편집 저장(Ctrl+S/저장 버튼).
-- `create: output` — 등록 버튼.
-- `delete: output<TItem[]>` — 선택 행 삭제(선택 항목 전달).
-- `restore: output<TItem[]>` — 선택된 삭제 행 복원.
+- `initialized` — false 동안 busy 표시. `busyCount`>0 이면 busy(model 양방향, 화면이 +1/-1 누적). `restricted`=권한 없음 안내 화면 표시(콘텐츠 미렌더).
+- `viewType` — `"page"`=탑바(제목+#topbarTpl) 포함, `"modal"`/`"control"`=콘텐츠만. `ready` 는 공유데이터 로드 완료 후 true(model, 화면이 이를 보고 초기화 진행).
+- 직접 쓰기보다 `sd-crud-list`/`sd-crud-detail` 또는 커스텀 화면 셸로 사용. 슬롯은 `#topbarTpl`(탑바 추가), `#commandTpl`(명령영역), `#contentTpl`(본문), `#bottomCommandTpl`(하단).
+
+## SdCrudList — `<sd-crud-list>`
+
+```ts
+ready = model(false); initialized = input(false); busyCount = model(0);
+restricted = input(false); readonly = input(false); inlineEdit = input(true);
+viewType = input.required<SdViewType>(); selectMode = input<"single" | "multi">();
+key = input.required<string>();
+items = input<TItem[]>([]); selectedKeys = model<NonNullable<TKey>[]>([]);
+currDeletedItems = input<TItem[]>([]);
+currentPage = model(0); totalPageCount = input(0); itemsPerPage = input(0); visiblePageCount = input(10);
+sorts = model<SortingDef[]>([]);
+trackByFn = input.required<(item: TItem) => TKey>();
+getItemSelectableFn = input<(item: TItem) => boolean | string>();
+
+filterSubmit = output(); submit = output(); create = output();
+delete = output<TItem[]>(); restore = output<TItem[]>();
+// 슬롯: #filterTpl #toolTpl #commandTpl #bottomCommandTpl, 직속 <sd-sheet-column>
+```
 
-슬롯: `#filterTpl`(검색 폼 항목), `#commandTpl`/`#bottomCommandTpl`(명령 줄), `#toolTpl`(도구 줄).
+- 목록 표준 골격(시트 + 검색폼 + 등록/삭제/복구 버튼 + CTRL+S 저장 + 모달 선택모드).
+- `readonly` — 편집 전체 불가(시트 선택만). `inlineEdit`(기본 true) — true 면 시트를 `<sd-form>` 으로 감싸 셀 인라인 편집 + per-row 삭제컬럼, false 면 조회·선택 전용(편집은 외부 상세/모달). 둘은 직교.
+- `selectMode` — `"single"`=행 클릭 즉시(modal 이면 close), `"multi"`=하단 확인 버튼. modal+selectMode 면 close 시 `{ selectedKeys }` 자동 전달.
+- `currDeletedItems` — 현재 삭제(soft delete)된 항목들. 해당 행은 취소선 + 복구 버튼으로 표시. `key` 는 시트 설정 저장 키(`<key>-sheet`).
+- 출력: `filterSubmit`(검색), `submit`(인라인 편집 저장, inlineEdit=true 일 때만), `create`(등록), `delete`/`restore`(선택 항목 배열). `<sd-sheet-column>` 을 직속에 두면 내부 시트로 투영.
 
 ```html
-<sd-crud-list [viewType]="viewType()" [key]="'goods-list'" [(selectedKeys)]="selectedKeys"
-  [items]="items()" [trackByFn]="trackByFn" [totalPageCount]="pageLength()" [(currentPage)]="page"
-  (filterSubmit)="onFilterSubmit()" (create)="onCreate()" (delete)="onDelete($event)">
+<sd-crud-list [(ready)]="ready" [initialized]="initialized()" [(busyCount)]="busyCount"
+  [restricted]="!perms().includes('use')" [readonly]="!canEdit()" [viewType]="viewType()"
+  [key]="'role'" [items]="items()" [trackByFn]="trackByFn" [(selectedKeys)]="selectedKeys"
+  (create)="onCreate()" (delete)="onDelete($event)" (restore)="onRestore($event)">
   <ng-template #filterTpl>...</ng-template>
   <sd-sheet-column [key]="'name'" [header]="'이름'">
-    <ng-template [cell]="items()" let-item="item"><div class="p-xs-sm">{{ item.name }}</div></ng-template>
+    <ng-template [cell]="items()" let-item="item">{{ item.name }}</ng-template>
   </sd-sheet-column>
 </sd-crud-list>
 ```
 
-## SdCrudDetail
+## SdCrudDetail — `<sd-crud-detail>`
 
-selector `sd-crud-detail`. 단건 편집 골격(폼 + 저장 명령).
+```ts
+ready = model(false); initialized = input(false); busyCount = model(0);
+restricted = input(false); readonly = input(false);
+viewType = input.required<SdViewType>();
+submit = output();
+// 슬롯: #contentTpl(필수) #commandTpl #bottomCommandTpl
+```
 
-추가 입력/출력:
-- `readonly: input<boolean>` — 읽기 전용(저장 버튼 숨김).
-- `submit: output` — 저장(폼 제출/저장 버튼).
-- 슬롯: `#commandTpl`(상단 명령), `#contentTpl`(폼 본문), `#bottomCommandTpl`(하단 명령).
-- `onSaveButtonClick()` — 내부 폼의 `requestSubmit()` 호출(저장 트리거).
+- 단건 편집 표준 골격(폼 래핑 + CTRL+S 저장 + 저장 버튼 + modal "확인" 자동).
+- `readonly` — true 면 `#contentTpl` 을 `<sd-form>` 없이 그대로(읽기), false 면 폼으로 감싸 `submit` 출력. `viewType` `"page"`=상단 저장버튼, `"control"`=명령영역 저장버튼, `"modal"`=하단 우측 "확인" 자동.
+- `#contentTpl`(필수) 폼 본문, `#commandTpl`/`#bottomCommandTpl` 추가 액션.
 
 ```html
-<sd-crud-detail [viewType]="viewType()" [(ready)]="ready" [initialized]="initialized()"
-  [(busyCount)]="busyCount" (submit)="onSubmit()">
-  <ng-template #contentTpl><div class="form-table">...</div></ng-template>
+<sd-crud-detail [(ready)]="ready" [initialized]="initialized()" [(busyCount)]="busyCount"
+  [restricted]="!perms().includes('use')" [readonly]="!canEdit()" [viewType]="viewType()"
+  (submit)="onSubmit()">
+  <ng-template #contentTpl><!-- 폼 본문 --></ng-template>
 </sd-crud-detail>
 ```