le-kit 0.1.16 → 0.1.18

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 (237) hide show
  1. package/dist/cjs/{index-CHzu3ydp.js → index-pT2cVC5w.js} +10 -4
  2. package/dist/cjs/index-pT2cVC5w.js.map +1 -0
  3. package/dist/cjs/index.cjs.js +4 -2
  4. package/dist/cjs/le-box.cjs.entry.js +4 -4
  5. package/dist/cjs/le-button_13.cjs.entry.js +204 -30
  6. package/dist/cjs/le-card.cjs.entry.js +4 -4
  7. package/dist/cjs/le-combobox.cjs.entry.js +3 -3
  8. package/dist/cjs/le-header-placeholder.cjs.entry.js +1 -1
  9. package/dist/cjs/le-kit.cjs.js +4 -2
  10. package/dist/cjs/le-kit.cjs.js.map +1 -1
  11. package/dist/cjs/le-multiselect.cjs.entry.js +3 -3
  12. package/dist/cjs/le-number-input.cjs.entry.js +4 -4
  13. package/dist/cjs/le-round-progress.cjs.entry.js +3 -3
  14. package/dist/cjs/le-segmented-control.cjs.entry.js +3 -3
  15. package/dist/cjs/le-stack.cjs.entry.js +4 -4
  16. package/dist/cjs/le-tab-bar.cjs.entry.js +3 -3
  17. package/dist/cjs/le-tab-panel.cjs.entry.js +3 -3
  18. package/dist/cjs/le-tab.cjs.entry.js +7 -4
  19. package/dist/cjs/le-tabs.cjs.entry.js +4 -4
  20. package/dist/cjs/le-tag.cjs.entry.js +3 -3
  21. package/dist/cjs/le-text.cjs.entry.js +4 -4
  22. package/dist/cjs/le-turntable.cjs.entry.js +3 -3
  23. package/dist/cjs/loader.cjs.js +3 -1
  24. package/dist/cjs/loader.cjs.js.map +1 -1
  25. package/dist/cjs/{utils-CYOKcOW8.js → utils-ByTskwtC.js} +3 -3
  26. package/dist/cjs/{utils-CYOKcOW8.js.map → utils-ByTskwtC.js.map} +1 -1
  27. package/dist/collection/collection-manifest.json +2 -2
  28. package/dist/collection/components/le-button/le-button.js +8 -6
  29. package/dist/collection/components/le-button/le-button.js.map +1 -1
  30. package/dist/collection/components/le-component/le-component.js +2 -0
  31. package/dist/collection/components/le-component/le-component.js.map +1 -1
  32. package/dist/collection/components/le-current-heading/le-current-heading.css +1 -0
  33. package/dist/collection/dist/components/assets/custom-elements.json +787 -791
  34. package/dist/components/assets/custom-elements.json +787 -791
  35. package/dist/components/le-box.js +14 -14
  36. package/dist/components/le-box.js.map +1 -1
  37. package/dist/components/le-button2.js +97 -89
  38. package/dist/components/le-button2.js.map +1 -1
  39. package/dist/components/le-card.js +14 -14
  40. package/dist/components/le-card.js.map +1 -1
  41. package/dist/components/le-collapse.js +15 -14
  42. package/dist/components/le-collapse.js.map +1 -1
  43. package/dist/components/le-combobox.js +14 -14
  44. package/dist/components/le-combobox.js.map +1 -1
  45. package/dist/components/le-current-heading.js +5 -5
  46. package/dist/components/le-current-heading.js.map +1 -1
  47. package/dist/components/le-dropdown-base2.js +6 -6
  48. package/dist/components/le-dropdown-base2.js.map +1 -1
  49. package/dist/components/le-header-placeholder.js +3 -3
  50. package/dist/components/le-header.js +16 -14
  51. package/dist/components/le-header.js.map +1 -1
  52. package/dist/components/le-multiselect.js +15 -15
  53. package/dist/components/le-multiselect.js.map +1 -1
  54. package/dist/components/le-number-input.js +14 -14
  55. package/dist/components/le-number-input.js.map +1 -1
  56. package/dist/components/le-popover2.js +168 -5
  57. package/dist/components/le-popover2.js.map +1 -1
  58. package/dist/components/le-round-progress.js +5 -5
  59. package/dist/components/le-round-progress.js.map +1 -1
  60. package/dist/components/le-scroll-progress.js +5 -5
  61. package/dist/components/le-scroll-progress.js.map +1 -1
  62. package/dist/components/le-segmented-control.js +15 -15
  63. package/dist/components/le-segmented-control.js.map +1 -1
  64. package/dist/components/le-stack.js +14 -14
  65. package/dist/components/le-stack.js.map +1 -1
  66. package/dist/components/le-tab-bar.js +15 -15
  67. package/dist/components/le-tab-bar.js.map +1 -1
  68. package/dist/components/le-tab-panel.js +14 -14
  69. package/dist/components/le-tab-panel.js.map +1 -1
  70. package/dist/components/le-tab2.js +17 -14
  71. package/dist/components/le-tab2.js.map +1 -1
  72. package/dist/components/le-tabs.js +15 -15
  73. package/dist/components/le-tabs.js.map +1 -1
  74. package/dist/components/le-tag2.js +14 -14
  75. package/dist/components/le-tag2.js.map +1 -1
  76. package/dist/components/le-text.js +14 -14
  77. package/dist/components/le-text.js.map +1 -1
  78. package/dist/components/le-turntable.js +5 -5
  79. package/dist/components/le-turntable.js.map +1 -1
  80. package/dist/docs.json +8 -8
  81. package/dist/esm/{index-hmBwv43R.js → index-CNv6tzAt.js} +10 -4
  82. package/dist/esm/index-CNv6tzAt.js.map +1 -0
  83. package/dist/esm/index.js +4 -2
  84. package/dist/esm/le-box.entry.js +4 -4
  85. package/dist/esm/le-box.entry.js.map +1 -1
  86. package/dist/esm/le-button_13.entry.js +204 -30
  87. package/dist/esm/le-card.entry.js +4 -4
  88. package/dist/esm/le-card.entry.js.map +1 -1
  89. package/dist/esm/le-combobox.entry.js +3 -3
  90. package/dist/esm/le-combobox.entry.js.map +1 -1
  91. package/dist/esm/le-header-placeholder.entry.js +1 -1
  92. package/dist/esm/le-kit.js +5 -3
  93. package/dist/esm/le-kit.js.map +1 -1
  94. package/dist/esm/le-multiselect.entry.js +3 -3
  95. package/dist/esm/le-multiselect.entry.js.map +1 -1
  96. package/dist/esm/le-number-input.entry.js +4 -4
  97. package/dist/esm/le-number-input.entry.js.map +1 -1
  98. package/dist/esm/le-round-progress.entry.js +3 -3
  99. package/dist/esm/le-round-progress.entry.js.map +1 -1
  100. package/dist/esm/le-segmented-control.entry.js +3 -3
  101. package/dist/esm/le-segmented-control.entry.js.map +1 -1
  102. package/dist/esm/le-stack.entry.js +4 -4
  103. package/dist/esm/le-stack.entry.js.map +1 -1
  104. package/dist/esm/le-tab-bar.entry.js +3 -3
  105. package/dist/esm/le-tab-bar.entry.js.map +1 -1
  106. package/dist/esm/le-tab-panel.entry.js +3 -3
  107. package/dist/esm/le-tab-panel.entry.js.map +1 -1
  108. package/dist/esm/le-tab.entry.js +7 -4
  109. package/dist/esm/le-tab.entry.js.map +1 -1
  110. package/dist/esm/le-tabs.entry.js +4 -4
  111. package/dist/esm/le-tabs.entry.js.map +1 -1
  112. package/dist/esm/le-tag.entry.js +3 -3
  113. package/dist/esm/le-tag.entry.js.map +1 -1
  114. package/dist/esm/le-text.entry.js +4 -4
  115. package/dist/esm/le-text.entry.js.map +1 -1
  116. package/dist/esm/le-turntable.entry.js +3 -3
  117. package/dist/esm/le-turntable.entry.js.map +1 -1
  118. package/dist/esm/loader.js +4 -2
  119. package/dist/esm/{utils-DRTFlnxz.js → utils-BzC2tvPX.js} +3 -3
  120. package/dist/esm/{utils-DRTFlnxz.js.map → utils-BzC2tvPX.js.map} +1 -1
  121. package/dist/le-kit/dist/components/assets/custom-elements.json +787 -791
  122. package/dist/le-kit/index.esm.js +1 -1
  123. package/dist/le-kit/le-kit.esm.js +1 -1
  124. package/dist/le-kit/le-kit.esm.js.map +1 -1
  125. package/dist/le-kit/p-269fb44f.entry.js +2 -0
  126. package/dist/le-kit/p-269fb44f.entry.js.map +1 -0
  127. package/dist/le-kit/p-31c3649c.entry.js +2 -0
  128. package/dist/le-kit/p-31c3649c.entry.js.map +1 -0
  129. package/dist/le-kit/p-3829f572.entry.js +2 -0
  130. package/dist/le-kit/p-3829f572.entry.js.map +1 -0
  131. package/dist/le-kit/p-629c5e13.entry.js +2 -0
  132. package/dist/le-kit/p-629c5e13.entry.js.map +1 -0
  133. package/dist/le-kit/p-684adc9f.entry.js +2 -0
  134. package/dist/le-kit/p-684adc9f.entry.js.map +1 -0
  135. package/dist/le-kit/p-7d316315.entry.js +2 -0
  136. package/dist/le-kit/p-7d316315.entry.js.map +1 -0
  137. package/dist/le-kit/p-8a78110f.entry.js +2 -0
  138. package/dist/le-kit/p-8a78110f.entry.js.map +1 -0
  139. package/dist/le-kit/p-8afe6862.entry.js +2 -0
  140. package/dist/le-kit/p-8afe6862.entry.js.map +1 -0
  141. package/dist/le-kit/p-95cf203e.entry.js +2 -0
  142. package/dist/le-kit/p-95cf203e.entry.js.map +1 -0
  143. package/dist/le-kit/p-9ba2bfb3.entry.js +2 -0
  144. package/dist/le-kit/p-9ba2bfb3.entry.js.map +1 -0
  145. package/dist/le-kit/{p-hmBwv43R.js → p-CNv6tzAt.js} +2 -2
  146. package/dist/le-kit/p-CNv6tzAt.js.map +1 -0
  147. package/dist/le-kit/{p-txKmCJHv.js → p-W4FbLlut.js} +2 -2
  148. package/dist/le-kit/{p-txKmCJHv.js.map → p-W4FbLlut.js.map} +1 -1
  149. package/dist/le-kit/p-aaec0169.entry.js +2 -0
  150. package/dist/le-kit/p-aaec0169.entry.js.map +1 -0
  151. package/dist/le-kit/p-b3531106.entry.js +2 -0
  152. package/dist/le-kit/p-b3531106.entry.js.map +1 -0
  153. package/dist/le-kit/p-c83a1255.entry.js +2 -0
  154. package/dist/le-kit/p-c83a1255.entry.js.map +1 -0
  155. package/dist/le-kit/p-d2a5d431.entry.js +2 -0
  156. package/dist/le-kit/p-d2a5d431.entry.js.map +1 -0
  157. package/dist/le-kit/p-deef1f4d.entry.js +2 -0
  158. package/dist/le-kit/p-deef1f4d.entry.js.map +1 -0
  159. package/dist/le-kit/p-e07d4b78.entry.js +2 -0
  160. package/dist/le-kit/p-e4618b36.entry.js +2 -0
  161. package/dist/le-kit/p-e4618b36.entry.js.map +1 -0
  162. package/dist/types/components/le-button/le-button.d.ts +1 -1
  163. package/dist/types/components.d.ts +2 -2
  164. package/dist/types/stencil-public-runtime.d.ts +43 -0
  165. package/package.json +1 -1
  166. package/dist/cjs/index-CHzu3ydp.js.map +0 -1
  167. package/dist/cjs/le-box.entry.cjs.js.map +0 -1
  168. package/dist/cjs/le-button.le-checkbox.le-collapse.le-component.le-current-heading.le-dropdown-base.le-header.le-popover.le-popup.le-scroll-progress.le-select.le-slot.le-string-input.entry.cjs.js.map +0 -1
  169. package/dist/cjs/le-card.entry.cjs.js.map +0 -1
  170. package/dist/cjs/le-combobox.entry.cjs.js.map +0 -1
  171. package/dist/cjs/le-header-placeholder.entry.cjs.js.map +0 -1
  172. package/dist/cjs/le-multiselect.entry.cjs.js.map +0 -1
  173. package/dist/cjs/le-number-input.entry.cjs.js.map +0 -1
  174. package/dist/cjs/le-round-progress.entry.cjs.js.map +0 -1
  175. package/dist/cjs/le-segmented-control.entry.cjs.js.map +0 -1
  176. package/dist/cjs/le-stack.entry.cjs.js.map +0 -1
  177. package/dist/cjs/le-tab-bar.entry.cjs.js.map +0 -1
  178. package/dist/cjs/le-tab-panel.entry.cjs.js.map +0 -1
  179. package/dist/cjs/le-tab.entry.cjs.js.map +0 -1
  180. package/dist/cjs/le-tabs.entry.cjs.js.map +0 -1
  181. package/dist/cjs/le-tag.entry.cjs.js.map +0 -1
  182. package/dist/cjs/le-text.entry.cjs.js.map +0 -1
  183. package/dist/cjs/le-turntable.entry.cjs.js.map +0 -1
  184. package/dist/esm/index-hmBwv43R.js.map +0 -1
  185. package/dist/esm/le-button.le-checkbox.le-collapse.le-component.le-current-heading.le-dropdown-base.le-header.le-popover.le-popup.le-scroll-progress.le-select.le-slot.le-string-input.entry.js.map +0 -1
  186. package/dist/le-kit/le-box.entry.esm.js.map +0 -1
  187. package/dist/le-kit/le-button.le-checkbox.le-collapse.le-component.le-current-heading.le-dropdown-base.le-header.le-popover.le-popup.le-scroll-progress.le-select.le-slot.le-string-input.entry.esm.js.map +0 -1
  188. package/dist/le-kit/le-card.entry.esm.js.map +0 -1
  189. package/dist/le-kit/le-combobox.entry.esm.js.map +0 -1
  190. package/dist/le-kit/le-header-placeholder.entry.esm.js.map +0 -1
  191. package/dist/le-kit/le-multiselect.entry.esm.js.map +0 -1
  192. package/dist/le-kit/le-number-input.entry.esm.js.map +0 -1
  193. package/dist/le-kit/le-round-progress.entry.esm.js.map +0 -1
  194. package/dist/le-kit/le-segmented-control.entry.esm.js.map +0 -1
  195. package/dist/le-kit/le-stack.entry.esm.js.map +0 -1
  196. package/dist/le-kit/le-tab-bar.entry.esm.js.map +0 -1
  197. package/dist/le-kit/le-tab-panel.entry.esm.js.map +0 -1
  198. package/dist/le-kit/le-tab.entry.esm.js.map +0 -1
  199. package/dist/le-kit/le-tabs.entry.esm.js.map +0 -1
  200. package/dist/le-kit/le-tag.entry.esm.js.map +0 -1
  201. package/dist/le-kit/le-text.entry.esm.js.map +0 -1
  202. package/dist/le-kit/le-turntable.entry.esm.js.map +0 -1
  203. package/dist/le-kit/p-13a4dc1d.entry.js +0 -2
  204. package/dist/le-kit/p-13a4dc1d.entry.js.map +0 -1
  205. package/dist/le-kit/p-1a9e65d0.entry.js +0 -2
  206. package/dist/le-kit/p-1a9e65d0.entry.js.map +0 -1
  207. package/dist/le-kit/p-2708dc65.entry.js +0 -2
  208. package/dist/le-kit/p-2708dc65.entry.js.map +0 -1
  209. package/dist/le-kit/p-2b96a5bd.entry.js +0 -2
  210. package/dist/le-kit/p-32cbb683.entry.js +0 -2
  211. package/dist/le-kit/p-32cbb683.entry.js.map +0 -1
  212. package/dist/le-kit/p-476e1886.entry.js +0 -2
  213. package/dist/le-kit/p-476e1886.entry.js.map +0 -1
  214. package/dist/le-kit/p-67d702f9.entry.js +0 -2
  215. package/dist/le-kit/p-67d702f9.entry.js.map +0 -1
  216. package/dist/le-kit/p-6884e3e8.entry.js +0 -2
  217. package/dist/le-kit/p-6884e3e8.entry.js.map +0 -1
  218. package/dist/le-kit/p-704ad5e0.entry.js +0 -2
  219. package/dist/le-kit/p-704ad5e0.entry.js.map +0 -1
  220. package/dist/le-kit/p-88f9aa40.entry.js +0 -2
  221. package/dist/le-kit/p-88f9aa40.entry.js.map +0 -1
  222. package/dist/le-kit/p-8dd8a487.entry.js +0 -2
  223. package/dist/le-kit/p-8dd8a487.entry.js.map +0 -1
  224. package/dist/le-kit/p-97b7658a.entry.js +0 -2
  225. package/dist/le-kit/p-97b7658a.entry.js.map +0 -1
  226. package/dist/le-kit/p-c0925e92.entry.js +0 -2
  227. package/dist/le-kit/p-c0925e92.entry.js.map +0 -1
  228. package/dist/le-kit/p-c2494a0d.entry.js +0 -2
  229. package/dist/le-kit/p-c2494a0d.entry.js.map +0 -1
  230. package/dist/le-kit/p-ded51018.entry.js +0 -2
  231. package/dist/le-kit/p-ded51018.entry.js.map +0 -1
  232. package/dist/le-kit/p-e3db7974.entry.js +0 -2
  233. package/dist/le-kit/p-e3db7974.entry.js.map +0 -1
  234. package/dist/le-kit/p-f9b03aec.entry.js +0 -2
  235. package/dist/le-kit/p-f9b03aec.entry.js.map +0 -1
  236. package/dist/le-kit/p-hmBwv43R.js.map +0 -1
  237. /package/dist/le-kit/{p-2b96a5bd.entry.js.map → p-e07d4b78.entry.js.map} +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"le-card.entry.js","sources":["src/components/le-card/le-card.default.css?tag=le-card&encapsulation=shadow","src/components/le-card/le-card.tsx"],"sourcesContent":["/**\n * Default mode styles for le-card\n * Uses global design tokens with component-specific overrides\n */\n:host {\n display: block;\n \n /* Component-specific tokens that map to global tokens */\n --le-card-bg: var(--le-color-surface);\n --le-card-border-radius: var(--le-radius-lg);\n --le-card-shadow: var(--le-shadow-md);\n --le-card-shadow-elevated: var(--le-shadow-lg);\n --le-card-shadow-hover: var(--le-shadow-xl);\n --le-card-padding: var(--le-space-md);\n --le-card-border-color: var(--le-color-border);\n --le-card-transition: var(--le-transition-normal);\n}\n\n.card {\n background: var(--le-card-bg);\n border-radius: var(--le-card-border-radius);\n overflow: hidden;\n color: var(--le-color-text);\n box-shadow: var(--le-card-shadow);\n}\n\n/* Variants - le-component gets the hostClass, so we use :host > le-component */\n:host > le-component.variant-outlined .card {\n border: 1px solid var(--le-card-border-color);\n box-shadow: none;\n}\n\n:host > le-component.variant-elevated .card {\n box-shadow: var(--le-card-shadow-elevated);\n}\n\n/* Interactive state */\n:host > le-component.interactive .card {\n cursor: pointer;\n transition: transform var(--le-card-transition), box-shadow var(--le-card-transition);\n}\n\n:host > le-component.interactive .card:hover {\n transform: translateY(-2px);\n box-shadow: var(--le-card-shadow-hover);\n}\n\n:host > le-component.interactive .card:focus-visible {\n outline: 2px solid var(--le-color-border-focus);\n outline-offset: 2px;\n}\n\n/* Sections */\n.card-header {\n padding: var(--le-card-padding);\n padding-bottom: 0;\n}\n\n.card-header:empty {\n display: none;\n}\n\n.card-content {\n padding: var(--le-card-padding);\n}\n\n.card-footer {\n padding: var(--le-card-padding);\n padding-top: 0;\n}\n\n.card-footer:empty {\n display: none;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible card component with header, content, and footer slots.\n *\n * The card uses le-slot wrappers for each slot area. In admin mode,\n * le-slot shows placeholders for CMS editing. In default mode,\n * le-slot acts as a transparent passthrough.\n *\n * @slot header - Card header content (title, actions)\n * @slot - Default slot for main card content\n * @slot footer - Card footer content (buttons, links)\n *\n * @cssprop --le-card-bg - Card background color\n * @cssprop --le-card-border-radius - Card border radius\n * @cssprop --le-card-shadow - Card box shadow\n * @cssprop --le-card-padding - Card content padding\n *\n * @csspart card - The main card container\n * @csspart header - The card header section\n * @csspart content - The card content section\n * @csspart footer - The card footer section\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n tag: 'le-card',\n styleUrl: 'le-card.default.css',\n shadow: true,\n})\nexport class LeCard {\n @Element() el: HTMLElement;\n\n /**\n * Card variant style\n * @allowedValues default | outlined | elevated\n */\n @Prop() variant: 'default' | 'outlined' | 'elevated' = 'default';\n\n /**\n * Whether the card is interactive (clickable)\n */\n @Prop() interactive: boolean = false;\n\n render() {\n return (\n <le-component component=\"le-card\" hostClass={classnames(`variant-${this.variant}`, { 'interactive': this.interactive })}>\n <div class=\"card\" part=\"card\">\n <div class=\"card-header\" part=\"header\">\n <le-slot name=\"header\" label=\"Header\" description=\"Card title\" type=\"text\" tag=\"h3\">\n <slot name=\"header\"></slot>\n </le-slot>\n </div>\n\n <div class=\"card-content\" part=\"content\">\n <le-slot name=\"\" label=\"Content\" description=\"Card content\" type=\"textarea\" tag=\"p\" required>\n <slot></slot>\n </le-slot>\n </div>\n\n <div class=\"card-footer\" part=\"footer\">\n <le-slot name=\"footer\" label=\"Footer\" description=\"Card footer with actions\" allowed-components=\"le-button,le-link\">\n <slot name=\"footer\"></slot>\n </le-slot>\n </div>\n </div>\n </le-component>\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,gBAAgB,GAAG,6wCAA6wC;;MCgCzxC,MAAM,GAAA,MAAA;;;;;AAGjB;;;AAGG;IACK,OAAO,GAAwC,SAAS;AAEhE;;AAEG;IACK,WAAW,GAAY,KAAK;IAEpC,MAAM,GAAA;QACJ,QACE,qEAAc,SAAS,EAAC,SAAS,EAAC,SAAS,EAAE,UAAU,CAAC,CAAA,QAAA,EAAW,IAAI,CAAC,OAAO,CAAA,CAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EAAA,EACrH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EACpC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,WAAW,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,IAAI,EAAA,EACjF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACnB,CACN,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,SAAS,EAAA,EACtC,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,WAAW,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,EAAC,GAAG,EAAC,GAAG,EAAC,QAAQ,EAAA,IAAA,EAAA,EAC1F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACL,CACN,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EACpC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,WAAW,EAAC,0BAA0B,EAAA,oBAAA,EAAoB,mBAAmB,EAAA,EACjH,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACnB,CACN,CACF,CACO;;;;;;;"}
