le-kit 0.1.3 → 0.1.5

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 (257) hide show
  1. package/dist/le-kit/assets/custom-elements.json +4305 -0
  2. package/dist/le-kit/index-Da-89pOc.js +4522 -0
  3. package/dist/le-kit/{index-D21JjI31.js.map → index-Da-89pOc.js.map} +1 -1
  4. package/dist/le-kit/index.esm.js +116 -2
  5. package/dist/le-kit/index.esm.js.map +1 -1
  6. package/dist/{esm → le-kit}/le-box.entry.js +3 -3
  7. package/dist/le-kit/le-button.entry.esm.js.map +1 -0
  8. package/dist/le-kit/le-button.entry.js +90 -0
  9. package/dist/{esm → le-kit}/le-card.entry.js +3 -3
  10. package/dist/le-kit/le-checkbox.entry.esm.js.map +1 -0
  11. package/dist/le-kit/le-checkbox.entry.js +59 -0
  12. package/dist/le-kit/le-component.entry.esm.js.map +1 -0
  13. package/dist/{collection/components/le-component/le-component.js → le-kit/le-component.entry.js} +19 -134
  14. package/dist/le-kit/le-kit.css +1010 -1
  15. package/dist/le-kit/le-kit.esm.js +48 -2
  16. package/dist/le-kit/le-kit.esm.js.map +1 -1
  17. package/dist/{esm → le-kit}/le-number-input.entry.js +5 -5
  18. package/dist/le-kit/le-popover.entry.esm.js.map +1 -0
  19. package/dist/{components/le-popover2.js → le-kit/le-popover.entry.js} +9 -45
  20. package/dist/{esm → le-kit}/le-popup.entry.js +6 -6
  21. package/dist/{esm → le-kit}/le-round-progress.entry.js +2 -2
  22. package/dist/le-kit/le-slot.entry.esm.js.map +1 -0
  23. package/dist/{collection/components/le-slot/le-slot.js → le-kit/le-slot.entry.js} +30 -279
  24. package/dist/{esm → le-kit}/le-stack.entry.js +3 -3
  25. package/dist/le-kit/le-string-input.entry.esm.js.map +1 -0
  26. package/dist/le-kit/le-string-input.entry.js +93 -0
  27. package/dist/{esm → le-kit}/le-text.entry.js +3 -3
  28. package/dist/{esm → le-kit}/le-turntable.entry.js +2 -2
  29. package/dist/{esm/utils-CJLZrrdC.js → le-kit/utils-FDOApZ53.js} +3 -3
  30. package/dist/le-kit/{utils-apol-Xc_.js.map → utils-FDOApZ53.js.map} +1 -1
  31. package/package.json +3 -54
  32. package/readme.md +2 -35
  33. package/dist/admin/index.d.ts +0 -23
  34. package/dist/admin/index.js +0 -74
  35. package/dist/admin/loader.js +0 -9
  36. package/dist/cjs/index-CO4npcak.js +0 -1796
  37. package/dist/cjs/index-CO4npcak.js.map +0 -1
  38. package/dist/cjs/index.cjs.js +0 -117
  39. package/dist/cjs/index.cjs.js.map +0 -1
  40. package/dist/cjs/le-box.cjs.entry.js +0 -184
  41. package/dist/cjs/le-box.entry.cjs.js.map +0 -1
  42. package/dist/cjs/le-button.le-checkbox.le-component.le-popover.le-slot.le-string-input.entry.cjs.js.map +0 -1
  43. package/dist/cjs/le-button_6.cjs.entry.js +0 -1199
  44. package/dist/cjs/le-card.cjs.entry.js +0 -29
  45. package/dist/cjs/le-card.entry.cjs.js.map +0 -1
  46. package/dist/cjs/le-kit.cjs.js +0 -25
  47. package/dist/cjs/le-kit.cjs.js.map +0 -1
  48. package/dist/cjs/le-number-input.cjs.entry.js +0 -202
  49. package/dist/cjs/le-number-input.entry.cjs.js.map +0 -1
  50. package/dist/cjs/le-popup.cjs.entry.js +0 -212
  51. package/dist/cjs/le-popup.entry.cjs.js.map +0 -1
  52. package/dist/cjs/le-round-progress.cjs.entry.js +0 -106
  53. package/dist/cjs/le-round-progress.entry.cjs.js.map +0 -1
  54. package/dist/cjs/le-stack.cjs.entry.js +0 -135
  55. package/dist/cjs/le-stack.entry.cjs.js.map +0 -1
  56. package/dist/cjs/le-text.cjs.entry.js +0 -335
  57. package/dist/cjs/le-text.entry.cjs.js.map +0 -1
  58. package/dist/cjs/le-turntable.cjs.entry.js +0 -139
  59. package/dist/cjs/le-turntable.entry.cjs.js.map +0 -1
  60. package/dist/cjs/loader.cjs.js +0 -13
  61. package/dist/cjs/loader.cjs.js.map +0 -1
  62. package/dist/cjs/utils-BeT0iyCQ.js +0 -152
  63. package/dist/cjs/utils-BeT0iyCQ.js.map +0 -1
  64. package/dist/collection/collection-manifest.json +0 -26
  65. package/dist/collection/components/le-box/le-box.default.css +0 -37
  66. package/dist/collection/components/le-box/le-box.js +0 -614
  67. package/dist/collection/components/le-box/le-box.js.map +0 -1
  68. package/dist/collection/components/le-button/le-button.default.css +0 -263
  69. package/dist/collection/components/le-button/le-button.js +0 -368
  70. package/dist/collection/components/le-button/le-button.js.map +0 -1
  71. package/dist/collection/components/le-card/le-card.default.css +0 -74
  72. package/dist/collection/components/le-card/le-card.js +0 -102
  73. package/dist/collection/components/le-card/le-card.js.map +0 -1
  74. package/dist/collection/components/le-checkbox/le-checkbox.css +0 -93
  75. package/dist/collection/components/le-checkbox/le-checkbox.js +0 -192
  76. package/dist/collection/components/le-checkbox/le-checkbox.js.map +0 -1
  77. package/dist/collection/components/le-component/le-component.css +0 -189
  78. package/dist/collection/components/le-component/le-component.js.map +0 -1
  79. package/dist/collection/components/le-number-input/le-number-input.css +0 -135
  80. package/dist/collection/components/le-number-input/le-number-input.js +0 -515
  81. package/dist/collection/components/le-number-input/le-number-input.js.map +0 -1
  82. package/dist/collection/components/le-popover/le-popover.css +0 -143
  83. package/dist/collection/components/le-popover/le-popover.js +0 -693
  84. package/dist/collection/components/le-popover/le-popover.js.map +0 -1
  85. package/dist/collection/components/le-popup/le-popup.api.js +0 -101
  86. package/dist/collection/components/le-popup/le-popup.api.js.map +0 -1
  87. package/dist/collection/components/le-popup/le-popup.css +0 -222
  88. package/dist/collection/components/le-popup/le-popup.js +0 -596
  89. package/dist/collection/components/le-popup/le-popup.js.map +0 -1
  90. package/dist/collection/components/le-round-progress/le-round-progress.css +0 -34
  91. package/dist/collection/components/le-round-progress/le-round-progress.js +0 -184
  92. package/dist/collection/components/le-round-progress/le-round-progress.js.map +0 -1
  93. package/dist/collection/components/le-slot/le-slot.default.css +0 -222
  94. package/dist/collection/components/le-slot/le-slot.js.map +0 -1
  95. package/dist/collection/components/le-stack/le-stack.default.css +0 -37
  96. package/dist/collection/components/le-stack/le-stack.js +0 -389
  97. package/dist/collection/components/le-stack/le-stack.js.map +0 -1
  98. package/dist/collection/components/le-string-input/le-string-input.css +0 -83
  99. package/dist/collection/components/le-string-input/le-string-input.js +0 -359
  100. package/dist/collection/components/le-string-input/le-string-input.js.map +0 -1
  101. package/dist/collection/components/le-text/le-text.default.css +0 -169
  102. package/dist/collection/components/le-text/le-text.js +0 -475
  103. package/dist/collection/components/le-text/le-text.js.map +0 -1
  104. package/dist/collection/components/le-turntable/le-turntable.css +0 -10
  105. package/dist/collection/components/le-turntable/le-turntable.js +0 -210
  106. package/dist/collection/components/le-turntable/le-turntable.js.map +0 -1
  107. package/dist/collection/global/app.js +0 -130
  108. package/dist/collection/global/app.js.map +0 -1
  109. package/dist/collection/index-admin.js +0 -27
  110. package/dist/collection/index-admin.js.map +0 -1
  111. package/dist/collection/index-core.js +0 -25
  112. package/dist/collection/index-core.js.map +0 -1
  113. package/dist/collection/index.js +0 -15
  114. package/dist/collection/index.js.map +0 -1
  115. package/dist/collection/types/blocks.js +0 -115
  116. package/dist/collection/types/blocks.js.map +0 -1
  117. package/dist/collection/types/options.js +0 -2
  118. package/dist/collection/types/options.js.map +0 -1
  119. package/dist/collection/utils/utils.js +0 -141
  120. package/dist/collection/utils/utils.js.map +0 -1
  121. package/dist/components/index.js +0 -127
  122. package/dist/components/index.js.map +0 -1
  123. package/dist/components/le-box.js +0 -256
  124. package/dist/components/le-box.js.map +0 -1
  125. package/dist/components/le-button.js +0 -9
  126. package/dist/components/le-button.js.map +0 -1
  127. package/dist/components/le-button2.js +0 -1408
  128. package/dist/components/le-button2.js.map +0 -1
  129. package/dist/components/le-card.js +0 -83
  130. package/dist/components/le-card.js.map +0 -1
  131. package/dist/components/le-checkbox.js +0 -9
  132. package/dist/components/le-checkbox.js.map +0 -1
  133. package/dist/components/le-component.js +0 -9
  134. package/dist/components/le-component.js.map +0 -1
  135. package/dist/components/le-number-input.js +0 -271
  136. package/dist/components/le-number-input.js.map +0 -1
  137. package/dist/components/le-popover.js +0 -9
  138. package/dist/components/le-popover.js.map +0 -1
  139. package/dist/components/le-popover2.js.map +0 -1
  140. package/dist/components/le-popup.js +0 -279
  141. package/dist/components/le-popup.js.map +0 -1
  142. package/dist/components/le-round-progress.js +0 -135
  143. package/dist/components/le-round-progress.js.map +0 -1
  144. package/dist/components/le-slot.js +0 -9
  145. package/dist/components/le-slot.js.map +0 -1
  146. package/dist/components/le-stack.js +0 -198
  147. package/dist/components/le-stack.js.map +0 -1
  148. package/dist/components/le-string-input.js +0 -9
  149. package/dist/components/le-string-input.js.map +0 -1
  150. package/dist/components/le-text.js +0 -398
  151. package/dist/components/le-text.js.map +0 -1
  152. package/dist/components/le-turntable.js +0 -164
  153. package/dist/components/le-turntable.js.map +0 -1
  154. package/dist/core/components/index.d.ts +0 -64
  155. package/dist/core/components/index.js +0 -125
  156. package/dist/core/components/index.js.map +0 -1
  157. package/dist/core/components/le-box.d.ts +0 -11
  158. package/dist/core/components/le-box.js +0 -246
  159. package/dist/core/components/le-box.js.map +0 -1
  160. package/dist/core/components/le-button.d.ts +0 -11
  161. package/dist/core/components/le-button.js +0 -9
  162. package/dist/core/components/le-button.js.map +0 -1
  163. package/dist/core/components/le-button2.js +0 -1358
  164. package/dist/core/components/le-button2.js.map +0 -1
  165. package/dist/core/components/le-card.d.ts +0 -11
  166. package/dist/core/components/le-card.js +0 -73
  167. package/dist/core/components/le-card.js.map +0 -1
  168. package/dist/core/components/le-checkbox.d.ts +0 -11
  169. package/dist/core/components/le-checkbox.js +0 -9
  170. package/dist/core/components/le-checkbox.js.map +0 -1
  171. package/dist/core/components/le-component.js.map +0 -1
  172. package/dist/core/components/le-number-input.d.ts +0 -11
  173. package/dist/core/components/le-number-input.js +0 -261
  174. package/dist/core/components/le-number-input.js.map +0 -1
  175. package/dist/core/components/le-popover.d.ts +0 -11
  176. package/dist/core/components/le-popover.js +0 -9
  177. package/dist/core/components/le-popover.js.map +0 -1
  178. package/dist/core/components/le-popover2.js +0 -382
  179. package/dist/core/components/le-popover2.js.map +0 -1
  180. package/dist/core/components/le-popup.d.ts +0 -11
  181. package/dist/core/components/le-popup.js +0 -269
  182. package/dist/core/components/le-popup.js.map +0 -1
  183. package/dist/core/components/le-round-progress.d.ts +0 -11
  184. package/dist/core/components/le-round-progress.js +0 -135
  185. package/dist/core/components/le-round-progress.js.map +0 -1
  186. package/dist/core/components/le-slot.js.map +0 -1
  187. package/dist/core/components/le-stack.d.ts +0 -11
  188. package/dist/core/components/le-stack.js +0 -188
  189. package/dist/core/components/le-stack.js.map +0 -1
  190. package/dist/core/components/le-string-input.d.ts +0 -11
  191. package/dist/core/components/le-string-input.js +0 -9
  192. package/dist/core/components/le-string-input.js.map +0 -1
  193. package/dist/core/components/le-text.d.ts +0 -11
  194. package/dist/core/components/le-text.js +0 -388
  195. package/dist/core/components/le-text.js.map +0 -1
  196. package/dist/core/components/le-turntable.d.ts +0 -11
  197. package/dist/core/components/le-turntable.js +0 -164
  198. package/dist/core/components/le-turntable.js.map +0 -1
  199. package/dist/core/index.d.ts +0 -21
  200. package/dist/core/index.js +0 -68
  201. package/dist/core/loader.js +0 -9
  202. package/dist/core/stencil-runtime.js +0 -1
  203. package/dist/docs.d.ts +0 -443
  204. package/dist/docs.json +0 -5185
  205. package/dist/esm/index-D71TXvJa.js +0 -1781
  206. package/dist/esm/index-D71TXvJa.js.map +0 -1
  207. package/dist/esm/index.js +0 -106
  208. package/dist/esm/index.js.map +0 -1
  209. package/dist/esm/le-box.entry.js.map +0 -1
  210. package/dist/esm/le-button.le-checkbox.le-component.le-popover.le-slot.le-string-input.entry.js.map +0 -1
  211. package/dist/esm/le-button_6.entry.js +0 -1192
  212. package/dist/esm/le-card.entry.js.map +0 -1
  213. package/dist/esm/le-kit.js +0 -21
  214. package/dist/esm/le-kit.js.map +0 -1
  215. package/dist/esm/le-number-input.entry.js.map +0 -1
  216. package/dist/esm/le-popup.entry.js.map +0 -1
  217. package/dist/esm/le-round-progress.entry.js.map +0 -1
  218. package/dist/esm/le-stack.entry.js.map +0 -1
  219. package/dist/esm/le-text.entry.js.map +0 -1
  220. package/dist/esm/le-turntable.entry.js.map +0 -1
  221. package/dist/esm/loader.js +0 -11
  222. package/dist/esm/loader.js.map +0 -1
  223. package/dist/esm/utils-CJLZrrdC.js.map +0 -1
  224. package/dist/index.cjs.js +0 -1
  225. package/dist/index.js +0 -1
  226. package/dist/le-kit/le-button.le-checkbox.le-component.le-popover.le-slot.le-string-input.entry.esm.js.map +0 -1
  227. package/dist/le-kit/p-024a764e.entry.js +0 -2
  228. package/dist/le-kit/p-024a764e.entry.js.map +0 -1
  229. package/dist/le-kit/p-073cf0b9.entry.js +0 -2
  230. package/dist/le-kit/p-073cf0b9.entry.js.map +0 -1
  231. package/dist/le-kit/p-0955b105.entry.js +0 -2
  232. package/dist/le-kit/p-0955b105.entry.js.map +0 -1
  233. package/dist/le-kit/p-18d79ee2.entry.js +0 -2
  234. package/dist/le-kit/p-18d79ee2.entry.js.map +0 -1
  235. package/dist/le-kit/p-4b1d3b6d.entry.js +0 -2
  236. package/dist/le-kit/p-4b1d3b6d.entry.js.map +0 -1
  237. package/dist/le-kit/p-79d179bd.entry.js +0 -2
  238. package/dist/le-kit/p-79d179bd.entry.js.map +0 -1
  239. package/dist/le-kit/p-D71TXvJa.js +0 -3
  240. package/dist/le-kit/p-D71TXvJa.js.map +0 -1
  241. package/dist/le-kit/p-c8a9288e.entry.js +0 -2
  242. package/dist/le-kit/p-c8a9288e.entry.js.map +0 -1
  243. package/dist/le-kit/p-cfc35bd3.entry.js +0 -2
  244. package/dist/le-kit/p-cfc35bd3.entry.js.map +0 -1
  245. package/dist/le-kit/p-d04da1f5.entry.js +0 -2
  246. package/dist/le-kit/p-d04da1f5.entry.js.map +0 -1
  247. package/dist/le-kit/p-qIai5-eB.js +0 -2
  248. package/dist/le-kit/p-qIai5-eB.js.map +0 -1
  249. package/dist/themes/base.css +0 -89
  250. package/dist/themes/dark.css +0 -100
  251. package/dist/themes/default.css +0 -108
  252. package/dist/themes/gradient.css +0 -100
  253. package/dist/themes/index.css +0 -413
  254. package/dist/themes/minimal.css +0 -100
  255. package/dist/themes/warm.css +0 -100
  256. package/dist/types/index-admin.d.ts +0 -29
  257. package/dist/types/index-core.d.ts +0 -27
