@simplysm/angular 14.0.48 → 14.0.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (144) hide show
  1. package/README.md +234 -226
  2. package/dist/controls/select/sd-select.js +3 -3
  3. package/dist/index.d.ts +0 -1
  4. package/dist/index.d.ts.map +1 -1
  5. package/dist/index.js +0 -2
  6. package/dist/layout/dock/sd-dock-container.js +1 -1
  7. package/dist/styles.css +9 -0
  8. package/docs/bootstrap/provide-sd-angular.md +37 -0
  9. package/docs/bootstrap/sd-angular-config-provider.md +16 -0
  10. package/docs/directives/sd-command-directive.md +30 -0
  11. package/docs/directives/sd-events.md +25 -0
  12. package/docs/directives/sd-intersection-directive.md +36 -0
  13. package/docs/directives/sd-invalid.md +24 -0
  14. package/docs/directives/sd-resize-directive.md +42 -0
  15. package/docs/directives/sd-ripple.md +23 -0
  16. package/docs/directives/sd-router-link.md +38 -0
  17. package/docs/directives/sd-show-effect.md +18 -0
  18. package/docs/directives/sd-typed-template.md +69 -0
  19. package/docs/features/sd-address-search-modal.md +50 -0
  20. package/docs/features/sd-permission-table.md +20 -0
  21. package/docs/features/sd-shared-data-components.md +158 -0
  22. package/docs/features/sd-tiptap-editor.md +26 -0
  23. package/docs/{pipes.md → pipes/format-pipe.md} +14 -5
  24. package/docs/plugins/sd-global-error-handler.md +23 -0
  25. package/docs/{plugins.md → plugins/sd-option-event-plugin.md} +9 -12
  26. package/docs/provider-types/sd-menu.md +65 -0
  27. package/docs/provider-types/sd-modal-content-def.md +148 -0
  28. package/docs/provider-types/sd-toast-content-def.md +73 -0
  29. package/docs/provider-types/shared-data-base.md +59 -0
  30. package/docs/providers/sd-activated-modal-provider.md +34 -0
  31. package/docs/providers/sd-app-structure-provider.md +81 -0
  32. package/docs/providers/sd-busy-provider.md +18 -0
  33. package/docs/providers/sd-file-dialog-provider.md +40 -0
  34. package/docs/providers/sd-local-storage-provider.md +20 -0
  35. package/docs/providers/sd-modal-provider.md +67 -0
  36. package/docs/providers/sd-navigate-window-provider.md +18 -0
  37. package/docs/providers/sd-print-provider.md +25 -0
  38. package/docs/providers/sd-service-client-factory-provider.md +43 -0
  39. package/docs/providers/sd-shared-data-provider.md +64 -0
  40. package/docs/providers/sd-system-config-provider.md +46 -0
  41. package/docs/providers/sd-system-log-provider.md +18 -0
  42. package/docs/providers/sd-theme-provider.md +38 -0
  43. package/docs/providers/sd-toast-provider.md +65 -0
  44. package/docs/recipes/_common-rules.md +244 -0
  45. package/docs/recipes/crud-detail/extension-a-edit-save.md +230 -0
  46. package/docs/recipes/crud-detail/extension-b-delete-restore.md +142 -0
  47. package/docs/recipes/crud-detail/extension-c-modal-view.md +214 -0
  48. package/docs/recipes/crud-detail/extension-d-control-view.md +103 -0
  49. package/docs/recipes/crud-detail/extension-e-auxiliary.md +87 -0
  50. package/docs/recipes/crud-detail/extension-f-complex-detail.md +234 -0
  51. package/docs/recipes/crud-detail.md +215 -722
  52. package/docs/recipes/crud-list/extension-a-inline-edit.md +410 -0
  53. package/docs/recipes/crud-list/extension-b-selection.md +226 -0
  54. package/docs/recipes/crud-list/extension-c-inline-delete.md +87 -0
  55. package/docs/recipes/crud-list/extension-d-select-modal.md +207 -0
  56. package/docs/recipes/crud-list/extension-e-readonly-modal.md +165 -0
  57. package/docs/recipes/crud-list/extension-f-modal-edit.md +177 -0
  58. package/docs/recipes/crud-list/extension-g-excel.md +157 -0
  59. package/docs/recipes/crud-list.md +293 -626
  60. package/docs/recipes/data-select-button.md +194 -101
  61. package/docs/recipes/page-modal-container.md +168 -86
  62. package/docs/styling/classes.md +149 -0
  63. package/docs/styling/mixins.md +100 -0
  64. package/docs/styling/themes.md +35 -0
  65. package/docs/styling/variables.md +147 -0
  66. package/docs/{type-utilities.md → type-utilities/directive-input-signals.md} +17 -35
  67. package/docs/ui-data/sd-list.md +37 -0
  68. package/docs/ui-data/sd-sheet.md +227 -0
  69. package/docs/ui-form/sd-additional-button.md +26 -0
  70. package/docs/ui-form/sd-anchor.md +31 -0
  71. package/docs/ui-form/sd-button.md +105 -0
  72. package/docs/ui-form/sd-checkbox-group.md +39 -0
  73. package/docs/ui-form/sd-checkbox.md +81 -0
  74. package/docs/ui-form/sd-date-range-picker.md +27 -0
  75. package/docs/ui-form/sd-form.md +89 -0
  76. package/docs/ui-form/sd-modal-select-button.md +54 -0
  77. package/docs/ui-form/sd-numpad.md +26 -0
  78. package/docs/ui-form/sd-range.md +26 -0
  79. package/docs/ui-form/sd-select.md +68 -0
  80. package/docs/ui-form/sd-shared-data-select.md +52 -0
  81. package/docs/ui-form/sd-state-preset.md +37 -0
  82. package/docs/ui-form/sd-switch.md +27 -0
  83. package/docs/ui-form/sd-textarea.md +33 -0
  84. package/docs/ui-form/sd-textfield.md +145 -0
  85. package/docs/ui-layout/sd-dock-container.md +64 -0
  86. package/docs/ui-layout/sd-dock.md +37 -0
  87. package/docs/ui-layout/sd-gap.md +26 -0
  88. package/docs/{ui-layout.md → ui-layout/sd-kanban-board.md} +41 -85
  89. package/docs/ui-layout/sd-kanban-lane.md +34 -0
  90. package/docs/ui-layout/sd-kanban.md +29 -0
  91. package/docs/ui-navigation/sd-collapse.md +35 -0
  92. package/docs/ui-navigation/sd-pagination.md +26 -0
  93. package/docs/ui-navigation/sd-sidebar-container.md +49 -0
  94. package/docs/ui-navigation/sd-sidebar-menu.md +22 -0
  95. package/docs/ui-navigation/sd-sidebar-user.md +43 -0
  96. package/docs/ui-navigation/sd-tab.md +51 -0
  97. package/docs/ui-navigation/sd-topbar-container.md +97 -0
  98. package/docs/ui-navigation/sd-topbar-menu.md +23 -0
  99. package/docs/ui-navigation/sd-topbar-user.md +38 -0
  100. package/docs/ui-navigation/sd-topbar.md +30 -0
  101. package/docs/ui-overlay/sd-busy-container.md +69 -0
  102. package/docs/ui-overlay/sd-confirm-modal.md +30 -0
  103. package/docs/ui-overlay/sd-dropdown.md +40 -0
  104. package/docs/ui-overlay/sd-modal.md +34 -0
  105. package/docs/ui-overlay/sd-prompt-modal.md +30 -0
  106. package/docs/ui-overlay/sd-toast.md +35 -0
  107. package/docs/ui-visual/sd-barcode.md +36 -0
  108. package/docs/ui-visual/sd-calendar.md +34 -0
  109. package/docs/ui-visual/sd-echarts.md +32 -0
  110. package/docs/ui-visual/sd-label.md +24 -0
  111. package/docs/ui-visual/sd-note.md +23 -0
  112. package/docs/ui-visual/sd-progress.md +23 -0
  113. package/docs/utils/inject-routing-signals.md +161 -0
  114. package/docs/utils/inject-sd-system-config-resource.md +35 -0
  115. package/docs/utils/mark.md +43 -0
  116. package/docs/utils/selection-managers.md +96 -0
  117. package/docs/utils/set-safe-style.md +19 -0
  118. package/docs/utils/setup-functions.md +93 -0
  119. package/package.json +7 -7
  120. package/scss/commons/_styles.scss +12 -0
  121. package/src/controls/select/sd-select.ts +3 -3
  122. package/src/core/modal/sd-modal.provider.ts +1 -1
  123. package/src/core/modal/sd-modal.ts +1 -1
  124. package/src/core/routing/menu-utils.ts +1 -1
  125. package/src/core/shared-data/sd-shared-data.provider.ts +7 -7
  126. package/src/data/shared-data/sd-shared-data-select.ts +2 -2
  127. package/src/index.ts +0 -3
  128. package/src/layout/dock/sd-dock-container.ts +1 -1
  129. package/dist/data/getOrmDataEditToastErrorMessage.d.ts +0 -2
  130. package/dist/data/getOrmDataEditToastErrorMessage.d.ts.map +0 -1
  131. package/dist/data/getOrmDataEditToastErrorMessage.js +0 -8
  132. package/docs/bootstrap.md +0 -38
  133. package/docs/directives.md +0 -236
  134. package/docs/features.md +0 -169
  135. package/docs/provider-types.md +0 -283
  136. package/docs/providers.md +0 -379
  137. package/docs/styling.md +0 -222
  138. package/docs/ui-data.md +0 -333
  139. package/docs/ui-form.md +0 -502
  140. package/docs/ui-navigation.md +0 -273
  141. package/docs/ui-overlay.md +0 -157
  142. package/docs/ui-visual.md +0 -127
  143. package/docs/utils.md +0 -244
  144. package/src/data/getOrmDataEditToastErrorMessage.ts +0 -10
