@ncds/ui-admin 1.8.1 → 1.8.2

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 (438) hide show
  1. package/dist/cjs/src/components/badge/index.js +11 -0
  2. package/dist/cjs/src/components/date-picker/index.js +11 -0
  3. package/dist/cjs/src/components/image-file-input/components/index.js +16 -0
  4. package/dist/cjs/src/components/image-file-input/index.js +11 -0
  5. package/dist/cjs/src/components/progress-bar/components/index.js +27 -0
  6. package/dist/cjs/src/components/progress-bar/hooks/index.js +16 -0
  7. package/dist/cjs/src/components/progress-bar/index.js +33 -0
  8. package/dist/cjs/src/components/select/Select.js +0 -1
  9. package/dist/cjs/src/components/select-dropdown/index.js +11 -7
  10. package/dist/cjs/src/components/switch/index.js +11 -7
  11. package/dist/cjs/src/components/tooltip/Tooltip.js +170 -104
  12. package/dist/cjs/src/hooks/dropdown/index.js +61 -37
  13. package/dist/cjs/src/hooks/index.js +31 -25
  14. package/dist/cjs/vitest.config.js +13 -0
  15. package/dist/esm/src/components/badge/index.js +2 -1
  16. package/dist/esm/src/components/date-picker/index.js +1 -0
  17. package/dist/esm/src/components/empty-state/EmptyState.js +2 -3
  18. package/dist/esm/src/components/image-file-input/components/index.js +1 -0
  19. package/dist/esm/src/components/image-file-input/index.js +2 -1
  20. package/dist/esm/src/components/progress-bar/components/index.js +2 -0
  21. package/dist/esm/src/components/progress-bar/hooks/index.js +1 -0
  22. package/dist/esm/src/components/progress-bar/index.js +4 -1
  23. package/dist/esm/src/components/select/Select.js +0 -1
  24. package/dist/esm/src/components/select-dropdown/index.js +1 -1
  25. package/dist/esm/src/components/switch/index.js +1 -1
  26. package/dist/esm/src/components/tag/Tag.js +2 -3
  27. package/dist/esm/src/components/tooltip/Tooltip.js +172 -106
  28. package/dist/esm/src/hooks/dropdown/index.js +6 -6
  29. package/dist/esm/src/hooks/index.js +3 -3
  30. package/dist/esm/src/types/component-meta.js +2 -0
  31. package/dist/esm/vitest.config.js +7 -0
  32. package/dist/temp/src/components/badge/index.d.ts +1 -0
  33. package/dist/temp/src/components/badge/index.js +1 -0
  34. package/dist/temp/src/components/date-picker/index.d.ts +1 -0
  35. package/dist/temp/src/components/date-picker/index.js +1 -0
  36. package/dist/temp/src/components/empty-state/EmptyState.d.ts +3 -5
  37. package/dist/temp/src/components/empty-state/EmptyState.js +1 -2
  38. package/dist/temp/src/components/image-file-input/components/index.d.ts +1 -0
  39. package/dist/temp/src/components/image-file-input/components/index.js +1 -0
  40. package/dist/temp/src/components/image-file-input/index.d.ts +1 -0
  41. package/dist/temp/src/components/image-file-input/index.js +1 -0
  42. package/dist/temp/src/components/progress-bar/components/index.d.ts +2 -0
  43. package/dist/temp/src/components/progress-bar/components/index.js +2 -0
  44. package/dist/temp/src/components/progress-bar/hooks/index.d.ts +1 -0
  45. package/dist/temp/src/components/progress-bar/hooks/index.js +1 -0
  46. package/dist/temp/src/components/progress-bar/index.d.ts +3 -0
  47. package/dist/temp/src/components/progress-bar/index.js +3 -0
  48. package/dist/temp/src/components/select/Select.js +1 -1
  49. package/dist/temp/src/components/select-dropdown/index.d.ts +1 -1
  50. package/dist/temp/src/components/select-dropdown/index.js +1 -1
  51. package/dist/temp/src/components/spinner/Spinner.d.ts +1 -2
  52. package/dist/temp/src/components/switch/index.d.ts +1 -2
  53. package/dist/temp/src/components/switch/index.js +1 -1
  54. package/dist/temp/src/components/tag/Tag.d.ts +3 -5
  55. package/dist/temp/src/components/tag/Tag.js +1 -2
  56. package/dist/temp/src/components/tooltip/Tooltip.d.ts +4 -2
  57. package/dist/temp/src/components/tooltip/Tooltip.js +126 -68
  58. package/dist/temp/src/hooks/dropdown/index.d.ts +6 -6
  59. package/dist/temp/src/hooks/dropdown/index.js +6 -6
  60. package/dist/temp/src/hooks/index.d.ts +3 -3
  61. package/dist/temp/src/hooks/index.js +3 -3
  62. package/dist/temp/src/types/component-meta.d.ts +26 -0
  63. package/dist/temp/src/types/component-meta.js +2 -0
  64. package/dist/temp/src/types/dropdown/option.d.ts +2 -4
  65. package/dist/temp/src/types/side-slot.d.ts +9 -1
  66. package/dist/temp/vitest.config.d.ts +2 -0
  67. package/dist/temp/vitest.config.js +7 -0
  68. package/dist/types/src/components/badge/index.d.ts +1 -0
  69. package/dist/types/src/components/date-picker/index.d.ts +1 -0
  70. package/dist/types/src/components/empty-state/EmptyState.d.ts +3 -5
  71. package/dist/types/src/components/image-file-input/components/index.d.ts +1 -0
  72. package/dist/types/src/components/image-file-input/index.d.ts +1 -0
  73. package/dist/types/src/components/progress-bar/components/index.d.ts +2 -0
  74. package/dist/types/src/components/progress-bar/hooks/index.d.ts +1 -0
  75. package/dist/types/src/components/progress-bar/index.d.ts +3 -0
  76. package/dist/types/src/components/select-dropdown/index.d.ts +1 -1
  77. package/dist/types/src/components/spinner/Spinner.d.ts +1 -2
  78. package/dist/types/src/components/switch/index.d.ts +1 -2
  79. package/dist/types/src/components/tag/Tag.d.ts +3 -5
  80. package/dist/types/src/components/tooltip/Tooltip.d.ts +4 -2
  81. package/dist/types/src/hooks/dropdown/index.d.ts +6 -6
  82. package/dist/types/src/hooks/index.d.ts +3 -3
  83. package/dist/types/src/types/component-meta.d.ts +26 -0
  84. package/dist/types/src/types/dropdown/option.d.ts +2 -4
  85. package/dist/types/src/types/side-slot.d.ts +9 -1
  86. package/dist/types/vitest.config.d.ts +2 -0
  87. package/dist/ui-admin/assets/styles/style.css +18 -7
  88. package/package.json +6 -1
  89. package/dist/cjs/assets/scripts/baseBox.js +0 -146
  90. package/dist/cjs/assets/scripts/comboBox.js +0 -137
  91. package/dist/cjs/assets/scripts/datePicker.js +0 -671
  92. package/dist/cjs/assets/scripts/featuredIcon.js +0 -87
  93. package/dist/cjs/assets/scripts/fileInput/const/classNames.js +0 -25
  94. package/dist/cjs/assets/scripts/fileInput/const/index.js +0 -27
  95. package/dist/cjs/assets/scripts/fileInput/const/types.js +0 -13
  96. package/dist/cjs/assets/scripts/fileInput/fileInput.js +0 -78
  97. package/dist/cjs/assets/scripts/fileInput/fileInputModel.js +0 -53
  98. package/dist/cjs/assets/scripts/fileInput/fileInputView.js +0 -152
  99. package/dist/cjs/assets/scripts/fileInput/index.js +0 -44
  100. package/dist/cjs/assets/scripts/imageFileInput/ImageFileInput.js +0 -184
  101. package/dist/cjs/assets/scripts/imageFileInput/ImageFileInputModel.js +0 -222
  102. package/dist/cjs/assets/scripts/imageFileInput/ImageFileInputView.js +0 -356
  103. package/dist/cjs/assets/scripts/imageFileInput/const/classNames.js +0 -31
  104. package/dist/cjs/assets/scripts/imageFileInput/const/index.js +0 -27
  105. package/dist/cjs/assets/scripts/imageFileInput/const/types.js +0 -13
  106. package/dist/cjs/assets/scripts/imageFileInput/index.js +0 -44
  107. package/dist/cjs/assets/scripts/index.js +0 -32
  108. package/dist/cjs/assets/scripts/modal/Modal.js +0 -104
  109. package/dist/cjs/assets/scripts/modal/ModalActions.js +0 -116
  110. package/dist/cjs/assets/scripts/modal/ModalContent.js +0 -46
  111. package/dist/cjs/assets/scripts/modal/ModalHeader.js +0 -104
  112. package/dist/cjs/assets/scripts/modal/const/classNames.js +0 -33
  113. package/dist/cjs/assets/scripts/modal/const/index.js +0 -27
  114. package/dist/cjs/assets/scripts/modal/index.js +0 -61
  115. package/dist/cjs/assets/scripts/modal/utils/contentUtils.js +0 -35
  116. package/dist/cjs/assets/scripts/notification/FloatingNotification.js +0 -178
  117. package/dist/cjs/assets/scripts/notification/FullWidthNotification.js +0 -132
  118. package/dist/cjs/assets/scripts/notification/MessageNotification.js +0 -159
  119. package/dist/cjs/assets/scripts/notification/Notification.js +0 -101
  120. package/dist/cjs/assets/scripts/notification/const/classNames.js +0 -50
  121. package/dist/cjs/assets/scripts/notification/const/icons.js +0 -31
  122. package/dist/cjs/assets/scripts/notification/const/index.js +0 -87
  123. package/dist/cjs/assets/scripts/notification/const/sizes.js +0 -46
  124. package/dist/cjs/assets/scripts/notification/const/types.js +0 -14
  125. package/dist/cjs/assets/scripts/notification/index.js +0 -92
  126. package/dist/cjs/assets/scripts/notification/utils.js +0 -97
  127. package/dist/cjs/assets/scripts/progress-bar/ProgressBar.js +0 -271
  128. package/dist/cjs/assets/scripts/progress-bar/index.js +0 -12
  129. package/dist/cjs/assets/scripts/selectBox.js +0 -169
  130. package/dist/cjs/assets/scripts/shared/ButtonCloseX.js +0 -45
  131. package/dist/cjs/assets/scripts/tab.js +0 -40
  132. package/dist/cjs/assets/scripts/table/Table.js +0 -377
  133. package/dist/cjs/assets/scripts/table/const/classNames.js +0 -33
  134. package/dist/cjs/assets/scripts/table/const/index.js +0 -27
  135. package/dist/cjs/assets/scripts/table/const/types.js +0 -5
  136. package/dist/cjs/assets/scripts/table/index.js +0 -43
  137. package/dist/cjs/assets/scripts/tag/Tag.js +0 -261
  138. package/dist/cjs/assets/scripts/tag/const/classNames.js +0 -20
  139. package/dist/cjs/assets/scripts/tag/const/index.js +0 -38
  140. package/dist/cjs/assets/scripts/tag/const/sizes.js +0 -13
  141. package/dist/cjs/assets/scripts/tag/const/types.js +0 -5
  142. package/dist/cjs/assets/scripts/tag/index.js +0 -44
  143. package/dist/cjs/assets/scripts/tooltip/Tooltip.js +0 -353
  144. package/dist/cjs/assets/scripts/tooltip/TooltipLayerManager.js +0 -82
  145. package/dist/cjs/assets/scripts/tooltip/const/classNames.js +0 -29
  146. package/dist/cjs/assets/scripts/tooltip/const/constants.js +0 -56
  147. package/dist/cjs/assets/scripts/tooltip/const/icons.js +0 -15
  148. package/dist/cjs/assets/scripts/tooltip/const/index.js +0 -123
  149. package/dist/cjs/assets/scripts/tooltip/const/templates.js +0 -66
  150. package/dist/cjs/assets/scripts/tooltip/const/types.js +0 -5
  151. package/dist/cjs/assets/scripts/tooltip/index.js +0 -57
  152. package/dist/cjs/assets/scripts/tooltip/utils.js +0 -40
  153. package/dist/cjs/assets/scripts/utils/debounce.js +0 -32
  154. package/dist/cjs/assets/scripts/utils/unifiedBox/domRenderer.js +0 -370
  155. package/dist/cjs/assets/scripts/utils/unifiedBox/dropdownModel.js +0 -285
  156. package/dist/cjs/assets/scripts/utils/unifiedBox/unifiedBoxController.js +0 -622
  157. package/dist/cjs/assets/scripts/utils/unifiedBox/unifiedBoxManager.js +0 -473
  158. package/dist/esm/assets/scripts/baseBox.js +0 -139
  159. package/dist/esm/assets/scripts/comboBox.js +0 -130
  160. package/dist/esm/assets/scripts/datePicker.js +0 -663
  161. package/dist/esm/assets/scripts/featuredIcon.js +0 -80
  162. package/dist/esm/assets/scripts/fileInput/const/classNames.js +0 -16
  163. package/dist/esm/assets/scripts/fileInput/const/index.js +0 -2
  164. package/dist/esm/assets/scripts/fileInput/const/types.js +0 -7
  165. package/dist/esm/assets/scripts/fileInput/fileInput.js +0 -71
  166. package/dist/esm/assets/scripts/fileInput/fileInputModel.js +0 -46
  167. package/dist/esm/assets/scripts/fileInput/fileInputView.js +0 -145
  168. package/dist/esm/assets/scripts/fileInput/index.js +0 -9
  169. package/dist/esm/assets/scripts/imageFileInput/ImageFileInput.js +0 -177
  170. package/dist/esm/assets/scripts/imageFileInput/ImageFileInputModel.js +0 -215
  171. package/dist/esm/assets/scripts/imageFileInput/ImageFileInputView.js +0 -349
  172. package/dist/esm/assets/scripts/imageFileInput/const/classNames.js +0 -20
  173. package/dist/esm/assets/scripts/imageFileInput/const/index.js +0 -2
  174. package/dist/esm/assets/scripts/imageFileInput/const/types.js +0 -7
  175. package/dist/esm/assets/scripts/imageFileInput/index.js +0 -9
  176. package/dist/esm/assets/scripts/index.js +0 -30
  177. package/dist/esm/assets/scripts/modal/Modal.js +0 -98
  178. package/dist/esm/assets/scripts/modal/ModalActions.js +0 -109
  179. package/dist/esm/assets/scripts/modal/ModalContent.js +0 -39
  180. package/dist/esm/assets/scripts/modal/ModalHeader.js +0 -97
  181. package/dist/esm/assets/scripts/modal/const/classNames.js +0 -23
  182. package/dist/esm/assets/scripts/modal/const/index.js +0 -2
  183. package/dist/esm/assets/scripts/modal/const/types.js +0 -1
  184. package/dist/esm/assets/scripts/modal/index.js +0 -15
  185. package/dist/esm/assets/scripts/modal/utils/contentUtils.js +0 -28
  186. package/dist/esm/assets/scripts/notification/FloatingNotification.js +0 -172
  187. package/dist/esm/assets/scripts/notification/FullWidthNotification.js +0 -125
  188. package/dist/esm/assets/scripts/notification/MessageNotification.js +0 -152
  189. package/dist/esm/assets/scripts/notification/Notification.js +0 -94
  190. package/dist/esm/assets/scripts/notification/const/classNames.js +0 -44
  191. package/dist/esm/assets/scripts/notification/const/icons.js +0 -25
  192. package/dist/esm/assets/scripts/notification/const/index.js +0 -4
  193. package/dist/esm/assets/scripts/notification/const/sizes.js +0 -40
  194. package/dist/esm/assets/scripts/notification/const/types.js +0 -8
  195. package/dist/esm/assets/scripts/notification/index.js +0 -11
  196. package/dist/esm/assets/scripts/notification/utils.js +0 -84
  197. package/dist/esm/assets/scripts/progress-bar/ProgressBar.js +0 -264
  198. package/dist/esm/assets/scripts/progress-bar/index.js +0 -1
  199. package/dist/esm/assets/scripts/selectBox.js +0 -162
  200. package/dist/esm/assets/scripts/shared/ButtonCloseX.js +0 -37
  201. package/dist/esm/assets/scripts/tab.js +0 -33
  202. package/dist/esm/assets/scripts/table/Table.js +0 -370
  203. package/dist/esm/assets/scripts/table/const/classNames.js +0 -27
  204. package/dist/esm/assets/scripts/table/const/index.js +0 -2
  205. package/dist/esm/assets/scripts/table/const/types.js +0 -1
  206. package/dist/esm/assets/scripts/table/index.js +0 -8
  207. package/dist/esm/assets/scripts/tag/Tag.js +0 -254
  208. package/dist/esm/assets/scripts/tag/const/classNames.js +0 -12
  209. package/dist/esm/assets/scripts/tag/const/index.js +0 -3
  210. package/dist/esm/assets/scripts/tag/const/sizes.js +0 -7
  211. package/dist/esm/assets/scripts/tag/const/types.js +0 -1
  212. package/dist/esm/assets/scripts/tag/index.js +0 -9
  213. package/dist/esm/assets/scripts/tooltip/Tooltip.js +0 -346
  214. package/dist/esm/assets/scripts/tooltip/TooltipLayerManager.js +0 -75
  215. package/dist/esm/assets/scripts/tooltip/const/classNames.js +0 -23
  216. package/dist/esm/assets/scripts/tooltip/const/constants.js +0 -50
  217. package/dist/esm/assets/scripts/tooltip/const/icons.js +0 -9
  218. package/dist/esm/assets/scripts/tooltip/const/index.js +0 -4
  219. package/dist/esm/assets/scripts/tooltip/const/templates.js +0 -59
  220. package/dist/esm/assets/scripts/tooltip/const/types.js +0 -1
  221. package/dist/esm/assets/scripts/tooltip/index.js +0 -10
  222. package/dist/esm/assets/scripts/tooltip/utils.js +0 -34
  223. package/dist/esm/assets/scripts/utils/debounce.js +0 -26
  224. package/dist/esm/assets/scripts/utils/unifiedBox/domRenderer.js +0 -363
  225. package/dist/esm/assets/scripts/utils/unifiedBox/dropdownModel.js +0 -279
  226. package/dist/esm/assets/scripts/utils/unifiedBox/unifiedBoxController.js +0 -615
  227. package/dist/esm/assets/scripts/utils/unifiedBox/unifiedBoxManager.js +0 -466
  228. package/dist/temp/assets/scripts/baseBox.d.ts +0 -55
  229. package/dist/temp/assets/scripts/baseBox.js +0 -140
  230. package/dist/temp/assets/scripts/comboBox.d.ts +0 -60
  231. package/dist/temp/assets/scripts/comboBox.js +0 -132
  232. package/dist/temp/assets/scripts/datePicker.d.ts +0 -86
  233. package/dist/temp/assets/scripts/datePicker.js +0 -699
  234. package/dist/temp/assets/scripts/featuredIcon.d.ts +0 -22
  235. package/dist/temp/assets/scripts/featuredIcon.js +0 -79
  236. package/dist/temp/assets/scripts/fileInput/const/classNames.d.ts +0 -15
  237. package/dist/temp/assets/scripts/fileInput/const/classNames.js +0 -16
  238. package/dist/temp/assets/scripts/fileInput/const/index.d.ts +0 -2
  239. package/dist/temp/assets/scripts/fileInput/const/index.js +0 -2
  240. package/dist/temp/assets/scripts/fileInput/const/types.d.ts +0 -88
  241. package/dist/temp/assets/scripts/fileInput/const/types.js +0 -7
  242. package/dist/temp/assets/scripts/fileInput/fileInput.d.ts +0 -13
  243. package/dist/temp/assets/scripts/fileInput/fileInput.js +0 -71
  244. package/dist/temp/assets/scripts/fileInput/fileInputModel.d.ts +0 -12
  245. package/dist/temp/assets/scripts/fileInput/fileInputModel.js +0 -37
  246. package/dist/temp/assets/scripts/fileInput/fileInputView.d.ts +0 -42
  247. package/dist/temp/assets/scripts/fileInput/fileInputView.js +0 -145
  248. package/dist/temp/assets/scripts/fileInput/index.d.ts +0 -3
  249. package/dist/temp/assets/scripts/fileInput/index.js +0 -9
  250. package/dist/temp/assets/scripts/imageFileInput/ImageFileInput.d.ts +0 -63
  251. package/dist/temp/assets/scripts/imageFileInput/ImageFileInput.js +0 -180
  252. package/dist/temp/assets/scripts/imageFileInput/ImageFileInputModel.d.ts +0 -73
  253. package/dist/temp/assets/scripts/imageFileInput/ImageFileInputModel.js +0 -214
  254. package/dist/temp/assets/scripts/imageFileInput/ImageFileInputView.d.ts +0 -79
  255. package/dist/temp/assets/scripts/imageFileInput/ImageFileInputView.js +0 -350
  256. package/dist/temp/assets/scripts/imageFileInput/const/classNames.d.ts +0 -19
  257. package/dist/temp/assets/scripts/imageFileInput/const/classNames.js +0 -20
  258. package/dist/temp/assets/scripts/imageFileInput/const/index.d.ts +0 -2
  259. package/dist/temp/assets/scripts/imageFileInput/const/index.js +0 -2
  260. package/dist/temp/assets/scripts/imageFileInput/const/types.d.ts +0 -125
  261. package/dist/temp/assets/scripts/imageFileInput/const/types.js +0 -7
  262. package/dist/temp/assets/scripts/imageFileInput/index.d.ts +0 -3
  263. package/dist/temp/assets/scripts/imageFileInput/index.js +0 -9
  264. package/dist/temp/assets/scripts/index.d.ts +0 -34
  265. package/dist/temp/assets/scripts/index.js +0 -30
  266. package/dist/temp/assets/scripts/modal/Modal.d.ts +0 -27
  267. package/dist/temp/assets/scripts/modal/Modal.js +0 -100
  268. package/dist/temp/assets/scripts/modal/ModalActions.d.ts +0 -18
  269. package/dist/temp/assets/scripts/modal/ModalActions.js +0 -117
  270. package/dist/temp/assets/scripts/modal/ModalContent.d.ts +0 -13
  271. package/dist/temp/assets/scripts/modal/ModalContent.js +0 -39
  272. package/dist/temp/assets/scripts/modal/ModalHeader.d.ts +0 -15
  273. package/dist/temp/assets/scripts/modal/ModalHeader.js +0 -96
  274. package/dist/temp/assets/scripts/modal/const/classNames.d.ts +0 -22
  275. package/dist/temp/assets/scripts/modal/const/classNames.js +0 -23
  276. package/dist/temp/assets/scripts/modal/const/index.d.ts +0 -2
  277. package/dist/temp/assets/scripts/modal/const/index.js +0 -2
  278. package/dist/temp/assets/scripts/modal/const/types.d.ts +0 -61
  279. package/dist/temp/assets/scripts/modal/const/types.js +0 -1
  280. package/dist/temp/assets/scripts/modal/index.d.ts +0 -7
  281. package/dist/temp/assets/scripts/modal/index.js +0 -15
  282. package/dist/temp/assets/scripts/modal/utils/contentUtils.d.ts +0 -10
  283. package/dist/temp/assets/scripts/modal/utils/contentUtils.js +0 -29
  284. package/dist/temp/assets/scripts/notification/FloatingNotification.d.ts +0 -24
  285. package/dist/temp/assets/scripts/notification/FloatingNotification.js +0 -157
  286. package/dist/temp/assets/scripts/notification/FullWidthNotification.d.ts +0 -21
  287. package/dist/temp/assets/scripts/notification/FullWidthNotification.js +0 -110
  288. package/dist/temp/assets/scripts/notification/MessageNotification.d.ts +0 -22
  289. package/dist/temp/assets/scripts/notification/MessageNotification.js +0 -140
  290. package/dist/temp/assets/scripts/notification/Notification.d.ts +0 -21
  291. package/dist/temp/assets/scripts/notification/Notification.js +0 -94
  292. package/dist/temp/assets/scripts/notification/const/classNames.d.ts +0 -43
  293. package/dist/temp/assets/scripts/notification/const/classNames.js +0 -44
  294. package/dist/temp/assets/scripts/notification/const/icons.d.ts +0 -25
  295. package/dist/temp/assets/scripts/notification/const/icons.js +0 -25
  296. package/dist/temp/assets/scripts/notification/const/index.d.ts +0 -5
  297. package/dist/temp/assets/scripts/notification/const/index.js +0 -4
  298. package/dist/temp/assets/scripts/notification/const/sizes.d.ts +0 -32
  299. package/dist/temp/assets/scripts/notification/const/sizes.js +0 -40
  300. package/dist/temp/assets/scripts/notification/const/types.d.ts +0 -19
  301. package/dist/temp/assets/scripts/notification/const/types.js +0 -8
  302. package/dist/temp/assets/scripts/notification/index.d.ts +0 -7
  303. package/dist/temp/assets/scripts/notification/index.js +0 -11
  304. package/dist/temp/assets/scripts/notification/utils.d.ts +0 -8
  305. package/dist/temp/assets/scripts/notification/utils.js +0 -89
  306. package/dist/temp/assets/scripts/progress-bar/ProgressBar.d.ts +0 -67
  307. package/dist/temp/assets/scripts/progress-bar/ProgressBar.js +0 -263
  308. package/dist/temp/assets/scripts/progress-bar/index.d.ts +0 -1
  309. package/dist/temp/assets/scripts/progress-bar/index.js +0 -1
  310. package/dist/temp/assets/scripts/selectBox.d.ts +0 -50
  311. package/dist/temp/assets/scripts/selectBox.js +0 -170
  312. package/dist/temp/assets/scripts/shared/ButtonCloseX.d.ts +0 -5
  313. package/dist/temp/assets/scripts/shared/ButtonCloseX.js +0 -33
  314. package/dist/temp/assets/scripts/tab.d.ts +0 -7
  315. package/dist/temp/assets/scripts/tab.js +0 -33
  316. package/dist/temp/assets/scripts/table/Table.d.ts +0 -41
  317. package/dist/temp/assets/scripts/table/Table.js +0 -378
  318. package/dist/temp/assets/scripts/table/const/classNames.d.ts +0 -27
  319. package/dist/temp/assets/scripts/table/const/classNames.js +0 -27
  320. package/dist/temp/assets/scripts/table/const/index.d.ts +0 -2
  321. package/dist/temp/assets/scripts/table/const/index.js +0 -2
  322. package/dist/temp/assets/scripts/table/const/types.d.ts +0 -23
  323. package/dist/temp/assets/scripts/table/const/types.js +0 -1
  324. package/dist/temp/assets/scripts/table/index.d.ts +0 -3
  325. package/dist/temp/assets/scripts/table/index.js +0 -8
  326. package/dist/temp/assets/scripts/tag/Tag.d.ts +0 -27
  327. package/dist/temp/assets/scripts/tag/Tag.js +0 -259
  328. package/dist/temp/assets/scripts/tag/const/classNames.d.ts +0 -11
  329. package/dist/temp/assets/scripts/tag/const/classNames.js +0 -12
  330. package/dist/temp/assets/scripts/tag/const/index.d.ts +0 -3
  331. package/dist/temp/assets/scripts/tag/const/index.js +0 -3
  332. package/dist/temp/assets/scripts/tag/const/sizes.d.ts +0 -7
  333. package/dist/temp/assets/scripts/tag/const/sizes.js +0 -7
  334. package/dist/temp/assets/scripts/tag/const/types.d.ts +0 -33
  335. package/dist/temp/assets/scripts/tag/const/types.js +0 -1
  336. package/dist/temp/assets/scripts/tag/index.d.ts +0 -3
  337. package/dist/temp/assets/scripts/tag/index.js +0 -9
  338. package/dist/temp/assets/scripts/tooltip/Tooltip.d.ts +0 -54
  339. package/dist/temp/assets/scripts/tooltip/Tooltip.js +0 -335
  340. package/dist/temp/assets/scripts/tooltip/TooltipLayerManager.d.ts +0 -21
  341. package/dist/temp/assets/scripts/tooltip/TooltipLayerManager.js +0 -71
  342. package/dist/temp/assets/scripts/tooltip/const/classNames.d.ts +0 -17
  343. package/dist/temp/assets/scripts/tooltip/const/classNames.js +0 -23
  344. package/dist/temp/assets/scripts/tooltip/const/constants.d.ts +0 -33
  345. package/dist/temp/assets/scripts/tooltip/const/constants.js +0 -46
  346. package/dist/temp/assets/scripts/tooltip/const/icons.d.ts +0 -4
  347. package/dist/temp/assets/scripts/tooltip/const/icons.js +0 -9
  348. package/dist/temp/assets/scripts/tooltip/const/index.d.ts +0 -5
  349. package/dist/temp/assets/scripts/tooltip/const/index.js +0 -4
  350. package/dist/temp/assets/scripts/tooltip/const/templates.d.ts +0 -16
  351. package/dist/temp/assets/scripts/tooltip/const/templates.js +0 -59
  352. package/dist/temp/assets/scripts/tooltip/const/types.d.ts +0 -14
  353. package/dist/temp/assets/scripts/tooltip/const/types.js +0 -1
  354. package/dist/temp/assets/scripts/tooltip/index.d.ts +0 -6
  355. package/dist/temp/assets/scripts/tooltip/index.js +0 -10
  356. package/dist/temp/assets/scripts/tooltip/utils.d.ts +0 -2
  357. package/dist/temp/assets/scripts/tooltip/utils.js +0 -33
  358. package/dist/temp/assets/scripts/utils/debounce.d.ts +0 -8
  359. package/dist/temp/assets/scripts/utils/debounce.js +0 -23
  360. package/dist/temp/assets/scripts/utils/unifiedBox/domRenderer.d.ts +0 -107
  361. package/dist/temp/assets/scripts/utils/unifiedBox/domRenderer.js +0 -367
  362. package/dist/temp/assets/scripts/utils/unifiedBox/dropdownModel.d.ts +0 -142
  363. package/dist/temp/assets/scripts/utils/unifiedBox/dropdownModel.js +0 -286
  364. package/dist/temp/assets/scripts/utils/unifiedBox/unifiedBoxController.d.ts +0 -156
  365. package/dist/temp/assets/scripts/utils/unifiedBox/unifiedBoxController.js +0 -604
  366. package/dist/temp/assets/scripts/utils/unifiedBox/unifiedBoxManager.d.ts +0 -95
  367. package/dist/temp/assets/scripts/utils/unifiedBox/unifiedBoxManager.js +0 -482
  368. package/dist/types/assets/scripts/baseBox.d.ts +0 -55
  369. package/dist/types/assets/scripts/comboBox.d.ts +0 -60
  370. package/dist/types/assets/scripts/datePicker.d.ts +0 -86
  371. package/dist/types/assets/scripts/featuredIcon.d.ts +0 -22
  372. package/dist/types/assets/scripts/fileInput/const/classNames.d.ts +0 -15
  373. package/dist/types/assets/scripts/fileInput/const/index.d.ts +0 -2
  374. package/dist/types/assets/scripts/fileInput/const/types.d.ts +0 -88
  375. package/dist/types/assets/scripts/fileInput/fileInput.d.ts +0 -13
  376. package/dist/types/assets/scripts/fileInput/fileInputModel.d.ts +0 -12
  377. package/dist/types/assets/scripts/fileInput/fileInputView.d.ts +0 -42
  378. package/dist/types/assets/scripts/fileInput/index.d.ts +0 -3
  379. package/dist/types/assets/scripts/imageFileInput/ImageFileInput.d.ts +0 -63
  380. package/dist/types/assets/scripts/imageFileInput/ImageFileInputModel.d.ts +0 -73
  381. package/dist/types/assets/scripts/imageFileInput/ImageFileInputView.d.ts +0 -79
  382. package/dist/types/assets/scripts/imageFileInput/const/classNames.d.ts +0 -19
  383. package/dist/types/assets/scripts/imageFileInput/const/index.d.ts +0 -2
  384. package/dist/types/assets/scripts/imageFileInput/const/types.d.ts +0 -125
  385. package/dist/types/assets/scripts/imageFileInput/index.d.ts +0 -3
  386. package/dist/types/assets/scripts/index.d.ts +0 -34
  387. package/dist/types/assets/scripts/modal/Modal.d.ts +0 -27
  388. package/dist/types/assets/scripts/modal/ModalActions.d.ts +0 -18
  389. package/dist/types/assets/scripts/modal/ModalContent.d.ts +0 -13
  390. package/dist/types/assets/scripts/modal/ModalHeader.d.ts +0 -15
  391. package/dist/types/assets/scripts/modal/const/classNames.d.ts +0 -22
  392. package/dist/types/assets/scripts/modal/const/index.d.ts +0 -2
  393. package/dist/types/assets/scripts/modal/const/types.d.ts +0 -61
  394. package/dist/types/assets/scripts/modal/index.d.ts +0 -7
  395. package/dist/types/assets/scripts/modal/utils/contentUtils.d.ts +0 -10
  396. package/dist/types/assets/scripts/notification/FloatingNotification.d.ts +0 -24
  397. package/dist/types/assets/scripts/notification/FullWidthNotification.d.ts +0 -21
  398. package/dist/types/assets/scripts/notification/MessageNotification.d.ts +0 -22
  399. package/dist/types/assets/scripts/notification/Notification.d.ts +0 -21
  400. package/dist/types/assets/scripts/notification/const/classNames.d.ts +0 -43
  401. package/dist/types/assets/scripts/notification/const/icons.d.ts +0 -25
  402. package/dist/types/assets/scripts/notification/const/index.d.ts +0 -5
  403. package/dist/types/assets/scripts/notification/const/sizes.d.ts +0 -32
  404. package/dist/types/assets/scripts/notification/const/types.d.ts +0 -19
  405. package/dist/types/assets/scripts/notification/index.d.ts +0 -7
  406. package/dist/types/assets/scripts/notification/utils.d.ts +0 -8
  407. package/dist/types/assets/scripts/progress-bar/ProgressBar.d.ts +0 -67
  408. package/dist/types/assets/scripts/progress-bar/index.d.ts +0 -1
  409. package/dist/types/assets/scripts/selectBox.d.ts +0 -50
  410. package/dist/types/assets/scripts/shared/ButtonCloseX.d.ts +0 -5
  411. package/dist/types/assets/scripts/tab.d.ts +0 -7
  412. package/dist/types/assets/scripts/table/Table.d.ts +0 -41
  413. package/dist/types/assets/scripts/table/const/classNames.d.ts +0 -27
  414. package/dist/types/assets/scripts/table/const/index.d.ts +0 -2
  415. package/dist/types/assets/scripts/table/const/types.d.ts +0 -23
  416. package/dist/types/assets/scripts/table/index.d.ts +0 -3
  417. package/dist/types/assets/scripts/tag/Tag.d.ts +0 -27
  418. package/dist/types/assets/scripts/tag/const/classNames.d.ts +0 -11
  419. package/dist/types/assets/scripts/tag/const/index.d.ts +0 -3
  420. package/dist/types/assets/scripts/tag/const/sizes.d.ts +0 -7
  421. package/dist/types/assets/scripts/tag/const/types.d.ts +0 -33
  422. package/dist/types/assets/scripts/tag/index.d.ts +0 -3
  423. package/dist/types/assets/scripts/tooltip/Tooltip.d.ts +0 -54
  424. package/dist/types/assets/scripts/tooltip/TooltipLayerManager.d.ts +0 -21
  425. package/dist/types/assets/scripts/tooltip/const/classNames.d.ts +0 -17
  426. package/dist/types/assets/scripts/tooltip/const/constants.d.ts +0 -33
  427. package/dist/types/assets/scripts/tooltip/const/icons.d.ts +0 -4
  428. package/dist/types/assets/scripts/tooltip/const/index.d.ts +0 -5
  429. package/dist/types/assets/scripts/tooltip/const/templates.d.ts +0 -16
  430. package/dist/types/assets/scripts/tooltip/const/types.d.ts +0 -14
  431. package/dist/types/assets/scripts/tooltip/index.d.ts +0 -6
  432. package/dist/types/assets/scripts/tooltip/utils.d.ts +0 -2
  433. package/dist/types/assets/scripts/utils/debounce.d.ts +0 -8
  434. package/dist/types/assets/scripts/utils/unifiedBox/domRenderer.d.ts +0 -107
  435. package/dist/types/assets/scripts/utils/unifiedBox/dropdownModel.d.ts +0 -142
  436. package/dist/types/assets/scripts/utils/unifiedBox/unifiedBoxController.d.ts +0 -156
  437. package/dist/types/assets/scripts/utils/unifiedBox/unifiedBoxManager.d.ts +0 -95
  438. /package/dist/cjs/{assets/scripts/modal/const/types.js → src/types/component-meta.js} +0 -0
