@sellmate/design-system 0.0.24 → 0.0.26

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 (231) hide show
  1. package/dist/cjs/design-system.cjs.js +2 -2
  2. package/dist/cjs/{index-BjPOPvqs.js → index-DXo1Fhkn.js} +3 -3
  3. package/dist/cjs/index-DXo1Fhkn.js.map +1 -0
  4. package/dist/cjs/loader.cjs.js +2 -2
  5. package/dist/{esm/color-CgyTlXBV.js → cjs/resolveColor-DxvExwgo.js} +17 -4
  6. package/dist/{esm/resolveColor-CswQ9y2Q.js.map → cjs/resolveColor-DxvExwgo.js.map} +1 -1
  7. package/dist/cjs/sd-badge.cjs.entry.js +3 -4
  8. package/dist/cjs/sd-badge.entry.cjs.js.map +1 -1
  9. package/dist/cjs/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tooltip.sd-tooltip-portal.entry.cjs.js.map +1 -0
  10. package/dist/cjs/{sd-checkbox_9.cjs.entry.js → sd-button_12.cjs.entry.js} +739 -817
  11. package/dist/cjs/sd-card.cjs.entry.js +2 -2
  12. package/dist/cjs/sd-date-box.cjs.entry.js +1 -1
  13. package/dist/cjs/sd-date-picker.cjs.entry.js +3 -3
  14. package/dist/cjs/sd-date-range-picker.cjs.entry.js +3 -3
  15. package/dist/cjs/sd-popover.cjs.entry.js +4 -4
  16. package/dist/cjs/sd-select-multiple-group.cjs.entry.js +380 -0
  17. package/dist/cjs/sd-select-multiple-group.entry.cjs.js.map +1 -0
  18. package/dist/cjs/sd-select-multiple.cjs.entry.js +263 -0
  19. package/dist/cjs/sd-select-multiple.entry.cjs.js.map +1 -0
  20. package/dist/cjs/sd-select-option-group.cjs.entry.js +69 -0
  21. package/dist/cjs/sd-select-option-group.entry.cjs.js.map +1 -0
  22. package/dist/cjs/sd-tag.cjs.entry.js +2 -2
  23. package/dist/cjs/select-keyboard-navigation-6fO_V4En.js +119 -0
  24. package/dist/cjs/select-keyboard-navigation-6fO_V4En.js.map +1 -0
  25. package/dist/cjs/{tooltipArrow-qwvq153k.js → tooltipArrow-DNiGFQNW.js} +3 -3
  26. package/dist/cjs/{tooltipArrow-qwvq153k.js.map → tooltipArrow-DNiGFQNW.js.map} +1 -1
  27. package/dist/collection/components/sd-badge/sd-badge.js +1 -1
  28. package/dist/collection/components/sd-card/sd-card.js +1 -1
  29. package/dist/collection/components/sd-date-picker/sd-date-picker.js +2 -2
  30. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +2 -2
  31. package/dist/collection/components/sd-guide/sd-guide.css +6 -1
  32. package/dist/collection/components/sd-guide/sd-guide.js +4 -4
  33. package/dist/collection/components/sd-guide/sd-guide.js.map +1 -1
  34. package/dist/collection/components/sd-icon/sd-icon.js +1 -1
  35. package/dist/collection/components/sd-input/sd-input.js +2 -2
  36. package/dist/collection/components/sd-pagination/sd-pagination.js +2 -3
  37. package/dist/collection/components/sd-pagination/sd-pagination.js.map +1 -1
  38. package/dist/collection/components/sd-popover/sd-popover.js +2 -2
  39. package/dist/collection/components/sd-portal/sd-portal.js +25 -4
  40. package/dist/collection/components/sd-portal/sd-portal.js.map +1 -1
  41. package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +1 -1
  42. package/dist/collection/components/sd-select/sd-select.css +0 -6
  43. package/dist/collection/components/sd-select-multiple/sd-select-multiple.css +0 -6
  44. package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +2 -2
  45. package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.css +0 -6
  46. package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +3 -3
  47. package/dist/collection/components/sd-table/sd-table.css +7 -1316
  48. package/dist/collection/components/sd-table/sd-table.js +70 -5
  49. package/dist/collection/components/sd-table/sd-table.js.map +1 -1
  50. package/dist/collection/components/sd-tag/sd-tag.js +1 -1
  51. package/dist/collection/components/sd-tooltip/sd-tooltip.css +67 -1
  52. package/dist/collection/components/sd-tooltip/sd-tooltip.js +4 -5
  53. package/dist/collection/components/sd-tooltip/sd-tooltip.js.map +1 -1
  54. package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js +1 -1
  55. package/dist/components/index.js +1 -1
  56. package/dist/components/{p-Bl-wgv-z.js → p-B9QE7fbR.js} +6 -6
  57. package/dist/components/{p-Bl-wgv-z.js.map → p-B9QE7fbR.js.map} +1 -1
  58. package/dist/components/{p-CZG8wDBH.js → p-BWF8FOjZ.js} +4 -4
  59. package/dist/components/{p-CZG8wDBH.js.map → p-BWF8FOjZ.js.map} +1 -1
  60. package/dist/components/{p-Cxrr7vOk.js → p-BhRUodRD.js} +13 -14
  61. package/dist/components/p-BhRUodRD.js.map +1 -0
  62. package/dist/components/{p-nehvpX7w.js → p-BtS3tSh2.js} +4 -4
  63. package/dist/components/{p-nehvpX7w.js.map → p-BtS3tSh2.js.map} +1 -1
  64. package/dist/components/{p-DpiRZxT1.js → p-BttJlXkp.js} +6 -6
  65. package/dist/components/{p-DpiRZxT1.js.map → p-BttJlXkp.js.map} +1 -1
  66. package/dist/components/{p-Bfro0I6y.js → p-BvuTaRpn.js} +3 -3
  67. package/dist/components/{p-Bfro0I6y.js.map → p-BvuTaRpn.js.map} +1 -1
  68. package/dist/components/{p-DNUN6dGL.js → p-CMFEznYN.js} +7 -8
  69. package/dist/components/p-CMFEznYN.js.map +1 -0
  70. package/dist/components/{p-e74imoE0.js → p-Cafw-qR4.js} +3 -3
  71. package/dist/components/{p-e74imoE0.js.map → p-Cafw-qR4.js.map} +1 -1
  72. package/dist/components/{p-DzRr3BEe.js → p-CbnL1UUF.js} +3 -3
  73. package/dist/components/p-CbnL1UUF.js.map +1 -0
  74. package/dist/components/p-CkHD07WH.js +323 -0
  75. package/dist/components/p-CkHD07WH.js.map +1 -0
  76. package/dist/components/{p-BqIcTSCQ.js → p-Cs1Kf3Tx.js} +4 -4
  77. package/dist/components/{p-BqIcTSCQ.js.map → p-Cs1Kf3Tx.js.map} +1 -1
  78. package/dist/components/{p-aU8C4Pcb.js → p-DWYqZdbI.js} +8 -8
  79. package/dist/components/{p-aU8C4Pcb.js.map → p-DWYqZdbI.js.map} +1 -1
  80. package/dist/components/{p-CbTvFUCY.js → p-DtOWZESA.js} +28 -7
  81. package/dist/components/p-DtOWZESA.js.map +1 -0
  82. package/dist/components/{p-QBJzxOWs.js → p-hf6YF2Mx.js} +4 -4
  83. package/dist/components/{p-QBJzxOWs.js.map → p-hf6YF2Mx.js.map} +1 -1
  84. package/dist/components/{p-BvOGkIDI.js → p-wA4KCOG0.js} +3 -3
  85. package/dist/components/{p-BvOGkIDI.js.map → p-wA4KCOG0.js.map} +1 -1
  86. package/dist/components/sd-badge.js +2 -2
  87. package/dist/components/sd-button.js +1 -1
  88. package/dist/components/sd-card.js +2 -2
  89. package/dist/components/sd-checkbox.js +1 -1
  90. package/dist/components/sd-date-box.js +1 -1
  91. package/dist/components/sd-date-picker.js +7 -7
  92. package/dist/components/sd-date-range-picker.js +7 -7
  93. package/dist/components/sd-guide.js +9 -9
  94. package/dist/components/sd-guide.js.map +1 -1
  95. package/dist/components/sd-icon.js +1 -1
  96. package/dist/components/sd-input.js +1 -1
  97. package/dist/components/sd-pagination.js +1 -1
  98. package/dist/components/sd-popover.js +7 -7
  99. package/dist/components/sd-portal.js +1 -1
  100. package/dist/components/sd-select-multiple-group.js +8 -8
  101. package/dist/components/sd-select-multiple-group.js.map +1 -1
  102. package/dist/components/sd-select-multiple.js +10 -10
  103. package/dist/components/sd-select-multiple.js.map +1 -1
  104. package/dist/components/sd-select-option-group.js +1 -1
  105. package/dist/components/sd-select-option.js +1 -1
  106. package/dist/components/sd-select.js +1 -318
  107. package/dist/components/sd-select.js.map +1 -1
  108. package/dist/components/sd-table.js +64 -17
  109. package/dist/components/sd-table.js.map +1 -1
  110. package/dist/components/sd-tag.js +2 -2
  111. package/dist/components/sd-tooltip-portal.js +1 -1
  112. package/dist/components/sd-tooltip.js +1 -1
  113. package/dist/design-system/design-system.css +1 -1
  114. package/dist/design-system/design-system.esm.js +1 -1
  115. package/dist/design-system/p-054ae376.entry.js +2 -0
  116. package/dist/design-system/p-054ae376.entry.js.map +1 -0
  117. package/dist/design-system/{p-b537f724.entry.js → p-12134716.entry.js} +2 -2
  118. package/dist/design-system/p-12b6c1a5.entry.js +2 -0
  119. package/dist/design-system/p-12b6c1a5.entry.js.map +1 -0
  120. package/dist/design-system/p-3d9fccae.entry.js +2 -0
  121. package/dist/design-system/p-3d9fccae.entry.js.map +1 -0
  122. package/dist/design-system/{p-691dc436.entry.js → p-871c8d66.entry.js} +2 -2
  123. package/dist/design-system/p-9975f6f3.entry.js +2 -0
  124. package/dist/design-system/p-9975f6f3.entry.js.map +1 -0
  125. package/dist/design-system/{p-CqOU6L62.js → p-B2T3tS5r.js} +3 -3
  126. package/dist/design-system/p-B2T3tS5r.js.map +1 -0
  127. package/dist/design-system/p-BE6EMCXm.js +2 -0
  128. package/dist/design-system/{p-BUzABVug.js.map → p-BE6EMCXm.js.map} +1 -1
  129. package/dist/design-system/{p-CgyTlXBV.js → p-BYf-ybt2.js} +2 -2
  130. package/dist/design-system/{p-BoLmB6pG.js.map → p-BYf-ybt2.js.map} +1 -1
  131. package/dist/design-system/p-C2JaR3A6.js +2 -0
  132. package/dist/design-system/p-C2JaR3A6.js.map +1 -0
  133. package/dist/design-system/{p-2aef624e.entry.js → p-a7ab1b43.entry.js} +2 -2
  134. package/dist/design-system/p-af3a1dbb.entry.js +2 -0
  135. package/dist/design-system/p-d1aa75e7.entry.js +2 -0
  136. package/dist/design-system/p-e061c4f8.entry.js +2 -0
  137. package/dist/design-system/p-e061c4f8.entry.js.map +1 -0
  138. package/dist/design-system/{p-c4f5ed94.entry.js → p-e25d96e4.entry.js} +2 -2
  139. package/dist/design-system/sd-badge.entry.esm.js.map +1 -1
  140. package/dist/design-system/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tooltip.sd-tooltip-portal.entry.esm.js.map +1 -0
  141. package/dist/design-system/sd-select-multiple-group.entry.esm.js.map +1 -0
  142. package/dist/design-system/sd-select-multiple.entry.esm.js.map +1 -0
  143. package/dist/design-system/sd-select-option-group.entry.esm.js.map +1 -0
  144. package/dist/esm/design-system.js +3 -3
  145. package/dist/esm/{index-CqOU6L62.js → index-B2T3tS5r.js} +3 -3
  146. package/dist/esm/index-B2T3tS5r.js.map +1 -0
  147. package/dist/esm/loader.js +3 -3
  148. package/dist/{cjs/color-Oz29vj7L.js → esm/resolveColor-BYf-ybt2.js} +14 -6
  149. package/dist/{cjs/resolveColor-CauSLF0s.js.map → esm/resolveColor-BYf-ybt2.js.map} +1 -1
  150. package/dist/esm/sd-badge.entry.js +3 -4
  151. package/dist/esm/sd-badge.entry.js.map +1 -1
  152. package/dist/esm/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tooltip.sd-tooltip-portal.entry.js.map +1 -0
  153. package/dist/esm/{sd-checkbox_9.entry.js → sd-button_12.entry.js} +732 -813
  154. package/dist/esm/sd-card.entry.js +2 -2
  155. package/dist/esm/sd-date-box.entry.js +1 -1
  156. package/dist/esm/sd-date-picker.entry.js +3 -3
  157. package/dist/esm/sd-date-range-picker.entry.js +3 -3
  158. package/dist/esm/sd-popover.entry.js +4 -4
  159. package/dist/esm/sd-select-multiple-group.entry.js +378 -0
  160. package/dist/esm/sd-select-multiple-group.entry.js.map +1 -0
  161. package/dist/esm/sd-select-multiple.entry.js +261 -0
  162. package/dist/esm/sd-select-multiple.entry.js.map +1 -0
  163. package/dist/esm/sd-select-option-group.entry.js +67 -0
  164. package/dist/esm/sd-select-option-group.entry.js.map +1 -0
  165. package/dist/esm/sd-tag.entry.js +2 -2
  166. package/dist/esm/select-keyboard-navigation-C2JaR3A6.js +116 -0
  167. package/dist/esm/select-keyboard-navigation-C2JaR3A6.js.map +1 -0
  168. package/dist/esm/{tooltipArrow-hOEWkZyH.js → tooltipArrow-Pa2XQhpp.js} +3 -3
  169. package/dist/esm/{tooltipArrow-hOEWkZyH.js.map → tooltipArrow-Pa2XQhpp.js.map} +1 -1
  170. package/dist/types/components/sd-table/sd-table.d.ts +3 -0
  171. package/dist/types/components.d.ts +16 -0
  172. package/hydrate/index.js +90 -46
  173. package/hydrate/index.mjs +90 -46
  174. package/package.json +2 -2
  175. package/dist/cjs/color-Oz29vj7L.js.map +0 -1
  176. package/dist/cjs/index-BjPOPvqs.js.map +0 -1
  177. package/dist/cjs/resolveColor-CauSLF0s.js +0 -18
  178. package/dist/cjs/sd-button.sd-tooltip-portal.entry.cjs.js.map +0 -1
  179. package/dist/cjs/sd-button_2.cjs.entry.js +0 -221
  180. package/dist/cjs/sd-checkbox.sd-icon.sd-input.sd-portal.sd-select.sd-select-multiple.sd-select-multiple-group.sd-select-option.sd-select-option-group.entry.cjs.js.map +0 -1
  181. package/dist/cjs/sd-guide.cjs.entry.js +0 -84
  182. package/dist/cjs/sd-guide.entry.cjs.js.map +0 -1
  183. package/dist/cjs/sd-pagination.sd-tooltip.entry.cjs.js.map +0 -1
  184. package/dist/cjs/sd-pagination_2.cjs.entry.js +0 -168
  185. package/dist/cjs/sd-table.cjs.entry.js +0 -237
  186. package/dist/cjs/sd-table.entry.cjs.js.map +0 -1
  187. package/dist/components/p-CbTvFUCY.js.map +0 -1
  188. package/dist/components/p-Cxrr7vOk.js.map +0 -1
  189. package/dist/components/p-DNUN6dGL.js.map +0 -1
  190. package/dist/components/p-DzRr3BEe.js.map +0 -1
  191. package/dist/design-system/p-158f9392.entry.js +0 -2
  192. package/dist/design-system/p-158f9392.entry.js.map +0 -1
  193. package/dist/design-system/p-37042d15.entry.js +0 -2
  194. package/dist/design-system/p-37042d15.entry.js.map +0 -1
  195. package/dist/design-system/p-949de8eb.entry.js +0 -2
  196. package/dist/design-system/p-949de8eb.entry.js.map +0 -1
  197. package/dist/design-system/p-9f5eed30.entry.js +0 -2
  198. package/dist/design-system/p-BUzABVug.js +0 -2
  199. package/dist/design-system/p-BoLmB6pG.js +0 -2
  200. package/dist/design-system/p-CgyTlXBV.js.map +0 -1
  201. package/dist/design-system/p-CqOU6L62.js.map +0 -1
  202. package/dist/design-system/p-adee3154.entry.js +0 -2
  203. package/dist/design-system/p-adee3154.entry.js.map +0 -1
  204. package/dist/design-system/p-bda05b6f.entry.js +0 -2
  205. package/dist/design-system/p-bda05b6f.entry.js.map +0 -1
  206. package/dist/design-system/p-f015c024.entry.js +0 -2
  207. package/dist/design-system/p-f6a1ff99.entry.js +0 -2
  208. package/dist/design-system/p-f6a1ff99.entry.js.map +0 -1
  209. package/dist/design-system/sd-button.sd-tooltip-portal.entry.esm.js.map +0 -1
  210. package/dist/design-system/sd-checkbox.sd-icon.sd-input.sd-portal.sd-select.sd-select-multiple.sd-select-multiple-group.sd-select-option.sd-select-option-group.entry.esm.js.map +0 -1
  211. package/dist/design-system/sd-guide.entry.esm.js.map +0 -1
  212. package/dist/design-system/sd-pagination.sd-tooltip.entry.esm.js.map +0 -1
  213. package/dist/design-system/sd-table.entry.esm.js.map +0 -1
  214. package/dist/esm/color-CgyTlXBV.js.map +0 -1
  215. package/dist/esm/index-CqOU6L62.js.map +0 -1
  216. package/dist/esm/resolveColor-CswQ9y2Q.js +0 -16
  217. package/dist/esm/sd-button.sd-tooltip-portal.entry.js.map +0 -1
  218. package/dist/esm/sd-button_2.entry.js +0 -218
  219. package/dist/esm/sd-checkbox.sd-icon.sd-input.sd-portal.sd-select.sd-select-multiple.sd-select-multiple-group.sd-select-option.sd-select-option-group.entry.js.map +0 -1
  220. package/dist/esm/sd-guide.entry.js +0 -82
  221. package/dist/esm/sd-guide.entry.js.map +0 -1
  222. package/dist/esm/sd-pagination.sd-tooltip.entry.js.map +0 -1
  223. package/dist/esm/sd-pagination_2.entry.js +0 -165
  224. package/dist/esm/sd-table.entry.js +0 -235
  225. package/dist/esm/sd-table.entry.js.map +0 -1
  226. /package/dist/design-system/{p-b537f724.entry.js.map → p-12134716.entry.js.map} +0 -0
  227. /package/dist/design-system/{p-691dc436.entry.js.map → p-871c8d66.entry.js.map} +0 -0
  228. /package/dist/design-system/{p-2aef624e.entry.js.map → p-a7ab1b43.entry.js.map} +0 -0
  229. /package/dist/design-system/{p-f015c024.entry.js.map → p-af3a1dbb.entry.js.map} +0 -0
  230. /package/dist/design-system/{p-9f5eed30.entry.js.map → p-d1aa75e7.entry.js.map} +0 -0
  231. /package/dist/design-system/{p-c4f5ed94.entry.js.map → p-e25d96e4.entry.js.map} +0 -0