package/README.md CHANGED
@@ -16,323 +16,331 @@ npm install @simplysm/angular
16
16
 
17
17
  | API | Type | Description |
18
18
  |-----|------|-------------|
19
- | `provideSdAngular` | function | 모든 기반 설정을 제공하는 환경 프로바이더 팩토리 |
20
- | `SdAngularConfigProvider` | class | `clientName` 설정을 보유하는 프로바이더 |
21
-
22
- -> See [docs/bootstrap.md](./docs/bootstrap.md) for details.
19
+ | [`provideSdAngular`](./docs/bootstrap/provide-sd-angular.md) | function | 모든 기반 설정을 제공하는 환경 프로바이더 팩토리 |
20
+ | [`SdAngularConfigProvider`](./docs/bootstrap/sd-angular-config-provider.md) | class | `clientName` 설정을 보유하는 프로바이더 |
23
21
 
24
22
  ### Providers
25
23
 
26
24
  | API | Type | Description |
27
25
  |-----|------|-------------|
28
- | `SdThemeProvider` | class | 다크모드/폰트 크기 프로바이더 (`dark`, `fontSize` signal) |
29
- | `SdThemeSelector` | component | 테마 설정 드롭다운 (다크모드 토글, 폰트 크기 조절) |
30
- | `SdSystemLogProvider` | class | 시스템 로그 기록 프로바이더 |
31
- | `SdAppStructureProvider` | class | 앱 구조(메뉴/권한) 관리 프로바이더 |
32
- | `injectPermsSignal` | function | 현재 뷰의 권한 목록을 signal로 반환 |
33
- | `SdAppStructureUtils` | class | 앱 구조 유틸리티 (메뉴/권한 조회 정적 메서드) |
34
- | `SdFileDialogProvider` | class | 네이티브 파일 선택 대화상자 프로바이더 |
35
- | `SdLocalStorageProvider` | class | `clientName` 스코프 localStorage 래퍼 |
36
- | `SdSystemConfigProvider` | class | 비동기 설정 저장/조회 프로바이더 |
37
- | `SdServiceClientFactoryProvider` | class | ServiceClient 인스턴스 팩토리/관리 |
38
- | `SdSharedDataProvider` | class | 이벤트 기반 공유 데이터 캐시 추상 프로바이더 |
39
- | `SdSharedDataChangeEvent` | const | 공유 데이터 변경 이벤트 정의 |
40
- | `SdNavigateWindowProvider` | class | 새 윈도우 네비게이션 + 자동 닫기 |
41
- | `SdActivatedModalProvider` | class | 모달 내부에서 inject하여 모달/컨텐츠 참조 |
42
- | `SdToastProvider` | class | 토스트 알림 (info/success/warning/danger) |
43
- | `SdBusyProvider` | class | 글로벌 busy 상태 관리 (spinner/bar/cube) |
44
- | `SdPrintProvider` | class | 인쇄 및 PDF 생성 프로바이더 |
45
- | `SdModalProvider` | class | 프로그래밍 방식 모달 생성 |
46
-
47
- -> See [docs/providers.md](./docs/providers.md) for details.
26
+ | [`SdThemeProvider`](./docs/providers/sd-theme-provider.md) | class | 다크모드/폰트 크기 프로바이더 (`dark`, `fontSize` signal) |
27
+ | [`SdThemeSelector`](./docs/providers/sd-theme-provider.md) | component | 테마 설정 드롭다운 (다크모드 토글, 폰트 크기 조절) |
28
+ | [`SdSystemLogProvider`](./docs/providers/sd-system-log-provider.md) | class | 시스템 로그 기록 프로바이더 |
29
+ | [`SdAppStructureProvider`](./docs/providers/sd-app-structure-provider.md) | class | 앱 구조(메뉴/권한) 관리 프로바이더 |
30
+ | [`injectPermsSignal`](./docs/providers/sd-app-structure-provider.md) | function | 현재 뷰의 권한 목록을 signal로 반환 |
31
+ | [`SdAppStructureUtils`](./docs/providers/sd-app-structure-provider.md) | class | 앱 구조 유틸리티 (메뉴/권한 조회 정적 메서드) |
32
+ | [`SdFileDialogProvider`](./docs/providers/sd-file-dialog-provider.md) | class | 네이티브 파일 선택 대화상자 프로바이더 |
33
+ | [`SdLocalStorageProvider`](./docs/providers/sd-local-storage-provider.md) | class | `clientName` 스코프 localStorage 래퍼 |
34
+ | [`SdSystemConfigProvider`](./docs/providers/sd-system-config-provider.md) | class | 비동기 설정 저장/조회 프로바이더 |
35
+ | [`SdServiceClientFactoryProvider`](./docs/providers/sd-service-client-factory-provider.md) | class | ServiceClient 인스턴스 팩토리/관리 |
36
+ | [`SdSharedDataProvider`](./docs/providers/sd-shared-data-provider.md) | class | 이벤트 기반 공유 데이터 캐시 추상 프로바이더 |
37
+ | [`SdSharedDataChangeEvent`](./docs/providers/sd-shared-data-provider.md) | const | 공유 데이터 변경 이벤트 정의 |
38
+ | [`SdNavigateWindowProvider`](./docs/providers/sd-navigate-window-provider.md) | class | 새 윈도우 네비게이션 + 자동 닫기 |
39
+ | [`SdActivatedModalProvider`](./docs/providers/sd-activated-modal-provider.md) | class | 모달 내부에서 inject하여 모달/컨텐츠 참조 |
40
+ | [`SdToastProvider`](./docs/providers/sd-toast-provider.md) | class | 토스트 알림 (info/success/warning/danger) |
41
+ | [`SdBusyProvider`](./docs/providers/sd-busy-provider.md) | class | 글로벌 busy 상태 관리 (spinner/bar/cube) |
42
+ | [`SdPrintProvider`](./docs/providers/sd-print-provider.md) | class | 인쇄 및 PDF 생성 프로바이더 |
43
+ | [`SdModalProvider`](./docs/providers/sd-modal-provider.md) | class | 프로그래밍 방식 모달 생성 |
48
44
 
49
45
  ### Provider Types
50
46
 
51
47
  | API | Type | Description |
52
48
  |-----|------|-------------|
