@brytdesigns/web-component-keen-slider 1.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.
- package/dist/main/KeenSlider.js +128 -0
- package/dist/main/KeenSlider.js.map +1 -0
- package/dist/main/components/index.js +3 -0
- package/dist/main/components/index.js.map +1 -0
- package/dist/main/components/keen-slider.js +27 -0
- package/dist/main/components/keen-slider.js.map +1 -0
- package/dist/main/hooks/index.js +3 -0
- package/dist/main/hooks/index.js.map +1 -0
- package/dist/main/hooks/useKeenSlider.js +117 -0
- package/dist/main/hooks/useKeenSlider.js.map +1 -0
- package/dist/main/index.d.ts +38 -0
- package/dist/main/index.js +18 -0
- package/dist/main/index.js.map +1 -0
- package/dist/main/utils.js +18 -0
- package/dist/main/utils.js.map +1 -0
- package/package.json +37 -0
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import _KeenSlider from 'keen-slider';
|
|
2
|
+
import { constrain } from './utils';
|
|
3
|
+
|
|
4
|
+
function attachMoreDetails(prevSlide) {
|
|
5
|
+
return function(slider) {
|
|
6
|
+
if (slider.track.details.rel != slider.animator.targetIdx) return;
|
|
7
|
+
slider.direction = slider.track.details.rel > prevSlide ? "forward" : "backward";
|
|
8
|
+
prevSlide = slider.track.details.rel;
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
const attachAriaAttributes = (slider) => {
|
|
12
|
+
const maxIdx = slider?.track?.details?.maxIdx === Infinity ? slider.track.details.length : slider?.track?.details?.maxIdx || 0;
|
|
13
|
+
slider.container.setAttribute("role", "listbox");
|
|
14
|
+
slider.container.setAttribute(
|
|
15
|
+
"aria-orientation",
|
|
16
|
+
slider.options.vertical ? "vertical" : "horizontal"
|
|
17
|
+
);
|
|
18
|
+
slider.container.setAttribute("aria-multiselectable", "false");
|
|
19
|
+
slider.container.setAttribute("aria-label", "Slider");
|
|
20
|
+
slider.container.setAttribute("tabindex", "0");
|
|
21
|
+
slider.container.setAttribute("aria-live", "polite");
|
|
22
|
+
slider.container.setAttribute("aria-atomic", "true");
|
|
23
|
+
slider.container.setAttribute("aria-live", "polite");
|
|
24
|
+
slider.container.setAttribute("aria-busy", "false");
|
|
25
|
+
slider.container.setAttribute("aria-valuemin", "0");
|
|
26
|
+
slider.container.setAttribute("aria-valuemax", `${maxIdx}`);
|
|
27
|
+
slider.container.setAttribute(
|
|
28
|
+
"aria-valuenow",
|
|
29
|
+
`${slider?.track?.details?.rel || 0}`
|
|
30
|
+
);
|
|
31
|
+
function getMaxRel(rel, perView = 1) {
|
|
32
|
+
return Math.floor(rel + perView - 1);
|
|
33
|
+
}
|
|
34
|
+
function slideIsActive(idx) {
|
|
35
|
+
const perView = slider.options?.slides?.perView || 1, rel = slider.track.details.rel, maxRel = getMaxRel(rel, perView);
|
|
36
|
+
return rel <= idx && idx <= maxRel;
|
|
37
|
+
}
|
|
38
|
+
async function updateTabIndexes(slide, tabindex) {
|
|
39
|
+
const focusableElements = Array.from(
|
|
40
|
+
slide.querySelectorAll(
|
|
41
|
+
"input, a, button:not(:disabled), textarea, select, textarea, [tabindex]"
|
|
42
|
+
)
|
|
43
|
+
);
|
|
44
|
+
focusableElements.forEach((element) => {
|
|
45
|
+
element.setAttribute("tabindex", tabindex);
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
function updateAriaActiveSlide(slide) {
|
|
49
|
+
slide.setAttribute("aria-selected", "true");
|
|
50
|
+
slide.setAttribute("aria-hidden", "false");
|
|
51
|
+
slide.setAttribute("tabindex", "0");
|
|
52
|
+
updateTabIndexes(slide, "0");
|
|
53
|
+
}
|
|
54
|
+
function updateAriaInActiveSlide(slide) {
|
|
55
|
+
slide.setAttribute("aria-selected", "false");
|
|
56
|
+
slide.setAttribute("aria-hidden", "true");
|
|
57
|
+
slide.setAttribute("tabindex", "-1");
|
|
58
|
+
updateTabIndexes(slide, "-1");
|
|
59
|
+
}
|
|
60
|
+
function updateSlideAriaAttributes(slider2) {
|
|
61
|
+
if (slider2.options.disabled) {
|
|
62
|
+
slider2.slides.forEach((slide, i) => {
|
|
63
|
+
slide.setAttribute("role", "option");
|
|
64
|
+
updateAriaActiveSlide(slide);
|
|
65
|
+
});
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
slider2.slides.forEach((slide, i) => {
|
|
69
|
+
slide.setAttribute("role", "option");
|
|
70
|
+
if (slideIsActive(i)) updateAriaActiveSlide(slide);
|
|
71
|
+
else updateAriaInActiveSlide(slide);
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
slider.on("slideChanged", updateSlideAriaAttributes);
|
|
75
|
+
slider.on("created", updateSlideAriaAttributes);
|
|
76
|
+
slider.on("optionsChanged", updateSlideAriaAttributes);
|
|
77
|
+
slider.on("updated", updateSlideAriaAttributes);
|
|
78
|
+
};
|
|
79
|
+
class KeenSlider extends _KeenSlider {
|
|
80
|
+
options;
|
|
81
|
+
direction = null;
|
|
82
|
+
constructor(element, config, plugins = []) {
|
|
83
|
+
super(element, config, plugins);
|
|
84
|
+
this.options = config;
|
|
85
|
+
let prevSlide = 0;
|
|
86
|
+
this.direction = null;
|
|
87
|
+
this.on("slideChanged", attachMoreDetails(prevSlide));
|
|
88
|
+
attachAriaAttributes(this);
|
|
89
|
+
this.next = function() {
|
|
90
|
+
if (!this.options?.slides) return;
|
|
91
|
+
if (typeof this.options.slides === "number" || typeof this.options.slides === "function")
|
|
92
|
+
return;
|
|
93
|
+
if ("perScroll" in this.options.slides === false) return;
|
|
94
|
+
const amount = this.options?.slides?.perScroll || 1;
|
|
95
|
+
if (!this.options.loop) {
|
|
96
|
+
return this.moveToIdx(
|
|
97
|
+
constrain(
|
|
98
|
+
this.track.details.rel + amount,
|
|
99
|
+
0,
|
|
100
|
+
this.track.details.maxIdx
|
|
101
|
+
)
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
return this.moveToIdx(constrain(this.track.details.abs + amount), true);
|
|
105
|
+
};
|
|
106
|
+
this.prev = function() {
|
|
107
|
+
if (!this.options?.slides) return;
|
|
108
|
+
if (typeof this.options.slides === "number" || typeof this.options.slides === "function")
|
|
109
|
+
return;
|
|
110
|
+
if ("perScroll" in this.options.slides === false) return;
|
|
111
|
+
const amount = this.options?.slides?.perScroll || 1;
|
|
112
|
+
if (!this.options.loop) {
|
|
113
|
+
this.moveToIdx(
|
|
114
|
+
constrain(
|
|
115
|
+
this.track.details.rel - amount,
|
|
116
|
+
0,
|
|
117
|
+
this.track.details.maxIdx
|
|
118
|
+
)
|
|
119
|
+
);
|
|
120
|
+
}
|
|
121
|
+
return this.moveToIdx(constrain(this.track.details.abs - amount), true);
|
|
122
|
+
};
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
export { KeenSlider as default };
|
|
127
|
+
//# sourceMappingURL=KeenSlider.js.map
|
|
128
|
+
//# sourceMappingURL=KeenSlider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/KeenSlider.ts"],"names":["slider"],"mappings":";;;AAgDA,SAAS,kBAAkB,SAAmB,EAAA;AAC5C,EAAA,OAAO,SAAU,MAA4B,EAAA;AAC3C,IAAA,IAAI,OAAO,KAAM,CAAA,OAAA,CAAQ,GAAO,IAAA,MAAA,CAAO,SAAS,SAAW,EAAA;AAE3D,IAAC,OAAsB,SACrB,GAAA,MAAA,CAAO,MAAM,OAAQ,CAAA,GAAA,GAAM,YAAY,SAAY,GAAA,UAAA;AAErD,IAAY,SAAA,GAAA,MAAA,CAAO,MAAM,OAAQ,CAAA,GAAA;AAAA,GACnC;AACF;AAEA,MAAM,oBAAA,GAAyC,CAAC,MAAW,KAAA;AACzD,EAAA,MAAM,MACJ,GAAA,MAAA,EAAQ,KAAO,EAAA,OAAA,EAAS,MAAW,KAAA,QAAA,GAC/B,MAAO,CAAA,KAAA,CAAM,OAAQ,CAAA,MAAA,GACrB,MAAQ,EAAA,KAAA,EAAO,SAAS,MAAU,IAAA,CAAA;AACxC,EAAO,MAAA,CAAA,SAAA,CAAU,YAAa,CAAA,MAAA,EAAQ,SAAS,CAAA;AAC/C,EAAA,MAAA,CAAO,SAAU,CAAA,YAAA;AAAA,IACf,kBAAA;AAAA,IACA,MAAA,CAAO,OAAQ,CAAA,QAAA,GAAW,UAAa,GAAA;AAAA,GACzC;AACA,EAAO,MAAA,CAAA,SAAA,CAAU,YAAa,CAAA,sBAAA,EAAwB,OAAO,CAAA;AAC7D,EAAO,MAAA,CAAA,SAAA,CAAU,YAAa,CAAA,YAAA,EAAc,QAAQ,CAAA;AACpD,EAAO,MAAA,CAAA,SAAA,CAAU,YAAa,CAAA,UAAA,EAAY,GAAG,CAAA;AAC7C,EAAO,MAAA,CAAA,SAAA,CAAU,YAAa,CAAA,WAAA,EAAa,QAAQ,CAAA;AACnD,EAAO,MAAA,CAAA,SAAA,CAAU,YAAa,CAAA,aAAA,EAAe,MAAM,CAAA;AACnD,EAAO,MAAA,CAAA,SAAA,CAAU,YAAa,CAAA,WAAA,EAAa,QAAQ,CAAA;AACnD,EAAO,MAAA,CAAA,SAAA,CAAU,YAAa,CAAA,WAAA,EAAa,OAAO,CAAA;AAClD,EAAO,MAAA,CAAA,SAAA,CAAU,YAAa,CAAA,eAAA,EAAiB,GAAG,CAAA;AAClD,EAAA,MAAA,CAAO,SAAU,CAAA,YAAA,CAAa,eAAiB,EAAA,CAAA,EAAG,MAAM,CAAE,CAAA,CAAA;AAC1D,EAAA,MAAA,CAAO,SAAU,CAAA,YAAA;AAAA,IACf,eAAA;AAAA,IACA,CAAG,EAAA,MAAA,EAAQ,KAAO,EAAA,OAAA,EAAS,OAAO,CAAC,CAAA;AAAA,GACrC;AAEA,EAAS,SAAA,SAAA,CAAU,GAAa,EAAA,OAAA,GAAU,CAAG,EAAA;AAC3C,IAAA,OAAO,IAAK,CAAA,KAAA,CAAM,GAAM,GAAA,OAAA,GAAU,CAAC,CAAA;AAAA;AAGrC,EAAA,SAAS,cAAc,GAAa,EAAA;AAClC,IAAA,MAAM,OAAY,GAAA,MAAA,CAAO,OAAS,EAAA,MAAA,EAAgB,WAAsB,CACtE,EAAA,GAAA,GAAM,MAAO,CAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,EAC3B,MAAS,GAAA,SAAA,CAAU,KAAK,OAAO,CAAA;AAEjC,IAAO,OAAA,GAAA,IAAO,OAAO,GAAO,IAAA,MAAA;AAAA;AAG9B,EAAe,eAAA,gBAAA,CAAiB,OAAoB,QAAkB,EAAA;AACpE,IAAA,MAAM,oBAAoB,KAAM,CAAA,IAAA;AAAA,MAC9B,KAAM,CAAA,gBAAA;AAAA,QACJ;AAAA;AACF,KACF;AACA,IAAkB,iBAAA,CAAA,OAAA,CAAQ,CAAC,OAAY,KAAA;AACrC,MAAQ,OAAA,CAAA,YAAA,CAAa,YAAY,QAAQ,CAAA;AAAA,KAC1C,CAAA;AAAA;AAGH,EAAA,SAAS,sBAAsB,KAAoB,EAAA;AACjD,IAAM,KAAA,CAAA,YAAA,CAAa,iBAAiB,MAAM,CAAA;AAC1C,IAAM,KAAA,CAAA,YAAA,CAAa,eAAe,OAAO,CAAA;AACzC,IAAM,KAAA,CAAA,YAAA,CAAa,YAAY,GAAG,CAAA;AAClC,IAAA,gBAAA,CAAiB,OAAO,GAAG,CAAA;AAAA;AAG7B,EAAA,SAAS,wBAAwB,KAAoB,EAAA;AACnD,IAAM,KAAA,CAAA,YAAA,CAAa,iBAAiB,OAAO,CAAA;AAC3C,IAAM,KAAA,CAAA,YAAA,CAAa,eAAe,MAAM,CAAA;AACxC,IAAM,KAAA,CAAA,YAAA,CAAa,YAAY,IAAI,CAAA;AACnC,IAAA,gBAAA,CAAiB,OAAO,IAAI,CAAA;AAAA;AAG9B,EAAA,SAAS,0BAA0BA,OAA6B,EAAA;AAC9D,IAAIA,IAAAA,OAAAA,CAAO,QAAQ,QAAU,EAAA;AAC3B,MAAAA,OAAO,CAAA,MAAA,CAAO,OAAQ,CAAA,CAAC,OAAO,CAAM,KAAA;AAClC,QAAM,KAAA,CAAA,YAAA,CAAa,QAAQ,QAAQ,CAAA;AACnC,QAAA,qBAAA,CAAsB,KAAK,CAAA;AAAA,OAC5B,CAAA;AACD,MAAA;AAAA;AAGF,IAAAA,OAAO,CAAA,MAAA,CAAO,OAAQ,CAAA,CAAC,OAAO,CAAM,KAAA;AAClC,MAAM,KAAA,CAAA,YAAA,CAAa,QAAQ,QAAQ,CAAA;AACnC,MAAA,IAAI,aAAc,CAAA,CAAC,CAAG,EAAA,qBAAA,CAAsB,KAAK,CAAA;AAAA,mCACpB,KAAK,CAAA;AAAA,KACnC,CAAA;AAAA;AAGH,EAAO,MAAA,CAAA,EAAA,CAAG,gBAAgB,yBAAyB,CAAA;AACnD,EAAO,MAAA,CAAA,EAAA,CAAG,WAAW,yBAAyB,CAAA;AAC9C,EAAO,MAAA,CAAA,EAAA,CAAG,kBAAkB,yBAAyB,CAAA;AACrD,EAAO,MAAA,CAAA,EAAA,CAAG,WAAW,yBAAyB,CAAA;AAChD,CAAA;AAEA,MAAO,mBAAiC,WAAY,CAAA;AAAA,EACzC,OAAA;AAAA,EACT,SAA2C,GAAA,IAAA;AAAA,EAC3C,WACE,CAAA,OAAA,EACA,MACA,EAAA,OAAA,GAA+B,EAC/B,EAAA;AACA,IAAM,KAAA,CAAA,OAAA,EAAS,QAAQ,OAAO,CAAA;AAC9B,IAAA,IAAA,CAAK,OAAU,GAAA,MAAA;AACf,IAAA,IAAI,SAAY,GAAA,CAAA;AAEhB,IAAA,IAAA,CAAK,SAAY,GAAA,IAAA;AACjB,IAAA,IAAA,CAAK,EAAG,CAAA,cAAA,EAAgB,iBAAkB,CAAA,SAAS,CAAQ,CAAA;AAE3D,IAAA,oBAAA,CAAqB,IAAI,CAAA;AAEzB,IAAA,IAAA,CAAK,OAAO,WAAY;AACtB,MAAI,IAAA,CAAC,IAAK,CAAA,OAAA,EAAS,MAAQ,EAAA;AAC3B,MACE,IAAA,OAAO,KAAK,OAAQ,CAAA,MAAA,KAAW,YAC/B,OAAO,IAAA,CAAK,QAAQ,MAAW,KAAA,UAAA;AAE/B,QAAA;AACF,MAAA,IAAI,WAAe,IAAA,IAAA,CAAK,OAAQ,CAAA,MAAA,KAAW,KAAO,EAAA;AAClD,MAAA,MAAM,MAAS,GAAA,IAAA,CAAK,OAAS,EAAA,MAAA,EAAQ,SAAa,IAAA,CAAA;AAClD,MAAI,IAAA,CAAC,IAAK,CAAA,OAAA,CAAQ,IAAM,EAAA;AACtB,QAAA,OAAO,IAAK,CAAA,SAAA;AAAA,UACV,SAAA;AAAA,YACE,IAAA,CAAK,KAAM,CAAA,OAAA,CAAQ,GAAM,GAAA,MAAA;AAAA,YACzB,CAAA;AAAA,YACA,IAAA,CAAK,MAAM,OAAQ,CAAA;AAAA;AACrB,SACF;AAAA;AAEF,MAAO,OAAA,IAAA,CAAK,UAAU,SAAU,CAAA,IAAA,CAAK,MAAM,OAAQ,CAAA,GAAA,GAAM,MAAM,CAAA,EAAG,IAAI,CAAA;AAAA,KACxE;AAEA,IAAA,IAAA,CAAK,OAAO,WAAY;AACtB,MAAI,IAAA,CAAC,IAAK,CAAA,OAAA,EAAS,MAAQ,EAAA;AAC3B,MACE,IAAA,OAAO,KAAK,OAAQ,CAAA,MAAA,KAAW,YAC/B,OAAO,IAAA,CAAK,QAAQ,MAAW,KAAA,UAAA;AAE/B,QAAA;AACF,MAAA,IAAI,WAAe,IAAA,IAAA,CAAK,OAAQ,CAAA,MAAA,KAAW,KAAO,EAAA;AAClD,MAAA,MAAM,MAAS,GAAA,IAAA,CAAK,OAAS,EAAA,MAAA,EAAQ,SAAa,IAAA,CAAA;AAClD,MAAI,IAAA,CAAC,IAAK,CAAA,OAAA,CAAQ,IAAM,EAAA;AACtB,QAAK,IAAA,CAAA,SAAA;AAAA,UACH,SAAA;AAAA,YACE,IAAA,CAAK,KAAM,CAAA,OAAA,CAAQ,GAAM,GAAA,MAAA;AAAA,YACzB,CAAA;AAAA,YACA,IAAA,CAAK,MAAM,OAAQ,CAAA;AAAA;AACrB,SACF;AAAA;AAEF,MAAO,OAAA,IAAA,CAAK,UAAU,SAAU,CAAA,IAAA,CAAK,MAAM,OAAQ,CAAA,GAAA,GAAM,MAAM,CAAA,EAAG,IAAI,CAAA;AAAA,KACxE;AAAA;AAEJ","file":"KeenSlider.js","sourcesContent":["import type { ICustomElement } from \"component-register\";\n\nimport _KeenSlider, {\n type KeenSliderOptions as _KeenSliderOptions,\n type KeenSliderPlugin as _KeenSliderPlugin,\n type KeenSliderInstance as _KeenSliderInstance,\n type KeenSliderHooks as _KeenSliderHooks,\n} from \"keen-slider\";\n\nimport { constrain } from \"./utils\";\n\nexport type KeenSliderHooks = _KeenSliderHooks;\n\nexport type KeenSliderInstance<\n O = {},\n P = {},\n H extends _KeenSliderHooks = _KeenSliderHooks,\n> = _KeenSliderInstance<O, P, H>;\n\ntype ExtendedSlidesOption = NonNullable<\n _KeenSliderInstance[\"options\"][\"slides\"]\n> & {\n perScroll?: number;\n};\n\ntype ExtendedKeenSliderOptions = Omit<\n _KeenSliderInstance[\"options\"],\n \"slides\"\n> & {\n slides?: ExtendedSlidesOption;\n};\n\nexport type KeenSliderOptions<\n O = {},\n P = {},\n H extends _KeenSliderHooks = _KeenSliderHooks,\n> = _KeenSliderOptions<O, P, H> & {\n slides: {\n perScroll?: number;\n } & _KeenSliderOptions<O, P, H>[\"slides\"];\n};\n\nexport type KeenSliderPlugin<\n O = {},\n P = {},\n H extends _KeenSliderHooks = _KeenSliderHooks,\n> = _KeenSliderPlugin<O, P, H>;\n\nfunction attachMoreDetails(prevSlide: number) {\n return function (slider: KeenSliderInstance) {\n if (slider.track.details.rel != slider.animator.targetIdx) return;\n\n (slider as KeenSlider).direction =\n slider.track.details.rel > prevSlide ? \"forward\" : \"backward\";\n\n prevSlide = slider.track.details.rel;\n };\n}\n\nconst attachAriaAttributes: KeenSliderPlugin = (slider) => {\n const maxIdx =\n slider?.track?.details?.maxIdx === Infinity\n ? slider.track.details.length\n : slider?.track?.details?.maxIdx || 0;\n slider.container.setAttribute(\"role\", \"listbox\");\n slider.container.setAttribute(\n \"aria-orientation\",\n slider.options.vertical ? \"vertical\" : \"horizontal\"\n );\n slider.container.setAttribute(\"aria-multiselectable\", \"false\");\n slider.container.setAttribute(\"aria-label\", \"Slider\");\n slider.container.setAttribute(\"tabindex\", \"0\");\n slider.container.setAttribute(\"aria-live\", \"polite\");\n slider.container.setAttribute(\"aria-atomic\", \"true\");\n slider.container.setAttribute(\"aria-live\", \"polite\");\n slider.container.setAttribute(\"aria-busy\", \"false\");\n slider.container.setAttribute(\"aria-valuemin\", \"0\");\n slider.container.setAttribute(\"aria-valuemax\", `${maxIdx}`);\n slider.container.setAttribute(\n \"aria-valuenow\",\n `${slider?.track?.details?.rel || 0}`\n );\n\n function getMaxRel(rel: number, perView = 1) {\n return Math.floor(rel + perView - 1);\n }\n\n function slideIsActive(idx: number) {\n const perView = ((slider.options?.slides as any)?.perView as number) || 1,\n rel = slider.track.details.rel,\n maxRel = getMaxRel(rel, perView);\n\n return rel <= idx && idx <= maxRel;\n }\n\n async function updateTabIndexes(slide: HTMLElement, tabindex: string) {\n const focusableElements = Array.from(\n slide.querySelectorAll(\n \"input, a, button:not(:disabled), textarea, select, textarea, [tabindex]\"\n )\n );\n focusableElements.forEach((element) => {\n element.setAttribute(\"tabindex\", tabindex);\n });\n }\n\n function updateAriaActiveSlide(slide: HTMLElement) {\n slide.setAttribute(\"aria-selected\", \"true\");\n slide.setAttribute(\"aria-hidden\", \"false\");\n slide.setAttribute(\"tabindex\", \"0\");\n updateTabIndexes(slide, \"0\");\n }\n\n function updateAriaInActiveSlide(slide: HTMLElement) {\n slide.setAttribute(\"aria-selected\", \"false\");\n slide.setAttribute(\"aria-hidden\", \"true\");\n slide.setAttribute(\"tabindex\", \"-1\");\n updateTabIndexes(slide, \"-1\");\n }\n\n function updateSlideAriaAttributes(slider: _KeenSliderInstance) {\n if (slider.options.disabled) {\n slider.slides.forEach((slide, i) => {\n slide.setAttribute(\"role\", \"option\");\n updateAriaActiveSlide(slide);\n });\n return;\n }\n\n slider.slides.forEach((slide, i) => {\n slide.setAttribute(\"role\", \"option\");\n if (slideIsActive(i)) updateAriaActiveSlide(slide);\n else updateAriaInActiveSlide(slide);\n });\n }\n\n slider.on(\"slideChanged\", updateSlideAriaAttributes);\n slider.on(\"created\", updateSlideAriaAttributes);\n slider.on(\"optionsChanged\", updateSlideAriaAttributes);\n slider.on(\"updated\", updateSlideAriaAttributes);\n};\n\nexport default class KeenSlider extends _KeenSlider {\n override options: ExtendedKeenSliderOptions;\n direction: \"forward\" | \"backward\" | null = null;\n constructor(\n element: ICustomElement & HTMLElement,\n config: KeenSliderOptions,\n plugins: _KeenSliderPlugin[] = []\n ) {\n super(element, config, plugins);\n this.options = config;\n let prevSlide = 0;\n\n this.direction = null;\n this.on(\"slideChanged\", attachMoreDetails(prevSlide) as any);\n\n attachAriaAttributes(this);\n\n this.next = function () {\n if (!this.options?.slides) return;\n if (\n typeof this.options.slides === \"number\" ||\n typeof this.options.slides === \"function\"\n )\n return;\n if (\"perScroll\" in this.options.slides === false) return;\n const amount = this.options?.slides?.perScroll || 1;\n if (!this.options.loop) {\n return this.moveToIdx(\n constrain(\n this.track.details.rel + amount,\n 0,\n this.track.details.maxIdx\n )\n );\n }\n return this.moveToIdx(constrain(this.track.details.abs + amount), true);\n };\n\n this.prev = function () {\n if (!this.options?.slides) return;\n if (\n typeof this.options.slides === \"number\" ||\n typeof this.options.slides === \"function\"\n )\n return;\n if (\"perScroll\" in this.options.slides === false) return;\n const amount = this.options?.slides?.perScroll || 1;\n if (!this.options.loop) {\n this.moveToIdx(\n constrain(\n this.track.details.rel - amount,\n 0,\n this.track.details.maxIdx\n )\n );\n }\n return this.moveToIdx(constrain(this.track.details.abs - amount), true);\n };\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { observable } from 'solid-js';
|
|
2
|
+
import '../KeenSlider.js';
|
|
3
|
+
import { provideKeenSliderContext, useKeenSliderContext } from '../hooks/index.js';
|
|
4
|
+
|
|
5
|
+
const KeenSlider = (props, { element }) => {
|
|
6
|
+
const context = provideKeenSliderContext(props, element);
|
|
7
|
+
const [slider, methods] = useKeenSliderContext(context);
|
|
8
|
+
const observer = observable(slider);
|
|
9
|
+
Object.assign(element, {
|
|
10
|
+
subscribe(callback = (slider2) => null) {
|
|
11
|
+
function listen(slider2) {
|
|
12
|
+
const cleanup = callback(slider2);
|
|
13
|
+
slider2.on(
|
|
14
|
+
"destroyed",
|
|
15
|
+
typeof cleanup === "function" ? cleanup : () => null
|
|
16
|
+
);
|
|
17
|
+
}
|
|
18
|
+
return observer.subscribe(listen).unsubscribe;
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
Object.assign(element, { slider });
|
|
22
|
+
Object.assign(element, { addPlugin: methods.addPlugin });
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export { KeenSlider };
|
|
26
|
+
//# sourceMappingURL=keen-slider.js.map
|
|
27
|
+
//# sourceMappingURL=keen-slider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/keen-slider.ts"],"names":["slider"],"mappings":";;;;AAmBO,MAAM,UAA2D,GAAA,CACtE,KACA,EAAA,EAAE,SACC,KAAA;AACH,EAAM,MAAA,OAAA,GAAU,wBAAyB,CAAA,KAAA,EAAO,OAAO,CAAA;AACvD,EAAA,MAAM,CAAC,MAAA,EAAQ,OAAO,CAAA,GAAI,qBAAqB,OAAO,CAAA;AAEtD,EAAM,MAAA,QAAA,GAAW,WAAW,MAAM,CAAA;AAElC,EAAA,MAAA,CAAO,OAAO,OAAS,EAAA;AAAA,IACrB,SAAU,CAAA,QAAA,GAAW,CAACA,OAAAA,KAA+B,IAAM,EAAA;AACzD,MAAA,SAAS,OAAOA,OAA4B,EAAA;AAC1C,QAAM,MAAA,OAAA,GAAU,SAASA,OAAM,CAAA;AAC/B,QAAAA,OAAO,CAAA,EAAA;AAAA,UACL,WAAA;AAAA,UACA,OAAO,OAAA,KAAY,UAAa,GAAA,OAAA,GAAU,MAAM;AAAA,SAClD;AAAA;AAEF,MAAO,OAAA,QAAA,CAAS,SAAU,CAAA,MAAM,CAAE,CAAA,WAAA;AAAA;AACpC,GACD,CAAA;AAED,EAAA,MAAA,CAAO,MAAO,CAAA,OAAA,EAAS,EAAE,MAAA,EAAQ,CAAA;AACjC,EAAA,MAAA,CAAO,OAAO,OAAS,EAAA,EAAE,SAAW,EAAA,OAAA,CAAQ,WAAW,CAAA;AACzD","file":"keen-slider.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport { observable } from \"solid-js\";\nimport _KeenSlider, {\n type KeenSliderInstance,\n type KeenSliderOptions,\n} from \"../KeenSlider.js\";\n\nimport {\n provideKeenSliderContext,\n useKeenSliderContext,\n} from \"../hooks/index.js\";\n\ntype KeenSliderContextProps = {\n config?: KeenSliderOptions;\n centerSlides: boolean;\n refreshOnChildrenChange: boolean;\n};\n\nexport const KeenSlider: CorrectComponentType<KeenSliderContextProps> = (\n props,\n { element }\n) => {\n const context = provideKeenSliderContext(props, element);\n const [slider, methods] = useKeenSliderContext(context);\n\n const observer = observable(slider);\n\n Object.assign(element, {\n subscribe(callback = (slider: KeenSliderInstance) => null) {\n function listen(slider: KeenSliderInstance) {\n const cleanup = callback(slider);\n slider.on(\n \"destroyed\",\n typeof cleanup === \"function\" ? cleanup : () => null\n );\n }\n return observer.subscribe(listen).unsubscribe;\n },\n });\n\n Object.assign(element, { slider });\n Object.assign(element, { addPlugin: methods.addPlugin });\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { createContext, provide, consume } from 'component-register';
|
|
2
|
+
import { splitProps, createSignal, createMemo, onCleanup, createEffect, on, mergeProps } from 'solid-js';
|
|
3
|
+
import { getContextFromProvider } from '@brytdesigns/web-component-utils';
|
|
4
|
+
import KeenSlider from '../KeenSlider';
|
|
5
|
+
|
|
6
|
+
function initializeKeenSliderContext(props) {
|
|
7
|
+
const [privateProps, publicProps] = splitProps(props, [
|
|
8
|
+
"root",
|
|
9
|
+
"centerSlides",
|
|
10
|
+
"refreshOnChildrenChange"
|
|
11
|
+
]);
|
|
12
|
+
const [plugins, setPlugins] = createSignal([]);
|
|
13
|
+
const [forceSliderRebuild, setForceSliderRebuild] = createSignal(false);
|
|
14
|
+
const mutObserver = createMemo(() => {
|
|
15
|
+
if (props.refreshOnChildrenChange)
|
|
16
|
+
return new MutationObserver(function(mutations) {
|
|
17
|
+
mutations.forEach(function(_) {
|
|
18
|
+
setForceSliderRebuild((v) => !v);
|
|
19
|
+
});
|
|
20
|
+
});
|
|
21
|
+
return null;
|
|
22
|
+
});
|
|
23
|
+
const slider = createMemo(() => {
|
|
24
|
+
privateProps.root.setAttribute("data-initialized", "true");
|
|
25
|
+
const slider2 = new KeenSlider(
|
|
26
|
+
privateProps.root,
|
|
27
|
+
publicProps.config || {},
|
|
28
|
+
plugins()
|
|
29
|
+
);
|
|
30
|
+
const m = mutObserver();
|
|
31
|
+
if (m) {
|
|
32
|
+
m.observe(slider2.container, { childList: true });
|
|
33
|
+
forceSliderRebuild();
|
|
34
|
+
}
|
|
35
|
+
onCleanup(() => {
|
|
36
|
+
slider2.destroy();
|
|
37
|
+
if (m) m.disconnect();
|
|
38
|
+
});
|
|
39
|
+
return slider2;
|
|
40
|
+
});
|
|
41
|
+
function addPlugin(plugin) {
|
|
42
|
+
let index = -1;
|
|
43
|
+
setPlugins((plugins2) => {
|
|
44
|
+
index = plugins2.length;
|
|
45
|
+
return [...plugins2, plugin];
|
|
46
|
+
});
|
|
47
|
+
return function() {
|
|
48
|
+
setPlugins((plugins2) => {
|
|
49
|
+
return [...plugins2.slice(0, index), ...plugins2.slice(index + 1)];
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
const centeredPlugin = (slider2) => {
|
|
54
|
+
function centerSlides(slider3) {
|
|
55
|
+
if (slider3.track.details.maxIdx > 0) {
|
|
56
|
+
slider3.container.style.justifyContent = null;
|
|
57
|
+
slider3.container.style.transform = null;
|
|
58
|
+
} else {
|
|
59
|
+
slider3.container.style.cssText = `
|
|
60
|
+
justify-content: center;
|
|
61
|
+
transform: translateX(-${slider3.options.slides?.spacing || 16}px)
|
|
62
|
+
`;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
slider2.on("created", centerSlides);
|
|
66
|
+
slider2.on("optionsChanged", centerSlides);
|
|
67
|
+
};
|
|
68
|
+
createEffect(
|
|
69
|
+
on(
|
|
70
|
+
() => props.centerSlides,
|
|
71
|
+
(centerSlides) => {
|
|
72
|
+
if (!centerSlides) return;
|
|
73
|
+
const remove = addPlugin(centeredPlugin);
|
|
74
|
+
return onCleanup(remove);
|
|
75
|
+
}
|
|
76
|
+
)
|
|
77
|
+
);
|
|
78
|
+
createEffect(
|
|
79
|
+
on(plugins, (plugins2) => {
|
|
80
|
+
if (plugins2.length === 0) return;
|
|
81
|
+
console.log(
|
|
82
|
+
`Registered a new plugin on element.
|
|
83
|
+
`,
|
|
84
|
+
`Total slider plugins: ${plugins2.length}`
|
|
85
|
+
);
|
|
86
|
+
})
|
|
87
|
+
);
|
|
88
|
+
return [slider, { addPlugin }];
|
|
89
|
+
}
|
|
90
|
+
const KeenSliderContextState = createContext(initializeKeenSliderContext);
|
|
91
|
+
const provideKeenSliderContext = (initialState, element) => {
|
|
92
|
+
const props = mergeProps(initialState, { root: element });
|
|
93
|
+
return provide(KeenSliderContextState, props, element);
|
|
94
|
+
};
|
|
95
|
+
const useKeenSliderContext = (context) => {
|
|
96
|
+
return context;
|
|
97
|
+
};
|
|
98
|
+
const useKeenSlider = (element) => {
|
|
99
|
+
const context = consume(KeenSliderContextState, element);
|
|
100
|
+
if (!context) {
|
|
101
|
+
throw console.error(
|
|
102
|
+
"KeenSliderContext not found! Please ensure to wrap your custom element with keen-slider element."
|
|
103
|
+
);
|
|
104
|
+
}
|
|
105
|
+
return useKeenSliderContext(context);
|
|
106
|
+
};
|
|
107
|
+
const getKeenSliderContext = (element) => {
|
|
108
|
+
const context = getContextFromProvider(
|
|
109
|
+
KeenSliderContextState,
|
|
110
|
+
element
|
|
111
|
+
);
|
|
112
|
+
return useKeenSliderContext(context);
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
export { getKeenSliderContext, provideKeenSliderContext, useKeenSlider, useKeenSliderContext };
|
|
116
|
+
//# sourceMappingURL=useKeenSlider.js.map
|
|
117
|
+
//# sourceMappingURL=useKeenSlider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/useKeenSlider.ts"],"names":["slider","plugins"],"mappings":"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","file":"useKeenSlider.js","sourcesContent":["import {\n type ICustomElement,\n createContext,\n provide,\n consume,\n} from \"component-register\";\nimport {\n createEffect,\n mergeProps,\n createSignal,\n createMemo,\n onCleanup,\n on,\n splitProps,\n} from \"solid-js\";\nimport { getContextFromProvider } from \"@brytdesigns/web-component-utils\";\nimport KeenSlider, {\n type KeenSliderInstance,\n type KeenSliderOptions,\n type KeenSliderPlugin,\n} from \"../KeenSlider\";\n\ntype CreateContextOptions = {\n root: HTMLElement & ICustomElement;\n config?: KeenSliderOptions;\n centerSlides?: boolean;\n refreshOnChildrenChange?: boolean;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype KeenSliderContext = ReturnType<typeof initializeKeenSliderContext>;\n\nfunction initializeKeenSliderContext(props: CreateContextOptions) {\n const [privateProps, publicProps] = splitProps(props, [\n \"root\",\n \"centerSlides\",\n \"refreshOnChildrenChange\",\n ]);\n\n const [plugins, setPlugins] = createSignal<KeenSliderPlugin[]>([]);\n const [forceSliderRebuild, setForceSliderRebuild] = createSignal(false);\n\n const mutObserver = createMemo(() => {\n if (props.refreshOnChildrenChange)\n return new MutationObserver(function (mutations) {\n mutations.forEach(function (_) {\n setForceSliderRebuild((v) => !v);\n });\n });\n return null;\n });\n\n const slider = createMemo(() => {\n privateProps.root.setAttribute(\"data-initialized\", \"true\");\n const slider = new KeenSlider(\n privateProps.root,\n publicProps.config || ({} as any),\n plugins()\n );\n const m = mutObserver();\n\n if (m) {\n m.observe(slider.container, { childList: true });\n forceSliderRebuild();\n }\n\n onCleanup(() => {\n slider.destroy();\n if (m) m.disconnect();\n });\n\n return slider;\n });\n\n function addPlugin(plugin: KeenSliderPlugin) {\n let index = -1;\n\n setPlugins((plugins) => {\n index = plugins.length;\n return [...plugins, plugin];\n });\n\n return function () {\n setPlugins((plugins) => {\n return [...plugins.slice(0, index), ...plugins.slice(index + 1)];\n });\n };\n }\n\n const centeredPlugin: KeenSliderPlugin = (slider) => {\n function centerSlides(slider: KeenSliderInstance) {\n if (slider.track.details.maxIdx > 0) {\n //@ts-ignore\n slider.container.style.justifyContent = null;\n //@ts-ignore\n slider.container.style.transform = null;\n } else {\n slider.container.style.cssText = `\n justify-content: center;\n transform: translateX(-${(slider.options.slides as any)?.spacing || 16}px)\n `;\n }\n }\n\n slider.on(\"created\", centerSlides);\n slider.on(\"optionsChanged\", centerSlides);\n };\n\n createEffect(\n on(\n () => props.centerSlides,\n (centerSlides) => {\n if (!centerSlides) return;\n const remove = addPlugin(centeredPlugin);\n return onCleanup(remove);\n }\n )\n );\n\n createEffect(\n on(plugins, (plugins) => {\n if (plugins.length === 0) return;\n console.log(\n `Registered a new plugin on element.\\n`,\n `Total slider plugins: ${plugins.length}`\n );\n })\n );\n\n return [slider, { addPlugin }] as const;\n}\n\nconst KeenSliderContextState = createContext(initializeKeenSliderContext);\n\nexport const provideKeenSliderContext = (\n initialState: Omit<CreateContextOptions, \"root\">,\n element: WalkableNode\n): KeenSliderContext => {\n const props = mergeProps(initialState, { root: element });\n return provide(KeenSliderContextState, props, element);\n};\n\nexport const useKeenSliderContext = (context: KeenSliderContext) => {\n return context;\n};\n\nexport const useKeenSlider = (element: HTMLElement & ICustomElement) => {\n const context: KeenSliderContext = consume(KeenSliderContextState, element);\n\n if (!context) {\n throw console.error(\n \"KeenSliderContext not found! Please ensure to wrap your custom element with keen-slider element.\"\n );\n }\n\n return useKeenSliderContext(context);\n};\n\nexport const getKeenSliderContext = (element: Element) => {\n const context = getContextFromProvider<KeenSliderContext>(\n KeenSliderContextState,\n element\n );\n return useKeenSliderContext(context);\n};\n"]}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
// Generated by dts-bundle-generator v9.5.1
|
|
2
|
+
|
|
3
|
+
import { ICustomElement } from 'component-register';
|
|
4
|
+
import _KeenSlider from 'keen-slider';
|
|
5
|
+
import { KeenSliderHooks as _KeenSliderHooks, KeenSliderInstance as _KeenSliderInstance, KeenSliderOptions as _KeenSliderOptions, KeenSliderPlugin as _KeenSliderPlugin } from 'keen-slider';
|
|
6
|
+
|
|
7
|
+
export type KeenSliderInstance<O = {}, P = {}, H extends _KeenSliderHooks = _KeenSliderHooks> = _KeenSliderInstance<O, P, H>;
|
|
8
|
+
export type ExtendedSlidesOption = NonNullable<_KeenSliderInstance["options"]["slides"]> & {
|
|
9
|
+
perScroll?: number;
|
|
10
|
+
};
|
|
11
|
+
export type ExtendedKeenSliderOptions = Omit<_KeenSliderInstance["options"], "slides"> & {
|
|
12
|
+
slides?: ExtendedSlidesOption;
|
|
13
|
+
};
|
|
14
|
+
export type KeenSliderOptions<O = {}, P = {}, H extends _KeenSliderHooks = _KeenSliderHooks> = _KeenSliderOptions<O, P, H> & {
|
|
15
|
+
slides: {
|
|
16
|
+
perScroll?: number;
|
|
17
|
+
} & _KeenSliderOptions<O, P, H>["slides"];
|
|
18
|
+
};
|
|
19
|
+
export type KeenSliderPlugin<O = {}, P = {}, H extends _KeenSliderHooks = _KeenSliderHooks> = _KeenSliderPlugin<O, P, H>;
|
|
20
|
+
declare class KeenSlider extends _KeenSlider {
|
|
21
|
+
options: ExtendedKeenSliderOptions;
|
|
22
|
+
direction: "forward" | "backward" | null;
|
|
23
|
+
constructor(element: ICustomElement & HTMLElement, config: KeenSliderOptions, plugins?: _KeenSliderPlugin[]);
|
|
24
|
+
}
|
|
25
|
+
export declare const useKeenSlider: (element: HTMLElement & ICustomElement) => readonly [
|
|
26
|
+
import("solid-js").Accessor<KeenSlider>,
|
|
27
|
+
{
|
|
28
|
+
readonly addPlugin: (plugin: KeenSliderPlugin) => () => void;
|
|
29
|
+
}
|
|
30
|
+
];
|
|
31
|
+
export declare const getKeenSliderContext: (element: Element) => readonly [
|
|
32
|
+
import("solid-js").Accessor<KeenSlider>,
|
|
33
|
+
{
|
|
34
|
+
readonly addPlugin: (plugin: KeenSliderPlugin) => () => void;
|
|
35
|
+
}
|
|
36
|
+
];
|
|
37
|
+
|
|
38
|
+
export {};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-utils';
|
|
2
|
+
import { KeenSlider } from './components/keen-slider.js';
|
|
3
|
+
import { initializeSliderClasses } from './utils.js';
|
|
4
|
+
export { getKeenSliderContext, useKeenSlider } from './hooks/index.js';
|
|
5
|
+
|
|
6
|
+
customShadowlessElement(
|
|
7
|
+
"keen-slider",
|
|
8
|
+
{
|
|
9
|
+
// @ts-ignore
|
|
10
|
+
config: {},
|
|
11
|
+
centerSlides: false,
|
|
12
|
+
refreshOnChildrenChange: false
|
|
13
|
+
},
|
|
14
|
+
correctElementType(KeenSlider),
|
|
15
|
+
initializeSliderClasses
|
|
16
|
+
);
|
|
17
|
+
//# sourceMappingURL=index.js.map
|
|
18
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;;;AAeA,uBAAA;AAAA,EACE,aAAA;AAAA,EACA;AAAA;AAAA,IAEE,QAAQ,EAAC;AAAA,IACT,YAAc,EAAA,KAAA;AAAA,IACd,uBAAyB,EAAA;AAAA,GAC3B;AAAA,EACA,mBAAmB,UAAU,CAAA;AAAA,EAC7B;AACF,CAAA","file":"index.js","sourcesContent":["import {\n customShadowlessElement,\n correctElementType,\n} from \"@brytdesigns/web-component-utils\";\nimport { KeenSlider } from \"./components/keen-slider.js\";\nimport { initializeSliderClasses } from \"./utils.js\";\n\nexport type {\n KeenSliderInstance,\n KeenSliderOptions,\n KeenSliderPlugin,\n} from \"./KeenSlider.js\";\n\nexport { useKeenSlider, getKeenSliderContext } from \"./hooks/index.js\";\n\ncustomShadowlessElement(\n \"keen-slider\",\n {\n // @ts-ignore\n config: {},\n centerSlides: false,\n refreshOnChildrenChange: false,\n },\n correctElementType(KeenSlider),\n initializeSliderClasses\n);\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
function constrain(value, min = -Infinity, max = Infinity) {
|
|
2
|
+
return Math.min(Math.max(value, min), max);
|
|
3
|
+
}
|
|
4
|
+
function initializeSliderClasses(ComponentType = (props, options) => {
|
|
5
|
+
}) {
|
|
6
|
+
return (props, options) => {
|
|
7
|
+
const { element } = options;
|
|
8
|
+
element.classList.add("keen-slider");
|
|
9
|
+
Array.from(element.children).forEach(
|
|
10
|
+
(child) => child.classList.add("keen-slider__slide")
|
|
11
|
+
);
|
|
12
|
+
return ComponentType(props, options);
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export { constrain, initializeSliderClasses };
|
|
17
|
+
//# sourceMappingURL=utils.js.map
|
|
18
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils.ts"],"names":[],"mappings":"AAEO,SAAS,SAAU,CAAA,KAAA,EAAe,GAAM,GAAA,CAAA,QAAA,EAAW,MAAM,QAAU,EAAA;AACxE,EAAA,OAAO,KAAK,GAAI,CAAA,IAAA,CAAK,IAAI,KAAO,EAAA,GAAG,GAAG,GAAG,CAAA;AAC3C;AAMO,SAAS,uBACd,CAAA,aAAA,GAAgB,CAAC,KAAA,EAAc,OAAqB,KAAA;AAAC,CACrD,EAAA;AACA,EAAO,OAAA,CAAC,OAAc,OAAqB,KAAA;AACzC,IAAM,MAAA,EAAE,SAAY,GAAA,OAAA;AACpB,IAAQ,OAAA,CAAA,SAAA,CAAU,IAAI,aAAa,CAAA;AACnC,IAAM,KAAA,CAAA,IAAA,CAAK,OAAQ,CAAA,QAAQ,CAAE,CAAA,OAAA;AAAA,MAAQ,CAAC,KAAA,KACpC,KAAM,CAAA,SAAA,CAAU,IAAI,oBAAoB;AAAA,KAC1C;AACA,IAAO,OAAA,aAAA,CAAc,OAAO,OAAO,CAAA;AAAA,GACrC;AACF","file":"utils.js","sourcesContent":["import type { ICustomElement } from \"component-register\";\n\nexport function constrain(value: number, min = -Infinity, max = Infinity) {\n return Math.min(Math.max(value, min), max);\n}\n\ntype Options = {\n element: HTMLElement & ICustomElement;\n};\n\nexport function initializeSliderClasses<Props>(\n ComponentType = (props: Props, options: Options) => {}\n) {\n return (props: Props, options: Options) => {\n const { element } = options;\n element.classList.add(\"keen-slider\");\n Array.from(element.children).forEach((child) =>\n child.classList.add(\"keen-slider__slide\")\n );\n return ComponentType(props, options);\n };\n}\n"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@brytdesigns/web-component-keen-slider",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Keen slider web component",
|
|
5
|
+
"main": "./dist/main/index.js",
|
|
6
|
+
"module": "./dist/main/index.js",
|
|
7
|
+
"types": "./dist/main/index.d.ts",
|
|
8
|
+
"type": "module",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/main/index.d.ts",
|
|
12
|
+
"module": "./dist/main/index.js"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist"
|
|
17
|
+
],
|
|
18
|
+
"keywords": [],
|
|
19
|
+
"author": "Bryt Designs",
|
|
20
|
+
"license": "ISC",
|
|
21
|
+
"dependencies": {
|
|
22
|
+
"component-register": "^0.8.7",
|
|
23
|
+
"keen-slider": "^6.8.6",
|
|
24
|
+
"motion": "^12.5.0",
|
|
25
|
+
"solid-element": "^1.9.1",
|
|
26
|
+
"solid-js": "^1.9.5",
|
|
27
|
+
"@brytdesigns/web-component-utils": "0.1.8"
|
|
28
|
+
},
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"dts-bundle-generator": "^9.5.1",
|
|
31
|
+
"tsup": "^8.4.0"
|
|
32
|
+
},
|
|
33
|
+
"scripts": {
|
|
34
|
+
"build": "tsup --clean",
|
|
35
|
+
"typecheck": "tsc --noEmit"
|
|
36
|
+
}
|
|
37
|
+
}
|