@brytdesigns/web-component-keen-slider-scrollbar 1.0.10 → 1.0.12

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 (3) hide show
  1. package/dist/main/components/keen-slider-scrollbar.js +45 -17
  2. package/dist/main/components/keen-slider-scrollbar.js.map +1 -1
  3. package/package.json +3 -3
package/dist/main/components/keen-slider-scrollbar.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import html from 'solid-js/html';
2
- import { createSignal, createMemo, on, createEffect, onCleanup, Show, For } from 'solid-js';
3
- import { getKeenSliderContext } from '@brytdesigns/web-component-keen-slider';
2
+ import { createMemo, createSignal, on, createEffect, onCleanup, Show, For } from 'solid-js';
3
+ import { addPlugin } from '@brytdesigns/web-component-keen-slider';
4
4
  import { Draggable } from '@neodrag/vanilla';
5
5
  import { animate } from 'popmotion';
6
6
  import { getMaxSlides, srOnly, findClosestBreakpoint, calculateMidpointPositionFromBP, getRelativeBreakpoint, constrain } from '../utils.js';
@@ -10,19 +10,22 @@ const KeenSliderScrollbar = (props, { element }) => {
10
10
  return console.warn(
11
11
  "keen-slider-scrollbar: Needs a proper target in order to properly extend a keen slider."
12
12
  );
13
- let targetEl = element;
14
- if (props.target) targetEl = document.querySelector(props.target);
15
- if (!targetEl)
16
- return console.warn(
17
- "keen-slider-scrollbar: Could not find the target element. Make sure it exists and is a keen-slider element."
18
- );
19
- if (targetEl.tagName !== "KEEN-SLIDER")
20
- targetEl = targetEl.querySelector("keen-slider");
21
- if (!targetEl)
22
- return console.warn(
23
- "keen-slider-scrollbar: Could not find the target element. Make sure it exists and is a keen-slider element."
24
- );
25
- const [slider] = getKeenSliderContext(targetEl);
13
+ const target = createMemo(() => {
14
+ let targetEl = element;
15
+ if (props.target) targetEl = document.querySelector(props.target);
16
+ if (!targetEl)
17
+ return console.warn(
18
+ "keen-slider-scrollbar: Could not find the target element. Make sure it exists and is a keen-slider element."
19
+ );
20
+ if (targetEl.tagName !== "KEEN-SLIDER")
21
+ targetEl = targetEl.querySelector("keen-slider");
22
+ if (!targetEl)
23
+ return console.warn(
24
+ "keen-slider-scrollbar: Could not find the target element. Make sure it exists and is a keen-slider element."
25
+ );
26
+ return targetEl;
27
+ });
28
+ const [slider, setSlider] = createSignal();
26
29
  const [thumb, setThumb] = createSignal(null);
27
30
  const [position, setPosition] = createSignal({ x: 0, y: 0 });
28
31
  const [maxIdx, setMaxIdx] = createSignal(
@@ -33,7 +36,9 @@ const KeenSliderScrollbar = (props, { element }) => {
33
36
  const maxSlides = createMemo(
34
37
  on(maxIdx, (maxIdx2) => {
35
38
  if (!maxIdx2) return 0;
36
- return getMaxSlides(slider());
39
+ const s = slider();
40
+ if (!s) return 0;
41
+ return getMaxSlides(s);
37
42
  })
38
43
  );
39
44
  const draggable = createMemo(
@@ -51,6 +56,8 @@ const KeenSliderScrollbar = (props, { element }) => {
51
56
  onDrag: ({ offsetX, offsetY }) => setPosition((p) => ({ ...p, x: offsetX, y: offsetY })),
52
57
  onDragEnd: (position2) => {
53
58
  if (!breakpointsContainer) return;
59
+ const s = slider();
60
+ if (!s) return;
54
61
  const bp = findClosestBreakpoint(
55
62
  position2,
56
63
  breakpointsContainer.children,
@@ -60,7 +67,7 @@ const KeenSliderScrollbar = (props, { element }) => {
60
67
  if (!bp) return;
61
68
  const p = calculateMidpointPositionFromBP(bp, element, thumb2);
62
69
  animateScrollbarPosition(p);
63
- updateSliderPosition(bp, slider());
70
+ updateSliderPosition(bp, s);
64
71
  setCurrentIdx(parseInt(bp.getAttribute("data-index") || "0"));
65
72
  },
66
73
  ignoreMultitouch: true
@@ -105,6 +112,7 @@ const KeenSliderScrollbar = (props, { element }) => {
105
112
  createEffect(
106
113
  on(maxSlides, (maxSlides2) => {
107
114
  const s = slider();
115
+ if (!s) return;
108
116
  if (!maxSlides2) return;
109
117
  element.style.setProperty(
110
118
  "--keen-slider-scrollbar--total-slides",
@@ -123,9 +131,11 @@ const KeenSliderScrollbar = (props, { element }) => {
123
131
  setPosition(p);
124
132
  setMaxIdx(slider2.track.details.maxIdx);
125
133
  }
134
+ s.on("created", handleUpdate);
126
135
  s.on("detailsChanged", updateDetails);
127
136
  s.on("updated", handleUpdate);
128
137
  return onCleanup(() => {
138
+ s.on("created", handleUpdate, true);
129
139
  s.on("detailsChanged", updateDetails, true);
130
140
  s.on("updated", handleUpdate, true);
131
141
  });
@@ -178,6 +188,24 @@ const KeenSliderScrollbar = (props, { element }) => {
178
188
  else element.setAttribute("is-hidden", `${false}`);
179
189
  })
180
190
  );
191
+ createEffect(() => {
192
+ const t = target();
193
+ if (!t) return;
194
+ const controller = new AbortController();
195
+ function plugin(slider2) {
196
+ setSlider(slider2);
197
+ setMaxIdx(slider2.track.details.maxIdx);
198
+ }
199
+ addPlugin({
200
+ target: t,
201
+ plugin,
202
+ controller
203
+ });
204
+ return onCleanup(() => {
205
+ controller.abort();
206
+ setSlider(void 0);
207
+ });
208
+ });
181
209
  function animateScrollbarPosition(p) {
182
210
  animate({
183
211
  from: position().x,
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","p"],"mappings":"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","file":"keen-slider-scrollbar.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport html from \"solid-js/html\";\nimport {\n createEffect,\n createSignal,\n createMemo,\n on,\n onCleanup,\n Show,\n For,\n type Accessor,\n} from \"solid-js\";\nimport {\n getKeenSliderContext,\n type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\nimport { Draggable } from \"@neodrag/vanilla\";\nimport { animate } from \"popmotion\";\n\nimport {\n getRelativeBreakpoint,\n calculateMidpointPositionFromBP,\n findClosestBreakpoint,\n getMaxSlides,\n constrain,\n srOnly,\n} from \"../utils.js\";\n\ntype KeenSliderScrollbarProps = {\n target: string;\n isHidden: boolean;\n isVertical: boolean;\n};\n\nexport const KeenSliderScrollbar: CorrectComponentType<\n KeenSliderScrollbarProps\n> = (props, { element }) => {\n if (!props.target)\n return console.warn(\n \"keen-slider-scrollbar: Needs a proper target in order to properly extend a keen slider.\",\n );\n let targetEl: HTMLElement | null = element;\n if (props.target) targetEl = document.querySelector(props.target);\n if (!targetEl)\n return console.warn(\n \"keen-slider-scrollbar: 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 \"keen-slider-scrollbar: Could not find the target element. Make sure it exists and is a keen-slider element.\",\n );\n const [slider] = getKeenSliderContext(targetEl);\n\n const [thumb, setThumb] = createSignal<HTMLElement | null>(null);\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 return getMaxSlides(slider());\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: position(),\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 setPosition((p) => ({ ...p, x: offsetX, y: offsetY })),\n onDragEnd: (position) => {\n if (!breakpointsContainer) 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, slider());\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n },\n ignoreMultitouch: true,\n });\n\n createEffect(\n on(position, (position) => {\n instance.updateOptions({\n position,\n });\n }),\n );\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 if (!maxSlides) return;\n element.style.setProperty(\n \"--keen-slider-scrollbar--total-slides\",\n `${maxSlides}`,\n );\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 setPosition(p);\n setMaxIdx(slider.track.details.maxIdx);\n }\n\n s.on(\"detailsChanged\", updateDetails);\n s.on(\"updated\", handleUpdate);\n\n return onCleanup(() => {\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(\"keen-slider-scrollbar__breakpoint\"))\n 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 function animateScrollbarPosition(p: { x: number; y: number }) {\n animate({\n from: position().x,\n to: p.x,\n onUpdate(latest) {\n return setPosition((p) => ({ ...p, x: latest }));\n },\n });\n animate({\n from: position().y,\n to: p.y,\n onUpdate(latest) {\n return setPosition((p) => ({ ...p, y: latest }));\n },\n });\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=\"keen-slider-scrollbar__thumb\"\n ref=${(el: HTMLElement) => setThumb(el)}\n ></div>\n <ul\n class=\"keen-slider-scrollbar__breakpoints\"\n ref=${(el: HTMLElement) => (breakpointsContainer = el)}\n >\n <${For} each=${() => Array(maxSlides()).fill(0)}>\n ${(_: number, idx: Accessor<number>) => html`\n <li class=\"keen-slider-scrollbar__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,"sources":["../../../src/components/keen-slider-scrollbar.ts"],"names":["maxIdx","thumb","position","draggable","slider","maxSlides","p"],"mappings":"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","file":"keen-slider-scrollbar.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport html from \"solid-js/html\";\nimport {\n createEffect,\n createSignal,\n createMemo,\n on,\n onCleanup,\n Show,\n For,\n type Accessor,\n} from \"solid-js\";\nimport {\n addPlugin,\n type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\nimport { Draggable } from \"@neodrag/vanilla\";\nimport { animate } from \"popmotion\";\n\nimport {\n getRelativeBreakpoint,\n calculateMidpointPositionFromBP,\n findClosestBreakpoint,\n getMaxSlides,\n constrain,\n srOnly,\n} from \"../utils.js\";\n\ntype KeenSliderScrollbarProps = {\n target: string;\n isHidden: boolean;\n isVertical: boolean;\n};\n\nexport const KeenSliderScrollbar: CorrectComponentType<\n KeenSliderScrollbarProps\n> = (props, { element }) => {\n if (!props.target)\n return console.warn(\n \"keen-slider-scrollbar: Needs a proper target in order to properly extend a keen slider.\",\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 \"keen-slider-scrollbar: 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 \"keen-slider-scrollbar: Could not find the target element. Make sure it exists and is a keen-slider element.\",\n );\n\n return targetEl;\n });\n\n const [slider, setSlider] = createSignal<KeenSliderInstance>();\n\n const [thumb, setThumb] = createSignal<HTMLElement | null>(null);\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: position(),\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 setPosition((p) => ({ ...p, x: offsetX, y: offsetY })),\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 createEffect(\n on(position, (position) => {\n instance.updateOptions({\n position,\n });\n }),\n );\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 if (!s) return;\n if (!maxSlides) return;\n element.style.setProperty(\n \"--keen-slider-scrollbar--total-slides\",\n `${maxSlides}`,\n );\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 setPosition(p);\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(\"keen-slider-scrollbar__breakpoint\"))\n 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 createEffect(() => {\n const t = target();\n if (!t) return;\n\n const controller = new AbortController();\n\n function plugin(slider: KeenSliderInstance) {\n setSlider(slider);\n setMaxIdx(slider.track.details.maxIdx);\n }\n\n addPlugin({\n target: t,\n plugin,\n controller,\n });\n\n return onCleanup(() => {\n controller.abort();\n setSlider(undefined);\n });\n });\n\n function animateScrollbarPosition(p: { x: number; y: number }) {\n animate({\n from: position().x,\n to: p.x,\n onUpdate(latest) {\n return setPosition((p) => ({ ...p, x: latest }));\n },\n });\n animate({\n from: position().y,\n to: p.y,\n onUpdate(latest) {\n return setPosition((p) => ({ ...p, y: latest }));\n },\n });\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=\"keen-slider-scrollbar__thumb\"\n ref=${(el: HTMLElement) => setThumb(el)}\n ></div>\n <ul\n class=\"keen-slider-scrollbar__breakpoints\"\n ref=${(el: HTMLElement) => (breakpointsContainer = el)}\n >\n <${For} each=${() => Array(maxSlides()).fill(0)}>\n ${(_: number, idx: Accessor<number>) => html`\n <li class=\"keen-slider-scrollbar__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"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brytdesigns/web-component-keen-slider-scrollbar",
3
- "version": "1.0.10",
3
+ "version": "1.0.12",
4
4
  "description": "Keen slider scrollbar web component",
5
5
  "main": "./dist/main/index.js",
6
6
  "module": "./dist/main/index.js",
@@ -24,8 +24,8 @@
24
24
  "popmotion": "^11.0.5",
25
25
  "solid-element": "^1.9.1",
26
26
  "solid-js": "^1.9.6",
27
- "@brytdesigns/web-component-keen-slider": "1.0.7",
28
- "@brytdesigns/web-component-utils": "0.1.9"
27
+ "@brytdesigns/web-component-keen-slider": "1.0.8",
28
+ "@brytdesigns/web-component-utils": "0.1.10"
29
29
  },
30
30
  "devDependencies": {
31
31
  "dts-bundle-generator": "^9.5.1",