53
- | `SdMenu` | interface | 메뉴 트리 노드 |
54
- | `SdFlatMenu` | interface | 플랫 메뉴 항목 |
55
- | `SdPermission` | interface | 권한 트리 노드 |
56
- | `SharedDataBase` | interface | 공유 데이터 기본 인터페이스 |
57
- | `SharedDataInfo` | interface | 공유 데이터 등록 정보 |
58
- | `SharedDataHandle` | interface | 공유 데이터 핸들 (items signal + get) |
59
- | `SdModalContentDef` | interface | 모달 컴포넌트 구현 인터페이스 |
60
- | `SdModalInfo` | interface | 모달 생성 시 전달하는 정보 |
61
- | `SdModalOptions` | interface | 모달 옵션 (크기, 위치, 동작) |
62
- | `SdToastContentDef` | interface | 토스트 컴포넌트 구현 인터페이스 |
63
- | `SdToastInput` | interface | 커스텀 토스트 생성 입력 |
64
- | `SdToastSeverity` | type | 토스트 심각도 (`"info" \| "success" \| "warning" \| "danger"`) |
65
- | `SdToastTheme` | type | 토스트 테마 (severity + `"primary" \| "secondary" \| "gray" \| "blue-gray"`) |
66
- | `SdBusyType` | type | busy 표시 유형 (`"spinner" \| "bar" \| "cube"`) |
67
- | `SdPrint` | interface | 인쇄 컴포넌트 구현 인터페이스 |
68
- | `SdPrintInput` | interface | 인쇄 생성 입력 |
69
- | `SelectModalOutputResult` | interface | 모달 선택 결과 (`selectedItemKeys`, `selectedItems`) |
70
-
71
- -> See [docs/provider-types.md](./docs/provider-types.md) for details.
49
+ | [`SdMenu`](./docs/provider-types/sd-menu.md) | interface | 메뉴 트리 노드 |
50
+ | [`SdFlatMenu`](./docs/provider-types/sd-menu.md) | interface | 플랫 메뉴 항목 |
51
+ | [`SdPermission`](./docs/provider-types/sd-menu.md) | interface | 권한 트리 노드 |
52
+ | [`SharedDataBase`](./docs/provider-types/shared-data-base.md) | interface | 공유 데이터 기본 인터페이스 |
53
+ | [`SharedDataInfo`](./docs/provider-types/shared-data-base.md) | interface | 공유 데이터 등록 정보 |
54
+ | [`SharedDataHandle`](./docs/provider-types/shared-data-base.md) | interface | 공유 데이터 핸들 (items signal + get) |
55
+ | [`SdModalContentDef`](./docs/provider-types/sd-modal-content-def.md) | interface | 모달 컴포넌트 구현 인터페이스 |
56
+ | [`SdModalInfo`](./docs/provider-types/sd-modal-content-def.md) | interface | 모달 생성 시 전달하는 정보 |
57
+ | [`SdModalOptions`](./docs/provider-types/sd-modal-content-def.md) | interface | 모달 옵션 (크기, 위치, 동작) |
58
+ | [`SdToastContentDef`](./docs/provider-types/sd-toast-content-def.md) | interface | 토스트 컴포넌트 구현 인터페이스 |
59
+ | [`SdToastInput`](./docs/provider-types/sd-toast-content-def.md) | interface | 커스텀 토스트 생성 입력 |
60
+ | [`SdToastSeverity`](./docs/provider-types/sd-toast-content-def.md) | type | 토스트 심각도 (`"info" \| "success" \| "warning" \| "danger"`) |
61
+ | [`SdToastTheme`](./docs/provider-types/sd-toast-content-def.md) | type | 토스트 테마 (severity + `"primary" \| "secondary" \| "gray" \| "blue-gray"`) |
62
+ | [`SdBusyType`](./docs/provider-types/sd-toast-content-def.md) | type | busy 표시 유형 (`"spinner" \| "bar" \| "cube"`) |
63
+ | [`SdPrint`](./docs/provider-types/sd-toast-content-def.md) | interface | 인쇄 컴포넌트 구현 인터페이스 |
64
+ | [`SdPrintInput`](./docs/provider-types/sd-toast-content-def.md) | interface | 인쇄 생성 입력 |
65
+ | [`SelectModalOutputResult`](./docs/provider-types/sd-modal-content-def.md) | interface | 모달 선택 결과 (`selectedItemKeys`, `selectedItems`) |
72
66
 
73
67
  ### Directives
74
68
 
75
69
  | API | Type | Description |
76
70
  |-----|------|-------------|
77
- | `SdEvents` | directive | `.capture`, `.passive`, `.once` 수식어 및 커스텀 이벤트 바인딩 |
78
- | `SdRipple` | directive | `[sdRipple]` 리플 효과 |
79
- | `SdShowEffect` | directive | `[sdShowEffect]` 뷰포트 진입 시 reveal 애니메이션 |
80
- | `SdInvalid` | directive | `[sdInvalid]` 유효성 검증 표시기 |
81
- | `SdTypedTemplate` | directive | `ng-template[typed]` 템플릿 컨텍스트 타입 가드 |
82
- | `SdItemOfTemplate` | directive | `ng-template[itemOf]` 항목 반복 템플릿 타입 가드 |
83
- | `SdItemOfTemplateContext` | interface | itemOf 템플릿 컨텍스트 (`$implicit`, `item`, `index`, `depth`) |
84
- | `SdRouterLink` | directive | `[sdRouterLink]` 라우터 네비게이션 (Ctrl+클릭 새 창) |
85
- | `SdCommandDirective` | directive | `[sdSaveCommand]`, `[sdRefreshCommand]`, `[sdInsertCommand]` 키보드 단축키 output 이벤트 디렉티브 |
86
- | `SdResizeDirective` | directive | `[sdResize]` ResizeObserver 기반 resize output 이벤트 디렉티브 |
87
- | `SdResizeEvent` | interface | resize 이벤트 데이터 (`heightChanged`, `widthChanged`, `target`, `contentRect`) |
88
- | `SdIntersectionDirective` | directive | `[sdIntersection]` IntersectionObserver 기반 intersection output 이벤트 디렉티브 |
89
- | `SdIntersectionEvent` | interface | intersection 이벤트 데이터 (`entry`) |
90
-
91
- -> See [docs/directives.md](./docs/directives.md) for details.
71
+ | [`SdEvents`](./docs/directives/sd-events.md) | directive | `.capture`, `.passive`, `.once` 수식어 및 커스텀 이벤트 바인딩 |
72
+ | [`SdRipple`](./docs/directives/sd-ripple.md) | directive | `[sdRipple]` 리플 효과 |
73
+ | [`SdShowEffect`](./docs/directives/sd-show-effect.md) | directive | `[sdShowEffect]` 뷰포트 진입 시 reveal 애니메이션 |
74
+ | [`SdInvalid`](./docs/directives/sd-invalid.md) | directive | `[sdInvalid]` 유효성 검증 표시기 |
75
+ | [`SdTypedTemplate`](./docs/directives/sd-typed-template.md) | directive | `ng-template[typed]` 템플릿 컨텍스트 타입 가드 |
76
+ | [`SdItemOfTemplate`](./docs/directives/sd-typed-template.md) | directive | `ng-template[itemOf]` 항목 반복 템플릿 타입 가드 |
77
+ | [`SdItemOfTemplateContext`](./docs/directives/sd-typed-template.md) | interface | itemOf 템플릿 컨텍스트 (`$implicit`, `item`, `index`, `depth`) |
78
+ | [`SdRouterLink`](./docs/directives/sd-router-link.md) | directive | `[sdRouterLink]` 라우터 네비게이션 (Ctrl+클릭 새 창) |
79
+ | [`SdCommandDirective`](./docs/directives/sd-command-directive.md) | directive | `[sdSaveCommand]`, `[sdRefreshCommand]`, `[sdInsertCommand]` 키보드 단축키 output 이벤트 디렉티브 |
80
+ | [`SdResizeDirective`](./docs/directives/sd-resize-directive.md) | directive | `[sdResize]` ResizeObserver 기반 resize output 이벤트 디렉티브 |
81
+ | [`SdResizeEvent`](./docs/directives/sd-resize-directive.md) | interface | resize 이벤트 데이터 (`heightChanged`, `widthChanged`, `target`, `contentRect`) |
82
+ | [`SdIntersectionDirective`](./docs/directives/sd-intersection-directive.md) | directive | `[sdIntersection]` IntersectionObserver 기반 intersection output 이벤트 디렉티브 |
83
+ | [`SdIntersectionEvent`](./docs/directives/sd-intersection-directive.md) | interface | intersection 이벤트 데이터 (`entry`) |
92
84
 
93
85
  ### Plugins
94
86
 
95
87
  | API | Type | Description |
96
88
  |-----|------|-------------|