1
+ {"version":3,"file":"le-card.entry.js","sources":["src/components/le-card/le-card.default.css?tag=le-card&encapsulation=shadow","src/components/le-card/le-card.tsx"],"sourcesContent":["/**\n * Default mode styles for le-card\n * Uses global design tokens with component-specific overrides\n */\n:host {\n display: block;\n \n /* Component-specific tokens that map to global tokens */\n --le-card-bg: var(--le-color-surface);\n --le-card-border-radius: var(--le-radius-lg);\n --le-card-shadow: var(--le-shadow-md);\n --le-card-shadow-elevated: var(--le-shadow-lg);\n --le-card-shadow-hover: var(--le-shadow-xl);\n --le-card-padding: var(--le-space-md);\n --le-card-border-color: var(--le-color-border);\n --le-card-transition: var(--le-transition-normal);\n}\n\n.card {\n background: var(--le-card-bg);\n border-radius: var(--le-card-border-radius);\n overflow: hidden;\n color: var(--le-color-text);\n box-shadow: var(--le-card-shadow);\n}\n\n/* Variants - le-component gets the hostClass, so we use :host > le-component */\n:host > le-component.variant-outlined .card {\n border: 1px solid var(--le-card-border-color);\n box-shadow: none;\n}\n\n:host > le-component.variant-elevated .card {\n box-shadow: var(--le-card-shadow-elevated);\n}\n\n/* Interactive state */\n:host > le-component.interactive .card {\n cursor: pointer;\n transition: transform var(--le-card-transition), box-shadow var(--le-card-transition);\n}\n\n:host > le-component.interactive .card:hover {\n transform: translateY(-2px);\n box-shadow: var(--le-card-shadow-hover);\n}\n\n:host > le-component.interactive .card:focus-visible {\n outline: 2px solid var(--le-color-border-focus);\n outline-offset: 2px;\n}\n\n/* Sections */\n.card-header {\n padding: var(--le-card-padding);\n padding-bottom: 0;\n}\n\n.card-header:empty {\n display: none;\n}\n\n.card-content {\n padding: var(--le-card-padding);\n}\n\n.card-footer {\n padding: var(--le-card-padding);\n padding-top: 0;\n}\n\n.card-footer:empty {\n display: none;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible card component with header, content, and footer slots.\n *\n * The card uses le-slot wrappers for each slot area. In admin mode,\n * le-slot shows placeholders for CMS editing. In default mode,\n * le-slot acts as a transparent passthrough.\n *\n * @slot header - Card header content (title, actions)\n * @slot - Default slot for main card content\n * @slot footer - Card footer content (buttons, links)\n *\n * @cssprop --le-card-bg - Card background color\n * @cssprop --le-card-border-radius - Card border radius\n * @cssprop --le-card-shadow - Card box shadow\n * @cssprop --le-card-padding - Card content padding\n *\n * @csspart card - The main card container\n * @csspart header - The card header section\n * @csspart content - The card content section\n * @csspart footer - The card footer section\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n tag: 'le-card',\n styleUrl: 'le-card.default.css',\n shadow: true,\n})\nexport class LeCard {\n @Element() el: HTMLElement;\n\n /**\n * Card variant style\n * @allowedValues default | outlined | elevated\n */\n @Prop() variant: 'default' | 'outlined' | 'elevated' = 'default';\n\n /**\n * Whether the card is interactive (clickable)\n */\n @Prop() interactive: boolean = false;\n\n render() {\n return (\n <le-component component=\"le-card\" hostClass={classnames(`variant-${this.variant}`, { 'interactive': this.interactive })}>\n <div class=\"card\" part=\"card\">\n <div class=\"card-header\" part=\"header\">\n <le-slot name=\"header\" label=\"Header\" description=\"Card title\" type=\"text\" tag=\"h3\">\n <slot name=\"header\"></slot>\n </le-slot>\n </div>\n\n <div class=\"card-content\" part=\"content\">\n <le-slot name=\"\" label=\"Content\" description=\"Card content\" type=\"textarea\" tag=\"p\" required>\n <slot></slot>\n </le-slot>\n </div>\n\n <div class=\"card-footer\" part=\"footer\">\n <le-slot name=\"footer\" label=\"Footer\" description=\"Card footer with actions\" allowed-components=\"le-button,le-link\">\n <slot name=\"footer\"></slot>\n </le-slot>\n </div>\n </div>\n </le-component>\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,2wCAA2wC,CAAC;;MCgC/xC,MAAM,GAAA,MAAA;;;;;AAGjB;;;AAGG;IACK,OAAO,GAAwC,SAAS;AAEhE;;AAEG;IACK,WAAW,GAAY,KAAK;IAEpC,MAAM,GAAA;QACJ,QACE,qEAAc,SAAS,EAAC,SAAS,EAAC,SAAS,EAAE,UAAU,CAAC,CAAA,QAAA,EAAW,IAAI,CAAC,OAAO,CAAA,CAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EAAA,EACrH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EACpC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,WAAW,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,IAAI,EAAA,EACjF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACnB,CACN,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,SAAS,EAAA,EACtC,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,WAAW,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,EAAC,GAAG,EAAC,GAAG,EAAC,QAAQ,EAAA,IAAA,EAAA,EAC1F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACL,CACN,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EACpC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,WAAW,EAAC,0BAA0B,EAAA,oBAAA,EAAoB,mBAAmB,EAAA,EACjH,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACnB,CACN,CACF,CACO;;;;;;;"}
@@ -1,6 +1,6 @@
1
- import { r as registerInstance, d as createEvent, c as getElement, h } from './index-hmBwv43R.js';
1
+ import { r as registerInstance, d as createEvent, c as getElement, h } from './index-CNv6tzAt.js';
2
2
 
3
- const leComboboxCss = ":host{display:inline-block;min-width:200px;--le-combobox-border-color:var(--le-color-primary, #3b82f6)}:host([disabled]){opacity:0.5;pointer-events:none}:host([full-width]){width:100%}.combobox-trigger{display:flex;align-items:center;width:100%;background:var(--le-combobox-bg, var(--le-color-surface, #fff));border:1px solid color-mix(in srgb, var(--le-combobox-border-color) 33%, transparent);border-radius:var(--le-combobox-border-radius, 0.375rem);transition:border-color 0.15s ease, box-shadow 0.15s ease}.combobox-trigger:hover:not(.is-disabled),:host(:focus-within) .combobox-trigger:not(.is-disabled){border-color:var(--le-combobox-border-color)}.combobox-trigger:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}.combobox-trigger.is-open{border-color:var(--le-color-primary, #3b82f6)}.combobox-input{flex:1;border:none;outline:none}.combobox-input::part(container){border:none}.combobox-input::part(container):focus-within{outline:none !important}.combobox-input::placeholder{color:color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent)}.combobox-trigger.is-disabled{cursor:not-allowed;background:var(--le-color-surface-disabled, #f9fafb)}.combobox-input:disabled{cursor:not-allowed}.combobox-clear{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;margin-right:0.25rem;color:var(--le-color-primary, #3b82f6);background:transparent;border:none;border-radius:0.25rem;cursor:pointer;opacity:0.6;transition:opacity 0.15s ease, background-color 0.15s ease}.combobox-clear:hover{opacity:1;background:var(--le-color-surface-hover, #f3f4f6)}.combobox-clear svg{width:0.875rem;height:0.875rem}.combobox-arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:100%;color:var(--le-color-primary, #3b82f6);transition:transform 0.2s ease}.combobox-arrow svg{width:1rem;height:1rem}.combobox-trigger.is-open .combobox-arrow{transform:rotate(180deg)}:host([size='small']) .combobox-trigger{--le-combobox-height:2rem}:host([size='small']) .combobox-input{--le-combobox-padding-x:0.5rem;--le-combobox-font-size:0.75rem}:host([size='large']) .combobox-trigger{--le-combobox-height:3rem}:host([size='large']) .combobox-input{--le-combobox-padding-x:1rem;--le-combobox-font-size:1rem}";
3
+ const leComboboxCss = () => `:host{display:inline-block;min-width:200px;--le-combobox-border-color:var(--le-color-primary, #3b82f6)}:host([disabled]){opacity:0.5;pointer-events:none}:host([full-width]){width:100%}.combobox-trigger{display:flex;align-items:center;width:100%;background:var(--le-combobox-bg, var(--le-color-surface, #fff));border:1px solid color-mix(in srgb, var(--le-combobox-border-color) 33%, transparent);border-radius:var(--le-combobox-border-radius, 0.375rem);transition:border-color 0.15s ease, box-shadow 0.15s ease}.combobox-trigger:hover:not(.is-disabled),:host(:focus-within) .combobox-trigger:not(.is-disabled){border-color:var(--le-combobox-border-color)}.combobox-trigger:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}.combobox-trigger.is-open{border-color:var(--le-color-primary, #3b82f6)}.combobox-input{flex:1;border:none;outline:none}.combobox-input::part(container){border:none}.combobox-input::part(container):focus-within{outline:none !important}.combobox-input::placeholder{color:color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent)}.combobox-trigger.is-disabled{cursor:not-allowed;background:var(--le-color-surface-disabled, #f9fafb)}.combobox-input:disabled{cursor:not-allowed}.combobox-clear{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;margin-right:0.25rem;color:var(--le-color-primary, #3b82f6);background:transparent;border:none;border-radius:0.25rem;cursor:pointer;opacity:0.6;transition:opacity 0.15s ease, background-color 0.15s ease}.combobox-clear:hover{opacity:1;background:var(--le-color-surface-hover, #f3f4f6)}.combobox-clear svg{width:0.875rem;height:0.875rem}.combobox-arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:100%;color:var(--le-color-primary, #3b82f6);transition:transform 0.2s ease}.combobox-arrow svg{width:1rem;height:1rem}.combobox-trigger.is-open .combobox-arrow{transform:rotate(180deg)}:host([size='small']) .combobox-trigger{--le-combobox-height:2rem}:host([size='small']) .combobox-input{--le-combobox-padding-x:0.5rem;--le-combobox-font-size:0.75rem}:host([size='large']) .combobox-trigger{--le-combobox-height:3rem}:host([size='large']) .combobox-input{--le-combobox-padding-x:1rem;--le-combobox-font-size:1rem}`;
4
4
 
5
5
  const LeCombobox = class {
6
6
  constructor(hostRef) {
@@ -229,7 +229,7 @@ const LeCombobox = class {
229
229
  "options": ["handleOptionsChange"]
230
230
  }; }
231
231
  };
232
- LeCombobox.style = leComboboxCss;
232
+ LeCombobox.style = leComboboxCss();
233
233
 
234
234
  export { LeCombobox as le_combobox };
235
235
  //# sourceMappingURL=le-combobox.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"le-combobox.entry.js","sources":["src/components/le-combobox/le-combobox.css?tag=le-combobox&encapsulation=shadow","src/components/le-combobox/le-combobox.tsx"],"sourcesContent":["/**\n * le-combobox component styles\n *\n * CSS Custom Properties:\n * --le-combobox-padding-x\n * --le-combobox-font-size\n * --le-combobox-border-radius\n * --le-combobox-border-color\n * --le-combobox-bg\n * --le-combobox-color\n */\n\n:host {\n display: inline-block;\n min-width: 200px;\n --le-combobox-border-color: var(--le-color-primary, #3b82f6);\n}\n\n:host([disabled]) {\n opacity: 0.5;\n pointer-events: none;\n}\n\n:host([full-width]) {\n width: 100%;\n}\n\n/* Trigger wrapper */\n.combobox-trigger {\n display: flex;\n align-items: center;\n width: 100%;\n background: var(--le-combobox-bg, var(--le-color-surface, #fff));\n border: 1px solid color-mix(in srgb, var(--le-combobox-border-color) 33%, transparent);\n border-radius: var(--le-combobox-border-radius, 0.375rem);\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.combobox-trigger:hover:not(.is-disabled),\n:host(:focus-within) .combobox-trigger:not(.is-disabled) {\n border-color: var(--le-combobox-border-color);\n}\n\n.combobox-trigger:focus-within {\n outline: 2px solid var(--le-color-focus);\n outline-offset: 2px;\n}\n\n.combobox-trigger.is-open {\n border-color: var(--le-color-primary, #3b82f6);\n}\n\n/* Input */\n.combobox-input {\n flex: 1;\n border: none;\n outline: none;\n}\n.combobox-input::part(container) {\n border: none;\n}\n.combobox-input::part(container):focus-within {\n outline: none !important;\n}\n\n.combobox-input::placeholder {\n color: color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent);\n}\n\n.combobox-trigger.is-disabled {\n cursor: not-allowed;\n background: var(--le-color-surface-disabled, #f9fafb);\n}\n.combobox-input:disabled {\n cursor: not-allowed;\n}\n\n/* Clear button */\n.combobox-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1.5rem;\n padding: 0;\n margin-right: 0.25rem;\n color: var(--le-color-primary, #3b82f6);\n background: transparent;\n border: none;\n border-radius: 0.25rem;\n cursor: pointer;\n opacity: 0.6;\n transition: opacity 0.15s ease, background-color 0.15s ease;\n}\n\n.combobox-clear:hover {\n opacity: 1;\n background: var(--le-color-surface-hover, #f3f4f6);\n}\n\n.combobox-clear svg {\n width: 0.875rem;\n height: 0.875rem;\n}\n\n/* Arrow icon */\n.combobox-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 2rem;\n height: 100%;\n color: var(--le-color-primary, #3b82f6);\n transition: transform 0.2s ease;\n}\n\n.combobox-arrow svg {\n width: 1rem;\n height: 1rem;\n}\n\n.combobox-trigger.is-open .combobox-arrow {\n transform: rotate(180deg);\n}\n\n/* Size variants */\n:host([size='small']) .combobox-trigger {\n --le-combobox-height: 2rem;\n}\n\n:host([size='small']) .combobox-input {\n --le-combobox-padding-x: 0.5rem;\n --le-combobox-font-size: 0.75rem;\n}\n\n:host([size='large']) .combobox-trigger {\n --le-combobox-height: 3rem;\n}\n\n:host([size='large']) .combobox-input {\n --le-combobox-padding-x: 1rem;\n --le-combobox-font-size: 1rem;\n}\n","import {\n Component,\n Prop,\n State,\n Event,\n EventEmitter,\n Method,\n Element,\n Watch,\n h,\n Listen,\n} from '@stencil/core';\nimport { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';\n\n/**\n * A combobox component with searchable dropdown.\n *\n * Combines a text input with a dropdown list, allowing users to\n * filter options by typing or select from the list.\n *\n * @cmsEditable true\n * @cmsCategory Form\n *\n * @example Basic combobox\n * ```html\n * <le-combobox\n * placeholder=\"Search...\"\n * options='[{\"label\": \"Apple\"}, {\"label\": \"Banana\"}, {\"label\": \"Cherry\"}]'\n * ></le-combobox>\n * ```\n *\n * @example Allow custom values\n * ```html\n * <le-combobox\n * placeholder=\"Type or select...\"\n * allow-custom\n * options='[{\"label\": \"Red\"}, {\"label\": \"Green\"}, {\"label\": \"Blue\"}]'\n * ></le-combobox>\n * ```\n */\n@Component({\n tag: 'le-combobox',\n styleUrl: 'le-combobox.css',\n shadow: true,\n})\nexport class LeCombobox {\n @Element() el: HTMLElement;\n\n /**\n * The options to display in the dropdown.\n */\n @Prop() options: LeOption[] | string = [];\n\n /**\n * The currently selected value.\n */\n @Prop({ mutable: true }) value?: LeOptionValue;\n\n /**\n * Placeholder text for the input.\n */\n @Prop() placeholder: string = 'Type to search...';\n\n /**\n * Whether the combobox is disabled.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Whether selection is required.\n */\n @Prop() required: boolean = false;\n\n /**\n * Name attribute for form submission.\n */\n @Prop() name?: string;\n\n /**\n * Whether the multiselect should take full width of its container.\n */\n @Prop({ reflect: true }) fullWidth: boolean = false;\n\n /**\n * Size variant of the combobox.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Whether to allow custom values not in the options list.\n */\n @Prop() allowCustom: boolean = false;\n\n /**\n * Minimum characters before showing filtered results.\n */\n @Prop() minSearchLength: number = 0;\n\n /**\n * Text to show when no options match the search.\n */\n @Prop() emptyText: string = 'No results found';\n\n /**\n * Whether the dropdown is currently open.\n */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /**\n * Emitted when the selected value changes.\n */\n @Event() leChange: EventEmitter<LeOptionSelectDetail>;\n\n /**\n * Emitted when the input value changes (for custom values).\n */\n @Event() leInput: EventEmitter<{ value: string }>;\n\n /**\n * Emitted when the dropdown opens.\n */\n @Event() leOpen: EventEmitter<void>;\n\n /**\n * Emitted when the dropdown closes.\n */\n @Event() leClose: EventEmitter<void>;\n\n @Listen('click', { target: 'window' })\n handleWindowClick(event: MouseEvent) {\n if (!this.el.contains(event.target as Node)) {\n this.dropdownEl?.hide();\n }\n }\n\n @State() private inputValue: string = '';\n @State() private selectedOption?: LeOption;\n\n private dropdownEl?: HTMLLeDropdownBaseElement;\n private inputEl?: HTMLInputElement;\n\n @Watch('value')\n handleValueChange() {\n this.updateSelectedOption();\n }\n\n @Watch('options')\n handleOptionsChange() {\n this.updateSelectedOption();\n }\n\n componentWillLoad() {\n this.updateSelectedOption();\n }\n\n private get parsedOptions(): LeOption[] {\n if (typeof this.options === 'string') {\n try {\n return JSON.parse(this.options);\n } catch {\n return [];\n }\n }\n return this.options;\n }\n\n private updateSelectedOption() {\n if (this.value !== undefined) {\n this.selectedOption = this.parsedOptions.find(opt => (opt.value ?? opt.label) === this.value);\n if (this.selectedOption) {\n this.inputValue = this.selectedOption.label;\n } else if (this.allowCustom) {\n this.inputValue = this.value.toString();\n }\n } else {\n this.selectedOption = undefined;\n this.inputValue = '';\n }\n }\n\n private filterOption = (option: LeOption, query: string): boolean => {\n if (!query || query.length < this.minSearchLength) return true;\n const searchLower = query.toLowerCase();\n return (\n option.label.toLowerCase().includes(searchLower) ||\n (option.description?.toLowerCase().includes(searchLower) ?? false)\n );\n };\n\n private handleOptionSelect = (e: CustomEvent<LeOptionSelectDetail>) => {\n this.value = e.detail.value;\n this.selectedOption = e.detail.option;\n this.inputValue = e.detail.option.label;\n this.leChange.emit(e.detail);\n };\n\n private handleDropdownOpen = () => {\n this.open = true;\n this.leOpen.emit();\n };\n\n private handleDropdownClose = () => {\n this.open = false;\n this.leClose.emit();\n\n // If custom values not allowed, reset input to selected option\n if (!this.allowCustom && this.selectedOption) {\n this.inputValue = this.selectedOption.label;\n } else if (!this.allowCustom && !this.selectedOption) {\n this.inputValue = '';\n }\n };\n\n private handleInputChange = (e: Event) => {\n const target = e.target as HTMLInputElement;\n this.inputValue = target.value;\n\n // Emit input event for custom values\n if (this.allowCustom) {\n this.leInput.emit({ value: this.inputValue });\n }\n\n // Open dropdown when typing\n if (!this.open && this.inputValue.length >= this.minSearchLength) {\n this.dropdownEl?.show();\n }\n };\n\n private handleInputFocus = () => {\n if (!this.disabled) {\n this.dropdownEl?.show();\n }\n };\n\n private handleInputKeyDown = (e: KeyboardEvent) => {\n if (this.disabled) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!this.open) {\n this.dropdownEl?.show();\n }\n break;\n\n case 'Enter':\n if (this.allowCustom && this.inputValue && !this.open) {\n // Accept custom value\n this.value = this.inputValue;\n this.leChange.emit({\n value: this.inputValue,\n option: { label: this.inputValue, value: this.inputValue },\n });\n }\n break;\n\n case 'Escape':\n if (this.open) {\n this.dropdownEl?.hide();\n }\n break;\n }\n };\n\n private handleClear = (e: MouseEvent) => {\n e.stopPropagation();\n this.value = undefined;\n this.selectedOption = undefined;\n this.inputValue = '';\n this.inputEl?.focus();\n this.leChange.emit({\n value: '',\n option: { label: '', value: '' },\n });\n };\n\n /**\n * Opens the dropdown.\n */\n @Method()\n async showDropdown() {\n await this.dropdownEl?.show();\n }\n\n /**\n * Closes the dropdown.\n */\n @Method()\n async hideDropdown() {\n await this.dropdownEl?.hide();\n }\n\n /**\n * Focuses the input element.\n */\n @Method()\n async focusInput() {\n this.inputEl?.focus();\n }\n\n render() {\n const hasValue = this.inputValue.length > 0;\n\n return (\n <le-component component=\"le-combobox\">\n <le-dropdown-base\n ref={el => (this.dropdownEl = el)}\n options={this.parsedOptions}\n value={this.value}\n disabled={this.disabled}\n filterFn={this.filterOption}\n filterQuery={this.inputValue}\n emptyText={this.emptyText}\n fullWidth={this.fullWidth}\n closeOnClickOutside={false}\n onLeOptionSelect={this.handleOptionSelect}\n onLeDropdownOpen={this.handleDropdownOpen}\n onLeDropdownClose={this.handleDropdownClose}\n >\n <div slot=\"trigger\" class={{ 'combobox-trigger': true, 'is-open': this.open }}>\n <le-string-input\n mode=\"default\"\n hideDescription={true}\n inputRef={el => (this.inputEl = el)}\n type=\"text\"\n class=\"combobox-input\"\n value={this.inputValue}\n placeholder={this.placeholder}\n disabled={this.disabled}\n aria-haspopup=\"listbox\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-autocomplete=\"list\"\n onInput={this.handleInputChange}\n onFocus={this.handleInputFocus}\n onKeyDown={this.handleInputKeyDown}\n />\n {hasValue && !this.disabled && (\n <button\n type=\"button\"\n class=\"combobox-clear\"\n onClick={this.handleClear}\n aria-label=\"Clear\"\n tabIndex={-1}\n >\n <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 4l8 8M12 4l-8 8\" />\n </svg>\n </button>\n )}\n <span class=\"combobox-arrow\">\n <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 6l4 4 4-4\" />\n </svg>\n </span>\n </div>\n </le-dropdown-base>\n\n {/* Hidden input for form submission */}\n {this.name && <input type=\"hidden\" name={this.name} value={this.value?.toString() ?? ''} />}\n </le-component>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"le-combobox.entry.js","sources":["src/components/le-combobox/le-combobox.css?tag=le-combobox&encapsulation=shadow","src/components/le-combobox/le-combobox.tsx"],"sourcesContent":["/**\n * le-combobox component styles\n *\n * CSS Custom Properties:\n * --le-combobox-padding-x\n * --le-combobox-font-size\n * --le-combobox-border-radius\n * --le-combobox-border-color\n * --le-combobox-bg\n * --le-combobox-color\n */\n\n:host {\n display: inline-block;\n min-width: 200px;\n --le-combobox-border-color: var(--le-color-primary, #3b82f6);\n}\n\n:host([disabled]) {\n opacity: 0.5;\n pointer-events: none;\n}\n\n:host([full-width]) {\n width: 100%;\n}\n\n/* Trigger wrapper */\n.combobox-trigger {\n display: flex;\n align-items: center;\n width: 100%;\n background: var(--le-combobox-bg, var(--le-color-surface, #fff));\n border: 1px solid color-mix(in srgb, var(--le-combobox-border-color) 33%, transparent);\n border-radius: var(--le-combobox-border-radius, 0.375rem);\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.combobox-trigger:hover:not(.is-disabled),\n:host(:focus-within) .combobox-trigger:not(.is-disabled) {\n border-color: var(--le-combobox-border-color);\n}\n\n.combobox-trigger:focus-within {\n outline: 2px solid var(--le-color-focus);\n outline-offset: 2px;\n}\n\n.combobox-trigger.is-open {\n border-color: var(--le-color-primary, #3b82f6);\n}\n\n/* Input */\n.combobox-input {\n flex: 1;\n border: none;\n outline: none;\n}\n.combobox-input::part(container) {\n border: none;\n}\n.combobox-input::part(container):focus-within {\n outline: none !important;\n}\n\n.combobox-input::placeholder {\n color: color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent);\n}\n\n.combobox-trigger.is-disabled {\n cursor: not-allowed;\n background: var(--le-color-surface-disabled, #f9fafb);\n}\n.combobox-input:disabled {\n cursor: not-allowed;\n}\n\n/* Clear button */\n.combobox-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1.5rem;\n padding: 0;\n margin-right: 0.25rem;\n color: var(--le-color-primary, #3b82f6);\n background: transparent;\n border: none;\n border-radius: 0.25rem;\n cursor: pointer;\n opacity: 0.6;\n transition: opacity 0.15s ease, background-color 0.15s ease;\n}\n\n.combobox-clear:hover {\n opacity: 1;\n background: var(--le-color-surface-hover, #f3f4f6);\n}\n\n.combobox-clear svg {\n width: 0.875rem;\n height: 0.875rem;\n}\n\n/* Arrow icon */\n.combobox-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 2rem;\n height: 100%;\n color: var(--le-color-primary, #3b82f6);\n transition: transform 0.2s ease;\n}\n\n.combobox-arrow svg {\n width: 1rem;\n height: 1rem;\n}\n\n.combobox-trigger.is-open .combobox-arrow {\n transform: rotate(180deg);\n}\n\n/* Size variants */\n:host([size='small']) .combobox-trigger {\n --le-combobox-height: 2rem;\n}\n\n:host([size='small']) .combobox-input {\n --le-combobox-padding-x: 0.5rem;\n --le-combobox-font-size: 0.75rem;\n}\n\n:host([size='large']) .combobox-trigger {\n --le-combobox-height: 3rem;\n}\n\n:host([size='large']) .combobox-input {\n --le-combobox-padding-x: 1rem;\n --le-combobox-font-size: 1rem;\n}\n","import {\n Component,\n Prop,\n State,\n Event,\n EventEmitter,\n Method,\n Element,\n Watch,\n h,\n Listen,\n} from '@stencil/core';\nimport { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';\n\n/**\n * A combobox component with searchable dropdown.\n *\n * Combines a text input with a dropdown list, allowing users to\n * filter options by typing or select from the list.\n *\n * @cmsEditable true\n * @cmsCategory Form\n *\n * @example Basic combobox\n * ```html\n * <le-combobox\n * placeholder=\"Search...\"\n * options='[{\"label\": \"Apple\"}, {\"label\": \"Banana\"}, {\"label\": \"Cherry\"}]'\n * ></le-combobox>\n * ```\n *\n * @example Allow custom values\n * ```html\n * <le-combobox\n * placeholder=\"Type or select...\"\n * allow-custom\n * options='[{\"label\": \"Red\"}, {\"label\": \"Green\"}, {\"label\": \"Blue\"}]'\n * ></le-combobox>\n * ```\n */\n@Component({\n tag: 'le-combobox',\n styleUrl: 'le-combobox.css',\n shadow: true,\n})\nexport class LeCombobox {\n @Element() el: HTMLElement;\n\n /**\n * The options to display in the dropdown.\n */\n @Prop() options: LeOption[] | string = [];\n\n /**\n * The currently selected value.\n */\n @Prop({ mutable: true }) value?: LeOptionValue;\n\n /**\n * Placeholder text for the input.\n */\n @Prop() placeholder: string = 'Type to search...';\n\n /**\n * Whether the combobox is disabled.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Whether selection is required.\n */\n @Prop() required: boolean = false;\n\n /**\n * Name attribute for form submission.\n */\n @Prop() name?: string;\n\n /**\n * Whether the multiselect should take full width of its container.\n */\n @Prop({ reflect: true }) fullWidth: boolean = false;\n\n /**\n * Size variant of the combobox.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Whether to allow custom values not in the options list.\n */\n @Prop() allowCustom: boolean = false;\n\n /**\n * Minimum characters before showing filtered results.\n */\n @Prop() minSearchLength: number = 0;\n\n /**\n * Text to show when no options match the search.\n */\n @Prop() emptyText: string = 'No results found';\n\n /**\n * Whether the dropdown is currently open.\n */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /**\n * Emitted when the selected value changes.\n */\n @Event() leChange: EventEmitter<LeOptionSelectDetail>;\n\n /**\n * Emitted when the input value changes (for custom values).\n */\n @Event() leInput: EventEmitter<{ value: string }>;\n\n /**\n * Emitted when the dropdown opens.\n */\n @Event() leOpen: EventEmitter<void>;\n\n /**\n * Emitted when the dropdown closes.\n */\n @Event() leClose: EventEmitter<void>;\n\n @Listen('click', { target: 'window' })\n handleWindowClick(event: MouseEvent) {\n if (!this.el.contains(event.target as Node)) {\n this.dropdownEl?.hide();\n }\n }\n\n @State() private inputValue: string = '';\n @State() private selectedOption?: LeOption;\n\n private dropdownEl?: HTMLLeDropdownBaseElement;\n private inputEl?: HTMLInputElement;\n\n @Watch('value')\n handleValueChange() {\n this.updateSelectedOption();\n }\n\n @Watch('options')\n handleOptionsChange() {\n this.updateSelectedOption();\n }\n\n componentWillLoad() {\n this.updateSelectedOption();\n }\n\n private get parsedOptions(): LeOption[] {\n if (typeof this.options === 'string') {\n try {\n return JSON.parse(this.options);\n } catch {\n return [];\n }\n }\n return this.options;\n }\n\n private updateSelectedOption() {\n if (this.value !== undefined) {\n this.selectedOption = this.parsedOptions.find(opt => (opt.value ?? opt.label) === this.value);\n if (this.selectedOption) {\n this.inputValue = this.selectedOption.label;\n } else if (this.allowCustom) {\n this.inputValue = this.value.toString();\n }\n } else {\n this.selectedOption = undefined;\n this.inputValue = '';\n }\n }\n\n private filterOption = (option: LeOption, query: string): boolean => {\n if (!query || query.length < this.minSearchLength) return true;\n const searchLower = query.toLowerCase();\n return (\n option.label.toLowerCase().includes(searchLower) ||\n (option.description?.toLowerCase().includes(searchLower) ?? false)\n );\n };\n\n private handleOptionSelect = (e: CustomEvent<LeOptionSelectDetail>) => {\n this.value = e.detail.value;\n this.selectedOption = e.detail.option;\n this.inputValue = e.detail.option.label;\n this.leChange.emit(e.detail);\n };\n\n private handleDropdownOpen = () => {\n this.open = true;\n this.leOpen.emit();\n };\n\n private handleDropdownClose = () => {\n this.open = false;\n this.leClose.emit();\n\n // If custom values not allowed, reset input to selected option\n if (!this.allowCustom && this.selectedOption) {\n this.inputValue = this.selectedOption.label;\n } else if (!this.allowCustom && !this.selectedOption) {\n this.inputValue = '';\n }\n };\n\n private handleInputChange = (e: Event) => {\n const target = e.target as HTMLInputElement;\n this.inputValue = target.value;\n\n // Emit input event for custom values\n if (this.allowCustom) {\n this.leInput.emit({ value: this.inputValue });\n }\n\n // Open dropdown when typing\n if (!this.open && this.inputValue.length >= this.minSearchLength) {\n this.dropdownEl?.show();\n }\n };\n\n private handleInputFocus = () => {\n if (!this.disabled) {\n this.dropdownEl?.show();\n }\n };\n\n private handleInputKeyDown = (e: KeyboardEvent) => {\n if (this.disabled) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!this.open) {\n this.dropdownEl?.show();\n }\n break;\n\n case 'Enter':\n if (this.allowCustom && this.inputValue && !this.open) {\n // Accept custom value\n this.value = this.inputValue;\n this.leChange.emit({\n value: this.inputValue,\n option: { label: this.inputValue, value: this.inputValue },\n });\n }\n break;\n\n case 'Escape':\n if (this.open) {\n this.dropdownEl?.hide();\n }\n break;\n }\n };\n\n private handleClear = (e: MouseEvent) => {\n e.stopPropagation();\n this.value = undefined;\n this.selectedOption = undefined;\n this.inputValue = '';\n this.inputEl?.focus();\n this.leChange.emit({\n value: '',\n option: { label: '', value: '' },\n });\n };\n\n /**\n * Opens the dropdown.\n */\n @Method()\n async showDropdown() {\n await this.dropdownEl?.show();\n }\n\n /**\n * Closes the dropdown.\n */\n @Method()\n async hideDropdown() {\n await this.dropdownEl?.hide();\n }\n\n /**\n * Focuses the input element.\n */\n @Method()\n async focusInput() {\n this.inputEl?.focus();\n }\n\n render() {\n const hasValue = this.inputValue.length > 0;\n\n return (\n <le-component component=\"le-combobox\">\n <le-dropdown-base\n ref={el => (this.dropdownEl = el)}\n options={this.parsedOptions}\n value={this.value}\n disabled={this.disabled}\n filterFn={this.filterOption}\n filterQuery={this.inputValue}\n emptyText={this.emptyText}\n fullWidth={this.fullWidth}\n closeOnClickOutside={false}\n onLeOptionSelect={this.handleOptionSelect}\n onLeDropdownOpen={this.handleDropdownOpen}\n onLeDropdownClose={this.handleDropdownClose}\n >\n <div slot=\"trigger\" class={{ 'combobox-trigger': true, 'is-open': this.open }}>\n <le-string-input\n mode=\"default\"\n hideDescription={true}\n inputRef={el => (this.inputEl = el)}\n type=\"text\"\n class=\"combobox-input\"\n value={this.inputValue}\n placeholder={this.placeholder}\n disabled={this.disabled}\n aria-haspopup=\"listbox\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-autocomplete=\"list\"\n onInput={this.handleInputChange}\n onFocus={this.handleInputFocus}\n onKeyDown={this.handleInputKeyDown}\n />\n {hasValue && !this.disabled && (\n <button\n type=\"button\"\n class=\"combobox-clear\"\n onClick={this.handleClear}\n aria-label=\"Clear\"\n tabIndex={-1}\n >\n <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 4l8 8M12 4l-8 8\" />\n </svg>\n </button>\n )}\n <span class=\"combobox-arrow\">\n <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 6l4 4 4-4\" />\n </svg>\n </span>\n </div>\n </le-dropdown-base>\n\n {/* Hidden input for form submission */}\n {this.name && <input type=\"hidden\" name={this.name} value={this.value?.toString() ?? ''} />}\n </le-component>\n );\n }\n}\n"],"names":[],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- import { r as registerInstance, h, H as Host } from './index-hmBwv43R.js';
1
+ import { r as registerInstance, h, H as Host } from './index-CNv6tzAt.js';
2
2
 
3
3
  const LeHeaderPlaceholder = class {
4
4
  constructor(hostRef) {
@@ -1,8 +1,8 @@
1
- import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-hmBwv43R.js';
2
- export { s as setNonce } from './index-hmBwv43R.js';
1
+ import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-CNv6tzAt.js';
2
+ export { s as setNonce } from './index-CNv6tzAt.js';
3
3
 
4
4
  /*
5
- Stencil Client Patch Browser v4.38.3 | MIT Licensed | https://stenciljs.com
5
+ Stencil Client Patch Browser v4.39.0 | MIT Licensed | https://stenciljs.com
6
6
  */
7
7
 
8
8
  var patchBrowser = () => {
@@ -19,3 +19,5 @@ patchBrowser().then(async (options) => {
19
19
  return bootstrapLazy([["le-button_13",[[769,"le-collapse",{"open":[1540],"scrollDown":[516,"scroll-down"],"noFading":[516,"no-fading"],"collapseOnHeaderShrink":[516,"collapse-on-header-shrink"],"headerShrunk":[32]},[[8,"leHeaderShrinkChange","handleHeaderShrink"]],{"open":["onOpenChange"],"headerShrunk":["onDrivenStateChange"]}],[769,"le-header",{"isStatic":[516,"static"],"sticky":[516],"fixed":[516],"revealOnScroll":[513,"reveal-on-scroll"],"shrinkOffset":[513,"shrink-offset"],"expandOnHover":[516,"expand-on-hover"],"revealed":[32],"shrunk":[32],"placeholderHeight":[32],"hoverActive":[32]},[[9,"scroll","onWindowScroll"],[9,"resize","onWindowResize"]],{"revealOnScroll":["onBehaviorPropsChange"],"shrinkOffset":["onBehaviorPropsChange"],"fixed":["onBehaviorPropsChange"],"sticky":["onBehaviorPropsChange"],"isStatic":["onBehaviorPropsChange"]}],[769,"le-current-heading",{"selector":[1],"activeText":[32]},[[9,"scroll","onScroll"],[9,"resize","onResize"]],{"selector":["onSelectorChange"]}],[769,"le-scroll-progress",{"trackScrollProgress":[513,"track-scroll-progress"],"progress":[32]},[[9,"scroll","onScroll"],[9,"resize","onResize"]],{"trackScrollProgress":["onTrackChange"]}],[769,"le-dropdown-base",{"options":[16],"value":[8],"multiple":[4],"open":[1540],"disabled":[516],"filterFn":[16],"filterQuery":[1,"filter-query"],"emptyText":[1,"empty-text"],"showCheckboxes":[4,"show-checkboxes"],"maxHeight":[1,"max-height"],"width":[1],"fullWidth":[4,"full-width"],"closeOnClickOutside":[4,"close-on-click-outside"],"focusedIndex":[32],"filteredOptions":[32],"show":[64],"hide":[64],"toggle":[64]},null,{"options":["handleOptionsChange"],"filterQuery":["handleOptionsChange"]}],[769,"le-popup",{"mode":[1537],"open":[1540],"type":[1],"popupTitle":[1,"popup-title"],"message":[1],"modal":[4],"position":[1],"confirmText":[1,"confirm-text"],"cancelText":[1,"cancel-text"],"placeholder":[1],"defaultValue":[1,"default-value"],"closeOnBackdrop":[4,"close-on-backdrop"],"inputValue":[32],"show":[64],"hide":[64]}],[769,"le-button",{"mode":[1537],"variant":[1],"color":[1],"size":[1],"selected":[4],"fullWidth":[516,"full-width"],"iconOnly":[1,"icon-only"],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"disabled":[4],"type":[1],"href":[1],"target":[1],"align":[1]}],[769,"le-checkbox",{"checked":[1540],"disabled":[4],"name":[1],"value":[1],"externalId":[1,"external-id"]}],[769,"le-component",{"component":[1],"displayName":[1,"display-name"],"hostClass":[1,"host-class"],"hostStyle":[16],"adminMode":[32],"componentMeta":[32],"propertyValues":[32]}],[769,"le-select",{"options":[1],"value":[1032],"placeholder":[1],"disabled":[516],"required":[4],"name":[1],"fullWidth":[4,"full-width"],"size":[513],"variant":[513],"searchable":[4],"emptyText":[1,"empty-text"],"open":[1540],"selectedOption":[32],"searchQuery":[32],"showDropdown":[64],"hideDropdown":[64]},null,{"value":["handleValueChange"],"options":["handleOptionsChange"]}],[769,"le-slot",{"type":[1],"name":[1],"label":[1],"description":[1],"allowedComponents":[1,"allowed-components"],"multiple":[4],"required":[4],"placeholder":[1],"tag":[1],"slotStyle":[1,"slot-style"],"adminMode":[32],"textValue":[32],"isValidHtml":[32],"availableComponents":[32],"pickerOpen":[32]}],[769,"le-string-input",{"inputRef":[16],"mode":[1537],"value":[1537],"name":[1],"type":[1],"label":[1],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"placeholder":[1],"hideDescription":[4,"hide-description"],"disabled":[4],"readonly":[4],"externalId":[1,"external-id"]}],[769,"le-popover",{"mode":[1537],"open":[1540],"position":[1],"align":[1],"popoverTitle":[1,"popover-title"],"showClose":[4,"show-close"],"closeOnClickOutside":[4,"close-on-click-outside"],"closeOnEscape":[4,"close-on-escape"],"offset":[2],"width":[1],"minWidth":[1,"min-width"],"maxWidth":[1,"max-width"],"triggerFullWidth":[4,"trigger-full-width"],"isPositioned":[32],"updatePosition":[64],"show":[64],"hide":[64],"toggle":[64]}]]],["le-multiselect",[[769,"le-multiselect",{"options":[1],"value":[1040],"placeholder":[1],"disabled":[516],"required":[4],"name":[1],"fullWidth":[516,"full-width"],"size":[513],"maxSelections":[2,"max-selections"],"showSelectAll":[1032,"show-select-all"],"searchable":[4],"emptyText":[1,"empty-text"],"open":[1540],"selectAllLabel":[32],"deselectAllLabel":[32],"selectedOptions":[32],"searchQuery":[32],"showDropdown":[64],"hideDropdown":[64],"clearSelection":[64]},null,{"value":["handleValueChange"],"options":["handleOptionsChange"],"showSelectAll":["handleShowSelectAllChange"]}]]],["le-segmented-control",[[769,"le-segmented-control",{"options":[16],"value":[1032],"size":[1],"overflow":[1],"fullWidth":[4,"full-width"],"disabled":[4],"segmentConfigs":[32],"focusedIndex":[32],"isDeclarativeMode":[32]},[[0,"slotchange","handleSlotChange"]],{"options":["tabsChanged"]}]]],["le-tab-bar",[[769,"le-tab-bar",{"tabs":[16],"selected":[1032],"fullWidth":[4,"full-width"],"showLabels":[4,"show-labels"],"position":[1],"size":[1],"bordered":[4],"tabConfigs":[32],"isDeclarativeMode":[32],"focusedIndex":[32]},[[0,"slotchange","handleSlotChange"]],{"selected":["selectedChanged"],"tabs":["tabsChanged"]}]]],["le-tabs",[[769,"le-tabs",{"tabs":[16],"selected":[1032],"orientation":[1],"position":[1],"variant":[1],"fullWidth":[4,"full-width"],"size":[1],"wrap":[4],"overflow":[1],"tabConfigs":[32],"focusedIndex":[32],"isDeclarativeMode":[32]},[[0,"slotchange","handleSlotChange"]],{"selected":["selectedChanged"],"tabs":["tabsChanged"]}]]],["le-box",[[769,"le-box",{"grow":[2],"shrink":[2],"basis":[1],"width":[1],"height":[1],"minWidth":[1,"min-width"],"maxWidth":[1,"max-width"],"minHeight":[1,"min-height"],"maxHeight":[1,"max-height"],"background":[1],"borderRadius":[1,"border-radius"],"border":[1],"alignSelf":[1,"align-self"],"alignContent":[1,"align-content"],"justifyContent":[1,"justify-content"],"padding":[1],"order":[2],"displayFlex":[4,"display-flex"],"innerDirection":[1,"inner-direction"],"innerGap":[1,"inner-gap"]}]]],["le-card",[[769,"le-card",{"variant":[1],"interactive":[4]}]]],["le-combobox",[[769,"le-combobox",{"options":[1],"value":[1032],"placeholder":[1],"disabled":[516],"required":[4],"name":[1],"fullWidth":[516,"full-width"],"size":[513],"allowCustom":[4,"allow-custom"],"minSearchLength":[2,"min-search-length"],"emptyText":[1,"empty-text"],"open":[1540],"inputValue":[32],"selectedOption":[32],"showDropdown":[64],"hideDropdown":[64],"focusInput":[64]},[[8,"click","handleWindowClick"]],{"value":["handleValueChange"],"options":["handleOptionsChange"]}]]],["le-number-input",[[769,"le-number-input",{"value":[1538],"name":[1],"label":[1],"placeholder":[1],"min":[2],"max":[2],"step":[2],"required":[4],"disabled":[4],"readonly":[4],"iconStart":[1,"icon-start"],"showSpinners":[4,"show-spinners"],"externalId":[1,"external-id"],"isValid":[32],"validationMessage":[32]},null,{"value":["valueChanged"]}]]],["le-stack",[[769,"le-stack",{"direction":[1],"gap":[1],"align":[1],"justify":[1],"wrap":[4],"alignContent":[1,"align-content"],"reverse":[4],"maxItems":[2,"max-items"],"fullWidth":[4,"full-width"],"fullHeight":[4,"full-height"],"padding":[1]}]]],["le-tab-panel",[[769,"le-tab-panel",{"label":[1],"value":[1],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"disabled":[4],"lazy":[4],"active":[32],"hasBeenActive":[32],"getValue":[64],"getTabConfig":[64],"setActive":[64]},null,{"active":["activeChanged"]}]]],["le-text",[[769,"le-text",{"variant":[1537],"align":[513],"color":[1],"truncate":[4],"maxLines":[2,"max-lines"],"adminMode":[32],"content":[32],"isFocused":[32],"selectionState":[32]},null,{"variant":["onVariantChange"]}]]],["le-header-placeholder",[[256,"le-header-placeholder"]]],["le-round-progress",[[769,"le-round-progress",{"value":[2],"padding":[2],"paths":[1],"params":[32]},null,{"value":["updateValue"],"padding":["updatePadding"],"paths":["updateProgressBackgrounds"]}]]],["le-turntable",[[769,"le-turntable",{"center":[1],"value":[2]},[[9,"mousemove","handleMouseMove"],[9,"mouseup","handleMouseUp"],[9,"resize","handleWindowResize"]],{"value":["updateValue"]}]]],["le-tag",[[769,"le-tag",{"label":[1],"mode":[1537],"icon":[1],"dismissible":[4],"disabled":[516],"size":[513],"variant":[513]}]]],["le-tab",[[769,"le-tab",{"mode":[1537],"label":[1],"value":[1],"variant":[1],"position":[1],"size":[1],"focusable":[4],"selected":[4],"fullWidth":[516,"full-width"],"icon":[1],"showLabel":[4,"show-label"],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"disabled":[4],"href":[1],"target":[1],"align":[1],"getTabConfig":[64]}]]]], options);
20
20
  });
21
21
  //# sourceMappingURL=le-kit.js.map
22
+
23
+ //# sourceMappingURL=le-kit.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"le-kit.js","sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.38.3 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":[],"mappings":";;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE;AACvB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"le-kit.js","sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.39.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":[],"mappings":";;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE;AACvB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC","x_google_ignoreList":[0]}
@@ -1,6 +1,6 @@
1
- import { r as registerInstance, d as createEvent, c as getElement, h } from './index-hmBwv43R.js';
1
+ import { r as registerInstance, d as createEvent, c as getElement, h } from './index-CNv6tzAt.js';
2
2
 
3
- const leMultiselectCss = ":host{display:inline-block;min-width:250px;--le-multiselect-min-height:0;--le-multiselect-padding:var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-2);--le-multiselect-border-color:var(--le-color-primary, #3b82f6)}:host([disabled]){opacity:0.5;pointer-events:none}.multiselect-trigger{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;width:100%;min-height:var(--le-multiselect-min-height);padding:var(--le-multiselect-padding);line-height:var(--le-line-height-tight);background:var(--le-multiselect-bg, var(--le-color-surface, #fff));border:1px solid color-mix(in srgb, var(--le-multiselect-border-color) 33%, transparent);border-radius:var(--le-multiselect-border-radius, 0.375rem);cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease}.multiselect-trigger:hover:not(.is-disabled),:host(:focus-within) .multiselect-trigger:not(.is-disabled){border-color:var(--le-multiselect-border-color)}:host(:focus-within) .multiselect-trigger{outline:2px solid var(--le-color-focus);outline-offset:2px}:host([full-width]){width:100%}.multiselect-trigger.is-open{border-color:var(--le-color-primary, #3b82f6)}.multiselect-trigger.is-disabled{cursor:not-allowed;background:var(--le-color-surface-disabled, #f9fafb)}.multiselect-placeholder{color:color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent)}.multiselect-tags{display:flex;flex-wrap:wrap;gap:0.25rem;flex:1;min-width:0}.multiselect-actions{display:flex;align-items:center;gap:0.25rem;flex-shrink:0}.multiselect-clear{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;background:transparent;color:var(--le-color-primary, #3b82f6);border:none;border-radius:0.25rem;cursor:pointer;opacity:0.6;transition:opacity 0.15s ease, background-color 0.15s ease}.multiselect-clear:hover{opacity:1;background:var(--le-color-surface-hover, #f3f4f6)}.multiselect-clear svg{width:0.875rem;height:0.875rem}.multiselect-arrow{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1rem;color:var(--le-color-primary, #3b82f6);transition:transform 0.2s ease}.multiselect-arrow svg{width:1rem;height:1rem}.multiselect-trigger.is-open .multiselect-arrow{transform:rotate(180deg)}.search-input::part(container):focus-within{outline:none !important}.search-input{--le-input-radius:var(--le-radius-md)}.multiselect-status{display:block;margin-top:0.25rem;font-size:0.75rem;color:var(--le-color-text-muted, #6b7280)}:host([size='small']) .multiselect-trigger{--le-multiselect-min-height:2rem;--le-multiselect-padding:0.25rem 0.375rem;--le-multiselect-font-size:0.75rem}:host([size='large']) .multiselect-trigger{--le-multiselect-min-height:3rem;--le-multiselect-padding:0.5rem 0.625rem;--le-multiselect-font-size:1rem}";
3
+ const leMultiselectCss = () => `:host{display:inline-block;min-width:250px;--le-multiselect-min-height:0;--le-multiselect-padding:var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-2);--le-multiselect-border-color:var(--le-color-primary, #3b82f6)}:host([disabled]){opacity:0.5;pointer-events:none}.multiselect-trigger{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;width:100%;min-height:var(--le-multiselect-min-height);padding:var(--le-multiselect-padding);line-height:var(--le-line-height-tight);background:var(--le-multiselect-bg, var(--le-color-surface, #fff));border:1px solid color-mix(in srgb, var(--le-multiselect-border-color) 33%, transparent);border-radius:var(--le-multiselect-border-radius, 0.375rem);cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease}.multiselect-trigger:hover:not(.is-disabled),:host(:focus-within) .multiselect-trigger:not(.is-disabled){border-color:var(--le-multiselect-border-color)}:host(:focus-within) .multiselect-trigger{outline:2px solid var(--le-color-focus);outline-offset:2px}:host([full-width]){width:100%}.multiselect-trigger.is-open{border-color:var(--le-color-primary, #3b82f6)}.multiselect-trigger.is-disabled{cursor:not-allowed;background:var(--le-color-surface-disabled, #f9fafb)}.multiselect-placeholder{color:color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent)}.multiselect-tags{display:flex;flex-wrap:wrap;gap:0.25rem;flex:1;min-width:0}.multiselect-actions{display:flex;align-items:center;gap:0.25rem;flex-shrink:0}.multiselect-clear{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;background:transparent;color:var(--le-color-primary, #3b82f6);border:none;border-radius:0.25rem;cursor:pointer;opacity:0.6;transition:opacity 0.15s ease, background-color 0.15s ease}.multiselect-clear:hover{opacity:1;background:var(--le-color-surface-hover, #f3f4f6)}.multiselect-clear svg{width:0.875rem;height:0.875rem}.multiselect-arrow{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1rem;color:var(--le-color-primary, #3b82f6);transition:transform 0.2s ease}.multiselect-arrow svg{width:1rem;height:1rem}.multiselect-trigger.is-open .multiselect-arrow{transform:rotate(180deg)}.search-input::part(container):focus-within{outline:none !important}.search-input{--le-input-radius:var(--le-radius-md)}.multiselect-status{display:block;margin-top:0.25rem;font-size:0.75rem;color:var(--le-color-text-muted, #6b7280)}:host([size='small']) .multiselect-trigger{--le-multiselect-min-height:2rem;--le-multiselect-padding:0.25rem 0.375rem;--le-multiselect-font-size:0.75rem}:host([size='large']) .multiselect-trigger{--le-multiselect-min-height:3rem;--le-multiselect-padding:0.5rem 0.625rem;--le-multiselect-font-size:1rem}`;
4
4
 
5
5
  const LeMultiselect = class {
6
6
  constructor(hostRef) {
@@ -298,7 +298,7 @@ const LeMultiselect = class {
298
298
  "showSelectAll": ["handleShowSelectAllChange"]
299
299
  }; }
300
300
  };
301
- LeMultiselect.style = leMultiselectCss;
301
+ LeMultiselect.style = leMultiselectCss();
302
302
 
303
303
  export { LeMultiselect as le_multiselect };
304
304
  //# sourceMappingURL=le-multiselect.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"le-multiselect.entry.js","sources":["src/components/le-multiselect/le-multiselect.css?tag=le-multiselect&encapsulation=shadow","src/components/le-multiselect/le-multiselect.tsx"],"sourcesContent":["/**\n * le-multiselect component styles\n *\n * CSS Custom Properties:\n * --le-multiselect-min-height\n * --le-multiselect-padding\n * --le-multiselect-font-size\n * --le-multiselect-border-radius\n * --le-multiselect-border-color\n * --le-multiselect-bg\n * --le-multiselect-color\n */\n\n:host {\n display: inline-block;\n min-width: 250px;\n\n --le-multiselect-min-height: 0;\n --le-multiselect-padding: var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-2);\n --le-multiselect-border-color: var(--le-color-primary, #3b82f6);\n}\n\n:host([disabled]) {\n opacity: 0.5;\n pointer-events: none;\n}\n\n/* Trigger wrapper */\n.multiselect-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n width: 100%;\n min-height: var(--le-multiselect-min-height);\n padding: var(--le-multiselect-padding);\n line-height: var(--le-line-height-tight);\n background: var(--le-multiselect-bg, var(--le-color-surface, #fff));\n border: 1px solid color-mix(in srgb, var(--le-multiselect-border-color) 33%, transparent);\n border-radius: var(--le-multiselect-border-radius, 0.375rem);\n cursor: pointer;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.multiselect-trigger:hover:not(.is-disabled),\n:host(:focus-within) .multiselect-trigger:not(.is-disabled) {\n border-color: var(--le-multiselect-border-color);\n}\n\n:host(:focus-within) .multiselect-trigger {\n outline: 2px solid var(--le-color-focus);\n outline-offset: 2px;\n}\n:host([full-width]) {\n width: 100%;\n}\n\n.multiselect-trigger.is-open {\n border-color: var(--le-color-primary, #3b82f6);\n}\n\n.multiselect-trigger.is-disabled {\n cursor: not-allowed;\n background: var(--le-color-surface-disabled, #f9fafb);\n}\n\n/* Placeholder */\n.multiselect-placeholder {\n color: color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent);\n}\n\n/* Tags container */\n.multiselect-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n flex: 1;\n min-width: 0;\n}\n\n/* Actions (clear + arrow) */\n.multiselect-actions {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n flex-shrink: 0;\n}\n\n/* Clear button */\n.multiselect-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1.5rem;\n padding: 0;\n background: transparent;\n color: var(--le-color-primary, #3b82f6);\n border: none;\n border-radius: 0.25rem;\n cursor: pointer;\n opacity: 0.6;\n transition: opacity 0.15s ease, background-color 0.15s ease;\n}\n\n.multiselect-clear:hover {\n opacity: 1;\n background: var(--le-color-surface-hover, #f3f4f6);\n}\n\n.multiselect-clear svg {\n width: 0.875rem;\n height: 0.875rem;\n}\n\n/* Arrow icon */\n.multiselect-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1rem;\n color: var(--le-color-primary, #3b82f6);\n transition: transform 0.2s ease;\n}\n\n.multiselect-arrow svg {\n width: 1rem;\n height: 1rem;\n}\n\n.multiselect-trigger.is-open .multiselect-arrow {\n transform: rotate(180deg);\n}\n\n/* Search in dropdown */\n.search-input::part(container):focus-within {\n outline: none !important;\n}\n.search-input {\n --le-input-radius: var(--le-radius-md);\n}\n\n/* Status message */\n.multiselect-status {\n display: block;\n margin-top: 0.25rem;\n font-size: 0.75rem;\n color: var(--le-color-text-muted, #6b7280);\n}\n\n/* Size variants */\n:host([size='small']) .multiselect-trigger {\n --le-multiselect-min-height: 2rem;\n --le-multiselect-padding: 0.25rem 0.375rem;\n --le-multiselect-font-size: 0.75rem;\n}\n\n:host([size='large']) .multiselect-trigger {\n --le-multiselect-min-height: 3rem;\n --le-multiselect-padding: 0.5rem 0.625rem;\n --le-multiselect-font-size: 1rem;\n}\n","import {\n Component,\n Prop,\n State,\n Event,\n EventEmitter,\n Method,\n Element,\n Watch,\n h,\n} from '@stencil/core';\nimport {\n LeOption,\n LeOptionValue,\n LeMultiOptionSelectDetail,\n LeOptionSelectDetail,\n} from '../../types/options';\n\n/**\n * A multiselect component for selecting multiple options.\n *\n * Displays selected items as tags with optional search filtering.\n *\n * @cmsEditable true\n * @cmsCategory Form\n *\n * @example Basic multiselect\n * ```html\n * <le-multiselect\n * placeholder=\"Select options...\"\n * options='[{\"label\": \"Red\"}, {\"label\": \"Green\"}, {\"label\": \"Blue\"}]'\n * ></le-multiselect>\n * ```\n *\n * @example With max selections\n * ```html\n * <le-multiselect\n * max-selections=\"3\"\n * options='[{\"label\": \"Option 1\"}, {\"label\": \"Option 2\"}, {\"label\": \"Option 3\"}, {\"label\": \"Option 4\"}]'\n * ></le-multiselect>\n * ```\n *\n * @example With search\n * ```html\n * <le-multiselect\n * searchable\n * placeholder=\"Search and select...\"\n * options='[{\"label\": \"Apple\"}, {\"label\": \"Banana\"}, {\"label\": \"Cherry\"}]'\n * ></le-multiselect>\n * ```\n */\n@Component({\n tag: 'le-multiselect',\n styleUrl: 'le-multiselect.css',\n shadow: true,\n})\nexport class LeMultiselect {\n @Element() el: HTMLElement;\n\n /**\n * The options to display in the dropdown.\n */\n @Prop() options: LeOption[] | string = [];\n\n /**\n * The currently selected values.\n */\n @Prop({ mutable: true }) value: LeOptionValue[] = [];\n\n /**\n * Placeholder text when no options are selected.\n */\n @Prop() placeholder: string = 'Select options...';\n\n /**\n * Whether the multiselect is disabled.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Whether selection is required.\n */\n @Prop() required: boolean = false;\n\n /**\n * Name attribute for form submission.\n */\n @Prop() name?: string;\n\n /**\n * Whether the multiselect should take full width of its container.\n */\n @Prop({ reflect: true }) fullWidth: boolean = false;\n\n /**\n * Size variant of the multiselect.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Maximum number of selections allowed.\n */\n @Prop() maxSelections?: number;\n\n /**\n * Labels for the \"Select All\" option.\n */\n @State() private selectAllLabel: string = 'Select All';\n @State() private deselectAllLabel: string = 'Deselect All';\n\n /**\n * Whether to show a \"Select All\" option.\n * Also accepts a string or array of strings to customize the label(s).\n */\n @Prop({ mutable: true }) showSelectAll: boolean | string | string[] = false;\n\n /**\n * Whether the input is searchable.\n */\n @Prop() searchable: boolean = false;\n\n /**\n * Text to show when no options match the search.\n */\n @Prop() emptyText: string = 'No results found';\n\n /**\n * Whether the dropdown is currently open.\n */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /**\n * Emitted when the selected values change.\n */\n @Event() leChange: EventEmitter<LeMultiOptionSelectDetail>;\n\n /**\n * Emitted when the dropdown opens.\n */\n @Event() leOpen: EventEmitter<void>;\n\n /**\n * Emitted when the dropdown closes.\n */\n @Event() leClose: EventEmitter<void>;\n\n @State() private selectedOptions: LeOption[] = [];\n @State() private searchQuery: string = '';\n\n private dropdownEl?: HTMLLeDropdownBaseElement;\n private inputEl?: HTMLInputElement;\n\n @Watch('value')\n handleValueChange() {\n this.updateSelectedOptions();\n }\n\n @Watch('options')\n handleOptionsChange() {\n this.updateSelectedOptions();\n }\n\n @Watch('showSelectAll')\n handleShowSelectAllChange(newValue: boolean | string | string[]) {\n if (typeof newValue !== 'boolean' && typeof newValue !== 'string') {\n this.showSelectAll = false;\n } else if (typeof newValue === 'boolean') {\n this.showSelectAll = newValue;\n } else if (Array.isArray(newValue)) {\n this.showSelectAll = true;\n this.selectAllLabel = newValue[0];\n this.deselectAllLabel = newValue[1] || newValue[0];\n } else if (typeof newValue === 'string') {\n this.showSelectAll = true;\n try {\n const parsed = JSON.parse(newValue);\n if (Array.isArray(parsed) && parsed.every(item => typeof item === 'string')) {\n this.selectAllLabel = parsed[0];\n this.deselectAllLabel = parsed[1] || parsed[0];\n } else {\n this.selectAllLabel = newValue;\n this.deselectAllLabel = newValue;\n }\n } catch {\n this.selectAllLabel = newValue;\n this.deselectAllLabel = newValue;\n }\n }\n }\n\n componentWillLoad() {\n this.updateSelectedOptions();\n this.handleShowSelectAllChange(this.showSelectAll);\n }\n\n private get parsedOptions(): LeOption[] {\n if (typeof this.options === 'string') {\n try {\n return JSON.parse(this.options);\n } catch {\n return [];\n }\n }\n return this.options;\n }\n\n private get effectiveOptions(): LeOption[] {\n let options = [...this.parsedOptions];\n\n // Add \"Select All\" option if enabled\n if (this.showSelectAll && options.length > 0) {\n const allSelected =\n this.selectedOptions.length === this.parsedOptions.filter(opt => !opt.disabled).length;\n options = [\n {\n label: allSelected ? this.deselectAllLabel : this.selectAllLabel,\n value: '__select_all__',\n iconStart: allSelected ? '✕' : '⇣',\n },\n ...options,\n ];\n }\n\n return options;\n }\n\n private updateSelectedOptions() {\n const valueArray = Array.isArray(this.value) ? this.value : [];\n this.selectedOptions = this.parsedOptions.filter(opt =>\n valueArray.includes(opt.value ?? opt.label),\n );\n }\n\n private filterOption = (option: LeOption, query: string): boolean => {\n if (!query) return true;\n // Always show \"Select All\" option\n if (option.value === '__select_all__') return true;\n\n const searchLower = query.toLowerCase();\n return (\n option.label.toLowerCase().includes(searchLower) ||\n (option.description?.toLowerCase().includes(searchLower) ?? false)\n );\n };\n\n private handleOptionSelect = (e: CustomEvent<LeOptionSelectDetail>) => {\n const { value } = e.detail;\n\n const enabledOptions = this.parsedOptions.filter(opt => !opt.disabled);\n if (enabledOptions.length === 0) return;\n\n // Handle \"Select All\" option\n if (value === '__select_all__') {\n if (this.selectedOptions.length === enabledOptions.length) {\n // Deselect all\n this.value = [];\n } else {\n // Select all (respect maxSelections)\n const selectableOptions = this.maxSelections\n ? enabledOptions.slice(0, this.maxSelections)\n : enabledOptions;\n this.value = selectableOptions.map(opt => opt.value ?? opt.label);\n }\n this.emitChange();\n return;\n }\n\n const isSelected = this.value.includes(value);\n\n if (isSelected) {\n // Remove from selection\n this.value = this.value.filter(v => v !== value);\n this.selectedOptions = this.selectedOptions.filter(opt => (opt.value ?? opt.label) !== value);\n } else {\n // Add to selection (if not at max)\n if (this.maxSelections && this.value.length >= this.maxSelections) {\n return; // Don't add more\n }\n this.value = [...this.value, value];\n }\n\n this.emitChange();\n\n // Clear search after szelection\n this.searchQuery = '';\n };\n\n private emitChange() {\n this.leChange.emit({\n values: this.value,\n options: this.selectedOptions,\n });\n }\n\n private handleDropdownOpen = () => {\n this.open = true;\n this.leOpen.emit();\n\n // Focus search input if searchable\n if (this.searchable) {\n setTimeout(() => {\n this.inputEl?.focus();\n }, 50);\n }\n };\n\n private handleDropdownClose = () => {\n this.open = false;\n this.searchQuery = '';\n this.leClose.emit();\n };\n\n private handleTriggerClick = () => {\n if (!this.disabled) {\n this.dropdownEl?.toggle();\n }\n };\n\n private handleTriggerKeyDown = (e: KeyboardEvent) => {\n if (this.disabled) return;\n\n if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n e.preventDefault();\n this.dropdownEl?.show();\n }\n };\n\n private handleTagDismiss = (option: LeOption, e: CustomEvent) => {\n e.stopPropagation();\n const value = option.value ?? option.label;\n this.value = this.value.filter(v => v !== value);\n this.selectedOptions = this.selectedOptions.filter(opt => opt !== option);\n this.emitChange();\n };\n\n private handleSearchInput = (e: Event) => {\n const target = e.target as HTMLInputElement;\n this.searchQuery = target.value;\n };\n\n private handleClearAll = (e: MouseEvent) => {\n e.stopPropagation();\n this.value = [];\n this.selectedOptions = [];\n this.emitChange();\n };\n\n /**\n * Opens the dropdown.\n */\n @Method()\n async showDropdown() {\n await this.dropdownEl?.show();\n }\n\n /**\n * Closes the dropdown.\n */\n @Method()\n async hideDropdown() {\n await this.dropdownEl?.hide();\n }\n\n /**\n * Clears all selections.\n */\n @Method()\n async clearSelection() {\n this.value = [];\n this.selectedOptions = [];\n this.emitChange();\n }\n\n private renderTags() {\n if (this.selectedOptions.length === 0) {\n return <span class=\"multiselect-placeholder\">{this.placeholder}</span>;\n }\n\n return (\n <div class=\"multiselect-tags\">\n {this.selectedOptions.map(option => (\n <le-tag\n key={option.value ?? option.label}\n label={option.label}\n icon={option.iconStart}\n size={this.size === 'large' ? 'medium' : 'small'}\n dismissible\n disabled={this.disabled}\n onLeDismiss={e => this.handleTagDismiss(option, e)}\n mode=\"default\"\n />\n ))}\n </div>\n );\n }\n\n render() {\n const hasSelections = this.selectedOptions.length > 0;\n const atMaxSelections = this.maxSelections && this.value.length >= this.maxSelections;\n\n return (\n <le-component component=\"le-multiselect\">\n <le-dropdown-base\n ref={el => (this.dropdownEl = el)}\n options={this.effectiveOptions}\n value={this.value}\n multiple={true}\n disabled={this.disabled}\n filterFn={this.searchable ? this.filterOption : undefined}\n filterQuery={this.searchQuery}\n emptyText={this.emptyText}\n showCheckboxes={true}\n fullWidth={this.fullWidth}\n onLeOptionSelect={this.handleOptionSelect}\n onLeDropdownOpen={this.handleDropdownOpen}\n onLeDropdownClose={this.handleDropdownClose}\n >\n <div\n slot=\"trigger\"\n class={{\n 'multiselect-trigger': true,\n 'has-selections': hasSelections,\n 'is-open': this.open,\n 'is-disabled': this.disabled,\n }}\n tabIndex={this.disabled ? -1 : 0}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : undefined}\n onClick={this.handleTriggerClick}\n onKeyDown={this.handleTriggerKeyDown}\n >\n {this.renderTags()}\n\n <div class=\"multiselect-actions\">\n {hasSelections && !this.disabled && (\n <button\n type=\"button\"\n class=\"multiselect-clear\"\n onClick={this.handleClearAll}\n aria-label=\"Clear all\"\n tabIndex={-1}\n >\n <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 4l8 8M12 4l-8 8\" />\n </svg>\n </button>\n )}\n <span class=\"multiselect-arrow\">\n <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 6l4 4 4-4\" />\n </svg>\n </span>\n </div>\n </div>\n\n {/* Search input shown in dropdown header */}\n {this.searchable && this.open && (\n <div class=\"multiselect-search\" slot=\"header\">\n <le-string-input\n mode=\"default\"\n inputRef={el => (this.inputEl = el)}\n class=\"search-input\"\n placeholder=\"Search...\"\n value={this.searchQuery}\n onInput={this.handleSearchInput}\n />\n </div>\n )}\n </le-dropdown-base>\n\n {/* Hidden inputs for form submission */}\n {this.name &&\n this.value.map(val => (\n <input type=\"hidden\" name={this.name} value={val.toString()} key={val.toString()} />\n ))}\n\n {/* Status message */}\n {atMaxSelections && (\n <span class=\"multiselect-status\">Maximum {this.maxSelections} selections</span>\n )}\n </le-component>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"le-multiselect.entry.js","sources":["src/components/le-multiselect/le-multiselect.css?tag=le-multiselect&encapsulation=shadow","src/components/le-multiselect/le-multiselect.tsx"],"sourcesContent":["/**\n * le-multiselect component styles\n *\n * CSS Custom Properties:\n * --le-multiselect-min-height\n * --le-multiselect-padding\n * --le-multiselect-font-size\n * --le-multiselect-border-radius\n * --le-multiselect-border-color\n * --le-multiselect-bg\n * --le-multiselect-color\n */\n\n:host {\n display: inline-block;\n min-width: 250px;\n\n --le-multiselect-min-height: 0;\n --le-multiselect-padding: var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-2);\n --le-multiselect-border-color: var(--le-color-primary, #3b82f6);\n}\n\n:host([disabled]) {\n opacity: 0.5;\n pointer-events: none;\n}\n\n/* Trigger wrapper */\n.multiselect-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n width: 100%;\n min-height: var(--le-multiselect-min-height);\n padding: var(--le-multiselect-padding);\n line-height: var(--le-line-height-tight);\n background: var(--le-multiselect-bg, var(--le-color-surface, #fff));\n border: 1px solid color-mix(in srgb, var(--le-multiselect-border-color) 33%, transparent);\n border-radius: var(--le-multiselect-border-radius, 0.375rem);\n cursor: pointer;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.multiselect-trigger:hover:not(.is-disabled),\n:host(:focus-within) .multiselect-trigger:not(.is-disabled) {\n border-color: var(--le-multiselect-border-color);\n}\n\n:host(:focus-within) .multiselect-trigger {\n outline: 2px solid var(--le-color-focus);\n outline-offset: 2px;\n}\n:host([full-width]) {\n width: 100%;\n}\n\n.multiselect-trigger.is-open {\n border-color: var(--le-color-primary, #3b82f6);\n}\n\n.multiselect-trigger.is-disabled {\n cursor: not-allowed;\n background: var(--le-color-surface-disabled, #f9fafb);\n}\n\n/* Placeholder */\n.multiselect-placeholder {\n color: color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent);\n}\n\n/* Tags container */\n.multiselect-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n flex: 1;\n min-width: 0;\n}\n\n/* Actions (clear + arrow) */\n.multiselect-actions {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n flex-shrink: 0;\n}\n\n/* Clear button */\n.multiselect-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1.5rem;\n padding: 0;\n background: transparent;\n color: var(--le-color-primary, #3b82f6);\n border: none;\n border-radius: 0.25rem;\n cursor: pointer;\n opacity: 0.6;\n transition: opacity 0.15s ease, background-color 0.15s ease;\n}\n\n.multiselect-clear:hover {\n opacity: 1;\n background: var(--le-color-surface-hover, #f3f4f6);\n}\n\n.multiselect-clear svg {\n width: 0.875rem;\n height: 0.875rem;\n}\n\n/* Arrow icon */\n.multiselect-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1rem;\n color: var(--le-color-primary, #3b82f6);\n transition: transform 0.2s ease;\n}\n\n.multiselect-arrow svg {\n width: 1rem;\n height: 1rem;\n}\n\n.multiselect-trigger.is-open .multiselect-arrow {\n transform: rotate(180deg);\n}\n\n/* Search in dropdown */\n.search-input::part(container):focus-within {\n outline: none !important;\n}\n.search-input {\n --le-input-radius: var(--le-radius-md);\n}\n\n/* Status message */\n.multiselect-status {\n display: block;\n margin-top: 0.25rem;\n font-size: 0.75rem;\n color: var(--le-color-text-muted, #6b7280);\n}\n\n/* Size variants */\n:host([size='small']) .multiselect-trigger {\n --le-multiselect-min-height: 2rem;\n --le-multiselect-padding: 0.25rem 0.375rem;\n --le-multiselect-font-size: 0.75rem;\n}\n\n:host([size='large']) .multiselect-trigger {\n --le-multiselect-min-height: 3rem;\n --le-multiselect-padding: 0.5rem 0.625rem;\n --le-multiselect-font-size: 1rem;\n}\n","import {\n Component,\n Prop,\n State,\n Event,\n EventEmitter,\n Method,\n Element,\n Watch,\n h,\n} from '@stencil/core';\nimport {\n LeOption,\n LeOptionValue,\n LeMultiOptionSelectDetail,\n LeOptionSelectDetail,\n} from '../../types/options';\n\n/**\n * A multiselect component for selecting multiple options.\n *\n * Displays selected items as tags with optional search filtering.\n *\n * @cmsEditable true\n * @cmsCategory Form\n *\n * @example Basic multiselect\n * ```html\n * <le-multiselect\n * placeholder=\"Select options...\"\n * options='[{\"label\": \"Red\"}, {\"label\": \"Green\"}, {\"label\": \"Blue\"}]'\n * ></le-multiselect>\n * ```\n *\n * @example With max selections\n * ```html\n * <le-multiselect\n * max-selections=\"3\"\n * options='[{\"label\": \"Option 1\"}, {\"label\": \"Option 2\"}, {\"label\": \"Option 3\"}, {\"label\": \"Option 4\"}]'\n * ></le-multiselect>\n * ```\n *\n * @example With search\n * ```html\n * <le-multiselect\n * searchable\n * placeholder=\"Search and select...\"\n * options='[{\"label\": \"Apple\"}, {\"label\": \"Banana\"}, {\"label\": \"Cherry\"}]'\n * ></le-multiselect>\n * ```\n */\n@Component({\n tag: 'le-multiselect',\n styleUrl: 'le-multiselect.css',\n shadow: true,\n})\nexport class LeMultiselect {\n @Element() el: HTMLElement;\n\n /**\n * The options to display in the dropdown.\n */\n @Prop() options: LeOption[] | string = [];\n\n /**\n * The currently selected values.\n */\n @Prop({ mutable: true }) value: LeOptionValue[] = [];\n\n /**\n * Placeholder text when no options are selected.\n */\n @Prop() placeholder: string = 'Select options...';\n\n /**\n * Whether the multiselect is disabled.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Whether selection is required.\n */\n @Prop() required: boolean = false;\n\n /**\n * Name attribute for form submission.\n */\n @Prop() name?: string;\n\n /**\n * Whether the multiselect should take full width of its container.\n */\n @Prop({ reflect: true }) fullWidth: boolean = false;\n\n /**\n * Size variant of the multiselect.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Maximum number of selections allowed.\n */\n @Prop() maxSelections?: number;\n\n /**\n * Labels for the \"Select All\" option.\n */\n @State() private selectAllLabel: string = 'Select All';\n @State() private deselectAllLabel: string = 'Deselect All';\n\n /**\n * Whether to show a \"Select All\" option.\n * Also accepts a string or array of strings to customize the label(s).\n */\n @Prop({ mutable: true }) showSelectAll: boolean | string | string[] = false;\n\n /**\n * Whether the input is searchable.\n */\n @Prop() searchable: boolean = false;\n\n /**\n * Text to show when no options match the search.\n */\n @Prop() emptyText: string = 'No results found';\n\n /**\n * Whether the dropdown is currently open.\n */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /**\n * Emitted when the selected values change.\n */\n @Event() leChange: EventEmitter<LeMultiOptionSelectDetail>;\n\n /**\n * Emitted when the dropdown opens.\n */\n @Event() leOpen: EventEmitter<void>;\n\n /**\n * Emitted when the dropdown closes.\n */\n @Event() leClose: EventEmitter<void>;\n\n @State() private selectedOptions: LeOption[] = [];\n @State() private searchQuery: string = '';\n\n private dropdownEl?: HTMLLeDropdownBaseElement;\n private inputEl?: HTMLInputElement;\n\n @Watch('value')\n handleValueChange() {\n this.updateSelectedOptions();\n }\n\n @Watch('options')\n handleOptionsChange() {\n this.updateSelectedOptions();\n }\n\n @Watch('showSelectAll')\n handleShowSelectAllChange(newValue: boolean | string | string[]) {\n if (typeof newValue !== 'boolean' && typeof newValue !== 'string') {\n this.showSelectAll = false;\n } else if (typeof newValue === 'boolean') {\n this.showSelectAll = newValue;\n } else if (Array.isArray(newValue)) {\n this.showSelectAll = true;\n this.selectAllLabel = newValue[0];\n this.deselectAllLabel = newValue[1] || newValue[0];\n } else if (typeof newValue === 'string') {\n this.showSelectAll = true;\n try {\n const parsed = JSON.parse(newValue);\n if (Array.isArray(parsed) && parsed.every(item => typeof item === 'string')) {\n this.selectAllLabel = parsed[0];\n this.deselectAllLabel = parsed[1] || parsed[0];\n } else {\n this.selectAllLabel = newValue;\n this.deselectAllLabel = newValue;\n }\n } catch {\n this.selectAllLabel = newValue;\n this.deselectAllLabel = newValue;\n }\n }\n }\n\n componentWillLoad() {\n this.updateSelectedOptions();\n this.handleShowSelectAllChange(this.showSelectAll);\n }\n\n private get parsedOptions(): LeOption[] {\n if (typeof this.options === 'string') {\n try {\n return JSON.parse(this.options);\n } catch {\n return [];\n }\n }\n return this.options;\n }\n\n private get effectiveOptions(): LeOption[] {\n let options = [...this.parsedOptions];\n\n // Add \"Select All\" option if enabled\n if (this.showSelectAll && options.length > 0) {\n const allSelected =\n this.selectedOptions.length === this.parsedOptions.filter(opt => !opt.disabled).length;\n options = [\n {\n label: allSelected ? this.deselectAllLabel : this.selectAllLabel,\n value: '__select_all__',\n iconStart: allSelected ? '✕' : '⇣',\n },\n ...options,\n ];\n }\n\n return options;\n }\n\n private updateSelectedOptions() {\n const valueArray = Array.isArray(this.value) ? this.value : [];\n this.selectedOptions = this.parsedOptions.filter(opt =>\n valueArray.includes(opt.value ?? opt.label),\n );\n }\n\n private filterOption = (option: LeOption, query: string): boolean => {\n if (!query) return true;\n // Always show \"Select All\" option\n if (option.value === '__select_all__') return true;\n\n const searchLower = query.toLowerCase();\n return (\n option.label.toLowerCase().includes(searchLower) ||\n (option.description?.toLowerCase().includes(searchLower) ?? false)\n );\n };\n\n private handleOptionSelect = (e: CustomEvent<LeOptionSelectDetail>) => {\n const { value } = e.detail;\n\n const enabledOptions = this.parsedOptions.filter(opt => !opt.disabled);\n if (enabledOptions.length === 0) return;\n\n // Handle \"Select All\" option\n if (value === '__select_all__') {\n if (this.selectedOptions.length === enabledOptions.length) {\n // Deselect all\n this.value = [];\n } else {\n // Select all (respect maxSelections)\n const selectableOptions = this.maxSelections\n ? enabledOptions.slice(0, this.maxSelections)\n : enabledOptions;\n this.value = selectableOptions.map(opt => opt.value ?? opt.label);\n }\n this.emitChange();\n return;\n }\n\n const isSelected = this.value.includes(value);\n\n if (isSelected) {\n // Remove from selection\n this.value = this.value.filter(v => v !== value);\n this.selectedOptions = this.selectedOptions.filter(opt => (opt.value ?? opt.label) !== value);\n } else {\n // Add to selection (if not at max)\n if (this.maxSelections && this.value.length >= this.maxSelections) {\n return; // Don't add more\n }\n this.value = [...this.value, value];\n }\n\n this.emitChange();\n\n // Clear search after szelection\n this.searchQuery = '';\n };\n\n private emitChange() {\n this.leChange.emit({\n values: this.value,\n options: this.selectedOptions,\n });\n }\n\n private handleDropdownOpen = () => {\n this.open = true;\n this.leOpen.emit();\n\n // Focus search input if searchable\n if (this.searchable) {\n setTimeout(() => {\n this.inputEl?.focus();\n }, 50);\n }\n };\n\n private handleDropdownClose = () => {\n this.open = false;\n this.searchQuery = '';\n this.leClose.emit();\n };\n\n private handleTriggerClick = () => {\n if (!this.disabled) {\n this.dropdownEl?.toggle();\n }\n };\n\n private handleTriggerKeyDown = (e: KeyboardEvent) => {\n if (this.disabled) return;\n\n if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n e.preventDefault();\n this.dropdownEl?.show();\n }\n };\n\n private handleTagDismiss = (option: LeOption, e: CustomEvent) => {\n e.stopPropagation();\n const value = option.value ?? option.label;\n this.value = this.value.filter(v => v !== value);\n this.selectedOptions = this.selectedOptions.filter(opt => opt !== option);\n this.emitChange();\n };\n\n private handleSearchInput = (e: Event) => {\n const target = e.target as HTMLInputElement;\n this.searchQuery = target.value;\n };\n\n private handleClearAll = (e: MouseEvent) => {\n e.stopPropagation();\n this.value = [];\n this.selectedOptions = [];\n this.emitChange();\n };\n\n /**\n * Opens the dropdown.\n */\n @Method()\n async showDropdown() {\n await this.dropdownEl?.show();\n }\n\n /**\n * Closes the dropdown.\n */\n @Method()\n async hideDropdown() {\n await this.dropdownEl?.hide();\n }\n\n /**\n * Clears all selections.\n */\n @Method()\n async clearSelection() {\n this.value = [];\n this.selectedOptions = [];\n this.emitChange();\n }\n\n private renderTags() {\n if (this.selectedOptions.length === 0) {\n return <span class=\"multiselect-placeholder\">{this.placeholder}</span>;\n }\n\n return (\n <div class=\"multiselect-tags\">\n {this.selectedOptions.map(option => (\n <le-tag\n key={option.value ?? option.label}\n label={option.label}\n icon={option.iconStart}\n size={this.size === 'large' ? 'medium' : 'small'}\n dismissible\n disabled={this.disabled}\n onLeDismiss={e => this.handleTagDismiss(option, e)}\n mode=\"default\"\n />\n ))}\n </div>\n );\n }\n\n render() {\n const hasSelections = this.selectedOptions.length > 0;\n const atMaxSelections = this.maxSelections && this.value.length >= this.maxSelections;\n\n return (\n <le-component component=\"le-multiselect\">\n <le-dropdown-base\n ref={el => (this.dropdownEl = el)}\n options={this.effectiveOptions}\n value={this.value}\n multiple={true}\n disabled={this.disabled}\n filterFn={this.searchable ? this.filterOption : undefined}\n filterQuery={this.searchQuery}\n emptyText={this.emptyText}\n showCheckboxes={true}\n fullWidth={this.fullWidth}\n onLeOptionSelect={this.handleOptionSelect}\n onLeDropdownOpen={this.handleDropdownOpen}\n onLeDropdownClose={this.handleDropdownClose}\n >\n <div\n slot=\"trigger\"\n class={{\n 'multiselect-trigger': true,\n 'has-selections': hasSelections,\n 'is-open': this.open,\n 'is-disabled': this.disabled,\n }}\n tabIndex={this.disabled ? -1 : 0}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : undefined}\n onClick={this.handleTriggerClick}\n onKeyDown={this.handleTriggerKeyDown}\n >\n {this.renderTags()}\n\n <div class=\"multiselect-actions\">\n {hasSelections && !this.disabled && (\n <button\n type=\"button\"\n class=\"multiselect-clear\"\n onClick={this.handleClearAll}\n aria-label=\"Clear all\"\n tabIndex={-1}\n >\n <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 4l8 8M12 4l-8 8\" />\n </svg>\n </button>\n )}\n <span class=\"multiselect-arrow\">\n <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 6l4 4 4-4\" />\n </svg>\n </span>\n </div>\n </div>\n\n {/* Search input shown in dropdown header */}\n {this.searchable && this.open && (\n <div class=\"multiselect-search\" slot=\"header\">\n <le-string-input\n mode=\"default\"\n inputRef={el => (this.inputEl = el)}\n class=\"search-input\"\n placeholder=\"Search...\"\n value={this.searchQuery}\n onInput={this.handleSearchInput}\n />\n </div>\n )}\n </le-dropdown-base>\n\n {/* Hidden inputs for form submission */}\n {this.name &&\n this.value.map(val => (\n <input type=\"hidden\" name={this.name} value={val.toString()} key={val.toString()} />\n ))}\n\n {/* Status message */}\n {atMaxSelections && (\n <span class=\"multiselect-status\">Maximum {this.maxSelections} selections</span>\n )}\n </le-component>\n );\n }\n}\n"],"names":[],"mappings":"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"}
@@ -1,7 +1,7 @@
1
- import { r as registerInstance, d as createEvent, c as getElement, h } from './index-hmBwv43R.js';
2
- import { c as classnames } from './utils-DRTFlnxz.js';
1
+ import { r as registerInstance, d as createEvent, c as getElement, h } from './index-CNv6tzAt.js';
2
+ import { c as classnames } from './utils-BzC2tvPX.js';
3
3
 
4
- const leNumberInputCss = ":host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-padding:2px 6px;--le-input-height:1.5rem;--le-input-label-color:var(--le-color-text-primary, #333333);--le-input-desc-color:var(--le-color-text-secondary, #666666);--le-input-placeholder-color:#999999;--le-input-border-error:2px solid var(--le-color-danger, #dc3545);--le-input-error-color:var(--le-color-danger, #dc3545)}.le-input-wrapper{display:flex;flex-direction:column;gap:2px}.le-input-label{display:block;font-size:0.9em;font-weight:500;color:var(--le-input-label-color);margin-bottom:2px}.le-input-container{position:relative;display:flex;align-items:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);transition:border-color 0.2s}.le-input-container:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}.le-input-container.has-error{border:var(--le-input-border-error)}:host([disabled]) .le-input-container{opacity:0.6;background-color:rgba(0,0,0,0.05);cursor:not-allowed}input{flex:1;width:100%;height:calc(var(--le-input-height) - 2px);padding:var(--le-input-padding);border:none;background:transparent;color:var(--le-input-color);font-family:inherit;font-size:inherit;outline:none;text-align:right;-moz-appearance:textfield;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input::placeholder{color:var(--le-input-placeholder-color)}.icon-start,.icon-end{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--le-input-desc-color)}.le-input-controls{display:flex;flex-direction:column;border-left:1px solid var(--le-color-border, #cccccc);height:100%}.le-input-control-btn{--le-button-border-radius:0;--le-button-padding-x:0;--le-button-padding-y:0;--le-button-small-font-size:9.5px;--le-button-small-padding:0 0.2rem;--le-button-icon-aspect-ratio:2;display:flex;align-items:center;justify-content:center;height:50%;cursor:pointer;background:none;border:none;color:var(--le-input-desc-color);font-size:10px;line-height:1}.le-input-control-btn:hover{background-color:rgba(0,0,0,0.05);color:var(--le-color-primary, #007bff)}.le-input-control-btn:active{background-color:rgba(0,0,0,0.1)}.le-input-description{font-size:0.85em;color:var(--le-input-desc-color);margin-top:2px}.le-input-error{font-size:0.85em;color:var(--le-input-error-color);margin-top:2px}";
4
+ const leNumberInputCss = () => `:host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-padding:2px 6px;--le-input-height:1.5rem;--le-input-label-color:var(--le-color-text-primary, #333333);--le-input-desc-color:var(--le-color-text-secondary, #666666);--le-input-placeholder-color:#999999;--le-input-border-error:2px solid var(--le-color-danger, #dc3545);--le-input-error-color:var(--le-color-danger, #dc3545)}.le-input-wrapper{display:flex;flex-direction:column;gap:2px}.le-input-label{display:block;font-size:0.9em;font-weight:500;color:var(--le-input-label-color);margin-bottom:2px}.le-input-container{position:relative;display:flex;align-items:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);transition:border-color 0.2s}.le-input-container:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}.le-input-container.has-error{border:var(--le-input-border-error)}:host([disabled]) .le-input-container{opacity:0.6;background-color:rgba(0,0,0,0.05);cursor:not-allowed}input{flex:1;width:100%;height:calc(var(--le-input-height) - 2px);padding:var(--le-input-padding);border:none;background:transparent;color:var(--le-input-color);font-family:inherit;font-size:inherit;outline:none;text-align:right;-moz-appearance:textfield;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input::placeholder{color:var(--le-input-placeholder-color)}.icon-start,.icon-end{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--le-input-desc-color)}.le-input-controls{display:flex;flex-direction:column;border-left:1px solid var(--le-color-border, #cccccc);height:100%}.le-input-control-btn{--le-button-border-radius:0;--le-button-padding-x:0;--le-button-padding-y:0;--le-button-small-font-size:9.5px;--le-button-small-padding:0 0.2rem;--le-button-icon-aspect-ratio:2;display:flex;align-items:center;justify-content:center;height:50%;cursor:pointer;background:none;border:none;color:var(--le-input-desc-color);font-size:10px;line-height:1}.le-input-control-btn:hover{background-color:rgba(0,0,0,0.05);color:var(--le-color-primary, #007bff)}.le-input-control-btn:active{background-color:rgba(0,0,0,0.1)}.le-input-description{font-size:0.85em;color:var(--le-input-desc-color);margin-top:2px}.le-input-error{font-size:0.85em;color:var(--le-input-error-color);margin-top:2px}`;
5
5
 
6
6
  const LeNumberInput = class {
7
7
  constructor(hostRef) {
@@ -194,7 +194,7 @@ const LeNumberInput = class {
194
194
  "value": ["valueChanged"]
195
195
  }; }
196
196
  };
197
- LeNumberInput.style = leNumberInputCss;
197
+ LeNumberInput.style = leNumberInputCss();
198
198
 
199
199
  export { LeNumberInput as le_number_input };
200
200
  //# sourceMappingURL=le-number-input.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"le-number-input.entry.js","sources":["src/components/le-number-input/le-number-input.css?tag=le-number-input&encapsulation=shadow","src/components/le-number-input/le-number-input.tsx"],"sourcesContent":[":host {\n display: block;\n --le-input-bg: var(--le-color-surface, #ffffff);\n --le-input-color: var(--le-color-text-primary, #333333);\n --le-input-border: var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);\n --le-input-radius: var(--le-radius-sm, 4px);\n --le-input-padding: 2px 6px;\n --le-input-height: 1.5rem;\n --le-input-label-color: var(--le-color-text-primary, #333333);\n --le-input-desc-color: var(--le-color-text-secondary, #666666);\n --le-input-placeholder-color: #999999;\n --le-input-border-error: 2px solid var(--le-color-danger, #dc3545);\n --le-input-error-color: var(--le-color-danger, #dc3545);\n}\n\n.le-input-wrapper {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.le-input-label {\n display: block;\n font-size: 0.9em;\n font-weight: 500;\n color: var(--le-input-label-color);\n margin-bottom: 2px;\n}\n\n.le-input-container {\n position: relative;\n display: flex;\n align-items: center;\n background: var(--le-input-bg);\n border: var(--le-input-border);\n border-radius: var(--le-input-radius);\n transition: border-color 0.2s;\n}\n\n.le-input-container:focus-within {\n outline: 2px solid var(--le-color-focus);\n outline-offset: 2px;\n}\n\n.le-input-container.has-error {\n border: var(--le-input-border-error);\n}\n\n:host([disabled]) .le-input-container {\n opacity: 0.6;\n background-color: rgba(0,0,0,0.05);\n cursor: not-allowed;\n}\n\ninput {\n flex: 1;\n width: 100%;\n height: calc(var(--le-input-height) - 2px);\n padding: var(--le-input-padding);\n border: none;\n background: transparent;\n color: var(--le-input-color);\n font-family: inherit;\n font-size: inherit;\n outline: none;\n text-align: right; /* Aligned to end */\n -moz-appearance: textfield; /* Remove default spinners in Firefox */\n}\n\n/* Remove default spinners in Chrome/Safari/Edge */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\ninput::placeholder {\n color: var(--le-input-placeholder-color);\n}\n\n.icon-start, .icon-end {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n color: var(--le-input-desc-color);\n}\n\n.le-input-controls {\n display: flex;\n flex-direction: column;\n border-left: 1px solid var(--le-color-border, #cccccc);\n height: 100%;\n}\n\n.le-input-control-btn {\n --le-button-border-radius: 0;\n --le-button-padding-x: 0;\n --le-button-padding-y: 0;\n --le-button-small-font-size: 9.5px;\n --le-button-small-padding: 0 0.2rem;\n --le-button-icon-aspect-ratio: 2;\n\n display: flex;\n align-items: center;\n justify-content: center;\n height: 50%;\n cursor: pointer;\n background: none;\n border: none;\n color: var(--le-input-desc-color);\n font-size: 10px;\n line-height: 1;\n}\n\n.le-input-control-btn:hover {\n background-color: rgba(0,0,0,0.05);\n color: var(--le-color-primary, #007bff);\n}\n\n.le-input-control-btn:active {\n background-color: rgba(0,0,0,0.1);\n}\n\n.le-input-description {\n font-size: 0.85em;\n color: var(--le-input-desc-color);\n margin-top: 2px;\n}\n\n.le-input-error {\n font-size: 0.85em;\n color: var(--le-input-error-color);\n margin-top: 2px;\n}\n","import { Component, Prop, Event, EventEmitter, State, h, Element, Watch } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A number input component with validation, keyboard controls, and custom spinners.\n *\n * @slot - The label text for the input\n * @slot description - Additional description text displayed below the input\n * @slot icon-start - Icon to display at the start of the input\n *\n * @cssprop --le-input-bg - Input background color\n * @cssprop --le-input-color - Input text color\n * @cssprop --le-input-border - Input border style\n * @cssprop --le-input-border-focus - Input border style when focused\n * @cssprop --le-input-border-error - Input border style when invalid\n * @cssprop --le-input-radius - Input border radius\n * @cssprop --le-input-padding - Input padding\n */\n@Component({\n tag: 'le-number-input',\n styleUrl: 'le-number-input.css',\n shadow: true,\n})\nexport class LeNumberInput {\n @Element() el: HTMLElement;\n\n /**\n * The value of the input\n */\n @Prop({ mutable: true, reflect: true }) value: number;\n\n /**\n * The name of the input\n */\n @Prop() name: string;\n\n /**\n * Label for the input\n */\n @Prop() label: string;\n\n /**\n * Placeholder text\n */\n @Prop() placeholder: string;\n\n /**\n * Minimum allowed value\n */\n @Prop() min?: number;\n\n /**\n * Maximum allowed value\n */\n @Prop() max?: number;\n\n /**\n * Step value for increment/decrement\n */\n @Prop() step: number = 1;\n\n /**\n * Whether the input is required\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether the input is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether the input is read-only\n */\n @Prop() readonly: boolean = false;\n\n /**\n * Icon for the start icon\n */\n @Prop() iconStart?: string;\n\n /**\n * Whether to show the spinner controls\n */\n @Prop() showSpinners: boolean = true;\n\n /**\n * External ID for linking with external systems\n */\n @Prop() externalId: string;\n\n /**\n * Internal validation state\n */\n @State() private isValid: boolean = true;\n @State() private validationMessage: string = '';\n\n /**\n * Emitted when the value changes (on blur or Enter)\n */\n @Event() leChange: EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>;\n\n /**\n * Emitted when the input value changes (on keystroke/spin)\n */\n @Event() leInput: EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>;\n\n @Watch('value')\n valueChanged() {\n this.validate();\n }\n\n private validate() {\n if (this.required && (this.value === undefined || this.value === null || isNaN(this.value))) {\n this.isValid = false;\n this.validationMessage = 'This field is required';\n return;\n }\n\n if (this.value !== undefined && this.value !== null && !isNaN(this.value)) {\n if (this.min !== undefined && this.value < this.min) {\n this.isValid = false;\n this.validationMessage = `Value must be at least ${this.min}`;\n return;\n }\n if (this.max !== undefined && this.value > this.max) {\n this.isValid = false;\n this.validationMessage = `Value must be at most ${this.max}`;\n return;\n }\n }\n\n this.isValid = true;\n this.validationMessage = '';\n }\n\n private emitChange() {\n this.leChange.emit({\n value: this.value,\n name: this.name,\n externalId: this.externalId,\n isValid: this.isValid\n });\n }\n\n private emitInput() {\n this.leInput.emit({\n value: this.value,\n name: this.name,\n externalId: this.externalId,\n isValid: this.isValid\n });\n }\n\n private updateValue(newValue: number) {\n if (this.disabled || this.readonly) return;\n \n // Round to avoid floating point errors\n const precision = this.step.toString().split('.')[1]?.length || 0;\n const rounded = parseFloat(newValue.toFixed(precision));\n \n this.value = rounded;\n this.validate();\n this.emitInput();\n }\n\n private handleInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement;\n const val = parseFloat(input.value);\n \n if (input.value === '') {\n this.value = undefined;\n } else if (!isNaN(val)) {\n this.value = val;\n }\n \n this.validate();\n this.emitInput();\n };\n\n private handleChange = () => {\n this.validate();\n this.emitChange();\n };\n\n private handleKeyDown = (ev: KeyboardEvent) => {\n if (this.disabled || this.readonly) return;\n\n let multiplier = 1;\n if (ev.shiftKey) multiplier = 10;\n if (ev.altKey) multiplier = 0.1;\n\n const current = this.value || 0;\n\n if (ev.key === 'ArrowUp') {\n ev.preventDefault();\n this.updateValue(current + (this.step * multiplier));\n } else if (ev.key === 'ArrowDown') {\n ev.preventDefault();\n this.updateValue(current - (this.step * multiplier));\n }\n };\n\n private handleWheel = (ev: WheelEvent) => {\n if (this.disabled || this.readonly) return;\n // Only handle if input is focused to prevent accidental scrolling\n if (document.activeElement !== ev.target) return;\n\n ev.preventDefault();\n const current = this.value || 0;\n \n if (ev.deltaY < 0) {\n this.updateValue(current + this.step);\n } else {\n this.updateValue(current - this.step);\n }\n };\n\n private increment = (ev: Event) => {\n ev.preventDefault(); // Prevent focus loss\n const current = this.value || 0;\n this.updateValue(current + this.step);\n // Trigger change event for buttons as they are \"final\" actions usually\n this.emitChange();\n };\n\n private decrement = (ev: Event) => {\n ev.preventDefault();\n const current = this.value || 0;\n this.updateValue(current - this.step);\n this.emitChange();\n };\n\n render() {\n return (\n <le-component component=\"le-number-input\" hostClass={classnames({ 'disabled': this.disabled })}>\n <div class=\"le-input-wrapper\">\n {this.label && (\n <label class=\"le-input-label\" htmlFor={this.name}>{this.label}</label>\n )}\n \n <div class={classnames('le-input-container', { 'has-error': !this.isValid })}>\n {this.iconStart && (\n <span class=\"icon-start\">{this.iconStart}</span>\n )}\n \n <input\n id={this.name}\n type=\"number\"\n name={this.name}\n placeholder={this.placeholder}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n onInput={this.handleInput}\n onChange={this.handleChange}\n onKeyDown={this.handleKeyDown}\n onWheel={this.handleWheel}\n />\n \n {this.showSpinners && (\n <div class=\"le-input-controls\">\n <le-button\n mode=\"default\"\n variant=\"clear\" \n size=\"small\"\n icon-only\n class=\"le-input-control-btn\" \n onClick={this.increment}\n disabled={this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max)}\n tabindex=\"-1\"\n >\n <span slot=\"icon-only\">↑</span>\n </le-button>\n <le-button\n mode=\"default\"\n variant=\"clear\" \n size=\"small\" \n icon-only \n class=\"le-input-control-btn\" \n onClick={this.decrement}\n disabled={this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min)}\n tabindex=\"-1\"\n >\n <span slot=\"icon-only\">↓</span>\n </le-button>\n </div>\n )}\n </div>\n\n {!this.isValid && <div class=\"le-input-error\">{this.validationMessage}</div>}\n\n <div class=\"le-input-description\">\n <le-slot name=\"description\" type=\"text\" tag=\"p\" label=\"Description\">\n <slot name=\"description\"></slot>\n </le-slot>\n </div>\n </div>\n </le-component>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"le-number-input.entry.js","sources":["src/components/le-number-input/le-number-input.css?tag=le-number-input&encapsulation=shadow","src/components/le-number-input/le-number-input.tsx"],"sourcesContent":[":host {\n display: block;\n --le-input-bg: var(--le-color-surface, #ffffff);\n --le-input-color: var(--le-color-text-primary, #333333);\n --le-input-border: var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);\n --le-input-radius: var(--le-radius-sm, 4px);\n --le-input-padding: 2px 6px;\n --le-input-height: 1.5rem;\n --le-input-label-color: var(--le-color-text-primary, #333333);\n --le-input-desc-color: var(--le-color-text-secondary, #666666);\n --le-input-placeholder-color: #999999;\n --le-input-border-error: 2px solid var(--le-color-danger, #dc3545);\n --le-input-error-color: var(--le-color-danger, #dc3545);\n}\n\n.le-input-wrapper {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.le-input-label {\n display: block;\n font-size: 0.9em;\n font-weight: 500;\n color: var(--le-input-label-color);\n margin-bottom: 2px;\n}\n\n.le-input-container {\n position: relative;\n display: flex;\n align-items: center;\n background: var(--le-input-bg);\n border: var(--le-input-border);\n border-radius: var(--le-input-radius);\n transition: border-color 0.2s;\n}\n\n.le-input-container:focus-within {\n outline: 2px solid var(--le-color-focus);\n outline-offset: 2px;\n}\n\n.le-input-container.has-error {\n border: var(--le-input-border-error);\n}\n\n:host([disabled]) .le-input-container {\n opacity: 0.6;\n background-color: rgba(0,0,0,0.05);\n cursor: not-allowed;\n}\n\ninput {\n flex: 1;\n width: 100%;\n height: calc(var(--le-input-height) - 2px);\n padding: var(--le-input-padding);\n border: none;\n background: transparent;\n color: var(--le-input-color);\n font-family: inherit;\n font-size: inherit;\n outline: none;\n text-align: right; /* Aligned to end */\n -moz-appearance: textfield; /* Remove default spinners in Firefox */\n}\n\n/* Remove default spinners in Chrome/Safari/Edge */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\ninput::placeholder {\n color: var(--le-input-placeholder-color);\n}\n\n.icon-start, .icon-end {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n color: var(--le-input-desc-color);\n}\n\n.le-input-controls {\n display: flex;\n flex-direction: column;\n border-left: 1px solid var(--le-color-border, #cccccc);\n height: 100%;\n}\n\n.le-input-control-btn {\n --le-button-border-radius: 0;\n --le-button-padding-x: 0;\n --le-button-padding-y: 0;\n --le-button-small-font-size: 9.5px;\n --le-button-small-padding: 0 0.2rem;\n --le-button-icon-aspect-ratio: 2;\n\n display: flex;\n align-items: center;\n justify-content: center;\n height: 50%;\n cursor: pointer;\n background: none;\n border: none;\n color: var(--le-input-desc-color);\n font-size: 10px;\n line-height: 1;\n}\n\n.le-input-control-btn:hover {\n background-color: rgba(0,0,0,0.05);\n color: var(--le-color-primary, #007bff);\n}\n\n.le-input-control-btn:active {\n background-color: rgba(0,0,0,0.1);\n}\n\n.le-input-description {\n font-size: 0.85em;\n color: var(--le-input-desc-color);\n margin-top: 2px;\n}\n\n.le-input-error {\n font-size: 0.85em;\n color: var(--le-input-error-color);\n margin-top: 2px;\n}\n","import { Component, Prop, Event, EventEmitter, State, h, Element, Watch } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A number input component with validation, keyboard controls, and custom spinners.\n *\n * @slot - The label text for the input\n * @slot description - Additional description text displayed below the input\n * @slot icon-start - Icon to display at the start of the input\n *\n * @cssprop --le-input-bg - Input background color\n * @cssprop --le-input-color - Input text color\n * @cssprop --le-input-border - Input border style\n * @cssprop --le-input-border-focus - Input border style when focused\n * @cssprop --le-input-border-error - Input border style when invalid\n * @cssprop --le-input-radius - Input border radius\n * @cssprop --le-input-padding - Input padding\n */\n@Component({\n tag: 'le-number-input',\n styleUrl: 'le-number-input.css',\n shadow: true,\n})\nexport class LeNumberInput {\n @Element() el: HTMLElement;\n\n /**\n * The value of the input\n */\n @Prop({ mutable: true, reflect: true }) value: number;\n\n /**\n * The name of the input\n */\n @Prop() name: string;\n\n /**\n * Label for the input\n */\n @Prop() label: string;\n\n /**\n * Placeholder text\n */\n @Prop() placeholder: string;\n\n /**\n * Minimum allowed value\n */\n @Prop() min?: number;\n\n /**\n * Maximum allowed value\n */\n @Prop() max?: number;\n\n /**\n * Step value for increment/decrement\n */\n @Prop() step: number = 1;\n\n /**\n * Whether the input is required\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether the input is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether the input is read-only\n */\n @Prop() readonly: boolean = false;\n\n /**\n * Icon for the start icon\n */\n @Prop() iconStart?: string;\n\n /**\n * Whether to show the spinner controls\n */\n @Prop() showSpinners: boolean = true;\n\n /**\n * External ID for linking with external systems\n */\n @Prop() externalId: string;\n\n /**\n * Internal validation state\n */\n @State() private isValid: boolean = true;\n @State() private validationMessage: string = '';\n\n /**\n * Emitted when the value changes (on blur or Enter)\n */\n @Event() leChange: EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>;\n\n /**\n * Emitted when the input value changes (on keystroke/spin)\n */\n @Event() leInput: EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>;\n\n @Watch('value')\n valueChanged() {\n this.validate();\n }\n\n private validate() {\n if (this.required && (this.value === undefined || this.value === null || isNaN(this.value))) {\n this.isValid = false;\n this.validationMessage = 'This field is required';\n return;\n }\n\n if (this.value !== undefined && this.value !== null && !isNaN(this.value)) {\n if (this.min !== undefined && this.value < this.min) {\n this.isValid = false;\n this.validationMessage = `Value must be at least ${this.min}`;\n return;\n }\n if (this.max !== undefined && this.value > this.max) {\n this.isValid = false;\n this.validationMessage = `Value must be at most ${this.max}`;\n return;\n }\n }\n\n this.isValid = true;\n this.validationMessage = '';\n }\n\n private emitChange() {\n this.leChange.emit({\n value: this.value,\n name: this.name,\n externalId: this.externalId,\n isValid: this.isValid\n });\n }\n\n private emitInput() {\n this.leInput.emit({\n value: this.value,\n name: this.name,\n externalId: this.externalId,\n isValid: this.isValid\n });\n }\n\n private updateValue(newValue: number) {\n if (this.disabled || this.readonly) return;\n \n // Round to avoid floating point errors\n const precision = this.step.toString().split('.')[1]?.length || 0;\n const rounded = parseFloat(newValue.toFixed(precision));\n \n this.value = rounded;\n this.validate();\n this.emitInput();\n }\n\n private handleInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement;\n const val = parseFloat(input.value);\n \n if (input.value === '') {\n this.value = undefined;\n } else if (!isNaN(val)) {\n this.value = val;\n }\n \n this.validate();\n this.emitInput();\n };\n\n private handleChange = () => {\n this.validate();\n this.emitChange();\n };\n\n private handleKeyDown = (ev: KeyboardEvent) => {\n if (this.disabled || this.readonly) return;\n\n let multiplier = 1;\n if (ev.shiftKey) multiplier = 10;\n if (ev.altKey) multiplier = 0.1;\n\n const current = this.value || 0;\n\n if (ev.key === 'ArrowUp') {\n ev.preventDefault();\n this.updateValue(current + (this.step * multiplier));\n } else if (ev.key === 'ArrowDown') {\n ev.preventDefault();\n this.updateValue(current - (this.step * multiplier));\n }\n };\n\n private handleWheel = (ev: WheelEvent) => {\n if (this.disabled || this.readonly) return;\n // Only handle if input is focused to prevent accidental scrolling\n if (document.activeElement !== ev.target) return;\n\n ev.preventDefault();\n const current = this.value || 0;\n \n if (ev.deltaY < 0) {\n this.updateValue(current + this.step);\n } else {\n this.updateValue(current - this.step);\n }\n };\n\n private increment = (ev: Event) => {\n ev.preventDefault(); // Prevent focus loss\n const current = this.value || 0;\n this.updateValue(current + this.step);\n // Trigger change event for buttons as they are \"final\" actions usually\n this.emitChange();\n };\n\n private decrement = (ev: Event) => {\n ev.preventDefault();\n const current = this.value || 0;\n this.updateValue(current - this.step);\n this.emitChange();\n };\n\n render() {\n return (\n <le-component component=\"le-number-input\" hostClass={classnames({ 'disabled': this.disabled })}>\n <div class=\"le-input-wrapper\">\n {this.label && (\n <label class=\"le-input-label\" htmlFor={this.name}>{this.label}</label>\n )}\n \n <div class={classnames('le-input-container', { 'has-error': !this.isValid })}>\n {this.iconStart && (\n <span class=\"icon-start\">{this.iconStart}</span>\n )}\n \n <input\n id={this.name}\n type=\"number\"\n name={this.name}\n placeholder={this.placeholder}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n onInput={this.handleInput}\n onChange={this.handleChange}\n onKeyDown={this.handleKeyDown}\n onWheel={this.handleWheel}\n />\n \n {this.showSpinners && (\n <div class=\"le-input-controls\">\n <le-button\n mode=\"default\"\n variant=\"clear\" \n size=\"small\"\n icon-only\n class=\"le-input-control-btn\" \n onClick={this.increment}\n disabled={this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max)}\n tabindex=\"-1\"\n >\n <span slot=\"icon-only\">↑</span>\n </le-button>\n <le-button\n mode=\"default\"\n variant=\"clear\" \n size=\"small\" \n icon-only \n class=\"le-input-control-btn\" \n onClick={this.decrement}\n disabled={this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min)}\n tabindex=\"-1\"\n >\n <span slot=\"icon-only\">↓</span>\n </le-button>\n </div>\n )}\n </div>\n\n {!this.isValid && <div class=\"le-input-error\">{this.validationMessage}</div>}\n\n <div class=\"le-input-description\">\n <le-slot name=\"description\" type=\"text\" tag=\"p\" label=\"Description\">\n <slot name=\"description\"></slot>\n </le-slot>\n </div>\n </div>\n </le-component>\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,ohFAAohF,CAAC;;MCuBxiF,aAAa,GAAA,MAAA;;;;;;;AAGxB;;AAEG;AACqC,IAAA,KAAK;AAE7C;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,WAAW;AAEnB;;AAEG;AACK,IAAA,GAAG;AAEX;;AAEG;AACK,IAAA,GAAG;AAEX;;AAEG;IACK,IAAI,GAAW,CAAC;AAExB;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,SAAS;AAEjB;;AAEG;IACK,YAAY,GAAY,IAAI;AAEpC;;AAEG;AACK,IAAA,UAAU;AAElB;;AAEG;IACc,OAAO,GAAY,IAAI;IACvB,iBAAiB,GAAW,EAAE;AAE/C;;AAEG;AACM,IAAA,QAAQ;AAEjB;;AAEG;AACM,IAAA,OAAO;IAGhB,YAAY,GAAA;QACV,IAAI,CAAC,QAAQ,EAAE;;IAGT,QAAQ,GAAA;QACd,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE;AAC3F,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,YAAA,IAAI,CAAC,iBAAiB,GAAG,wBAAwB;YACjD;;QAGF,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AACzE,YAAA,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;AACnD,gBAAA,IAAI,CAAC,OAAO,GAAG,KAAK;gBACpB,IAAI,CAAC,iBAAiB,GAAG,CAAA,uBAAA,EAA0B,IAAI,CAAC,GAAG,EAAE;gBAC7D;;AAEF,YAAA,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;AACnD,gBAAA,IAAI,CAAC,OAAO,GAAG,KAAK;gBACpB,IAAI,CAAC,iBAAiB,GAAG,CAAA,sBAAA,EAAyB,IAAI,CAAC,GAAG,EAAE;gBAC5D;;;AAIJ,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,QAAA,IAAI,CAAC,iBAAiB,GAAG,EAAE;;IAGrB,UAAU,GAAA;AAChB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,OAAO,EAAE,IAAI,CAAC;AACf,SAAA,CAAC;;IAGI,SAAS,GAAA;AACf,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;YAChB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,OAAO,EAAE,IAAI,CAAC;AACf,SAAA,CAAC;;AAGI,IAAA,WAAW,CAAC,QAAgB,EAAA;AAClC,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAAE;;QAGpC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC;QACjE,MAAM,OAAO,GAAG,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;AAEvD,QAAA,IAAI,CAAC,KAAK,GAAG,OAAO;QACpB,IAAI,CAAC,QAAQ,EAAE;QACf,IAAI,CAAC,SAAS,EAAE;;AAGV,IAAA,WAAW,GAAG,CAAC,EAAS,KAAI;AAClC,QAAA,MAAM,KAAK,GAAG,EAAE,CAAC,MAA0B;QAC3C,MAAM,GAAG,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC;AAEnC,QAAA,IAAI,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE;AACtB,YAAA,IAAI,CAAC,KAAK,GAAG,SAAS;;AACjB,aAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;AACtB,YAAA,IAAI,CAAC,KAAK,GAAG,GAAG;;QAGlB,IAAI,CAAC,QAAQ,EAAE;QACf,IAAI,CAAC,SAAS,EAAE;AAClB,KAAC;IAEO,YAAY,GAAG,MAAK;QAC1B,IAAI,CAAC,QAAQ,EAAE;QACf,IAAI,CAAC,UAAU,EAAE;AACnB,KAAC;AAEO,IAAA,aAAa,GAAG,CAAC,EAAiB,KAAI;AAC5C,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAAE;QAEpC,IAAI,UAAU,GAAG,CAAC;QAClB,IAAI,EAAE,CAAC,QAAQ;YAAE,UAAU,GAAG,EAAE;QAChC,IAAI,EAAE,CAAC,MAAM;YAAE,UAAU,GAAG,GAAG;AAE/B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;AAE/B,QAAA,IAAI,EAAE,CAAC,GAAG,KAAK,SAAS,EAAE;YACxB,EAAE,CAAC,cAAc,EAAE;AACnB,YAAA,IAAI,CAAC,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,CAAC;;AAC/C,aAAA,IAAI,EAAE,CAAC,GAAG,KAAK,WAAW,EAAE;YACjC,EAAE,CAAC,cAAc,EAAE;AACnB,YAAA,IAAI,CAAC,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,CAAC;;AAExD,KAAC;AAEO,IAAA,WAAW,GAAG,CAAC,EAAc,KAAI;AACvC,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAAE;;AAEpC,QAAA,IAAI,QAAQ,CAAC,aAAa,KAAK,EAAE,CAAC,MAAM;YAAE;QAE1C,EAAE,CAAC,cAAc,EAAE;AACnB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;AAE/B,QAAA,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;YACjB,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;;aAChC;YACL,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;;AAEzC,KAAC;AAEO,IAAA,SAAS,GAAG,CAAC,EAAS,KAAI;AAChC,QAAA,EAAE,CAAC,cAAc,EAAE,CAAC;AACpB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;QAC/B,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;;QAErC,IAAI,CAAC,UAAU,EAAE;AACnB,KAAC;AAEO,IAAA,SAAS,GAAG,CAAC,EAAS,KAAI;QAChC,EAAE,CAAC,cAAc,EAAE;AACnB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;QAC/B,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;QACrC,IAAI,CAAC,UAAU,EAAE;AACnB,KAAC;IAED,MAAM,GAAA;QACJ,QACE,CAAc,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAC,iBAAiB,EAAC,SAAS,EAAE,UAAU,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAA,EAC5F,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC1B,IAAI,CAAC,KAAK,KACT,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAA,EAAG,IAAI,CAAC,KAAK,CAAS,CACvE,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,UAAU,CAAC,oBAAoB,EAAE,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,EAAA,EACzE,IAAI,CAAC,SAAS,KACb,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAE,EAAA,IAAI,CAAC,SAAS,CAAQ,CACjD,EAED,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,CAAA,EAED,IAAI,CAAC,YAAY,KAChB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CACE,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,OAAO,qBAEZ,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,CAAC,EAC9F,QAAQ,EAAC,IAAI,EAAA,EAEb,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,WAAW,EAAA,EAAA,QAAA,CAAS,CACrB,EACZ,CACE,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,OAAO,qBAEZ,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,CAAC,EAC9F,QAAQ,EAAC,IAAI,EAAA,EAEb,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,WAAW,aAAS,CACrB,CACR,CACP,CACG,EAEL,CAAC,IAAI,CAAC,OAAO,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAE,EAAA,IAAI,CAAC,iBAAiB,CAAO,EAE5E,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,aAAa,EAAA,EACjE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,CAAQ,CACxB,CACN,CACF,CACO;;;;;;;;;;"}
@@ -1,6 +1,6 @@
1
- import { r as registerInstance, c as getElement, h } from './index-hmBwv43R.js';
1
+ import { r as registerInstance, c as getElement, h } from './index-CNv6tzAt.js';
2
2
 
3
- const leRoundProgressCss = ".round-progress--container{position:relative}.round-progress{position:absolute;top:0;left:0;right:0;bottom:0;display:block}.round-progress--progress{filter:drop-shadow(var(--progress-shadow))}.round-progress--circle{fill:none;stroke:var(--progress-color, #999);stroke-width:var(--progress-width, 4);stroke-linecap:var(--progress-linecap, round);animation:progress--circle 0.5s ease-out forwards;transition:stroke-dasharray 0.5s ease-out}@keyframes progress--circle{0%{stroke-dasharray:0 1000}}.round-progress--path{fill:none;stroke-linecap:round}";
3
+ const leRoundProgressCss = () => `.round-progress--container{position:relative}.round-progress{position:absolute;top:0;left:0;right:0;bottom:0;display:block}.round-progress--progress{filter:drop-shadow(var(--progress-shadow))}.round-progress--circle{fill:none;stroke:var(--progress-color, #999);stroke-width:var(--progress-width, 4);stroke-linecap:var(--progress-linecap, round);animation:progress--circle 0.5s ease-out forwards;transition:stroke-dasharray 0.5s ease-out}@keyframes progress--circle{0%{stroke-dasharray:0 1000}}.round-progress--path{fill:none;stroke-linecap:round}`;
4
4
 
5
5
  const LeRoundProgress = class {
6
6
  constructor(hostRef) {
@@ -98,7 +98,7 @@ const LeRoundProgress = class {
98
98
  "paths": ["updateProgressBackgrounds"]
99
99
  }; }
100
100
  };
101
- LeRoundProgress.style = leRoundProgressCss;
101
+ LeRoundProgress.style = leRoundProgressCss();
102
102
 
103
103
  export { LeRoundProgress as le_round_progress };
104
104
  //# sourceMappingURL=le-round-progress.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"le-round-progress.entry.js","sources":["src/components/le-round-progress/le-round-progress.css?tag=le-round-progress&encapsulation=shadow","src/components/le-round-progress/le-round-progress.tsx"],"sourcesContent":[".round-progress--container {\n position: relative;\n}\n\n.round-progress {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: block;\n}\n\n.round-progress--progress {\n filter: drop-shadow(var(--progress-shadow));\n}\n\n.round-progress--circle {\n fill: none;\n stroke: var(--progress-color, #999);\n stroke-width: var(--progress-width, 4);\n stroke-linecap: var(--progress-linecap, round);\n animation: progress--circle 0.5s ease-out forwards;\n transition: stroke-dasharray 0.5s ease-out;\n}\n\n@keyframes progress--circle {\n 0% { stroke-dasharray: 0 1000; }\n}\n\n.round-progress--path {\n fill: none;\n stroke-linecap: round;\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'le-round-progress',\n styleUrl: 'le-round-progress.css',\n shadow: true,\n})\nexport class LeRoundProgress {\n // host element\n @Element() el: HTMLElement;\n\n // progress value coming from an attribute\n @Prop() value: number = 0;\n @Watch('value')\n updateValue(newValue: string) {\n this.value = parseFloat(newValue);\n }\n\n // padding value coming from an attribute\n @Prop() padding: number = 0;\n @Watch('padding')\n updatePadding(newValue: string) {\n this.padding = parseFloat(newValue);\n this.calcParams();\n }\n\n // the progress backgrounds can be as many as needed\n // but it should be JSON format: double quotes and strict commas\n @Prop() paths: string;\n @Watch('paths')\n updateProgressBackgrounds(newValue: string) {\n this.progressPaths = JSON.parse(newValue);\n }\n progressPaths: any[];\n\n @State() params: {\n width: number;\n diameter: number;\n circumference: number;\n };\n\n /**\n * Component lifecycles\n *\n * Before the component is loaded, we need to calculate and update params\n * using the component size (width of the round progress)\n * and progress width (max of )\n */\n componentWillLoad() {\n if (typeof this.paths === 'string') {\n this.updateProgressBackgrounds(this.paths);\n }\n this.calcParams();\n }\n\n calcParams() {\n // get element width\n const width = this.el.getBoundingClientRect().width;\n const diameter = width - this.padding;\n // calc circumference — we'll need it later to calc the stroke paths\n const circumference = Math.PI * diameter;\n\n this.params = { width, diameter, circumference };\n }\n\n /**\n * Returns the viewPath attribute value for the SVG\n * based on the width of the parent element\n */\n getViewBox() {\n return '0 0 ' + this.params.width + ' ' + this.params.width;\n }\n\n /**\n * Returns the circular path for the progress stroke\n * and additional paths in the background\n */\n getPath() {\n return (\n 'M' +\n this.params.width / 2 +\n ' ' +\n (this.params.width - this.params.diameter) / 2 +\n ' a ' +\n this.params.diameter / 2 +\n ' ' +\n this.params.diameter / 2 +\n ' 0 0 1 0 ' +\n this.params.diameter +\n ' a ' +\n this.params.diameter / 2 +\n ' ' +\n this.params.diameter / 2 +\n ' 0 0 1 0 -' +\n this.params.diameter\n );\n }\n\n getStrokeDashArray() {\n return (this.value / 100) * this.params.circumference + ', ' + this.params.circumference;\n }\n\n getPaths() {\n if (!this.progressPaths || !this.progressPaths.length) {\n return null;\n }\n let paths = [];\n this.progressPaths.forEach(bg => {\n paths.push(<path class=\"round-progress--path\" d={this.getPath()} stroke={bg.color} stroke-width={bg.width} stroke-dasharray={bg.dasharray} stroke-linecap={bg.linecap} />);\n });\n return (\n <svg viewBox={this.getViewBox()} class=\"round-progress\">\n {paths}\n </svg>\n );\n }\n\n render() {\n return (\n <div class=\"round-progress--container\">\n {this.getPaths()}\n <svg viewBox={this.getViewBox()} class=\"round-progress round-progress--progress\">\n <path class=\"round-progress--circle\" stroke-dasharray={this.getStrokeDashArray()} d={this.getPath()} />\n </svg>\n <slot />\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"le-round-progress.entry.js","sources":["src/components/le-round-progress/le-round-progress.css?tag=le-round-progress&encapsulation=shadow","src/components/le-round-progress/le-round-progress.tsx"],"sourcesContent":[".round-progress--container {\n position: relative;\n}\n\n.round-progress {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: block;\n}\n\n.round-progress--progress {\n filter: drop-shadow(var(--progress-shadow));\n}\n\n.round-progress--circle {\n fill: none;\n stroke: var(--progress-color, #999);\n stroke-width: var(--progress-width, 4);\n stroke-linecap: var(--progress-linecap, round);\n animation: progress--circle 0.5s ease-out forwards;\n transition: stroke-dasharray 0.5s ease-out;\n}\n\n@keyframes progress--circle {\n 0% { stroke-dasharray: 0 1000; }\n}\n\n.round-progress--path {\n fill: none;\n stroke-linecap: round;\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'le-round-progress',\n styleUrl: 'le-round-progress.css',\n shadow: true,\n})\nexport class LeRoundProgress {\n // host element\n @Element() el: HTMLElement;\n\n // progress value coming from an attribute\n @Prop() value: number = 0;\n @Watch('value')\n updateValue(newValue: string) {\n this.value = parseFloat(newValue);\n }\n\n // padding value coming from an attribute\n @Prop() padding: number = 0;\n @Watch('padding')\n updatePadding(newValue: string) {\n this.padding = parseFloat(newValue);\n this.calcParams();\n }\n\n // the progress backgrounds can be as many as needed\n // but it should be JSON format: double quotes and strict commas\n @Prop() paths: string;\n @Watch('paths')\n updateProgressBackgrounds(newValue: string) {\n this.progressPaths = JSON.parse(newValue);\n }\n progressPaths: any[];\n\n @State() params: {\n width: number;\n diameter: number;\n circumference: number;\n };\n\n /**\n * Component lifecycles\n *\n * Before the component is loaded, we need to calculate and update params\n * using the component size (width of the round progress)\n * and progress width (max of )\n */\n componentWillLoad() {\n if (typeof this.paths === 'string') {\n this.updateProgressBackgrounds(this.paths);\n }\n this.calcParams();\n }\n\n calcParams() {\n // get element width\n const width = this.el.getBoundingClientRect().width;\n const diameter = width - this.padding;\n // calc circumference — we'll need it later to calc the stroke paths\n const circumference = Math.PI * diameter;\n\n this.params = { width, diameter, circumference };\n }\n\n /**\n * Returns the viewPath attribute value for the SVG\n * based on the width of the parent element\n */\n getViewBox() {\n return '0 0 ' + this.params.width + ' ' + this.params.width;\n }\n\n /**\n * Returns the circular path for the progress stroke\n * and additional paths in the background\n */\n getPath() {\n return (\n 'M' +\n this.params.width / 2 +\n ' ' +\n (this.params.width - this.params.diameter) / 2 +\n ' a ' +\n this.params.diameter / 2 +\n ' ' +\n this.params.diameter / 2 +\n ' 0 0 1 0 ' +\n this.params.diameter +\n ' a ' +\n this.params.diameter / 2 +\n ' ' +\n this.params.diameter / 2 +\n ' 0 0 1 0 -' +\n this.params.diameter\n );\n }\n\n getStrokeDashArray() {\n return (this.value / 100) * this.params.circumference + ', ' + this.params.circumference;\n }\n\n getPaths() {\n if (!this.progressPaths || !this.progressPaths.length) {\n return null;\n }\n let paths = [];\n this.progressPaths.forEach(bg => {\n paths.push(<path class=\"round-progress--path\" d={this.getPath()} stroke={bg.color} stroke-width={bg.width} stroke-dasharray={bg.dasharray} stroke-linecap={bg.linecap} />);\n });\n return (\n <svg viewBox={this.getViewBox()} class=\"round-progress\">\n {paths}\n </svg>\n );\n }\n\n render() {\n return (\n <div class=\"round-progress--container\">\n {this.getPaths()}\n <svg viewBox={this.getViewBox()} class=\"round-progress round-progress--progress\">\n <path class=\"round-progress--circle\" stroke-dasharray={this.getStrokeDashArray()} d={this.getPath()} />\n </svg>\n <slot />\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}