@brytdesigns/web-component-keen-slider-scrollbar 1.1.9 → 3.0.0

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 (13) hide show
  1. package/dist/main/components/index.js +1 -4
  2. package/dist/main/components/keen-slider-scrollbar.js +228 -249
  3. package/dist/main/components/keen-slider-scrollbar.js.map +1 -1
  4. package/dist/main/index.d.ts +10 -0
  5. package/dist/main/index.js +11 -12
  6. package/dist/main/index.js.map +1 -1
  7. package/dist/main/utils.js +35 -41
  8. package/dist/main/utils.js.map +1 -1
  9. package/dist/styles.css +106 -87
  10. package/package.json +11 -11
  11. package/dist/esm/index.js +0 -324
  12. package/dist/esm/index.js.map +0 -1
  13. package/dist/main/components/index.js.map +0 -1
package/dist/main/components/index.js CHANGED
@@ -1,4 +1 @@
1
- import * as keenSliderScrollbar_js from './keen-slider-scrollbar.js';
2
- export { keenSliderScrollbar_js as KeenSliderScrollbar };
3
- //# sourceMappingURL=index.js.map
4
- //# sourceMappingURL=index.js.map
1
+ import "./keen-slider-scrollbar.js";
package/dist/main/components/keen-slider-scrollbar.js CHANGED
@@ -1,252 +1,231 @@
1
- import html from 'solid-js/html';
2
- import { createSignal, createMemo, on, onCleanup, createEffect, batch, Show, For } from 'solid-js';
3
- import { withKeenSliderElementContext } from '@brytdesigns/web-component-keen-slider';
4
- import { Draggable } from '@neodrag/vanilla';
5
- import { getMaxSlides, srOnly, findClosestBreakpoint, calculateMidpointPositionFromBP, getRelativeBreakpoint, constrain } from '../utils.js';
6
- import { motionValue, transformValue, animate } from 'motion';
7
-
8
- const Name = `keen-slider-scrollbar`;
9
- const Component = (props, { element }) => {
10
- if (!props.target)
11
- return console.warn(
12
- `${Name}: Needs a proper target in order to properly extend a keen slider.`
13
- );
14
- const [slider, setSlider] = createSignal();
15
- const [thumb, setThumb] = createSignal(null);
16
- const positionX = motionValue(0);
17
- const positionY = motionValue(0);
18
- const position = transformValue(() => ({
19
- x: positionX.get(),
20
- y: positionY.get()
21
- }));
22
- const [maxIdx, setMaxIdx] = createSignal(
23
- slider()?.track?.details?.maxIdx || 0
24
- );
25
- const [currentIdx, setCurrentIdx] = createSignal(0);
26
- let breakpointsContainer = null;
27
- const maxSlides = createMemo(
28
- on(maxIdx, (maxIdx2) => {
29
- if (!maxIdx2) return 0;
30
- const s = slider();
31
- if (!s) return 0;
32
- return getMaxSlides(s);
33
- })
34
- );
35
- const draggable = createMemo(
36
- on(thumb, (thumb2) => {
37
- if (!thumb2) return null;
38
- const instance = new Draggable(thumb2, {
39
- axis: props.isVertical ? "y" : "x",
40
- bounds: "parent",
41
- gpuAcceleration: true,
42
- position: {
43
- x: positionX.get(),
44
- y: positionY.get()
45
- },
46
- transform({ offsetX, offsetY }) {
47
- if (props.isVertical) return `translate3d(-50%, ${offsetY}px, 0)`;
48
- return `translate3d(${offsetX}px, -50%, 0)`;
49
- },
50
- onDrag: ({ offsetX, offsetY }) => {
51
- positionY.set(offsetY);
52
- positionX.set(offsetX);
53
- },
54
- onDragEnd: (position2) => {
55
- if (!breakpointsContainer) return;
56
- const s = slider();
57
- if (!s) return;
58
- const bp = findClosestBreakpoint(
59
- position2,
60
- breakpointsContainer.children,
61
- element,
62
- thumb2
63
- );
64
- if (!bp) return;
65
- const p = calculateMidpointPositionFromBP(bp, element, thumb2);
66
- animateScrollbarPosition(p);
67
- updateSliderPosition(bp, s);
68
- setCurrentIdx(parseInt(bp.getAttribute("data-index") || "0"));
69
- },
70
- ignoreMultitouch: true
71
- });
72
- const unsub = position.on("change", (latest) => {
73
- instance.updateOptions({
74
- position: latest
75
- });
76
- });
77
- onCleanup(unsub);
78
- return instance;
79
- })
80
- );
81
- createEffect(
82
- on(draggable, (draggable2) => {
83
- if (!draggable2) return;
84
- onCleanup(() => {
85
- draggable2.destroy();
86
- });
87
- })
88
- );
89
- createEffect(
90
- on(slider, (slider2) => {
91
- if (!slider2) return;
92
- element.setAttribute(
93
- "is-vertical",
94
- `${slider2.options?.vertical || false}`
95
- );
96
- function handleDetailsChanged(slider3) {
97
- element.setAttribute(
98
- "is-vertical",
99
- `${slider3.options?.vertical || false}`
100
- );
101
- }
102
- slider2.on("detailsChanged", handleDetailsChanged);
103
- return onCleanup(() => {
104
- slider2.on("detailsChanged", handleDetailsChanged, true);
105
- });
106
- })
107
- );
108
- createEffect(
109
- on(maxSlides, (maxSlides2) => {
110
- const s = slider();
111
- element.style.setProperty(`--${Name}--total-slides`, `${maxSlides2}`);
112
- if (!s) return;
113
- if (!maxSlides2) return;
114
- function updateDetails(slider2) {
115
- setMaxIdx(slider2.track.details.maxIdx);
116
- }
117
- function handleUpdate(slider2) {
118
- if (!breakpointsContainer) return;
119
- const bp = breakpointsContainer.children[currentIdx()];
120
- if (!bp) return;
121
- const t = thumb();
122
- if (!t) return;
123
- const p = calculateMidpointPositionFromBP(bp, element, t);
124
- positionY.set(p.y);
125
- positionX.set(p.x);
126
- setMaxIdx(slider2.track.details.maxIdx);
127
- }
128
- s.on("created", handleUpdate);
129
- s.on("detailsChanged", updateDetails);
130
- s.on("updated", handleUpdate);
131
- return onCleanup(() => {
132
- s.on("created", handleUpdate, true);
133
- s.on("detailsChanged", updateDetails, true);
134
- s.on("updated", handleUpdate, true);
135
- });
136
- })
137
- );
138
- createEffect(
139
- on(
140
- () => ({ thumb: thumb(), slider: slider() }),
141
- ({ thumb: thumb2, slider: slider2 }) => {
142
- if (!thumb2 || !slider2) return;
143
- function updateScrollbarPosition(slider3) {
144
- if (!breakpointsContainer) return;
145
- const bp = getRelativeBreakpoint(
146
- slider3,
147
- breakpointsContainer.children
148
- );
149
- if (!bp) return;
150
- if (!thumb2) return;
151
- const position2 = calculateMidpointPositionFromBP(bp, element, thumb2);
152
- animateScrollbarPosition(position2);
153
- setCurrentIdx(parseInt(bp.getAttribute("data-index") || "0"));
154
- }
155
- slider2.on("slideChanged", updateScrollbarPosition);
156
- }
157
- )
158
- );
159
- createEffect(
160
- on(
161
- () => ({ thumb: thumb(), slider: slider() }),
162
- ({ thumb: thumb2, slider: slider2 }) => {
163
- if (!thumb2 || !slider2) return;
164
- function handleClick(e) {
165
- const bp = e.target;
166
- if (!bp) return;
167
- if (!bp.classList.contains(`${Name}__breakpoint`)) return;
168
- setCurrentIdx(parseInt(bp.getAttribute("data-index") || "0"));
169
- updateSliderPosition(bp, slider2);
170
- }
171
- element.addEventListener("click", handleClick);
172
- return onCleanup(() => {
173
- element.removeEventListener("click", handleClick);
174
- });
175
- }
176
- )
177
- );
178
- createEffect(
179
- on(maxIdx, (maxIdx2) => {
180
- if (maxIdx2 === 0) element.setAttribute("is-hidden", `${true}`);
181
- else element.setAttribute("is-hidden", `${false}`);
182
- })
183
- );
184
- withKeenSliderElementContext(
185
- () => {
186
- const selector = props.target;
187
- return () => {
188
- let targetEl = element;
189
- if (props.target) targetEl = document.querySelector(selector);
190
- if (targetEl?.tagName !== "KEEN-SLIDER")
191
- targetEl = targetEl.querySelector("keen-slider");
192
- return targetEl;
193
- };
194
- },
195
- () => null,
196
- ([_, { addPlugin }]) => {
197
- const removePlugin = addPlugin((slider2) => {
198
- setSlider(slider2);
199
- slider2.on("created", function(slider3) {
200
- setMaxIdx(slider3.track.details.maxIdx);
201
- });
202
- slider2.on(
203
- "destroyed",
204
- () => batch(() => {
205
- setMaxIdx(0);
206
- setSlider();
207
- setThumb(null);
208
- })
209
- );
210
- });
211
- onCleanup(removePlugin);
212
- }
213
- );
214
- function animateScrollbarPosition(p) {
215
- animate(positionX, p.x, { type: "tween" });
216
- animate(positionY, p.y, { type: "tween" });
217
- }
218
- function updateSliderPosition(bp, slider2) {
219
- const idx = constrain(
220
- parseInt(bp.getAttribute("data-index") || "0") * (slider2?.options?.slides?.perScroll || 1),
221
- 0,
222
- slider2.track.details.maxIdx
223
- );
224
- slider2.moveToIdx(idx);
225
- }
226
- return html`
227
- <${Show} when=${() => maxSlides() > 1}>
228
- <div
229
- class="${Name}__thumb"
230
- ref=${(el) => setThumb(el)}
231
- ></div>
232
- <ul
233
- class="${Name}__breakpoints"
234
- ref=${(el) => breakpointsContainer = el}
235
- >
236
- <${For} each=${() => Array(maxSlides()).fill(0)}>
237
- ${(_, idx) => html`
238
- <li class="${Name}__breakpoint" data-index=${idx}>
239
- <button type="button" style=${srOnly}>
240
- <span style=${srOnly}> Breakpoint ${idx} </span>
241
- </button>
242
- </li>
243
- `}
244
- <//>
245
- </ul>
246
- <//>
247
- `;
1
+ import { calculateMidpointPositionFromBP, constrain, findClosestBreakpoint, getMaxSlides, getRelativeBreakpoint } from "../utils.js";
2
+ import { createGuardedEffect, srOnly } from "@brytdesigns/web-component-core/utils";
3
+ import { For, Show, createComponent, effect, insert, readShallow, ref, setAttribute, style, template } from "@solidjs/web";
4
+ import { useKeenSliderAt } from "@brytdesigns/web-component-keen-slider";
5
+ import { Draggable } from "@neodrag/vanilla";
6
+ import { animate, motionValue, transformValue } from "motion";
7
+ import { createMemo, createSignal, onCleanup, untrack } from "solid-js";
8
+ //#region src/components/keen-slider-scrollbar.tsx
9
+ var _tmpl$ = /* @__PURE__ */ template(`<div class=keen-slider-scrollbar__thumb aria-hidden=true>`);
10
+ var _tmpl$2 = /* @__PURE__ */ template(`<ul class=keen-slider-scrollbar__breakpoints>`);
11
+ var _tmpl$3 = /* @__PURE__ */ template(`<li class=keen-slider-scrollbar__breakpoint><button type=button><span>`);
12
+ var Name = `keen-slider-scrollbar`;
13
+ var Component = (props, { element }) => {
14
+ const [slider, setSlider] = createSignal(void 0, { ownedWrite: true });
15
+ const [thumb, setThumb] = createSignal(null, { ownedWrite: true });
16
+ const positionX = motionValue(0);
17
+ const positionY = motionValue(0);
18
+ const position = transformValue(() => ({
19
+ x: positionX.get(),
20
+ y: positionY.get()
21
+ }));
22
+ const [maxIdx, setMaxIdx] = createSignal(slider()?.track?.details?.maxIdx || 0, { ownedWrite: true });
23
+ const [currentIdx, setCurrentIdx] = createSignal(0, { ownedWrite: true });
24
+ let breakpointsContainer = null;
25
+ const maxSlides = createMemo(() => {
26
+ if (!maxIdx()) return 0;
27
+ return untrack(() => {
28
+ const s = slider();
29
+ if (!s) return 0;
30
+ return getMaxSlides(s);
31
+ });
32
+ });
33
+ const draggable = createMemo(() => {
34
+ const el = thumb();
35
+ return untrack(() => {
36
+ if (!el) return null;
37
+ const instance = new Draggable(el, {
38
+ axis: props.isVertical ? "y" : "x",
39
+ bounds: "parent",
40
+ gpuAcceleration: true,
41
+ position: {
42
+ x: positionX.get(),
43
+ y: positionY.get()
44
+ },
45
+ transform({ offsetX, offsetY }) {
46
+ if (props.isVertical) return `translate3d(-50%, ${offsetY}px, 0)`;
47
+ return `translate3d(${offsetX}px, -50%, 0)`;
48
+ },
49
+ onDrag: ({ offsetX, offsetY }) => {
50
+ positionY.set(offsetY);
51
+ positionX.set(offsetX);
52
+ },
53
+ onDragEnd: (position) => {
54
+ if (!breakpointsContainer) return;
55
+ const s = slider();
56
+ if (!s) return;
57
+ const bp = findClosestBreakpoint(position, breakpointsContainer.children, element, el);
58
+ if (!bp) return;
59
+ animateScrollbarPosition(calculateMidpointPositionFromBP(bp, element, el));
60
+ updateSliderPosition(bp, s);
61
+ setCurrentIdx(parseInt(bp.getAttribute("data-index") || "0"));
62
+ },
63
+ ignoreMultitouch: true
64
+ });
65
+ const unsub = position.on("change", (latest) => {
66
+ instance.updateOptions({ position: latest });
67
+ });
68
+ onCleanup(unsub);
69
+ return instance;
70
+ });
71
+ });
72
+ createGuardedEffect(draggable, (draggable) => {
73
+ if (!draggable) return;
74
+ return () => {
75
+ draggable.destroy();
76
+ };
77
+ });
78
+ createGuardedEffect(slider, (slider) => {
79
+ if (!slider) return;
80
+ element.setAttribute("is-vertical", `${slider.options?.vertical || false}`);
81
+ function handleDetailsChanged(slider) {
82
+ element.setAttribute("is-vertical", `${slider.options?.vertical || false}`);
83
+ }
84
+ slider.on("detailsChanged", handleDetailsChanged);
85
+ return () => {
86
+ slider.on("detailsChanged", handleDetailsChanged, true);
87
+ };
88
+ });
89
+ createGuardedEffect(() => ({
90
+ maxSlides: maxSlides(),
91
+ s: slider()
92
+ }), ({ maxSlides, s }) => {
93
+ element.style.setProperty(`--${Name}--total-slides`, `${maxSlides}`);
94
+ if (!s) return;
95
+ if (!maxSlides) return;
96
+ function updateDetails(slider) {
97
+ setMaxIdx(slider.track.details.maxIdx);
98
+ }
99
+ function handleUpdate(slider) {
100
+ if (!breakpointsContainer) return;
101
+ const bp = breakpointsContainer.children[currentIdx()];
102
+ if (!bp) return;
103
+ const t = thumb();
104
+ if (!t) return;
105
+ const p = calculateMidpointPositionFromBP(bp, element, t);
106
+ positionY.set(p.y);
107
+ positionX.set(p.x);
108
+ setMaxIdx(slider.track.details.maxIdx);
109
+ }
110
+ s.on("created", handleUpdate);
111
+ s.on("detailsChanged", updateDetails);
112
+ s.on("updated", handleUpdate);
113
+ return () => {
114
+ s.on("created", handleUpdate, true);
115
+ s.on("detailsChanged", updateDetails, true);
116
+ s.on("updated", handleUpdate, true);
117
+ };
118
+ });
119
+ createGuardedEffect(() => ({
120
+ thumb: thumb(),
121
+ slider: slider()
122
+ }), ({ thumb, slider }) => {
123
+ if (!thumb || !slider) return;
124
+ function updateScrollbarPosition(slider) {
125
+ if (!breakpointsContainer) return;
126
+ const bp = getRelativeBreakpoint(slider, breakpointsContainer.children);
127
+ if (!bp) return;
128
+ if (!thumb) return;
129
+ animateScrollbarPosition(calculateMidpointPositionFromBP(bp, element, thumb));
130
+ setCurrentIdx(parseInt(bp.getAttribute("data-index") || "0"));
131
+ }
132
+ slider.on("slideChanged", updateScrollbarPosition);
133
+ });
134
+ createGuardedEffect(() => ({
135
+ thumb: thumb(),
136
+ slider: slider()
137
+ }), ({ thumb, slider }) => {
138
+ if (!thumb || !slider) return;
139
+ function handleClick(e) {
140
+ const target = e.target;
141
+ if (!(target instanceof Element)) return;
142
+ const bp = target.closest(`.${Name}__breakpoint`);
143
+ if (!bp) return;
144
+ setCurrentIdx(parseInt(bp.getAttribute("data-index") || "0"));
145
+ updateSliderPosition(bp, slider);
146
+ }
147
+ element.addEventListener("click", handleClick);
148
+ return () => {
149
+ element.removeEventListener("click", handleClick);
150
+ };
151
+ });
152
+ createGuardedEffect(maxIdx, (maxIdx) => {
153
+ if (maxIdx === 0) element.setAttribute("is-hidden", `true`);
154
+ else element.setAttribute("is-hidden", `false`);
155
+ });
156
+ const sliderContext = useKeenSliderAt(() => props.target, element);
157
+ createGuardedEffect(sliderContext, (context) => {
158
+ const [_, { addPlugin }] = context;
159
+ return addPlugin((instance) => {
160
+ setSlider(instance);
161
+ instance.on("created", (created) => {
162
+ setMaxIdx(created.track.details.maxIdx);
163
+ });
164
+ instance.on("destroyed", () => {
165
+ if (untrack(slider) !== instance) return;
166
+ setMaxIdx(0);
167
+ setSlider(void 0);
168
+ setThumb(null);
169
+ });
170
+ });
171
+ });
172
+ function animateScrollbarPosition(p) {
173
+ animate(positionX, p.x, { type: "tween" });
174
+ animate(positionY, p.y, { type: "tween" });
175
+ }
176
+ function updateSliderPosition(bp, slider) {
177
+ const idx = constrain(parseInt(bp.getAttribute("data-index") || "0") * ((slider?.options?.slides)?.perScroll || 1), 0, slider.track.details.maxIdx);
178
+ slider.moveToIdx(idx);
179
+ }
180
+ return createComponent(Show, {
181
+ get when() {
182
+ return maxSlides() > 1;
183
+ },
184
+ get children() {
185
+ return [(() => {
186
+ var _el$ = _tmpl$();
187
+ ref(() => {
188
+ return (el) => setThumb(el);
189
+ }, _el$);
190
+ return _el$;
191
+ })(), (() => {
192
+ var _el$2 = _tmpl$2();
193
+ ref(() => {
194
+ return (el) => {
195
+ breakpointsContainer = el;
196
+ };
197
+ }, _el$2);
198
+ insert(_el$2, createComponent(For, {
199
+ get each() {
200
+ return Array(maxSlides()).fill(0);
201
+ },
202
+ keyed: false,
203
+ children: (_, idx) => (() => {
204
+ var _el$3 = _tmpl$3();
205
+ var _el$4 = _el$3.firstChild;
206
+ var _el$5 = _el$4.firstChild;
207
+ setAttribute(_el$3, "data-index", idx);
208
+ insert(_el$5, () => {
209
+ return props.breakpointLabel.replace("{n}", `${idx + 1}`);
210
+ });
211
+ effect(() => {
212
+ return {
213
+ e: currentIdx() === idx ? "true" : "false",
214
+ t: readShallow(srOnly)
215
+ };
216
+ }, ({ e, t }, _p$) => {
217
+ e !== _p$?.e && setAttribute(_el$4, "aria-current", e);
218
+ style(_el$5, t, _p$?.t);
219
+ });
220
+ return _el$3;
221
+ })()
222
+ }));
223
+ return _el$2;
224
+ })()];
225
+ }
226
+ });
248
227
  };
249
-
228
+ //#endregion
250
229
  export { Component, Name };
251
- //# sourceMappingURL=keen-slider-scrollbar.js.map
230
+
252
231
  //# sourceMappingURL=keen-slider-scrollbar.js.map
package/dist/main/components/keen-slider-scrollbar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/keen-slider-scrollbar.ts"],"names":["maxIdx","thumb","position","draggable","slider","maxSlides"],"mappings":"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","file":"keen-slider-scrollbar.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport html from \"solid-js/html\";\nimport {\n createEffect,\n createSignal,\n createMemo,\n on,\n onCleanup,\n batch,\n Show,\n For,\n type Accessor,\n} from \"solid-js\";\nimport {\n withKeenSliderElementContext,\n type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\nimport { Draggable } from \"@neodrag/vanilla\";\n\nimport {\n getRelativeBreakpoint,\n calculateMidpointPositionFromBP,\n findClosestBreakpoint,\n getMaxSlides,\n constrain,\n srOnly,\n} from \"../utils.js\";\nimport { motionValue, transformValue, animate } from \"motion\";\n\nexport type Props = {\n target: string;\n isHidden: boolean;\n isVertical: boolean;\n};\n\nexport const Name = `keen-slider-scrollbar`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n if (!props.target)\n return console.warn(\n `${Name}: Needs a proper target in order to properly extend a keen slider.`,\n );\n\n const [slider, setSlider] = createSignal<KeenSliderInstance>();\n\n const [thumb, setThumb] = createSignal<HTMLElement | null>(null);\n const positionX = motionValue(0);\n const positionY = motionValue(0);\n const position = transformValue(() => ({\n x: positionX.get(),\n y: positionY.get(),\n }));\n // const [position, setPosition] = createSignal({ x: 0, y: 0 });\n const [maxIdx, setMaxIdx] = createSignal(\n slider()?.track?.details?.maxIdx || 0,\n );\n const [currentIdx, setCurrentIdx] = createSignal(0);\n\n let breakpointsContainer: HTMLElement | null = null;\n\n const maxSlides = createMemo(\n on(maxIdx, (maxIdx) => {\n if (!maxIdx) return 0;\n const s = slider();\n if (!s) return 0;\n return getMaxSlides(s);\n }),\n );\n\n const draggable = createMemo(\n on(thumb, (thumb) => {\n if (!thumb) return null;\n const instance = new Draggable(thumb, {\n axis: props.isVertical ? \"y\" : \"x\",\n bounds: \"parent\",\n gpuAcceleration: true,\n position: {\n x: positionX.get(),\n y: positionY.get(),\n },\n transform({ offsetX, offsetY }) {\n if (props.isVertical) return `translate3d(-50%, ${offsetY}px, 0)`;\n return `translate3d(${offsetX}px, -50%, 0)`;\n },\n onDrag: ({ offsetX, offsetY }) => {\n positionY.set(offsetY);\n positionX.set(offsetX);\n },\n onDragEnd: (position) => {\n if (!breakpointsContainer) return;\n const s = slider();\n if (!s) return;\n const bp = findClosestBreakpoint(\n position,\n breakpointsContainer.children,\n element,\n thumb,\n );\n if (!bp) return;\n const p = calculateMidpointPositionFromBP(bp, element, thumb);\n animateScrollbarPosition(p);\n updateSliderPosition(bp, s);\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n },\n ignoreMultitouch: true,\n });\n\n const unsub = position.on(\"change\", (latest) => {\n instance.updateOptions({\n position: latest,\n });\n });\n\n onCleanup(unsub);\n\n return instance;\n }),\n );\n\n createEffect(\n on(draggable, (draggable) => {\n if (!draggable) return;\n onCleanup(() => {\n draggable.destroy();\n });\n }),\n );\n\n createEffect(\n on(slider, (slider) => {\n if (!slider) return;\n element.setAttribute(\n \"is-vertical\",\n `${slider.options?.vertical || false}`,\n );\n\n function handleDetailsChanged(slider: KeenSliderInstance) {\n element.setAttribute(\n \"is-vertical\",\n `${slider.options?.vertical || false}`,\n );\n }\n\n slider.on(\"detailsChanged\", handleDetailsChanged);\n\n return onCleanup(() => {\n slider.on(\"detailsChanged\", handleDetailsChanged, true);\n });\n }),\n );\n\n createEffect(\n on(maxSlides, (maxSlides) => {\n const s = slider();\n element.style.setProperty(`--${Name}--total-slides`, `${maxSlides}`);\n if (!s) return;\n if (!maxSlides) return;\n\n function updateDetails(slider: KeenSliderInstance) {\n setMaxIdx(slider.track.details.maxIdx);\n }\n\n function handleUpdate(slider: KeenSliderInstance) {\n if (!breakpointsContainer) return;\n const bp = breakpointsContainer.children[currentIdx()];\n if (!bp) return;\n const t = thumb();\n if (!t) return;\n const p = calculateMidpointPositionFromBP(bp, element, t);\n positionY.set(p.y);\n positionX.set(p.x);\n setMaxIdx(slider.track.details.maxIdx);\n }\n\n s.on(\"created\", handleUpdate);\n s.on(\"detailsChanged\", updateDetails);\n s.on(\"updated\", handleUpdate);\n\n return onCleanup(() => {\n s.on(\"created\", handleUpdate, true);\n s.on(\"detailsChanged\", updateDetails, true);\n s.on(\"updated\", handleUpdate, true);\n });\n }),\n );\n\n createEffect(\n on(\n () => ({ thumb: thumb(), slider: slider() }),\n ({ thumb, slider }) => {\n if (!thumb || !slider) return;\n function updateScrollbarPosition(slider: KeenSliderInstance) {\n if (!breakpointsContainer) return;\n const bp = getRelativeBreakpoint(\n slider,\n breakpointsContainer.children,\n );\n if (!bp) return;\n if (!thumb) return;\n const position = calculateMidpointPositionFromBP(bp, element, thumb);\n animateScrollbarPosition(position);\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n }\n slider.on(\"slideChanged\", updateScrollbarPosition);\n },\n ),\n );\n\n createEffect(\n on(\n () => ({ thumb: thumb(), slider: slider() }),\n ({ thumb, slider }) => {\n if (!thumb || !slider) return;\n\n function handleClick(e: Event) {\n const bp = e.target as HTMLElement | null;\n if (!bp) return;\n if (!bp.classList.contains(`${Name}__breakpoint`)) return;\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n updateSliderPosition(bp, slider!);\n }\n\n element.addEventListener(\"click\", handleClick);\n\n return onCleanup(() => {\n element.removeEventListener(\"click\", handleClick);\n });\n },\n ),\n );\n\n createEffect(\n on(maxIdx, (maxIdx) => {\n if (maxIdx === 0) element.setAttribute(\"is-hidden\", `${true}`);\n else element.setAttribute(\"is-hidden\", `${false}`);\n }),\n );\n\n withKeenSliderElementContext(\n () => {\n const selector = props.target;\n return () => {\n let targetEl: Element | null = element;\n if (props.target) targetEl = document.querySelector(selector);\n if (targetEl?.tagName !== \"KEEN-SLIDER\")\n targetEl = targetEl!.querySelector(\"keen-slider\");\n return targetEl!;\n };\n },\n () => null,\n ([_, { addPlugin }]) => {\n const removePlugin = addPlugin((slider) => {\n setSlider(slider);\n\n slider.on(\"created\", function(slider) {\n setMaxIdx(slider.track.details.maxIdx);\n });\n\n slider.on(\"destroyed\", () =>\n batch(() => {\n setMaxIdx(0);\n setSlider();\n setThumb(null);\n }),\n );\n });\n\n onCleanup(removePlugin);\n },\n );\n\n function animateScrollbarPosition(p: { x: number; y: number }) {\n animate(positionX, p.x, { type: \"tween\" });\n animate(positionY, p.y, { type: \"tween\" });\n }\n\n function updateSliderPosition(bp: Element, slider: KeenSliderInstance) {\n const idx = constrain(\n parseInt(bp.getAttribute(\"data-index\") || \"0\") *\n ((slider?.options?.slides as any)?.perScroll || 1),\n 0,\n slider.track.details.maxIdx,\n );\n slider.moveToIdx(idx);\n }\n\n return html`\n <${Show} when=${() => maxSlides() > 1}>\n <div\n class=\"${Name}__thumb\"\n ref=${(el: HTMLElement) => setThumb(el)}\n ></div>\n <ul\n class=\"${Name}__breakpoints\"\n ref=${(el: HTMLElement) => (breakpointsContainer = el)}\n >\n <${For} each=${() => Array(maxSlides()).fill(0)}>\n ${(_: number, idx: Accessor<number>) => html`\n <li class=\"${Name}__breakpoint\" data-index=${idx}>\n <button type=\"button\" style=${srOnly}>\n <span style=${srOnly}> Breakpoint ${idx} </span>\n </button>\n </li>\n `}\n <//>\n </ul>\n <//>\n `;\n};\n"]}
1
+ {"version":3,"file":"keen-slider-scrollbar.js","names":["<Show when={maxSlides() > 1}>\n\t\t\t{/* A visual proxy for the breakpoint buttons, which are the real\n\t\t\t controls. Announcing it would describe a drag handle a screen-reader\n\t\t\t user cannot use, next to buttons that do the same job. */}\n\t\t\t<div\n\t\t\t\tclass={`${Name}__thumb`}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tref={(el: HTMLElement) => setThumb(el)}\n\t\t\t/>\n\t\t\t<ul\n\t\t\t\tclass={`${Name}__breakpoints`}\n\t\t\t\tref={(el: HTMLElement) => {\n\t\t\t\t\tbreakpointsContainer = el;\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<For each={Array(maxSlides()).fill(0)} keyed={false}>\n\t\t\t\t\t{(_, idx) => (\n\t\t\t\t\t\t<li class={`${Name}__breakpoint`} data-index={idx}>\n\t\t\t\t\t\t\t{/* The button fills its grid cell rather than being visually\n\t\t\t\t\t\t\t hidden itself. It was 1px, so a keyboard user got a focus\n\t\t\t\t\t\t\t ring they could not see on a control that did nothing. */}\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\taria-current={currentIdx() === idx ? \"true\" : \"false\"}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span style={srOnly}>\n\t\t\t\t\t\t\t\t\t{props.breakpointLabel.replace(\"{n}\", `${idx + 1}`)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t)}\n\t\t\t\t</For>\n\t\t\t</ul>\n\t\t</Show>","ref={(el: HTMLElement) => setThumb(el)}","ref={(el: HTMLElement) => {\n\t\t\t\t\tbreakpointsContainer = el;\n\t\t\t\t}}","<For each={Array(maxSlides()).fill(0)} keyed={false}>\n\t\t\t\t\t{(_, idx) => (\n\t\t\t\t\t\t<li class={`${Name}__breakpoint`} data-index={idx}>\n\t\t\t\t\t\t\t{/* The button fills its grid cell rather than being visually\n\t\t\t\t\t\t\t hidden itself. It was 1px, so a keyboard user got a focus\n\t\t\t\t\t\t\t ring they could not see on a control that did nothing. */}\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\taria-current={currentIdx() === idx ? \"true\" : \"false\"}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span style={srOnly}>\n\t\t\t\t\t\t\t\t\t{props.breakpointLabel.replace(\"{n}\", `${idx + 1}`)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t)}\n\t\t\t\t</For>","keyed={false}","style={srOnly}"],"sources":["../../../src/components/keen-slider-scrollbar.tsx"],"sourcesContent":["import {\n\ttype CorrectComponentType,\n\tcreateGuardedEffect,\n\tsrOnly,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n\ttype KeenSliderInstance,\n\tuseKeenSliderAt,\n} from \"@brytdesigns/web-component-keen-slider\";\nimport { Draggable } from \"@neodrag/vanilla\";\nimport { For, Show } from \"@solidjs/web\";\nimport { animate, motionValue, transformValue } from \"motion\";\nimport { createMemo, createSignal, onCleanup, untrack } from \"solid-js\";\nimport {\n\tcalculateMidpointPositionFromBP,\n\tconstrain,\n\tfindClosestBreakpoint,\n\tgetMaxSlides,\n\tgetRelativeBreakpoint,\n} from \"../utils.js\";\n\nexport type Props = {\n\ttarget: string;\n\tisHidden: boolean;\n\tisVertical: boolean;\n\t/**\n\t * Per-breakpoint label template. `{n}` is replaced with the slide-group\n\t * number, counting from one.\n\t */\n\tbreakpointLabel: string;\n};\n\nexport const Name = `keen-slider-scrollbar`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\t// Written from inside an owned scope (a keen-slider plugin callback\n\t// running within an effect's apply). v2 forbids that by default; this is\n\t// component-internal state, which is what `ownedWrite` is the opt-in for.\n\tconst [slider, setSlider] = createSignal<KeenSliderInstance | undefined>(\n\t\tundefined,\n\t\t{ ownedWrite: true },\n\t);\n\n\tconst [thumb, setThumb] = createSignal<HTMLElement | null>(null, {\n\t\townedWrite: true,\n\t});\n\tconst positionX = motionValue(0);\n\tconst positionY = motionValue(0);\n\tconst position = transformValue(() => ({\n\t\tx: positionX.get(),\n\t\ty: positionY.get(),\n\t}));\n\t// const [position, setPosition] = createSignal({ x: 0, y: 0 });\n\tconst [maxIdx, setMaxIdx] = createSignal(\n\t\tslider()?.track?.details?.maxIdx || 0,\n\t\t{ ownedWrite: true },\n\t);\n\tconst [currentIdx, setCurrentIdx] = createSignal(0, { ownedWrite: true });\n\n\tlet breakpointsContainer: HTMLElement | null = null;\n\n\tconst maxSlides = createMemo(() => {\n\t\tconst idx = maxIdx();\n\t\tif (!idx) return 0;\n\t\t// `on()` made everything past the dependency untracked; preserved.\n\t\treturn untrack(() => {\n\t\t\tconst s = slider();\n\t\t\tif (!s) return 0;\n\t\t\treturn getMaxSlides(s);\n\t\t});\n\t});\n\n\tconst draggable = createMemo(() => {\n\t\tconst el = thumb();\n\t\t// `on()` made everything past the dependency untracked; preserved.\n\t\treturn untrack(() => {\n\t\t\tif (!el) return null;\n\t\t\tconst instance = new Draggable(el, {\n\t\t\t\taxis: props.isVertical ? \"y\" : \"x\",\n\t\t\t\tbounds: \"parent\",\n\t\t\t\tgpuAcceleration: true,\n\t\t\t\tposition: {\n\t\t\t\t\tx: positionX.get(),\n\t\t\t\t\ty: positionY.get(),\n\t\t\t\t},\n\t\t\t\ttransform({ offsetX, offsetY }) {\n\t\t\t\t\tif (props.isVertical) return `translate3d(-50%, ${offsetY}px, 0)`;\n\t\t\t\t\treturn `translate3d(${offsetX}px, -50%, 0)`;\n\t\t\t\t},\n\t\t\t\tonDrag: ({ offsetX, offsetY }) => {\n\t\t\t\t\tpositionY.set(offsetY);\n\t\t\t\t\tpositionX.set(offsetX);\n\t\t\t\t},\n\t\t\t\tonDragEnd: (position) => {\n\t\t\t\t\tif (!breakpointsContainer) return;\n\t\t\t\t\tconst s = slider();\n\t\t\t\t\tif (!s) return;\n\t\t\t\t\tconst bp = findClosestBreakpoint(\n\t\t\t\t\t\tposition,\n\t\t\t\t\t\tbreakpointsContainer.children,\n\t\t\t\t\t\telement,\n\t\t\t\t\t\tel,\n\t\t\t\t\t);\n\t\t\t\t\tif (!bp) return;\n\t\t\t\t\tconst p = calculateMidpointPositionFromBP(bp, element, el);\n\t\t\t\t\tanimateScrollbarPosition(p);\n\t\t\t\t\tupdateSliderPosition(bp, s);\n\t\t\t\t\tsetCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n\t\t\t\t},\n\t\t\t\tignoreMultitouch: true,\n\t\t\t});\n\n\t\t\tconst unsub = position.on(\"change\", (latest) => {\n\t\t\t\tinstance.updateOptions({\n\t\t\t\t\tposition: latest,\n\t\t\t\t});\n\t\t\t});\n\n\t\t\tonCleanup(unsub);\n\n\t\t\treturn instance;\n\t\t});\n\t});\n\n\tcreateGuardedEffect(draggable, (draggable) => {\n\t\tif (!draggable) return;\n\t\t// Apply is not a computation, so `onCleanup` here never registered and\n\t\t// the Draggable instance was never destroyed.\n\t\treturn () => {\n\t\t\tdraggable.destroy();\n\t\t};\n\t});\n\n\tcreateGuardedEffect(slider, (slider) => {\n\t\tif (!slider) return;\n\t\telement.setAttribute(\"is-vertical\", `${slider.options?.vertical || false}`);\n\n\t\tfunction handleDetailsChanged(slider: KeenSliderInstance) {\n\t\t\telement.setAttribute(\n\t\t\t\t\"is-vertical\",\n\t\t\t\t`${slider.options?.vertical || false}`,\n\t\t\t);\n\t\t}\n\n\t\tslider.on(\"detailsChanged\", handleDetailsChanged);\n\n\t\treturn () => {\n\t\t\tslider.on(\"detailsChanged\", handleDetailsChanged, true);\n\t\t};\n\t});\n\n\tcreateGuardedEffect(\n\t\t() => ({ maxSlides: maxSlides(), s: slider() }),\n\t\t({ maxSlides, s }) => {\n\t\t\telement.style.setProperty(`--${Name}--total-slides`, `${maxSlides}`);\n\t\t\tif (!s) return;\n\t\t\tif (!maxSlides) return;\n\n\t\t\tfunction updateDetails(slider: KeenSliderInstance) {\n\t\t\t\tsetMaxIdx(slider.track.details.maxIdx);\n\t\t\t}\n\n\t\t\tfunction handleUpdate(slider: KeenSliderInstance) {\n\t\t\t\tif (!breakpointsContainer) return;\n\t\t\t\tconst bp = breakpointsContainer.children[currentIdx()];\n\t\t\t\tif (!bp) return;\n\t\t\t\tconst t = thumb();\n\t\t\t\tif (!t) return;\n\t\t\t\tconst p = calculateMidpointPositionFromBP(bp, element, t);\n\t\t\t\tpositionY.set(p.y);\n\t\t\t\tpositionX.set(p.x);\n\t\t\t\tsetMaxIdx(slider.track.details.maxIdx);\n\t\t\t}\n\n\t\t\ts.on(\"created\", handleUpdate);\n\t\t\ts.on(\"detailsChanged\", updateDetails);\n\t\t\ts.on(\"updated\", handleUpdate);\n\n\t\t\treturn () => {\n\t\t\t\ts.on(\"created\", handleUpdate, true);\n\t\t\t\ts.on(\"detailsChanged\", updateDetails, true);\n\t\t\t\ts.on(\"updated\", handleUpdate, true);\n\t\t\t};\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => ({ thumb: thumb(), slider: slider() }),\n\t\t({ thumb, slider }) => {\n\t\t\tif (!thumb || !slider) return;\n\t\t\tfunction updateScrollbarPosition(slider: KeenSliderInstance) {\n\t\t\t\tif (!breakpointsContainer) return;\n\t\t\t\tconst bp = getRelativeBreakpoint(slider, breakpointsContainer.children);\n\t\t\t\tif (!bp) return;\n\t\t\t\tif (!thumb) return;\n\t\t\t\tconst position = calculateMidpointPositionFromBP(bp, element, thumb);\n\t\t\t\tanimateScrollbarPosition(position);\n\t\t\t\tsetCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n\t\t\t}\n\t\t\tslider.on(\"slideChanged\", updateScrollbarPosition);\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => ({ thumb: thumb(), slider: slider() }),\n\t\t({ thumb, slider }) => {\n\t\t\tif (!thumb || !slider) return;\n\n\t\t\tfunction handleClick(e: Event) {\n\t\t\t\tconst target = e.target;\n\t\t\t\tif (!(target instanceof Element)) return;\n\t\t\t\t// `closest`, not `classList.contains`. The class is on the <li>,\n\t\t\t\t// while the event target is the <button> inside it — or the <span>\n\t\t\t\t// inside that — so the old check matched only a pointer landing on\n\t\t\t\t// the li's own box, and keyboard activation never matched at all.\n\t\t\t\t// Every breakpoint control was inoperable by keyboard: WCAG 2.1.1.\n\t\t\t\tconst bp = target.closest(`.${Name}__breakpoint`);\n\t\t\t\tif (!bp) return;\n\t\t\t\tsetCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n\t\t\t\tupdateSliderPosition(bp, slider!);\n\t\t\t}\n\n\t\t\telement.addEventListener(\"click\", handleClick);\n\n\t\t\treturn () => {\n\t\t\t\telement.removeEventListener(\"click\", handleClick);\n\t\t\t};\n\t\t},\n\t);\n\n\tcreateGuardedEffect(maxIdx, (maxIdx) => {\n\t\tif (maxIdx === 0) element.setAttribute(\"is-hidden\", `${true}`);\n\t\telse element.setAttribute(\"is-hidden\", `${false}`);\n\t});\n\n\tconst sliderContext = useKeenSliderAt(() => props.target, element);\n\n\tcreateGuardedEffect(sliderContext, (context) => {\n\t\tconst [_, { addPlugin }] = context;\n\t\tconst removePlugin = addPlugin((instance) => {\n\t\t\tsetSlider(instance);\n\n\t\t\tinstance.on(\"created\", (created) => {\n\t\t\t\tsetMaxIdx(created.track.details.maxIdx);\n\t\t\t});\n\n\t\t\t// Adding any plugin rebuilds the slider — it is a memo over\n\t\t\t// `plugins()` — and the *new* instance's plugins run before the\n\t\t\t// previous instance's cleanup, so without this guard a later\n\t\t\t// extension's mount fires this for an instance already replaced and\n\t\t\t// wipes state belonging to the live one.\n\t\t\t//\n\t\t\t// No `batch` in v2 — writes stage and flush together by default.\n\t\t\tinstance.on(\"destroyed\", () => {\n\t\t\t\tif (untrack(slider) !== instance) return;\n\t\t\t\tsetMaxIdx(0);\n\t\t\t\tsetSlider(undefined);\n\t\t\t\tsetThumb(null);\n\t\t\t});\n\t\t});\n\n\t\t// The apply phase is not a computation, so `onCleanup` here never\n\t\t// registers. Its return value IS the cleanup.\n\t\treturn removePlugin;\n\t});\n\n\tfunction animateScrollbarPosition(p: { x: number; y: number }) {\n\t\tanimate(positionX, p.x, { type: \"tween\" });\n\t\tanimate(positionY, p.y, { type: \"tween\" });\n\t}\n\n\tfunction updateSliderPosition(bp: Element, slider: KeenSliderInstance) {\n\t\tconst idx = constrain(\n\t\t\tparseInt(bp.getAttribute(\"data-index\") || \"0\") *\n\t\t\t\t((slider?.options?.slides as any)?.perScroll || 1),\n\t\t\t0,\n\t\t\tslider.track.details.maxIdx,\n\t\t);\n\t\tslider.moveToIdx(idx);\n\t}\n\n\treturn (\n\t\t<Show when={maxSlides() > 1}>\n\t\t\t{/* A visual proxy for the breakpoint buttons, which are the real\n\t\t\t controls. Announcing it would describe a drag handle a screen-reader\n\t\t\t user cannot use, next to buttons that do the same job. */}\n\t\t\t<div\n\t\t\t\tclass={`${Name}__thumb`}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tref={(el: HTMLElement) => setThumb(el)}\n\t\t\t/>\n\t\t\t<ul\n\t\t\t\tclass={`${Name}__breakpoints`}\n\t\t\t\tref={(el: HTMLElement) => {\n\t\t\t\t\tbreakpointsContainer = el;\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<For each={Array(maxSlides()).fill(0)} keyed={false}>\n\t\t\t\t\t{(_, idx) => (\n\t\t\t\t\t\t<li class={`${Name}__breakpoint`} data-index={idx}>\n\t\t\t\t\t\t\t{/* The button fills its grid cell rather than being visually\n\t\t\t\t\t\t\t hidden itself. It was 1px, so a keyboard user got a focus\n\t\t\t\t\t\t\t ring they could not see on a control that did nothing. */}\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\taria-current={currentIdx() === idx ? \"true\" : \"false\"}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span style={srOnly}>\n\t\t\t\t\t\t\t\t\t{props.breakpointLabel.replace(\"{n}\", `${idx + 1}`)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t)}\n\t\t\t\t</For>\n\t\t\t</ul>\n\t\t</Show>\n\t);\n};\n"],"mappings":"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"}
package/dist/main/index.d.ts CHANGED
@@ -2,6 +2,11 @@
2
2
 