97
- | `SdOptionEventPlugin` | class | `.capture`, `.passive`, `.once` 이벤트 옵션 플러그인 (`provideSdAngular`에서 자동 등록) |
98
- | `SdGlobalErrorHandlerPlugin` | class | 글로벌 에러 핸들러 (PromiseRejection, ErrorEvent 등) |
99
-
100
- -> See [docs/plugins.md](./docs/plugins.md) for details.
89
+ | [`SdOptionEventPlugin`](./docs/plugins/sd-option-event-plugin.md) | class | `.capture`, `.passive`, `.once` 이벤트 옵션 플러그인 (`provideSdAngular`에서 자동 등록) |
90
+ | [`SdGlobalErrorHandlerPlugin`](./docs/plugins/sd-global-error-handler.md) | class | 글로벌 에러 핸들러 (PromiseRejection, ErrorEvent 등) |
101
91
 
102
92
  ### Pipes
103
93
 
104
94
  | API | Type | Description |
105
95
  |-----|------|-------------|
106
- | `FormatPipe` | pipe | DateTime/DateOnly/string 포매팅 파이프 |
107
-
108
- -> See [docs/pipes.md](./docs/pipes.md) for details.
96
+ | [`FormatPipe`](./docs/pipes/format-pipe.md) | pipe | DateTime/DateOnly/string 포매팅 파이프 |
109
97
 
110
98
  ### Utils & Setups
111
99
 
112
100
  | API | Type | Description |
113
101
  |-----|------|-------------|
114
- | `mark` | function | WritableSignal 변경 알림 트리거 (shallow copy) |
115
- | `setSafeStyle` | function | Renderer2로 여러 CSS 스타일 일괄 적용 |
116
- | `injectSdSystemConfigResource` | function | 시스템 설정 resource 래퍼 |
117
- | `injectCurrentPageCodeSignal` | function | 현재 페이지 코드 signal |
118
- | `injectFullPageCodeSignal` | function | 전체 페이지 코드 signal (NavigationEnd 기반) |
119
- | `injectViewTitleSignal` | function | 현재 뷰 타이틀 signal |
120
- | `injectViewTypeSignal` | function | 현재 뷰 타입 signal (`page \| modal \| control`) |
121
- | `useSelectionManager` | function | 선택 관리 composable (single/multi) |
122
- | `useSortingManager` | function | 정렬 관리 composable |
123
- | `useExpandingManager` | function | 트리 확장/축소 관리 composable |
124
- | `setupBgTheme` | function | body 배경 테마 색상 설정 |
125
- | `setupRipple` | function | 리플 효과 설정 |
126
- | `setupRevealOnShow` | function | 뷰포트 진입 시 reveal 애니메이션 설정 |
127
- | `setupInvalid` | function | 유효성 검증 표시기 설정 |
128
- | `setupModelHook` | function | model signal의 set을 가드 함수로 래핑 |
129
- | `setupCanDeactivate` | function | 모달/라우트 canDeactivate 설정 |
130
-
131
- -> See [docs/utils.md](./docs/utils.md) for details.
102
+ | [`mark`](./docs/utils/mark.md) | function | WritableSignal 변경 알림 트리거 (shallow copy) |
103
+ | [`setSafeStyle`](./docs/utils/set-safe-style.md) | function | Renderer2로 여러 CSS 스타일 일괄 적용 |
104
+ | [`injectSdSystemConfigResource`](./docs/utils/inject-sd-system-config-resource.md) | function | 시스템 설정 resource 래퍼 |
105
+ | [`injectCurrentPageCodeSignal`](./docs/utils/inject-routing-signals.md) | function | 현재 페이지 코드 signal |
106
+ | [`injectFullPageCodeSignal`](./docs/utils/inject-routing-signals.md) | function | 전체 페이지 코드 signal (NavigationEnd 기반) |
107
+ | [`injectViewTitleSignal`](./docs/utils/inject-routing-signals.md) | function | 현재 뷰 타이틀 signal |
108
+ | [`injectViewTypeSignal`](./docs/utils/inject-routing-signals.md) | function | 현재 뷰 타입 signal (`page \| modal \| control`) |
109
+ | [`useSelectionManager`](./docs/utils/selection-managers.md) | function | 선택 관리 composable (single/multi) |
110
+ | [`useSortingManager`](./docs/utils/selection-managers.md) | function | 정렬 관리 composable |
111
+ | [`useExpandingManager`](./docs/utils/selection-managers.md) | function | 트리 확장/축소 관리 composable |
112
+ | [`setupBgTheme`](./docs/utils/setup-functions.md) | function | body 배경 테마 색상 설정 |
113
+ | [`setupRipple`](./docs/utils/setup-functions.md) | function | 리플 효과 설정 |
114
+ | [`setupRevealOnShow`](./docs/utils/setup-functions.md) | function | 뷰포트 진입 시 reveal 애니메이션 설정 |
115
+ | [`setupInvalid`](./docs/utils/setup-functions.md) | function | 유효성 검증 표시기 설정 |
116
+ | [`setupModelHook`](./docs/utils/setup-functions.md) | function | model signal의 set을 가드 함수로 래핑 |
117
+ | [`setupCanDeactivate`](./docs/utils/setup-functions.md) | function | 모달/라우트 canDeactivate 설정 |
132
118
 
133
119
  ### Type Utilities
134
120
 
135
121
  | API | Type | Description |
136
122
  |-----|------|-------------|
137
- | `DirectiveInputSignals` | type | InputSignal 프로퍼티에서 값 타입 추출 |
138
- | `UndefToOptional` | type | undefined 포함 프로퍼티를 optional로 변환 |
139
- | `WithOptional` | type | 특정 키를 optional로 변환 |
140
- | `SdViewType` | type | 뷰 타입 (`"page" \| "modal" \| "control"`) |
141
- | `SortingDef` | interface | 정렬 정의 (`key`, `desc`) |
142
- | `ExpandItemDef` | interface | 트리 확장 항목 정의 |
143
- | `SdSelectModal` | interface | 모달 선택 컴포넌트 인터페이스 |
144
- | `SdSelectModalInfo` | type | 모달 선택 정보 타입 |
145
- | `SdTextfieldTypes` | type | 텍스트필드 타입별 값 타입 매핑 |
146
- | `sdTextfieldTypes` | const | 텍스트필드 타입 문자열 배열 |
147
- | `SelectModeValue` | type | select mode별 value 타입 매핑 |
148
-
149
- -> See [docs/type-utilities.md](./docs/type-utilities.md) for details.
123
+ | [`DirectiveInputSignals`](./docs/type-utilities/directive-input-signals.md) | type | InputSignal 프로퍼티에서 값 타입 추출 |
124
+ | [`UndefToOptional`](./docs/type-utilities/directive-input-signals.md) | type | undefined 포함 프로퍼티를 optional로 변환 |
125
+ | [`WithOptional`](./docs/type-utilities/directive-input-signals.md) | type | 특정 키를 optional로 변환 |
126
+ | [`SdViewType`](./docs/type-utilities/directive-input-signals.md) | type | 뷰 타입 (`"page" \| "modal" \| "control"`) |
127
+ | [`SortingDef`](./docs/type-utilities/directive-input-signals.md) | interface | 정렬 정의 (`key`, `desc`) |
128
+ | [`ExpandItemDef`](./docs/type-utilities/directive-input-signals.md) | interface | 트리 확장 항목 정의 |
129
+ | [`SdSelectModal`](./docs/type-utilities/directive-input-signals.md) | interface | 모달 선택 컴포넌트 인터페이스 |
130
+ | [`SdSelectModalInfo`](./docs/type-utilities/directive-input-signals.md) | type | 모달 선택 정보 타입 |
131
+ | [`SdTextfieldTypes`](./docs/type-utilities/directive-input-signals.md) | type | 텍스트필드 타입별 값 타입 매핑 |
132
+ | [`sdTextfieldTypes`](./docs/type-utilities/directive-input-signals.md) | const | 텍스트필드 타입 문자열 배열 |
133
+ | [`SelectModeValue`](./docs/type-utilities/directive-input-signals.md) | type | select mode별 value 타입 매핑 |
150
134
 
151
135
  ### Features
152
136
 
153
137
  | API | Type | Description |
154
138
  |-----|------|-------------|
