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,106 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-CO4npcak.js');
4
-
5
- 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}";
6
-
7
- const LeRoundProgress = class {
8
- constructor(hostRef) {
9
- index.registerInstance(this, hostRef);
10
- }
11
- get el() { return index.getElement(this); }
12
- // progress value coming from an attribute
13
- value = 0;
14
- updateValue(newValue) {
15
- this.value = parseFloat(newValue);
16
- }
17
- // padding value coming from an attribute
18
- padding = 0;
19
- updatePadding(newValue) {
20
- this.padding = parseFloat(newValue);
21
- this.calcParams();
22
- }
23
- // the progress backgrounds can be as many as needed
24
- // but it should be JSON format: double quotes and strict commas
25
- paths;
26
- updateProgressBackgrounds(newValue) {
27
- this.progressPaths = JSON.parse(newValue);
28
- }
29
- progressPaths;
30
- params;
31
- /**
32
- * Component lifecycles
33
- *
34
- * Before the component is loaded, we need to calculate and update params
35
- * using the component size (width of the round progress)
36
- * and progress width (max of )
37
- */
38
- componentWillLoad() {
39
- if (typeof this.paths === 'string') {
40
- this.updateProgressBackgrounds(this.paths);
41
- }
42
- this.calcParams();
43
- }
44
- calcParams() {
45
- // get element width
46
- const width = this.el.getBoundingClientRect().width;
47
- const diameter = width - this.padding;
48
- // calc circumference — we'll need it later to calc the stroke paths
49
- const circumference = Math.PI * diameter;
50
- this.params = { width, diameter, circumference };
51
- }
52
- /**
53
- * Returns the viewPath attribute value for the SVG
54
- * based on the width of the parent element
55
- */
56
- getViewBox() {
57
- return '0 0 ' + this.params.width + ' ' + this.params.width;
58
- }
59
- /**
60
- * Returns the circular path for the progress stroke
61
- * and additional paths in the background
62
- */
63
- getPath() {
64
- return ('M' +
65
- this.params.width / 2 +
66
- ' ' +
67
- (this.params.width - this.params.diameter) / 2 +
68
- ' a ' +
69
- this.params.diameter / 2 +
70
- ' ' +
71
- this.params.diameter / 2 +
72
- ' 0 0 1 0 ' +
73
- this.params.diameter +
74
- ' a ' +
75
- this.params.diameter / 2 +
76
- ' ' +
77
- this.params.diameter / 2 +
78
- ' 0 0 1 0 -' +
79
- this.params.diameter);
80
- }
81
- getStrokeDashArray() {
82
- return (this.value / 100) * this.params.circumference + ', ' + this.params.circumference;
83
- }
84
- getPaths() {
85
- if (!this.progressPaths || !this.progressPaths.length) {
86
- return null;
87
- }
88
- let paths = [];
89
- this.progressPaths.forEach(bg => {
90
- paths.push(index.h("path", { class: "round-progress--path", d: this.getPath(), stroke: bg.color, "stroke-width": bg.width, "stroke-dasharray": bg.dasharray, "stroke-linecap": bg.linecap }));
91
- });
92
- return (index.h("svg", { viewBox: this.getViewBox(), class: "round-progress" }, paths));
93
- }
94
- render() {
95
- return (index.h("div", { key: '1ffc36704bee5d0822623ac4559ad2d4690095a4', class: "round-progress--container" }, this.getPaths(), index.h("svg", { key: '12e4dfe5fe2df0cb672d4c001459b8dcc8253591', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, index.h("path", { key: 'd8ce69610687fb578ce2104bd3eccba24951dd96', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), index.h("slot", { key: '3976b08a7e838579d6af34a778a8756255d98e57' })));
96
- }
97
- static get watchers() { return {
98
- "value": ["updateValue"],
99
- "padding": ["updatePadding"],
100
- "paths": ["updateProgressBackgrounds"]
101
- }; }
102
- };
103
- LeRoundProgress.style = leRoundProgressCss;
104
-
105
- exports.le_round_progress = LeRoundProgress;
106
- //# sourceMappingURL=le-round-progress.entry.cjs.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"le-round-progress.entry.cjs.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":["h"],"mappings":"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"}
@@ -1,135 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-CO4npcak.js');
4
- var utils = require('./utils-BeT0iyCQ.js');
5
-
6
- const leStackDefaultCss = ":host{display:block}:host([hidden]){display:none}.stack{gap:var(--le-stack-gap, var(--le-space-md))}:host(.full-width){width:100%}:host(.full-height){height:100%}:host(.direction-horizontal) .stack{min-height:0}:host(.direction-vertical) .stack{min-width:0}";
7
-
8
- const LeStack = class {
9
- constructor(hostRef) {
10
- index.registerInstance(this, hostRef);
11
- }
12
- get el() { return index.getElement(this); }
13
- /**
14
- * Direction of the stack layout
15
- * @allowedValues horizontal | vertical
16
- */
17
- direction = 'horizontal';
18
- /**
19
- * Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')
20
- */
21
- gap;
22
- /**
23
- * Alignment of items on the cross axis
24
- * @allowedValues start | center | end | stretch | baseline
25
- */
26
- align = 'stretch';
27
- /**
28
- * Distribution of items on the main axis
29
- * @allowedValues start | center | end | space-between | space-around | space-evenly
30
- */
31
- justify = 'start';
32
- /**
33
- * Whether items should wrap to multiple lines
34
- */
35
- wrap = false;
36
- /**
37
- * Alignment of wrapped lines (only applies when wrap is true)
38
- * @allowedValues start | center | end | stretch | space-between | space-around
39
- */
40
- alignContent = 'stretch';
41
- /**
42
- * Whether to reverse the order of items
43
- */
44
- reverse = false;
45
- /**
46
- * Maximum number of items allowed in the stack (for CMS validation)
47
- * @min 1
48
- */
49
- maxItems;
50
- /**
51
- * Whether the stack should take full width of its container
52
- */
53
- fullWidth = false;
54
- /**
55
- * Whether the stack should take full height of its container
56
- */
57
- fullHeight = false;
58
- /**
59
- * Padding inside the stack container (CSS value)
60
- */
61
- padding;
62
- getFlexDirection() {
63
- const base = this.direction === 'vertical' ? 'column' : 'row';
64
- return this.reverse ? `${base}-reverse` : base;
65
- }
66
- getAlignItems() {
67
- const alignMap = {
68
- start: 'flex-start',
69
- center: 'center',
70
- end: 'flex-end',
71
- stretch: 'stretch',
72
- baseline: 'baseline',
73
- };
74
- return alignMap[this.align] || 'stretch';
75
- }
76
- getJustifyContent() {
77
- const justifyMap = {
78
- start: 'flex-start',
79
- center: 'center',
80
- end: 'flex-end',
81
- 'space-between': 'space-between',
82
- 'space-around': 'space-around',
83
- 'space-evenly': 'space-evenly',
84
- };
85
- return justifyMap[this.justify] || 'flex-start';
86
- }
87
- getAlignContent() {
88
- const alignContentMap = {
89
- start: 'flex-start',
90
- center: 'center',
91
- end: 'flex-end',
92
- stretch: 'stretch',
93
- 'space-between': 'space-between',
94
- 'space-around': 'space-around',
95
- };
96
- return alignContentMap[this.alignContent] || 'stretch';
97
- }
98
- render() {
99
- const style = {
100
- display: 'flex',
101
- flexDirection: this.getFlexDirection(),
102
- alignItems: this.getAlignItems(),
103
- justifyContent: this.getJustifyContent(),
104
- flexWrap: this.wrap ? 'wrap' : 'nowrap',
105
- };
106
- if (this.wrap) {
107
- style.alignContent = this.getAlignContent();
108
- }
109
- if (this.gap) {
110
- style.gap = this.gap;
111
- }
112
- if (this.padding) {
113
- style.padding = this.padding;
114
- }
115
- // if (this.fullWidth) {
116
- // style.width = '100%';
117
- // }
118
- // if (this.fullHeight) {
119
- // style.height = '100%';
120
- // }
121
- const hostClass = utils.classnames(`direction-${this.direction}`, {
122
- 'wrap': this.wrap,
123
- 'reverse': this.reverse,
124
- 'full-width': this.fullWidth,
125
- 'full-height': this.fullHeight,
126
- });
127
- // Slot style for admin mode - make items display in the same direction
128
- const slotStyle = `display: flex; flex-direction: ${this.getFlexDirection()}; gap: ${this.gap || 'var(--le-space-md)'}; flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'}; justify-content: ${this.getJustifyContent()}; align-items: ${this.getAlignItems()};`;
129
- return (index.h("le-component", { key: 'e1547512915e47e4c5ddbcbcbd3971579e45a140', component: "le-stack", hostClass: hostClass }, index.h("div", { key: '61a4fd57c61c56a8abac0ae2348e6e48034efc4d', class: "stack", part: "stack", style: style }, index.h("le-slot", { key: '0ef0f996ce0efcb20a47171197d82e5b326c7e8c', name: "", description: `Items arranged ${this.direction}ly${this.maxItems ? ` (max ${this.maxItems})` : ''}`, type: "slot", "allowed-components": "le-text,le-box,le-card,le-button,le-stack", slotStyle: slotStyle }, index.h("slot", { key: 'f41f351d8b6dbdaf20756e9bc317a35a0424fc6c' })))));
130
- }
131
- };
132
- LeStack.style = leStackDefaultCss;
133
-
134
- exports.le_stack = LeStack;
135
- //# sourceMappingURL=le-stack.entry.cjs.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"le-stack.entry.cjs.js","sources":["src/components/le-stack/le-stack.default.css?tag=le-stack&encapsulation=shadow","src/components/le-stack/le-stack.tsx"],"sourcesContent":["/**\n * le-stack default styles\n *\n * The component uses inline styles for flex properties to allow\n * dynamic prop-based configuration. This CSS handles theming.\n */\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n/* Base stack container */\n.stack {\n gap: var(--le-stack-gap, var(--le-space-md));\n}\n\n/* Full width/height variants */\n:host(.full-width) {\n width: 100%;\n}\n\n:host(.full-height) {\n height: 100%;\n}\n\n/* Direction-specific defaults */\n:host(.direction-horizontal) .stack {\n min-height: 0;\n}\n\n:host(.direction-vertical) .stack {\n min-width: 0;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible stack layout component using CSS flexbox.\n *\n * `le-stack` arranges its children in a row (horizontal) or column (vertical)\n * with configurable spacing, alignment, and wrapping behavior. Perfect for\n * creating responsive layouts.\n *\n * @slot - Default slot for stack items (le-box components recommended)\n *\n * @cssprop --le-stack-gap - Gap between items (defaults to var(--le-space-md))\n *\n * @csspart stack - The main stack container\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n tag: 'le-stack',\n styleUrl: 'le-stack.default.css',\n shadow: true,\n})\nexport class LeStack {\n @Element() el: HTMLElement;\n\n /**\n * Direction of the stack layout\n * @allowedValues horizontal | vertical\n */\n @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')\n */\n @Prop() gap?: string;\n\n /**\n * Alignment of items on the cross axis\n * @allowedValues start | center | end | stretch | baseline\n */\n @Prop() align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'stretch';\n\n /**\n * Distribution of items on the main axis\n * @allowedValues start | center | end | space-between | space-around | space-evenly\n */\n @Prop() justify: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' = 'start';\n\n /**\n * Whether items should wrap to multiple lines\n */\n @Prop() wrap: boolean = false;\n\n /**\n * Alignment of wrapped lines (only applies when wrap is true)\n * @allowedValues start | center | end | stretch | space-between | space-around\n */\n @Prop() alignContent: 'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around' = 'stretch';\n\n /**\n * Whether to reverse the order of items\n */\n @Prop() reverse: boolean = false;\n\n /**\n * Maximum number of items allowed in the stack (for CMS validation)\n * @min 1\n */\n @Prop() maxItems?: number;\n\n /**\n * Whether the stack should take full width of its container\n */\n @Prop() fullWidth: boolean = false;\n\n /**\n * Whether the stack should take full height of its container\n */\n @Prop() fullHeight: boolean = false;\n\n /**\n * Padding inside the stack container (CSS value)\n */\n @Prop() padding?: string;\n\n private getFlexDirection(): string {\n const base = this.direction === 'vertical' ? 'column' : 'row';\n return this.reverse ? `${base}-reverse` : base;\n }\n\n private getAlignItems(): string {\n const alignMap: Record<string, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n stretch: 'stretch',\n baseline: 'baseline',\n };\n return alignMap[this.align] || 'stretch';\n }\n\n private getJustifyContent(): string {\n const justifyMap: Record<string, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n 'space-between': 'space-between',\n 'space-around': 'space-around',\n 'space-evenly': 'space-evenly',\n };\n return justifyMap[this.justify] || 'flex-start';\n }\n\n private getAlignContent(): string {\n const alignContentMap: Record<string, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n stretch: 'stretch',\n 'space-between': 'space-between',\n 'space-around': 'space-around',\n };\n return alignContentMap[this.alignContent] || 'stretch';\n }\n\n render() {\n const style: { [key: string]: string } = {\n display: 'flex',\n flexDirection: this.getFlexDirection(),\n alignItems: this.getAlignItems(),\n justifyContent: this.getJustifyContent(),\n flexWrap: this.wrap ? 'wrap' : 'nowrap',\n };\n\n if (this.wrap) {\n style.alignContent = this.getAlignContent();\n }\n\n if (this.gap) {\n style.gap = this.gap;\n }\n\n if (this.padding) {\n style.padding = this.padding;\n }\n\n // if (this.fullWidth) {\n // style.width = '100%';\n // }\n\n // if (this.fullHeight) {\n // style.height = '100%';\n // }\n\n const hostClass = classnames(\n `direction-${this.direction}`,\n {\n 'wrap': this.wrap,\n 'reverse': this.reverse,\n 'full-width': this.fullWidth,\n 'full-height': this.fullHeight,\n }\n );\n\n // Slot style for admin mode - make items display in the same direction\n const slotStyle = `display: flex; flex-direction: ${this.getFlexDirection()}; gap: ${this.gap || 'var(--le-space-md)'}; flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'}; justify-content: ${this.getJustifyContent()}; align-items: ${this.getAlignItems()};`;\n\n return (\n <le-component component=\"le-stack\" hostClass={hostClass}>\n <div class=\"stack\" part=\"stack\" style={style}>\n <le-slot\n name=\"\"\n description={`Items arranged ${this.direction}ly${this.maxItems ? ` (max ${this.maxItems})` : ''}`}\n type=\"slot\"\n allowed-components=\"le-text,le-box,le-card,le-button,le-stack\"\n slotStyle={slotStyle}\n >\n <slot></slot>\n </le-slot>\n </div>\n </le-component>\n );\n }\n}\n"],"names":["classnames","h"],"mappings":"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"}
@@ -1,335 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-CO4npcak.js');
4
- var utils = require('./utils-BeT0iyCQ.js');
5
-
6
- const leTextDefaultCss = ":host{display:block}:host([hidden]){display:none}.le-text{margin:0;color:var(--le-text-color, var(--le-color-text));font-family:var(--le-font-family);line-height:var(--le-text-line-height, 1.5)}.variant-p{font-size:var(--le-font-size-base, 1rem);font-weight:var(--le-font-weight-normal, 400);color:var(--le-color-text)}.variant-h1{font-size:var(--le-font-size-4xl, 2.5rem);font-weight:var(--le-font-weight-bold, 700);line-height:1.2;color:var(--le-color-text);letter-spacing:-0.02em}.variant-h2{font-size:var(--le-font-size-3xl, 2rem);font-weight:var(--le-font-weight-bold, 700);line-height:1.25;color:var(--le-color-text);letter-spacing:-0.01em}.variant-h3{font-size:var(--le-font-size-2xl, 1.5rem);font-weight:var(--le-font-weight-semibold, 600);line-height:1.3;color:var(--le-color-text)}.variant-h4{font-size:var(--le-font-size-xl, 1.25rem);font-weight:var(--le-font-weight-semibold, 600);line-height:1.35;color:var(--le-color-text)}.variant-h5{font-size:var(--le-font-size-lg, 1.125rem);font-weight:var(--le-font-weight-medium, 500);line-height:1.4;color:var(--le-color-text)}.variant-h6{font-size:var(--le-font-size-base, 1rem);font-weight:var(--le-font-weight-medium, 500);line-height:1.45;color:var(--le-color-text);text-transform:uppercase;letter-spacing:0.05em}.variant-code{font-family:var(--le-font-family-mono, 'SF Mono', 'Fira Code', 'Consolas', monospace);font-size:var(--le-font-size-sm, 0.875rem);background:var(--le-color-surface-alt, #f5f5f5);padding:var(--le-space-md);border-radius:var(--le-radius-md);overflow-x:auto;white-space:pre-wrap;color:var(--le-color-text)}.variant-quote{font-size:var(--le-font-size-lg, 1.125rem);font-style:italic;color:var(--le-color-text-secondary);border-left:4px solid var(--le-color-primary);padding-left:var(--le-space-lg);margin-left:0;margin-right:0}.variant-label{font-size:var(--le-font-size-sm, 0.875rem);font-weight:var(--le-font-weight-medium, 500);color:var(--le-color-text-secondary);text-transform:uppercase;letter-spacing:0.05em}.variant-small{font-size:var(--le-font-size-sm, 0.875rem);color:var(--le-color-text-secondary)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.truncate.max-lines-2,.truncate.max-lines-3,.truncate.max-lines-4,.truncate.max-lines-5{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical}.truncate.max-lines-2{-webkit-line-clamp:2;line-clamp:2}.truncate.max-lines-3{-webkit-line-clamp:3;line-clamp:3}.truncate.max-lines-4{-webkit-line-clamp:4;line-clamp:4}.truncate.max-lines-5{-webkit-line-clamp:5;line-clamp:5}:host([align=\"center\"]) .le-text{text-align:center}:host([align=\"right\"]) .le-text{text-align:right}:host([align=\"justify\"]) .le-text{text-align:justify}.le-text a{color:var(--le-color-primary);text-decoration:underline}.le-text a:hover{color:var(--le-color-primary-dark)}.le-text strong,.le-text b{font-weight:var(--le-font-weight-bold, 700)}.le-text em,.le-text i{font-style:italic}.le-text u{text-decoration:underline}.le-text s,.le-text strike{text-decoration:line-through}";
7
-
8
- const LeText = class {
9
- constructor(hostRef) {
10
- index.registerInstance(this, hostRef);
11
- }
12
- get el() { return index.getElement(this); }
13
- /**
14
- * The semantic variant/type of text element
15
- * @allowedValues p | h1 | h2 | h3 | h4 | h5 | h6 | code | quote | label | small
16
- */
17
- variant = 'p';
18
- /**
19
- * Text alignment
20
- * @allowedValues left | center | right | justify
21
- */
22
- align = 'left';
23
- /**
24
- * Text color (CSS value or theme token)
25
- */
26
- color;
27
- /**
28
- * Whether the text should truncate with ellipsis
29
- */
30
- truncate = false;
31
- /**
32
- * Maximum number of lines before truncating (requires truncate=true)
33
- */
34
- maxLines;
35
- /**
36
- * Internal state to track admin mode
37
- */
38
- adminMode = false;
39
- /**
40
- * The HTML content being edited
41
- */
42
- content = '';
43
- /**
44
- * Whether the editor is focused (shows toolbar)
45
- */
46
- isFocused = false;
47
- /**
48
- * Current selection state for toolbar button highlighting
49
- */
50
- selectionState = {
51
- isBold: false,
52
- isItalic: false,
53
- isUnderline: false,
54
- isStrikethrough: false,
55
- isLink: false,
56
- blockType: 'p',
57
- };
58
- /**
59
- * Reference to the contenteditable element
60
- */
61
- editorRef;
62
- /**
63
- * Reference to the slot element
64
- */
65
- slotRef;
66
- disconnectModeObserver;
67
- connectedCallback() {
68
- this.disconnectModeObserver = utils.observeModeChanges(this.el, (mode) => {
69
- const wasAdmin = this.adminMode;
70
- this.adminMode = mode === 'admin';
71
- if (this.adminMode && !wasAdmin) {
72
- // Entering admin mode - read content from slot
73
- requestAnimationFrame(() => this.readSlottedContent());
74
- }
75
- else if (!this.adminMode && wasAdmin) {
76
- // Leaving admin mode - sync content back to slot
77
- this.syncContentToSlot();
78
- }
79
- });
80
- }
81
- disconnectedCallback() {
82
- this.disconnectModeObserver?.();
83
- }
84
- onVariantChange() {
85
- // When variant changes in admin mode, update the content wrapper
86
- if (this.adminMode && this.editorRef) {
87
- this.syncContentToSlot();
88
- }
89
- }
90
- /**
91
- * Read content from slotted elements
92
- */
93
- readSlottedContent() {
94
- if (!this.slotRef)
95
- return;
96
- const assignedNodes = this.slotRef.assignedNodes({ flatten: true });
97
- // Collect all content from assigned nodes
98
- let html = '';
99
- assignedNodes.forEach(node => {
100
- if (node.nodeType === Node.TEXT_NODE) {
101
- html += node.textContent;
102
- }
103
- else if (node.nodeType === Node.ELEMENT_NODE) {
104
- html += node.innerHTML || node.textContent;
105
- }
106
- });
107
- this.content = html.trim();
108
- }
109
- /**
110
- * Sync edited content back to the slot
111
- */
112
- syncContentToSlot() {
113
- if (!this.editorRef)
114
- return;
115
- const newContent = this.editorRef.innerHTML;
116
- // Update the light DOM content
117
- // We need to update the actual slotted content
118
- const slot = this.slotRef;
119
- if (slot) {
120
- const assignedNodes = slot.assignedNodes({ flatten: true });
121
- if (assignedNodes.length > 0) {
122
- const firstNode = assignedNodes[0];
123
- if (firstNode.nodeType === Node.ELEMENT_NODE) {
124
- firstNode.innerHTML = newContent;
125
- }
126
- else if (firstNode.nodeType === Node.TEXT_NODE) {
127
- // Replace text node with the new content
128
- const parent = firstNode.parentNode;
129
- if (parent) {
130
- // Create a temporary element to parse HTML
131
- const temp = document.createElement('span');
132
- temp.innerHTML = newContent;
133
- // Replace the text node
134
- parent.replaceChild(temp, firstNode);
135
- // Unwrap the span if it only contains text
136
- if (temp.childNodes.length === 1 && temp.firstChild?.nodeType === Node.TEXT_NODE) {
137
- parent.replaceChild(temp.firstChild, temp);
138
- }
139
- }
140
- }
141
- }
142
- else {
143
- // No assigned nodes, set innerHTML on the host's light DOM
144
- this.el.innerHTML = newContent;
145
- }
146
- }
147
- }
148
- /**
149
- * Handle input in the contenteditable
150
- */
151
- handleInput = () => {
152
- if (this.editorRef) {
153
- this.content = this.editorRef.innerHTML;
154
- this.updateSelectionState();
155
- }
156
- };
157
- /**
158
- * Handle focus on the editor
159
- */
160
- handleFocus = () => {
161
- this.isFocused = true;
162
- this.updateSelectionState();
163
- };
164
- /**
165
- * Handle blur on the editor
166
- */
167
- handleBlur = (e) => {
168
- // Check if focus moved to toolbar
169
- const relatedTarget = e.relatedTarget;
170
- const toolbar = this.el.shadowRoot?.querySelector('.le-text-toolbar');
171
- if (toolbar?.contains(relatedTarget)) {
172
- // Focus moved to toolbar, keep it open
173
- return;
174
- }
175
- // Small delay to allow toolbar clicks to register
176
- setTimeout(() => {
177
- if (!this.el.shadowRoot?.activeElement) {
178
- this.isFocused = false;
179
- this.syncContentToSlot();
180
- }
181
- }, 150);
182
- };
183
- /**
184
- * Handle selection change to update toolbar state
185
- */
186
- handleSelectionChange = () => {
187
- this.updateSelectionState();
188
- };
189
- /**
190
- * Update the selection state for toolbar highlighting
191
- */
192
- updateSelectionState() {
193
- const selection = window.getSelection();
194
- if (!selection || selection.rangeCount === 0)
195
- return;
196
- this.selectionState = {
197
- isBold: document.queryCommandState('bold'),
198
- isItalic: document.queryCommandState('italic'),
199
- isUnderline: document.queryCommandState('underline'),
200
- isStrikethrough: document.queryCommandState('strikeThrough'),
201
- isLink: this.isSelectionInLink(selection),
202
- blockType: this.variant,
203
- };
204
- }
205
- /**
206
- * Check if current selection is within a link
207
- */
208
- isSelectionInLink(selection) {
209
- if (!selection.anchorNode)
210
- return false;
211
- let node = selection.anchorNode;
212
- while (node && node !== this.editorRef) {
213
- if (node.nodeName === 'A')
214
- return true;
215
- node = node.parentNode;
216
- }
217
- return false;
218
- }
219
- /**
220
- * Execute a formatting command
221
- */
222
- execCommand(command, value) {
223
- // Focus the editor first
224
- this.editorRef?.focus();
225
- // Execute the command
226
- document.execCommand(command, false, value);
227
- // Update state
228
- this.handleInput();
229
- this.updateSelectionState();
230
- }
231
- /**
232
- * Toggle bold formatting
233
- */
234
- toggleBold = (e) => {
235
- e.preventDefault();
236
- this.execCommand('bold');
237
- };
238
- /**
239
- * Toggle italic formatting
240
- */
241
- toggleItalic = (e) => {
242
- e.preventDefault();
243
- this.execCommand('italic');
244
- };
245
- /**
246
- * Toggle underline formatting
247
- */
248
- toggleUnderline = (e) => {
249
- e.preventDefault();
250
- this.execCommand('underline');
251
- };
252
- /**
253
- * Toggle strikethrough formatting
254
- */
255
- toggleStrikethrough = (e) => {
256
- e.preventDefault();
257
- this.execCommand('strikeThrough');
258
- };
259
- /**
260
- * Add or edit a link
261
- */
262
- toggleLink = (e) => {
263
- e.preventDefault();
264
- if (this.selectionState.isLink) {
265
- // Remove link
266
- this.execCommand('unlink');
267
- }
268
- else {
269
- // Add link
270
- const url = prompt('Enter URL:', 'https://');
271
- if (url) {
272
- this.execCommand('createLink', url);
273
- }
274
- }
275
- };
276
- /**
277
- * Change the block type/variant
278
- */
279
- changeVariant = (e) => {
280
- const select = e.target;
281
- this.variant = select.value;
282
- };
283
- /**
284
- * Render the formatting toolbar
285
- */
286
- renderToolbar() {
287
- return (index.h("div", { class: "le-text-toolbar" }, index.h("select", { class: "le-text-toolbar-select", onChange: this.changeVariant, onMouseDown: (e) => e.preventDefault() }, index.h("option", { value: "p", selected: this.variant === 'p' }, "Paragraph"), index.h("option", { value: "h1", selected: this.variant === 'h1' }, "Heading 1"), index.h("option", { value: "h2", selected: this.variant === 'h2' }, "Heading 2"), index.h("option", { value: "h3", selected: this.variant === 'h3' }, "Heading 3"), index.h("option", { value: "h4", selected: this.variant === 'h4' }, "Heading 4"), index.h("option", { value: "h5", selected: this.variant === 'h5' }, "Heading 5"), index.h("option", { value: "h6", selected: this.variant === 'h6' }, "Heading 6"), index.h("option", { value: "quote", selected: this.variant === 'quote' }, "Quote"), index.h("option", { value: "code", selected: this.variant === 'code' }, "Code"), index.h("option", { value: "label", selected: this.variant === 'label' }, "Label"), index.h("option", { value: "small", selected: this.variant === 'small' }, "Small")), index.h("div", { class: "le-text-toolbar-divider" }), index.h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isBold }, onMouseDown: this.toggleBold, title: "Bold (Ctrl+B)" }, index.h("strong", null, "B")), index.h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isItalic }, onMouseDown: this.toggleItalic, title: "Italic (Ctrl+I)" }, index.h("em", null, "I")), index.h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isUnderline }, onMouseDown: this.toggleUnderline, title: "Underline (Ctrl+U)" }, index.h("span", { style: { textDecoration: 'underline' } }, "U")), index.h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isStrikethrough }, onMouseDown: this.toggleStrikethrough, title: "Strikethrough" }, index.h("span", { style: { textDecoration: 'line-through' } }, "S")), index.h("div", { class: "le-text-toolbar-divider" }), index.h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isLink }, onMouseDown: this.toggleLink, title: this.selectionState.isLink ? 'Remove link' : 'Add link' }, "\uD83D\uDD17")));
288
- }
289
- /**
290
- * Get the semantic tag for the current variant
291
- */
292
- getTag() {
293
- switch (this.variant) {
294
- case 'quote':
295
- return 'blockquote';
296
- case 'code':
297
- return 'pre';
298
- case 'label':
299
- return 'label';
300
- case 'small':
301
- return 'small';
302
- default:
303
- return this.variant; // h1-h6, p
304
- }
305
- }
306
- render() {
307
- const Tag = this.getTag();
308
- const textStyle = {};
309
- if (this.color) {
310
- textStyle.color = this.color;
311
- }
312
- if (this.align) {
313
- textStyle.textAlign = this.align;
314
- }
315
- const textClass = {
316
- 'le-text': true,
317
- [`variant-${this.variant}`]: true,
318
- 'truncate': this.truncate,
319
- [`max-lines-${this.maxLines}`]: this.truncate && this.maxLines,
320
- };
321
- // Admin mode - show rich text editor
322
- if (this.adminMode) {
323
- return (index.h(index.Host, { class: "admin-mode" }, index.h("le-component", { component: "le-text" }, index.h("div", { class: "le-text-editor-wrapper" }, this.isFocused && this.renderToolbar(), index.h(Tag, { class: textClass, part: "text", style: textStyle }, index.h("div", { ref: (el) => this.editorRef = el, class: "le-text-editor", contentEditable: true, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleSelectionChange, onMouseUp: this.handleSelectionChange, innerHTML: this.content })), index.h("div", { class: "hidden-slot" }, index.h("slot", { ref: (el) => this.slotRef = el, onSlotchange: () => this.readSlottedContent() }))))));
324
- }
325
- // Default mode - render semantic element with slotted content
326
- return (index.h(index.Host, null, index.h(Tag, { class: textClass, part: "text", style: textStyle }, index.h("slot", { ref: (el) => this.slotRef = el }))));
327
- }
328
- static get watchers() { return {
329
- "variant": ["onVariantChange"]
330
- }; }
331
- };
332
- LeText.style = leTextDefaultCss;
333
-
334
- exports.le_text = LeText;
335
- //# sourceMappingURL=le-text.entry.cjs.js.map