@simplysm/angular 14.0.49 → 14.0.52

package/docs/ui-navigation.md

@@ -1,303 +0,0 @@
-# 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
-
-### 기본 사용 예제
-
-topbar만 있는 단순 페이지(홈·메인 등) 스캐폴드. 본문 영역이 비어 있으면 topbar 아래에 별도 컨테이너 div를 두지 않는다.
-
-```typescript
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from "@angular/core";
-import { injectViewTitleSignal, SdTopbar, SdTopbarContainer } from "@simplysm/angular";
-
-@Component({
-  selector: "app-main",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [SdTopbarContainer, SdTopbar],
-  template: `
-    <sd-topbar-container>
-      <sd-topbar>
-        <h4>{{ viewTitle() }}</h4>
-      </sd-topbar>
-    </sd-topbar-container>
-  `,
-})
-export class MainPage {
-  viewTitle = injectViewTitleSignal();
-}
-```
-
-- 제목은 [`injectViewTitleSignal`](./utils.md#injectviewtitlesignal)이 `SdAppStructureProvider`에서 자동 조회한다.
-- 페이지/모달/control 뷰에서 **재사용**되는 화면은 뷰 분기가 필요하므로 [`recipes/page-modal-container.md`](./recipes/page-modal-container.md)를 사용한다.
-
-### `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

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

@@ -1,127 +0,0 @@
-# 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` | 로딩 표시 |