155
- | `SdAddressSearchModal` | component | Daum Postcode 주소 검색 모달 |
156
- | `Address` | interface | 주소 검색 결과 |
157
- | `SdPermissionTable` | component | 권한 매트릭스 테이블 (items, value) |
158
- | 데이터 시트 CRUD 화면 조립 | recipe | → [recipes/crud-list.md](./docs/recipes/crud-list.md) (`<sd-sheet>`+`<sd-form>`+필터+페이지네이션+편집 직접 조립) |
159
- | 상세폼 CRUD 화면 조립 | recipe | → [recipes/crud-detail.md](./docs/recipes/crud-detail.md) (`<sd-form>`+load/save/delete+snapshot 변경감지+setupCanDeactivate+Ctrl+S 직접 조립) |
160
- | 모달 선택 버튼 화면 조립 | recipe | → [recipes/data-select-button.md](./docs/recipes/data-select-button.md) (`<sd-modal-select-button>` 직접 / `<sd-shared-data-select-button>` / 사용자 정의 wrapper) |
161
- | `SdSharedDataSelect` | component | 공유 데이터 드롭다운 선택 |
162
- | `SdSharedDataSelectButton` | component | 공유 데이터 모달 선택 버튼 (→ [recipes/data-select-button.md](./docs/recipes/data-select-button.md)) |
163
- | `SdSharedDataSelectList` | component | 공유 데이터 목록형 선택 (selectedItem model) |
164
- | `matchesSearchText` | function | 공백 구분 AND 조건 텍스트 검색 매칭 |
165
- | `getOrmDataEditToastErrorMessage` | function | ORM 편집 에러 메시지 변환 (FK 위반 등 DB 에러를 한국어 메시지로) |
166
-
167
- -> See [docs/features.md](./docs/features.md) for details.
139
+ | [`SdAddressSearchModal`](./docs/features/sd-address-search-modal.md) | component | Daum Postcode 주소 검색 모달 |
140
+ | [`Address`](./docs/features/sd-address-search-modal.md) | interface | 주소 검색 결과 |
141
+ | [`SdPermissionTable`](./docs/features/sd-permission-table.md) | component | 권한 매트릭스 테이블 (items, value) |
142
+ | [`SdSharedDataSelect`](./docs/features/sd-shared-data-components.md) | component | 공유 데이터 드롭다운 선택 |
143
+ | [`SdSharedDataSelectButton`](./docs/features/sd-shared-data-components.md) | component | 공유 데이터 모달 선택 버튼 |
144
+ | [`SdSharedDataSelectList`](./docs/features/sd-shared-data-components.md) | component | 공유 데이터 목록형 선택 (selectedItem model) |
145
+ | [`matchesSearchText`](./docs/features/sd-shared-data-components.md) | function | 공백 구분 AND 조건 텍스트 검색 매칭 |
168
146
 
169
147
  ### UI - Layout
170
148
 
171
149
  | API | Type | Description |
172
150
  |-----|------|-------------|
173
- | `SdDockContainer` | component | 도킹 레이아웃 컨테이너 |
174
- | `SdDock` | component | 도킹 영역 (top/bottom/left/right) |
175
- | `SdGap` | component | 간격 (gap) 컴포넌트 |
176
- | `SdKanbanBoard` | component | 칸반 보드 (드래그앤드롭, selectedValues) |
177
- | `SdKanbanBoardDropInfo` | interface | 칸반 보드 드롭 이벤트 정보 |
178
- | `SdKanbanDragRef` | interface | 칸반 드래그 참조 인터페이스 |
179
- | `SdKanbanDropTarget` | interface | 칸반 드롭 타겟 인터페이스 |
180
- | `SdKanban` | component | 칸반 아이템 |
181
- | `SdKanbanLane` | component | 칸반 레인 |
182
-
183
- -> See [docs/ui-layout.md](./docs/ui-layout.md) for details.
151
+ | [`SdDockContainer`](./docs/ui-layout/sd-dock-container.md) | component | 도킹 레이아웃 컨테이너 |
152
+ | [`SdDock`](./docs/ui-layout/sd-dock.md) | component | 도킹 영역 (top/bottom/left/right) |
153
+ | [`SdGap`](./docs/ui-layout/sd-gap.md) | component | 간격 (gap) 컴포넌트 |
154
+ | [`SdKanbanBoard`](./docs/ui-layout/sd-kanban-board.md) | component | 칸반 보드 (드래그앤드롭, selectedValues) |
155
+ | [`SdKanbanBoardDropInfo`](./docs/ui-layout/sd-kanban-board.md) | interface | 칸반 보드 드롭 이벤트 정보 |
156
+ | [`SdKanbanDragRef`](./docs/ui-layout/sd-kanban-board.md) | interface | 칸반 드래그 참조 인터페이스 |
157
+ | [`SdKanbanDropTarget`](./docs/ui-layout/sd-kanban-board.md) | interface | 칸반 드롭 타겟 인터페이스 |
158
+ | [`SdKanban`](./docs/ui-layout/sd-kanban.md) | component | 칸반 아이템 |
159
+ | [`SdKanbanLane`](./docs/ui-layout/sd-kanban-lane.md) | component | 칸반 레인 |
184
160
 
185
161
  ### UI - Form
186
162
 
187
163
  | API | Type | Description |
188
164
  |-----|------|-------------|
189
- | `SdButton` | component | 버튼 |
190
- | `SdAnchor` | component | 앵커 (인라인 버튼) |
191
- | `SdAdditionalButton` | component | 추가 동작 버튼 (드롭다운 포함) |
192
- | `SdModalSelectButton` | component | 모달 선택 버튼 |
193
- | `SdTextfield` | component | 텍스트 입력 (13가지 타입: number, text, password, color, email, format, date, month, year, datetime, datetime-sec, time, time-sec) |
194
- | `SdTextarea` | component | 멀티라인 텍스트 입력 |
195
- | `SdNumpad` | component | 숫자 패드 |
196
- | `SdRange` | component | 범위 슬라이더 |
197
- | `SdDateRangePicker` | component | 날짜 범위 선택기 |
198
- | `SdStatePreset` | component | 상태 프리셋 저장/불러오기 |
199
- | `SdStatePresetDef` | interface | 상태 프리셋 데이터 (name, state) |
200
- | `SdCheckbox` | component | 체크박스 |
201
- | `SdSwitch` | component | 스위치 토글 |
202
- | `SdCheckboxGroup` | component | 체크박스 그룹 |
203
- | `SdCheckboxGroupItem` | component | 체크박스 그룹 항목 |
204
- | `SdTiptapEditor` | component | TipTap 리치 텍스트 에디터 |
205
- | `SdSelect` | component | 드롭다운 선택 (single/multi) |
206
- | `SdSelectItem` | component | 드롭다운 선택 항목 |
207
- | `SdSelectButton` | component | 버튼 스타일 선택 |
208
- | `SdForm` | component | 폼 래퍼 (submit 이벤트, busy 관리) |
209
-
210
- -> See [docs/ui-form.md](./docs/ui-form.md) for details.
165
+ | [`SdButton`](./docs/ui-form/sd-button.md) | component | 버튼 |
166
+ | [`SdAnchor`](./docs/ui-form/sd-anchor.md) | component | 앵커 (인라인 버튼) |
167
+ | [`SdAdditionalButton`](./docs/ui-form/sd-additional-button.md) | component | 추가 동작 버튼 (드롭다운 포함) |
168
+ | [`SdModalSelectButton`](./docs/ui-form/sd-modal-select-button.md) | component | 모달 선택 버튼 |
169
+ | [`SdTextfield`](./docs/ui-form/sd-textfield.md) | component | 텍스트 입력 (13가지 타입: number, text, password, color, email, format, date, month, year, datetime, datetime-sec, time, time-sec) |
170
+ | [`SdTextarea`](./docs/ui-form/sd-textarea.md) | component | 멀티라인 텍스트 입력 |
171
+ | [`SdNumpad`](./docs/ui-form/sd-numpad.md) | component | 숫자 패드 |
172
+ | [`SdRange`](./docs/ui-form/sd-range.md) | component | 범위 슬라이더 |
173
+ | [`SdDateRangePicker`](./docs/ui-form/sd-date-range-picker.md) | component | 날짜 범위 선택기 |
174
+ | [`SdStatePreset`](./docs/ui-form/sd-state-preset.md) | component | 상태 프리셋 저장/불러오기 |
175
+ | [`SdStatePresetDef`](./docs/ui-form/sd-state-preset.md) | interface | 상태 프리셋 데이터 (name, state) |
176
+ | [`SdCheckbox`](./docs/ui-form/sd-checkbox.md) | component | 체크박스 |
177
+ | [`SdSwitch`](./docs/ui-form/sd-switch.md) | component | 스위치 토글 |
178
+ | [`SdCheckboxGroup`](./docs/ui-form/sd-checkbox-group.md) | component | 체크박스 그룹 |
179
+ | [`SdCheckboxGroupItem`](./docs/ui-form/sd-checkbox-group.md) | component | 체크박스 그룹 항목 |
180
+ | [`SdTiptapEditor`](./docs/features/sd-tiptap-editor.md) | component | TipTap 리치 텍스트 에디터 |
181
+ | [`SdSelect`](./docs/ui-form/sd-select.md) | component | 드롭다운 선택 (single/multi) |
182
+ | [`SdSelectItem`](./docs/ui-form/sd-select.md) | component | 드롭다운 선택 항목 |
183
+ | [`SdSelectButton`](./docs/ui-form/sd-select.md) | component | 버튼 스타일 선택 |
184
+ | [`SdForm`](./docs/ui-form/sd-form.md) | component | 폼 래퍼 (submit 이벤트, busy 관리) |
211
185
 