3
3
  import { ICustomElement } from 'component-register';
4
4
 
5
+ /**
6
+ * `component-register` types `options.element` as a bare `ICustomElement`, but
7
+ * at runtime it is always also an `HTMLElement`. Every component in this repo
8
+ * needs the DOM half.
9
+ */
5
10
  export type CorrectComponentOptions = {
6
11
  element: HTMLElement & ICustomElement;
7
12
  };
@@ -10,6 +15,11 @@ export type Props = {
10
15
  target: string;
11
16
  isHidden: boolean;
12
17
  isVertical: boolean;
18
+ /**
19
+ * Per-breakpoint label template. `{n}` is replaced with the slide-group
20
+ * number, counting from one.
21
+ */
22
+ breakpointLabel: string;
13
23
  };
14
24
  declare const Name = "keen-slider-scrollbar";
15
25
  declare const Component: CorrectComponentType<Props>;
package/dist/main/index.js CHANGED
@@ -1,14 +1,13 @@
1
- import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
2
- import { KeenSliderScrollbar } from './components/index.js';
1
+ import { Component, Name } from "./components/keen-slider-scrollbar.js";
2
+ import "./components/index.js";
3
+ import { customShadowlessElement } from "@brytdesigns/web-component-core/utils";
4
+ //#region src/index.ts
5
+ customShadowlessElement(Name, {
6
+ target: "",
7
+ isHidden: true,
8
+ isVertical: false,
9
+ breakpointLabel: "Go to slide group {n}"
10
+ }, Component);
11
+ //#endregion
3
12
 
