@ncds/ui-admin 1.6.3 → 1.6.4-alpha.1

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 (262) hide show
  1. package/mcp/bin/server.d.ts +1 -0
  2. package/mcp/bin/server.js +67 -0
  3. package/mcp/bin/server.mjs +14 -0
  4. package/mcp/bin/tools/getComponentHtml.d.ts +3 -0
  5. package/mcp/bin/tools/getComponentHtml.js +30 -0
  6. package/mcp/bin/tools/getComponentProps.d.ts +3 -0
  7. package/mcp/bin/tools/getComponentProps.js +16 -0
  8. package/mcp/bin/tools/listComponents.d.ts +3 -0
  9. package/mcp/bin/tools/listComponents.js +15 -0
  10. package/mcp/bin/tools/ping.d.ts +11 -0
  11. package/mcp/bin/tools/ping.js +30 -0
  12. package/mcp/bin/tools/searchComponent.d.ts +3 -0
  13. package/mcp/bin/tools/searchComponent.js +20 -0
  14. package/mcp/bin/tools/validateHtml.d.ts +10 -0
  15. package/mcp/bin/tools/validateHtml.js +142 -0
  16. package/mcp/bin/types.d.ts +28 -0
  17. package/mcp/bin/types.js +5 -0
  18. package/mcp/bin/utils/dataLoader.d.ts +11 -0
  19. package/mcp/bin/utils/dataLoader.js +68 -0
  20. package/mcp/bin/utils/logger.d.ts +18 -0
  21. package/mcp/bin/utils/logger.js +27 -0
  22. package/mcp/bin/utils/response.d.ts +23 -0
  23. package/mcp/bin/utils/response.js +31 -0
  24. package/mcp/bin/version.d.ts +1 -0
  25. package/mcp/bin/version.js +4 -0
  26. package/mcp/data/.gitkeep +0 -0
  27. package/mcp/data/_meta.json +7 -0
  28. package/mcp/data/badge-group.json +73 -0
  29. package/mcp/data/badge.json +86 -0
  30. package/mcp/data/bread-crumb.json +22 -0
  31. package/mcp/data/breadcrumb.json +31 -0
  32. package/mcp/data/button-group.json +65 -0
  33. package/mcp/data/button.json +114 -0
  34. package/mcp/data/carousel-arrow.json +59 -0
  35. package/mcp/data/carousel-number-group.json +57 -0
  36. package/mcp/data/carousel.json +22 -0
  37. package/mcp/data/checkbox.json +31 -0
  38. package/mcp/data/combobox.json +114 -0
  39. package/mcp/data/date-picker.json +77 -0
  40. package/mcp/data/divider.json +56 -0
  41. package/mcp/data/dot.json +55 -0
  42. package/mcp/data/dropdown.json +81 -0
  43. package/mcp/data/empty-state.json +34 -0
  44. package/mcp/data/featured-icon.json +83 -0
  45. package/mcp/data/file-input.json +76 -0
  46. package/mcp/data/horizontal-tab.json +71 -0
  47. package/mcp/data/image-file-input.json +97 -0
  48. package/mcp/data/input.json +104 -0
  49. package/mcp/data/modal.json +85 -0
  50. package/mcp/data/notification.json +116 -0
  51. package/mcp/data/number-input.json +128 -0
  52. package/mcp/data/pagination.json +65 -0
  53. package/mcp/data/password-input.json +47 -0
  54. package/mcp/data/progress-bar.json +51 -0
  55. package/mcp/data/progress-circle.json +54 -0
  56. package/mcp/data/radio.json +31 -0
  57. package/mcp/data/range-date-picker-with-buttons.json +64 -0
  58. package/mcp/data/range-date-picker.json +55 -0
  59. package/mcp/data/select-dropdown.json +32 -0
  60. package/mcp/data/select.json +64 -0
  61. package/mcp/data/selectbox.json +129 -0
  62. package/mcp/data/slider.json +57 -0
  63. package/mcp/data/spinner.json +54 -0
  64. package/mcp/data/switch.json +71 -0
  65. package/mcp/data/tab.json +122 -0
  66. package/mcp/data/tag.json +66 -0
  67. package/mcp/data/textarea.json +88 -0
  68. package/mcp/data/toggle.json +59 -0
  69. package/mcp/data/tooltip.json +123 -0
  70. package/mcp/data/vertical-tab.json +64 -0
  71. package/mcp/templates/.mcp.json.example +8 -0
  72. package/mcp/templates/README.md +31 -0
  73. package/package.json +26 -3
  74. package/dist/cjs/assets/scripts/comboBox.js +0 -280
  75. package/dist/cjs/assets/scripts/datePicker.js +0 -706
  76. package/dist/cjs/assets/scripts/featuredIcon.js +0 -95
  77. package/dist/cjs/assets/scripts/fileInput/FileInput.js +0 -183
  78. package/dist/cjs/assets/scripts/fileInput/FileInputModel.js +0 -246
  79. package/dist/cjs/assets/scripts/fileInput/FileInputView.js +0 -455
  80. package/dist/cjs/assets/scripts/fileInput/const/classNames.js +0 -35
  81. package/dist/cjs/assets/scripts/fileInput/const/index.js +0 -27
  82. package/dist/cjs/assets/scripts/fileInput/const/types.js +0 -13
  83. package/dist/cjs/assets/scripts/fileInput/index.js +0 -44
  84. package/dist/cjs/assets/scripts/imageFileInput/ImageFileInput.js +0 -187
  85. package/dist/cjs/assets/scripts/imageFileInput/ImageFileInputModel.js +0 -255
  86. package/dist/cjs/assets/scripts/imageFileInput/ImageFileInputView.js +0 -354
  87. package/dist/cjs/assets/scripts/imageFileInput/const/classNames.js +0 -41
  88. package/dist/cjs/assets/scripts/imageFileInput/const/index.js +0 -27
  89. package/dist/cjs/assets/scripts/imageFileInput/const/types.js +0 -13
  90. package/dist/cjs/assets/scripts/imageFileInput/index.js +0 -44
  91. package/dist/cjs/assets/scripts/index.js +0 -30
  92. package/dist/cjs/assets/scripts/modal/Modal.js +0 -116
  93. package/dist/cjs/assets/scripts/modal/ModalActions.js +0 -128
  94. package/dist/cjs/assets/scripts/modal/ModalContent.js +0 -46
  95. package/dist/cjs/assets/scripts/modal/ModalHeader.js +0 -115
  96. package/dist/cjs/assets/scripts/modal/const/classNames.js +0 -41
  97. package/dist/cjs/assets/scripts/modal/const/index.js +0 -27
  98. package/dist/cjs/assets/scripts/modal/const/types.js +0 -5
  99. package/dist/cjs/assets/scripts/modal/index.js +0 -61
  100. package/dist/cjs/assets/scripts/modal/utils/contentUtils.js +0 -35
  101. package/dist/cjs/assets/scripts/notification/FloatingNotification.js +0 -180
  102. package/dist/cjs/assets/scripts/notification/FullWidthNotification.js +0 -120
  103. package/dist/cjs/assets/scripts/notification/MessageNotification.js +0 -146
  104. package/dist/cjs/assets/scripts/notification/Notification.js +0 -116
  105. package/dist/cjs/assets/scripts/notification/const/classNames.js +0 -50
  106. package/dist/cjs/assets/scripts/notification/const/icons.js +0 -45
  107. package/dist/cjs/assets/scripts/notification/const/index.js +0 -87
  108. package/dist/cjs/assets/scripts/notification/const/sizes.js +0 -54
  109. package/dist/cjs/assets/scripts/notification/const/types.js +0 -14
  110. package/dist/cjs/assets/scripts/notification/index.js +0 -92
  111. package/dist/cjs/assets/scripts/notification/utils.js +0 -92
  112. package/dist/cjs/assets/scripts/progress-bar/ProgressBar.js +0 -272
  113. package/dist/cjs/assets/scripts/progress-bar/index.js +0 -12
  114. package/dist/cjs/assets/scripts/selectBox.js +0 -319
  115. package/dist/cjs/assets/scripts/shared/ButtonCloseX.js +0 -46
  116. package/dist/cjs/assets/scripts/tab.js +0 -40
  117. package/dist/cjs/assets/scripts/tag/Tag.js +0 -268
  118. package/dist/cjs/assets/scripts/tag/const/classNames.js +0 -24
  119. package/dist/cjs/assets/scripts/tag/const/index.js +0 -38
  120. package/dist/cjs/assets/scripts/tag/const/sizes.js +0 -13
  121. package/dist/cjs/assets/scripts/tag/const/types.js +0 -5
  122. package/dist/cjs/assets/scripts/tag/index.js +0 -44
  123. package/dist/cjs/assets/scripts/tooltip/Tooltip.js +0 -380
  124. package/dist/cjs/assets/scripts/tooltip/TooltipLayerManager.js +0 -84
  125. package/dist/cjs/assets/scripts/tooltip/const/classNames.js +0 -29
  126. package/dist/cjs/assets/scripts/tooltip/const/constants.js +0 -56
  127. package/dist/cjs/assets/scripts/tooltip/const/icons.js +0 -15
  128. package/dist/cjs/assets/scripts/tooltip/const/index.js +0 -123
  129. package/dist/cjs/assets/scripts/tooltip/const/templates.js +0 -49
  130. package/dist/cjs/assets/scripts/tooltip/const/types.js +0 -5
  131. package/dist/cjs/assets/scripts/tooltip/index.js +0 -57
  132. package/dist/cjs/assets/scripts/tooltip/utils.js +0 -41
  133. package/dist/cjs/assets/scripts/utils/unifiedBox/DOMRenderer.js +0 -384
  134. package/dist/cjs/assets/scripts/utils/unifiedBox/DropdownModel.js +0 -368
  135. package/dist/cjs/assets/scripts/utils/unifiedBox/UnifiedBoxController.js +0 -681
  136. package/dist/cjs/assets/scripts/utils/unifiedBox/UnifiedBoxManager.js +0 -711
  137. package/dist/esm/assets/scripts/comboBox.js +0 -275
  138. package/dist/esm/assets/scripts/datePicker.js +0 -699
  139. package/dist/esm/assets/scripts/featuredIcon.js +0 -90
  140. package/dist/esm/assets/scripts/fileInput/FileInput.js +0 -178
  141. package/dist/esm/assets/scripts/fileInput/FileInputModel.js +0 -241
  142. package/dist/esm/assets/scripts/fileInput/FileInputView.js +0 -450
  143. package/dist/esm/assets/scripts/fileInput/const/classNames.js +0 -25
  144. package/dist/esm/assets/scripts/fileInput/const/index.js +0 -2
  145. package/dist/esm/assets/scripts/fileInput/const/types.js +0 -7
  146. package/dist/esm/assets/scripts/fileInput/index.js +0 -9
  147. package/dist/esm/assets/scripts/imageFileInput/ImageFileInput.js +0 -182
  148. package/dist/esm/assets/scripts/imageFileInput/ImageFileInputModel.js +0 -250
  149. package/dist/esm/assets/scripts/imageFileInput/ImageFileInputView.js +0 -349
  150. package/dist/esm/assets/scripts/imageFileInput/const/classNames.js +0 -30
  151. package/dist/esm/assets/scripts/imageFileInput/const/index.js +0 -2
  152. package/dist/esm/assets/scripts/imageFileInput/const/types.js +0 -7
  153. package/dist/esm/assets/scripts/imageFileInput/index.js +0 -9
  154. package/dist/esm/assets/scripts/index.js +0 -28
  155. package/dist/esm/assets/scripts/modal/Modal.js +0 -110
  156. package/dist/esm/assets/scripts/modal/ModalActions.js +0 -123
  157. package/dist/esm/assets/scripts/modal/ModalContent.js +0 -41
  158. package/dist/esm/assets/scripts/modal/ModalHeader.js +0 -110
  159. package/dist/esm/assets/scripts/modal/const/classNames.js +0 -31
  160. package/dist/esm/assets/scripts/modal/const/index.js +0 -2
  161. package/dist/esm/assets/scripts/modal/const/types.js +0 -1
  162. package/dist/esm/assets/scripts/modal/index.js +0 -15
  163. package/dist/esm/assets/scripts/modal/utils/contentUtils.js +0 -28
  164. package/dist/esm/assets/scripts/notification/FloatingNotification.js +0 -176
  165. package/dist/esm/assets/scripts/notification/FullWidthNotification.js +0 -115
  166. package/dist/esm/assets/scripts/notification/MessageNotification.js +0 -141
  167. package/dist/esm/assets/scripts/notification/Notification.js +0 -111
  168. package/dist/esm/assets/scripts/notification/const/classNames.js +0 -44
  169. package/dist/esm/assets/scripts/notification/const/icons.js +0 -39
  170. package/dist/esm/assets/scripts/notification/const/index.js +0 -4
  171. package/dist/esm/assets/scripts/notification/const/sizes.js +0 -48
  172. package/dist/esm/assets/scripts/notification/const/types.js +0 -8
  173. package/dist/esm/assets/scripts/notification/index.js +0 -11
  174. package/dist/esm/assets/scripts/notification/utils.js +0 -79
  175. package/dist/esm/assets/scripts/progress-bar/ProgressBar.js +0 -267
  176. package/dist/esm/assets/scripts/progress-bar/index.js +0 -1
  177. package/dist/esm/assets/scripts/selectBox.js +0 -314
  178. package/dist/esm/assets/scripts/shared/ButtonCloseX.js +0 -38
  179. package/dist/esm/assets/scripts/tab.js +0 -35
  180. package/dist/esm/assets/scripts/tag/Tag.js +0 -263
  181. package/dist/esm/assets/scripts/tag/const/classNames.js +0 -16
  182. package/dist/esm/assets/scripts/tag/const/index.js +0 -3
  183. package/dist/esm/assets/scripts/tag/const/sizes.js +0 -7
  184. package/dist/esm/assets/scripts/tag/const/types.js +0 -1
  185. package/dist/esm/assets/scripts/tag/index.js +0 -9
  186. package/dist/esm/assets/scripts/tooltip/Tooltip.js +0 -375
  187. package/dist/esm/assets/scripts/tooltip/TooltipLayerManager.js +0 -79
  188. package/dist/esm/assets/scripts/tooltip/const/classNames.js +0 -23
  189. package/dist/esm/assets/scripts/tooltip/const/constants.js +0 -50
  190. package/dist/esm/assets/scripts/tooltip/const/icons.js +0 -9
  191. package/dist/esm/assets/scripts/tooltip/const/index.js +0 -4
  192. package/dist/esm/assets/scripts/tooltip/const/templates.js +0 -42
  193. package/dist/esm/assets/scripts/tooltip/const/types.js +0 -1
  194. package/dist/esm/assets/scripts/tooltip/index.js +0 -10
  195. package/dist/esm/assets/scripts/tooltip/utils.js +0 -35
  196. package/dist/esm/assets/scripts/utils/unifiedBox/DOMRenderer.js +0 -379
  197. package/dist/esm/assets/scripts/utils/unifiedBox/DropdownModel.js +0 -363
  198. package/dist/esm/assets/scripts/utils/unifiedBox/UnifiedBoxController.js +0 -676
  199. package/dist/esm/assets/scripts/utils/unifiedBox/UnifiedBoxManager.js +0 -706
  200. package/dist/types/assets/scripts/comboBox.d.ts +0 -91
  201. package/dist/types/assets/scripts/datePicker.d.ts +0 -87
  202. package/dist/types/assets/scripts/featuredIcon.d.ts +0 -23
  203. package/dist/types/assets/scripts/fileInput/FileInput.d.ts +0 -67
  204. package/dist/types/assets/scripts/fileInput/FileInputModel.d.ts +0 -70
  205. package/dist/types/assets/scripts/fileInput/FileInputView.d.ts +0 -77
  206. package/dist/types/assets/scripts/fileInput/const/classNames.d.ts +0 -17
  207. package/dist/types/assets/scripts/fileInput/const/index.d.ts +0 -3
  208. package/dist/types/assets/scripts/fileInput/const/types.d.ts +0 -132
  209. package/dist/types/assets/scripts/fileInput/index.d.ts +0 -4
  210. package/dist/types/assets/scripts/imageFileInput/ImageFileInput.d.ts +0 -64
  211. package/dist/types/assets/scripts/imageFileInput/ImageFileInputModel.d.ts +0 -74
  212. package/dist/types/assets/scripts/imageFileInput/ImageFileInputView.d.ts +0 -80
  213. package/dist/types/assets/scripts/imageFileInput/const/classNames.d.ts +0 -20
  214. package/dist/types/assets/scripts/imageFileInput/const/index.d.ts +0 -3
  215. package/dist/types/assets/scripts/imageFileInput/const/types.d.ts +0 -126
  216. package/dist/types/assets/scripts/imageFileInput/index.d.ts +0 -4
  217. package/dist/types/assets/scripts/index.d.ts +0 -33
  218. package/dist/types/assets/scripts/modal/Modal.d.ts +0 -28
  219. package/dist/types/assets/scripts/modal/ModalActions.d.ts +0 -19
  220. package/dist/types/assets/scripts/modal/ModalContent.d.ts +0 -14
  221. package/dist/types/assets/scripts/modal/ModalHeader.d.ts +0 -16
  222. package/dist/types/assets/scripts/modal/const/classNames.d.ts +0 -23
  223. package/dist/types/assets/scripts/modal/const/index.d.ts +0 -3
  224. package/dist/types/assets/scripts/modal/const/types.d.ts +0 -62
  225. package/dist/types/assets/scripts/modal/index.d.ts +0 -8
  226. package/dist/types/assets/scripts/modal/utils/contentUtils.d.ts +0 -11
  227. package/dist/types/assets/scripts/notification/FloatingNotification.d.ts +0 -25
  228. package/dist/types/assets/scripts/notification/FullWidthNotification.d.ts +0 -22
  229. package/dist/types/assets/scripts/notification/MessageNotification.d.ts +0 -23
  230. package/dist/types/assets/scripts/notification/Notification.d.ts +0 -22
  231. package/dist/types/assets/scripts/notification/const/classNames.d.ts +0 -44
  232. package/dist/types/assets/scripts/notification/const/icons.d.ts +0 -26
  233. package/dist/types/assets/scripts/notification/const/index.d.ts +0 -6
  234. package/dist/types/assets/scripts/notification/const/sizes.d.ts +0 -33
  235. package/dist/types/assets/scripts/notification/const/types.d.ts +0 -20
  236. package/dist/types/assets/scripts/notification/index.d.ts +0 -8
  237. package/dist/types/assets/scripts/notification/utils.d.ts +0 -9
  238. package/dist/types/assets/scripts/progress-bar/ProgressBar.d.ts +0 -68
  239. package/dist/types/assets/scripts/progress-bar/index.d.ts +0 -2
  240. package/dist/types/assets/scripts/selectBox.d.ts +0 -77
  241. package/dist/types/assets/scripts/shared/ButtonCloseX.d.ts +0 -6
  242. package/dist/types/assets/scripts/tab.d.ts +0 -8
  243. package/dist/types/assets/scripts/tag/Tag.d.ts +0 -28
  244. package/dist/types/assets/scripts/tag/const/classNames.d.ts +0 -12
  245. package/dist/types/assets/scripts/tag/const/index.d.ts +0 -4
  246. package/dist/types/assets/scripts/tag/const/sizes.d.ts +0 -8
  247. package/dist/types/assets/scripts/tag/const/types.d.ts +0 -34
  248. package/dist/types/assets/scripts/tag/index.d.ts +0 -4
  249. package/dist/types/assets/scripts/tooltip/Tooltip.d.ts +0 -55
  250. package/dist/types/assets/scripts/tooltip/TooltipLayerManager.d.ts +0 -22
  251. package/dist/types/assets/scripts/tooltip/const/classNames.d.ts +0 -18
  252. package/dist/types/assets/scripts/tooltip/const/constants.d.ts +0 -34
  253. package/dist/types/assets/scripts/tooltip/const/icons.d.ts +0 -5
  254. package/dist/types/assets/scripts/tooltip/const/index.d.ts +0 -6
  255. package/dist/types/assets/scripts/tooltip/const/templates.d.ts +0 -17
  256. package/dist/types/assets/scripts/tooltip/const/types.d.ts +0 -15
  257. package/dist/types/assets/scripts/tooltip/index.d.ts +0 -7
  258. package/dist/types/assets/scripts/tooltip/utils.d.ts +0 -3
  259. package/dist/types/assets/scripts/utils/unifiedBox/DOMRenderer.d.ts +0 -108
  260. package/dist/types/assets/scripts/utils/unifiedBox/DropdownModel.d.ts +0 -158
  261. package/dist/types/assets/scripts/utils/unifiedBox/UnifiedBoxController.d.ts +0 -171
  262. package/dist/types/assets/scripts/utils/unifiedBox/UnifiedBoxManager.d.ts +0 -99