@@ -1,10 +1,10 @@
1
- import { p as proxyCustomElement, H, h, F as Fragment } from './p-DzRr3BEe.js';
2
- import { T as TooltipArrow } from './p-BvOGkIDI.js';
3
- import { d as defineCustomElement$3 } from './p-QBJzxOWs.js';
4
- import { d as defineCustomElement$2 } from './p-nehvpX7w.js';
5
- import { d as defineCustomElement$1 } from './p-BqIcTSCQ.js';
1
+ import { p as proxyCustomElement, H, h, F as Fragment } from './p-CbnL1UUF.js';
2
+ import { T as TooltipArrow } from './p-wA4KCOG0.js';
3
+ import { d as defineCustomElement$3 } from './p-hf6YF2Mx.js';
4
+ import { d as defineCustomElement$2 } from './p-BtS3tSh2.js';
5
+ import { d as defineCustomElement$1 } from './p-Cs1Kf3Tx.js';
6
6
 
7
- const sdTooltipCss = ".sd-tooltip{position:relative;cursor:pointer;display:inline-block}";
7
+ const sdTooltipCss = "sd-tooltip [slot=content]{display:none}sd-tooltip .sd-tooltip{position:relative;cursor:pointer;display:inline-block}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__content p{margin:0}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}";
8
8
 
