@brytdesigns/web-component-keen-slider-auto-switch 2.0.0 → 2.0.1
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/esm/index.js +67 -56
- package/dist/esm/index.js.map +1 -1
- package/dist/main/components/index.js +2 -1
- package/dist/main/components/keen-slider-auto-switch.js +53 -53
- package/dist/main/components/keen-slider-auto-switch.js.map +1 -1
- package/dist/main/index.js +3 -3
- package/dist/main/index.js.map +1 -1
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -2,68 +2,80 @@ import { customShadowlessElement, correctElementType } from '@brytdesigns/web-co
|
|
|
2
2
|
import { createMemo, createSignal, createEffect, on, onCleanup, batch } from 'solid-js';
|
|
3
3
|
import { addPlugin } from '@brytdesigns/web-component-keen-slider';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
var
|
|
5
|
+
var __defProp = Object.defineProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
// src/components/keen-slider-auto-switch.ts
|
|
12
|
+
var keen_slider_auto_switch_exports = {};
|
|
13
|
+
__export(keen_slider_auto_switch_exports, {
|
|
14
|
+
Component: () => Component,
|
|
15
|
+
Name: () => Name
|
|
16
|
+
});
|
|
17
|
+
var Name = "keen-slider-auto-switch";
|
|
18
|
+
var Component = (props, { element }) => {
|
|
7
19
|
if (!props.target)
|
|
8
20
|
return console.warn(
|
|
9
|
-
|
|
21
|
+
`${Name}: Needs a proper target in order to properly extend a keen slider.`
|
|
10
22
|
);
|
|
11
23
|
const target = createMemo(() => {
|
|
12
24
|
let targetEl = element;
|
|
13
25
|
if (props.target) targetEl = document.querySelector(props.target);
|
|
14
26
|
if (!targetEl)
|
|
15
27
|
return console.warn(
|
|
16
|
-
|
|
28
|
+
`${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`
|
|
17
29
|
);
|
|
18
30
|
if (targetEl.tagName !== "KEEN-SLIDER")
|
|
19
31
|
targetEl = targetEl.querySelector("keen-slider");
|
|
20
32
|
if (!targetEl)
|
|
21
33
|
return console.warn(
|
|
22
|
-
|
|
34
|
+
`${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`
|
|
23
35
|
);
|
|
24
36
|
return targetEl;
|
|
25
37
|
});
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
if (val) clearTimeout(val);
|
|
38
|
-
return null;
|
|
39
|
-
});
|
|
38
|
+
const [sliderRef, setSliderRef] = createSignal(
|
|
39
|
+
null
|
|
40
|
+
);
|
|
41
|
+
const [_, setTimeoutVal] = createSignal(null);
|
|
42
|
+
const [isPaused, setIsPaused] = createSignal(false);
|
|
43
|
+
function clearCurrentTimeout() {
|
|
44
|
+
batch(() => {
|
|
45
|
+
setIsPaused(true);
|
|
46
|
+
setTimeoutVal((val) => {
|
|
47
|
+
if (val) clearTimeout(val);
|
|
48
|
+
return null;
|
|
40
49
|
});
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
function startNextTimeout(cb, duration) {
|
|
53
|
+
batch(() => {
|
|
54
|
+
setIsPaused(false);
|
|
55
|
+
setTimeoutVal((val) => {
|
|
56
|
+
if (val) clearTimeout(val);
|
|
57
|
+
return setTimeout(cb, duration);
|
|
49
58
|
});
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
}
|
|
61
|
-
)
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
)
|
|
65
|
-
|
|
66
|
-
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
createEffect(
|
|
62
|
+
on(
|
|
63
|
+
() => ({ isPaused: isPaused(), slider: sliderRef() }),
|
|
64
|
+
({ isPaused: isPaused2, slider }) => {
|
|
65
|
+
if (!slider) return;
|
|
66
|
+
slider.container.dispatchEvent(
|
|
67
|
+
new CustomEvent("autoswitch:update", {
|
|
68
|
+
bubbles: true,
|
|
69
|
+
detail: { isPaused: isPaused2 }
|
|
70
|
+
})
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
)
|
|
74
|
+
);
|
|
75
|
+
createEffect(
|
|
76
|
+
on(
|
|
77
|
+
() => ({ slider: sliderRef(), duration: props.duration }),
|
|
78
|
+
({ slider, duration }) => {
|
|
67
79
|
if (!slider) return;
|
|
68
80
|
function nextTimeout() {
|
|
69
81
|
if (!slider) return;
|
|
@@ -71,7 +83,7 @@ var KeenSliderAutoSwitch = (props, { element }) => {
|
|
|
71
83
|
return startNextTimeout(() => {
|
|
72
84
|
if (slider.slides.length <= 1) return;
|
|
73
85
|
slider.next();
|
|
74
|
-
});
|
|
86
|
+
}, duration);
|
|
75
87
|
}
|
|
76
88
|
function handleMouseEnter() {
|
|
77
89
|
clearCurrentTimeout();
|
|
@@ -96,20 +108,19 @@ var KeenSliderAutoSwitch = (props, { element }) => {
|
|
|
96
108
|
slider.on("animationEnded", nextTimeout, true);
|
|
97
109
|
slider.on("updated", nextTimeout, true);
|
|
98
110
|
});
|
|
99
|
-
}
|
|
100
|
-
)
|
|
101
|
-
|
|
102
|
-
setSliderRef(slider);
|
|
103
|
-
};
|
|
104
|
-
});
|
|
111
|
+
}
|
|
112
|
+
)
|
|
113
|
+
);
|
|
105
114
|
createEffect(() => {
|
|
106
115
|
const t = target();
|
|
107
116
|
if (!t) return;
|
|
108
|
-
const
|
|
117
|
+
const plugin = (slider) => {
|
|
118
|
+
setSliderRef(slider);
|
|
119
|
+
};
|
|
109
120
|
const controller = new AbortController();
|
|
110
121
|
addPlugin({
|
|
111
122
|
target: t,
|
|
112
|
-
plugin
|
|
123
|
+
plugin,
|
|
113
124
|
controller
|
|
114
125
|
});
|
|
115
126
|
return onCleanup(() => {
|
|
@@ -120,12 +131,12 @@ var KeenSliderAutoSwitch = (props, { element }) => {
|
|
|
120
131
|
|
|
121
132
|
// src/index.ts
|
|
122
133
|
customShadowlessElement(
|
|
123
|
-
|
|
134
|
+
keen_slider_auto_switch_exports.Name,
|
|
124
135
|
{
|
|
125
|
-
target: "",
|
|
136
|
+
target: "keen-slider",
|
|
126
137
|
duration: 2e3
|
|
127
138
|
},
|
|
128
|
-
correctElementType(
|
|
139
|
+
correctElementType(keen_slider_auto_switch_exports.Component)
|
|
129
140
|
);
|
|
130
141
|
//# sourceMappingURL=index.js.map
|
|
131
142
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/keen-slider-auto-switch.ts","../../src/index.ts"],"names":["isPaused"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/components/keen-slider-auto-switch.ts","../../src/index.ts"],"names":["isPaused"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport {\n createEffect,\n createSignal,\n createMemo,\n on,\n onCleanup,\n batch,\n} from \"solid-js\";\nimport {\n addPlugin,\n type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\n\ntype Props = {\n target: string;\n duration: number;\n};\n\nexport const Name = \"keen-slider-auto-switch\";\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 target = createMemo(() => {\n let targetEl: HTMLElement | null = element;\n if (props.target) targetEl = document.querySelector(props.target);\n if (!targetEl)\n return console.warn(\n `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`,\n );\n if (targetEl.tagName !== \"KEEN-SLIDER\")\n targetEl = targetEl.querySelector(\"keen-slider\");\n if (!targetEl)\n return console.warn(\n `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`,\n );\n return targetEl;\n });\n\n const [sliderRef, setSliderRef] = createSignal<KeenSliderInstance | null>(\n null,\n );\n const [_, setTimeoutVal] = createSignal<number | null>(null);\n const [isPaused, setIsPaused] = createSignal(false);\n\n function clearCurrentTimeout() {\n batch(() => {\n setIsPaused(true);\n setTimeoutVal((val) => {\n if (val) clearTimeout(val);\n return null;\n });\n });\n }\n\n function startNextTimeout(cb: any, duration: number) {\n batch(() => {\n setIsPaused(false);\n setTimeoutVal((val) => {\n if (val) clearTimeout(val);\n return setTimeout(cb, duration) as any as number;\n });\n });\n }\n\n createEffect(\n on(\n () => ({ isPaused: isPaused(), slider: sliderRef() }),\n ({ isPaused, slider }) => {\n if (!slider) return;\n slider.container.dispatchEvent(\n new CustomEvent(\"autoswitch:update\", {\n bubbles: true,\n detail: { isPaused },\n }),\n );\n },\n ),\n );\n\n createEffect(\n on(\n () => ({ slider: sliderRef(), duration: props.duration }),\n ({ slider, duration }) => {\n if (!slider) return;\n\n function nextTimeout() {\n if (!slider) return;\n if (slider.options?.disabled) return;\n return startNextTimeout(() => {\n if (slider.slides.length <= 1) return;\n slider.next();\n }, duration);\n }\n\n function handleMouseEnter() {\n clearCurrentTimeout();\n }\n\n function handleMouseLeave() {\n nextTimeout();\n }\n\n (slider as any).pauseAutoplay = clearCurrentTimeout;\n (slider as any).startAutoplay = nextTimeout;\n\n slider.container.addEventListener(\"mouseenter\", clearCurrentTimeout);\n slider.container.addEventListener(\"mouseleave\", nextTimeout);\n\n slider.on(\"dragStarted\", clearCurrentTimeout);\n slider.on(\"slideChanged\", clearCurrentTimeout);\n slider.on(\"animationEnded\", nextTimeout);\n slider.on(\"updated\", nextTimeout);\n\n nextTimeout();\n\n return onCleanup(() => {\n slider.container.removeEventListener(\"mouseenter\", handleMouseEnter);\n slider.container.removeEventListener(\"mouseleave\", handleMouseLeave);\n\n slider.on(\"dragStarted\", clearCurrentTimeout, true);\n slider.on(\"slideChanged\", clearCurrentTimeout, true);\n slider.on(\"animationEnded\", nextTimeout, true);\n slider.on(\"updated\", nextTimeout, true);\n });\n },\n ),\n );\n\n createEffect(() => {\n const t = target();\n\n if (!t) return;\n\n const plugin = (slider: KeenSliderInstance | null) => {\n setSliderRef(slider);\n };\n\n const controller = new AbortController();\n\n addPlugin({\n target: t,\n plugin,\n controller,\n });\n\n return onCleanup(() => {\n controller.abort();\n });\n });\n};\n","import {\n customShadowlessElement,\n correctElementType,\n} from \"@brytdesigns/web-component-utils\";\nimport { KeenSliderAutoSwitch } from \"./components/index.js\";\n\ncustomShadowlessElement(\n KeenSliderAutoSwitch.Name,\n {\n target: \"keen-slider\",\n duration: 2000,\n },\n correctElementType(KeenSliderAutoSwitch.Component),\n);\n"]}
|
|
@@ -1,67 +1,68 @@
|
|
|
1
1
|
import { createMemo, createSignal, createEffect, on, onCleanup, batch } from 'solid-js';
|
|
2
2
|
import { addPlugin } from '@brytdesigns/web-component-keen-slider';
|
|
3
3
|
|
|
4
|
-
const
|
|
4
|
+
const Name = "keen-slider-auto-switch";
|
|
5
|
+
const Component = (props, { element }) => {
|
|
5
6
|
if (!props.target)
|
|
6
7
|
return console.warn(
|
|
7
|
-
|
|
8
|
+
`${Name}: Needs a proper target in order to properly extend a keen slider.`
|
|
8
9
|
);
|
|
9
10
|
const target = createMemo(() => {
|
|
10
11
|
let targetEl = element;
|
|
11
12
|
if (props.target) targetEl = document.querySelector(props.target);
|
|
12
13
|
if (!targetEl)
|
|
13
14
|
return console.warn(
|
|
14
|
-
|
|
15
|
+
`${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`
|
|
15
16
|
);
|
|
16
17
|
if (targetEl.tagName !== "KEEN-SLIDER")
|
|
17
18
|
targetEl = targetEl.querySelector("keen-slider");
|
|
18
19
|
if (!targetEl)
|
|
19
20
|
return console.warn(
|
|
20
|
-
|
|
21
|
+
`${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`
|
|
21
22
|
);
|
|
22
23
|
return targetEl;
|
|
23
24
|
});
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
if (val) clearTimeout(val);
|
|
36
|
-
return null;
|
|
37
|
-
});
|
|
25
|
+
const [sliderRef, setSliderRef] = createSignal(
|
|
26
|
+
null
|
|
27
|
+
);
|
|
28
|
+
const [_, setTimeoutVal] = createSignal(null);
|
|
29
|
+
const [isPaused, setIsPaused] = createSignal(false);
|
|
30
|
+
function clearCurrentTimeout() {
|
|
31
|
+
batch(() => {
|
|
32
|
+
setIsPaused(true);
|
|
33
|
+
setTimeoutVal((val) => {
|
|
34
|
+
if (val) clearTimeout(val);
|
|
35
|
+
return null;
|
|
38
36
|
});
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
function startNextTimeout(cb, duration) {
|
|
40
|
+
batch(() => {
|
|
41
|
+
setIsPaused(false);
|
|
42
|
+
setTimeoutVal((val) => {
|
|
43
|
+
if (val) clearTimeout(val);
|
|
44
|
+
return setTimeout(cb, duration);
|
|
47
45
|
});
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
}
|
|
59
|
-
)
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
)
|
|
63
|
-
|
|
64
|
-
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
createEffect(
|
|
49
|
+
on(
|
|
50
|
+
() => ({ isPaused: isPaused(), slider: sliderRef() }),
|
|
51
|
+
({ isPaused: isPaused2, slider }) => {
|
|
52
|
+
if (!slider) return;
|
|
53
|
+
slider.container.dispatchEvent(
|
|
54
|
+
new CustomEvent("autoswitch:update", {
|
|
55
|
+
bubbles: true,
|
|
56
|
+
detail: { isPaused: isPaused2 }
|
|
57
|
+
})
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
)
|
|
61
|
+
);
|
|
62
|
+
createEffect(
|
|
63
|
+
on(
|
|
64
|
+
() => ({ slider: sliderRef(), duration: props.duration }),
|
|
65
|
+
({ slider, duration }) => {
|
|
65
66
|
if (!slider) return;
|
|
66
67
|
function nextTimeout() {
|
|
67
68
|
if (!slider) return;
|
|
@@ -69,7 +70,7 @@ const KeenSliderAutoSwitch = (props, { element }) => {
|
|
|
69
70
|
return startNextTimeout(() => {
|
|
70
71
|
if (slider.slides.length <= 1) return;
|
|
71
72
|
slider.next();
|
|
72
|
-
});
|
|
73
|
+
}, duration);
|
|
73
74
|
}
|
|
74
75
|
function handleMouseEnter() {
|
|
75
76
|
clearCurrentTimeout();
|
|
@@ -94,20 +95,19 @@ const KeenSliderAutoSwitch = (props, { element }) => {
|
|
|
94
95
|
slider.on("animationEnded", nextTimeout, true);
|
|
95
96
|
slider.on("updated", nextTimeout, true);
|
|
96
97
|
});
|
|
97
|
-
}
|
|
98
|
-
)
|
|
99
|
-
|
|
100
|
-
setSliderRef(slider);
|
|
101
|
-
};
|
|
102
|
-
});
|
|
98
|
+
}
|
|
99
|
+
)
|
|
100
|
+
);
|
|
103
101
|
createEffect(() => {
|
|
104
102
|
const t = target();
|
|
105
103
|
if (!t) return;
|
|
106
|
-
const
|
|
104
|
+
const plugin = (slider) => {
|
|
105
|
+
setSliderRef(slider);
|
|
106
|
+
};
|
|
107
107
|
const controller = new AbortController();
|
|
108
108
|
addPlugin({
|
|
109
109
|
target: t,
|
|
110
|
-
plugin
|
|
110
|
+
plugin,
|
|
111
111
|
controller
|
|
112
112
|
});
|
|
113
113
|
return onCleanup(() => {
|
|
@@ -116,6 +116,6 @@ const KeenSliderAutoSwitch = (props, { element }) => {
|
|
|
116
116
|
});
|
|
117
117
|
};
|
|
118
118
|
|
|
119
|
-
export {
|
|
119
|
+
export { Component, Name };
|
|
120
120
|
//# sourceMappingURL=keen-slider-auto-switch.js.map
|
|
121
121
|
//# sourceMappingURL=keen-slider-auto-switch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/keen-slider-auto-switch.ts"],"names":["isPaused"],"mappings":";;;AAoBO,MAAM,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/keen-slider-auto-switch.ts"],"names":["isPaused"],"mappings":"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","file":"keen-slider-auto-switch.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport {\n createEffect,\n createSignal,\n createMemo,\n on,\n onCleanup,\n batch,\n} from \"solid-js\";\nimport {\n addPlugin,\n type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\n\ntype Props = {\n target: string;\n duration: number;\n};\n\nexport const Name = \"keen-slider-auto-switch\";\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 target = createMemo(() => {\n let targetEl: HTMLElement | null = element;\n if (props.target) targetEl = document.querySelector(props.target);\n if (!targetEl)\n return console.warn(\n `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`,\n );\n if (targetEl.tagName !== \"KEEN-SLIDER\")\n targetEl = targetEl.querySelector(\"keen-slider\");\n if (!targetEl)\n return console.warn(\n `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`,\n );\n return targetEl;\n });\n\n const [sliderRef, setSliderRef] = createSignal<KeenSliderInstance | null>(\n null,\n );\n const [_, setTimeoutVal] = createSignal<number | null>(null);\n const [isPaused, setIsPaused] = createSignal(false);\n\n function clearCurrentTimeout() {\n batch(() => {\n setIsPaused(true);\n setTimeoutVal((val) => {\n if (val) clearTimeout(val);\n return null;\n });\n });\n }\n\n function startNextTimeout(cb: any, duration: number) {\n batch(() => {\n setIsPaused(false);\n setTimeoutVal((val) => {\n if (val) clearTimeout(val);\n return setTimeout(cb, duration) as any as number;\n });\n });\n }\n\n createEffect(\n on(\n () => ({ isPaused: isPaused(), slider: sliderRef() }),\n ({ isPaused, slider }) => {\n if (!slider) return;\n slider.container.dispatchEvent(\n new CustomEvent(\"autoswitch:update\", {\n bubbles: true,\n detail: { isPaused },\n }),\n );\n },\n ),\n );\n\n createEffect(\n on(\n () => ({ slider: sliderRef(), duration: props.duration }),\n ({ slider, duration }) => {\n if (!slider) return;\n\n function nextTimeout() {\n if (!slider) return;\n if (slider.options?.disabled) return;\n return startNextTimeout(() => {\n if (slider.slides.length <= 1) return;\n slider.next();\n }, duration);\n }\n\n function handleMouseEnter() {\n clearCurrentTimeout();\n }\n\n function handleMouseLeave() {\n nextTimeout();\n }\n\n (slider as any).pauseAutoplay = clearCurrentTimeout;\n (slider as any).startAutoplay = nextTimeout;\n\n slider.container.addEventListener(\"mouseenter\", clearCurrentTimeout);\n slider.container.addEventListener(\"mouseleave\", nextTimeout);\n\n slider.on(\"dragStarted\", clearCurrentTimeout);\n slider.on(\"slideChanged\", clearCurrentTimeout);\n slider.on(\"animationEnded\", nextTimeout);\n slider.on(\"updated\", nextTimeout);\n\n nextTimeout();\n\n return onCleanup(() => {\n slider.container.removeEventListener(\"mouseenter\", handleMouseEnter);\n slider.container.removeEventListener(\"mouseleave\", handleMouseLeave);\n\n slider.on(\"dragStarted\", clearCurrentTimeout, true);\n slider.on(\"slideChanged\", clearCurrentTimeout, true);\n slider.on(\"animationEnded\", nextTimeout, true);\n slider.on(\"updated\", nextTimeout, true);\n });\n },\n ),\n );\n\n createEffect(() => {\n const t = target();\n\n if (!t) return;\n\n const plugin = (slider: KeenSliderInstance | null) => {\n setSliderRef(slider);\n };\n\n const controller = new AbortController();\n\n addPlugin({\n target: t,\n plugin,\n controller,\n });\n\n return onCleanup(() => {\n controller.abort();\n });\n });\n};\n"]}
|
package/dist/main/index.js
CHANGED
|
@@ -2,12 +2,12 @@ import { customShadowlessElement, correctElementType } from '@brytdesigns/web-co
|
|
|
2
2
|
import { KeenSliderAutoSwitch } from './components/index.js';
|
|
3
3
|
|
|
4
4
|
customShadowlessElement(
|
|
5
|
-
|
|
5
|
+
KeenSliderAutoSwitch.Name,
|
|
6
6
|
{
|
|
7
|
-
target: "",
|
|
7
|
+
target: "keen-slider",
|
|
8
8
|
duration: 2e3
|
|
9
9
|
},
|
|
10
|
-
correctElementType(KeenSliderAutoSwitch)
|
|
10
|
+
correctElementType(KeenSliderAutoSwitch.Component)
|
|
11
11
|
);
|
|
12
12
|
//# sourceMappingURL=index.js.map
|
|
13
13
|
//# sourceMappingURL=index.js.map
|
package/dist/main/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;AAMA,uBAAA;AAAA,EACE,
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;AAMA,uBAAA;AAAA,EACE,oBAAqB,CAAA,IAAA;AAAA,EACrB;AAAA,IACE,MAAQ,EAAA,aAAA;AAAA,IACR,QAAU,EAAA;AAAA,GACZ;AAAA,EACA,kBAAA,CAAmB,qBAAqB,SAAS;AACnD,CAAA","file":"index.js","sourcesContent":["import {\n customShadowlessElement,\n correctElementType,\n} from \"@brytdesigns/web-component-utils\";\nimport { KeenSliderAutoSwitch } from \"./components/index.js\";\n\ncustomShadowlessElement(\n KeenSliderAutoSwitch.Name,\n {\n target: \"keen-slider\",\n duration: 2000,\n },\n correctElementType(KeenSliderAutoSwitch.Component),\n);\n"]}
|
package/package.json
CHANGED