@@ -1,269 +0,0 @@
1
- import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
- import { f as defineCustomElement$2, h as defineCustomElement$3, j as defineCustomElement$5, k as defineCustomElement$6, l as defineCustomElement$7 } from './le-button2.js';
3
- import { d as defineCustomElement$4 } from './le-popover2.js';
4
-
5
- const lePopupCss = ":host{display:contents}.le-popup-dialog{position:fixed;z-index:100;top:0;right:0;bottom:0;left:0;padding:0;border:none;background:transparent;max-width:none;max-height:none;overflow:visible;--_popup-min-width:var(--le-popup-min-width, 320px);--_popup-max-width:var(--le-popup-max-width, min(500px, 90vw));--_popup-min-height:var(--le-popup-min-height, auto)}.le-popup-dialog::backdrop{background:var(--le-popup-backdrop-color, rgba(0, 0, 0, 0.5));animation:le-popup-backdrop-fade 0.2s ease-out}@keyframes le-popup-backdrop-fade{from{opacity:0}to{opacity:1}}.le-popup-position-center{margin:auto}.le-popup-position-top{margin:var(--le-space-2xl, 48px) auto auto auto}.le-popup-position-top-left{margin:var(--le-space-lg, 24px) auto auto var(--le-space-lg, 24px)}.le-popup-position-top-right{margin:var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto auto}.le-popup-position-bottom{margin:auto auto var(--le-space-2xl, 48px) auto}.le-popup-position-bottom-left{margin:auto auto var(--le-space-lg, 24px) var(--le-space-lg, 24px)}.le-popup-position-bottom-right{margin:auto var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto}.le-popup-container{display:flex;flex-direction:column;min-width:var(--_popup-min-width);max-width:var(--_popup-max-width);min-height:var(--_popup-min-height);max-height:calc(100vh - var(--le-space-2xl, 48px) * 2);background:var(--le-color-surface, #ffffff);border:1px solid var(--le-color-border, #e0e0e0);border-radius:var(--le-radius-lg, 12px);box-shadow:var(--le-shadow-xl, 0 8px 32px rgba(0, 0, 0, 0.15));overflow:hidden;font-family:var(--le-font-family, system-ui, -apple-system, sans-serif);color:var(--le-color-text, #333);animation:le-popup-appear 0.2s ease-out}@keyframes le-popup-appear{from{opacity:0;transform:scale(0.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.le-popup-header{flex-shrink:0;padding:var(--le-space-md, 16px) var(--le-space-lg, 24px);border-bottom:1px solid var(--le-color-border, #e0e0e0);background:var(--le-color-surface-alt, #f9f9f9);font-size:var(--le-font-size-lg, 1.125rem);font-weight:var(--le-font-weight-semibold, 600);color:var(--le-color-text, #333)}.le-popup-body{flex:1;padding:var(--le-space-lg, 24px);overflow-y:auto}.le-popup-message{margin:0;font-size:var(--le-font-size-md, 1rem);line-height:var(--le-line-height-relaxed, 1.6);color:var(--le-color-text, #333)}.le-popup-message+::slotted(*){margin-top:var(--le-space-md, 16px)}.le-popup-input{display:block;width:100%;margin-top:var(--le-space-md, 16px);padding:var(--le-space-sm, 8px) var(--le-space-md, 16px);font-family:inherit;font-size:var(--le-font-size-md, 1rem);color:var(--le-color-text, #333);background:var(--le-color-background, #fff);border:1px solid var(--le-color-border, #e0e0e0);border-radius:var(--le-radius-md, 8px);outline:none;transition:border-color var(--le-transition-fast, 0.15s ease),\n box-shadow var(--le-transition-fast, 0.15s ease);box-sizing:border-box}.le-popup-input:focus{border-color:var(--le-color-primary, #2196f3);box-shadow:0 0 0 3px var(--le-color-primary-light, rgba(33, 150, 243, 0.2))}.le-popup-input::placeholder{color:var(--le-color-text-muted, #999)}.le-popup-footer{flex-shrink:0;display:flex;justify-content:flex-end;gap:var(--le-space-sm, 8px);padding:var(--le-space-md, 16px) var(--le-space-lg, 24px);border-top:1px solid var(--le-color-border, #e0e0e0);background:var(--le-color-surface-alt, #f9f9f9)}.le-popup-btn{min-width:80px}@media (max-width: 480px){.le-popup-container{min-width:calc(100vw - var(--le-space-md, 16px) * 2);max-width:calc(100vw - var(--le-space-md, 16px) * 2)}.le-popup-footer{flex-direction:column-reverse}.le-popup-btn{width:100%}}";
6
-
7
- const LePopup$1 = /*@__PURE__*/ proxyCustomElement(class LePopup extends HTMLElement {
8
- constructor(registerHost) {
9
- super();
10
- if (registerHost !== false) {
11
- this.__registerHost();
12
- }
13
- this.__attachShadow();
14
- this.leConfirm = createEvent(this, "leConfirm", 7);
15
- this.leCancel = createEvent(this, "leCancel", 7);
16
- this.leOpen = createEvent(this, "leOpen", 7);
17
- this.leClose = createEvent(this, "leClose", 7);
18
- }
19
- get el() { return this; }
20
- /**
21
- * Whether the popup is currently visible
22
- */
23
- open = false;
24
- /**
25
- * Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom
26
- */
27
- type = 'alert';
28
- /**
29
- * Optional title for the popup header
30
- */
31
- popupTitle;
32
- /**
33
- * Message text to display (for alert/confirm/prompt types)
34
- */
35
- message;
36
- /**
37
- * Whether the popup is modal (blocks interaction with page behind)
38
- */
39
- modal = true;
40
- /**
41
- * Position of the popup on screen
42
- */
43
- position = 'center';
44
- /**
45
- * Text for the confirm/OK button
46
- */
47
- confirmText = 'OK';
48
- /**
49
- * Text for the cancel button
50
- */
51
- cancelText = 'Cancel';
52
- /**
53
- * Placeholder text for prompt input
54
- */
55
- placeholder = '';
56
- /**
57
- * Default value for prompt input
58
- */
59
- defaultValue = '';
60
- /**
61
- * Whether clicking the backdrop closes the popup (modal only)
62
- */
63
- closeOnBackdrop = true;
64
- /**
65
- * Internal state for prompt input value
66
- */
67
- inputValue = '';
68
- /**
69
- * Emitted when the popup is confirmed (OK clicked)
70
- */
71
- leConfirm;
72
- /**
73
- * Emitted when the popup is cancelled (Cancel clicked or dismissed)
74
- */
75
- leCancel;
76
- /**
77
- * Emitted when the popup opens
78
- */
79
- leOpen;
80
- /**
81
- * Emitted when the popup closes
82
- */
83
- leClose;
84
- dialogEl;
85
- inputEl;
86
- resolvePromise;
87
- componentWillLoad() {
88
- this.inputValue = this.defaultValue;
89
- }
90
- componentDidLoad() {
91
- // Native dialog handles Escape key automatically when modal
92
- // We just need to listen for the cancel event
93
- this.dialogEl?.addEventListener('cancel', this.handleDialogCancel);
94
- }
95
- disconnectedCallback() {
96
- this.dialogEl?.removeEventListener('cancel', this.handleDialogCancel);
97
- }
98
- handleDialogCancel = (e) => {
99
- e.preventDefault(); // Prevent default close to handle it ourselves
100
- this.handleCancel();
101
- };
102
- /**
103
- * Opens the popup and returns a promise that resolves when closed
104
- */
105
- async show() {
106
- return new Promise((resolve) => {
107
- this.resolvePromise = resolve;
108
- this.inputValue = this.defaultValue;
109
- this.open = true;
110
- // Use requestAnimationFrame to ensure the dialog element is rendered
111
- requestAnimationFrame(() => {
112
- if (this.dialogEl) {
113
- if (this.modal) {
114
- this.dialogEl.showModal();
115
- }
116
- else {
117
- this.dialogEl.show();
118
- }
119
- this.leOpen.emit();
120
- // Focus input for prompt type
121
- if (this.type === 'prompt' && this.inputEl) {
122
- this.inputEl.focus();
123
- this.inputEl.select();
124
- }
125
- }
126
- });
127
- });
128
- }
129
- /**
130
- * Closes the popup with a result
131
- */
132
- async hide(confirmed = false) {
133
- const result = {
134
- confirmed,
135
- value: this.type === 'prompt' ? this.inputValue : undefined,
136
- };
137
- this.dialogEl?.close();
138
- this.open = false;
139
- this.leClose.emit(result);
140
- if (this.resolvePromise) {
141
- this.resolvePromise(result);
142
- this.resolvePromise = undefined;
143
- }
144
- }
145
- handleConfirm = () => {
146
- const result = {
147
- confirmed: true,
148
- value: this.type === 'prompt' ? this.inputValue : undefined,
149
- };
150
- this.leConfirm.emit(result);
151
- this.hide(true);
152
- };
153
- handleCancel = () => {
154
- const result = {
155
- confirmed: false,
156
- value: undefined,
157
- };
158
- this.leCancel.emit(result);
159
- this.hide(false);
160
- };
161
- handleBackdropClick = (e) => {
162
- // Check if click was on the dialog backdrop (outside the dialog box)
163
- if (this.closeOnBackdrop && e.target === this.dialogEl) {
164
- const rect = this.dialogEl.getBoundingClientRect();
165
- const clickedInDialog = (e.clientX >= rect.left &&
166
- e.clientX <= rect.right &&
167
- e.clientY >= rect.top &&
168
- e.clientY <= rect.bottom);
169
- if (!clickedInDialog) {
170
- this.handleCancel();
171
- }
172
- }
173
- };
174
- handleInputChange = (e) => {
175
- this.inputValue = e.target.value;
176
- };
177
- handleKeyDown = (e) => {
178
- if (e.key === 'Enter' && this.type !== 'custom') {
179
- e.preventDefault();
180
- this.handleConfirm();
181
- }
182
- };
183
- hasSlot(name) {
184
- return !!this.el.querySelector(`[slot="${name}"]`);
185
- }
186
- renderHeader() {
187
- if (this.hasSlot('header')) {
188
- return (h("div", { class: "le-popup-header", part: "header" }, h("slot", { name: "header" })));
189
- }
190
- if (this.popupTitle) {
191
- return (h("div", { class: "le-popup-header", part: "header" }, this.popupTitle));
192
- }
193
- return null;
194
- }
195
- renderBody() {
196
- return (h("div", { class: "le-popup-body", part: "body" }, this.message && h("p", { class: "le-popup-message" }, this.message), this.type === 'prompt' && (h("input", { type: "text", class: "le-popup-input", part: "input", placeholder: this.placeholder, value: this.inputValue, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, ref: (el) => (this.inputEl = el) })), h("slot", null)));
197
- }
198
- renderFooter() {
199
- if (this.hasSlot('footer')) {
200
- return (h("div", { class: "le-popup-footer", part: "footer" }, h("slot", { name: "footer" })));
201
- }
202
- // For custom type without footer slot, don't render default buttons
203
- if (this.type === 'custom') {
204
- return null;
205
- }
206
- return (h("div", { class: "le-popup-footer", part: "footer" }, (this.type === 'confirm' || this.type === 'prompt') && (h("le-button", { variant: "outlined", part: "button-cancel", class: "le-popup-btn", onClick: this.handleCancel }, this.cancelText)), h("le-button", { variant: "solid", part: "button-confirm", class: "le-popup-btn", onClick: this.handleConfirm }, this.confirmText)));
207
- }
208
- render() {
209
- const positionClass = `le-popup-position-${this.position}`;
210
- return (h("dialog", { key: '1c38c82d3f466449ff57f731fc22936a7e5af0eb', class: `le-popup-dialog ${positionClass}`, part: "dialog", ref: (el) => (this.dialogEl = el), onClick: this.handleBackdropClick }, h(Host, { class: "" }, h("div", { key: 'e5fef42ae8b41ea52db123b4576849407be33c65', class: "le-popup-container", part: "container" }, this.renderHeader(), this.renderBody(), this.renderFooter()))));
211
- }
212
- static get style() { return lePopupCss; }
213
- }, [769, "le-popup", {
214
- "open": [1540],
215
- "type": [1],
216
- "popupTitle": [1, "popup-title"],
217
- "message": [1],
218
- "modal": [4],
219
- "position": [1],
220
- "confirmText": [1, "confirm-text"],
221
- "cancelText": [1, "cancel-text"],
222
- "placeholder": [1],
223
- "defaultValue": [1, "default-value"],
224
- "closeOnBackdrop": [4, "close-on-backdrop"],
225
- "inputValue": [32],
226
- "show": [64],
227
- "hide": [64]
228
- }]);
229
- function defineCustomElement$1() {
230
- if (typeof customElements === "undefined") {
231
- return;
232
- }
233
- const components = ["le-popup", "le-button", "le-checkbox", "le-popover", "le-string-input"];
234
- components.forEach(tagName => { switch (tagName) {
235
- case "le-popup":
236
- if (!customElements.get(tagName)) {
237
- customElements.define(tagName, LePopup$1);
238
- }
239
- break;
240
- case "le-button":
241
- if (!customElements.get(tagName)) {
242
- defineCustomElement$7();
243
- }
244
- break;
245
- case "le-checkbox":
246
- if (!customElements.get(tagName)) {
247
- defineCustomElement$6();
248
- }
249
- break;
250
- case "le-popover":
251
- if (!customElements.get(tagName)) {
252
- defineCustomElement$4();
253
- }
254
- break;
255
- case "le-string-input":
256
- if (!customElements.get(tagName)) {
257
- defineCustomElement$2();
258
- }
259
- break;
260
- } });
261
- }
262
-
263
- const LePopup = LePopup$1;
264
- const defineCustomElement = defineCustomElement$1;
265
-
266
- export { LePopup, defineCustomElement };
267
- //# sourceMappingURL=le-popup.js.map
268
-
269
- //# sourceMappingURL=le-popup.js.map
@@ -1 +0,0 @@
1
- {"file":"le-popup.js","mappings":"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","names":["LePopup","__stencil_proxyCustomElement"],"sources":["src/components/le-popup/le-popup.css?tag=le-popup&encapsulation=shadow","src/components/le-popup/le-popup.tsx"],"sourcesContent":["/* ============================================\n le-popup.css\n Popup/Dialog component using native <dialog>\n Uses CSS variables for easy theming\n ============================================ */\n\n:host {\n display: contents;\n}\n\n/* ============================================\n Native Dialog Element\n ============================================ */\n\n.le-popup-dialog {\n /* Reset default dialog styles */\n position: fixed;\n z-index: 100;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n padding: 0;\n border: none;\n background: transparent;\n max-width: none;\n max-height: none;\n overflow: visible;\n \n /* Sizing variables */\n --_popup-min-width: var(--le-popup-min-width, 320px);\n --_popup-max-width: var(--le-popup-max-width, min(500px, 90vw));\n --_popup-min-height: var(--le-popup-min-height, auto);\n}\n\n/* Backdrop styling (native ::backdrop pseudo-element) */\n.le-popup-dialog::backdrop {\n background: var(--le-popup-backdrop-color, rgba(0, 0, 0, 0.5));\n animation: le-popup-backdrop-fade 0.2s ease-out;\n}\n\n@keyframes le-popup-backdrop-fade {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* ============================================\n Position Variants\n Using margin to position within viewport\n ============================================ */\n\n/* Center (default) */\n.le-popup-position-center {\n margin: auto;\n}\n\n/* Top positions */\n.le-popup-position-top {\n margin: var(--le-space-2xl, 48px) auto auto auto;\n}\n\n.le-popup-position-top-left {\n margin: var(--le-space-lg, 24px) auto auto var(--le-space-lg, 24px);\n}\n\n.le-popup-position-top-right {\n margin: var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto auto;\n}\n\n/* Bottom positions */\n.le-popup-position-bottom {\n margin: auto auto var(--le-space-2xl, 48px) auto;\n}\n\n.le-popup-position-bottom-left {\n margin: auto auto var(--le-space-lg, 24px) var(--le-space-lg, 24px);\n}\n\n.le-popup-position-bottom-right {\n margin: auto var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto;\n}\n\n/* ============================================\n Container (the visible dialog box)\n ============================================ */\n\n.le-popup-container {\n display: flex;\n flex-direction: column;\n min-width: var(--_popup-min-width);\n max-width: var(--_popup-max-width);\n min-height: var(--_popup-min-height);\n max-height: calc(100vh - var(--le-space-2xl, 48px) * 2);\n background: var(--le-color-surface, #ffffff);\n border: 1px solid var(--le-color-border, #e0e0e0);\n border-radius: var(--le-radius-lg, 12px);\n box-shadow: var(--le-shadow-xl, 0 8px 32px rgba(0, 0, 0, 0.15));\n overflow: hidden;\n font-family: var(--le-font-family, system-ui, -apple-system, sans-serif);\n color: var(--le-color-text, #333);\n \n /* Animation */\n animation: le-popup-appear 0.2s ease-out;\n}\n\n@keyframes le-popup-appear {\n from {\n opacity: 0;\n transform: scale(0.95) translateY(-10px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n/* ============================================\n Header\n ============================================ */\n\n.le-popup-header {\n flex-shrink: 0;\n padding: var(--le-space-md, 16px) var(--le-space-lg, 24px);\n border-bottom: 1px solid var(--le-color-border, #e0e0e0);\n background: var(--le-color-surface-alt, #f9f9f9);\n font-size: var(--le-font-size-lg, 1.125rem);\n font-weight: var(--le-font-weight-semibold, 600);\n color: var(--le-color-text, #333);\n}\n\n/* ============================================\n Body\n ============================================ */\n\n.le-popup-body {\n flex: 1;\n padding: var(--le-space-lg, 24px);\n overflow-y: auto;\n}\n\n.le-popup-message {\n margin: 0;\n font-size: var(--le-font-size-md, 1rem);\n line-height: var(--le-line-height-relaxed, 1.6);\n color: var(--le-color-text, #333);\n}\n\n/* When there's both message and slot content */\n.le-popup-message + ::slotted(*) {\n margin-top: var(--le-space-md, 16px);\n}\n\n/* ============================================\n Input (for prompt type)\n ============================================ */\n\n.le-popup-input {\n display: block;\n width: 100%;\n margin-top: var(--le-space-md, 16px);\n padding: var(--le-space-sm, 8px) var(--le-space-md, 16px);\n font-family: inherit;\n font-size: var(--le-font-size-md, 1rem);\n color: var(--le-color-text, #333);\n background: var(--le-color-background, #fff);\n border: 1px solid var(--le-color-border, #e0e0e0);\n border-radius: var(--le-radius-md, 8px);\n outline: none;\n transition: border-color var(--le-transition-fast, 0.15s ease),\n box-shadow var(--le-transition-fast, 0.15s ease);\n box-sizing: border-box;\n}\n\n.le-popup-input:focus {\n border-color: var(--le-color-primary, #2196f3);\n box-shadow: 0 0 0 3px var(--le-color-primary-light, rgba(33, 150, 243, 0.2));\n}\n\n.le-popup-input::placeholder {\n color: var(--le-color-text-muted, #999);\n}\n\n/* ============================================\n Footer (buttons)\n ============================================ */\n\n.le-popup-footer {\n flex-shrink: 0;\n display: flex;\n justify-content: flex-end;\n gap: var(--le-space-sm, 8px);\n padding: var(--le-space-md, 16px) var(--le-space-lg, 24px);\n border-top: 1px solid var(--le-color-border, #e0e0e0);\n background: var(--le-color-surface-alt, #f9f9f9);\n}\n\n/* ============================================\n Buttons\n ============================================ */\n\n.le-popup-btn {\n min-width: 80px;\n}\n\n/* ============================================\n Responsive adjustments\n ============================================ */\n\n@media (max-width: 480px) {\n .le-popup-container {\n min-width: calc(100vw - var(--le-space-md, 16px) * 2);\n max-width: calc(100vw - var(--le-space-md, 16px) * 2);\n }\n \n .le-popup-footer {\n flex-direction: column-reverse;\n }\n \n .le-popup-btn {\n width: 100%;\n }\n}","import { Component, Prop, Method, Event, EventEmitter, State, Element, h } from '@stencil/core';\n\n/**\n * Popup type determines the buttons shown\n */\nexport type PopupType = 'alert' | 'confirm' | 'prompt' | 'custom';\n\n/**\n * Popup position on the screen\n */\nexport type PopupPosition = 'center' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n\n/**\n * Result returned by the popup when closed\n */\nexport interface PopupResult {\n confirmed: boolean;\n value?: string;\n}\n\n/**\n * A flexible popup/dialog component for alerts, confirms, prompts, and custom content.\n * \n * Uses the native HTML <dialog> element for proper modal behavior, accessibility,\n * and focus management. Can be used declaratively in HTML or programmatically \n * via leAlert(), leConfirm(), lePrompt().\n *\n * @slot - Default slot for custom body content\n * @slot header - Custom header content (replaces title)\n * @slot footer - Custom footer content (replaces default buttons)\n * \n * @cmsInternal true\n * @cmsCategory System\n */\n@Component({\n tag: 'le-popup',\n styleUrl: 'le-popup.css',\n shadow: true,\n})\nexport class LePopup {\n @Element() el: HTMLElement;\n\n /**\n * Whether the popup is currently visible\n */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /**\n * Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom\n */\n @Prop() type: PopupType = 'alert';\n\n /**\n * Optional title for the popup header\n */\n @Prop() popupTitle?: string;\n\n /**\n * Message text to display (for alert/confirm/prompt types)\n */\n @Prop() message?: string;\n\n /**\n * Whether the popup is modal (blocks interaction with page behind)\n */\n @Prop() modal: boolean = true;\n\n /**\n * Position of the popup on screen\n */\n @Prop() position: PopupPosition = 'center';\n\n /**\n * Text for the confirm/OK button\n */\n @Prop() confirmText: string = 'OK';\n\n /**\n * Text for the cancel button\n */\n @Prop() cancelText: string = 'Cancel';\n\n /**\n * Placeholder text for prompt input\n */\n @Prop() placeholder: string = '';\n\n /**\n * Default value for prompt input\n */\n @Prop() defaultValue: string = '';\n\n /**\n * Whether clicking the backdrop closes the popup (modal only)\n */\n @Prop() closeOnBackdrop: boolean = true;\n\n /**\n * Internal state for prompt input value\n */\n @State() inputValue: string = '';\n\n /**\n * Emitted when the popup is confirmed (OK clicked)\n */\n @Event() leConfirm: EventEmitter<PopupResult>;\n\n /**\n * Emitted when the popup is cancelled (Cancel clicked or dismissed)\n */\n @Event() leCancel: EventEmitter<PopupResult>;\n\n /**\n * Emitted when the popup opens\n */\n @Event() leOpen: EventEmitter<void>;\n\n /**\n * Emitted when the popup closes\n */\n @Event() leClose: EventEmitter<PopupResult>;\n\n private dialogEl?: HTMLDialogElement;\n private inputEl?: HTMLInputElement;\n private resolvePromise?: (result: PopupResult) => void;\n\n componentWillLoad() {\n this.inputValue = this.defaultValue;\n }\n\n componentDidLoad() {\n // Native dialog handles Escape key automatically when modal\n // We just need to listen for the cancel event\n this.dialogEl?.addEventListener('cancel', this.handleDialogCancel);\n }\n\n disconnectedCallback() {\n this.dialogEl?.removeEventListener('cancel', this.handleDialogCancel);\n }\n\n private handleDialogCancel = (e: Event) => {\n e.preventDefault(); // Prevent default close to handle it ourselves\n this.handleCancel();\n };\n\n /**\n * Opens the popup and returns a promise that resolves when closed\n */\n @Method()\n async show(): Promise<PopupResult> {\n return new Promise((resolve) => {\n this.resolvePromise = resolve;\n this.inputValue = this.defaultValue;\n this.open = true;\n \n // Use requestAnimationFrame to ensure the dialog element is rendered\n requestAnimationFrame(() => {\n if (this.dialogEl) {\n if (this.modal) {\n this.dialogEl.showModal();\n } else {\n this.dialogEl.show();\n }\n \n this.leOpen.emit();\n \n // Focus input for prompt type\n if (this.type === 'prompt' && this.inputEl) {\n this.inputEl.focus();\n this.inputEl.select();\n }\n }\n });\n });\n }\n\n /**\n * Closes the popup with a result\n */\n @Method()\n async hide(confirmed: boolean = false) {\n const result: PopupResult = {\n confirmed,\n value: this.type === 'prompt' ? this.inputValue : undefined,\n };\n \n this.dialogEl?.close();\n this.open = false;\n this.leClose.emit(result);\n \n if (this.resolvePromise) {\n this.resolvePromise(result);\n this.resolvePromise = undefined;\n }\n }\n\n private handleConfirm = () => {\n const result: PopupResult = {\n confirmed: true,\n value: this.type === 'prompt' ? this.inputValue : undefined,\n };\n this.leConfirm.emit(result);\n this.hide(true);\n };\n\n private handleCancel = () => {\n const result: PopupResult = {\n confirmed: false,\n value: undefined,\n };\n this.leCancel.emit(result);\n this.hide(false);\n };\n\n private handleBackdropClick = (e: MouseEvent) => {\n // Check if click was on the dialog backdrop (outside the dialog box)\n if (this.closeOnBackdrop && e.target === this.dialogEl) {\n const rect = this.dialogEl.getBoundingClientRect();\n const clickedInDialog = (\n e.clientX >= rect.left &&\n e.clientX <= rect.right &&\n e.clientY >= rect.top &&\n e.clientY <= rect.bottom\n );\n if (!clickedInDialog) {\n this.handleCancel();\n }\n }\n };\n\n private handleInputChange = (e: Event) => {\n this.inputValue = (e.target as HTMLInputElement).value;\n };\n\n private handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Enter' && this.type !== 'custom') {\n e.preventDefault();\n this.handleConfirm();\n }\n };\n\n private hasSlot(name: string): boolean {\n return !!this.el.querySelector(`[slot=\"${name}\"]`);\n }\n\n private renderHeader() {\n if (this.hasSlot('header')) {\n return (\n <div class=\"le-popup-header\" part=\"header\">\n <slot name=\"header\"></slot>\n </div>\n );\n }\n \n if (this.popupTitle) {\n return (\n <div class=\"le-popup-header\" part=\"header\">\n {this.popupTitle}\n </div>\n );\n }\n \n return null;\n }\n\n private renderBody() {\n return (\n <div class=\"le-popup-body\" part=\"body\">\n {this.message && <p class=\"le-popup-message\">{this.message}</p>}\n \n {this.type === 'prompt' && (\n <input\n type=\"text\"\n class=\"le-popup-input\"\n part=\"input\"\n placeholder={this.placeholder}\n value={this.inputValue}\n onInput={this.handleInputChange}\n onKeyDown={this.handleKeyDown}\n ref={(el) => (this.inputEl = el)}\n />\n )}\n \n {/* Default slot for custom content */}\n <le-slot name=\"\" tag=\"div\" description=\"Custom popup content\" type=\"slot\">\n <slot></slot>\n </le-slot>\n </div>\n );\n }\n\n private renderFooter() {\n if (this.hasSlot('footer')) {\n return (\n <div class=\"le-popup-footer\" part=\"footer\">\n <slot name=\"footer\"></slot>\n </div>\n );\n }\n \n // For custom type without footer slot, don't render default buttons\n if (this.type === 'custom') {\n return null;\n }\n \n return (\n <div class=\"le-popup-footer\" part=\"footer\">\n {(this.type === 'confirm' || this.type === 'prompt') && (\n <le-button\n variant=\"outlined\"\n part=\"button-cancel\"\n class=\"le-popup-btn\"\n onClick={this.handleCancel}\n >\n {this.cancelText}\n </le-button>\n )}\n <le-button\n variant=\"solid\"\n part=\"button-confirm\"\n class=\"le-popup-btn\"\n onClick={this.handleConfirm}\n >\n {this.confirmText}\n </le-button>\n </div>\n );\n }\n\n render() {\n const positionClass = `le-popup-position-${this.position}`;\n \n return (\n <dialog\n class={`le-popup-dialog ${positionClass}`}\n part=\"dialog\"\n ref={(el) => (this.dialogEl = el)}\n onClick={this.handleBackdropClick}\n >\n <le-component component=\"le-popup\">\n <div class=\"le-popup-container\" part=\"container\">\n {this.renderHeader()}\n {this.renderBody()}\n {this.renderFooter()}\n </div>\n </le-component>\n </dialog>\n );\n }\n}\n"],"version":3}
@@ -1,11 +0,0 @@
1
- import type { Components, JSX } from "../types/components";
2
-
3
- interface LeRoundProgress extends Components.LeRoundProgress, HTMLElement {}
4
- export const LeRoundProgress: {
5
- prototype: LeRoundProgress;
6
- new (): LeRoundProgress;
7
- };
8
- /**
9
- * Used to define this component and all nested components recursively.
10
- */
11
- export const defineCustomElement: () => void;
@@ -1,135 +0,0 @@
1
- import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
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}";
4
-
5
- const LeRoundProgress$1 = /*@__PURE__*/ proxyCustomElement(class LeRoundProgress extends HTMLElement {
6
- constructor(registerHost) {
7
- super();
8
- if (registerHost !== false) {
9
- this.__registerHost();
10
- }
11
- this.__attachShadow();
12
- }
13
- get el() { return this; }
14
- // progress value coming from an attribute
15
- value = 0;
16
- updateValue(newValue) {
17
- this.value = parseFloat(newValue);
18
- }
19
- // padding value coming from an attribute
20
- padding = 0;
21
- updatePadding(newValue) {
22
- this.padding = parseFloat(newValue);
23
- this.calcParams();
24
- }
25
- // the progress backgrounds can be as many as needed
26
- // but it should be JSON format: double quotes and strict commas
27
- paths;
28
- updateProgressBackgrounds(newValue) {
29
- this.progressPaths = JSON.parse(newValue);
30
- }
31
- progressPaths;
32
- params;
33
- /**
34
- * Component lifecycles
35
- *
36
- * Before the component is loaded, we need to calculate and update params
37
- * using the component size (width of the round progress)
38
- * and progress width (max of )
39
- */
40
- componentWillLoad() {
41
- if (typeof this.paths === 'string') {
42
- this.updateProgressBackgrounds(this.paths);
43
- }
44
- this.calcParams();
45
- }
46
- calcParams() {
47
- // get element width
48
- const width = this.el.getBoundingClientRect().width;
49
- const diameter = width - this.padding;
50
- // calc circumference — we'll need it later to calc the stroke paths
51
- const circumference = Math.PI * diameter;
52
- this.params = { width, diameter, circumference };
53
- }
54
- /**
55
- * Returns the viewPath attribute value for the SVG
56
- * based on the width of the parent element
57
- */
58
- getViewBox() {
59
- return '0 0 ' + this.params.width + ' ' + this.params.width;
60
- }
61
- /**
62
- * Returns the circular path for the progress stroke
63
- * and additional paths in the background
64
- */
65
- getPath() {
66
- return ('M' +
67
- this.params.width / 2 +
68
- ' ' +
69
- (this.params.width - this.params.diameter) / 2 +
70
- ' a ' +
71
- this.params.diameter / 2 +
72
- ' ' +
73
- this.params.diameter / 2 +
74
- ' 0 0 1 0 ' +
75
- this.params.diameter +
76
- ' a ' +
77
- this.params.diameter / 2 +
78
- ' ' +
79
- this.params.diameter / 2 +
80
- ' 0 0 1 0 -' +
81
- this.params.diameter);
82
- }
83
- getStrokeDashArray() {
84
- return (this.value / 100) * this.params.circumference + ', ' + this.params.circumference;
85
- }
86
- getPaths() {
87
- if (!this.progressPaths || !this.progressPaths.length) {
88
- return null;
89
- }
90
- let paths = [];
91
- this.progressPaths.forEach(bg => {
92
- paths.push(h("path", { class: "round-progress--path", d: this.getPath(), stroke: bg.color, "stroke-width": bg.width, "stroke-dasharray": bg.dasharray, "stroke-linecap": bg.linecap }));
93
- });
94
- return (h("svg", { viewBox: this.getViewBox(), class: "round-progress" }, paths));
95
- }
96
- render() {
97
- return (h("div", { key: '1ffc36704bee5d0822623ac4559ad2d4690095a4', class: "round-progress--container" }, this.getPaths(), h("svg", { key: '12e4dfe5fe2df0cb672d4c001459b8dcc8253591', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, h("path", { key: 'd8ce69610687fb578ce2104bd3eccba24951dd96', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), h("slot", { key: '3976b08a7e838579d6af34a778a8756255d98e57' })));
98
- }
99
- static get watchers() { return {
100
- "value": ["updateValue"],
101
- "padding": ["updatePadding"],
102
- "paths": ["updateProgressBackgrounds"]
103
- }; }
104
- static get style() { return leRoundProgressCss; }
105
- }, [769, "le-round-progress", {
106
- "value": [2],
107
- "padding": [2],
108
- "paths": [1],
109
- "params": [32]
110
- }, undefined, {
111
- "value": ["updateValue"],
112
- "padding": ["updatePadding"],
113
- "paths": ["updateProgressBackgrounds"]
114
- }]);
115
- function defineCustomElement$1() {
116
- if (typeof customElements === "undefined") {
117
- return;
118
- }
119
- const components = ["le-round-progress"];
120
- components.forEach(tagName => { switch (tagName) {
121
- case "le-round-progress":
122
- if (!customElements.get(tagName)) {
123
- customElements.define(tagName, LeRoundProgress$1);
124
- }
125
- break;
126
- } });
127
- }
128
-
129
- const LeRoundProgress = LeRoundProgress$1;
130
- const defineCustomElement = defineCustomElement$1;
131
-
132
- export { LeRoundProgress, defineCustomElement };
133
- //# sourceMappingURL=le-round-progress.js.map
134
-
135
- //# sourceMappingURL=le-round-progress.js.map
@@ -1 +0,0 @@
1
- {"file":"le-round-progress.js","mappings":"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","names":["LeRoundProgress","__stencil_proxyCustomElement"],"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"],"version":3}
@@ -1 +0,0 @@
1
- {"file":"le-slot.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
@@ -1,11 +0,0 @@
1
- import type { Components, JSX } from "../types/components";
2
-
3
- interface LeStack extends Components.LeStack, HTMLElement {}
4
- export const LeStack: {
5
- prototype: LeStack;
6
- new (): LeStack;
7
- };
8
- /**
9
- * Used to define this component and all nested components recursively.
10
- */
11
- export const defineCustomElement: () => void;