@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,335 +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(options = {}) {
15
- this.iconElement = null;
16
- // 전역 레이어 매니저 사용
17
- this.layerManager = TooltipLayerManager.getInstance();
18
- this.panelId = null;
19
- this.panel = null;
20
- this.calculatedPosition = 'top';
21
- this.isVisible = false;
22
- this.isMeasuring = false;
23
- this.isForceHidden = false;
24
- // 이벤트 핸들러
25
- this.boundMouseEnter = () => this.handleMouseEnter();
26
- this.boundMouseLeave = () => this.handleMouseLeave();
27
- this.boundResizeScroll = () => this.handleResizeScroll();
28
- this.boundPanelClick = (e) => this.handlePanelClick(e);
29
- /* ========== 핸들러 ========== */
30
- this.handleMouseEnter = () => {
31
- this.showTooltip();
32
- if (this.options.type === 'long') {
33
- // long은 X로 닫을 때까지 유지 → 재호버 방지
34
- this.disableMouseEvents();
35
- }
36
- };
37
- this.handleMouseLeave = () => {
38
- if (this.options.type === 'short') {
39
- this.hideTooltip();
40
- }
41
- };
42
- this.handleResizeScroll = () => {
43
- if (this.isVisible)
44
- 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')
55
- this.enableMouseEvents();
56
- }
57
- };
58
- this.options = {
59
- ...TOOLTIP_DEFAULT_VALUE,
60
- ...options,
61
- };
62
- this.element = this.createElement();
63
- this.bindEvents();
64
- }
65
- /* ========== DOM 생성 ========== */
66
- createElement() {
67
- const iconSize = ICON_SIZES[this.options.size ?? 'sm'];
68
- const key = this.options.iconType === 'stroke' ? 'help-circle-stroke' : 'help-circle-fill';
69
- const iconSvg = SVG_ICONS[key]?.(iconSize) ?? FALLBACK_ICON_SVG(iconSize);
70
- const wrapper = document.createElement('span');
71
- wrapper.className = this.buildAnchorClassName();
72
- wrapper.style.cssText = CSS_TEMPLATES.ANCHOR_WRAPPER;
73
- wrapper.innerHTML = HTML_TEMPLATES.ICON_WRAPPER(CLASS_NAMES.TOOLTIP_ICON, iconSvg);
74
- this.iconElement = wrapper.querySelector(`.${CLASS_NAMES.TOOLTIP_ICON}`);
75
- // body에 레이어/패널 생성(패널 패턴)
76
- this.createLayerAndPanel();
77
- return wrapper;
78
- }
79
- // 앵커(아이콘 래퍼) 클래스
80
- buildAnchorClassName() {
81
- const classes = [
82
- CLASS_NAMES.TOOLTIP,
83
- `${CLASS_NAMES.TOOLTIP}--${this.options.size}`,
84
- `${CLASS_NAMES.TOOLTIP}--${this.options.type}`,
85
- ];
86
- if (this.options.hideArrow)
87
- classes.push(CLASS_NAMES.TOOLTIP_HIDDEN_ARROW);
88
- if (this.options.iconType === 'stroke')
89
- classes.push(CLASS_NAMES.TOOLTIP_STROKE);
90
- if (this.options.position === 'auto')
91
- classes.push(CLASS_NAMES.TOOLTIP_AUTO);
92
- if (this.options.className)
93
- classes.push(this.options.className);
94
- return classes.join(' ');
95
- }
96
- // 패널 클래스 (방향/테마 가짐)
97
- buildPanelClassName() {
98
- const finalPosition = this.options.position === 'auto' ? this.calculatedPosition : this.options.position;
99
- const classes = [
100
- CLASS_NAMES.TOOLTIP_PANEL,
101
- CLASS_NAMES.TOOLTIP_BG,
102
- `${CLASS_NAMES.TOOLTIP_BG}--${this.options.tooltipType}`,
103
- `${CLASS_NAMES.TOOLTIP_BG}--${finalPosition}`, // top/bottom/left/right
104
- ];
105
- if (this.isVisible)
106
- classes.push(CLASS_NAMES.TOOLTIP_BG_VISIBLE);
107
- if (this.isMeasuring)
108
- classes.push(CLASS_NAMES.TOOLTIP_BG_MEASURING);
109
- if (this.isForceHidden)
110
- classes.push(CLASS_NAMES.TOOLTIP_BG_FORCE_HIDDEN);
111
- return classes.join(' ');
112
- }
113
- renderContentHTML() {
114
- if (!this.options.content)
115
- return '';
116
- if (this.options.useShadowDOM) {
117
- return HTML_TEMPLATES.TOOLTIP_CONTENT_SHADOW(CLASS_NAMES.TOOLTIP_CONTENT);
118
- }
119
- return HTML_TEMPLATES.TOOLTIP_CONTENT(CLASS_NAMES.TOOLTIP_CONTENT, this.options.content);
120
- }
121
- renderCloseButtonHTML() {
122
- if (this.options.type !== 'long')
123
- return '';
124
- const theme = this.options.tooltipType === 'white' ? 'dark' : 'light';
125
- const isMobile = window.matchMedia(MEDIA_QUERY.mobile).matches;
126
- const size = isMobile ? 'sm' : 'xs';
127
- return ButtonCloseX(size, theme, CLASS_NAMES.TOOLTIP_CLOSE_BUTTON, '툴팁 닫기');
128
- }
129
- /** 전역 레이어에 패널 생성 */
130
- createLayerAndPanel() {
131
- // 기존 패널 제거
132
- if (this.panelId) {
133
- this.layerManager.removePanel(this.panelId);
134
- }
135
- // 새 패널 생성 (zIndex 전달)
136
- const zIndex = this.options.zIndex ?? Z_INDEX.TOOLTIP_LAYER;
137
- const { id, panel } = this.layerManager.createPanel(zIndex);
138
- this.panelId = id;
139
- this.panel = panel;
140
- // 패널 설정
141
- this.panel.className = this.buildPanelClassName();
142
- // 패널 내용 구성
143
- const titleHTML = this.options.title
144
- ? HTML_TEMPLATES.TOOLTIP_TITLE(CLASS_NAMES.TOOLTIP_TITLE, this.options.title)
145
- : '';
146
- const contentHTML = this.renderContentHTML();
147
- const closeButtonHTML = this.renderCloseButtonHTML();
148
- this.panel.innerHTML = `${titleHTML}${contentHTML}${closeButtonHTML}`;
149
- if (this.options.useShadowDOM && this.options.content) {
150
- this.setupShadowContent();
151
- }
152
- // 패널 클릭(닫기 버튼) 위임
153
- this.panel.addEventListener('click', this.boundPanelClick);
154
- }
155
- setupShadowContent() {
156
- if (!this.panel || !this.options.content)
157
- return;
158
- const container = this.panel.querySelector('[data-shadow-content]');
159
- if (!container)
160
- return;
161
- const shadowRoot = container.attachShadow({ mode: 'open' });
162
- const style = document.createElement('style');
163
- style.textContent = CSS_TEMPLATES.SHADOW_DOM_HOST;
164
- shadowRoot.appendChild(style);
165
- const temp = document.createElement('div');
166
- temp.innerHTML = this.options.content;
167
- while (temp.firstChild)
168
- shadowRoot.appendChild(temp.firstChild);
169
- }
170
- /* ========== 이벤트 바인딩/해제 ========== */
171
- bindEvents() {
172
- this.enableMouseEvents();
173
- window.addEventListener('resize', this.boundResizeScroll, EVENT_OPTIONS.PASSIVE);
174
- window.addEventListener('scroll', this.boundResizeScroll, EVENT_OPTIONS.PASSIVE);
175
- }
176
- // tooltip icon위에 마우스 올리면 툴팁 보이기
177
- enableMouseEvents() {
178
- this.iconElement?.addEventListener('mouseenter', this.boundMouseEnter);
179
- this.iconElement?.addEventListener('mouseleave', this.boundMouseLeave);
180
- }
181
- disableMouseEvents() {
182
- this.iconElement?.removeEventListener('mouseenter', this.boundMouseEnter);
183
- this.iconElement?.removeEventListener('mouseleave', this.boundMouseLeave);
184
- }
185
- /* ========== 표시/숨김/위치 ========== */
186
- showTooltip() {
187
- if (!this.panel)
188
- return;
189
- this.isVisible = true;
190
- this.isForceHidden = false; // 강제 숨김 상태 리셋
191
- this.updateTooltipPosition();
192
- // 보이기
193
- this.panel.style.opacity = OPACITY.VISIBLE;
194
- this.updatePanelClass();
195
- }
196
- hideTooltip() {
197
- if (!this.panel)
198
- return;
199
- this.isVisible = false;
200
- this.isForceHidden = false; // 강제 숨김 상태 리셋 (다시 표시 가능하도록)
201
- this.panel.style.opacity = OPACITY.HIDDEN;
202
- this.updatePanelClass();
203
- // long 타입에서 hideTooltip()을 호출한 경우 마우스 이벤트 다시 활성화
204
- if (this.options.type === 'long') {
205
- this.enableMouseEvents();
206
- }
207
- // 전환 종료 후 완전히 오프스크린 이동 → 히트 테스트 0
208
- const el = this.panel;
209
- const onEnd = () => {
210
- el.style.left = OFFSCREEN_POSITION;
211
- el.style.top = OFFSCREEN_POSITION;
212
- el.removeEventListener('transitionend', onEnd);
213
- };
214
- el.addEventListener('transitionend', onEnd, { once: true });
215
- }
216
- updateTooltipPosition() {
217
- if (!this.panel)
218
- return;
219
- this.isMeasuring = true;
220
- this.updatePanelClass();
221
- // 먼저 눈에 보이도록 화면 안쪽으로 잠깐 이동해 사이즈 측정
222
- // (opacity는 showTooltip에서만 1로)
223
- if (this.panel.style.left === OFFSCREEN_POSITION) {
224
- this.panel.style.left = POSITION.INITIAL;
225
- this.panel.style.top = POSITION.INITIAL;
226
- }
227
- const tipRect = this.panel.getBoundingClientRect();
228
- const anchor = this.iconElement ?? this.element;
229
- const rect = anchor.getBoundingClientRect();
230
- let left = 0;
231
- let top = 0;
232
- let prefer = this.options.position;
233
- if (prefer === 'auto') {
234
- const enoughTop = rect.top - TOOLTIP_OFFSET - tipRect.height >= VIEWPORT_MARGIN;
235
- prefer = enoughTop ? 'top' : 'bottom';
236
- }
237
- if (prefer === 'bottom') {
238
- top = rect.bottom + TOOLTIP_OFFSET;
239
- left = rect.left + rect.width / 2 - tipRect.width / 2;
240
- this.calculatedPosition = 'bottom';
241
- }
242
- else if (prefer === 'top') {
243
- top = rect.top - tipRect.height - TOOLTIP_OFFSET;
244
- left = rect.left + rect.width / 2 - tipRect.width / 2;
245
- this.calculatedPosition = 'top';
246
- }
247
- else if (prefer === 'left') {
248
- top = rect.top + rect.height / 2 - tipRect.height / 2;
249
- left = rect.left - tipRect.width - TOOLTIP_OFFSET;
250
- this.calculatedPosition = 'left';
251
- }
252
- else if (prefer === 'right') {
253
- top = rect.top + rect.height / 2 - tipRect.height / 2;
254
- left = rect.right + TOOLTIP_OFFSET;
255
- this.calculatedPosition = 'right';
256
- }
257
- else {
258
- // fallback: top
259
- top = rect.top - tipRect.height - TOOLTIP_OFFSET;
260
- left = rect.left + rect.width / 2 - tipRect.width / 2;
261
- this.calculatedPosition = 'top';
262
- }
263
- // 화면 경계 보정
264
- left = Math.max(VIEWPORT_MARGIN, Math.min(left, window.innerWidth - tipRect.width - VIEWPORT_MARGIN));
265
- top = Math.max(VIEWPORT_MARGIN, Math.min(top, window.innerHeight - tipRect.height - VIEWPORT_MARGIN));
266
- this.panel.style.left = `${Math.round(left)}px`;
267
- this.panel.style.top = `${Math.round(top)}px`;
268
- this.isMeasuring = false;
269
- this.updatePanelClass();
270
- }
271
- updatePanelClass() {
272
- if (!this.panel)
273
- return;
274
- const newClassName = this.buildPanelClassName();
275
- if (this.panel.className !== newClassName) {
276
- this.panel.className = newClassName;
277
- }
278
- }
279
- /* ========== Public API ========== */
280
- getElement() {
281
- return this.element;
282
- }
283
- /* 기존 옵션 업데이트 ( i18n 적용, 속성 변경 등 옵션 변경 시 사용 ) */
284
- updateOptions(newOptions) {
285
- // 기존 리스너/DOM 정리
286
- this.disableMouseEvents();
287
- window.removeEventListener('resize', this.boundResizeScroll);
288
- window.removeEventListener('scroll', this.boundResizeScroll);
289
- this.panel?.removeEventListener('click', this.boundPanelClick);
290
- if (this.panelId) {
291
- this.layerManager.removePanel(this.panelId);
292
- }
293
- // 옵션 병합
294
- this.options = { ...this.options, ...newOptions };
295
- // 앵커 재구성
296
- const parent = this.element.parentNode;
297
- const newEl = this.createElement();
298
- if (parent)
299
- parent.replaceChild(newEl, this.element);
300
- this.element = newEl;
301
- // 리스너 재바인딩
302
- this.bindEvents();
303
- }
304
- /* 정리 메서드 용도 */
305
- destroy() {
306
- this.disableMouseEvents();
307
- window.removeEventListener('resize', this.boundResizeScroll);
308
- window.removeEventListener('scroll', this.boundResizeScroll);
309
- this.panel?.removeEventListener('click', this.boundPanelClick);
310
- if (this.panelId) {
311
- this.layerManager.removePanel(this.panelId);
312
- }
313
- if (this.element.parentNode)
314
- this.element.parentNode.removeChild(this.element);
315
- }
316
- /* ========== 팩토리 메서드 ========== */
317
- static create(options = {}) {
318
- return new Tooltip(options);
319
- }
320
- static createShort(title, content, options = {}) {
321
- return new Tooltip({ type: 'short', title, content, ...options });
322
- }
323
- static createLong(title, content, options = {}) {
324
- return new Tooltip({ type: 'long', title, content, ...options });
325
- }
326
- static createAuto(title, content, options = {}) {
327
- return new Tooltip({ position: 'auto', title, content, ...options });
328
- }
329
- static createAutoLong(title, content, options = {}) {
330
- return new Tooltip({ type: 'long', position: 'auto', title, content, ...options });
331
- }
332
- static createAutoLongWithShadowDOM(title, content, options = {}) {
333
- return new Tooltip({ type: 'long', position: 'auto', title, content, useShadowDOM: true, ...options });
334
- }
335
- }
@@ -1,21 +0,0 @@
1
- /**
2
- * 툴팁 레이어 관리자
3
- * 전역 레이어 하나를 사용하여 모든 툴팁 패널을 관리합니다.
4
- */
5
- export declare class TooltipLayerManager {
6
- private static instance;
7
- private layer;
8
- private panels;
9
- private nextId;
10
- private maxZIndex;
11
- private constructor();
12
- static getInstance(): TooltipLayerManager;
13
- private createGlobalLayer;
14
- createPanel(zIndex?: number): {
15
- id: string;
16
- panel: HTMLElement;
17
- };
18
- removePanel(id: string): void;
19
- getPanel(id: string): HTMLElement | null;
20
- destroy(): void;
21
- }
@@ -1,71 +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(zIndex = Z_INDEX.TOOLTIP_LAYER) {
33
- if (!this.layer) {
34
- this.createGlobalLayer();
35
- }
36
- // 최대 z-index 추적 및 전역 레이어 업데이트
37
- // 왜 이런 구현이 필요한지..? 툴팁 레이어 매니저는 바디에 무분별하게 붙는걸 방지하기 위해 하나의 전역 레이아웃입니다. 툴팁 20개씩 붙는 페이지를 위함
38
- // 전역 레이어의 z-index는 자식과 일치되면 가장 좋지만, 수시로 변하는 z-index를 추적하는 것이 디버깅측면에서 좋지않고 버그를 유발할 가능성이 높아보여
39
- // 툴팁은 보통은 고정된값을 사용하기에, 변동이 없다고 가정하고, 변동되는 경우에만 가장 높은 z-index를 추적하고 업데이트하는 구현을 하였습니다.
40
- if (zIndex > this.maxZIndex) {
41
- this.maxZIndex = zIndex;
42
- if (this.layer) {
43
- this.layer.style.zIndex = String(this.maxZIndex);
44
- }
45
- }
46
- const id = `tooltip-panel-${++this.nextId}`;
47
- const panel = document.createElement('span');
48
- panel.id = id;
49
- panel.className = CLASS_NAMES.TOOLTIP_PANEL;
50
- this.panels.set(id, panel);
51
- this.layer.appendChild(panel);
52
- return { id, panel };
53
- }
54
- removePanel(id) {
55
- const panel = this.panels.get(id);
56
- if (panel && panel.parentNode) {
57
- panel.parentNode.removeChild(panel);
58
- this.panels.delete(id);
59
- }
60
- }
61
- getPanel(id) {
62
- return this.panels.get(id) || null;
63
- }
64
- destroy() {
65
- this.panels.clear();
66
- if (this.layer && this.layer.parentNode) {
67
- this.layer.parentNode.removeChild(this.layer);
68
- }
69
- this.layer = null;
70
- }
71
- }
@@ -1,17 +0,0 @@
1
- export declare const CLASS_NAMES: {
2
- TOOLTIP: string;
3
- TOOLTIP_ICON: string;
4
- TOOLTIP_BG: string;
5
- TOOLTIP_TITLE: string;
6
- TOOLTIP_CONTENT: string;
7
- TOOLTIP_CLOSE_BUTTON: string;
8
- TOOLTIP_HIDDEN_ARROW: string;
9
- TOOLTIP_STROKE: string;
10
- TOOLTIP_AUTO: string;
11
- TOOLTIP_BG_VISIBLE: string;
12
- TOOLTIP_BG_MEASURING: string;
13
- TOOLTIP_BG_FORCE_HIDDEN: string;
14
- TOOLTIP_GLOBAL_LAYER: string;
15
- TOOLTIP_PANEL: string;
16
- BUTTON_CLOSE_X: string;
17
- };
@@ -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,33 +0,0 @@
1
- import type { TooltipOptions } from './types';
2
- export declare const MARGIN = 10;
3
- export declare const DEFAULT_TOOLTIP_WIDTH = 200;
4
- export declare const DEFAULT_TOOLTIP_HEIGHT = 60;
5
- export declare const POSITION_PRIORITY: readonly ["bottom", "top", "right", "left"];
6
- export declare const TOOLTIP_OFFSET = 8;
7
- export declare const VIEWPORT_MARGIN = 8;
8
- export declare const ICON_SIZES: {
9
- readonly sm: 14;
10
- readonly md: 16;
11
- };
12
- export declare const TRANSITION_DURATION = "0.18s";
13
- export declare const OFFSCREEN_POSITION = "-99999px";
14
- export declare const OPACITY: {
15
- readonly HIDDEN: "0";
16
- readonly VISIBLE: "1";
17
- };
18
- export declare const POSITION: {
19
- readonly INITIAL: "0px";
20
- readonly OFFSCREEN: "-99999px";
21
- };
22
- export declare const Z_INDEX: {
23
- readonly TOOLTIP_LAYER: 2000;
24
- };
25
- export declare const EVENT_OPTIONS: {
26
- readonly PASSIVE: {
27
- readonly passive: true;
28
- };
29
- readonly ONCE: {
30
- readonly once: true;
31
- };
32
- };
33
- export declare const TOOLTIP_DEFAULT_VALUE: TooltipOptions;
@@ -1,46 +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: { passive: true },
32
- ONCE: { once: true },
33
- };
34
- export const TOOLTIP_DEFAULT_VALUE = {
35
- tooltipType: 'white',
36
- iconType: 'stroke',
37
- position: 'auto',
38
- size: 'sm',
39
- hideArrow: false,
40
- title: '',
41
- content: '',
42
- type: 'short',
43
- zIndex: Z_INDEX.TOOLTIP_LAYER,
44
- useShadowDOM: false,
45
- className: '', // 커스텀 클래스명
46
- };
@@ -1,4 +0,0 @@
1
- export declare const SVG_ICONS: {
2
- readonly 'help-circle-stroke': (size: number) => string;
3
- readonly 'help-circle-fill': (size: number) => string;
4
- };
@@ -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,5 +0,0 @@
1
- export type { TooltipOptions, CalculatedPosition } from './types';
2
- export { SVG_ICONS } from './icons';
3
- export { CLASS_NAMES } from './classNames';
4
- 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';
5
- export { CSS_TEMPLATES, HTML_TEMPLATES, FALLBACK_ICON_SVG } from './templates';
@@ -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,16 +0,0 @@
1
- /**
2
- * 툴팁 관련 CSS 및 HTML 템플릿
3
- */
4
- export declare const CSS_TEMPLATES: {
5
- readonly LAYER_CONTAINER: (zIndex: number) => string;
6
- readonly TOOLTIP_PANEL: (zIndex: number) => string;
7
- readonly ANCHOR_WRAPPER: "\n display: inline-flex;\n vertical-align: middle;\n margin: 0 4px;\n ";
8
- readonly SHADOW_DOM_HOST: "\n :host { \n all: unset; \n display: block; \n font-family: system-ui; \n color: black; \n }\n ";
9
- };
10
- export declare const HTML_TEMPLATES: {
11
- readonly ICON_WRAPPER: (className: string, iconSvg: string) => string;
12
- readonly TOOLTIP_TITLE: (className: string, title: string) => string;
13
- readonly TOOLTIP_CONTENT: (className: string, content: string) => string;
14
- readonly TOOLTIP_CONTENT_SHADOW: (className: string) => string;
15
- };
16
- export declare const FALLBACK_ICON_SVG: (size: number) => string;
@@ -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,14 +0,0 @@
1
- export interface TooltipOptions {
2
- tooltipType?: 'white' | 'black';
3
- iconType?: 'stroke' | 'fill';
4
- position?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'auto';
5
- size?: 'sm' | 'md';
6
- hideArrow?: boolean;
7
- title?: string;
8
- content?: string;
9
- type?: 'long' | 'short';
10
- zIndex?: number;
11
- useShadowDOM?: boolean;
12
- className?: string;
13
- }
14
- export type CalculatedPosition = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';