4
- customShadowlessElement(
5
- KeenSliderScrollbar.Name,
6
- {
7
- target: "",
8
- isHidden: true,
9
- isVertical: false
10
- },
11
- correctElementType(KeenSliderScrollbar.Component)
12
- );
13
- //# sourceMappingURL=index.js.map
14
13
  //# sourceMappingURL=index.js.map
package/dist/main/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;AAQA,uBAAA;AAAA,EACE,mBAAoB,CAAA,IAAA;AAAA,EACpB;AAAA,IACE,MAAQ,EAAA,EAAA;AAAA,IACR,QAAU,EAAA,IAAA;AAAA,IACV,UAAY,EAAA;AAAA,GACd;AAAA,EACA,kBAAA,CAAmB,oBAAoB,SAAS;AAClD,CAAA","file":"index.js","sourcesContent":["import {\n customShadowlessElement,\n correctElementType,\n} from \"@brytdesigns/web-component-core/utils\";\nimport { KeenSliderScrollbar } from \"./components/index.js\";\n\nexport type KeenSliderScrollbarProps = KeenSliderScrollbar.Props;\n\ncustomShadowlessElement(\n KeenSliderScrollbar.Name,\n {\n target: \"\",\n isHidden: true,\n isVertical: false,\n },\n correctElementType(KeenSliderScrollbar.Component),\n);\n"]}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import { customShadowlessElement } from \"@brytdesigns/web-component-core/utils\";\nimport { KeenSliderScrollbar } from \"./components/index.js\";\n\nexport type KeenSliderScrollbarProps = KeenSliderScrollbar.Props;\n\ncustomShadowlessElement(\n\tKeenSliderScrollbar.Name,\n\t{\n\t\ttarget: \"\",\n\t\tisHidden: true,\n\t\tisVertical: false,\n\t\tbreakpointLabel: \"Go to slide group {n}\",\n\t},\n\tKeenSliderScrollbar.Component,\n);\n"],"mappings":";;;;AAKA,wBACC,MACA;CACC,QAAQ;CACR,UAAU;CACV,YAAY;CACZ,iBAAiB;AAClB,GACA,SACD"}