212
186
  ### UI - Navigation
213
187
 
214
188
  | API | Type | Description |
215
189
  |-----|------|-------------|
216
- | `SdCollapse` | component | 접기/펼치기 패널 |
217
- | `SdCollapseIcon` | component | 접기/펼치기 아이콘 |
218
- | `SdTab` | component | 탭 컨테이너 |
219
- | `SdTabItem` | component | 탭 항목 |
220
- | `SdPagination` | component | 페이지네이션 |
221
- | `SdSidebarContainer` | component | 사이드바 컨테이너 |
222
- | `SdSidebar` | component | 사이드바 |
223
- | `SdSidebarMenu` | component | 사이드바 메뉴 |
224
- | `SdSidebarUser` | component | 사이드바 사용자 영역 |
225
- | `SdSidebarUserMenu` | interface | 사이드바 사용자 메뉴 항목 |
226
- | `SdTopbarContainer` | component | 탑바 컨테이너 |
227
- | `SdTopbar` | component | 탑바 |
228
- | `SdTopbarMenu` | component | 탑바 메뉴 |
229
- | `SdTopbarUser` | component | 탑바 사용자 영역 |
230
- | `SdTopbarUserMenu` | interface | 탑바 사용자 메뉴 항목 |
231
- | `getMenuRouterLinkOption` | function | 메뉴에서 라우터 링크 옵션 추출 |
232
- | `getIsMenuSelected` | function | 메뉴 선택 여부 확인 |
233
-
234
- -> See [docs/ui-navigation.md](./docs/ui-navigation.md) for details.
190
+ | [`SdCollapse`](./docs/ui-navigation/sd-collapse.md) | component | 접기/펼치기 패널 |
191
+ | [`SdCollapseIcon`](./docs/ui-navigation/sd-collapse.md) | component | 접기/펼치기 아이콘 |
192
+ | [`SdTab`](./docs/ui-navigation/sd-tab.md) | component | 탭 컨테이너 |
193
+ | [`SdTabItem`](./docs/ui-navigation/sd-tab.md) | component | 탭 항목 |
194
+ | [`SdPagination`](./docs/ui-navigation/sd-pagination.md) | component | 페이지네이션 |
195
+ | [`SdSidebarContainer`](./docs/ui-navigation/sd-sidebar-container.md) | component | 사이드바 컨테이너 |
196
+ | [`SdSidebar`](./docs/ui-navigation/sd-sidebar-container.md) | component | 사이드바 |
197
+ | [`SdSidebarMenu`](./docs/ui-navigation/sd-sidebar-menu.md) | component | 사이드바 메뉴 |
198
+ | [`SdSidebarUser`](./docs/ui-navigation/sd-sidebar-user.md) | component | 사이드바 사용자 영역 |
199
+ | [`SdSidebarUserMenu`](./docs/ui-navigation/sd-sidebar-user.md) | interface | 사이드바 사용자 메뉴 항목 |
200
+ | [`SdTopbarContainer`](./docs/ui-navigation/sd-topbar-container.md) | component | 탑바 컨테이너 |
201
+ | [`SdTopbar`](./docs/ui-navigation/sd-topbar.md) | component | 탑바 |
202
+ | [`SdTopbarMenu`](./docs/ui-navigation/sd-topbar-menu.md) | component | 탑바 메뉴 |
203
+ | [`SdTopbarUser`](./docs/ui-navigation/sd-topbar-user.md) | component | 탑바 사용자 영역 |
204
+ | [`SdTopbarUserMenu`](./docs/ui-navigation/sd-topbar-user.md) | interface | 탑바 사용자 메뉴 항목 |
205
+ | [`getMenuRouterLinkOption`](./docs/ui-navigation/sd-sidebar-menu.md) | function | 메뉴에서 라우터 링크 옵션 추출 |
206
+ | [`getIsMenuSelected`](./docs/ui-navigation/sd-sidebar-menu.md) | function | 메뉴 선택 여부 확인 |
235
207
 
236
208
  ### UI - Data
237
209
 
238
210
  | API | Type | Description |
239
211
  |-----|------|-------------|
240
- | `SdList` | component | 리스트 |
241
- | `SdListItem` | component | 리스트 항목 |
242
- | `SdSheet` | component | 스프레드시트 (정렬, 고정, 리사이즈). `key`로 설정 저장 |
243
- | `SdSheetColumn` | directive | 시트 컬럼 정의 (헤더, 너비, 고정, 정렬 등) |
244
- | `SdSheetColumnCellTemplate` | directive | 시트 컬럼 셀 내용 정의 (`ng-template[cell]`), `SdSheetCellContext` 타입 가드 제공 |
245
- | `SdSheetCellContext` | interface | 시트 셀 템플릿 컨텍스트 (`$implicit`, `item`, `index`, `depth`, `edit`) |
246
- | `SdSheetConfigModal` | component | 시트 설정 모달 |
247
- | `SdSheetColumnDef` | interface | 시트 컬럼 정의 데이터 |
248
- | `SdSheetConfig` | interface | 시트 설정 데이터 |
249
- | `SdSheetHeaderDef` | interface | 시트 헤더 정의 |
250
- | `SdSheetItemKeydownEventParam` | interface | 시트 항목 keydown 이벤트 파라미터 |
251
- | `SdSheetCellKeydownEventParam` | interface | 시트 셀 keydown 이벤트 파라미터 |
252
-
253
- -> See [docs/ui-data.md](./docs/ui-data.md) for details.
212
+ | [`SdList`](./docs/ui-data/sd-list.md) | component | 리스트 |
213
+ | [`SdListItem`](./docs/ui-data/sd-list.md) | component | 리스트 항목 |
214
+ | [`SdSheet`](./docs/ui-data/sd-sheet.md) | component | 스프레드시트 (정렬, 고정, 리사이즈). `key`로 설정 저장 |
215
+ | [`SdSheetColumn`](./docs/ui-data/sd-sheet.md) | directive | 시트 컬럼 정의 (헤더, 너비, 고정, 정렬 등) |
216
+ | [`SdSheetColumnCellTemplate`](./docs/ui-data/sd-sheet.md) | directive | 시트 컬럼 셀 내용 정의 (`ng-template[cell]`), `SdSheetCellContext` 타입 가드 제공 |
217
+ | [`SdSheetCellContext`](./docs/ui-data/sd-sheet.md) | interface | 시트 셀 템플릿 컨텍스트 (`$implicit`, `item`, `index`, `depth`, `edit`) |
218
+ | [`SdSheetConfigModal`](./docs/ui-data/sd-sheet.md) | component | 시트 설정 모달 |
219
+ | [`SdSheetColumnDef`](./docs/ui-data/sd-sheet.md) | interface | 시트 컬럼 정의 데이터 |
220
+ | [`SdSheetConfig`](./docs/ui-data/sd-sheet.md) | interface | 시트 설정 데이터 |
221
+ | [`SdSheetHeaderDef`](./docs/ui-data/sd-sheet.md) | interface | 시트 헤더 정의 |
222
+ | [`SdSheetItemKeydownEventParam`](./docs/ui-data/sd-sheet.md) | interface | 시트 항목 keydown 이벤트 파라미터 |
223
+ | [`SdSheetCellKeydownEventParam`](./docs/ui-data/sd-sheet.md) | interface | 시트 셀 keydown 이벤트 파라미터 |
254
224
 
255
225
  ### UI - Visual
