le-kit 0.1.15 → 0.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-C3iQZ-Ja.js → index-CHzu3ydp.js} +3 -3
- package/dist/cjs/index-CHzu3ydp.js.map +1 -0
- package/dist/cjs/index.cjs.js +2 -2
- package/dist/cjs/le-box.cjs.entry.js +2 -2
- package/dist/cjs/le-button.le-checkbox.le-collapse.le-component.le-current-heading.le-dropdown-base.le-header.le-popover.le-popup.le-scroll-progress.le-select.le-slot.le-string-input.entry.cjs.js.map +1 -0
- package/dist/cjs/{le-button_7.cjs.entry.js → le-button_13.cjs.entry.js} +1148 -21
- package/dist/cjs/le-card.cjs.entry.js +2 -2
- package/dist/cjs/le-combobox.cjs.entry.js +2 -2
- package/dist/cjs/le-header-placeholder.cjs.entry.js +18 -0
- package/dist/cjs/le-header-placeholder.entry.cjs.js.map +1 -0
- package/dist/cjs/le-kit.cjs.js +2 -2
- package/dist/cjs/le-multiselect.cjs.entry.js +4 -4
- package/dist/cjs/le-number-input.cjs.entry.js +3 -3
- package/dist/cjs/le-round-progress.cjs.entry.js +2 -2
- package/dist/cjs/le-segmented-control.cjs.entry.js +2 -2
- package/dist/cjs/le-stack.cjs.entry.js +3 -3
- package/dist/cjs/le-tab-bar.cjs.entry.js +2 -2
- package/dist/cjs/le-tab-panel.cjs.entry.js +3 -3
- package/dist/cjs/le-tab.cjs.entry.js +3 -3
- package/dist/cjs/le-tabs.cjs.entry.js +4 -4
- package/dist/cjs/le-tag.cjs.entry.js +2 -2
- package/dist/cjs/le-text.cjs.entry.js +2 -2
- package/dist/cjs/le-turntable.cjs.entry.js +2 -2
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/{utils-DjPcLPN9.js → utils-CYOKcOW8.js} +3 -3
- package/dist/cjs/{utils-DjPcLPN9.js.map → utils-CYOKcOW8.js.map} +1 -1
- package/dist/collection/collection-manifest.json +5 -0
- package/dist/collection/components/le-collapse/le-collapse.css +31 -0
- package/dist/collection/components/le-collapse/le-collapse.js +188 -0
- package/dist/collection/components/le-collapse/le-collapse.js.map +1 -0
- package/dist/collection/components/le-combobox/le-combobox.js +1 -1
- package/dist/collection/components/le-component/le-component.js +1 -1
- package/dist/collection/components/le-component/le-component.js.map +1 -1
- package/dist/collection/components/le-current-heading/le-current-heading.css +12 -0
- package/dist/collection/components/le-current-heading/le-current-heading.js +130 -0
- package/dist/collection/components/le-current-heading/le-current-heading.js.map +1 -0
- package/dist/collection/components/le-dropdown-base/le-dropdown-base.css +4 -0
- package/dist/collection/components/le-dropdown-base/le-dropdown-base.js +1 -1
- package/dist/collection/components/le-header/le-header.css +120 -0
- package/dist/collection/components/le-header/le-header.js +508 -0
- package/dist/collection/components/le-header/le-header.js.map +1 -0
- package/dist/collection/components/le-header-placeholder/le-header-placeholder.js +21 -0
- package/dist/collection/components/le-header-placeholder/le-header-placeholder.js.map +1 -0
- package/dist/collection/components/le-multiselect/le-multiselect.js +3 -3
- package/dist/collection/components/le-number-input/le-number-input.js +1 -1
- package/dist/collection/components/le-popover/le-popover.css +10 -0
- package/dist/collection/components/le-popover/le-popover.js +122 -13
- package/dist/collection/components/le-popover/le-popover.js.map +1 -1
- package/dist/collection/components/le-round-progress/le-round-progress.js +1 -1
- package/dist/collection/components/le-scroll-progress/le-scroll-progress.css +29 -0
- package/dist/collection/components/le-scroll-progress/le-scroll-progress.js +186 -0
- package/dist/collection/components/le-scroll-progress/le-scroll-progress.js.map +1 -0
- package/dist/collection/components/le-segmented-control/le-segmented-control.js +1 -1
- package/dist/collection/components/le-select/le-select.js +2 -2
- package/dist/collection/components/le-slot/le-slot.js +1 -1
- package/dist/collection/components/le-stack/le-stack.js +1 -1
- package/dist/collection/components/le-string-input/le-string-input.js +2 -2
- package/dist/collection/components/le-tab/le-tab.js +1 -1
- package/dist/collection/components/le-tab-bar/le-tab-bar.js +1 -1
- package/dist/collection/components/le-tab-panel/le-tab-panel.js +2 -2
- package/dist/collection/components/le-tabs/le-tabs.js +2 -2
- package/dist/collection/components/le-tag/le-tag.js +1 -1
- package/dist/collection/components/le-turntable/le-turntable.js +1 -1
- package/dist/collection/dist/components/assets/custom-elements.json +2029 -965
- package/dist/collection/dist/components/themes/base.css +4 -48
- package/dist/collection/dist/components/themes/index.css +3 -342
- package/dist/components/assets/custom-elements.json +2029 -965
- package/dist/components/index.js.map +1 -1
- package/dist/components/le-box.js +18 -7
- package/dist/components/le-box.js.map +1 -1
- package/dist/components/le-button.js +1 -1
- package/dist/components/le-button2.js +331 -31
- package/dist/components/le-button2.js.map +1 -1
- package/dist/components/le-card.js +18 -7
- package/dist/components/le-card.js.map +1 -1
- package/dist/components/le-checkbox.js +1 -1
- package/dist/components/le-collapse.d.ts +11 -0
- package/dist/components/le-collapse.js +144 -0
- package/dist/components/le-collapse.js.map +1 -0
- package/dist/components/le-combobox.js +15 -10
- package/dist/components/le-combobox.js.map +1 -1
- package/dist/components/le-component.js +1 -1
- package/dist/components/le-current-heading.d.ts +11 -0
- package/dist/components/le-current-heading.js +93 -0
- package/dist/components/le-current-heading.js.map +1 -0
- package/dist/components/le-dropdown-base2.js +2 -2
- package/dist/components/le-dropdown-base2.js.map +1 -1
- package/dist/components/le-header-placeholder.d.ts +11 -0
- package/dist/components/le-header-placeholder.js +37 -0
- package/dist/components/le-header-placeholder.js.map +1 -0
- package/dist/components/le-header.d.ts +11 -0
- package/dist/components/le-header.js +347 -0
- package/dist/components/le-header.js.map +1 -0
- package/dist/components/le-multiselect.js +17 -12
- package/dist/components/le-multiselect.js.map +1 -1
- package/dist/components/le-number-input.js +19 -8
- package/dist/components/le-number-input.js.map +1 -1
- package/dist/components/le-popover2.js +123 -14
- package/dist/components/le-popover2.js.map +1 -1
- package/dist/components/le-popup.js +1 -1
- package/dist/components/le-round-progress.js +1 -1
- package/dist/components/le-scroll-progress.d.ts +11 -0
- package/dist/components/le-scroll-progress.js +142 -0
- package/dist/components/le-scroll-progress.js.map +1 -0
- package/dist/components/le-segmented-control.js +19 -8
- package/dist/components/le-segmented-control.js.map +1 -1
- package/dist/components/le-select.js +1 -263
- package/dist/components/le-select.js.map +1 -1
- package/dist/components/le-slot.js +1 -1
- package/dist/components/le-stack.js +19 -8
- package/dist/components/le-stack.js.map +1 -1
- package/dist/components/le-string-input.js +1 -1
- package/dist/components/le-tab-bar.js +19 -8
- package/dist/components/le-tab-bar.js.map +1 -1
- package/dist/components/le-tab-panel.js +20 -9
- package/dist/components/le-tab-panel.js.map +1 -1
- package/dist/components/le-tab2.js +19 -8
- package/dist/components/le-tab2.js.map +1 -1
- package/dist/components/le-tabs.js +20 -9
- package/dist/components/le-tabs.js.map +1 -1
- package/dist/components/le-tag2.js +19 -8
- package/dist/components/le-tag2.js.map +1 -1
- package/dist/components/le-text.js +18 -7
- package/dist/components/le-text.js.map +1 -1
- package/dist/components/le-turntable.js +1 -1
- package/dist/components/themes/base.css +4 -48
- package/dist/components/themes/index.css +3 -342
- package/dist/docs.json +1089 -30
- package/dist/esm/{index-DzgCnDLJ.js → index-hmBwv43R.js} +3 -3
- package/dist/esm/index-hmBwv43R.js.map +1 -0
- package/dist/esm/index.js +2 -2
- package/dist/esm/le-box.entry.js +2 -2
- package/dist/esm/le-button.le-checkbox.le-collapse.le-component.le-current-heading.le-dropdown-base.le-header.le-popover.le-popup.le-scroll-progress.le-select.le-slot.le-string-input.entry.js.map +1 -0
- package/dist/esm/{le-button_7.entry.js → le-button_13.entry.js} +1143 -22
- package/dist/esm/le-card.entry.js +2 -2
- package/dist/esm/le-combobox.entry.js +2 -2
- package/dist/esm/le-header-placeholder.entry.js +16 -0
- package/dist/esm/le-header-placeholder.entry.js.map +1 -0
- package/dist/esm/le-kit.js +3 -3
- package/dist/esm/le-multiselect.entry.js +4 -4
- package/dist/esm/le-number-input.entry.js +3 -3
- package/dist/esm/le-round-progress.entry.js +2 -2
- package/dist/esm/le-segmented-control.entry.js +2 -2
- package/dist/esm/le-stack.entry.js +3 -3
- package/dist/esm/le-tab-bar.entry.js +2 -2
- package/dist/esm/le-tab-panel.entry.js +3 -3
- package/dist/esm/le-tab.entry.js +3 -3
- package/dist/esm/le-tabs.entry.js +4 -4
- package/dist/esm/le-tag.entry.js +2 -2
- package/dist/esm/le-text.entry.js +2 -2
- package/dist/esm/le-turntable.entry.js +2 -2
- package/dist/esm/loader.js +3 -3
- package/dist/esm/{utils-Dp5xFMCl.js → utils-DRTFlnxz.js} +3 -3
- package/dist/esm/{utils-Dp5xFMCl.js.map → utils-DRTFlnxz.js.map} +1 -1
- package/dist/le-kit/dist/components/assets/custom-elements.json +2029 -965
- package/dist/le-kit/dist/components/themes/base.css +4 -48
- package/dist/le-kit/dist/components/themes/index.css +3 -342
- package/dist/le-kit/index.esm.js +1 -1
- package/dist/le-kit/le-button.le-checkbox.le-collapse.le-component.le-current-heading.le-dropdown-base.le-header.le-popover.le-popup.le-scroll-progress.le-select.le-slot.le-string-input.entry.esm.js.map +1 -0
- package/dist/le-kit/le-header-placeholder.entry.esm.js.map +1 -0
- package/dist/le-kit/le-kit.css +1 -1
- package/dist/le-kit/le-kit.esm.js +1 -1
- package/dist/le-kit/{p-1f55a4a2.entry.js → p-13a4dc1d.entry.js} +2 -2
- package/dist/le-kit/{p-0bd7803f.entry.js → p-1a9e65d0.entry.js} +2 -2
- package/dist/le-kit/p-2708dc65.entry.js +2 -0
- package/dist/le-kit/p-2708dc65.entry.js.map +1 -0
- package/dist/le-kit/p-2b96a5bd.entry.js +2 -0
- package/dist/le-kit/p-2b96a5bd.entry.js.map +1 -0
- package/dist/le-kit/{p-7b180d58.entry.js → p-32cbb683.entry.js} +2 -2
- package/dist/le-kit/{p-71c78784.entry.js → p-476e1886.entry.js} +2 -2
- package/dist/le-kit/p-67d702f9.entry.js +2 -0
- package/dist/le-kit/{p-33612923.entry.js → p-6884e3e8.entry.js} +2 -2
- package/dist/le-kit/{p-6ecdad85.entry.js → p-704ad5e0.entry.js} +2 -2
- package/dist/le-kit/{p-432e8231.entry.js → p-88f9aa40.entry.js} +2 -2
- package/dist/le-kit/{p-91993261.entry.js → p-8dd8a487.entry.js} +2 -2
- package/dist/le-kit/{p-6ee06c44.entry.js → p-97b7658a.entry.js} +2 -2
- package/dist/le-kit/{p-a5d31d40.entry.js → p-c0925e92.entry.js} +2 -2
- package/dist/le-kit/{p-548d130b.entry.js → p-c2494a0d.entry.js} +2 -2
- package/dist/le-kit/{p-3a52c4de.entry.js → p-ded51018.entry.js} +2 -2
- package/dist/le-kit/{p-2c37f174.entry.js → p-e3db7974.entry.js} +2 -2
- package/dist/le-kit/{p-b66fd9e1.entry.js → p-f9b03aec.entry.js} +2 -2
- package/dist/le-kit/p-hmBwv43R.js +3 -0
- package/dist/le-kit/p-hmBwv43R.js.map +1 -0
- package/dist/le-kit/p-txKmCJHv.js +2 -0
- package/dist/le-kit/{p-DaA5gINj.js.map → p-txKmCJHv.js.map} +1 -1
- package/dist/themes/base.css +4 -48
- package/dist/themes/index.css +3 -342
- package/dist/types/components/le-collapse/le-collapse.d.ts +41 -0
- package/dist/types/components/le-current-heading/le-current-heading.d.ts +25 -0
- package/dist/types/components/le-header/le-header.d.ts +115 -0
- package/dist/types/components/le-header-placeholder/le-header-placeholder.d.ts +13 -0
- package/dist/types/components/le-popover/le-popover.d.ts +9 -0
- package/dist/types/components/le-scroll-progress/le-scroll-progress.d.ts +40 -0
- package/dist/types/components.d.ts +518 -0
- package/package.json +1 -1
- package/dist/cjs/index-C3iQZ-Ja.js.map +0 -1
- package/dist/cjs/le-button.le-checkbox.le-component.le-popover.le-popup.le-slot.le-string-input.entry.cjs.js.map +0 -1
- package/dist/cjs/le-dropdown-base.cjs.entry.js +0 -348
- package/dist/cjs/le-dropdown-base.entry.cjs.js.map +0 -1
- package/dist/cjs/le-select.cjs.entry.js +0 -188
- package/dist/cjs/le-select.entry.cjs.js.map +0 -1
- package/dist/esm/index-DzgCnDLJ.js.map +0 -1
- package/dist/esm/le-button.le-checkbox.le-component.le-popover.le-popup.le-slot.le-string-input.entry.js.map +0 -1
- package/dist/esm/le-dropdown-base.entry.js +0 -346
- package/dist/esm/le-dropdown-base.entry.js.map +0 -1
- package/dist/esm/le-select.entry.js +0 -186
- package/dist/esm/le-select.entry.js.map +0 -1
- package/dist/le-kit/le-button.le-checkbox.le-component.le-popover.le-popup.le-slot.le-string-input.entry.esm.js.map +0 -1
- package/dist/le-kit/le-dropdown-base.entry.esm.js.map +0 -1
- package/dist/le-kit/le-select.entry.esm.js.map +0 -1
- package/dist/le-kit/p-4130c60b.entry.js +0 -2
- package/dist/le-kit/p-4130c60b.entry.js.map +0 -1
- package/dist/le-kit/p-DaA5gINj.js +0 -2
- package/dist/le-kit/p-DzgCnDLJ.js +0 -3
- package/dist/le-kit/p-DzgCnDLJ.js.map +0 -1
- package/dist/le-kit/p-beb87e61.entry.js +0 -2
- package/dist/le-kit/p-cc0797b0.entry.js +0 -2
- package/dist/le-kit/p-cc0797b0.entry.js.map +0 -1
- package/dist/le-kit/p-d504a369.entry.js +0 -2
- package/dist/le-kit/p-d504a369.entry.js.map +0 -1
- /package/dist/le-kit/{p-1f55a4a2.entry.js.map → p-13a4dc1d.entry.js.map} +0 -0
- /package/dist/le-kit/{p-0bd7803f.entry.js.map → p-1a9e65d0.entry.js.map} +0 -0
- /package/dist/le-kit/{p-7b180d58.entry.js.map → p-32cbb683.entry.js.map} +0 -0
- /package/dist/le-kit/{p-71c78784.entry.js.map → p-476e1886.entry.js.map} +0 -0
- /package/dist/le-kit/{p-beb87e61.entry.js.map → p-67d702f9.entry.js.map} +0 -0
- /package/dist/le-kit/{p-33612923.entry.js.map → p-6884e3e8.entry.js.map} +0 -0
- /package/dist/le-kit/{p-6ecdad85.entry.js.map → p-704ad5e0.entry.js.map} +0 -0
- /package/dist/le-kit/{p-432e8231.entry.js.map → p-88f9aa40.entry.js.map} +0 -0
- /package/dist/le-kit/{p-91993261.entry.js.map → p-8dd8a487.entry.js.map} +0 -0
- /package/dist/le-kit/{p-6ee06c44.entry.js.map → p-97b7658a.entry.js.map} +0 -0
- /package/dist/le-kit/{p-a5d31d40.entry.js.map → p-c0925e92.entry.js.map} +0 -0
- /package/dist/le-kit/{p-548d130b.entry.js.map → p-c2494a0d.entry.js.map} +0 -0
- /package/dist/le-kit/{p-3a52c4de.entry.js.map → p-ded51018.entry.js.map} +0 -0
- /package/dist/le-kit/{p-2c37f174.entry.js.map → p-e3db7974.entry.js.map} +0 -0
- /package/dist/le-kit/{p-b66fd9e1.entry.js.map → p-f9b03aec.entry.js.map} +0 -0
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
import { h, Host } from "@stencil/core";
|
|
2
|
+
/**
|
|
3
|
+
* Displays scroll progress as a simple bar.
|
|
4
|
+
*
|
|
5
|
+
* If `track-scroll-progress` is present without a value, tracks the full document.
|
|
6
|
+
* If it is a selector string, tracks progress within the matched element.
|
|
7
|
+
*
|
|
8
|
+
* @cssprop --le-scroll-progress-height - Bar height
|
|
9
|
+
* @cssprop --le-scroll-progress-bg - Track background
|
|
10
|
+
* @cssprop --le-scroll-progress-fill - Fill color
|
|
11
|
+
* @cssprop --le-scroll-progress-sticky-top - If sticky, stop position to parent top
|
|
12
|
+
* @cssprop --le-scroll-progress-fixed-top - If fixed, distance from window top
|
|
13
|
+
* @cssprop --le-scroll-progress-fixed-left - If fixed, distance from window left
|
|
14
|
+
* @cssprop --le-scroll-progress-fixed-right - If fixed, distance from window right
|
|
15
|
+
* @cssprop --le-scroll-progress-z - Z-index of the progress bar (1001 by default, above header)
|
|
16
|
+
*
|
|
17
|
+
* @csspart track - Outer track
|
|
18
|
+
* @csspart fill - Inner fill
|
|
19
|
+
*
|
|
20
|
+
* @cmsEditable true
|
|
21
|
+
* @cmsCategory Layout
|
|
22
|
+
*/
|
|
23
|
+
export class LeScrollProgress {
|
|
24
|
+
el;
|
|
25
|
+
/** Boolean or selector string. */
|
|
26
|
+
trackScrollProgress;
|
|
27
|
+
progress = 0;
|
|
28
|
+
rafId = null;
|
|
29
|
+
targetEl = null;
|
|
30
|
+
componentWillLoad() {
|
|
31
|
+
this.updateProgress();
|
|
32
|
+
}
|
|
33
|
+
componentDidLoad() {
|
|
34
|
+
this.resolveTarget();
|
|
35
|
+
this.updateProgress();
|
|
36
|
+
}
|
|
37
|
+
disconnectedCallback() {
|
|
38
|
+
if (this.rafId != null) {
|
|
39
|
+
cancelAnimationFrame(this.rafId);
|
|
40
|
+
this.rafId = null;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
onTrackChange() {
|
|
44
|
+
this.resolveTarget();
|
|
45
|
+
this.updateProgress();
|
|
46
|
+
}
|
|
47
|
+
onScroll() {
|
|
48
|
+
this.scheduleUpdate();
|
|
49
|
+
}
|
|
50
|
+
onResize() {
|
|
51
|
+
this.resolveTarget();
|
|
52
|
+
this.scheduleUpdate(true);
|
|
53
|
+
}
|
|
54
|
+
scheduleUpdate(force = false) {
|
|
55
|
+
if (this.rafId != null && !force)
|
|
56
|
+
return;
|
|
57
|
+
this.rafId = requestAnimationFrame(() => {
|
|
58
|
+
this.rafId = null;
|
|
59
|
+
this.updateProgress();
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
resolveTarget() {
|
|
63
|
+
if (typeof document === 'undefined')
|
|
64
|
+
return;
|
|
65
|
+
const raw = this.trackScrollProgress;
|
|
66
|
+
// If attribute missing, default to enabled (full document).
|
|
67
|
+
// If user explicitly sets 'false', treat as disabled.
|
|
68
|
+
if (raw == null) {
|
|
69
|
+
this.targetEl = null;
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
const val = String(raw).trim();
|
|
73
|
+
if (val === '' || val === 'true') {
|
|
74
|
+
this.targetEl = null;
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
if (val === 'false') {
|
|
78
|
+
this.targetEl = null;
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
try {
|
|
82
|
+
this.targetEl = document.querySelector(val);
|
|
83
|
+
}
|
|
84
|
+
catch {
|
|
85
|
+
this.targetEl = null;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
clamp01(n) {
|
|
89
|
+
return Math.max(0, Math.min(1, n));
|
|
90
|
+
}
|
|
91
|
+
updateProgress() {
|
|
92
|
+
if (typeof window === 'undefined' || typeof document === 'undefined')
|
|
93
|
+
return;
|
|
94
|
+
// If explicitly disabled.
|
|
95
|
+
if (this.trackScrollProgress === 'false') {
|
|
96
|
+
if (this.progress !== 0)
|
|
97
|
+
this.progress = 0;
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
const scrollY = window.scrollY || 0;
|
|
101
|
+
let p = 0;
|
|
102
|
+
if (this.targetEl) {
|
|
103
|
+
const rect = this.targetEl.getBoundingClientRect();
|
|
104
|
+
const top = scrollY + rect.top;
|
|
105
|
+
const height = rect.height;
|
|
106
|
+
const viewport = window.innerHeight || 1;
|
|
107
|
+
const denom = Math.max(1, height - viewport);
|
|
108
|
+
p = this.clamp01((scrollY - top) / denom);
|
|
109
|
+
}
|
|
110
|
+
else {
|
|
111
|
+
const doc = document.documentElement;
|
|
112
|
+
const denom = Math.max(1, doc.scrollHeight - doc.clientHeight);
|
|
113
|
+
p = this.clamp01(scrollY / denom);
|
|
114
|
+
}
|
|
115
|
+
const next = Math.round(p * 1000) / 1000;
|
|
116
|
+
if (next !== this.progress)
|
|
117
|
+
this.progress = next;
|
|
118
|
+
}
|
|
119
|
+
render() {
|
|
120
|
+
const width = `${this.progress * 100}%`;
|
|
121
|
+
return (h(Host, { key: '46e7659497b80795c79365b97813cf57d517f48f' }, h("div", { key: '6e42f3479a1081df5355fb229902e9ee8c0a8918', class: "track", part: "track", "aria-hidden": "true" }, h("div", { key: '81cbe2ec0fc43a14b8bc0192b1f901be9c6cba3a', class: "fill", part: "fill", style: { width } }))));
|
|
122
|
+
}
|
|
123
|
+
static get is() { return "le-scroll-progress"; }
|
|
124
|
+
static get encapsulation() { return "shadow"; }
|
|
125
|
+
static get originalStyleUrls() {
|
|
126
|
+
return {
|
|
127
|
+
"$": ["le-scroll-progress.css"]
|
|
128
|
+
};
|
|
129
|
+
}
|
|
130
|
+
static get styleUrls() {
|
|
131
|
+
return {
|
|
132
|
+
"$": ["le-scroll-progress.css"]
|
|
133
|
+
};
|
|
134
|
+
}
|
|
135
|
+
static get properties() {
|
|
136
|
+
return {
|
|
137
|
+
"trackScrollProgress": {
|
|
138
|
+
"type": "string",
|
|
139
|
+
"mutable": false,
|
|
140
|
+
"complexType": {
|
|
141
|
+
"original": "string",
|
|
142
|
+
"resolved": "string",
|
|
143
|
+
"references": {}
|
|
144
|
+
},
|
|
145
|
+
"required": false,
|
|
146
|
+
"optional": true,
|
|
147
|
+
"docs": {
|
|
148
|
+
"tags": [],
|
|
149
|
+
"text": "Boolean or selector string."
|
|
150
|
+
},
|
|
151
|
+
"getter": false,
|
|
152
|
+
"setter": false,
|
|
153
|
+
"reflect": true,
|
|
154
|
+
"attribute": "track-scroll-progress"
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
}
|
|
158
|
+
static get states() {
|
|
159
|
+
return {
|
|
160
|
+
"progress": {}
|
|
161
|
+
};
|
|
162
|
+
}
|
|
163
|
+
static get elementRef() { return "el"; }
|
|
164
|
+
static get watchers() {
|
|
165
|
+
return [{
|
|
166
|
+
"propName": "trackScrollProgress",
|
|
167
|
+
"methodName": "onTrackChange"
|
|
168
|
+
}];
|
|
169
|
+
}
|
|
170
|
+
static get listeners() {
|
|
171
|
+
return [{
|
|
172
|
+
"name": "scroll",
|
|
173
|
+
"method": "onScroll",
|
|
174
|
+
"target": "window",
|
|
175
|
+
"capture": false,
|
|
176
|
+
"passive": true
|
|
177
|
+
}, {
|
|
178
|
+
"name": "resize",
|
|
179
|
+
"method": "onResize",
|
|
180
|
+
"target": "window",
|
|
181
|
+
"capture": false,
|
|
182
|
+
"passive": true
|
|
183
|
+
}];
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
//# sourceMappingURL=le-scroll-progress.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"le-scroll-progress.js","sourceRoot":"","sources":["../../../src/components/le-scroll-progress/le-scroll-progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\n/**\n * Displays scroll progress as a simple bar.\n *\n * If `track-scroll-progress` is present without a value, tracks the full document.\n * If it is a selector string, tracks progress within the matched element.\n *\n * @cssprop --le-scroll-progress-height - Bar height\n * @cssprop --le-scroll-progress-bg - Track background\n * @cssprop --le-scroll-progress-fill - Fill color\n * @cssprop --le-scroll-progress-sticky-top - If sticky, stop position to parent top\n * @cssprop --le-scroll-progress-fixed-top - If fixed, distance from window top\n * @cssprop --le-scroll-progress-fixed-left - If fixed, distance from window left\n * @cssprop --le-scroll-progress-fixed-right - If fixed, distance from window right\n * @cssprop --le-scroll-progress-z - Z-index of the progress bar (1001 by default, above header)\n *\n * @csspart track - Outer track\n * @csspart fill - Inner fill\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n tag: 'le-scroll-progress',\n styleUrl: 'le-scroll-progress.css',\n shadow: true,\n})\nexport class LeScrollProgress {\n @Element() el: HTMLElement;\n\n /** Boolean or selector string. */\n @Prop({ attribute: 'track-scroll-progress', reflect: true }) trackScrollProgress?: string;\n\n @State() private progress: number = 0;\n\n private rafId: number | null = null;\n private targetEl: Element | null = null;\n\n componentWillLoad() {\n this.updateProgress();\n }\n\n componentDidLoad() {\n this.resolveTarget();\n this.updateProgress();\n }\n\n disconnectedCallback() {\n if (this.rafId != null) {\n cancelAnimationFrame(this.rafId);\n this.rafId = null;\n }\n }\n\n @Watch('trackScrollProgress')\n protected onTrackChange() {\n this.resolveTarget();\n this.updateProgress();\n }\n\n @Listen('scroll', { target: 'window', passive: true })\n protected onScroll() {\n this.scheduleUpdate();\n }\n\n @Listen('resize', { target: 'window', passive: true })\n protected onResize() {\n this.resolveTarget();\n this.scheduleUpdate(true);\n }\n\n private scheduleUpdate(force: boolean = false) {\n if (this.rafId != null && !force) return;\n this.rafId = requestAnimationFrame(() => {\n this.rafId = null;\n this.updateProgress();\n });\n }\n\n private resolveTarget() {\n if (typeof document === 'undefined') return;\n const raw = this.trackScrollProgress;\n\n // If attribute missing, default to enabled (full document).\n // If user explicitly sets 'false', treat as disabled.\n if (raw == null) {\n this.targetEl = null;\n return;\n }\n\n const val = String(raw).trim();\n if (val === '' || val === 'true') {\n this.targetEl = null;\n return;\n }\n\n if (val === 'false') {\n this.targetEl = null;\n return;\n }\n\n try {\n this.targetEl = document.querySelector(val);\n } catch {\n this.targetEl = null;\n }\n }\n\n private clamp01(n: number) {\n return Math.max(0, Math.min(1, n));\n }\n\n private updateProgress() {\n if (typeof window === 'undefined' || typeof document === 'undefined') return;\n\n // If explicitly disabled.\n if (this.trackScrollProgress === 'false') {\n if (this.progress !== 0) this.progress = 0;\n return;\n }\n\n const scrollY = window.scrollY || 0;\n\n let p = 0;\n\n if (this.targetEl) {\n const rect = (this.targetEl as HTMLElement).getBoundingClientRect();\n const top = scrollY + rect.top;\n const height = rect.height;\n const viewport = window.innerHeight || 1;\n\n const denom = Math.max(1, height - viewport);\n p = this.clamp01((scrollY - top) / denom);\n } else {\n const doc = document.documentElement;\n const denom = Math.max(1, doc.scrollHeight - doc.clientHeight);\n p = this.clamp01(scrollY / denom);\n }\n\n const next = Math.round(p * 1000) / 1000;\n if (next !== this.progress) this.progress = next;\n }\n\n render() {\n const width = `${this.progress * 100}%`;\n\n return (\n <Host>\n <div class=\"track\" part=\"track\" aria-hidden=\"true\">\n <div class=\"fill\" part=\"fill\" style={{ width }} />\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -236,7 +236,7 @@ export class LeSegmentedControl {
|
|
|
236
236
|
'full-width': fullWidth,
|
|
237
237
|
'disabled': disabled,
|
|
238
238
|
};
|
|
239
|
-
return (h(Host, { key: '
|
|
239
|
+
return (h(Host, { key: '0bd6c571955af391aa13fd5096cb86f96d1715d9', class: `overflow-${this.overflow}` }, h("le-component", { key: 'cfdcd825987830613c99947731039222bffa710c', component: "le-segmented-control" }, h("div", { key: '80828925d12a2da95764b41b926bd048de409e99', class: classes, ref: el => (this.containerRef = el), role: "radiogroup", part: "container", onKeyDown: this.handleKeyDown, tabIndex: 0 }, segmentConfigs.map(option => {
|
|
240
240
|
const optValue = this.getOptionValue(option);
|
|
241
241
|
const isSelected = optValue === value;
|
|
242
242
|
const isDisabled = option.disabled || disabled;
|
|
@@ -192,13 +192,13 @@ export class LeSelect {
|
|
|
192
192
|
}
|
|
193
193
|
render() {
|
|
194
194
|
const hasValue = this.selectedOption !== undefined;
|
|
195
|
-
return (h("le-component", { key: '
|
|
195
|
+
return (h("le-component", { key: 'f41bf4f086925b6b37a0131a51e4f7e354797ed5', component: "le-select" }, h("le-dropdown-base", { key: '08db701f6b1f7e2c428ea0cc9ee4046c22759757', ref: el => (this.dropdownEl = el), options: this.parsedOptions, value: this.value, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose, fullWidth: this.fullWidth }, h("le-button", { key: 'f994667c5360905a9e6340f0f0331bea55523418', variant: this.variant && this.variant !== 'default' ? this.variant : 'outlined', slot: "trigger", align: "space-between", class: {
|
|
196
196
|
'select-trigger': true,
|
|
197
197
|
'has-value': hasValue,
|
|
198
198
|
'is-open': this.open,
|
|
199
199
|
}, mode: "default", size: this.size, disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, fullWidth: this.fullWidth, iconStart: hasValue && this.selectedOption?.iconStart
|
|
200
200
|
? this.renderIcon(this.selectedOption.iconStart)
|
|
201
|
-
: null, iconEnd: h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M4 6l4 4 4-4" })) }, h("span", { key: '
|
|
201
|
+
: null, iconEnd: h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M4 6l4 4 4-4" })) }, h("span", { key: 'c807e00d21193e558dcf1b601c4aa5f78144fd14', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (h("div", { key: 'c285d28f7b0093580484b8d077c4f2ddd014aa2e', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: '1dd31e5840a29e3a7e181c80182c20ea5ca28bcb', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && h("input", { key: '0acb27fafae47b56808e1b1ee20e45c7cb0cfa3e', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
|
|
202
202
|
}
|
|
203
203
|
static get is() { return "le-select"; }
|
|
204
204
|
static get encapsulation() { return "shadow"; }
|
|
@@ -343,7 +343,7 @@ export class LeSlot {
|
|
|
343
343
|
render() {
|
|
344
344
|
const displayLabel = this.label || this.name;
|
|
345
345
|
// Always render the same structure, CSS handles visibility via .admin-mode class
|
|
346
|
-
return (h(Host, { key: '
|
|
346
|
+
return (h(Host, { key: '938f14c8d8e46d834031cbfab6756a55bc59307d', class: {
|
|
347
347
|
'admin-mode': this.adminMode,
|
|
348
348
|
'invalid-html': !this.isValidHtml,
|
|
349
349
|
}, role: this.adminMode ? 'region' : undefined, "aria-label": this.adminMode ? `Slot: ${displayLabel}` : undefined, "data-slot-name": this.name, "data-slot-type": this.type, "data-allowed": this.allowedComponents, "data-multiple": this.multiple, "data-required": this.required }, this.adminMode ? (h("div", { class: "le-slot-container" }, h("div", { class: classnames('le-slot-header', {
|
|
@@ -134,7 +134,7 @@ export class LeStack {
|
|
|
134
134
|
});
|
|
135
135
|
// Slot style for admin mode - make items display in the same direction
|
|
136
136
|
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()};`;
|
|
137
|
-
return (h("le-component", { key: '
|
|
137
|
+
return (h("le-component", { key: '58d38914e8459297766be58844c271aac0f3b0b5', component: "le-stack", hostClass: hostClass }, h("div", { key: '56ceceb3eac3ec5c6647719d0d47766eb7ba7b5d', class: "stack", part: "stack", style: style }, h("le-slot", { key: '9a75e3f6ae8b05dee32a250d3a4607ff2498c533', 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 }, h("slot", { key: 'e0b9d135ce8cc312bee002ef78772f62d6e0d416' })))));
|
|
138
138
|
}
|
|
139
139
|
static get is() { return "le-stack"; }
|
|
140
140
|
static get encapsulation() { return "shadow"; }
|
|
@@ -99,11 +99,11 @@ export class LeStringInput {
|
|
|
99
99
|
ev.stopPropagation();
|
|
100
100
|
};
|
|
101
101
|
render() {
|
|
102
|
-
return (h("le-component", { key: '
|
|
102
|
+
return (h("le-component", { key: 'c51b121a5ff8458f80de07929467d92cff44de9b', component: "le-string-input", hostClass: classnames({ disabled: this.disabled }) }, h("div", { key: '450fa313236401fcb762267f426d0556f90ef200', class: "le-input-wrapper" }, this.label && (h("label", { key: 'c01ed376e563f472d84c9943a4a542c1ec2cb39c', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: 'e41a98671f3bc61e06f66c773536967d60c97df0', class: "le-input-container", part: "container" }, this.iconStart && h("span", { key: 'c6eb682444e091378281b7a2e739ef872ca28973', class: "icon-start" }, this.iconStart), h("input", { key: 'bc7f9055dcae290e132f4c91887e5f90427209d4', ref: el => {
|
|
103
103
|
if (this.inputRef) {
|
|
104
104
|
this.inputRef(el);
|
|
105
105
|
}
|
|
106
|
-
}, id: this.name, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }), this.iconEnd && h("span", { key: '
|
|
106
|
+
}, id: this.name, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }), this.iconEnd && h("span", { key: '3470d5c95e208e52b1913369d734e1d741164633', class: "icon-end" }, this.iconEnd)), !this.hideDescription && (h("div", { key: '97a123be35907f950c7480352cee29c32e486fe4', class: "le-input-description" }, h("le-slot", { key: '490c2a425b3b58f050aced5dcffc530f624c0957', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: 'a34ff8c6300a36d6c65ca5d9a77352459f1c85cc', name: "description" })))))));
|
|
107
107
|
}
|
|
108
108
|
static get is() { return "le-string-input"; }
|
|
109
109
|
static get encapsulation() { return "shadow"; }
|
|
@@ -135,7 +135,7 @@ export class LeTab {
|
|
|
135
135
|
const attrs = this.href
|
|
136
136
|
? { href: this.href, target: this.target, role: 'button' }
|
|
137
137
|
: { disabled: this.disabled };
|
|
138
|
-
return (h(Host, { key: '
|
|
138
|
+
return (h(Host, { key: '6632a9b9df74dab0cb6bd638f35b55cc4a573e0e' }, h("le-component", { key: '3ed311094833d6e8819c35b1eaf69456dcb47773', component: "le-tab" }, h(TagType, { key: 'b9a3ca7a85e228da9a25ff9fc14a79cd9b4ffc41', class: classnames('le-tab-container', `le-tab-align-${this.align}`, classes), part: "button", ...attrs, onClick: this.handleClick, tabIndex: this.focusable ? 0 : -1 }, this.icon !== undefined ? (h("div", { class: "icon-only" }, h("div", { class: "icon" }, this.icon), this.showLabel && h("span", { class: "icon-label" }, this.label))) : (h(Fragment, null, h("span", { class: "le-tab-label" }, this.iconStart && (h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), h("le-slot", { name: "", description: "Tab text", type: "text", class: "content", part: "content" }, h("slot", null, this.label))), this.iconEnd && (h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
|
|
139
139
|
}
|
|
140
140
|
static get is() { return "le-tab"; }
|
|
141
141
|
static get encapsulation() { return "shadow"; }
|
|
@@ -236,7 +236,7 @@ export class LeTabBar {
|
|
|
236
236
|
'position-top': this.position === 'top',
|
|
237
237
|
'position-bottom': this.position === 'bottom',
|
|
238
238
|
};
|
|
239
|
-
return (h(Host, { key: '
|
|
239
|
+
return (h(Host, { key: 'ab97582e8f936fc6617b1034c325bd6fbbf97f12', class: classes }, h("le-component", { key: '9dcabb60dce5600876ae7cc03afa348adf188cdd', component: "le-tab-bar" }, h("div", { key: 'd38a1ad9942045d3fcd0f5eaf84f221c7e34c21a', class: "tablist", role: "tablist", "aria-orientation": "horizontal", part: "tablist", onKeyDown: this.handleKeyDown }, h("le-slot", { key: 'cd8da212dd2c4baa2beea2168ed6431b8748297f', name: "", type: "slot", allowedComponents: "le-tab" }, tabConfigs.map(tab => {
|
|
240
240
|
const value = this.getTabValue(tab);
|
|
241
241
|
const isSelected = value === selected;
|
|
242
242
|
return (h("le-tab", { key: value, class: "tab", role: "tab", variant: "icon-only", label: tab.label, value: tab.value, icon: tab.icon, href: tab.href, selected: isSelected, disabled: tab.disabled, showLabel: this.showLabels, size: size, part: isSelected ? 'tab tab-active' : 'tab', "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : undefined, tabIndex: -1, onClick: () => this.handleTabClick(tab) }, h("span", { class: "tab-label" }, tab.label)));
|
|
@@ -88,11 +88,11 @@ export class LeTabPanel {
|
|
|
88
88
|
}
|
|
89
89
|
render() {
|
|
90
90
|
const shouldRender = this.shouldRenderContent();
|
|
91
|
-
return (h("le-component", { key: '
|
|
91
|
+
return (h("le-component", { key: '7535af661c66a3e0f895b43c34ec2003a20977f9', component: "le-tab-panel" }, h("div", { key: '611858453c00a66a0510a570b0198594f6c19330', class: {
|
|
92
92
|
'tab-panel': true,
|
|
93
93
|
'active': this.active,
|
|
94
94
|
'lazy-hidden': this.lazy && !this.active,
|
|
95
|
-
}, role: "tabpanel", "aria-hidden": !this.active ? 'true' : undefined, tabIndex: this.active ? 0 : -1 }, h("le-slot", { key: '
|
|
95
|
+
}, role: "tabpanel", "aria-hidden": !this.active ? 'true' : undefined, tabIndex: this.active ? 0 : -1 }, h("le-slot", { key: 'e154ef618cecb4d21bde2a383c557515dd9f4ca1', name: "", description: "Tab panel content", type: "slot" }, shouldRender && h("slot", { key: '0c4b8905c656b0c14c21216c7c1cbc1eb0696ead' })))));
|
|
96
96
|
}
|
|
97
97
|
static get is() { return "le-tab-panel"; }
|
|
98
98
|
static get encapsulation() { return "shadow"; }
|
|
@@ -291,7 +291,7 @@ export class LeTabs {
|
|
|
291
291
|
: this.position === 'start'
|
|
292
292
|
? 'top'
|
|
293
293
|
: 'bottom';
|
|
294
|
-
return (h("le-component", { key: '
|
|
294
|
+
return (h("le-component", { key: '27955ca3e6823a430cba21b8a3830dac4cbf23a9', component: "le-tabs", hostClass: classnames(classes) }, h("div", { key: 'f6f732307d85bd778fc5c0fc002a47aeb2c1e269', class: classes }, h("div", { key: '96908f34cd62d42915a80f3197fd32ef72a8ba93', class: {
|
|
295
295
|
'tablist': true,
|
|
296
296
|
'wrap-tabs': this.wrap,
|
|
297
297
|
[`overflow-${this.overflow}`]: true,
|
|
@@ -300,7 +300,7 @@ export class LeTabs {
|
|
|
300
300
|
const tabId = `tab-${config.value}`;
|
|
301
301
|
const panelId = `panel-${config.value}`;
|
|
302
302
|
return (h("le-tab", { key: config.value, id: tabId, class: "tab", mode: "default", variant: this.variant, selected: isSelected, disabled: config.disabled, size: this.size, position: tabPosition, align: this.orientation === 'vertical' ? 'start' : 'center', role: "tab", part: isSelected ? 'tab tab-active' : 'tab', "aria-selected": isSelected ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": config.disabled ? 'true' : undefined, focusable: false, onClick: () => this.handleTabClick(config), iconStart: config.iconStart, iconEnd: config.iconEnd }, h("span", { class: "tab-label" }, config.label)));
|
|
303
|
-
})), h("div", { key: '
|
|
303
|
+
})), h("div", { key: '69a47db5fdad33cdcb17a4f21b8731c80e519933', class: "panels", part: "panels" }, isDeclarativeMode ? (
|
|
304
304
|
// Declarative mode - render slot for le-tab-panel children
|
|
305
305
|
h("le-slot", { name: "", description: "Tab panels", type: "slot", allowedComponents: "le-tab-panel" }, h("slot", null))) : (
|
|
306
306
|
// Programmatic mode - render named slots
|
|
@@ -89,7 +89,7 @@ export class LeTag {
|
|
|
89
89
|
return h("span", { class: "tag-icon" }, this.icon);
|
|
90
90
|
}
|
|
91
91
|
render() {
|
|
92
|
-
return (h("le-component", { key: '
|
|
92
|
+
return (h("le-component", { key: '039a0c9047d2b3aafea7e5340fec600d43679577', component: "le-tag" }, h("span", { key: '00eb650809242e92285270706d5937695285c66f', class: "tag" }, this.renderIcon(), h("span", { key: 'c598e73cf83de625fc7e09a49fd575d0a3e1a676', class: "tag-label" }, h("le-slot", { key: '506ad34362bfa251f32d15f49545c5ac3bddcd62', name: "", tag: "span", type: "text" }, h("slot", { key: '746f842b4538779b2219bcc21391e84c51fa9fc1' }, this.label))), this.dismissible && (h("button", { key: 'b3eb8d9e5dfbbae6cb8f6ce5cadab1d6486db96a', type: "button", class: "tag-dismiss", onClick: this.handleDismiss, disabled: this.disabled, "aria-label": "Remove" }, h("svg", { key: '7564a77f831b1f9999998e93a1043849870d9024', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'e67c386183d967aeb2d6013b3a0bbc3603c2636d', d: "M4 4l8 8M12 4l-8 8" })))))));
|
|
93
93
|
}
|
|
94
94
|
static get is() { return "le-tag"; }
|
|
95
95
|
static get encapsulation() { return "shadow"; }
|
|
@@ -120,7 +120,7 @@ export class LeTurntable {
|
|
|
120
120
|
this.el.style.transform = `rotate(${angle}deg)`;
|
|
121
121
|
}
|
|
122
122
|
render() {
|
|
123
|
-
return (h("div", { key: '
|
|
123
|
+
return (h("div", { key: '6968cf3f13586bbbf981152567d280e1b72412a7', class: "turntable", onMouseDown: this.handleMouseDown.bind(this) }, h("slot", { key: '673eb5c7d2ad2ba46e703c0eb0cd7f520b961204' })));
|
|
124
124
|
}
|
|
125
125
|
static get is() { return "le-turntable"; }
|
|
126
126
|
static get encapsulation() { return "shadow"; }
|