@sellmate/design-system 0.0.15 → 0.0.16

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 (220) hide show
  1. package/dist/cjs/design-system.cjs.js +2 -2
  2. package/dist/cjs/{index-D1tXBb8y.js → index-BxN2rEJl.js} +3 -3
  3. package/dist/cjs/index-BxN2rEJl.js.map +1 -0
  4. package/dist/cjs/loader.cjs.js +2 -2
  5. package/dist/cjs/sd-badge.cjs.entry.js +2 -2
  6. package/dist/cjs/sd-badge.entry.cjs.js.map +1 -1
  7. package/dist/cjs/sd-button.sd-tooltip-portal.entry.cjs.js.map +1 -1
  8. package/dist/cjs/sd-button_2.cjs.entry.js +3 -3
  9. package/dist/cjs/sd-card.cjs.entry.js +2 -2
  10. package/dist/cjs/sd-card.entry.cjs.js.map +1 -1
  11. 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 +1 -1
  12. package/dist/cjs/sd-checkbox_9.cjs.entry.js +12 -12
  13. package/dist/cjs/sd-date-box.cjs.entry.js +2 -2
  14. package/dist/cjs/sd-date-box.entry.cjs.js.map +1 -1
  15. package/dist/cjs/sd-date-picker.cjs.entry.js +2 -2
  16. package/dist/cjs/sd-date-picker.entry.cjs.js.map +1 -1
  17. package/dist/cjs/sd-date-range-picker.cjs.entry.js +2 -2
  18. package/dist/cjs/sd-date-range-picker.entry.cjs.js.map +1 -1
  19. package/dist/cjs/sd-guide.cjs.entry.js +5 -6
  20. package/dist/cjs/sd-guide.entry.cjs.js.map +1 -1
  21. package/dist/cjs/sd-pagination.sd-tooltip.entry.cjs.js.map +1 -1
  22. package/dist/cjs/sd-pagination_2.cjs.entry.js +4 -4
  23. package/dist/cjs/sd-popover.cjs.entry.js +3 -3
  24. package/dist/cjs/sd-popover.entry.cjs.js.map +1 -1
  25. package/dist/cjs/sd-table.cjs.entry.js +2 -2
  26. package/dist/cjs/sd-table.entry.cjs.js.map +1 -1
  27. package/dist/cjs/sd-tag.cjs.entry.js +1 -1
  28. package/dist/cjs/{tooltipArrow-D4Vc_pEU.js → tooltipArrow-ByThZw_g.js} +3 -3
  29. package/dist/cjs/{tooltipArrow-D4Vc_pEU.js.map → tooltipArrow-ByThZw_g.js.map} +1 -1
  30. package/dist/collection/components/sd-badge/sd-badge.css +0 -52
  31. package/dist/collection/components/sd-button/sd-button.css +0 -52
  32. package/dist/collection/components/sd-button/sd-button.js +1 -2
  33. package/dist/collection/components/sd-button/sd-button.js.map +1 -1
  34. package/dist/collection/components/sd-card/sd-card.css +2 -52
  35. package/dist/collection/components/sd-checkbox/sd-checkbox.css +0 -52
  36. package/dist/collection/components/sd-checkbox/sd-checkbox.js +1 -2
  37. package/dist/collection/components/sd-checkbox/sd-checkbox.js.map +1 -1
  38. package/dist/collection/components/sd-date-box/sd-date-box.css +0 -52
  39. package/dist/collection/components/sd-date-picker/sd-date-picker.css +0 -52
  40. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.css +0 -52
  41. package/dist/collection/components/sd-guide/sd-guide.css +1438 -46
  42. package/dist/collection/components/sd-guide/sd-guide.js +3 -4
  43. package/dist/collection/components/sd-guide/sd-guide.js.map +1 -1
  44. package/dist/collection/components/sd-icon/sd-icon.js +1 -2
  45. package/dist/collection/components/sd-icon/sd-icon.js.map +1 -1
  46. package/dist/collection/components/sd-input/sd-input.css +22 -52
  47. package/dist/collection/components/sd-input/sd-input.js +1 -1
  48. package/dist/collection/components/sd-input/sd-input.js.map +1 -1
  49. package/dist/collection/components/sd-pagination/sd-pagination.css +0 -52
  50. package/dist/collection/components/sd-popover/sd-popover.css +0 -52
  51. package/dist/collection/components/sd-select/sd-select-option/sd-select-option.css +0 -52
  52. package/dist/collection/components/sd-select/sd-select.css +0 -52
  53. package/dist/collection/components/sd-select-multiple/sd-select-multiple.css +0 -52
  54. package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.css +0 -52
  55. package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.css +0 -52
  56. package/dist/collection/components/sd-table/sd-table.css +0 -52
  57. package/dist/collection/components/sd-tooltip/sd-tooltip.css +0 -52
  58. package/dist/components/index.js +1 -1
  59. package/dist/components/p-03XlrG8V.js +78 -0
  60. package/dist/components/{p-D_m-rDEx.js.map → p-03XlrG8V.js.map} +1 -1
  61. package/dist/components/{p-BOsnXzkr.js → p-B60pARKe.js} +6 -6
  62. package/dist/components/p-B60pARKe.js.map +1 -0
  63. package/dist/components/p-BSERuUHP.js +130 -0
  64. package/dist/components/{p-x0iTdFk8.js.map → p-BSERuUHP.js.map} +1 -1
  65. package/dist/components/{p-yJmTynI0.js → p-BXPm14Mz.js} +3 -3
  66. package/dist/components/{p-yJmTynI0.js.map → p-BXPm14Mz.js.map} +1 -1
  67. package/dist/components/p-Biihf4L_.js +104 -0
  68. package/dist/components/p-Biihf4L_.js.map +1 -0
  69. package/dist/components/p-C9h8A06v.js +95 -0
  70. package/dist/components/{p-B1kMis4e.js.map → p-C9h8A06v.js.map} +1 -1
  71. package/dist/components/p-ChtYytaJ.js +167 -0
  72. package/dist/components/p-ChtYytaJ.js.map +1 -0
  73. package/dist/components/p-CjFMRk1X.js +110 -0
  74. package/dist/components/{p-UtZuVoJ9.js.map → p-CjFMRk1X.js.map} +1 -1
  75. package/dist/components/p-Ctp8Jcfa.js +118 -0
  76. package/dist/components/p-Ctp8Jcfa.js.map +1 -0
  77. package/dist/components/{p-az-fZTqo.js → p-CxfkkYH4.js} +3 -3
  78. package/dist/components/{p-az-fZTqo.js.map → p-CxfkkYH4.js.map} +1 -1
  79. package/dist/components/{p-CLODAhOA.js → p-D_VunbXE.js} +3 -3
  80. package/dist/components/p-D_VunbXE.js.map +1 -0
  81. package/dist/components/p-OUj9ew5s.js +97 -0
  82. package/dist/components/{p-B_s4RQWY.js.map → p-OUj9ew5s.js.map} +1 -1
  83. package/dist/components/{p-Bws0p2kF.js → p-Pgg2vJbw.js} +3 -3
  84. package/dist/components/{p-Bws0p2kF.js.map → p-Pgg2vJbw.js.map} +1 -1
  85. package/dist/components/{p-sQ8mybM7.js → p-VEsa5ImC.js} +3 -3
  86. package/dist/components/{p-sQ8mybM7.js.map → p-VEsa5ImC.js.map} +1 -1
  87. package/dist/components/sd-badge.js +2 -2
  88. package/dist/components/sd-badge.js.map +1 -1
  89. package/dist/components/sd-button.js +1 -1
  90. package/dist/components/sd-card.js +2 -2
  91. package/dist/components/sd-card.js.map +1 -1
  92. package/dist/components/sd-checkbox.js +1 -1
  93. package/dist/components/sd-date-box.js +1 -1
  94. package/dist/components/sd-date-picker.js +6 -6
  95. package/dist/components/sd-date-picker.js.map +1 -1
  96. package/dist/components/sd-date-range-picker.js +6 -6
  97. package/dist/components/sd-date-range-picker.js.map +1 -1
  98. package/dist/components/sd-guide.js +8 -9
  99. package/dist/components/sd-guide.js.map +1 -1
  100. package/dist/components/sd-icon.js +1 -1
  101. package/dist/components/sd-input.js +1 -1
  102. package/dist/components/sd-pagination.js +1 -1
  103. package/dist/components/sd-popover.js +6 -6
  104. package/dist/components/sd-popover.js.map +1 -1
  105. package/dist/components/sd-portal.js +1 -1
  106. package/dist/components/sd-select-multiple-group.js +8 -8
  107. package/dist/components/sd-select-multiple-group.js.map +1 -1
  108. package/dist/components/sd-select-multiple.js +8 -8
  109. package/dist/components/sd-select-multiple.js.map +1 -1
  110. package/dist/components/sd-select-option-group.js +1 -1
  111. package/dist/components/sd-select-option.js +1 -1
  112. package/dist/components/sd-select.js +8 -8
  113. package/dist/components/sd-select.js.map +1 -1
  114. package/dist/components/sd-table.js +8 -8
  115. package/dist/components/sd-table.js.map +1 -1
  116. package/dist/components/sd-tag.js +1 -1
  117. package/dist/components/sd-tooltip-portal.js +1 -1
  118. package/dist/components/sd-tooltip.js +1 -1
  119. package/dist/design-system/design-system.css +1 -1
  120. package/dist/design-system/design-system.esm.js +1 -1
  121. package/dist/design-system/p-172ac888.entry.js +2 -0
  122. package/dist/design-system/{p-b4e3145a.entry.js.map → p-172ac888.entry.js.map} +1 -1
  123. package/dist/design-system/p-17a6e9a6.entry.js +2 -0
  124. package/dist/design-system/{p-b037ea76.entry.js.map → p-17a6e9a6.entry.js.map} +1 -1
  125. package/dist/design-system/p-1a4eaf40.entry.js +2 -0
  126. package/dist/design-system/{p-62c12ab7.entry.js.map → p-1a4eaf40.entry.js.map} +1 -1
  127. package/dist/design-system/p-273d1488.entry.js +2 -0
  128. package/dist/design-system/{p-bd9e799c.entry.js.map → p-273d1488.entry.js.map} +1 -1
  129. package/dist/design-system/{p-240de5df.entry.js → p-3435bfa7.entry.js} +2 -2
  130. package/dist/design-system/p-53475fb4.entry.js +2 -0
  131. package/dist/design-system/{p-2e519819.entry.js.map → p-53475fb4.entry.js.map} +1 -1
  132. package/dist/design-system/p-7e7c4c50.entry.js +2 -0
  133. package/dist/design-system/{p-4eaf6262.entry.js.map → p-7e7c4c50.entry.js.map} +1 -1
  134. package/dist/design-system/{p-D8LjiNqp.js → p-B2E2_4lK.js} +2 -2
  135. package/dist/design-system/{p-D8LjiNqp.js.map → p-B2E2_4lK.js.map} +1 -1
  136. package/dist/design-system/p-BAZEKdOK.js +3 -0
  137. package/dist/design-system/p-BAZEKdOK.js.map +1 -0
  138. package/dist/design-system/p-d0d3674e.entry.js +2 -0
  139. package/dist/design-system/{p-ac9a20b4.entry.js.map → p-d0d3674e.entry.js.map} +1 -1
  140. package/dist/design-system/p-e700f171.entry.js +2 -0
  141. package/dist/design-system/{p-d185bd2e.entry.js.map → p-e700f171.entry.js.map} +1 -1
  142. package/dist/design-system/p-f998a926.entry.js +2 -0
  143. package/dist/design-system/p-f998a926.entry.js.map +1 -0
  144. package/dist/design-system/p-f9d2e115.entry.js +2 -0
  145. package/dist/design-system/{p-71716c18.entry.js.map → p-f9d2e115.entry.js.map} +1 -1
  146. package/dist/design-system/p-fbff7da1.entry.js +2 -0
  147. package/dist/design-system/{p-87da8d28.entry.js.map → p-fbff7da1.entry.js.map} +1 -1
  148. package/dist/design-system/sd-badge.entry.esm.js.map +1 -1
  149. package/dist/design-system/sd-button.sd-tooltip-portal.entry.esm.js.map +1 -1
  150. package/dist/design-system/sd-card.entry.esm.js.map +1 -1
  151. 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 +1 -1
  152. package/dist/design-system/sd-date-box.entry.esm.js.map +1 -1
  153. package/dist/design-system/sd-date-picker.entry.esm.js.map +1 -1
  154. package/dist/design-system/sd-date-range-picker.entry.esm.js.map +1 -1
  155. package/dist/design-system/sd-guide.entry.esm.js.map +1 -1
  156. package/dist/design-system/sd-pagination.sd-tooltip.entry.esm.js.map +1 -1
  157. package/dist/design-system/sd-popover.entry.esm.js.map +1 -1
  158. package/dist/design-system/sd-table.entry.esm.js.map +1 -1
  159. package/dist/esm/design-system.js +3 -3
  160. package/dist/esm/{index-DON0UcbL.js → index-BAZEKdOK.js} +3 -3
  161. package/dist/esm/index-BAZEKdOK.js.map +1 -0
  162. package/dist/esm/loader.js +3 -3
  163. package/dist/esm/sd-badge.entry.js +2 -2
  164. package/dist/esm/sd-badge.entry.js.map +1 -1
  165. package/dist/esm/sd-button.sd-tooltip-portal.entry.js.map +1 -1
  166. package/dist/esm/sd-button_2.entry.js +3 -3
  167. package/dist/esm/sd-card.entry.js +2 -2
  168. package/dist/esm/sd-card.entry.js.map +1 -1
  169. 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 +1 -1
  170. package/dist/esm/sd-checkbox_9.entry.js +12 -12
  171. package/dist/esm/sd-date-box.entry.js +2 -2
  172. package/dist/esm/sd-date-box.entry.js.map +1 -1
  173. package/dist/esm/sd-date-picker.entry.js +2 -2
  174. package/dist/esm/sd-date-picker.entry.js.map +1 -1
  175. package/dist/esm/sd-date-range-picker.entry.js +2 -2
  176. package/dist/esm/sd-date-range-picker.entry.js.map +1 -1
  177. package/dist/esm/sd-guide.entry.js +5 -6
  178. package/dist/esm/sd-guide.entry.js.map +1 -1
  179. package/dist/esm/sd-pagination.sd-tooltip.entry.js.map +1 -1
  180. package/dist/esm/sd-pagination_2.entry.js +4 -4
  181. package/dist/esm/sd-popover.entry.js +3 -3
  182. package/dist/esm/sd-popover.entry.js.map +1 -1
  183. package/dist/esm/sd-table.entry.js +2 -2
  184. package/dist/esm/sd-table.entry.js.map +1 -1
  185. package/dist/esm/sd-tag.entry.js +1 -1
  186. package/dist/esm/{tooltipArrow-Dv8Sb6cw.js → tooltipArrow-BWyXCaKj.js} +3 -3
  187. package/dist/esm/{tooltipArrow-Dv8Sb6cw.js.map → tooltipArrow-BWyXCaKj.js.map} +1 -1
  188. package/hydrate/index.js +29 -30
  189. package/hydrate/index.mjs +29 -30
  190. package/package.json +2 -2
  191. package/dist/cjs/index-D1tXBb8y.js.map +0 -1
  192. package/dist/components/p-1jmdnu3I.js +0 -118
  193. package/dist/components/p-1jmdnu3I.js.map +0 -1
  194. package/dist/components/p-7xizrxZ5.js +0 -104
  195. package/dist/components/p-7xizrxZ5.js.map +0 -1
  196. package/dist/components/p-B1kMis4e.js +0 -95
  197. package/dist/components/p-BOsnXzkr.js.map +0 -1
  198. package/dist/components/p-BTSN9ENi.js +0 -167
  199. package/dist/components/p-BTSN9ENi.js.map +0 -1
  200. package/dist/components/p-B_s4RQWY.js +0 -97
  201. package/dist/components/p-CLODAhOA.js.map +0 -1
  202. package/dist/components/p-D_m-rDEx.js +0 -78
  203. package/dist/components/p-UtZuVoJ9.js +0 -110
  204. package/dist/components/p-x0iTdFk8.js +0 -130
  205. package/dist/design-system/p-2e519819.entry.js +0 -2
  206. package/dist/design-system/p-4eaf6262.entry.js +0 -2
  207. package/dist/design-system/p-5f6c69ed.entry.js +0 -2
  208. package/dist/design-system/p-5f6c69ed.entry.js.map +0 -1
  209. package/dist/design-system/p-62c12ab7.entry.js +0 -2
  210. package/dist/design-system/p-71716c18.entry.js +0 -2
  211. package/dist/design-system/p-87da8d28.entry.js +0 -2
  212. package/dist/design-system/p-DON0UcbL.js +0 -3
  213. package/dist/design-system/p-DON0UcbL.js.map +0 -1
  214. package/dist/design-system/p-ac9a20b4.entry.js +0 -2
  215. package/dist/design-system/p-b037ea76.entry.js +0 -2
  216. package/dist/design-system/p-b4e3145a.entry.js +0 -2
  217. package/dist/design-system/p-bd9e799c.entry.js +0 -2
  218. package/dist/design-system/p-d185bd2e.entry.js +0 -2
  219. package/dist/esm/index-DON0UcbL.js.map +0 -1
  220. /package/dist/design-system/{p-240de5df.entry.js.map → p-3435bfa7.entry.js.map} +0 -0