@@ -1,115 +0,0 @@
1
- var __assign = this && this.__assign || function () {
2
- __assign = Object.assign || function (t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
6
- }
7
- return t;
8
- };
9
- return __assign.apply(this, arguments);
10
- };
11
- import { SVG_ICONS, CLASS_NAMES, FULL_WIDTH_ICON_MAP, FULL_WIDTH_SIZES } from './const';
12
- import { createWrapperElement, renderSupportingText, renderActions, bindNotificationEvents, setupAutoClose } from './utils';
13
- var FullWidthNotification = /** @class */function () {
14
- function FullWidthNotification(options) {
15
- this.options = __assign({
16
- color: 'neutral',
17
- className: '',
18
- actions: [],
19
- autoClose: 0,
20
- supportingText: undefined
21
- }, options);
22
- this.element = this.createElement();
23
- this.bindEvents();
24
- this.setupAutoClose();
25
- }
26
- FullWidthNotification.prototype.createElement = function () {
27
- var _a = this.options,
28
- title = _a.title,
29
- supportingText = _a.supportingText,
30
- color = _a.color,
31
- className = _a.className,
32
- actions = _a.actions,
33
- onClose = _a.onClose,
34
- supportTextLink = _a.supportTextLink,
35
- onHidePermanently = _a.onHidePermanently;
36
- var wrapper = createWrapperElement(CLASS_NAMES.FULL_WIDTH.BASE, color, className);
37
- var iconHtml = FULL_WIDTH_ICON_MAP[color](FULL_WIDTH_SIZES.ICON);
38
- wrapper.innerHTML = this.buildTemplate({
39
- iconHtml: iconHtml,
40
- title: title,
41
- supportingText: supportingText,
42
- actions: actions,
43
- onClose: onClose,
44
- supportTextLink: supportTextLink,
45
- onHidePermanently: onHidePermanently
46
- });
47
- return wrapper;
48
- };
49
- FullWidthNotification.prototype.buildTemplate = function (params) {
50
- var iconHtml = params.iconHtml,
51
- title = params.title,
52
- supportingText = params.supportingText,
53
- actions = params.actions,
54
- onClose = params.onClose,
55
- supportTextLink = params.supportTextLink,
56
- onHidePermanently = params.onHidePermanently;
57
- return "\n <div class=\"".concat(CLASS_NAMES.FULL_WIDTH.CONTAINER, "\">\n <div class=\"").concat(CLASS_NAMES.FULL_WIDTH.CONTENT, "\">\n <div class=\"").concat(CLASS_NAMES.FULL_WIDTH.CONTENT_WRAPPER, "\">\n <div class=\"").concat(CLASS_NAMES.FULL_WIDTH.ICON, "\">").concat(iconHtml, "</div>\n <div class=\"").concat(CLASS_NAMES.FULL_WIDTH.TEXT_CONTAINER, "\">\n <span class=\"").concat(CLASS_NAMES.FULL_WIDTH.TITLE, "\">").concat(title, "</span>\n ").concat(renderSupportingText(supportingText, CLASS_NAMES.FULL_WIDTH.SUPPORTING_TEXT, supportTextLink), "\n </div>\n </div>\n <div class=\"").concat(CLASS_NAMES.FULL_WIDTH.ACTIONS_CONTAINER, "\">\n ").concat(actions && actions.length > 0 ? renderActions(actions, CLASS_NAMES.FULL_WIDTH.ACTIONS) : '', "\n ").concat(this.renderHidePermanentlyButton(onHidePermanently), "\n ").concat(this.renderCloseButton(onClose), "\n </div>\n </div>\n </div>\n ");
58
- };
59
- FullWidthNotification.prototype.renderHidePermanentlyButton = function (onHidePermanently) {
60
- if (!onHidePermanently) return '';
61
- return "\n <button type=\"button\" class=\"ncua-notification__action-button ncua-notification__action-button--text ncua-full-width-notification__link\" data-hide-permanently=\"true\">\n \uB2E4\uC2DC\uBCF4\uC9C0 \uC54A\uAE30\n </button>\n ";
62
- };
63
- FullWidthNotification.prototype.renderCloseButton = function (onClose) {
64
- if (!onClose) return '';
65
- return "\n <button type=\"button\" class=\"".concat(CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, "\" aria-label=\"\uC54C\uB9BC \uB2EB\uAE30\">\n ").concat(SVG_ICONS['x-close'](FULL_WIDTH_SIZES.CLOSE_BUTTON), "\n </button>\n ");
66
- };
67
- FullWidthNotification.prototype.bindEvents = function () {
68
- var _this = this;
69
- bindNotificationEvents(this.element, this.options.actions, this.options.onClose, function () {
70
- return _this.remove();
71
- });
72
- // 다시보지 않기 버튼 이벤트 바인딩
73
- if (this.options.onHidePermanently) {
74
- var hidePermanentlyButton = this.element.querySelector('[data-hide-permanently="true"]');
75
- if (hidePermanentlyButton) {
76
- hidePermanentlyButton.addEventListener('click', function () {
77
- var _a, _b;
78
- (_b = (_a = _this.options).onHidePermanently) === null || _b === void 0 ? void 0 : _b.call(_a);
79
- _this.remove();
80
- });
81
- }
82
- }
83
- };
84
- FullWidthNotification.prototype.setupAutoClose = function () {
85
- var _this = this;
86
- this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, function () {
87
- return _this.remove();
88
- });
89
- };
90
- // Public methods
91
- FullWidthNotification.prototype.getElement = function () {
92
- return this.element;
93
- };
94
- FullWidthNotification.prototype.appendTo = function (parent) {
95
- parent.appendChild(this.element);
96
- };
97
- FullWidthNotification.prototype.remove = function () {
98
- if (this.autoCloseTimer) {
99
- clearTimeout(this.autoCloseTimer);
100
- this.autoCloseTimer = undefined;
101
- }
102
- if (this.element && this.element.parentNode) {
103
- this.element.parentNode.removeChild(this.element);
104
- }
105
- };
106
- FullWidthNotification.prototype.destroy = function () {
107
- this.remove();
108
- };
109
- // Static factory methods
110
- FullWidthNotification.create = function (options) {
111
- return new FullWidthNotification(options);
112
- };
113
- return FullWidthNotification;
114
- }();
115
- export { FullWidthNotification };
@@ -1,141 +0,0 @@
1
- var __assign = this && this.__assign || function () {
2
- __assign = Object.assign || function (t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
6
- }
7
- return t;
8
- };
9
- return __assign.apply(this, arguments);
10
- };
11
- import { SVG_ICONS, CLASS_NAMES, FLOATING_ICON_MAP, MESSAGE_SIZES } from './const';
12
- import { FeaturedIcon } from '../featuredIcon';
13
- import { createWrapperElement, renderSupportingText, renderActions, bindNotificationEvents, setupAutoClose } from './utils';
14
- var MessageNotification = /** @class */function () {
15
- function MessageNotification(options) {
16
- this.options = __assign({
17
- color: 'neutral',
18
- className: '',
19
- actions: [],
20
- autoClose: 0,
21
- supportingText: undefined
22
- }, options);
23
- this.element = this.createElement();
24
- this.bindEvents();
25
- this.setupAutoClose();
26
- }
27
- MessageNotification.prototype.createElement = function () {
28
- var _a = this.options,
29
- title = _a.title,
30
- supportingText = _a.supportingText,
31
- color = _a.color,
32
- className = _a.className,
33
- actions = _a.actions,
34
- onClose = _a.onClose,
35
- onHidePermanently = _a.onHidePermanently;
36
- // message 타입은 neutral, error, warning, success 4가지 색상만 지원
37
- var actualColor = color;
38
- if (color === 'info') {
39
- console.warn('Message notification does not support "info" color. Using "neutral" instead.');
40
- actualColor = 'neutral';
41
- }
42
- var wrapper = createWrapperElement(CLASS_NAMES.MESSAGE.BASE, actualColor, className);
43
- var iconFunction = FLOATING_ICON_MAP[actualColor];
44
- // FeaturedIcon 생성
45
- var featuredIconElement = null;
46
- if (iconFunction) {
47
- var iconSvg = iconFunction(MESSAGE_SIZES.ICON_PIXEL);
48
- this.featuredIcon = FeaturedIcon.create({
49
- svgString: iconSvg,
50
- theme: 'light-circle',
51
- color: actualColor,
52
- size: MESSAGE_SIZES.FEATURED_ICON
53
- });
54
- featuredIconElement = this.featuredIcon.getElement();
55
- }
56
- wrapper.innerHTML = this.buildTemplate({
57
- title: title,
58
- supportingText: supportingText,
59
- actions: actions,
60
- onClose: onClose,
61
- onHidePermanently: onHidePermanently
62
- });
63
- // FeaturedIcon을 content-wrapper에 추가
64
- if (featuredIconElement) {
65
- var contentWrapper = wrapper.querySelector(".".concat(CLASS_NAMES.MESSAGE.CONTENT_WRAPPER));
66
- if (contentWrapper) {
67
- contentWrapper.insertBefore(featuredIconElement, contentWrapper.firstChild);
68
- }
69
- }
70
- return wrapper;
71
- };
72
- MessageNotification.prototype.buildTemplate = function (params) {
73
- var title = params.title,
74
- supportingText = params.supportingText,
75
- actions = params.actions,
76
- onClose = params.onClose,
77
- onHidePermanently = params.onHidePermanently;
78
- return "\n <div class=\"".concat(CLASS_NAMES.MESSAGE.CONTAINER, "\">\n <div class=\"").concat(CLASS_NAMES.MESSAGE.CONTENT, "\">\n <div class=\"").concat(CLASS_NAMES.MESSAGE.CONTENT_WRAPPER, "\">\n <div class=\"").concat(CLASS_NAMES.MESSAGE.TEXT_CONTAINER, "\">\n <span class=\"").concat(CLASS_NAMES.MESSAGE.TITLE, "\">").concat(title, "</span>\n ").concat(renderSupportingText(supportingText, CLASS_NAMES.MESSAGE.SUPPORTING_TEXT), "\n </div>\n </div>\n <div class=\"").concat(CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER, "\">\n ").concat(actions && actions.length > 0 ? renderActions(actions, CLASS_NAMES.MESSAGE.ACTIONS) : '', "\n </div>\n <div class=\"").concat(CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER, "\">\n ").concat(this.renderHidePermanentlyButton(onHidePermanently), "\n ").concat(this.renderCloseButton(onClose), "\n </div>\n </div>\n </div>\n ");
79
- };
80
- MessageNotification.prototype.renderHidePermanentlyButton = function (onHidePermanently) {
81
- if (!onHidePermanently) return '';
82
- return "\n <button type=\"button\" class=\"".concat(CLASS_NAMES.COMMON.ACTION_BUTTON, " ").concat(CLASS_NAMES.COMMON.ACTION_BUTTON, "--text ").concat(CLASS_NAMES.MESSAGE.HIDE_LINK, "\" data-hide-permanently=\"true\">\n \uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30\n </button>\n ");
83
- };
84
- MessageNotification.prototype.renderCloseButton = function (onClose) {
85
- if (!onClose) return '';
86
- return "\n <button type=\"button\" class=\"".concat(CLASS_NAMES.MESSAGE.CLOSE_BUTTON, "\" aria-label=\"\uC54C\uB9BC \uB2EB\uAE30\">\n ").concat(SVG_ICONS['x-close'](MESSAGE_SIZES.CLOSE_BUTTON).replace('stroke="currentColor"', "stroke=\"#2F2F30\""), "\n </button>\n ");
87
- };
88
- MessageNotification.prototype.bindEvents = function () {
89
- var _this = this;
90
- bindNotificationEvents(this.element, this.options.actions, this.options.onClose, function () {
91
- return _this.remove();
92
- });
93
- // 다시보지 않기 버튼 이벤트 바인딩
94
- if (this.options.onHidePermanently) {
95
- var hidePermanentlyButton = this.element.querySelector('[data-hide-permanently="true"]');
96
- if (hidePermanentlyButton) {
97
- hidePermanentlyButton.addEventListener('click', function () {
98
- var _a, _b;
99
- (_b = (_a = _this.options).onHidePermanently) === null || _b === void 0 ? void 0 : _b.call(_a);
100
- _this.remove();
101
- });
102
- }
103
- }
104
- };
105
- MessageNotification.prototype.setupAutoClose = function () {
106
- var _this = this;
107
- this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, function () {
108
- return _this.remove();
109
- });
110
- };
111
- // Public methods
112
- MessageNotification.prototype.getElement = function () {
113
- return this.element;
114
- };
115
- MessageNotification.prototype.appendTo = function (parent) {
116
- parent.appendChild(this.element);
117
- };
118
- MessageNotification.prototype.remove = function () {
119
- if (this.autoCloseTimer) {
120
- clearTimeout(this.autoCloseTimer);
121
- this.autoCloseTimer = undefined;
122
- }
123
- if (this.element && this.element.parentNode) {
124
- this.element.parentNode.removeChild(this.element);
125
- }
126
- };
127
- MessageNotification.prototype.destroy = function () {
128
- // FeaturedIcon 정리
129
- if (this.featuredIcon) {
130
- this.featuredIcon.destroy();
131
- this.featuredIcon = undefined;
132
- }
133
- this.remove();
134
- };
135
- // Static factory methods
136
- MessageNotification.create = function (options) {
137
- return new MessageNotification(options);
138
- };
139
- return MessageNotification;
140
- }();
141
- export { MessageNotification };
@@ -1,111 +0,0 @@
1
- var __assign = this && this.__assign || function () {
2
- __assign = Object.assign || function (t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
6
- }
7
- return t;
8
- };
9
- return __assign.apply(this, arguments);
10
- };
11
- var __rest = this && this.__rest || function (s, e) {
12
- var t = {};
13
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
14
- if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
15
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
16
- }
17
- return t;
18
- };
19
- import { FullWidthNotification } from './FullWidthNotification';
20
- import { FloatingNotification } from './FloatingNotification';
21
- import { MessageNotification } from './MessageNotification';
22
- // 통합 Notification 클래스
23
- var Notification = /** @class */function () {
24
- function Notification(options) {
25
- var _a = options.type,
26
- type = _a === void 0 ? 'floating' : _a,
27
- baseOptions = __rest(options, ["type"]);
28
- if (type === 'message') {
29
- this.instance = new MessageNotification(baseOptions);
30
- } else if (type === 'full-width') {
31
- this.instance = new FullWidthNotification(baseOptions);
32
- } else {
33
- this.instance = new FloatingNotification(baseOptions);
34
- }
35
- }
36
- // 모든 메서드를 instance에 위임
37
- Notification.prototype.getElement = function () {
38
- return this.instance.getElement();
39
- };
40
- Notification.prototype.appendTo = function (parent) {
41
- return this.instance.appendTo(parent);
42
- };
43
- Notification.prototype.remove = function () {
44
- return this.instance.remove();
45
- };
46
- Notification.prototype.destroy = function () {
47
- return this.instance.destroy();
48
- };
49
- Notification.prototype.show = function (parent) {
50
- if (parent) {
51
- this.instance.appendTo(parent);
52
- } else {
53
- this.instance.appendTo(document.body);
54
- }
55
- };
56
- // Static factory methods
57
- Notification.create = function (options) {
58
- return new Notification(options);
59
- };
60
- // Convenience method for creating notifications with specific color
61
- Notification.createWithColor = function (color, title, supportingText, options) {
62
- var autoCloseMap = {
63
- success: 3000,
64
- error: 5000,
65
- warning: 3000,
66
- info: 3000,
67
- neutral: 0
68
- };
69
- return new Notification(__assign({
70
- title: title,
71
- supportingText: supportingText,
72
- color: color,
73
- type: 'floating',
74
- autoClose: autoCloseMap[color]
75
- }, options));
76
- };
77
- // 클래스를 생성하지 않고도 기본 floating 알림 생성을 하기 위한 함수들
78
- Notification.success = function (title, supportingText, options) {
79
- var notification = this.createWithColor('success', title, supportingText, options);
80
- notification.show();
81
- return notification;
82
- };
83
- Notification.error = function (title, supportingText, options) {
84
- var notification = this.createWithColor('error', title, supportingText, options);
85
- notification.show();
86
- return notification;
87
- };
88
- Notification.warning = function (title, supportingText, options) {
89
- var notification = this.createWithColor('warning', title, supportingText, options);
90
- notification.show();
91
- return notification;
92
- };
93
- Notification.info = function (title, supportingText, options) {
94
- var notification = this.createWithColor('info', title, supportingText, options);
95
- notification.show();
96
- return notification;
97
- };
98
- Notification.neutral = function (title, supportingText, options) {
99
- var notification = this.createWithColor('neutral', title, supportingText, options);
100
- notification.show();
101
- return notification;
102
- };
103
- // showFullWidth method for backward compatibility
104
- Notification.showFullWidth = function (options) {
105
- return new Notification(__assign(__assign({}, options), {
106
- type: 'full-width'
107
- }));
108
- };
109
- return Notification;
110
- }();
111
- export { Notification };
@@ -1,44 +0,0 @@
1
- // CSS class names
2
- export var CLASS_NAMES = {
3
- FULL_WIDTH: {
4
- BASE: 'ncua-full-width-notification',
5
- CONTAINER: 'ncua-full-width-notification__container',
6
- CONTENT: 'ncua-full-width-notification__content',
7
- CONTENT_WRAPPER: 'ncua-full-width-notification__content-wrapper',
8
- ICON: 'ncua-full-width-notification__icon',
9
- TEXT_CONTAINER: 'ncua-full-width-notification__text-container',
10
- TITLE: 'ncua-full-width-notification__title',
11
- SUPPORTING_TEXT: 'ncua-full-width-notification__supporting-text',
12
- ACTIONS_CONTAINER: 'ncua-full-width-notification__actions-container',
13
- ACTIONS: 'ncua-full-width-notification__actions',
14
- CLOSE_BUTTON: 'ncua-full-width-notification__close-button'
15
- },
16
- FLOATING: {
17
- BASE: 'ncua-floating-notification',
18
- CONTAINER: 'ncua-floating-notification__container',
19
- CONTENT: 'ncua-floating-notification__content',
20
- TEXT_CONTAINER: 'ncua-floating-notification__text-container',
21
- TITLE_WRAPPER: 'ncua-floating-notification__title-wrapper',
22
- TITLE: 'ncua-floating-notification__title',
23
- SUPPORTING_TEXT: 'ncua-floating-notification__supporting-text',
24
- ACTIONS: 'ncua-floating-notification__actions',
25
- CLOSE_BUTTON: 'ncua-floating-notification__close-button'
26
- },
27
- MESSAGE: {
28
- BASE: 'ncua-message-notification',
29
- CONTAINER: 'ncua-message-notification__container',
30
- CONTENT: 'ncua-message-notification__content',
31
- CONTENT_WRAPPER: 'ncua-message-notification__content-wrapper',
32
- ICON: 'ncua-message-notification__icon',
33
- TEXT_CONTAINER: 'ncua-message-notification__text-container',
34
- TITLE: 'ncua-message-notification__title',
35
- SUPPORTING_TEXT: 'ncua-message-notification__supporting-text',
36
- ACTIONS_CONTAINER: 'ncua-message-notification__actions-container',
37
- ACTIONS: 'ncua-message-notification__actions',
38
- HIDE_LINK: 'ncua-message-notification__hide-link',
39
- CLOSE_BUTTON: 'ncua-message-notification__close-button'
40
- },
41
- COMMON: {
42
- ACTION_BUTTON: 'ncua-notification__action-button'
43
- }
44
- };
@@ -1,39 +0,0 @@
1
- // SVG 아이콘들 (크기는 동적으로 설정)
2
- export var SVG_ICONS = {
3
- 'pin-02': function (size) {
4
- return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8.377 15.616 2.72 21.273m8.974-14.631-1.56 1.56a2 2 0 0 1-.264.242 1 1 0 0 1-.207.111c-.082.032-.17.05-.347.085l-3.665.733c-.952.19-1.428.286-1.65.537a1 1 0 0 0-.243.8c.046.333.39.677 1.076 1.363l7.086 7.086c.686.687 1.03 1.03 1.362 1.076a1 1 0 0 0 .801-.242c.251-.223.346-.7.537-1.651l.733-3.665c.035-.176.053-.265.085-.347a1 1 0 0 1 .11-.207c.051-.072.115-.136.242-.263l1.561-1.561c.082-.082.122-.122.167-.158q.06-.047.126-.085c.05-.029.103-.051.208-.097l2.495-1.069c.727-.312 1.091-.467 1.256-.72a1 1 0 0 0 .144-.747c-.06-.295-.34-.575-.9-1.135l-5.142-5.143c-.56-.56-.84-.84-1.135-.9a1 1 0 0 0-.748.145c-.252.165-.407.529-.72 1.256l-1.068 2.495a2 2 0 0 1-.097.208 1 1 0 0 1-.085.126 2 2 0 0 1-.158.167\"></path></svg>");
5
- },
6
- 'alert-triangle': function (size) {
7
- return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v4m0 4h.01M10.615 3.892 2.39 18.098c-.456.788-.684 1.182-.65 1.506a1 1 0 0 0 .406.705c.263.191.718.191 1.629.191h16.45c.91 0 1.365 0 1.628-.191a1 1 0 0 0 .407-.705c.034-.324-.195-.718-.65-1.506L13.383 3.892c-.454-.785-.681-1.178-.978-1.31a1 1 0 0 0-.812 0c-.297.132-.524.525-.979 1.31\"></path></svg>");
8
- },
9
- 'alert-circle': function (size) {
10
- return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4m0 4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10\"></path></svg>");
11
- },
12
- 'check-circle': function (size) {
13
- return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m7.5 12 3 3 6-6m5.5 3c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10\"></path></svg>");
14
- },
15
- 'info-circle': function (size) {
16
- return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\" color=\"#5720B7\" class=\"ncua-full-width-notification__icon\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10\"></path></svg>");
17
- },
18
- 'message-chat-square': function (size) {
19
- return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\" color=\"#0C111D\" class=\"ncua-full-width-notification__icon\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m10 15-3.075 3.114c-.43.434-.644.651-.828.666a.5.5 0 0 1-.421-.172c-.12-.14-.12-.446-.12-1.056v-1.56c0-.548-.449-.944-.99-1.024v0a3 3 0 0 1-2.534-2.533C2 12.219 2 11.96 2 11.445V6.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C4.28 2 5.12 2 6.8 2h7.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C19 4.28 19 5.12 19 6.8V11m0 11-2.176-1.513c-.306-.213-.46-.32-.626-.395a2 2 0 0 0-.462-.145c-.18-.033-.367-.033-.74-.033H13.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C10 18.394 10 17.834 10 16.714V14.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C11.52 11 12.08 11 13.2 11h5.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 12.52 22 13.08 22 14.2v2.714c0 .932 0 1.398-.152 1.766a2 2 0 0 1-1.083 1.082c-.367.152-.833.152-1.765.152z\"></path></svg>");
20
- },
21
- 'x-close': function (size) {
22
- return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M18 6 6 18M6 6l12 12\"></path></svg>");
23
- }
24
- };
25
- export var FLOATING_ICON_MAP = {
26
- neutral: SVG_ICONS['pin-02'],
27
- error: SVG_ICONS['alert-triangle'],
28
- warning: SVG_ICONS['alert-circle'],
29
- success: SVG_ICONS['check-circle']
30
- // info는 floating에서는 지원하지 않음
31
- };
32
- export var FULL_WIDTH_ICON_MAP = {
33
- neutral: SVG_ICONS['message-chat-square'],
34
- error: SVG_ICONS['alert-triangle'],
35
- warning: SVG_ICONS['alert-triangle'],
36
- success: SVG_ICONS['check-circle'],
37
- info: SVG_ICONS['info-circle']
38
- };
39
- export var ICON_MAP = FULL_WIDTH_ICON_MAP;
@@ -1,4 +0,0 @@
1
- export { SVG_ICONS, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP } from './icons';
2
- export { CLASS_NAMES } from './classNames';
3
- export { FEATURED_ICON_SIZES, ICON_PIXEL_SIZES, CLOSE_BUTTON_SIZES, CLOSE_BUTTON_SVG_SIZES, FULL_WIDTH_SIZES, MESSAGE_SIZES, getSizes } from './sizes';
4
- export { MESSAGE_CLOSE_ICON_COLORS } from './types';
@@ -1,48 +0,0 @@
1
- // 알림 컴포넌트 사이즈 관련 상수들
2
- // FeaturedIcon 사이즈
3
- export var FEATURED_ICON_SIZES = {
4
- MOBILE: 'md',
5
- DESKTOP: 'sm'
6
- };
7
- // SVG 아이콘 픽셀 사이즈
8
- export var ICON_PIXEL_SIZES = {
9
- MOBILE: '20',
10
- DESKTOP: '16',
11
- FULL_WIDTH: '16' // Full-width는 항상 고정
12
- };
13
- // 닫기 버튼 사이즈
14
- export var CLOSE_BUTTON_SIZES = {
15
- MOBILE: 'sm',
16
- DESKTOP: 'xs'
17
- };
18
- // 닫기 버튼 SVG 픽셀 사이즈
19
- export var CLOSE_BUTTON_SVG_SIZES = {
20
- xs: 16,
21
- sm: 20
22
- };
23
- // Full-width 알림 고정 사이즈
24
- export var FULL_WIDTH_SIZES = {
25
- ICON: '16',
26
- CLOSE_BUTTON: '20'
27
- };
28
- // Message 알림 고정 사이즈
29
- export var MESSAGE_SIZES = {
30
- FEATURED_ICON: 'lg',
31
- ICON_PIXEL: '24',
32
- CLOSE_BUTTON: '20'
33
- };
34
- // 사이즈 유틸리티 함수들
35
- export var getSizes = {
36
- featuredIcon: function (isMobile) {
37
- return isMobile ? FEATURED_ICON_SIZES.MOBILE : FEATURED_ICON_SIZES.DESKTOP;
38
- },
39
- iconPixel: function (isMobile) {
40
- return isMobile ? ICON_PIXEL_SIZES.MOBILE : ICON_PIXEL_SIZES.DESKTOP;
41
- },
42
- closeButton: function (isMobile) {
43
- return isMobile ? CLOSE_BUTTON_SIZES.MOBILE : CLOSE_BUTTON_SIZES.DESKTOP;
44
- },
45
- closeButtonSvg: function (size) {
46
- return CLOSE_BUTTON_SVG_SIZES[size];
47
- }
48
- };
@@ -1,8 +0,0 @@
1
- // Message Notification 닫기 버튼 아이콘 색상 맵
2
- export var MESSAGE_CLOSE_ICON_COLORS = {
3
- neutral: '#6B7280',
4
- error: '#EF4444',
5
- warning: '#F97316',
6
- success: '#16A34A',
7
- info: '#6B7280' // info는 message 타입에서 지원하지 않지만 fallback용
8
- };
@@ -1,11 +0,0 @@
1
- export { Notification } from './Notification';
2
- export { FullWidthNotification } from './FullWidthNotification';
3
- export { FloatingNotification } from './FloatingNotification';
4
- export { MessageNotification } from './MessageNotification';
5
- export * from './utils';
6
- export { SVG_ICONS, CLASS_NAMES, ICON_MAP, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP } from './const';
7
- // 전역 등록 ( 추후 index.ts와 개별동작 할 수 있게끔 대비 )
8
- if (typeof window !== 'undefined') {
9
- window.ncua = window.ncua || {};
10
- window.ncua.Notification = Notification;
11
- }
@@ -1,79 +0,0 @@
1
- import { CLASS_NAMES } from './const';
2
- import { BREAKPOINT } from '../../../src/constant/breakpoint';
3
- // 공통 유틸리티 함수들
4
- export function createWrapperElement(baseClass, color, className) {
5
- var wrapper = document.createElement('div');
6
- wrapper.className = buildClassName(baseClass, color, className);
7
- wrapper.setAttribute('role', 'alert');
8
- return wrapper;
9
- }
10
- export function buildClassName(baseClass, color, className) {
11
- var classes = [baseClass, "".concat(baseClass, "--").concat(color)];
12
- if (className) {
13
- classes.push(className);
14
- }
15
- return classes.join(' ');
16
- }
17
- export function renderSupportingText(supportingText, className, supportTextLink) {
18
- if (!supportingText) return '';
19
- if (supportTextLink) {
20
- return "<a href=\"".concat(supportTextLink, "\" class=\"ncua-full-width-notification__link\"><span class=\"").concat(className, "\">").concat(supportingText, "</span></a>");
21
- }
22
- return "<span class=\"".concat(className, "\">").concat(supportingText, "</span>");
23
- }
24
- export function renderActions(actions, wrapperClass) {
25
- // 액션이 없으면 빈 문자열 반환
26
- if (!actions || actions.length === 0) {
27
- return '';
28
- }
29
- var buttonsHtml = actions.map(function (action) {
30
- var buttonHtml = "\n <button \n class=\"ncua-btn ncua-btn--sm ncua-btn--".concat(action.hierarchy || 'text', "\"\n data-action=\"").concat(action.label, "-").concat(action.hierarchy, "\"\n >\n ").concat(action.label, "\n </button>");
31
- return buttonHtml;
32
- }).join('');
33
- return "<div class=\"".concat(wrapperClass, "\">").concat(buttonsHtml, "</div>");
34
- }
35
- // 공통 이벤트 처리
36
- export function bindNotificationEvents(element, actions, onClose, onRemove) {
37
- element.addEventListener('click', function (event) {
38
- var target = event.target;
39
- // 닫기 버튼 클릭 처리
40
- if (target.matches(".".concat(CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, ", .").concat(CLASS_NAMES.FLOATING.CLOSE_BUTTON)) || target.closest(".".concat(CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, ", .").concat(CLASS_NAMES.FLOATING.CLOSE_BUTTON)) || target.closest(".".concat(CLASS_NAMES.MESSAGE.CLOSE_BUTTON))) {
41
- onClose === null || onClose === void 0 ? void 0 : onClose();
42
- onRemove === null || onRemove === void 0 ? void 0 : onRemove();
43
- return;
44
- }
45
- // 액션 버튼 클릭 처리
46
- var actionButton = target.closest('.ncua-btn[data-action]');
47
- if (actionButton && actions) {
48
- var actionData = actionButton.getAttribute('data-action');
49
- if (actionData) {
50
- var matchedAction = null;
51
- for (var _i = 0, actions_1 = actions; _i < actions_1.length; _i++) {
52
- var action = actions_1[_i];
53
- var expectedDataAction = "".concat(action.label, "-").concat(action.hierarchy || 'link');
54
- if (actionData === expectedDataAction) {
55
- matchedAction = action;
56
- break;
57
- }
58
- }
59
- if (matchedAction === null || matchedAction === void 0 ? void 0 : matchedAction.onClick) {
60
- matchedAction.onClick();
61
- }
62
- }
63
- }
64
- });
65
- }
66
- // 자동 닫기 설정
67
- export function setupAutoClose(autoClose, onClose, onRemove) {
68
- if (autoClose > 0) {
69
- return window.setTimeout(function () {
70
- onClose === null || onClose === void 0 ? void 0 : onClose();
71
- onRemove === null || onRemove === void 0 ? void 0 : onRemove();
72
- }, autoClose);
73
- }
74
- return undefined;
75
- }
76
- // Mobile detection utility
77
- export var isMobile = function () {
78
- return window.innerWidth <= parseInt(BREAKPOINT.mobile);
79
- };