@sellmate/design-system 0.0.49 → 0.0.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (213) hide show
  1. package/dist/cjs/design-system.cjs.js +1 -1
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/{esm/color-CgyTlXBV.js → cjs/resolveColor-DxvExwgo.js} +17 -4
  4. package/dist/cjs/{resolveColor-CauSLF0s.js.map → resolveColor-DxvExwgo.js.map} +1 -1
  5. package/dist/cjs/sd-badge.cjs.entry.js +2 -3
  6. package/dist/cjs/sd-badge.entry.cjs.js.map +1 -1
  7. package/dist/cjs/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-radio-group.sd-select.sd-select-option.sd-table-backup.sd-toggle.sd-tooltip.sd-tooltip-portal.entry.cjs.js.map +1 -0
  8. package/dist/cjs/{sd-button_12.cjs.entry.js → sd-button_15.cjs.entry.js} +215 -23
  9. package/dist/cjs/sd-card.cjs.entry.js +1 -1
  10. package/dist/cjs/sd-date-picker.cjs.entry.js +1 -1
  11. package/dist/cjs/sd-date-range-picker.cjs.entry.js +2 -2
  12. package/dist/cjs/sd-modal-card.cjs.entry.js +1 -2
  13. package/dist/cjs/sd-modal-card.entry.cjs.js.map +1 -1
  14. package/dist/cjs/sd-popover.cjs.entry.js +2 -2
  15. package/dist/cjs/sd-progress.cjs.entry.js +2 -2
  16. package/dist/cjs/sd-select-multiple-group.cjs.entry.js +2 -2
  17. package/dist/cjs/sd-select-multiple.cjs.entry.js +2 -2
  18. package/dist/cjs/sd-select-option-group.cjs.entry.js +3 -3
  19. package/dist/cjs/sd-table.cjs.entry.js +3 -3
  20. package/dist/cjs/sd-tag.cjs.entry.js +1 -1
  21. package/dist/cjs/sd-tbody_3.cjs.entry.js +3 -3
  22. package/dist/cjs/sd-td.cjs.entry.js +2 -2
  23. package/dist/collection/collection-manifest.json +2 -0
  24. package/dist/collection/components/sd-badge/sd-badge.js +1 -1
  25. package/dist/collection/components/sd-card/sd-card.js +1 -1
  26. package/dist/collection/components/sd-date-picker/sd-date-picker.js +1 -1
  27. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +2 -2
  28. package/dist/collection/components/sd-guide/sd-guide.js +3 -3
  29. package/dist/collection/components/sd-icon/sd-icon.js +1 -1
  30. package/dist/collection/components/sd-input/sd-input.js +2 -2
  31. package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js +1 -1
  32. package/dist/collection/components/sd-pagination/sd-pagination.js +2 -2
  33. package/dist/collection/components/sd-popover/sd-popover.js +2 -2
  34. package/dist/collection/components/sd-portal/sd-portal.js +1 -1
  35. package/dist/collection/components/sd-progress/sd-progress.js +2 -2
  36. package/dist/collection/components/sd-radio-group/sd-radio-group.css +76 -0
  37. package/dist/collection/components/sd-radio-group/sd-radio-group.js +214 -0
  38. package/dist/collection/components/sd-radio-group/sd-radio-group.js.map +1 -0
  39. package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +1 -1
  40. package/dist/collection/components/sd-select/sd-select.js +2 -2
  41. package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +2 -2
  42. package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js +2 -2
  43. package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +3 -3
  44. package/dist/collection/components/sd-table/sd-table.js +3 -3
  45. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +1 -1
  46. package/dist/collection/components/sd-table/sd-td/sd-td.js +2 -2
  47. package/dist/collection/components/sd-table/sd-th/sd-th.js +1 -1
  48. package/dist/collection/components/sd-table/sd-tr/sd-tr.js +1 -1
  49. package/dist/collection/components/sd-table-backup/sd-table-backup.css +1 -1
  50. package/dist/collection/components/sd-table-backup/sd-table-backup.js +10 -4
  51. package/dist/collection/components/sd-table-backup/sd-table-backup.js.map +1 -1
  52. package/dist/collection/components/sd-tag/sd-tag.js +1 -1
  53. package/dist/collection/components/sd-toggle/sd-toggle.css +59 -0
  54. package/dist/collection/components/sd-toggle/sd-toggle.js +133 -0
  55. package/dist/collection/components/sd-toggle/sd-toggle.js.map +1 -0
  56. package/dist/collection/components/sd-tooltip/sd-tooltip.js +4 -4
  57. package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js +1 -1
  58. package/dist/components/{p-BozMKCTh.js → p-1SxxSEqq.js} +5 -5
  59. package/dist/components/{p-BozMKCTh.js.map → p-1SxxSEqq.js.map} +1 -1
  60. package/dist/components/{p-CaLViLir.js → p-9kN1E6Ra.js} +9 -9
  61. package/dist/components/{p-CaLViLir.js.map → p-9kN1E6Ra.js.map} +1 -1
  62. package/dist/components/{p-Dg_O2miv.js → p-BSUHSOXX.js} +3 -3
  63. package/dist/components/{p-Dg_O2miv.js.map → p-BSUHSOXX.js.map} +1 -1
  64. package/dist/components/{p-D2aGA3BX.js → p-BsyfatBe.js} +3 -3
  65. package/dist/components/{p-D2aGA3BX.js.map → p-BsyfatBe.js.map} +1 -1
  66. package/dist/components/{p-CePRmFej.js → p-C171iavd.js} +3 -3
  67. package/dist/components/{p-CePRmFej.js.map → p-C171iavd.js.map} +1 -1
  68. package/dist/components/{p-RZm_wGW3.js → p-C6tAa8Q4.js} +5 -5
  69. package/dist/components/{p-RZm_wGW3.js.map → p-C6tAa8Q4.js.map} +1 -1
  70. package/dist/components/{p-BAhPNR2w.js → p-C9fSCxHc.js} +7 -7
  71. package/dist/components/{p-BAhPNR2w.js.map → p-C9fSCxHc.js.map} +1 -1
  72. package/dist/components/{p-CRB0WJnC.js → p-CJ0qTKU7.js} +3 -3
  73. package/dist/components/{p-CRB0WJnC.js.map → p-CJ0qTKU7.js.map} +1 -1
  74. package/dist/components/{p-D2YMmHfl.js → p-CkKxyn_K.js} +3 -3
  75. package/dist/components/{p-D2YMmHfl.js.map → p-CkKxyn_K.js.map} +1 -1
  76. package/dist/components/{p-cOQWi_dD.js → p-D8f0ASS6.js} +3 -3
  77. package/dist/components/{p-cOQWi_dD.js.map → p-D8f0ASS6.js.map} +1 -1
  78. package/dist/components/{p-LziGti_p.js → p-Dgxczhd0.js} +3 -3
  79. package/dist/components/{p-LziGti_p.js.map → p-Dgxczhd0.js.map} +1 -1
  80. package/dist/components/{p-DC5fpNnQ.js → p-DiehM5Y0.js} +3 -3
  81. package/dist/components/{p-DC5fpNnQ.js.map → p-DiehM5Y0.js.map} +1 -1
  82. package/dist/components/{p-CxKXdl1J.js → p-DyGUXuvD.js} +5 -5
  83. package/dist/components/{p-CxKXdl1J.js.map → p-DyGUXuvD.js.map} +1 -1
  84. package/dist/components/{p-CVDnYikl.js → p-S7M--xNH.js} +9 -9
  85. package/dist/components/{p-CVDnYikl.js.map → p-S7M--xNH.js.map} +1 -1
  86. package/dist/components/{p-C930Kn80.js → p-wQDv-v0B.js} +3 -3
  87. package/dist/components/{p-C930Kn80.js.map → p-wQDv-v0B.js.map} +1 -1
  88. package/dist/components/sd-badge.js +1 -1
  89. package/dist/components/sd-button.js +1 -1
  90. package/dist/components/sd-card.js +1 -1
  91. package/dist/components/sd-checkbox.js +1 -1
  92. package/dist/components/sd-date-picker.js +4 -4
  93. package/dist/components/sd-date-range-picker.js +5 -5
  94. package/dist/components/sd-guide.js +6 -6
  95. package/dist/components/sd-icon.js +1 -1
  96. package/dist/components/sd-input.js +1 -1
  97. package/dist/components/sd-loading-spinner.js +1 -1
  98. package/dist/components/sd-modal-card.js +2 -2
  99. package/dist/components/sd-pagination.js +1 -1
  100. package/dist/components/sd-popover.js +5 -5
  101. package/dist/components/sd-portal.js +1 -1
  102. package/dist/components/sd-progress.js +2 -2
  103. package/dist/components/sd-radio-group.d.ts +11 -0
  104. package/dist/components/sd-radio-group.js +99 -0
  105. package/dist/components/sd-radio-group.js.map +1 -0
  106. package/dist/components/sd-select-multiple-group.js +7 -7
  107. package/dist/components/sd-select-multiple.js +7 -7
  108. package/dist/components/sd-select-option-group.js +1 -1
  109. package/dist/components/sd-select-option.js +1 -1
  110. package/dist/components/sd-select.js +1 -1
  111. package/dist/components/sd-table-backup.js +22 -16
  112. package/dist/components/sd-table-backup.js.map +1 -1
  113. package/dist/components/sd-table.js +16 -16
  114. package/dist/components/sd-tag.js +1 -1
  115. package/dist/components/sd-tbody.js +1 -1
  116. package/dist/components/sd-td.js +2 -2
  117. package/dist/components/sd-th.js +1 -1
  118. package/dist/components/sd-toggle.d.ts +11 -0
  119. package/dist/components/sd-toggle.js +71 -0
  120. package/dist/components/sd-toggle.js.map +1 -0
  121. package/dist/components/sd-tooltip-portal.js +1 -1
  122. package/dist/components/sd-tooltip.js +1 -1
  123. package/dist/components/sd-tr.js +1 -1
  124. package/dist/design-system/design-system.esm.js +1 -1
  125. package/dist/design-system/{p-0cada447.entry.js → p-1b6aec43.entry.js} +2 -2
  126. package/dist/design-system/{p-d7fe0919.entry.js → p-1e175d35.entry.js} +2 -2
  127. package/dist/design-system/p-1efccd9d.entry.js +2 -0
  128. package/dist/design-system/{p-2285c061.entry.js → p-3d78a7c7.entry.js} +2 -2
  129. package/dist/design-system/p-4828e65b.entry.js +2 -0
  130. package/dist/design-system/p-4e7bc094.entry.js +2 -0
  131. package/dist/design-system/{p-ecb38b6a.entry.js.map → p-4e7bc094.entry.js.map} +1 -1
  132. package/dist/design-system/p-717a736c.entry.js +2 -0
  133. package/dist/design-system/p-717a736c.entry.js.map +1 -0
  134. package/dist/design-system/{p-8d1a2a13.entry.js → p-74f12ea0.entry.js} +2 -2
  135. package/dist/design-system/{p-037de6ce.entry.js → p-7d14540d.entry.js} +2 -2
  136. package/dist/design-system/{p-6f16399e.entry.js → p-8d6d225d.entry.js} +2 -2
  137. package/dist/design-system/{p-CgyTlXBV.js → p-BYf-ybt2.js} +2 -2
  138. package/dist/design-system/{p-BoLmB6pG.js.map → p-BYf-ybt2.js.map} +1 -1
  139. package/dist/design-system/{p-267985b3.entry.js → p-b0f77793.entry.js} +2 -2
  140. package/dist/design-system/p-b892a722.entry.js +2 -0
  141. package/dist/design-system/p-b892a722.entry.js.map +1 -0
  142. package/dist/design-system/p-bc905ded.entry.js +2 -0
  143. package/dist/design-system/{p-45bb29cf.entry.js → p-c7e8a2c0.entry.js} +2 -2
  144. package/dist/design-system/p-c9b70553.entry.js +2 -0
  145. package/dist/design-system/p-c9b70553.entry.js.map +1 -0
  146. package/dist/design-system/sd-badge.entry.esm.js.map +1 -1
  147. package/dist/design-system/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-radio-group.sd-select.sd-select-option.sd-table-backup.sd-toggle.sd-tooltip.sd-tooltip-portal.entry.esm.js.map +1 -0
  148. package/dist/design-system/sd-modal-card.entry.esm.js.map +1 -1
  149. package/dist/esm/design-system.js +1 -1
  150. package/dist/esm/loader.js +1 -1
  151. package/dist/{cjs/color-Oz29vj7L.js → esm/resolveColor-BYf-ybt2.js} +14 -6
  152. package/dist/esm/{resolveColor-CswQ9y2Q.js.map → resolveColor-BYf-ybt2.js.map} +1 -1
  153. package/dist/esm/sd-badge.entry.js +2 -3
  154. package/dist/esm/sd-badge.entry.js.map +1 -1
  155. package/dist/esm/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-radio-group.sd-select.sd-select-option.sd-table-backup.sd-toggle.sd-tooltip.sd-tooltip-portal.entry.js.map +1 -0
  156. package/dist/esm/{sd-button_12.entry.js → sd-button_15.entry.js} +213 -24
  157. package/dist/esm/sd-card.entry.js +1 -1
  158. package/dist/esm/sd-date-picker.entry.js +1 -1
  159. package/dist/esm/sd-date-range-picker.entry.js +2 -2
  160. package/dist/esm/sd-modal-card.entry.js +1 -2
  161. package/dist/esm/sd-modal-card.entry.js.map +1 -1
  162. package/dist/esm/sd-popover.entry.js +2 -2
  163. package/dist/esm/sd-progress.entry.js +2 -2
  164. package/dist/esm/sd-select-multiple-group.entry.js +2 -2
  165. package/dist/esm/sd-select-multiple.entry.js +2 -2
  166. package/dist/esm/sd-select-option-group.entry.js +3 -3
  167. package/dist/esm/sd-table.entry.js +3 -3
  168. package/dist/esm/sd-tag.entry.js +1 -1
  169. package/dist/esm/sd-tbody_3.entry.js +3 -3
  170. package/dist/esm/sd-td.entry.js +2 -2
  171. package/dist/types/components/sd-radio-group/sd-radio-group.d.ts +24 -0
  172. package/dist/types/components/sd-toggle/sd-toggle.d.ts +14 -0
  173. package/dist/types/components.d.ts +112 -0
  174. package/hydrate/index.js +190 -48
  175. package/hydrate/index.mjs +190 -48
  176. package/package.json +1 -1
  177. package/dist/cjs/color-Oz29vj7L.js.map +0 -1
  178. package/dist/cjs/resolveColor-CauSLF0s.js +0 -18
  179. package/dist/cjs/sd-button.sd-checkbox.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table-backup.sd-tooltip.sd-tooltip-portal.entry.cjs.js.map +0 -1
  180. package/dist/cjs/sd-guide.cjs.entry.js +0 -85
  181. package/dist/cjs/sd-guide.entry.cjs.js.map +0 -1
  182. package/dist/design-system/p-154958ba.entry.js +0 -2
  183. package/dist/design-system/p-328d7e6c.entry.js +0 -2
  184. package/dist/design-system/p-74c0eee4.entry.js +0 -2
  185. package/dist/design-system/p-74c0eee4.entry.js.map +0 -1
  186. package/dist/design-system/p-927b3333.entry.js +0 -2
  187. package/dist/design-system/p-927b3333.entry.js.map +0 -1
  188. package/dist/design-system/p-BoLmB6pG.js +0 -2
  189. package/dist/design-system/p-CgyTlXBV.js.map +0 -1
  190. package/dist/design-system/p-bea456ad.entry.js +0 -2
  191. package/dist/design-system/p-bea456ad.entry.js.map +0 -1
  192. package/dist/design-system/p-dc6681a7.entry.js +0 -2
  193. package/dist/design-system/p-dc6681a7.entry.js.map +0 -1
  194. package/dist/design-system/p-ecb38b6a.entry.js +0 -2
  195. package/dist/design-system/p-fb4d628a.entry.js +0 -2
  196. package/dist/design-system/sd-button.sd-checkbox.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table-backup.sd-tooltip.sd-tooltip-portal.entry.esm.js.map +0 -1
  197. package/dist/design-system/sd-guide.entry.esm.js.map +0 -1
  198. package/dist/esm/color-CgyTlXBV.js.map +0 -1
  199. package/dist/esm/resolveColor-CswQ9y2Q.js +0 -16
  200. package/dist/esm/sd-button.sd-checkbox.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table-backup.sd-tooltip.sd-tooltip-portal.entry.js.map +0 -1
  201. package/dist/esm/sd-guide.entry.js +0 -83
  202. package/dist/esm/sd-guide.entry.js.map +0 -1
  203. /package/dist/design-system/{p-0cada447.entry.js.map → p-1b6aec43.entry.js.map} +0 -0
  204. /package/dist/design-system/{p-d7fe0919.entry.js.map → p-1e175d35.entry.js.map} +0 -0
  205. /package/dist/design-system/{p-328d7e6c.entry.js.map → p-1efccd9d.entry.js.map} +0 -0
  206. /package/dist/design-system/{p-2285c061.entry.js.map → p-3d78a7c7.entry.js.map} +0 -0
  207. /package/dist/design-system/{p-fb4d628a.entry.js.map → p-4828e65b.entry.js.map} +0 -0
  208. /package/dist/design-system/{p-8d1a2a13.entry.js.map → p-74f12ea0.entry.js.map} +0 -0
  209. /package/dist/design-system/{p-037de6ce.entry.js.map → p-7d14540d.entry.js.map} +0 -0
  210. /package/dist/design-system/{p-6f16399e.entry.js.map → p-8d6d225d.entry.js.map} +0 -0
  211. /package/dist/design-system/{p-267985b3.entry.js.map → p-b0f77793.entry.js.map} +0 -0
  212. /package/dist/design-system/{p-154958ba.entry.js.map → p-bc905ded.entry.js.map} +0 -0
  213. /package/dist/design-system/{p-45bb29cf.entry.js.map → p-c7e8a2c0.entry.js.map} +0 -0
