@simplysm/angular 14.0.46 → 14.0.48

package/docs/ui-navigation.md

@@ -0,0 +1,273 @@
+# UI - Navigation
+
+## Collapse
+
+### `SdCollapse`
+
+접기/펼치기 패널 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-collapse" })
+class SdCollapse {
+  open = input(false, { transform: booleanAttribute });
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `open` | `boolean` | `false` | 펼침 상태 |
+
+### `SdCollapseIcon`
+
+접기/펼치기 아이콘 컴포넌트. 화살표 회전 애니메이션.
+
+```typescript
+@Component({ selector: "sd-collapse-icon" })
+class SdCollapseIcon {
+  open = input(false, { transform: booleanAttribute });
+  openRotate = input(90, { transform: numberAttribute });
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `open` | `boolean` | `false` | 펼침 상태 |
+| `openRotate` | `number` | `90` | 열림 시 회전 각도 |
+
+## Tab
+
+> **CRITICAL — 역할 범위**
+> `sd-tab`/`sd-tab-item`은 **상단의 탭 선택 UI만** 담당한다. 내부 뷰(패널) 전환 기능은 **없다**.
+> `sd-tab-item`의 `<ng-content>`는 **탭 라벨 전용**이다. 이 안에 시트/폼/상세 등 뷰 콘텐츠를 넣지 않는다.
+> 뷰 콘텐츠는 `sd-tab` **바깥**에서 선택된 `value`를 기준으로 `@if` / `@switch`로 제어한다.
+
+### `SdTab`
+
+탭 컨테이너 컴포넌트. 선택된 값을 `value` model로 보관한다.
+
+```typescript
+@Component({ selector: "sd-tab" })
+class SdTab<T> {
+  value = model<T>();
+}
+```
+
+### `SdTabItem`
+
+탭 항목 컴포넌트. 자신의 `value`가 부모 `SdTab.value`와 같으면 선택 상태가 된다. 클릭 시 부모 `value`를 자신의 `value`로 세팅한다.
+
+```typescript
+@Component({ selector: "sd-tab-item" })
+class SdTabItem<T> {
+  value = input.required<T>();
+}
+```
+
+### 사용 예시
+
+```html
+<!-- ✅ 올바른 사용: 탭은 선택 UI, 뷰는 @if로 제어 -->
+<sd-tab [(value)]="tab">
+  <sd-tab-item [value]="'list'">목록</sd-tab-item>
+  <sd-tab-item [value]="'detail'">상세</sd-tab-item>
+</sd-tab>
+
+@if (tab() === "list") {
+  <sd-sheet ...></sd-sheet>
+}
+@if (tab() === "detail") {
+  <app-detail ...></app-detail>
+}
+```
+
+```html
+<!-- ❌ 잘못된 사용: sd-tab-item 안에 뷰 콘텐츠를 넣음 -->
+<sd-tab [(value)]="tab">
+  <sd-tab-item [value]="'list'">
+    목록
+    <sd-sheet ...></sd-sheet>   <!-- 금지: 라벨 영역에 뷰를 넣지 않는다 -->
+  </sd-tab-item>
+</sd-tab>
+```
+
+## Pagination
+
+### `SdPagination`
+
+페이지네이션 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-pagination" })
+class SdPagination {
+  currentPage = model(0);
+  totalPageCount = input(0, { transform: numberAttribute });
+  visiblePageCount = input(10, { transform: numberAttribute });
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `currentPage` | `number` | `0` | 현재 페이지 (0-based, two-way) |
+| `totalPageCount` | `number` | `0` | 총 페이지 수 |
+| `visiblePageCount` | `number` | `10` | 한 번에 표시할 페이지 수 |
+
+## Sidebar
+
+### `SdSidebarContainer`
+
+사이드바 컨테이너.
+
+```typescript
+@Component({ selector: "sd-sidebar-container" })
+class SdSidebarContainer { }
+```
+
+### `SdSidebar`
+
+사이드바 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-sidebar" })
+class SdSidebar { }
+```
+
+### `SdSidebarMenu`
+
+사이드바 메뉴 항목. 재귀적 트리 구조 지원.
+
+```typescript
+@Component({ selector: "sd-sidebar-menu" })
+class SdSidebarMenu {
+  menus = input<SdMenu[]>([]);
+  layout = input<"accordion" | "flat">();
+  getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `menus` | `SdMenu[]` | `[]` | 메뉴 항목 |
+| `layout` | `"accordion" \| "flat" \| undefined` | `undefined` | 레이아웃 모드 |
+| `getMenuIsSelectedFn` | `((menu) => boolean) \| undefined` | `undefined` | 커스텀 메뉴 선택 여부 함수 |
+
+### `SdSidebarUser`
+
+사이드바 사용자 영역 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-sidebar-user" })
+class SdSidebarUser {
+  userMenu = input<SdSidebarUserMenu>();
+}
+```
+
+### `SdSidebarUserMenu`
+
+```typescript
+interface SdSidebarUserMenu {
+  title: string;
+  menus: {
+    title: string;
+    onClick: () => void;
+  }[];
+}
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `title` | `string` | 사용자 메뉴 제목 |
+| `menus` | `{ title: string; onClick: () => void }[]` | 하위 메뉴 항목 배열 |
+
+## Topbar
+
+### `SdTopbarContainer`
+
+탑바 컨테이너.
+
+```typescript
+@Component({ selector: "sd-topbar-container" })
+class SdTopbarContainer { }
+```
+
+### `SdTopbar`
+
+탑바 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-topbar" })
+class SdTopbar { }
+```
+
+### `SdTopbarMenu`
+
+탑바 메뉴 항목.
+
+```typescript
+@Component({ selector: "sd-topbar-menu" })
+class SdTopbarMenu {
+  menus = input<SdMenu[]>([]);
+  getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `menus` | `SdMenu[]` | `[]` | 메뉴 항목 |
+| `getMenuIsSelectedFn` | `((menu) => boolean) \| undefined` | `undefined` | 커스텀 메뉴 선택 여부 함수 |
+
+### `SdTopbarUser`
+
+탑바 사용자 영역 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-topbar-user" })
+class SdTopbarUser {
+  menus = input.required<SdTopbarUserMenu[]>();
+}
+```
+
+### `SdTopbarUserMenu`
+
+```typescript
+interface SdTopbarUserMenu {
+  title: string;
+  onClick: () => void;
+}
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `title` | `string` | 메뉴 제목 |
+| `onClick` | `() => void` | 클릭 핸들러 |
+
+## Menu Utilities
+
+### `getMenuRouterLinkOption`
+
+메뉴에서 라우터 링크 옵션을 추출한다. children이 있거나 url이 있는 메뉴는 undefined 반환.
+
+```typescript
+function getMenuRouterLinkOption(
+  menu: SdMenu,
+): { link: string; queryParams: Record<string, string> | undefined } | undefined
+```
+
+반환값: `{ link: "/home/{codeChain}", queryParams }` 또는 `undefined`
+
+### `getIsMenuSelected`
+
+메뉴가 현재 선택된 상태인지 확인한다.
+
+```typescript
+function getIsMenuSelected(
+  menu: SdMenu,
+  fullPageCode: string | undefined,
+  customFn?: (menu: SdMenu) => boolean,
+): boolean
+```
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `menu` | `SdMenu` | 메뉴 항목 |
+| `fullPageCode` | `string \| undefined` | 현재 페이지 코드 |
+| `customFn` | `((menu) => boolean) \| undefined` | 커스텀 비교 함수 |

package/docs/ui-overlay.md

@@ -0,0 +1,157 @@
+# UI - Overlay
+
+## Dropdown
+
+### `SdDropdown`
+
+드롭다운 트리거 컴포넌트. `SdDropdownPopup`과 함께 사용한다.
+
+```typescript
+@Component({ selector: "sd-dropdown" })
+class SdDropdown {
+  open = model(false);
+  disabled = input(false, { transform: booleanAttribute });
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `open` | `boolean` | `false` | 드롭다운 열림 상태 (two-way) |
+| `disabled` | `boolean` | `false` | 비활성화 |
+
+### `SdDropdownPopup`
+
+드롭다운 팝업 컨텐츠 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-dropdown-popup" })
+class SdDropdownPopup { }
+```
+
+## Modal
+
+### `SdModal`
+
+모달 래퍼 컴포넌트. 보통 `SdModalProvider.showAsync()`로 생성되며 직접 사용하지 않는다.
+
+```typescript
+@Component({ selector: "sd-modal" })
+class SdModal {
+  open = model(false);
+  key = input<string | undefined>(undefined);
+  title = input("");
+  hideHeader = input(false);
+  hideCloseButton = input(false);
+  headerStyle = input<string | undefined>(undefined);
+  useCloseByBackdrop = input(true);
+  useCloseByEscapeKey = input(true);
+  float = input(false);
+  fill = input(false);
+  resizable = input(false);
+  movable = input(false);
+  position = input<"bottom-right" | "top-right" | undefined>(undefined);
+  minHeightPx = input<number | undefined>(undefined);
+  minWidthPx = input<number | undefined>(undefined);
+  heightPx = input<number | undefined>(undefined);
+  widthPx = input<number | undefined>(undefined);
+  actionTplRef = input<TemplateRef<any> | undefined>(undefined);
+
+  closeRequest = output<void>();
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `open` | `boolean` | `false` | 열림 상태 (two-way) |
+| `title` | `string` | `""` | 모달 제목 |
+| `hideHeader` | `boolean` | `false` | 헤더 숨김 |
+| `hideCloseButton` | `boolean` | `false` | 닫기 버튼 숨김 |
+| `useCloseByBackdrop` | `boolean` | `true` | 배경 클릭으로 닫기 |
+| `useCloseByEscapeKey` | `boolean` | `true` | ESC 키로 닫기 |
+| `float` | `boolean` | `false` | 플로팅 모달 |
+| `fill` | `boolean` | `false` | 전체 화면 채우기 |
+| `resizable` | `boolean` | `false` | 크기 조절 가능 |
+| `movable` | `boolean` | `false` | 이동 가능 |
+| `position` | `"bottom-right" \| "top-right"` | - | 위치 프리셋 |
+| `actionTplRef` | `TemplateRef<any> \| undefined` | `undefined` | 헤더 액션 영역 템플릿 (SdModalProvider에서 설정) |
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `closeRequest` | `void` | 배경 클릭, ESC 키, 닫기 버튼으로 닫기 요청 시 발생 |
+
+### `SdPromptModal`
+
+프롬프트 입력 모달. 텍스트 입력을 받아 반환한다.
+
+```typescript
+@Component({ selector: "sd-prompt-modal" })
+class SdPromptModal implements SdModalContentDef<string> {
+  message = input.required<string>();
+  close = output<string>();
+  initialized = signal(true);
+}
+```
+
+### `SdConfirmModal`
+
+확인/취소 모달.
+
+```typescript
+@Component({ selector: "sd-confirm-modal" })
+class SdConfirmModal implements SdModalContentDef<boolean> {
+  message = input.required<string>();
+  close = output<boolean>();
+  initialized = signal(true);
+}
+```
+
+## Toast
+
+### `SdToast`
+
+토스트 개별 항목 컴포넌트. `SdToastProvider`에서 내부적으로 생성한다.
+
+```typescript
+@Component({ selector: "sd-toast" })
+class SdToast {
+  open = model(false);
+  useProgress = input(false, { transform: booleanAttribute });
+  theme = input<SdToastTheme>("info");
+  progress = model(0);
+  message = model<string | undefined>(undefined);
+}
+```
+
+### `SdToastContainer`
+
+토스트 컨테이너 컴포넌트. `SdToastProvider`에서 내부적으로 생성하여 body에 부착한다.
+
+```typescript
+@Component({ selector: "sd-toast-container" })
+class SdToastContainer {
+  overlap = input(false, { transform: booleanAttribute });
+}
+```
+
+## Busy
+
+### `SdBusyContainer`
+
+busy 표시 컨테이너 컴포넌트. spinner/bar/cube 3가지 타입을 지원한다.
+
+```typescript
+@Component({ selector: "sd-busy-container" })
+class SdBusyContainer {
+  busy = input(false, { transform: booleanAttribute });
+  message = input<string | undefined>(undefined);
+  type = input<SdBusyType | undefined>(undefined);
+  progressPercent = input<number | undefined>(undefined);
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `busy` | `boolean` | `false` | busy 상태 |
+| `message` | `string \| undefined` | `undefined` | busy 메시지 |
+| `type` | `SdBusyType \| undefined` | `undefined` | 표시 유형 (spinner, bar, cube). undefined이면 부모의 SdBusyProvider.type 사용 |
+| `progressPercent` | `number \| undefined` | `undefined` | 진행률 (0-100). 설정 시 progress bar로 표시 |

package/docs/ui-visual.md

@@ -0,0 +1,127 @@
+# UI - Visual
+
+## `SdLabel`
+
+라벨 컴포넌트. 테마 색상과 클릭 가능 여부를 지원한다.
+
+```typescript
+@Component({ selector: "sd-label" })
+class SdLabel {
+  theme = input<"primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">();
+  color = input<string>();
+  clickable = input(false, { transform: booleanAttribute });
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `theme` | `string \| undefined` | `undefined` | 테마 색상 |
+| `color` | `string \| undefined` | `undefined` | 커스텀 CSS 색상 |
+| `clickable` | `boolean` | `false` | 클릭 가능 여부 |
+
+호스트 속성: `data-sd-theme`
+
+## `SdNote`
+
+노트/알림 메시지 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-note" })
+class SdNote {
+  theme = input<"primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">();
+  size = input<"sm" | "lg">();
+  inset = input(false, { transform: booleanAttribute });
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `theme` | `string \| undefined` | `undefined` | 테마 색상 |
+| `size` | `"sm" \| "lg" \| undefined` | `undefined` | 크기 |
+| `inset` | `boolean` | `false` | 삽입 스타일 (테두리 없음) |
+
+호스트 속성: `data-sd-theme`
+
+## `SdProgress`
+
+진행률 바 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-progress" })
+class SdProgress {
+  inset = input(false, { transform: booleanAttribute });
+  size = input<"sm" | "lg">();
+  theme = input.required<"primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray">();
+  value = input.required<number>();
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `inset` | `boolean` | `false` | 삽입 스타일 |
+| `size` | `"sm" \| "lg" \| undefined` | `undefined` | 크기 |
+| `theme` | `string` | required | 테마 색상 |
+| `value` | `number` | required | 진행률 (0-100) |
+
+## `SdCalendar`
+
+캘린더 컴포넌트. 항목을 날짜별로 배치한다.
+
+```typescript
+@Component({ selector: "sd-calendar" })
+class SdCalendar<T> {
+  items = input.required<T[]>();
+  getItemDateFn = input.required<(item: T, index: number) => DateOnly>();
+  yearMonth = input(new DateOnly().setDay(1));
+  weekStartDay = input(0);
+  minDaysInFirstWeek = input(1);
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `items` | `T[]` | required | 표시할 항목 |
+| `getItemDateFn` | `(item, index) => DateOnly` | required | 항목에서 날짜 추출 함수 |
+| `yearMonth` | `DateOnly` | 이번 달 1일 | 표시할 연월 |
+| `weekStartDay` | `number` | `0` | 주 시작 요일 (0=일요일) |
+| `minDaysInFirstWeek` | `number` | `1` | 첫째 주 최소 일수 |
+
+## `SdBarcode`
+
+바코드 생성 컴포넌트. bwip-js 라이브러리를 사용한다.
+
+```typescript
+@Component({ selector: "sd-barcode" })
+class SdBarcode {
+  type = input.required<BarcodeType>();
+  value = input<string>();
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `type` | `BarcodeType` | required | 바코드 타입 |
+| `value` | `string \| undefined` | `undefined` | 바코드 값. 빈 문자열이거나 undefined이면 빈 출력 |
+
+### `BarcodeType`
+
+bwip-js에서 지원하는 바코드 타입 문자열. 예: `"qrcode"`, `"code128"`, `"ean13"` 등.
+
+## `SdEcharts`
+
+ECharts 차트 래퍼 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-echarts" })
+class SdEcharts {
+  option = input.required<echarts.EChartsOption>();
+  notMerge = input(false);
+  loading = input(false);
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `option` | `echarts.EChartsOption` | required | ECharts 옵션 |
+| `notMerge` | `boolean` | `false` | 옵션 업데이트 시 병합하지 않고 교체 |
+| `loading` | `boolean` | `false` | 로딩 표시 |