le-kit 0.1.4 → 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.
- package/dist/le-kit/assets/custom-elements.json +4305 -0
- package/dist/le-kit/index-Da-89pOc.js +4522 -0
- package/dist/le-kit/{index-D21JjI31.js.map → index-Da-89pOc.js.map} +1 -1
- package/dist/le-kit/index.esm.js +116 -2
- package/dist/le-kit/index.esm.js.map +1 -1
- package/dist/{esm → le-kit}/le-box.entry.js +3 -3
- package/dist/le-kit/le-button.entry.esm.js.map +1 -0
- package/dist/le-kit/le-button.entry.js +90 -0
- package/dist/{esm → le-kit}/le-card.entry.js +3 -3
- package/dist/le-kit/le-checkbox.entry.esm.js.map +1 -0
- package/dist/le-kit/le-checkbox.entry.js +59 -0
- package/dist/le-kit/le-component.entry.esm.js.map +1 -0
- package/dist/{collection/components/le-component/le-component.js → le-kit/le-component.entry.js} +19 -134
- package/dist/le-kit/le-kit.css +1010 -1
- package/dist/le-kit/le-kit.esm.js +48 -2
- package/dist/le-kit/le-kit.esm.js.map +1 -1
- package/dist/{esm → le-kit}/le-number-input.entry.js +5 -5
- package/dist/le-kit/le-popover.entry.esm.js.map +1 -0
- package/dist/{components/le-popover2.js → le-kit/le-popover.entry.js} +9 -45
- package/dist/{esm → le-kit}/le-popup.entry.js +6 -6
- package/dist/{esm → le-kit}/le-round-progress.entry.js +2 -2
- package/dist/le-kit/le-slot.entry.esm.js.map +1 -0
- package/dist/{collection/components/le-slot/le-slot.js → le-kit/le-slot.entry.js} +30 -279
- package/dist/{esm → le-kit}/le-stack.entry.js +3 -3
- package/dist/le-kit/le-string-input.entry.esm.js.map +1 -0
- package/dist/le-kit/le-string-input.entry.js +93 -0
- package/dist/{esm → le-kit}/le-text.entry.js +3 -3
- package/dist/{esm → le-kit}/le-turntable.entry.js +2 -2
- package/dist/{esm/utils-CJLZrrdC.js → le-kit/utils-FDOApZ53.js} +3 -3
- package/dist/le-kit/{utils-apol-Xc_.js.map → utils-FDOApZ53.js.map} +1 -1
- package/package.json +1 -1
- package/dist/cjs/index-CO4npcak.js +0 -1796
- package/dist/cjs/index-CO4npcak.js.map +0 -1
- package/dist/cjs/index.cjs.js +0 -117
- package/dist/cjs/index.cjs.js.map +0 -1
- package/dist/cjs/le-box.cjs.entry.js +0 -184
- package/dist/cjs/le-box.entry.cjs.js.map +0 -1
- package/dist/cjs/le-button.le-checkbox.le-component.le-popover.le-slot.le-string-input.entry.cjs.js.map +0 -1
- package/dist/cjs/le-button_6.cjs.entry.js +0 -1199
- package/dist/cjs/le-card.cjs.entry.js +0 -29
- package/dist/cjs/le-card.entry.cjs.js.map +0 -1
- package/dist/cjs/le-kit.cjs.js +0 -25
- package/dist/cjs/le-kit.cjs.js.map +0 -1
- package/dist/cjs/le-number-input.cjs.entry.js +0 -202
- package/dist/cjs/le-number-input.entry.cjs.js.map +0 -1
- package/dist/cjs/le-popup.cjs.entry.js +0 -212
- package/dist/cjs/le-popup.entry.cjs.js.map +0 -1
- package/dist/cjs/le-round-progress.cjs.entry.js +0 -106
- package/dist/cjs/le-round-progress.entry.cjs.js.map +0 -1
- package/dist/cjs/le-stack.cjs.entry.js +0 -135
- package/dist/cjs/le-stack.entry.cjs.js.map +0 -1
- package/dist/cjs/le-text.cjs.entry.js +0 -335
- package/dist/cjs/le-text.entry.cjs.js.map +0 -1
- package/dist/cjs/le-turntable.cjs.entry.js +0 -139
- package/dist/cjs/le-turntable.entry.cjs.js.map +0 -1
- package/dist/cjs/loader.cjs.js +0 -13
- package/dist/cjs/loader.cjs.js.map +0 -1
- package/dist/cjs/utils-BeT0iyCQ.js +0 -152
- package/dist/cjs/utils-BeT0iyCQ.js.map +0 -1
- package/dist/collection/collection-manifest.json +0 -26
- package/dist/collection/components/le-box/le-box.default.css +0 -37
- package/dist/collection/components/le-box/le-box.js +0 -614
- package/dist/collection/components/le-box/le-box.js.map +0 -1
- package/dist/collection/components/le-button/le-button.default.css +0 -263
- package/dist/collection/components/le-button/le-button.js +0 -368
- package/dist/collection/components/le-button/le-button.js.map +0 -1
- package/dist/collection/components/le-card/le-card.default.css +0 -74
- package/dist/collection/components/le-card/le-card.js +0 -102
- package/dist/collection/components/le-card/le-card.js.map +0 -1
- package/dist/collection/components/le-checkbox/le-checkbox.css +0 -93
- package/dist/collection/components/le-checkbox/le-checkbox.js +0 -192
- package/dist/collection/components/le-checkbox/le-checkbox.js.map +0 -1
- package/dist/collection/components/le-component/le-component.css +0 -189
- package/dist/collection/components/le-component/le-component.js.map +0 -1
- package/dist/collection/components/le-number-input/le-number-input.css +0 -135
- package/dist/collection/components/le-number-input/le-number-input.js +0 -515
- package/dist/collection/components/le-number-input/le-number-input.js.map +0 -1
- package/dist/collection/components/le-popover/le-popover.css +0 -143
- package/dist/collection/components/le-popover/le-popover.js +0 -693
- package/dist/collection/components/le-popover/le-popover.js.map +0 -1
- package/dist/collection/components/le-popup/le-popup.api.js +0 -101
- package/dist/collection/components/le-popup/le-popup.api.js.map +0 -1
- package/dist/collection/components/le-popup/le-popup.css +0 -222
- package/dist/collection/components/le-popup/le-popup.js +0 -596
- package/dist/collection/components/le-popup/le-popup.js.map +0 -1
- package/dist/collection/components/le-round-progress/le-round-progress.css +0 -34
- package/dist/collection/components/le-round-progress/le-round-progress.js +0 -184
- package/dist/collection/components/le-round-progress/le-round-progress.js.map +0 -1
- package/dist/collection/components/le-slot/le-slot.default.css +0 -222
- package/dist/collection/components/le-slot/le-slot.js.map +0 -1
- package/dist/collection/components/le-stack/le-stack.default.css +0 -37
- package/dist/collection/components/le-stack/le-stack.js +0 -389
- package/dist/collection/components/le-stack/le-stack.js.map +0 -1
- package/dist/collection/components/le-string-input/le-string-input.css +0 -83
- package/dist/collection/components/le-string-input/le-string-input.js +0 -359
- package/dist/collection/components/le-string-input/le-string-input.js.map +0 -1
- package/dist/collection/components/le-text/le-text.default.css +0 -169
- package/dist/collection/components/le-text/le-text.js +0 -475
- package/dist/collection/components/le-text/le-text.js.map +0 -1
- package/dist/collection/components/le-turntable/le-turntable.css +0 -10
- package/dist/collection/components/le-turntable/le-turntable.js +0 -210
- package/dist/collection/components/le-turntable/le-turntable.js.map +0 -1
- package/dist/collection/global/app.js +0 -130
- package/dist/collection/global/app.js.map +0 -1
- package/dist/collection/index.js +0 -15
- package/dist/collection/index.js.map +0 -1
- package/dist/collection/types/blocks.js +0 -115
- package/dist/collection/types/blocks.js.map +0 -1
- package/dist/collection/types/options.js +0 -2
- package/dist/collection/types/options.js.map +0 -1
- package/dist/collection/utils/utils.js +0 -141
- package/dist/collection/utils/utils.js.map +0 -1
- package/dist/components/index.js +0 -127
- package/dist/components/index.js.map +0 -1
- package/dist/components/le-box.js +0 -256
- package/dist/components/le-box.js.map +0 -1
- package/dist/components/le-button.js +0 -9
- package/dist/components/le-button.js.map +0 -1
- package/dist/components/le-button2.js +0 -1408
- package/dist/components/le-button2.js.map +0 -1
- package/dist/components/le-card.js +0 -83
- package/dist/components/le-card.js.map +0 -1
- package/dist/components/le-checkbox.js +0 -9
- package/dist/components/le-checkbox.js.map +0 -1
- package/dist/components/le-component.js +0 -9
- package/dist/components/le-component.js.map +0 -1
- package/dist/components/le-number-input.js +0 -271
- package/dist/components/le-number-input.js.map +0 -1
- package/dist/components/le-popover.js +0 -9
- package/dist/components/le-popover.js.map +0 -1
- package/dist/components/le-popover2.js.map +0 -1
- package/dist/components/le-popup.js +0 -279
- package/dist/components/le-popup.js.map +0 -1
- package/dist/components/le-round-progress.js +0 -135
- package/dist/components/le-round-progress.js.map +0 -1
- package/dist/components/le-slot.js +0 -9
- package/dist/components/le-slot.js.map +0 -1
- package/dist/components/le-stack.js +0 -198
- package/dist/components/le-stack.js.map +0 -1
- package/dist/components/le-string-input.js +0 -9
- package/dist/components/le-string-input.js.map +0 -1
- package/dist/components/le-text.js +0 -398
- package/dist/components/le-text.js.map +0 -1
- package/dist/components/le-turntable.js +0 -164
- package/dist/components/le-turntable.js.map +0 -1
- package/dist/docs.d.ts +0 -443
- package/dist/docs.json +0 -5185
- package/dist/esm/index-D71TXvJa.js +0 -1781
- package/dist/esm/index-D71TXvJa.js.map +0 -1
- package/dist/esm/index.js +0 -106
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/le-box.entry.js.map +0 -1
- package/dist/esm/le-button.le-checkbox.le-component.le-popover.le-slot.le-string-input.entry.js.map +0 -1
- package/dist/esm/le-button_6.entry.js +0 -1192
- package/dist/esm/le-card.entry.js.map +0 -1
- package/dist/esm/le-kit.js +0 -21
- package/dist/esm/le-kit.js.map +0 -1
- package/dist/esm/le-number-input.entry.js.map +0 -1
- package/dist/esm/le-popup.entry.js.map +0 -1
- package/dist/esm/le-round-progress.entry.js.map +0 -1
- package/dist/esm/le-stack.entry.js.map +0 -1
- package/dist/esm/le-text.entry.js.map +0 -1
- package/dist/esm/le-turntable.entry.js.map +0 -1
- package/dist/esm/loader.js +0 -11
- package/dist/esm/loader.js.map +0 -1
- package/dist/esm/utils-CJLZrrdC.js.map +0 -1
- package/dist/index.cjs.js +0 -1
- package/dist/index.js +0 -1
- package/dist/le-kit/le-button.le-checkbox.le-component.le-popover.le-slot.le-string-input.entry.esm.js.map +0 -1
- package/dist/le-kit/p-024a764e.entry.js +0 -2
- package/dist/le-kit/p-024a764e.entry.js.map +0 -1
- package/dist/le-kit/p-073cf0b9.entry.js +0 -2
- package/dist/le-kit/p-073cf0b9.entry.js.map +0 -1
- package/dist/le-kit/p-0955b105.entry.js +0 -2
- package/dist/le-kit/p-0955b105.entry.js.map +0 -1
- package/dist/le-kit/p-18d79ee2.entry.js +0 -2
- package/dist/le-kit/p-18d79ee2.entry.js.map +0 -1
- package/dist/le-kit/p-4b1d3b6d.entry.js +0 -2
- package/dist/le-kit/p-4b1d3b6d.entry.js.map +0 -1
- package/dist/le-kit/p-79d179bd.entry.js +0 -2
- package/dist/le-kit/p-79d179bd.entry.js.map +0 -1
- package/dist/le-kit/p-D71TXvJa.js +0 -3
- package/dist/le-kit/p-D71TXvJa.js.map +0 -1
- package/dist/le-kit/p-c8a9288e.entry.js +0 -2
- package/dist/le-kit/p-c8a9288e.entry.js.map +0 -1
- package/dist/le-kit/p-cfc35bd3.entry.js +0 -2
- package/dist/le-kit/p-cfc35bd3.entry.js.map +0 -1
- package/dist/le-kit/p-d04da1f5.entry.js +0 -2
- package/dist/le-kit/p-d04da1f5.entry.js.map +0 -1
- package/dist/le-kit/p-qIai5-eB.js +0 -2
- package/dist/le-kit/p-qIai5-eB.js.map +0 -1
- package/dist/themes/base.css +0 -89
- package/dist/themes/dark.css +0 -100
- package/dist/themes/default.css +0 -108
- package/dist/themes/gradient.css +0 -100
- package/dist/themes/index.css +0 -413
- package/dist/themes/minimal.css +0 -100
- package/dist/themes/warm.css +0 -100
|
@@ -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
|