256
226
 
257
227
  | API | Type | Description |
258
228
  |-----|------|-------------|
259
- | `SdLabel` | component | 라벨 (테마, 크기) |
260
- | `SdNote` | component | 노트/알림 메시지 |
261
- | `SdProgress` | component | 진행률 바 |
262
- | `SdCalendar` | component | 캘린더 |
263
- | `SdBarcode` | component | 바코드 생성 (bwip-js) |
264
- | `SdEcharts` | component | ECharts 차트 래퍼 |
265
- | `BarcodeType` | type | 바코드 타입 |
266
-
267
- -> See [docs/ui-visual.md](./docs/ui-visual.md) for details.
229
+ | [`SdLabel`](./docs/ui-visual/sd-label.md) | component | 라벨 (테마, 크기) |
230
+ | [`SdNote`](./docs/ui-visual/sd-note.md) | component | 노트/알림 메시지 |
231
+ | [`SdProgress`](./docs/ui-visual/sd-progress.md) | component | 진행률 바 |
232
+ | [`SdCalendar`](./docs/ui-visual/sd-calendar.md) | component | 캘린더 |
233
+ | [`SdBarcode`](./docs/ui-visual/sd-barcode.md) | component | 바코드 생성 (bwip-js) |
234
+ | [`SdEcharts`](./docs/ui-visual/sd-echarts.md) | component | ECharts 차트 래퍼 |
235
+ | [`BarcodeType`](./docs/ui-visual/sd-barcode.md) | type | 바코드 타입 |
268
236
 
269
237
  ### UI - Overlay
270
238
 
271
239
  | API | Type | Description |
272
240
  |-----|------|-------------|
273
- | `SdDropdown` | component | 드롭다운 트리거 |
274
- | `SdDropdownPopup` | component | 드롭다운 팝업 |
275
- | `SdModal` | component | 모달 래퍼 컴포넌트 |
276
- | `SdPromptModal` | component | 프롬프트 입력 모달 |
277
- | `SdConfirmModal` | component | 확인/취소 모달 |
278
- | `SdToast` | component | 토스트 개별 항목 |
279
- | `SdToastContainer` | component | 토스트 컨테이너 |
280
- | `SdBusyContainer` | component | busy 표시 컨테이너 |
281
-
282
- -> See [docs/ui-overlay.md](./docs/ui-overlay.md) for details.
241
+ | [`SdDropdown`](./docs/ui-overlay/sd-dropdown.md) | component | 드롭다운 트리거 |
242
+ | [`SdDropdownPopup`](./docs/ui-overlay/sd-dropdown.md) | component | 드롭다운 팝업 |
243
+ | [`SdModal`](./docs/ui-overlay/sd-modal.md) | component | 모달 래퍼 컴포넌트 |
244
+ | [`SdPromptModal`](./docs/ui-overlay/sd-prompt-modal.md) | component | 프롬프트 입력 모달 |
245
+ | [`SdConfirmModal`](./docs/ui-overlay/sd-confirm-modal.md) | component | 확인/취소 모달 |
246
+ | [`SdToast`](./docs/ui-overlay/sd-toast.md) | component | 토스트 개별 항목 |
247
+ | [`SdToastContainer`](./docs/ui-overlay/sd-toast.md) | component | 토스트 컨테이너 |
248
+ | [`SdBusyContainer`](./docs/ui-overlay/sd-busy-container.md) | component | busy 표시 컨테이너 |
249
+
250
+ ### Recipes
251
+
252
+ 화면 조립 레시피. "무엇을 만들고 싶은가" 기준으로 진입한다.
253
+
254
+ | Recipe | Description |
255
+ |--------|-------------|
256
+ | [페이지/모달 컨테이너](./docs/recipes/page-modal-container.md) | `<sd-busy-container>` · `<sd-topbar-container>` · `<sd-topbar>` 직접 조립으로 page/modal/control 뷰 재사용 |
257
+ | [CRUD 리스트](./docs/recipes/crud-list.md) | 조회 전용 page → 인라인 편집 → 선택 모달 → 엑셀 내보내기까지 누적 확장 |
258
+ | [CRUD 상세폼](./docs/recipes/crud-detail.md) | 읽기 전용 상세 → 편집/저장 → 삭제/복원 → modal/control 뷰까지 누적 확장 |
259
+ | [모달 선택 버튼](./docs/recipes/data-select-button.md) | `<sd-modal-select-button>` 직접 사용 / `<sd-shared-data-select-button>` / 사용자 정의 wrapper |
283
260
 
284
261
  ### Styling
285
262
 
286
- | API | Type | Description |
287
- |-----|------|-------------|
288
- | `.flex-row`, `.flex-column` | CSS class | Flexbox 레이아웃 유틸리티 |
289
- | `.grid`, `.grid-{1..12}` | CSS class | Grid 레이아웃 유틸리티 |
290
- | `.card` | CSS class | 카드 스타일 |
291
- | `.form-box`, `.form-table` | CSS class | 폼 레이아웃 |
292
- | `.table` | CSS class | 테이블 스타일 |
293
- | `.p-*`, `.m-*`, `.gap-*` 등 | CSS class | 간격 유틸리티 |
294
- | `--theme-*-*` | CSS custom property | OKLCH 색상 팔레트 (17+5색 x 7단계) |
295
- | `.sd-theme-dark` | theme class | 다크 모드 테마 |
296
-
297
- -> See [docs/styling.md](./docs/styling.md) for details.
263
+ | Entry | Description |
264
+ |-------|-------------|
265
+ | [CSS Classes](./docs/styling/classes.md) | 레이아웃, 유틸리티, 폼, 테이블 클래스 |
266
+ | [CSS Custom Properties](./docs/styling/variables.md) | OKLCH 색상 팔레트, 간격, 폰트, 레이아웃 변수 |
267
+ | [Themes](./docs/styling/themes.md) | 다크 모드 테마 클래스 |
268
+ | [Mixins / Functions](./docs/styling/mixins.md) | 공개 SCSS mixin/function |
298
269
 
299
270
  ## 컴포넌트 비동기 초기화 규칙
300
271
 
301
- 컴포넌트에서 비동기 초기화가 필요한 경우 `async ngOnInit()`을 사용한다.
272
+ 컴포넌트에서 비동기 초기화가 필요한 경우 constructor `effect()` + `void untracked(async () => ...)` 패턴을 사용한다. signal 의존성을 `effect` 콜백의 동기 부분에서 읽어 등록하고, 비동기 작업은 `untracked` 안에서 수행한다. 의존 signal이 변경되면 effect가 자동 재실행된다.
302
273
 
303
274
  ```typescript
304
- export class SomePage implements OnInit {
275
+ export class SomePage {
305
276
  busyCount = signal(0);
306
-
307
- async ngOnInit() {
308
- this.busyCount.update((v) => v + 1);
309
- await this._sdToast.try(async () => {
310
- // 비동기 초기화 로직
277
+ initialized = signal(false);
278
+
279
+ constructor() {
280
+ effect(() => {
281
+ // signal 의존성 등록 (untracked 바깥)
282
+ this.someInput();
283
+ this.lastFilter();
284
+
285
+ void untracked(async () => {
286
+ this.busyCount.update((v) => v + 1);
287
+ await this._sdToast.try(async () => {
288
+ // 비동기 초기화 로직
289
+ });
290
+ this.busyCount.update((v) => v - 1);
291
+ this.initialized.set(true);
292
+ });
311
293
  });
312
- this.busyCount.update((v) => v - 1);
313
294
  }
314
295
  }
315
296
  ```
316
297
 
317
298
  - constructor 내 `void (async () => { ... })()` IIFE 패턴 **금지**
318
- - constructor 내 `void this._init()` 같은 수동 호출 패턴 **금지** — ngOnInit이 이미 같은 역할
299
+ - constructor 내 `void this._init()` 같은 수동 호출 패턴 **금지** — effect가 이미 같은 역할
300
+ - `async ngOnInit()` 패턴 **금지** — 1회만 실행되어 input signal 변경에 반응하지 않는다. effect는 의존 signal 변경 시 자동 재실행된다
319
301
  - `resource()` / `httpResource()`는 데이터 로딩 → signal 매핑 용도. 사이드이펙트(라우팅, toast 등) 포함 초기화에는 사용하지 않는다
320
302
 
321
303
  ## 소비 프로젝트 네이밍 규칙
322
304
 