@@ -1,83 +0,0 @@
1
- import { r as registerInstance, a as getElement, h, H as Host } from './index-ClyGLKUd.js';
2
- import { c as colors } from './color-CgyTlXBV.js';
3
-
4
- const sdGuideCss = "@charset \"UTF-8\";sd-button{display:inline-block;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:\"\";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}sd-guide{display:inline-block;height:fit-content}sd-guide .sd-guide{display:inline-block}sd-guide .sd-guide .sd-button{padding:0 16px 0 12px;border-radius:16px;color:#333333 !important;display:flex;align-items:center;transition:none}sd-guide .sd-guide .sd-button .sd-button__content{color:#333333 !important}sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label{color:#333333 !important;margin-left:4px}sd-guide .sd-guide--active .sd-button{border:1px solid #12b553}sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label{color:white !important}.sd-guide__popup{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:\"-\";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2::before{content:\"•\"}.sd-guide__popup__list__item--depth-2{padding-left:26px}";
5
-
6
- const GUIDE_LABEL = {
7
- help: '활용 TIP',
8
- pdf: 'PDF Guide',
9
- youtube: 'Video Guide',
10
- notion: '사용법 안내',
11
- event: 'Event Button',
12
- };
13
- const GUIDE_ICON = {
14
- help: {
15
- name: 'helpOutline',
16
- size: 20,
17
- color: colors.green_70,
18
- },
19
- pdf: { name: 'pdf', size: 20, color: colors.red_75 },
20
- youtube: { name: 'youtube', size: 20, color: colors.red_75 },
21
- notion: { name: 'notion', size: 16, color: colors.black },
22
- event: { name: 'event', size: 16, color: colors.brilliantblue_70 },
23
- };
24
- const SdGuide = class {
25
- constructor(hostRef) {
26
- registerInstance(this, hostRef);
27
- }
28
- get el() { return getElement(this); }
29
- type = 'help';
30
- label = '';
31
- message = '';
32
- guideUrl = '';
33
- popupTitle = '';
34
- popupWidth;
35
- popupShow = false;
36
- guideRef;
37
- handleClickGuide = () => {
38
- if (this.type === 'help') {
39
- this.popupShow = !this.popupShow;
40
- return;
41
- }
42
- if (this.guideUrl) {
43
- window.open(this.guideUrl, '_blank');
44
- }
45
- };
46
- get guideClass() {
47
- const classes = ['sd-guide', `sd-guide--${this.type}`];
48
- if (this.popupShow)
49
- classes.push('sd-guide--active');
50
- return classes.join(' ');
51
- }
52
- closeDropdown = () => {
53
- this.popupShow = false;
54
- };
55
- render() {
56
- const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
57
- return (h(Host, { key: 'd9bf823d000e8181c61798d9656c428c4a3cd6b6', style: {
58
- '--sd-guide-color': GUIDE_ICON[this.type].color,
59
- } }, h("sd-button", { key: 'fd25039c644bdd6e802624f2cbef3bfb4d797220', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '3bb296fa9a9419534af30fe3d2e2dd1bffe2aa53', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '2aacb47b2acedceb9114737da8d061022fea27a8', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'd4e3a1b49d15782a2b4cc50d6ebfc62ca19da555', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
60
- // buttonStyle={{ padding: '0px', minHeight: '0px' }}
61
- onSdClick: this.closeDropdown }), h("div", { key: 'ca5d8332066af0bac3083443488c3ebe5c064931', class: "sd-guide__popup__header" }, h("sd-icon", { key: '752a3ea8dde595e459b0681b317486c3896aa71f', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: '52d5bdae6b82d9aabbf8dc98c2f05379fb8ffe7d', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '07fe0fe4f2b9831721e95f318dfcd818ee11a415', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
62
- }
63
- // 현재 2depth까지만 스타일 적용
64
- renderListItem(message, depth = 0) {
65
- const listItems = [];
66
- if (Array.isArray(message)) {
67
- const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));
68
- listItems.push(...depthMsg.flat());
69
- }
70
- else {
71
- listItems.push(this.renderLi(message, depth));
72
- }
73
- return listItems;
74
- }
75
- renderLi = (message, depth) => {
76
- const listContent = message.replace(/ /gi, ' ');
77
- return (h("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, h("p", { innerHTML: listContent })));
78
- };
79
- };
80
- SdGuide.style = sdGuideCss;
81
-
82
- export { SdGuide as sd_guide };
83
- //# sourceMappingURL=sd-guide.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"sd-guide.entry.js","sources":["src/components/sd-guide/sd-guide.scss?tag=sd-guide","src/components/sd-guide/sd-guide.tsx"],"sourcesContent":["@import '../sd-button/sd-button.scss';\r\n\r\nsd-guide {\r\n display: inline-block;\r\n height: fit-content;\r\n .sd-guide {\r\n display: inline-block;\r\n .sd-button {\r\n padding: 0 16px 0 12px;\r\n border-radius: 16px;\r\n color: $grey_90 !important;\r\n display: flex;\r\n align-items: center;\r\n transition: none;\r\n\r\n .sd-button__content {\r\n color: $grey_90 !important;\r\n\r\n .sd-button__label {\r\n color: $grey_90 !important;\r\n margin-left: 4px;\r\n }\r\n }\r\n }\r\n\r\n &--active {\r\n .sd-button {\r\n border: 1px solid $green_70;\r\n .sd-button__content {\r\n .sd-button__label {\r\n color: white !important;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.sd-guide__popup {\r\n position: relative;\r\n padding: 20px 32px;\r\n border-radius: 8px;\r\n box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.1);\r\n background: white;\r\n\r\n > .sd-guide__popup__close {\r\n position: absolute;\r\n top: 12px;\r\n right: 12px;\r\n }\r\n\r\n &__header {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-bottom: 12px;\r\n\r\n .sd-guide__popup__title {\r\n margin-top: 0;\r\n font-size: 16px;\r\n font-weight: 700;\r\n line-height: 26px;\r\n color: $grey_90;\r\n }\r\n }\r\n\r\n &__list {\r\n width: 100%;\r\n padding: 0;\r\n margin: 0;\r\n\r\n &__item {\r\n display: flex;\r\n width: 100%;\r\n align-items: start;\r\n list-style: none;\r\n color: $grey_90;\r\n font-size: 12px;\r\n font-weight: 400;\r\n\r\n p {\r\n width: 100%;\r\n padding: 0;\r\n margin: 0;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n white-space: normal;\r\n overflow-wrap: break-word;\r\n min-width: 0;\r\n }\r\n\r\n &::before {\r\n display: block;\r\n content: '-';\r\n width: 6px;\r\n color: $grey_90;\r\n font-size: 12px;\r\n font-weight: 400;\r\n margin-left: 10px;\r\n margin-right: 12px;\r\n flex-shrink: 0;\r\n }\r\n\r\n &--depth-2 {\r\n &::before {\r\n content: '•';\r\n }\r\n padding-left: 26px;\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\r\nimport colors from '../../styles/color.json';\r\n\r\ntype GuideType = 'help' | 'pdf' | 'youtube' | 'notion' | 'event';\r\n\r\nconst GUIDE_LABEL = {\r\n help: '활용 TIP',\r\n pdf: 'PDF Guide',\r\n youtube: 'Video Guide',\r\n notion: '사용법 안내',\r\n event: 'Event Button',\r\n};\r\n\r\nconst GUIDE_ICON = {\r\n help: {\r\n name: 'helpOutline',\r\n size: 20,\r\n color: colors.green_70,\r\n },\r\n pdf: { name: 'pdf', size: 20, color: colors.red_75 },\r\n youtube: { name: 'youtube', size: 20, color: colors.red_75 },\r\n notion: { name: 'notion', size: 16, color: colors.black },\r\n event: { name: 'event', size: 16, color: colors.brilliantblue_70 },\r\n} as const;\r\n\r\n@Component({\r\n tag: 'sd-guide',\r\n styleUrl: 'sd-guide.scss',\r\n})\r\nexport class SdGuide {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() type: GuideType = 'help';\r\n @Prop() label: string = '';\r\n @Prop() message: string | string[] = '';\r\n @Prop() guideUrl: string = '';\r\n @Prop() popupTitle: string = '';\r\n @Prop() popupWidth?: number;\r\n\r\n @State() popupShow: boolean = false;\r\n\r\n private guideRef?: HTMLElement;\r\n\r\n private handleClickGuide = () => {\r\n if (this.type === 'help') {\r\n this.popupShow = !this.popupShow;\r\n return;\r\n }\r\n\r\n if (this.guideUrl) {\r\n window.open(this.guideUrl, '_blank');\r\n }\r\n };\r\n\r\n private get guideClass(): string {\r\n const classes = ['sd-guide', `sd-guide--${this.type}`];\r\n\r\n if (this.popupShow) classes.push('sd-guide--active');\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n closeDropdown = () => {\r\n this.popupShow = false;\r\n };\r\n\r\n render() {\r\n const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];\r\n\r\n return (\r\n <Host\r\n style={{\r\n '--sd-guide-color': GUIDE_ICON[this.type].color,\r\n }}\r\n >\r\n <sd-button\r\n ref={el => (this.guideRef = el as unknown as HTMLElement)}\r\n class={this.guideClass}\r\n variant={this.popupShow ? 'primary' : 'outline'}\r\n label={this.label || GUIDE_LABEL[this.type]}\r\n size=\"sm\"\r\n color={this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45'}\r\n icon={iconName}\r\n iconColor={this.popupShow ? 'white' : iconColor}\r\n iconSize={iconSize}\r\n noHover={this.popupShow}\r\n onSdClick={this.handleClickGuide}\r\n />\r\n {this.type === 'help' && this.popupShow && (\r\n <sd-portal\r\n open={this.popupShow}\r\n parentRef={this.guideRef}\r\n onSdClose={this.closeDropdown}\r\n offset={[0, 4]}\r\n >\r\n <div\r\n class=\"sd-guide__popup\"\r\n style={{ width: this.popupWidth ? this.popupWidth + 'px' : '426px' } as any}\r\n >\r\n <sd-button\r\n class=\"sd-guide__popup__close\"\r\n icon=\"close\"\r\n color={colors.grey_65}\r\n size=\"md\"\r\n variant=\"ghost\"\r\n noHover\r\n // buttonStyle={{ padding: '0px', minHeight: '0px' }}\r\n onSdClick={this.closeDropdown}\r\n />\r\n <div class=\"sd-guide__popup__header\">\r\n <sd-icon name=\"helpOutline\" size={24} color={colors.green_65} />\r\n <h3 class=\"sd-guide__popup__title\">{this.popupTitle || GUIDE_LABEL[this.type]}</h3>\r\n </div>\r\n <ul class=\"sd-guide__popup__list\">{this.renderListItem(this.message)}</ul>\r\n </div>\r\n </sd-portal>\r\n )}\r\n </Host>\r\n );\r\n }\r\n\r\n // 현재 2depth까지만 스타일 적용\r\n renderListItem(message: string | string[], depth: number = 0): HTMLElement[] {\r\n const listItems: HTMLElement[] = [];\r\n\r\n if (Array.isArray(message)) {\r\n const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));\r\n listItems.push(...depthMsg.flat());\r\n } else {\r\n listItems.push(this.renderLi(message, depth));\r\n }\r\n\r\n return listItems;\r\n }\r\n\r\n renderLi = (message: string, depth: number) => {\r\n const listContent = message.replace(/ /gi, '&nbsp;');\r\n return (\r\n <li class={`sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}`}>\r\n <p innerHTML={listContent}></p>\r\n </li>\r\n );\r\n };\r\n}\r\n\r\n// <sd-guide id=\"sd-guide-1\"></sd-guide>\r\n// <sd-guide id=\"sd-guide-2\" type=\"pdf\"></sd-guide>\r\n// <sd-guide id=\"sd-guide-3\" type=\"youtube\"></sd-guide>\r\n// <sd-guide id=\"sd-guide-4\" type=\"notion\"></sd-guide>\r\n// <sd-guide id=\"sd-guide-5\" type=\"event\"></sd-guide>\r\n"],"names":[],"mappings":"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"}