9
9
  const SdTooltip = /*@__PURE__*/ proxyCustomElement(class SdTooltip extends H {
10
10
  constructor(registerHost) {
@@ -12,7 +12,6 @@ const SdTooltip = /*@__PURE__*/ proxyCustomElement(class SdTooltip extends H {
12
12
  if (registerHost !== false) {
13
13
  this.__registerHost();
14
14
  }
15
- this.__attachShadow();
16
15
  }
17
16
  get el() { return this; }
18
17
  trigger = 'hover';
@@ -56,23 +55,23 @@ const SdTooltip = /*@__PURE__*/ proxyCustomElement(class SdTooltip extends H {
56
55
  : {
57
56
  onClick: () => (this.showTooltip = !this.showTooltip),
58
57
  };
59
- return (h(Fragment, { key: '820aa8d0581cb29f16f314e788b522caebdbdcf1' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '9559af4cd1fff88704c56eba7bdd58d5faf98e86', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '115eea727a7932ce9e83a13a9191b414dd907f86', class: {
58
+ return (h(Fragment, { key: 'da480a55495b1311368ae55ef8827a54ea5de766' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '74be36575fbf97c9b51577fa5b24a4fbcfcf4c6b', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '63707a51fcc66a3a0c91fc7d409d30f61c0b1f17', class: {
60
59
  'sd-tooltip-menu': true,
61
60
  [`sd-tooltip-menu--${this.type}`]: true,
62
61
  [`sd-tooltip-menu--${this.placement}`]: true,
63
62
  'sd-tooltip-menu--with-close': this.useClose,
64
63
  [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
65
64
  [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
66
- } }, h("i", { key: 'fbc22ba22a33f73a1bb8d90cebd0a1564f92dc6f', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '31dd8e255ef1cfadca9ac585d3d1e2eaf0406264', class: {
65
+ } }, h("i", { key: 'a2c557e1457c293ef4a6fb3e23a70c9ff5b0b027', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '7e7e471bb288680875fbbaa1d7b7df34b636c76f', class: {
67
66
  [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
68
- } })), h("div", { key: '0d6390cb656a6ee25c11d91f0334911346d3f1a8', class: "sd-tooltip-menu__content", ref: el => {
67
+ } })), h("div", { key: 'c7f7a093907053c100fdb5f247d09d984f8cddd8', class: "sd-tooltip-menu__content", ref: el => {
69
68
  if (el && this.slotContent && !el.hasChildNodes()) {
70
69
  el.appendChild(this.slotContent.cloneNode(true));
71
70
  }
72
- } }, !this.slotContent && h("span", { key: '6a8ec7550e4c27c4a537bff66786782b34c5d05b' }, this.el.textContent)), this.useClose && (h("div", { key: '7e23537bf912b27cea2e995e170b9bb16de0b4e6', class: "sd-tooltip-menu__close-button" }, h("button", { key: 'abdc42f2dd4648b34db65650a4e6586f7170ab69', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: '58d9c812b8abe440af11f1e259c4354c190dcdbe', name: "close", size: "12", color: "#AAAAAA" })))))))));
71
+ } }, !this.slotContent && h("span", { key: '14925b4653ca984bd6adf99f6297713dc8b2bafa' }, this.el.textContent)), this.useClose && (h("div", { key: '1a02cee06eaaf9068396fb0b489c93e23ba5c8b7', class: "sd-tooltip-menu__close-button" }, h("button", { key: '40973df40b2ec2ab887a47c7f3e466f6cae4e69f', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: 'a02e35f80ae7d3c1414577ce253a67d6dfd64bc0', name: "close", size: "12", color: "#AAAAAA" })))))))));
73
72
  }