323
- `@simplysm/angular`를 소비하는 앱 프로젝트에서의 파일명·클래스명 규칙이다.
305
+ `@simplysm/angular`를 소비하는 앱 프로젝트에서의 파일명·클래스명·selector 규칙이다.
324
306
  파일명은 **kebab-case + dot-suffix**, 클래스명은 **PascalCase**를 따른다.
325
307
 
326
- | 접미어 | 조건 | 파일명 예시 | 클래스명 예시 |
327
- |--------|------|-------------|---------------|
328
- | `.sheet.ts` / `*Sheet` | `<sd-sheet>` 기반 CRUD 리스트 화면 ([recipes/crud-list.md](./docs/recipes/crud-list.md)) | `outbound-instruction.sheet.ts` | `OutboundInstructionSheet` |
329
- | `.detail.ts` / `*Detail` | `<sd-form>` 기반 상세 화면 ([recipes/crud-detail.md](./docs/recipes/crud-detail.md)) | `outbound-instruction.detail.ts` | `OutboundInstructionDetail` |
330
- | `.view.ts` / `*View` | sheet/detail 아닌 병합 컴포넌트 + route 연결 | `dashboard.view.ts` | `DashboardView` |
331
- | `.modal.ts` / `*Modal` | 모달 전용 컴포넌트 | `item-select.modal.ts` | `ItemSelectModal` |
332
- | `.provider.ts` / `*Provider` | `@Injectable` 클래스 (**`*Service` 금지**) | `app-service.provider.ts` | `AppServiceProvider` |
333
- | 접미어 없음 | route 미연결 일반 컨트롤 컴포넌트 | `instruction-item.ts` | `InstructionItem` |
308
+ | 접미어 | 조건 | 파일명 예시 | 클래스명 예시 | selector 예시 |
309
+ |--------|------|-------------|---------------|---------------|
310
+ | `.list.ts` / `*List` | 여러 레코드를 조회·관리하는 화면 ([recipes/crud-list.md](./docs/recipes/crud-list.md)) | `outbound-instruction.list.ts` | `OutboundInstructionList` | `app-outbound-instruction-list` |
311
+ | `.detail.ts` / `*Detail` | 단일 레코드를 조회·편집하는 화면 ([recipes/crud-detail.md](./docs/recipes/crud-detail.md)) | `outbound-instruction.detail.ts` | `OutboundInstructionDetail` | `app-outbound-instruction-detail` |
312
+ | `.view.ts` / `*View` | list/detail 아닌 route 연결 화면 (대시보드, 설정 등) | `dashboard.view.ts` | `DashboardView` | `app-dashboard-view` |
313
+ | `.modal.ts` / `*Modal` | 모달 전용 컴포넌트 (route 없이 `SdModalProvider.showAsync`로만 열림) | `item-select.modal.ts` | `ItemSelectModal` | `app-item-select-modal` |
314
+ | `.print-template.ts` / `*PrintTemplate` | 인쇄 전용 컴포넌트 (`SdPrintProvider`로 호출, `SdPrint` 구현) | `box-label.print-template.ts` | `BoxLabelPrintTemplate` | `app-box-label-print-template` |
315
+ | `.provider.ts` / `*Provider` | `@Injectable` 클래스 (**`*Service` 금지**) | `app-service.provider.ts` | `AppServiceProvider` | — |
316
+ | 접미어 없음 | route 미연결 일반 컨트롤 컴포넌트 | `instruction-item.ts` | `InstructionItem` | `app-instruction-item` |
334
317
 
335
318
  - `pipe`, `directive` 등 기타 Angular 구성요소는 `@simplysm/angular` 패키지 자체의 네이밍 패턴(`.pipe.ts`, `.directive.ts`)을 따른다
319
+ - route 화면이 모달로도 재사용되는 경우(예: 선택 모달 겸용 리스트) **주 용도(route)의 suffix**를 유지한다 (예: `CustomerList` + `implements SdSelectModal`)
320
+
321
+ ### selector 규칙
322
+
323
+ selector는 `app-{도메인}-{suffix}` 형식이다. 같은 도메인에 list와 detail이 공존할 수 있으므로 suffix를 반드시 포함한다.
324
+
325
+ | 클래스명 | selector |
326
+ |----------|----------|
327
+ | `CustomerList` | `app-customer-list` |
328
+ | `CustomerDetail` | `app-customer-detail` |
329
+ | `DashboardView` | `app-dashboard-view` |
330
+ | `ItemSelectModal` | `app-item-select-modal` |
331
+
332
+ ### interface 네이밍
333
+
334
+ 소비앱 내부의 로컬 interface에는 **`I` prefix**를 사용한다. 라이브러리에서 import하는 타입(`SortingDef`, `SharedDataBase` 등)에는 붙이지 않는다.
335
+
336
+ ```typescript
337
+ // 소비앱 로컬 interface — I prefix 사용
338
+ interface IFilter { searchText?: string; }
339
+ interface ICustomer { id: number; name: string; }
340
+
341
+ // 라이브러리 타입 — 그대로 사용
342
+ import type { SortingDef, SharedDataBase } from "@simplysm/angular";
343
+ ```
336
344
 
337
345
  ## 소비 프로젝트 디렉토리 구조
338
346
 
@@ -344,8 +352,8 @@ src/
344
352
  │ ├── {메뉴-그룹}/ # 사이드바 메뉴 그룹
345
353
  │ │ └── {도메인}/ # 개별 도메인 (트리 깊이 제한 없음)
346
354
  │ │ ├── {도메인}.view.ts # route 연결 병합 컴포넌트
347
- │ │ ├── {도메인}.sheet.ts # <sd-sheet> 기반 CRUD 리스트 (recipes/crud-list.md)
348
- │ │ ├── {도메인}.detail.ts # <sd-form> 기반 상세 (recipes/crud-detail.md)
355
+ │ │ ├── {도메인}.list.ts # 여러 레코드 조회·관리 (recipes/crud-list.md)
356
+ │ │ ├── {도메인}.detail.ts # 단일 레코드 조회·편집 (recipes/crud-detail.md)
349
357
  │ │ ├── {이름}.modal.ts # 도메인 전용 모달
350
358
  │ │ └── {이름}.ts # 일반 컨트롤 (route 미연결)
351
359
  │ └── main/
@@ -198,11 +198,11 @@ export class SdSelect {
198
198
  const items = this._itemControls();
199
199
  const currentValue = this.value();
200
200
  if (this.selectMode() === "multi") {
201
- const arr = currentValue;
202
- if (arr == null || arr.length === 0) {
201
+ if (!Array.isArray(currentValue) || currentValue.length === 0) {
203
202
  this._selectedItemContentHTML.set(undefined);
204
203
  return;
205
204
  }
205
+ const arr = currentValue;
206
206
  const selectedItems = untracked(() => items.filter((item) => arr.includes(item.value())));
207
207
  const isVertical = this.multiSelectionDisplayDirection() === "vertical";
208
208
  const separator = isVertical ? "<div class='p-sm-0'></div>" : ", ";
@@ -251,7 +251,7 @@ export class SdSelect {
251
251
  }
252
252
  else {
253
253
  this.value.update((v) => {
254
- const arr = v ?? [];
254
+ const arr = Array.isArray(v) ? v : [];
255
255
  if (arr.includes(itemValue)) {
256
256
  return arr.filter((item) => item !== itemValue);
257
257
  }
package/dist/index.d.ts CHANGED
@@ -97,7 +97,6 @@ export { SdSheetColumn, type SdSheetCellContext } from "./data/sheet/sd-sheet-co
97
97
  export { SdSheetColumnCellTemplate } from "./data/sheet/sd-sheet-column-cell-template";
98
98
  export { SdSheetConfigModal } from "./data/sheet/sd-sheet-config.modal";
99
99
  export type { SdSheetColumnDef, SdSheetConfig, SdSheetHeaderDef, SdSheetItemKeydownEventParam, SdSheetCellKeydownEventParam, } from "./data/sheet/types";
100
- export { getOrmDataEditToastErrorMessage } from "./data/getOrmDataEditToastErrorMessage";
101
100
  export { SdSharedDataSelect } from "./data/shared-data/sd-shared-data-select";
102
101
  export { SdSharedDataSelectButton } from "./data/shared-data/sd-shared-data-select-button";
103
102
  export { SdSharedDataSelectList } from "./data/shared-data/sd-shared-data-select-list";