@@ -1 +1 @@
1
- {"file":"p-B1kMis4e.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tooltip/sd-tooltip.scss?tag=sd-tooltip&encapsulation=shadow","src/components/sd-tooltip/sd-tooltip.tsx"],"sourcesContent":["@import '../../styles/global.scss';\r\n\r\n.sd-tooltip {\r\n position: relative;\r\n cursor: pointer;\r\n display: inline-block;\r\n}\r\n","import { Component, Element, Fragment, Prop, State, h } from '@stencil/core';\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 shadow: true,\r\n})\r\nexport class SdTooltip {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop({ reflect: true }) trigger: 'hover' | 'click' = 'hover';\r\n @Prop({ reflect: true }) placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\r\n @Prop({ reflect: true }) color: string = '#01BB4B';\r\n\r\n @Prop({ reflect: true }) icon: IconName = 'helpOutline';\r\n @Prop({ reflect: true }) iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop({ reflect: true }) buttonSize: ButtonSize = 'sm';\r\n @Prop({ reflect: true }) 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\r\n private buttonEl?: HTMLElement;\r\n\r\n private handleClose = () => {\r\n console.log('close tooltip');\r\n this.showTooltip = false;\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: () => (console.log('click tooltip'), (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 as unknown as HTMLElement)}\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 as unknown as HTMLElement)}\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.placement}`]: true,\r\n 'sd-tooltip-menu--with-close': this.useClose,\r\n }}\r\n >\r\n <i class={`sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}`}>\r\n <TooltipArrow></TooltipArrow>\r\n </i>\r\n\r\n <div class=\"sd-tooltip-menu__content\">\r\n <slot>{this.el.textContent}</slot>\r\n </div>\r\n\r\n {this.useClose && (\r\n <div class=\"sd-tooltip-menu__close-button\">\r\n <button onClick={() => this.handleClose()}>\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
+ {"file":"p-C9h8A06v.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tooltip/sd-tooltip.scss?tag=sd-tooltip&encapsulation=shadow","src/components/sd-tooltip/sd-tooltip.tsx"],"sourcesContent":["@import '../../styles/global.scss';\r\n\r\n.sd-tooltip {\r\n position: relative;\r\n cursor: pointer;\r\n display: inline-block;\r\n}\r\n","import { Component, Element, Fragment, Prop, State, h } from '@stencil/core';\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 shadow: true,\r\n})\r\nexport class SdTooltip {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop({ reflect: true }) trigger: 'hover' | 'click' = 'hover';\r\n @Prop({ reflect: true }) placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\r\n @Prop({ reflect: true }) color: string = '#01BB4B';\r\n\r\n @Prop({ reflect: true }) icon: IconName = 'helpOutline';\r\n @Prop({ reflect: true }) iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop({ reflect: true }) buttonSize: ButtonSize = 'sm';\r\n @Prop({ reflect: true }) 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\r\n private buttonEl?: HTMLElement;\r\n\r\n private handleClose = () => {\r\n console.log('close tooltip');\r\n this.showTooltip = false;\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: () => (console.log('click tooltip'), (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 as unknown as HTMLElement)}\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 as unknown as HTMLElement)}\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.placement}`]: true,\r\n 'sd-tooltip-menu--with-close': this.useClose,\r\n }}\r\n >\r\n <i class={`sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}`}>\r\n <TooltipArrow></TooltipArrow>\r\n </i>\r\n\r\n <div class=\"sd-tooltip-menu__content\">\r\n <slot>{this.el.textContent}</slot>\r\n </div>\r\n\r\n {this.useClose && (\r\n <div class=\"sd-tooltip-menu__close-button\">\r\n <button onClick={() => this.handleClose()}>\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}
@@ -0,0 +1,167 @@
1
+ import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-D_VunbXE.js';
2
+ import { d as defineCustomElement$1 } from './p-B60pARKe.js';
3
+
4
+ const sdInputCss = ".bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;color:white;background:#07284a;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__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}.sd-popover-menu{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow svg{width:100%;height:100%}.sd-popover-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content{font-size:12px;line-height:20px}.sd-popover-menu__content .sd-popover-menu__title{font-weight:700;margin-bottom:4px}.sd-popover-menu__content .sd-popover-menu__messages{font-weight:500}.sd-popover-menu__content .sd-popover-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content .sd-popover-menu__buttons--1{justify-content:flex-end}.sd-popover-menu__content .sd-popover-menu__buttons--2{justify-content:space-between}.sd-popover-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}:host{line-height:0}.sd-icon{line-height:0;vertical-align:middle}.sd-icon--rotate-90{transform:rotate(90deg)}.sd-icon--rotate-180{transform:rotate(180deg)}.sd-icon--rotate-270{transform:rotate(270deg)}.sd-input{display:flex;width:var(--input-width, 100%);align-items:center;height:28px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;color:#333333;font-size:12px;line-height:20px;background:white}.sd-input--hovered,.sd-input--focused{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}.sd-input.sd-input--error{border-color:#fb4444}.sd-input.sd-input--pass{border-color:#2bce6c}.sd-input.sd-input--barcode:not(.sd-input--disabled){background-color:#fafaa1}.sd-input.sd-input--disabled{background-color:#eeeeee !important;border-color:#cccccc !important;cursor:not-allowed !important;box-shadow:none !important}.sd-input.sd-input--disabled .sd-input__native_element{color:#888888 !important}.sd-input .sd-input__native_element{display:block;width:100%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;padding-inline:0}.sd-input .sd-input__native_element::placeholder{font-size:12px;height:20px;line-height:20px;color:#aaaaaa}.sd-input .sd-input__clear-icon{cursor:pointer;margin-left:8px}";
5
+
6
+ const SdInput = /*@__PURE__*/ proxyCustomElement(class SdInput extends H {
7
+ constructor(registerHost) {
8
+ super();
9
+ if (registerHost !== false) {
10
+ this.__registerHost();
11
+ }
12
+ this.sdClick = createEvent(this, "sdClick");
13
+ this.sdInput = createEvent(this, "sdInput");
14
+ this.sdChange = createEvent(this, "sdChange");
15
+ this.sdFocus = createEvent(this, "sdFocus");
16
+ this.sdBlur = createEvent(this, "sdBlur");
17
+ }
18
+ get el() { return this; }
19
+ value = null;
20
+ label;
21
+ placeholder = '입력해 주세요.';
22
+ disabled = false;
23
+ clearable = false;
24
+ width;
25
+ barcode = false;
26
+ rules;
27
+ autoFocus = false;
28
+ status;
29
+ inputClass = '';
30
+ readonly = false;
31
+ // props - custom styles
32
+ inputStyle = {};
33
+ internalValue = null;
34
+ error = false;
35
+ focused = false;
36
+ hovered = false;
37
+ nativeEl = undefined;
38
+ sdClick;
39
+ sdInput;
40
+ sdChange;
41
+ sdFocus;
42
+ sdBlur;
43
+ valueChanged(newValue) {
44
+ this.internalValue = newValue;
45
+ }
46
+ internalValueChanged(newValue) {
47
+ if (newValue !== this.value) {
48
+ this.value = newValue;
49
+ this.sdInput?.emit(this.value);
50
+ }
51
+ if (!this.rules || this.rules.length === 0)
52
+ return;
53
+ this.error = false;
54
+ for (const rule of this.rules) {
55
+ const result = rule(newValue);
56
+ if (result !== true) {
57
+ this.error = true;
58
+ break;
59
+ }
60
+ }
61
+ }
62
+ async getNativeElement() {
63
+ return this.nativeEl || null;
64
+ }
65
+ componentWillLoad() {
66
+ if (this.value) {
67
+ this.internalValue = this.value;
68
+ }
69
+ }
70
+ handleInput = (event) => {
71
+ const target = event.target;
72
+ this.internalValue = target.value;
73
+ this.sdInput?.emit(this.internalValue);
74
+ };
75
+ handleChange = (event) => {
76
+ const target = event.target;
77
+ this.internalValue = target.value;
78
+ this.sdChange?.emit(this.internalValue);
79
+ };
80
+ handleFocus = (type, event) => {
81
+ this.focused = type === 'focus';
82
+ if (type === 'blur')
83
+ this.sdBlur?.emit(event);
84
+ else
85
+ this.sdFocus?.emit(event);
86
+ };
87
+ getInputStatus() {
88
+ // input 상태 우선순위: hovered > focused > status(상태 주입) > error(rules 검사)
89
+ if (this.disabled)
90
+ return 'sd-input--disabled';
91
+ if (this.hovered)
92
+ return 'sd-input--hovered';
93
+ if (this.focused)
94
+ return 'sd-input--focused';
95
+ if (this.status)
96
+ return `sd-input--${this.status}`;
97
+ if (this.error)
98
+ return 'sd-input--error';
99
+ return '';
100
+ }
101
+ render() {
102
+ const inputWidth = this.width
103
+ ? {
104
+ '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
105
+ }
106
+ : {};
107
+ return (h(Host, { key: '9a0b975f20b4b8bbc8bff2aef4ee9036450921d4', style: inputWidth }, this.label && h("div", { key: 'ec6c840dcdaa7b9788c32ecbd03dc5daee74c748', class: "sd-input__label" }, this.label), h("label", { key: '4c11c34fd26897b50e0cfbb569de476c9e06884c', class: {
108
+ 'sd-input': true,
109
+ [this.getInputStatus()]: true,
110
+ 'sd-input--barcode': !!this.barcode,
111
+ }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '0d7df02ed548b12f415bd72f84ea411fde5ef549', name: "prefix" }), h("input", { key: '6203dcb95fd486d263e0fe33495243e95c332e1a', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: '21544173b390be5607c50faf84f1d47fa703e8bf', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'af486def3d146c4638d1f6fecf95a6de61e8d528', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
112
+ this.internalValue = '';
113
+ this.sdChange?.emit(this.internalValue);
114
+ this.sdInput?.emit(this.internalValue);
115
+ } })))));
116
+ }
117
+ static get watchers() { return {
118
+ "value": ["valueChanged"],
119
+ "internalValue": ["internalValueChanged"]
120
+ }; }
121
+ static get style() { return sdInputCss; }
122
+ }, [772, "sd-input", {
123
+ "value": [1032],
124
+ "label": [1],
125
+ "placeholder": [1],
126
+ "disabled": [4],
127
+ "clearable": [4],
128
+ "width": [8],
129
+ "barcode": [4],
130
+ "rules": [16],
131
+ "autoFocus": [4, "auto-focus"],
132
+ "status": [1],
133
+ "inputClass": [1, "input-class"],
134
+ "readonly": [4],
135
+ "inputStyle": [16],
136
+ "internalValue": [32],
137
+ "error": [32],
138
+ "focused": [32],
139
+ "hovered": [32],
140
+ "getNativeElement": [64]
141
+ }, undefined, {
142
+ "value": ["valueChanged"],
143
+ "internalValue": ["internalValueChanged"]
144
+ }]);
145
+ function defineCustomElement() {
146
+ if (typeof customElements === "undefined") {
147
+ return;
148
+ }
149
+ const components = ["sd-input", "sd-icon"];
150
+ components.forEach(tagName => { switch (tagName) {
151
+ case "sd-input":
152
+ if (!customElements.get(tagName)) {
153
+ customElements.define(tagName, SdInput);
154
+ }
155
+ break;
156
+ case "sd-icon":
157
+ if (!customElements.get(tagName)) {
158
+ defineCustomElement$1();
159
+ }
160
+ break;
161
+ } });
162
+ }
163
+
164
+ export { SdInput as S, defineCustomElement as d };
165
+ //# sourceMappingURL=p-ChtYytaJ.js.map
166
+
167
+ //# sourceMappingURL=p-ChtYytaJ.js.map
@@ -0,0 +1 @@
1
+ {"file":"p-ChtYytaJ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-input/sd-input.scss?tag=sd-input","src/components/sd-input/sd-input.tsx"],"sourcesContent":["@import '../../styles/global.scss';\r\n@import '../sd-icon/sd-icon.scss';\r\n\r\n.sd-input {\r\n display: flex;\r\n width: var(--input-width, 100%);\r\n align-items: center;\r\n height: 28px;\r\n padding: 4px 8px;\r\n border: 1px solid $grey_55;\r\n border-radius: 4px;\r\n color: $grey_90;\r\n font-size: 12px;\r\n line-height: 20px;\r\n background: white;\r\n\r\n &--hovered,\r\n &--focused {\r\n border-color: $brilliantblue_75;\r\n box-shadow: 0 0 4px 0 #0071ff66;\r\n }\r\n\r\n &.sd-input--error {\r\n border-color: $red_70;\r\n }\r\n\r\n &.sd-input--pass {\r\n border-color: $green_65;\r\n }\r\n\r\n &.sd-input--barcode:not(.sd-input--disabled) {\r\n background-color: $olive_15;\r\n }\r\n\r\n &.sd-input--disabled {\r\n background-color: $grey_20 !important;\r\n border-color: $grey_45 !important;\r\n cursor: not-allowed !important;\r\n box-shadow: none !important;\r\n .sd-input__native_element {\r\n color: $grey_65 !important;\r\n }\r\n }\r\n\r\n .sd-input__native_element {\r\n display: block;\r\n width: 100%;\r\n height: 20px;\r\n line-height: 20px;\r\n border: none;\r\n outline: none;\r\n background: transparent;\r\n font-size: inherit;\r\n color: $grey_90;\r\n margin-left: 4px;\r\n margin-right: 4px;\r\n padding-block: 0;\r\n padding-inline: 0;\r\n\r\n &::placeholder {\r\n font-size: 12px;\r\n height: 20px;\r\n line-height: 20px;\r\n color: $grey_55;\r\n }\r\n }\r\n\r\n .sd-input__clear-icon {\r\n cursor: pointer;\r\n margin-left: 8px;\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Host,\r\n Prop,\r\n State,\r\n Watch,\r\n Event,\r\n EventEmitter,\r\n h,\r\n Method,\r\n} from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-input',\r\n styleUrl: 'sd-input.scss',\r\n})\r\nexport class SdInput {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop({ mutable: true }) value?: string | number | null = null;\r\n @Prop() label?: string;\r\n @Prop() placeholder: string = '입력해 주세요.';\r\n @Prop() disabled: boolean = false;\r\n @Prop() clearable: boolean = false;\r\n @Prop() width?: number | string;\r\n @Prop() barcode?: boolean = false;\r\n @Prop() rules?: Array<(value: string | number | null) => boolean | string>;\r\n @Prop() autoFocus: boolean = false;\r\n @Prop() status?: 'default' | 'pass' | 'error';\r\n @Prop() inputClass: string = '';\r\n @Prop() readonly: boolean = false;\r\n\r\n // props - custom styles\r\n @Prop() inputStyle: { [key: string]: string } = {};\r\n\r\n @State() private internalValue: string | number | null = null;\r\n @State() private error: boolean = false;\r\n @State() private focused: boolean = false;\r\n @State() private hovered: boolean = false;\r\n\r\n private nativeEl: HTMLInputElement | undefined = undefined;\r\n\r\n @Event() sdClick?: EventEmitter<string | number | null>;\r\n @Event() sdInput?: EventEmitter<string | number | null>;\r\n @Event() sdChange?: EventEmitter<string | number | null>;\r\n @Event() sdFocus?: EventEmitter<Event>;\r\n @Event() sdBlur?: EventEmitter<Event>;\r\n\r\n @Watch('value')\r\n valueChanged(newValue: string | number | null) {\r\n this.internalValue = newValue;\r\n }\r\n\r\n @Watch('internalValue')\r\n internalValueChanged(newValue: string | number | null) {\r\n if (newValue !== this.value) {\r\n this.value = newValue;\r\n this.sdInput?.emit(this.value);\r\n }\r\n\r\n if (!this.rules || this.rules.length === 0) return;\r\n this.error = false;\r\n for (const rule of this.rules) {\r\n const result = rule(newValue);\r\n if (result !== true) {\r\n this.error = true;\r\n break;\r\n }\r\n }\r\n }\r\n\r\n @Method()\r\n async getNativeElement(): Promise<HTMLInputElement | null> {\r\n return this.nativeEl || null;\r\n }\r\n\r\n componentWillLoad() {\r\n if (this.value) {\r\n this.internalValue = this.value;\r\n }\r\n }\r\n\r\n private handleInput = (event: Event) => {\r\n const target = event.target as HTMLInputElement;\r\n this.internalValue = target.value;\r\n this.sdInput?.emit(this.internalValue);\r\n };\r\n\r\n private handleChange = (event: Event) => {\r\n const target = event.target as HTMLInputElement;\r\n this.internalValue = target.value;\r\n this.sdChange?.emit(this.internalValue);\r\n };\r\n\r\n private handleFocus = (type: 'focus' | 'blur', event: Event) => {\r\n this.focused = type === 'focus';\r\n\r\n if (type === 'blur') this.sdBlur?.emit(event);\r\n else this.sdFocus?.emit(event);\r\n };\r\n\r\n getInputStatus() {\r\n // input 상태 우선순위: hovered > focused > status(상태 주입) > error(rules 검사)\r\n if (this.disabled) return 'sd-input--disabled';\r\n if (this.hovered) return 'sd-input--hovered';\r\n if (this.focused) return 'sd-input--focused';\r\n if (this.status) return `sd-input--${this.status}`;\r\n if (this.error) return 'sd-input--error';\r\n return '';\r\n }\r\n\r\n render() {\r\n const inputWidth = this.width\r\n ? {\r\n '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,\r\n }\r\n : {};\r\n\r\n return (\r\n <Host style={inputWidth}>\r\n {this.label && <div class=\"sd-input__label\">{this.label}</div>}\r\n <label\r\n class={{\r\n 'sd-input': true,\r\n [this.getInputStatus()]: true,\r\n 'sd-input--barcode': !!this.barcode,\r\n }}\r\n onMouseEnter={() => (this.hovered = true)}\r\n onMouseLeave={() => (this.hovered = false)}\r\n style={this.inputStyle}\r\n >\r\n <slot name=\"prefix\"></slot>\r\n <input\r\n ref={el => (this.nativeEl = el)}\r\n class={`sd-input__native_element ${this.inputClass}`}\r\n type=\"text\"\r\n value={this.internalValue || ''}\r\n placeholder={this.placeholder}\r\n disabled={this.disabled}\r\n readonly={this.readonly}\r\n autofocus={this.autoFocus}\r\n onInput={this.handleInput}\r\n onChange={this.handleChange}\r\n onFocus={event => this.handleFocus('focus', event)}\r\n onBlur={event => this.handleFocus('blur', event)}\r\n />\r\n <slot name=\"suffix\"></slot>\r\n {this.clearable && this.internalValue && (\r\n <sd-icon\r\n name=\"close\"\r\n color=\"#888\"\r\n class=\"sd-input__clear-icon\"\r\n onClick={() => {\r\n this.internalValue = '';\r\n this.sdChange?.emit(this.internalValue);\r\n this.sdInput?.emit(this.internalValue);\r\n }}\r\n />\r\n )}\r\n </label>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
@@ -0,0 +1,110 @@
1
+ import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-D_VunbXE.js';
2
+ import { d as defineCustomElement$2 } from './p-Ctp8Jcfa.js';
3
+ import { d as defineCustomElement$1 } from './p-B60pARKe.js';
4
+
5
+ const sdSelectOptionGroupCss = ".bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;color:white;background:#07284a;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__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}.sd-popover-menu{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow svg{width:100%;height:100%}.sd-popover-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content{font-size:12px;line-height:20px}.sd-popover-menu__content .sd-popover-menu__title{font-weight:700;margin-bottom:4px}.sd-popover-menu__content .sd-popover-menu__messages{font-weight:500}.sd-popover-menu__content .sd-popover-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content .sd-popover-menu__buttons--1{justify-content:flex-end}.sd-popover-menu__content .sd-popover-menu__buttons--2{justify-content:space-between}.sd-popover-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}:host{display:block;height:fit-content}.sd-select__option-group{display:flex;padding:4px 12px;padding-left:28px;font-size:12px;line-height:20px}.sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),.sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default}.sd-select__option-group.sd-select__option-group--group{padding-left:12px;background-color:#f5faff !important;color:#333333 !important;font-weight:700}.sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#f9f9f9 !important;color:#333333 !important;font-weight:500}.sd-select__option-group__checkbox-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sd-select__option-group--focused{background-color:#e6f1ff}.sd-select__option-group--selected:not(:hover):not(.sd-select__option-group--use-checkbox),.sd-select__option-group--focused:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075ff;font-weight:700}.sd-select__option-group--disabled{color:#aaaaaa;cursor:not-allowed}.sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075ff;color:white}";
6
+
7
+ const SdSelectOptionGroup = /*@__PURE__*/ proxyCustomElement(class SdSelectOptionGroup extends H {
8
+ constructor(registerHost) {
9
+ super();
10
+ if (registerHost !== false) {
11
+ this.__registerHost();
12
+ }
13
+ this.optionClick = createEvent(this, "optionClick");
14
+ }
15
+ get el() { return this; }
16
+ option;
17
+ index;
18
+ isSelected = false;
19
+ isFocused = false;
20
+ optionStyle;
21
+ disabled = false;
22
+ useCheckbox = false;
23
+ isHovered = false;
24
+ async isDisabled() {
25
+ return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';
26
+ }
27
+ optionClick;
28
+ handleClick = (option, isSelected, event) => {
29
+ event.stopPropagation();
30
+ if (option.type === 'group' || option.type === 'subgroup') {
31
+ this.optionClick.emit({
32
+ option: this.option,
33
+ isSelected,
34
+ index: this.index,
35
+ event,
36
+ });
37
+ return;
38
+ }
39
+ if (!this.option.disabled && !this.disabled) {
40
+ this.optionClick.emit({
41
+ option: this.option,
42
+ isSelected,
43
+ index: this.index,
44
+ event,
45
+ });
46
+ }
47
+ };
48
+ render() {
49
+ return (h(Host, { key: 'efe392a974379955f7530659a609c584910764eb' }, h("div", { key: '6eabbdcac6f6c2b7439e22f82d85b96b54726805', class: {
50
+ 'sd-select__option-group': true,
51
+ 'sd-select__option-group--selected': !!this.isSelected,
52
+ 'sd-select__option-group--disabled': !!this.option.disabled,
53
+ 'sd-select__option-group--focused': this.isFocused,
54
+ 'sd-select__option-group--use-checkbox': this.useCheckbox,
55
+ 'sd-select__option-group--group': this.option.type === 'group',
56
+ 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
57
+ 'sd-select__option-group--item': this.option.type === 'item',
58
+ }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, this.useCheckbox ? (h("div", { class: "sd-select__option-group__checkbox-wrapper" }, h("sd-checkbox", { checked: this.isSelected, disabled: this.option.disabled,
59
+ // checkboxStyle={
60
+ // !this.isSelected
61
+ // ? { borderColor: '#888' }
62
+ // : this.isHovered
63
+ // ? { borderColor: 'white' }
64
+ // : { borderColor: '#0075ff' }
65
+ // }
66
+ onClick: e => {
67
+ e.preventDefault();
68
+ this.handleClick(this.option, this.isSelected, e);
69
+ } }), h("span", { class: "sd-select__option-group-label" }, this.option.label))) : (this.option.label))));
70
+ }
71
+ static get style() { return sdSelectOptionGroupCss; }
72
+ }, [768, "sd-select-option-group", {
73
+ "option": [16],
74
+ "index": [2],
75
+ "isSelected": [4, "is-selected"],
76
+ "isFocused": [4, "is-focused"],
77
+ "optionStyle": [16],
78
+ "disabled": [4],
79
+ "useCheckbox": [4, "use-checkbox"],
80
+ "isHovered": [32],
81
+ "isDisabled": [64]
82
+ }]);
83
+ function defineCustomElement() {
84
+ if (typeof customElements === "undefined") {
85
+ return;
86
+ }
87
+ const components = ["sd-select-option-group", "sd-checkbox", "sd-icon"];
88
+ components.forEach(tagName => { switch (tagName) {
89
+ case "sd-select-option-group":
90
+ if (!customElements.get(tagName)) {
91
+ customElements.define(tagName, SdSelectOptionGroup);
92
+ }
93
+ break;
94
+ case "sd-checkbox":
95
+ if (!customElements.get(tagName)) {
96
+ defineCustomElement$2();
97
+ }
98
+ break;
99
+ case "sd-icon":
100
+ if (!customElements.get(tagName)) {
101
+ defineCustomElement$1();
102
+ }
103
+ break;
104
+ } });
105
+ }
106
+
107
+ export { SdSelectOptionGroup as S, defineCustomElement as d };
108
+ //# sourceMappingURL=p-CjFMRk1X.js.map
109
+
110
+ //# sourceMappingURL=p-CjFMRk1X.js.map
@@ -1 +1 @@
1
- {"file":"p-UtZuVoJ9.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.scss?tag=sd-select-option-group","src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.tsx"],"sourcesContent":["@import 'global';\r\n\r\n:host {\r\n display: block;\r\n height: fit-content;\r\n}\r\n\r\n.sd-select__option-group {\r\n display: flex;\r\n padding: 4px 12px;\r\n padding-left: 28px;\r\n font-size: 12px;\r\n line-height: 20px;\r\n\r\n &.sd-select__option-group--group,\r\n &.sd-select__option-group--subgroup {\r\n &:not(.sd-select__option-group--use-checkbox) {\r\n cursor: default;\r\n }\r\n }\r\n\r\n &.sd-select__option-group--group {\r\n padding-left: 12px;\r\n background-color: $brilliantblue_05 !important;\r\n color: $grey_90 !important;\r\n font-weight: 700;\r\n }\r\n\r\n &.sd-select__option-group--subgroup {\r\n padding-left: 20px;\r\n background-color: $grey_05 !important;\r\n color: $grey_90 !important;\r\n font-weight: 500;\r\n }\r\n\r\n &__checkbox-wrapper {\r\n display: flex;\r\n width: 100%;\r\n column-gap: 8px;\r\n align-items: center;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n &--focused {\r\n background-color: $brilliantblue_20;\r\n }\r\n\r\n &--selected,\r\n &--focused {\r\n &:not(:hover):not(.sd-select__option-group--use-checkbox) {\r\n color: $brilliantblue_75;\r\n font-weight: 700;\r\n }\r\n }\r\n\r\n &--disabled {\r\n color: $grey_55;\r\n cursor: not-allowed;\r\n }\r\n\r\n &:hover {\r\n &:not(.sd-select__option-group--disabled) {\r\n background-color: $brilliantblue_75;\r\n color: white;\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n h,\r\n Host,\r\n Method,\r\n Prop,\r\n State,\r\n} from '@stencil/core';\r\nimport { SelectOptionGroup } from '../../sd-select/sd-select';\r\n\r\n@Component({\r\n tag: 'sd-select-option-group',\r\n styleUrl: 'sd-select-option-group.scss',\r\n})\r\nexport class SdSelectOptionGroup {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() option!: SelectOptionGroup;\r\n @Prop() index!: number;\r\n @Prop() isSelected: boolean | null = false;\r\n @Prop() isFocused: boolean = false;\r\n @Prop() optionStyle?: { [key: string]: string };\r\n @Prop() disabled: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n\r\n @State() isHovered: boolean = false;\r\n\r\n @Method()\r\n async isDisabled(): Promise<boolean> {\r\n return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';\r\n }\r\n\r\n @Event() optionClick!: EventEmitter<{\r\n option: SelectOptionGroup;\r\n isSelected: boolean | null;\r\n index: number;\r\n event: MouseEvent;\r\n }>;\r\n\r\n private handleClick = (\r\n option: SelectOptionGroup,\r\n isSelected: boolean | null,\r\n event: MouseEvent,\r\n ) => {\r\n event.stopPropagation();\r\n\r\n if (option.type === 'group' || option.type === 'subgroup') {\r\n this.optionClick.emit({\r\n option: this.option,\r\n isSelected,\r\n index: this.index,\r\n event,\r\n });\r\n return;\r\n }\r\n\r\n if (!this.option.disabled && !this.disabled) {\r\n this.optionClick.emit({\r\n option: this.option,\r\n isSelected,\r\n index: this.index,\r\n event,\r\n });\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div\r\n class={{\r\n 'sd-select__option-group': true,\r\n 'sd-select__option-group--selected': !!this.isSelected,\r\n 'sd-select__option-group--disabled': !!this.option.disabled,\r\n 'sd-select__option-group--focused': this.isFocused,\r\n 'sd-select__option-group--use-checkbox': this.useCheckbox,\r\n 'sd-select__option-group--group': this.option.type === 'group',\r\n 'sd-select__option-group--subgroup': this.option.type === 'subgroup',\r\n 'sd-select__option-group--item': this.option.type === 'item',\r\n }}\r\n onMouseEnter={() => (this.isHovered = true)}\r\n onMouseLeave={() => (this.isHovered = false)}\r\n style={this.optionStyle}\r\n data-index={this.index}\r\n onClick={event => this.handleClick(this.option, this.isSelected, event)}\r\n >\r\n {this.useCheckbox ? (\r\n <div class=\"sd-select__option-group__checkbox-wrapper\">\r\n <sd-checkbox\r\n checked={this.isSelected}\r\n disabled={this.option.disabled}\r\n // checkboxStyle={\r\n // !this.isSelected\r\n // ? { borderColor: '#888' }\r\n // : this.isHovered\r\n // ? { borderColor: 'white' }\r\n // : { borderColor: '#0075ff' }\r\n // }\r\n onClick={e => {\r\n e.preventDefault();\r\n this.handleClick(this.option, this.isSelected, e);\r\n }}\r\n ></sd-checkbox>\r\n <span class=\"sd-select__option-group-label\">{this.option.label}</span>\r\n </div>\r\n ) : (\r\n this.option.label\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"p-CjFMRk1X.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.scss?tag=sd-select-option-group","src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.tsx"],"sourcesContent":["@import 'global';\r\n\r\n:host {\r\n display: block;\r\n height: fit-content;\r\n}\r\n\r\n.sd-select__option-group {\r\n display: flex;\r\n padding: 4px 12px;\r\n padding-left: 28px;\r\n font-size: 12px;\r\n line-height: 20px;\r\n\r\n &.sd-select__option-group--group,\r\n &.sd-select__option-group--subgroup {\r\n &:not(.sd-select__option-group--use-checkbox) {\r\n cursor: default;\r\n }\r\n }\r\n\r\n &.sd-select__option-group--group {\r\n padding-left: 12px;\r\n background-color: $brilliantblue_05 !important;\r\n color: $grey_90 !important;\r\n font-weight: 700;\r\n }\r\n\r\n &.sd-select__option-group--subgroup {\r\n padding-left: 20px;\r\n background-color: $grey_05 !important;\r\n color: $grey_90 !important;\r\n font-weight: 500;\r\n }\r\n\r\n &__checkbox-wrapper {\r\n display: flex;\r\n width: 100%;\r\n column-gap: 8px;\r\n align-items: center;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n &--focused {\r\n background-color: $brilliantblue_20;\r\n }\r\n\r\n &--selected,\r\n &--focused {\r\n &:not(:hover):not(.sd-select__option-group--use-checkbox) {\r\n color: $brilliantblue_75;\r\n font-weight: 700;\r\n }\r\n }\r\n\r\n &--disabled {\r\n color: $grey_55;\r\n cursor: not-allowed;\r\n }\r\n\r\n &:hover {\r\n &:not(.sd-select__option-group--disabled) {\r\n background-color: $brilliantblue_75;\r\n color: white;\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n h,\r\n Host,\r\n Method,\r\n Prop,\r\n State,\r\n} from '@stencil/core';\r\nimport { SelectOptionGroup } from '../../sd-select/sd-select';\r\n\r\n@Component({\r\n tag: 'sd-select-option-group',\r\n styleUrl: 'sd-select-option-group.scss',\r\n})\r\nexport class SdSelectOptionGroup {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() option!: SelectOptionGroup;\r\n @Prop() index!: number;\r\n @Prop() isSelected: boolean | null = false;\r\n @Prop() isFocused: boolean = false;\r\n @Prop() optionStyle?: { [key: string]: string };\r\n @Prop() disabled: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n\r\n @State() isHovered: boolean = false;\r\n\r\n @Method()\r\n async isDisabled(): Promise<boolean> {\r\n return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';\r\n }\r\n\r\n @Event() optionClick!: EventEmitter<{\r\n option: SelectOptionGroup;\r\n isSelected: boolean | null;\r\n index: number;\r\n event: MouseEvent;\r\n }>;\r\n\r\n private handleClick = (\r\n option: SelectOptionGroup,\r\n isSelected: boolean | null,\r\n event: MouseEvent,\r\n ) => {\r\n event.stopPropagation();\r\n\r\n if (option.type === 'group' || option.type === 'subgroup') {\r\n this.optionClick.emit({\r\n option: this.option,\r\n isSelected,\r\n index: this.index,\r\n event,\r\n });\r\n return;\r\n }\r\n\r\n if (!this.option.disabled && !this.disabled) {\r\n this.optionClick.emit({\r\n option: this.option,\r\n isSelected,\r\n index: this.index,\r\n event,\r\n });\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div\r\n class={{\r\n 'sd-select__option-group': true,\r\n 'sd-select__option-group--selected': !!this.isSelected,\r\n 'sd-select__option-group--disabled': !!this.option.disabled,\r\n 'sd-select__option-group--focused': this.isFocused,\r\n 'sd-select__option-group--use-checkbox': this.useCheckbox,\r\n 'sd-select__option-group--group': this.option.type === 'group',\r\n 'sd-select__option-group--subgroup': this.option.type === 'subgroup',\r\n 'sd-select__option-group--item': this.option.type === 'item',\r\n }}\r\n onMouseEnter={() => (this.isHovered = true)}\r\n onMouseLeave={() => (this.isHovered = false)}\r\n style={this.optionStyle}\r\n data-index={this.index}\r\n onClick={event => this.handleClick(this.option, this.isSelected, event)}\r\n >\r\n {this.useCheckbox ? (\r\n <div class=\"sd-select__option-group__checkbox-wrapper\">\r\n <sd-checkbox\r\n checked={this.isSelected}\r\n disabled={this.option.disabled}\r\n // checkboxStyle={\r\n // !this.isSelected\r\n // ? { borderColor: '#888' }\r\n // : this.isHovered\r\n // ? { borderColor: 'white' }\r\n // : { borderColor: '#0075ff' }\r\n // }\r\n onClick={e => {\r\n e.preventDefault();\r\n this.handleClick(this.option, this.isSelected, e);\r\n }}\r\n ></sd-checkbox>\r\n <span class=\"sd-select__option-group-label\">{this.option.label}</span>\r\n </div>\r\n ) : (\r\n this.option.label\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
@@ -0,0 +1,118 @@
1
+ import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-D_VunbXE.js';
2
+ import { d as defineCustomElement$1 } from './p-B60pARKe.js';
3
+
4
+ const sdCheckboxCss = ".bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;color:white;background:#07284a;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__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}.sd-popover-menu{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow svg{width:100%;height:100%}.sd-popover-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content{font-size:12px;line-height:20px}.sd-popover-menu__content .sd-popover-menu__title{font-weight:700;margin-bottom:4px}.sd-popover-menu__content .sd-popover-menu__messages{font-weight:500}.sd-popover-menu__content .sd-popover-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content .sd-popover-menu__buttons--1{justify-content:flex-end}.sd-popover-menu__content .sd-popover-menu__buttons--2{justify-content:space-between}.sd-popover-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}:host{display:inline-block;height:fit-content;line-height:0}.sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px;max-height:20px}.sd-checkbox>input{display:none}.sd-checkbox:hover.sd-checkbox--checked .sd-checkbox__bg,.sd-checkbox:hover.sd-checkbox--indeterminate .sd-checkbox__bg{border-color:1px solid #005cc9;background:#005cc9}.sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border:1px solid #0075ff;background:#d9eaff}.sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border:1px solid transparent;background:#eeeeee}.sd-checkbox__bg{width:16px;height:16px;border-radius:2px;border:1px solid #888888;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}.sd-checkbox__label{font-size:12px;color:#333333;line-height:20px}.sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,.sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:#eeeeee;border:1px solid #cccccc !important}.sd-checkbox--checked .sd-checkbox__bg,.sd-checkbox--indeterminate .sd-checkbox__bg{border:1px solid #0075ff;background:#0075ff}.sd-checkbox--unchecked .sd-checkbox__bg{background:white}.sd-checkbox--disabled{cursor:not-allowed}.sd-checkbox--disabled .sd-checkbox__bg{background:#eeeeee;border:1px solid #cccccc !important}";
5
+
6
+ const SdCheckbox = /*@__PURE__*/ proxyCustomElement(class SdCheckbox extends H {
7
+ constructor(registerHost) {
8
+ super();
9
+ if (registerHost !== false) {
10
+ this.__registerHost();
11
+ }
12
+ this.sdChange = createEvent(this, "sdChange");
13
+ }
14
+ get el() { return this; }
15
+ /** 현재 선택 상태 또는 배열 형태의 값 */
16
+ checked;
17
+ /** 배열 모드에서의 개별 값 */
18
+ val;
19
+ /** 비활성화 여부 */
20
+ disabled = false;
21
+ /** 표시할 라벨 텍스트 */
22
+ label = '';
23
+ /** 내부 체크 상태 */
24
+ isChecked = false;
25
+ /** 값 변경 이벤트 */
26
+ sdChange;
27
+ componentWillLoad() {
28
+ this.updateCheckedState(this.checked);
29
+ }
30
+ componentWillRender() {
31
+ this.updateCheckedState(this.checked);
32
+ }
33
+ watchValueHandler(newValue) {
34
+ this.updateCheckedState(newValue);
35
+ }
36
+ get checkboxClasses() {
37
+ const classes = [
38
+ 'sd-checkbox',
39
+ `sd-checkbox--${this.isChecked ? 'checked' : this.isChecked === null ? 'indeterminate' : 'unchecked'}`,
40
+ ];
41
+ if (this.disabled) {
42
+ classes.push('sd-checkbox--disabled');
43
+ }
44
+ return classes.join(' ');
45
+ }
46
+ updateCheckedState(value) {
47
+ if (value === null) {
48
+ this.isChecked = null;
49
+ }
50
+ else if (typeof value === 'boolean') {
51
+ this.isChecked = value;
52
+ }
53
+ else if (Array.isArray(value)) {
54
+ this.isChecked = this.val !== undefined && value.includes(this.val);
55
+ }
56
+ else {
57
+ this.isChecked = false;
58
+ }
59
+ }
60
+ handleChange = () => {
61
+ if (this.disabled)
62
+ return;
63
+ let newValue;
64
+ if (typeof this.checked === 'boolean') {
65
+ newValue = !this.checked;
66
+ }
67
+ else if (Array.isArray(this.checked)) {
68
+ if (this.val === undefined) {
69
+ console.warn('A "val" property is required when using an array for the "value" property.');
70
+ }
71
+ const valueSet = new Set(this.checked);
72
+ valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);
73
+ newValue = Array.from(valueSet);
74
+ }
75
+ else {
76
+ newValue = !this.isChecked;
77
+ }
78
+ this.sdChange.emit(newValue);
79
+ };
80
+ render() {
81
+ return (h(Host, { key: '624520a83168579af598630b2bfd0ccb7c425060' }, h("label", { key: '91466e48e57f8d3594e1d04d622f3bbe639c3538', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "checkbox", "aria-label": this.label || 'checkbox', class: this.checkboxClasses }, h("input", { key: '8816463c045a424983087e1202d661eaa86233a1', type: "checkbox", value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.label || 'checkbox' }), h("div", { key: '458875d9fdcd993c7038133d71bb85a879c1c018', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: 12, color: this.disabled ? '#888888' : 'white' })) : null), this.label && h("span", { key: '37264c19fac0d72f425080ca9d7072a23a4251c9', class: "sd-checkbox__label" }, this.label))));
82
+ }
83
+ static get watchers() { return {
84
+ "checked": ["watchValueHandler"]
85
+ }; }
86
+ static get style() { return sdCheckboxCss; }
87
+ }, [768, "sd-checkbox", {
88
+ "checked": [4],
89
+ "val": [8],
90
+ "disabled": [4],
91
+ "label": [1],
92
+ "isChecked": [32]
93
+ }, undefined, {
94
+ "checked": ["watchValueHandler"]
95
+ }]);
96
+ function defineCustomElement() {
97
+ if (typeof customElements === "undefined") {
98
+ return;
99
+ }
100
+ const components = ["sd-checkbox", "sd-icon"];
101
+ components.forEach(tagName => { switch (tagName) {
102
+ case "sd-checkbox":
103
+ if (!customElements.get(tagName)) {
104
+ customElements.define(tagName, SdCheckbox);
105
+ }
106
+ break;
107
+ case "sd-icon":
108
+ if (!customElements.get(tagName)) {
109
+ defineCustomElement$1();
110
+ }
111
+ break;
112
+ } });
113
+ }
114
+
115
+ export { SdCheckbox as S, defineCustomElement as d };
116
+ //# sourceMappingURL=p-Ctp8Jcfa.js.map
117
+
118
+ //# sourceMappingURL=p-Ctp8Jcfa.js.map