@@ -1,7 +0,0 @@
1
- export const iconSize = {
2
- sm: 14,
3
- md: 16
4
- };
5
- export const MARGIN = 10;
6
- export const DEFAULT_TOOLTIP_WIDTH = 200;
7
- export const DEFAULT_TOOLTIP_HEIGHT = 60;
@@ -1 +0,0 @@
1
- export {};
@@ -1,9 +0,0 @@
1
- import { Tag } from './Tag';
2
- export { Tag } from './Tag';
3
- export * from './const/types';
4
- export * from './const/classNames';
5
- // 전역 등록 ( 추후 index.ts와 개별동작 할 수 있게끔 대비 )
6
- if (typeof window !== 'undefined') {
7
- window.ncua = window.ncua || {};
8
- window.ncua.Tag = Tag;
9
- }
@@ -1,346 +0,0 @@
1
- import { SVG_ICONS, CLASS_NAMES, TOOLTIP_DEFAULT_VALUE, ICON_SIZES, TOOLTIP_OFFSET, VIEWPORT_MARGIN, OFFSCREEN_POSITION, OPACITY, POSITION, EVENT_OPTIONS, CSS_TEMPLATES, HTML_TEMPLATES, FALLBACK_ICON_SVG, Z_INDEX } from './const';
2
- import { ButtonCloseX } from '../shared/ButtonCloseX';
3
- import { MEDIA_QUERY } from '../../../src/constant/breakpoint';
4
- import { TooltipLayerManager } from './TooltipLayerManager';
5
- /**
6
- * Tooltip 클래스
7
- * 툴팁 패널 패턴을 사용하여 툴팁을 생성합니다.
8
- * 툴팁 패널 패턴은 바깥 컨테이너(항상 pointer-events:none) + 실제 패널(클릭 허용) 패턴을 사용합니다.
9
- * 레이어 1개 아래에 여러개의 패널과 툴팁이 생성되어 화면에 삽입됩니다.
10
- * 자동 위치조정 ( 공간이 부족하다면 상하좌우를 조절하는 기능 - 기본값: top )을 사용합니다.
11
- * Shadow DOM 지원
12
- */
13
- export class Tooltip {
14
- constructor() {
15
- let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
16
- this.iconElement = null;
17
- // 전역 레이어 매니저 사용
18
- this.layerManager = TooltipLayerManager.getInstance();
19
- this.panelId = null;
20
- this.panel = null;
21
- this.calculatedPosition = 'top';
22
- this.isVisible = false;
23
- this.isMeasuring = false;
24
- this.isForceHidden = false;
25
- // 이벤트 핸들러
26
- this.boundMouseEnter = () => this.handleMouseEnter();
27
- this.boundMouseLeave = () => this.handleMouseLeave();
28
- this.boundResizeScroll = () => this.handleResizeScroll();
29
- this.boundPanelClick = e => this.handlePanelClick(e);
30
- /* ========== 핸들러 ========== */
31
- this.handleMouseEnter = () => {
32
- this.showTooltip();
33
- if (this.options.type === 'long') {
34
- // long은 X로 닫을 때까지 유지 → 재호버 방지
35
- this.disableMouseEvents();
36
- }
37
- };
38
- this.handleMouseLeave = () => {
39
- if (this.options.type === 'short') {
40
- this.hideTooltip();
41
- }
42
- };
43
- this.handleResizeScroll = () => {
44
- if (this.isVisible) this.updateTooltipPosition();
45
- };
46
- this.handlePanelClick = e => {
47
- const t = e.target;
48
- if (t.closest(`.${CLASS_NAMES.TOOLTIP_CLOSE_BUTTON}`)) {
49
- e.stopPropagation();
50
- e.preventDefault();
51
- this.isForceHidden = true;
52
- this.hideTooltip();
53
- // long 타입에서 닫았으면 다시 hover 가능
54
- if (this.options.type === 'long') this.enableMouseEvents();
55
- }
56
- };
57
- this.options = {
58
- ...TOOLTIP_DEFAULT_VALUE,
59
- ...options
60
- };
61
- this.element = this.createElement();
62
- this.bindEvents();
63
- }
64
- /* ========== DOM 생성 ========== */
65
- createElement() {
66
- const iconSize = ICON_SIZES[this.options.size ?? 'sm'];
67
- const key = this.options.iconType === 'stroke' ? 'help-circle-stroke' : 'help-circle-fill';
68
- const iconSvg = SVG_ICONS[key]?.(iconSize) ?? FALLBACK_ICON_SVG(iconSize);
69
- const wrapper = document.createElement('span');
70
- wrapper.className = this.buildAnchorClassName();
71
- wrapper.style.cssText = CSS_TEMPLATES.ANCHOR_WRAPPER;
72
- wrapper.innerHTML = HTML_TEMPLATES.ICON_WRAPPER(CLASS_NAMES.TOOLTIP_ICON, iconSvg);
73
- this.iconElement = wrapper.querySelector(`.${CLASS_NAMES.TOOLTIP_ICON}`);
74
- // body에 레이어/패널 생성(패널 패턴)
75
- this.createLayerAndPanel();
76
- return wrapper;
77
- }
78
- // 앵커(아이콘 래퍼) 클래스
79
- buildAnchorClassName() {
80
- const classes = [CLASS_NAMES.TOOLTIP, `${CLASS_NAMES.TOOLTIP}--${this.options.size}`, `${CLASS_NAMES.TOOLTIP}--${this.options.type}`];
81
- if (this.options.hideArrow) classes.push(CLASS_NAMES.TOOLTIP_HIDDEN_ARROW);
82
- if (this.options.iconType === 'stroke') classes.push(CLASS_NAMES.TOOLTIP_STROKE);
83
- if (this.options.position === 'auto') classes.push(CLASS_NAMES.TOOLTIP_AUTO);
84
- if (this.options.className) classes.push(this.options.className);
85
- return classes.join(' ');
86
- }
87
- // 패널 클래스 (방향/테마 가짐)
88
- buildPanelClassName() {
89
- const finalPosition = this.options.position === 'auto' ? this.calculatedPosition : this.options.position;
90
- const classes = [CLASS_NAMES.TOOLTIP_PANEL, CLASS_NAMES.TOOLTIP_BG, `${CLASS_NAMES.TOOLTIP_BG}--${this.options.tooltipType}`, `${CLASS_NAMES.TOOLTIP_BG}--${finalPosition}` // top/bottom/left/right
91
- ];
92
- if (this.isVisible) classes.push(CLASS_NAMES.TOOLTIP_BG_VISIBLE);
93
- if (this.isMeasuring) classes.push(CLASS_NAMES.TOOLTIP_BG_MEASURING);
94
- if (this.isForceHidden) classes.push(CLASS_NAMES.TOOLTIP_BG_FORCE_HIDDEN);
95
- return classes.join(' ');
96
- }
97
- renderContentHTML() {
98
- if (!this.options.content) return '';
99
- if (this.options.useShadowDOM) {
100
- return HTML_TEMPLATES.TOOLTIP_CONTENT_SHADOW(CLASS_NAMES.TOOLTIP_CONTENT);
101
- }
102
- return HTML_TEMPLATES.TOOLTIP_CONTENT(CLASS_NAMES.TOOLTIP_CONTENT, this.options.content);
103
- }
104
- renderCloseButtonHTML() {
105
- if (this.options.type !== 'long') return '';
106
- const theme = this.options.tooltipType === 'white' ? 'dark' : 'light';
107
- const isMobile = window.matchMedia(MEDIA_QUERY.mobile).matches;
108
- const size = isMobile ? 'sm' : 'xs';
109
- return ButtonCloseX(size, theme, CLASS_NAMES.TOOLTIP_CLOSE_BUTTON, '툴팁 닫기');
110
- }
111
- /** 전역 레이어에 패널 생성 */
112
- createLayerAndPanel() {
113
- // 기존 패널 제거
114
- if (this.panelId) {
115
- this.layerManager.removePanel(this.panelId);
116
- }
117
- // 새 패널 생성 (zIndex 전달)
118
- const zIndex = this.options.zIndex ?? Z_INDEX.TOOLTIP_LAYER;
119
- const {
120
- id,
121
- panel
122
- } = this.layerManager.createPanel(zIndex);
123
- this.panelId = id;
124
- this.panel = panel;
125
- // 패널 설정
126
- this.panel.className = this.buildPanelClassName();
127
- // 패널 내용 구성
128
- const titleHTML = this.options.title ? HTML_TEMPLATES.TOOLTIP_TITLE(CLASS_NAMES.TOOLTIP_TITLE, this.options.title) : '';
129
- const contentHTML = this.renderContentHTML();
130
- const closeButtonHTML = this.renderCloseButtonHTML();
131
- this.panel.innerHTML = `${titleHTML}${contentHTML}${closeButtonHTML}`;
132
- if (this.options.useShadowDOM && this.options.content) {
133
- this.setupShadowContent();
134
- }
135
- // 패널 클릭(닫기 버튼) 위임
136
- this.panel.addEventListener('click', this.boundPanelClick);
137
- }
138
- setupShadowContent() {
139
- if (!this.panel || !this.options.content) return;
140
- const container = this.panel.querySelector('[data-shadow-content]');
141
- if (!container) return;
142
- const shadowRoot = container.attachShadow({
143
- mode: 'open'
144
- });
145
- const style = document.createElement('style');
146
- style.textContent = CSS_TEMPLATES.SHADOW_DOM_HOST;
147
- shadowRoot.appendChild(style);
148
- const temp = document.createElement('div');
149
- temp.innerHTML = this.options.content;
150
- while (temp.firstChild) shadowRoot.appendChild(temp.firstChild);
151
- }
152
- /* ========== 이벤트 바인딩/해제 ========== */
153
- bindEvents() {
154
- this.enableMouseEvents();
155
- window.addEventListener('resize', this.boundResizeScroll, EVENT_OPTIONS.PASSIVE);
156
- window.addEventListener('scroll', this.boundResizeScroll, EVENT_OPTIONS.PASSIVE);
157
- }
158
- // tooltip icon위에 마우스 올리면 툴팁 보이기
159
- enableMouseEvents() {
160
- this.iconElement?.addEventListener('mouseenter', this.boundMouseEnter);
161
- this.iconElement?.addEventListener('mouseleave', this.boundMouseLeave);
162
- }
163
- disableMouseEvents() {
164
- this.iconElement?.removeEventListener('mouseenter', this.boundMouseEnter);
165
- this.iconElement?.removeEventListener('mouseleave', this.boundMouseLeave);
166
- }
167
- /* ========== 표시/숨김/위치 ========== */
168
- showTooltip() {
169
- if (!this.panel) return;
170
- this.isVisible = true;
171
- this.isForceHidden = false; // 강제 숨김 상태 리셋
172
- this.updateTooltipPosition();
173
- // 보이기
174
- this.panel.style.opacity = OPACITY.VISIBLE;
175
- this.updatePanelClass();
176
- }
177
- hideTooltip() {
178
- if (!this.panel) return;
179
- this.isVisible = false;
180
- this.isForceHidden = false; // 강제 숨김 상태 리셋 (다시 표시 가능하도록)
181
- this.panel.style.opacity = OPACITY.HIDDEN;
182
- this.updatePanelClass();
183
- // long 타입에서 hideTooltip()을 호출한 경우 마우스 이벤트 다시 활성화
184
- if (this.options.type === 'long') {
185
- this.enableMouseEvents();
186
- }
187
- // 전환 종료 후 완전히 오프스크린 이동 → 히트 테스트 0
188
- const el = this.panel;
189
- const onEnd = () => {
190
- el.style.left = OFFSCREEN_POSITION;
191
- el.style.top = OFFSCREEN_POSITION;
192
- el.removeEventListener('transitionend', onEnd);
193
- };
194
- el.addEventListener('transitionend', onEnd, {
195
- once: true
196
- });
197
- }
198
- updateTooltipPosition() {
199
- if (!this.panel) return;
200
- this.isMeasuring = true;
201
- this.updatePanelClass();
202
- // 먼저 눈에 보이도록 화면 안쪽으로 잠깐 이동해 사이즈 측정
203
- // (opacity는 showTooltip에서만 1로)
204
- if (this.panel.style.left === OFFSCREEN_POSITION) {
205
- this.panel.style.left = POSITION.INITIAL;
206
- this.panel.style.top = POSITION.INITIAL;
207
- }
208
- const tipRect = this.panel.getBoundingClientRect();
209
- const anchor = this.iconElement ?? this.element;
210
- const rect = anchor.getBoundingClientRect();
211
- let left = 0;
212
- let top = 0;
213
- let prefer = this.options.position;
214
- if (prefer === 'auto') {
215
- const enoughTop = rect.top - TOOLTIP_OFFSET - tipRect.height >= VIEWPORT_MARGIN;
216
- prefer = enoughTop ? 'top' : 'bottom';
217
- }
218
- if (prefer === 'bottom') {
219
- top = rect.bottom + TOOLTIP_OFFSET;
220
- left = rect.left + rect.width / 2 - tipRect.width / 2;
221
- this.calculatedPosition = 'bottom';
222
- } else if (prefer === 'top') {
223
- top = rect.top - tipRect.height - TOOLTIP_OFFSET;
224
- left = rect.left + rect.width / 2 - tipRect.width / 2;
225
- this.calculatedPosition = 'top';
226
- } else if (prefer === 'left') {
227
- top = rect.top + rect.height / 2 - tipRect.height / 2;
228
- left = rect.left - tipRect.width - TOOLTIP_OFFSET;
229
- this.calculatedPosition = 'left';
230
- } else if (prefer === 'right') {
231
- top = rect.top + rect.height / 2 - tipRect.height / 2;
232
- left = rect.right + TOOLTIP_OFFSET;
233
- this.calculatedPosition = 'right';
234
- } else {
235
- // fallback: top
236
- top = rect.top - tipRect.height - TOOLTIP_OFFSET;
237
- left = rect.left + rect.width / 2 - tipRect.width / 2;
238
- this.calculatedPosition = 'top';
239
- }
240
- // 화면 경계 보정
241
- left = Math.max(VIEWPORT_MARGIN, Math.min(left, window.innerWidth - tipRect.width - VIEWPORT_MARGIN));
242
- top = Math.max(VIEWPORT_MARGIN, Math.min(top, window.innerHeight - tipRect.height - VIEWPORT_MARGIN));
243
- this.panel.style.left = `${Math.round(left)}px`;
244
- this.panel.style.top = `${Math.round(top)}px`;
245
- this.isMeasuring = false;
246
- this.updatePanelClass();
247
- }
248
- updatePanelClass() {
249
- if (!this.panel) return;
250
- const newClassName = this.buildPanelClassName();
251
- if (this.panel.className !== newClassName) {
252
- this.panel.className = newClassName;
253
- }
254
- }
255
- /* ========== Public API ========== */
256
- getElement() {
257
- return this.element;
258
- }
259
- /* 기존 옵션 업데이트 ( i18n 적용, 속성 변경 등 옵션 변경 시 사용 ) */
260
- updateOptions(newOptions) {
261
- // 기존 리스너/DOM 정리
262
- this.disableMouseEvents();
263
- window.removeEventListener('resize', this.boundResizeScroll);
264
- window.removeEventListener('scroll', this.boundResizeScroll);
265
- this.panel?.removeEventListener('click', this.boundPanelClick);
266
- if (this.panelId) {
267
- this.layerManager.removePanel(this.panelId);
268
- }
269
- // 옵션 병합
270
- this.options = {
271
- ...this.options,
272
- ...newOptions
273
- };
274
- // 앵커 재구성
275
- const parent = this.element.parentNode;
276
- const newEl = this.createElement();
277
- if (parent) parent.replaceChild(newEl, this.element);
278
- this.element = newEl;
279
- // 리스너 재바인딩
280
- this.bindEvents();
281
- }
282
- /* 정리 메서드 용도 */
283
- destroy() {
284
- this.disableMouseEvents();
285
- window.removeEventListener('resize', this.boundResizeScroll);
286
- window.removeEventListener('scroll', this.boundResizeScroll);
287
- this.panel?.removeEventListener('click', this.boundPanelClick);
288
- if (this.panelId) {
289
- this.layerManager.removePanel(this.panelId);
290
- }
291
- if (this.element.parentNode) this.element.parentNode.removeChild(this.element);
292
- }
293
- /* ========== 팩토리 메서드 ========== */
294
- static create() {
295
- let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
296
- return new Tooltip(options);
297
- }
298
- static createShort(title, content) {
299
- let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
300
- return new Tooltip({
301
- type: 'short',
302
- title,
303
- content,
304
- ...options
305
- });
306
- }
307
- static createLong(title, content) {
308
- let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
309
- return new Tooltip({
310
- type: 'long',
311
- title,
312
- content,
313
- ...options
314
- });
315
- }
316
- static createAuto(title, content) {
317
- let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
318
- return new Tooltip({
319
- position: 'auto',
320
- title,
321
- content,
322
- ...options
323
- });
324
- }
325
- static createAutoLong(title, content) {
326
- let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
327
- return new Tooltip({
328
- type: 'long',
329
- position: 'auto',
330
- title,
331
- content,
332
- ...options
333
- });
334
- }
335
- static createAutoLongWithShadowDOM(title, content) {
336
- let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
337
- return new Tooltip({
338
- type: 'long',
339
- position: 'auto',
340
- title,
341
- content,
342
- useShadowDOM: true,
343
- ...options
344
- });
345
- }
346
- }
@@ -1,75 +0,0 @@
1
- import { CLASS_NAMES, Z_INDEX } from './const';
2
- /**
3
- * 툴팁 레이어 관리자
4
- * 전역 레이어 하나를 사용하여 모든 툴팁 패널을 관리합니다.
5
- */
6
- export class TooltipLayerManager {
7
- constructor() {
8
- this.layer = null;
9
- this.panels = new Map();
10
- this.nextId = 0;
11
- this.maxZIndex = Z_INDEX.TOOLTIP_LAYER; // 기본 z-index (가장 높은 값 추적)
12
- this.createGlobalLayer();
13
- }
14
- static getInstance() {
15
- if (!this.instance) {
16
- this.instance = new TooltipLayerManager();
17
- }
18
- return this.instance;
19
- }
20
- createGlobalLayer() {
21
- // 기존 레이어가 있으면 제거
22
- const existingLayer = document.getElementById('tooltip-global-layer');
23
- if (existingLayer) {
24
- existingLayer.remove();
25
- }
26
- this.layer = document.createElement('div');
27
- this.layer.id = 'tooltip-global-layer';
28
- this.layer.className = CLASS_NAMES.TOOLTIP_GLOBAL_LAYER;
29
- this.layer.style.zIndex = String(this.maxZIndex);
30
- document.body.appendChild(this.layer);
31
- }
32
- createPanel() {
33
- let zIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Z_INDEX.TOOLTIP_LAYER;
34
- if (!this.layer) {
35
- this.createGlobalLayer();
36
- }
37
- // 최대 z-index 추적 및 전역 레이어 업데이트
38
- // 왜 이런 구현이 필요한지..? 툴팁 레이어 매니저는 바디에 무분별하게 붙는걸 방지하기 위해 하나의 전역 레이아웃입니다. 툴팁 20개씩 붙는 페이지를 위함
39
- // 전역 레이어의 z-index는 자식과 일치되면 가장 좋지만, 수시로 변하는 z-index를 추적하는 것이 디버깅측면에서 좋지않고 버그를 유발할 가능성이 높아보여
40
- // 툴팁은 보통은 고정된값을 사용하기에, 변동이 없다고 가정하고, 변동되는 경우에만 가장 높은 z-index를 추적하고 업데이트하는 구현을 하였습니다.
41
- if (zIndex > this.maxZIndex) {
42
- this.maxZIndex = zIndex;
43
- if (this.layer) {
44
- this.layer.style.zIndex = String(this.maxZIndex);
45
- }
46
- }
47
- const id = `tooltip-panel-${++this.nextId}`;
48
- const panel = document.createElement('span');
49
- panel.id = id;
50
- panel.className = CLASS_NAMES.TOOLTIP_PANEL;
51
- this.panels.set(id, panel);
52
- this.layer.appendChild(panel);
53
- return {
54
- id,
55
- panel
56
- };
57
- }
58
- removePanel(id) {
59
- const panel = this.panels.get(id);
60
- if (panel && panel.parentNode) {
61
- panel.parentNode.removeChild(panel);
62
- this.panels.delete(id);
63
- }
64
- }
65
- getPanel(id) {
66
- return this.panels.get(id) || null;
67
- }
68
- destroy() {
69
- this.panels.clear();
70
- if (this.layer && this.layer.parentNode) {
71
- this.layer.parentNode.removeChild(this.layer);
72
- }
73
- this.layer = null;
74
- }
75
- }
@@ -1,23 +0,0 @@
1
- // Tooltip CSS 클래스명 상수들
2
- export const CLASS_NAMES = {
3
- // 기본 클래스
4
- TOOLTIP: 'ncua-tooltip',
5
- TOOLTIP_ICON: 'ncua-tooltip__icon',
6
- TOOLTIP_BG: 'ncua-tooltip__bg',
7
- TOOLTIP_TITLE: 'ncua-tooltip__title',
8
- TOOLTIP_CONTENT: 'ncua-tooltip__content',
9
- TOOLTIP_CLOSE_BUTTON: 'ncua-tooltip__close-button',
10
- // 수정자 클래스 (modifier classes)
11
- TOOLTIP_HIDDEN_ARROW: 'ncua-tooltip--hidden-arrow',
12
- TOOLTIP_STROKE: 'ncua-tooltip--stroke',
13
- TOOLTIP_AUTO: 'ncua-tooltip--auto',
14
- // 배경 상태 클래스
15
- TOOLTIP_BG_VISIBLE: 'ncua-tooltip__bg--visible',
16
- TOOLTIP_BG_MEASURING: 'ncua-tooltip__bg--measuring',
17
- TOOLTIP_BG_FORCE_HIDDEN: 'ncua-tooltip__bg--force-hidden',
18
- // 레이어 관련 클래스
19
- TOOLTIP_GLOBAL_LAYER: 'ncua-tooltip-global-layer',
20
- TOOLTIP_PANEL: 'ncua-tooltip-panel',
21
- // 버튼 클래스
22
- BUTTON_CLOSE_X: 'ncua-button-close-x'
23
- };
@@ -1,50 +0,0 @@
1
- export const MARGIN = 10;
2
- export const DEFAULT_TOOLTIP_WIDTH = 200;
3
- export const DEFAULT_TOOLTIP_HEIGHT = 60;
4
- export const POSITION_PRIORITY = ['bottom', 'top', 'right', 'left'];
5
- // 툴팁 위치 계산 관련 상수
6
- export const TOOLTIP_OFFSET = 8; // 툴팁과 앵커 사이의 거리
7
- export const VIEWPORT_MARGIN = 8; // 뷰포트 경계와의 최소 거리
8
- // 아이콘 크기 상수
9
- export const ICON_SIZES = {
10
- sm: 14,
11
- md: 16
12
- };
13
- // 애니메이션 관련 상수
14
- export const TRANSITION_DURATION = '0.18s';
15
- export const OFFSCREEN_POSITION = '-99999px';
16
- // 툴팁 상태 관련 상수
17
- export const OPACITY = {
18
- HIDDEN: '0',
19
- VISIBLE: '1'
20
- };
21
- export const POSITION = {
22
- INITIAL: '0px',
23
- OFFSCREEN: OFFSCREEN_POSITION
24
- };
25
- // z-index 관련 상수
26
- export const Z_INDEX = {
27
- TOOLTIP_LAYER: 2000 // 툴팁 전역 레이어 기본 z-index
28
- };
29
- // 이벤트 관련 상수
30
- export const EVENT_OPTIONS = {
31
- PASSIVE: {
32
- passive: true
33
- },
34
- ONCE: {
35
- once: true
36
- }
37
- };
38
- export const TOOLTIP_DEFAULT_VALUE = {
39
- tooltipType: 'white',
40
- iconType: 'stroke',
41
- position: 'auto',
42
- size: 'sm',
43
- hideArrow: false,
44
- title: '',
45
- content: '',
46
- type: 'short',
47
- zIndex: Z_INDEX.TOOLTIP_LAYER,
48
- useShadowDOM: false,
49
- className: '' // 커스텀 클래스명
50
- };
@@ -1,9 +0,0 @@
1
- // SVG 아이콘들
2
- export const SVG_ICONS = {
3
- 'help-circle-stroke': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none">
4
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3m.08 4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path>
5
- </svg>`,
6
- 'help-circle-fill': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none">
7
- <path fill="currentColor" fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1m-1.093 7.271a2 2 0 0 1 3.013 1.727V10c0 .47-.365.958-1.055 1.418a6 6 0 0 1-1.262.634 1 1 0 0 0 .633 1.897l.169-.061a8.05 8.05 0 0 0 1.57-.806c.81-.54 1.944-1.55 1.945-3.081a4 4 0 0 0-7.773-1.333 1 1 0 0 0 1.886.664 2 2 0 0 1 .874-1.06M12 16a1 1 0 1 0 0 2h.01a1 1 0 0 0 0-2z" clip-rule="evenodd"></path>
8
- </svg>`
9
- };
@@ -1,4 +0,0 @@
1
- export { SVG_ICONS } from './icons';
2
- export { CLASS_NAMES } from './classNames';
3
- export { MARGIN, DEFAULT_TOOLTIP_WIDTH, DEFAULT_TOOLTIP_HEIGHT, POSITION_PRIORITY, TOOLTIP_DEFAULT_VALUE, TOOLTIP_OFFSET, VIEWPORT_MARGIN, ICON_SIZES, TRANSITION_DURATION, OFFSCREEN_POSITION, OPACITY, POSITION, Z_INDEX, EVENT_OPTIONS } from './constants';
4
- export { CSS_TEMPLATES, HTML_TEMPLATES, FALLBACK_ICON_SVG } from './templates';
@@ -1,59 +0,0 @@
1
- import { OFFSCREEN_POSITION, TRANSITION_DURATION } from './constants';
2
- /**
3
- * 툴팁 관련 CSS 및 HTML 템플릿
4
- */
5
- // CSS 템플릿
6
- export const CSS_TEMPLATES = {
7
- // 레이어 컨테이너 스타일 (클릭 통과)
8
- LAYER_CONTAINER: zIndex => `
9
- position: fixed;
10
- inset: 0;
11
- pointer-events: none;
12
- z-index: ${zIndex};
13
- display: block;
14
- `,
15
- // 툴팁 패널 스타일 (클릭 허용)
16
- TOOLTIP_PANEL: zIndex => `
17
- position: fixed;
18
- left: ${OFFSCREEN_POSITION};
19
- top: ${OFFSCREEN_POSITION};
20
- opacity: 0;
21
- transition: opacity ${TRANSITION_DURATION} ease;
22
- pointer-events: auto;
23
- z-index: ${zIndex};
24
- right: auto;
25
- bottom: auto;
26
- transform: none;
27
- `,
28
- // 앵커 래퍼 스타일
29
- ANCHOR_WRAPPER: `
30
- display: inline-flex;
31
- vertical-align: middle;
32
- margin: 0 4px;
33
- `,
34
- // Shadow DOM 기본 스타일
35
- SHADOW_DOM_HOST: `
36
- :host {
37
- all: unset;
38
- display: block;
39
- font-family: system-ui;
40
- color: black;
41
- }
42
- `
43
- };
44
- // HTML 템플릿
45
- export const HTML_TEMPLATES = {
46
- // 아이콘 래퍼
47
- ICON_WRAPPER: (className, iconSvg) => `<span class="${className}">${iconSvg}</span>`,
48
- // 툴팁 제목
49
- TOOLTIP_TITLE: (className, title) => `<span class="${className}">${title}</span>`,
50
- // 툴팁 콘텐츠 (일반)
51
- TOOLTIP_CONTENT: (className, content) => `<span class="${className}">${content}</span>`,
52
- // 툴팁 콘텐츠 (Shadow DOM)
53
- TOOLTIP_CONTENT_SHADOW: className => `<span class="${className}" data-shadow-content></span>`
54
- };
55
- // 폴백 아이콘 SVG
56
- export const FALLBACK_ICON_SVG = size => `<svg width="${size}" height="${size}" viewBox="0 0 16 16" aria-hidden="true">
57
- <circle cx="8" cy="8" r="7" stroke="currentColor" fill="none"/>
58
- <text x="8" y="11" font-size="8" text-anchor="middle" fill="currentColor">?</text>
59
- </svg>`;
@@ -1 +0,0 @@
1
- export {};
@@ -1,10 +0,0 @@
1
- import { Tooltip } from './Tooltip';
2
- export { Tooltip } from './Tooltip';
3
- export { calculateOptimalPosition } from './utils';
4
- export { SVG_ICONS, MARGIN, DEFAULT_TOOLTIP_WIDTH, DEFAULT_TOOLTIP_HEIGHT, POSITION_PRIORITY } from './const';
5
- // 전역 등록 ( 추후 index.ts와 개별동작 할 수 있게끔 대비 )
6
- if (typeof window !== 'undefined') {
7
- window.ncua = window.ncua || {};
8
- window.ncua.Tooltip = Tooltip;
9
- }
10
- export default Tooltip;
@@ -1,34 +0,0 @@
1
- import { MARGIN, DEFAULT_TOOLTIP_WIDTH, DEFAULT_TOOLTIP_HEIGHT, POSITION_PRIORITY } from './const';
2
- export function calculateOptimalPosition(triggerElement, tooltipElement) {
3
- let preferredPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'bottom';
4
- const triggerRect = triggerElement.getBoundingClientRect();
5
- const tooltipRect = tooltipElement.getBoundingClientRect();
6
- const {
7
- innerWidth: viewportWidth,
8
- innerHeight: viewportHeight
9
- } = window;
10
- const spaces = {
11
- top: triggerRect.top,
12
- bottom: viewportHeight - triggerRect.bottom,
13
- left: triggerRect.left,
14
- right: viewportWidth - triggerRect.right
15
- };
16
- const tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
17
- const tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
18
- for (const position of POSITION_PRIORITY) {
19
- const hasSpace = position === 'bottom' || position === 'top' ? spaces[position] >= tooltipHeight + MARGIN : spaces[position] >= tooltipWidth + MARGIN;
20
- if (hasSpace) {
21
- if (position === 'bottom' || position === 'top') {
22
- const centerX = triggerRect.left + triggerRect.width / 2;
23
- const tooltipHalfWidth = tooltipWidth / 2;
24
- if (centerX - tooltipHalfWidth < MARGIN) {
25
- return `${position}-left`;
26
- } else if (centerX + tooltipHalfWidth > viewportWidth - MARGIN) {
27
- return `${position}-right`;
28
- }
29
- }
30
- return position;
31
- }
32
- }
33
- return preferredPosition;
34
- }
@@ -1,26 +0,0 @@
1
- /**
2
- * 디바운스 유틸리티
3
- * 마지막 호출 후 지정된 시간이 지나야 콜백이 실행됨
4
- */
5
- export function debounce(fn, ms) {
6
- let timer;
7
- const debounced = function () {
8
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
9
- args[_key] = arguments[_key];
10
- }
11
- if (timer !== undefined) {
12
- clearTimeout(timer);
13
- }
14
- timer = window.setTimeout(() => {
15
- timer = undefined;
16
- fn(...args);
17
- }, ms);
18
- };
19
- debounced.cancel = () => {
20
- if (timer !== undefined) {
21
- clearTimeout(timer);
22
- timer = undefined;
23
- }
24
- };
25
- return debounced;
26
- }