74
73
  static get style() { return sdTooltipCss; }
75
- }, [769, "sd-tooltip", {
74
+ }, [768, "sd-tooltip", {
76
75
  "trigger": [1],
77
76
  "placement": [1],
78
77
  "color": [1],
@@ -117,6 +116,6 @@ function defineCustomElement() {
117
116
  }
118
117
 
119
118
  export { SdTooltip as S, defineCustomElement as d };
120
- //# sourceMappingURL=p-Cxrr7vOk.js.map
119
+ //# sourceMappingURL=p-BhRUodRD.js.map
121
120
 
122
- //# sourceMappingURL=p-Cxrr7vOk.js.map
121
+ //# sourceMappingURL=p-BhRUodRD.js.map
@@ -0,0 +1 @@
1
+ {"file":"p-BhRUodRD.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,6kCAA6kC;;MCSrlC,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;;;;;;;;IAGb,OAAO,GAAsB,OAAO;IACpC,SAAS,GAAwC,KAAK;IACtD,KAAK,GAAW,SAAS;IACzB,IAAI,GAAgD,SAAS;IAE7D,IAAI,GAAa,aAAa;IAC9B,QAAQ,GAAW,EAAE;IAErB,KAAK,GAAW,EAAE;IAClB,UAAU,GAAe,IAAI;IAC7B,aAAa,GAAkB,SAAS;IAExC,OAAO,GAAY,IAAI;IAEvB,QAAQ,GAAY,KAAK;IAExB,WAAW,GAAY,KAAK;IAC5B,WAAW,GAAuB,IAAI;IAEvC,OAAgB,aAAa,GAAG;QACvC,OAAO,EAAE,EAAE,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,OAAO,EAAE;QACtD,OAAO,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;QACjD,MAAM,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE;QACtD,MAAM,EAAE,EAAE,UAAU,EAAE,kBAAkB,EAAE,IAAI,EAAE,kBAAkB,EAAE;KACpE;AAEO,IAAA,QAAQ;IAER,WAAW,GAAG,MAAK;AAC1B,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;AACzB,KAAC;;;;IAKD,iBAAiB,GAAA;QAChB,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC;QAC3D,IAAI,SAAS,EAAE;YACd,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC,SAAS,CAAC,IAAI,CAAgB;;;IAI7D,MAAM,GAAA;AACL,QAAA,MAAM,aAAa,GAClB,IAAI,CAAC,OAAO,KAAK;AAChB,cAAE;gBACC,YAAY,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBAC7C,YAAY,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;AAC9C;AACH,cAAE;AACC,gBAAA,OAAO,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;aACrD;AAEL,QAAA,QACC,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,IAAI,CAAC,KAAK,IACV,CAAA,CAAA,WAAA,EAAA,EACC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,KAAK,EAAC,YAAY,EACd,GAAA,aAAa,GACL,KAEb,CAAA,CAAA,SAAA,EAAA,EACC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,YAAY,EAAA,GACd,aAAa,EAAA,CACP,CACX,EAEA,IAAI,CAAC,WAAW,KAChB,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,SAAS,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACnC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAA,EAEzB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAE;AACN,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AACvC,gBAAA,CAAC,oBAAoB,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;gBAC5C,6BAA6B,EAAE,IAAI,CAAC,QAAQ;AAC5C,gBAAA,CAAC,CAAM,GAAA,EAAA,SAAS,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;AAC7D,gBAAA,CAAC,CAAQ,KAAA,EAAA,SAAS,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AACzD,aAAA,EAAA,EAED,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAE,CAAkD,+CAAA,EAAA,IAAI,CAAC,SAAS,CAAE,CAAA,EAAA,EAC3E,CAAC,CAAA,YAAY,EACZ,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACN,gBAAA,CAAC,CAAQ,KAAA,EAAA,SAAS,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;aAC/D,EAAA,CACc,CACb,EAEJ,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAChC,GAAG,EAAE,EAAE,IAAG;AACT,gBAAA,IAAI,EAAE,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,EAAE;AAClD,oBAAA,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;;aAEjD,EAEA,EAAA,CAAC,IAAI,CAAC,WAAW,IAAI,CAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,EAAE,CAAC,WAAW,CAAQ,CACnD,EAEL,IAAI,CAAC,QAAQ,KACb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAA,EACzC,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,IAAI,EAAC,QAAQ,gBACF,eAAe,EAC1B,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EAEjC,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAW,CAAA,CAClD,CACJ,CACN,CACI,CACa,CACpB,CACS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tooltip/sd-tooltip.scss?tag=sd-tooltip","src/components/sd-tooltip/sd-tooltip.tsx"],"sourcesContent":["sd-tooltip {\r\n [slot='content'] {\r\n display: none;\r\n }\r\n\r\n .sd-tooltip {\r\n position: relative;\r\n cursor: pointer;\r\n display: inline-block;\r\n }\r\n}\r\n\r\n.sd-tooltip-menu {\r\n width: fit-content;\r\n padding: 8px 16px;\r\n border-radius: 4px;\r\n font-size: 12px;\r\n position: relative;\r\n box-sizing: border-box;\r\n display: flex;\r\n align-items: start;\r\n justify-content: center;\r\n gap: 12px;\r\n\r\n &--with-close {\r\n padding-right: 12px !important;\r\n }\r\n\r\n &__arrow {\r\n position: absolute;\r\n display: flex;\r\n width: 9.6px;\r\n height: 7.2px;\r\n svg {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n &--top {\r\n bottom: -7.2px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n }\r\n &--bottom {\r\n top: -7.2px;\r\n left: 50%;\r\n transform: translateX(-50%) rotate(180deg);\r\n }\r\n &--left {\r\n right: -7.2px;\r\n top: 50%;\r\n transform: translateY(-50%) rotate(-90deg);\r\n }\r\n &--right {\r\n left: -7.2px;\r\n top: 50%;\r\n transform: translateY(-50%) rotate(90deg);\r\n }\r\n }\r\n\r\n &__content {\r\n line-height: 20px;\r\n font-weight: 500;\r\n\r\n p {\r\n margin: 0;\r\n }\r\n }\r\n\r\n &__close-button {\r\n padding-top: 4px;\r\n display: flex;\r\n button {\r\n padding: 0;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n }\r\n }\r\n}\r\n","import { Component, Element, Fragment, Prop, State, h } from '@stencil/core';\r\nimport { HTMLStencilElement } from '@stencil/core/internal';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\nimport { TooltipArrow } from '../assets/tooltipArrow';\r\n\r\n@Component({\r\n tag: 'sd-tooltip',\r\n styleUrl: 'sd-tooltip.scss',\r\n})\r\nexport class SdTooltip {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() trigger: 'hover' | 'click' = 'hover';\r\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\r\n @Prop() color: string = '#01BB4B';\r\n @Prop() type: 'default' | 'caution' | 'notice' | 'accent' = 'default';\r\n\r\n @Prop() icon: IconName = 'helpOutline';\r\n @Prop() iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop() buttonSize: ButtonSize = 'sm';\r\n @Prop() buttonVariant: ButtonVariant = 'primary';\r\n\r\n @Prop() noHover: boolean = true;\r\n\r\n @Prop() useClose: boolean = false;\r\n\r\n @State() showTooltip: boolean = false;\r\n @State() slotContent: HTMLElement | null = null;\r\n\r\n private static readonly COLOR_OF_TYPE = {\r\n default: { background: 'oceanblue_85', text: 'white' },\r\n caution: { background: 'red_20', text: 'red_70' },\r\n notice: { background: 'orange_10', text: 'orange_65' },\r\n accent: { background: 'brilliantblue_20', text: 'brilliantblue_75' },\r\n };\r\n\r\n private buttonEl?: HTMLStencilElement;\r\n\r\n private handleClose = () => {\r\n this.showTooltip = false;\r\n };\r\n\r\n // 현재 tooltip popover가 조건부 렌더링이여서 초기 slot이 렌더링 되지 않은 시점에\r\n // 데이터 매핑에 실패 (light dom에 저장된 slot내용을 shadow dom을 찾지못해 매핑 실패)\r\n // 따라서 slot내용을 받은 후에 복제하여 state에 저장\r\n componentWillLoad() {\r\n const contentEl = this.el.querySelector('[slot=\"content\"]');\r\n if (contentEl) {\r\n this.slotContent = contentEl.cloneNode(true) as HTMLElement;\r\n }\r\n }\r\n\r\n render() {\r\n const handleTrigger =\r\n this.trigger === 'hover'\r\n ? {\r\n onMouseEnter: () => (this.showTooltip = true),\r\n onMouseLeave: () => (this.showTooltip = false),\r\n }\r\n : {\r\n onClick: () => (this.showTooltip = !this.showTooltip),\r\n };\r\n\r\n return (\r\n <Fragment>\r\n {this.label ? (\r\n <sd-button\r\n ref={el => (this.buttonEl = el)}\r\n label={this.label}\r\n icon={this.icon}\r\n size={this.buttonSize}\r\n color={this.color}\r\n variant={this.buttonVariant}\r\n class=\"sd-tooltip\"\r\n {...handleTrigger}\r\n ></sd-button>\r\n ) : (\r\n <sd-icon\r\n ref={el => (this.buttonEl = el)}\r\n name={this.icon}\r\n size={this.iconSize}\r\n color={this.color}\r\n class=\"sd-tooltip\"\r\n {...handleTrigger}\r\n ></sd-icon>\r\n )}\r\n\r\n {this.showTooltip && (\r\n <sd-tooltip-portal\r\n parentRef={this.buttonEl}\r\n onSdClose={() => this.handleClose()}\r\n placement={this.placement}\r\n >\r\n <div\r\n class={{\r\n 'sd-tooltip-menu': true,\r\n [`sd-tooltip-menu--${this.type}`]: true,\r\n [`sd-tooltip-menu--${this.placement}`]: true,\r\n 'sd-tooltip-menu--with-close': this.useClose,\r\n [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\r\n [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,\r\n }}\r\n >\r\n <i class={`sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}`}>\r\n <TooltipArrow\r\n class={{\r\n [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\r\n }}\r\n ></TooltipArrow>\r\n </i>\r\n\r\n <div\r\n class=\"sd-tooltip-menu__content\"\r\n ref={el => {\r\n if (el && this.slotContent && !el.hasChildNodes()) {\r\n el.appendChild(this.slotContent.cloneNode(true));\r\n }\r\n }}\r\n >\r\n {!this.slotContent && <span>{this.el.textContent}</span>}\r\n </div>\r\n\r\n {this.useClose && (\r\n <div class=\"sd-tooltip-menu__close-button\">\r\n <button\r\n type=\"button\"\r\n aria-label=\"Close tooltip\"\r\n title=\"Close tooltip\"\r\n onClick={() => this.handleClose()}\r\n >\r\n <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\r\n </button>\r\n </div>\r\n )}\r\n </div>\r\n </sd-tooltip-portal>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
@@ -1,4 +1,4 @@
1
- import { h, p as proxyCustomElement, H } from './p-DzRr3BEe.js';
1
+ import { h, p as proxyCustomElement, H } from './p-CbnL1UUF.js';
2
2
  import { r as resolveColor } from './p-BYf-ybt2.js';
3
3
 
4
4
  const Check12 = (props) => {
@@ -365,7 +365,7 @@ const SdIcon = /*@__PURE__*/ proxyCustomElement(class SdIcon extends H {
365
365
  }
366
366
  render() {
367
367
  const IconComponent = Icons[this.name]?.[this.size];
368
- return (h("i", { key: '20f187a90566d35f7c459480b6917061cd26c734', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '9db914748d948a695b248d04e5008e726ac6e4d2', color: this.resolvedColor })));
368
+ return (h("i", { key: 'c0d4a3993efc47345406ba9b30e49cefaa14f8da', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '47476081ac11dd8ef1b04d9372d05f4afe72b323', color: this.resolvedColor })));
369
369
  }
370
370
  static get style() { return sdIconCss; }
371
371
  }, [768, "sd-icon", {
@@ -391,6 +391,6 @@ function defineCustomElement() {
391
391
  }
392
392
 
393
393
  export { SdIcon as S, defineCustomElement as d };
394
- //# sourceMappingURL=p-nehvpX7w.js.map
394
+ //# sourceMappingURL=p-BtS3tSh2.js.map
395
395
 
396
- //# sourceMappingURL=p-nehvpX7w.js.map
396
+ //# sourceMappingURL=p-BtS3tSh2.js.map