@vonage/vwc-carousel 2.46.2 → 2.46.3
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/package.json +6 -6
- package/vwc-carousel.js +1 -1
- package/vwc-carousel.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vonage/vwc-carousel",
|
|
3
|
-
"version": "2.46.
|
|
3
|
+
"version": "2.46.3",
|
|
4
4
|
"description": "carousel component",
|
|
5
5
|
"homepage": "https://github.com/Vonage/vivid/tree/master/components/carousel#readme",
|
|
6
6
|
"license": "ISC",
|
|
@@ -26,16 +26,16 @@
|
|
|
26
26
|
"url": "https://github.com/Vonage/vivid/issues"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@vonage/vvd-core": "2.46.
|
|
30
|
-
"@vonage/vwc-icon": "2.46.
|
|
29
|
+
"@vonage/vvd-core": "2.46.3",
|
|
30
|
+
"@vonage/vwc-icon": "2.46.3",
|
|
31
31
|
"lit-element": "^2.4.0",
|
|
32
32
|
"swiper": "^12.1.2",
|
|
33
33
|
"tslib": "^2.3.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@vonage/vvd-design-tokens": "2.46.
|
|
37
|
-
"@vonage/vvd-umbrella": "2.46.
|
|
36
|
+
"@vonage/vvd-design-tokens": "2.46.3",
|
|
37
|
+
"@vonage/vvd-umbrella": "2.46.3",
|
|
38
38
|
"typescript": "^4.3.2"
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "2c45ae4b51c2ebe0ad051a5592f0b96ef757bb86"
|
|
41
41
|
}
|
package/vwc-carousel.js
CHANGED
|
@@ -4,7 +4,7 @@ import '@vonage/vvd-core';
|
|
|
4
4
|
import { customElement, property, query, html, LitElement, } from 'lit-element';
|
|
5
5
|
import { style } from './vwc-carousel.css.js';
|
|
6
6
|
import Swiper from 'swiper';
|
|
7
|
-
import { Autoplay, Keyboard, Mousewheel, Navigation, Manipulation } from 'swiper/modules
|
|
7
|
+
import { Autoplay, Keyboard, Mousewheel, Navigation, Manipulation } from 'swiper/modules';
|
|
8
8
|
import '@vonage/vwc-icon';
|
|
9
9
|
import './vwc-carousel-item.js';
|
|
10
10
|
const CAROUSEL_STYLE_ID = 'vwc-carousel-style-id';
|
package/vwc-carousel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vwc-carousel.js","sourceRoot":"","sources":["src/vwc-carousel.ts"],"names":[],"mappings":"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","sourcesContent":["import '@vonage/vvd-core';\nimport {\n\tcustomElement,\n\tproperty,\n\tquery,\n\thtml,\n\tLitElement,\n\tCSSResult,\n\tTemplateResult,\n} from 'lit-element';\nimport { style } from './vwc-carousel.css.js';\nimport Swiper from 'swiper';\n// @ts-expect-error - swiper 12's module type defs use .d.ts import extensions unsupported by TS 4.x\nimport { Autoplay, Keyboard, Mousewheel, Navigation, Manipulation } from 'swiper/modules/index.mjs';\nimport '@vonage/vwc-icon';\nimport './vwc-carousel-item.js';\n\ntype SwiperOptions = ConstructorParameters<typeof Swiper>[1] & Record<string, unknown>;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'vwc-carousel': VWCCarousel;\n\t}\n}\n\nconst CAROUSEL_STYLE_ID = 'vwc-carousel-style-id';\n\n/**\n * This component is a carousel\n */\n@customElement('vwc-carousel')\nexport class VWCCarousel extends LitElement {\n\t@property({\n\t\ttype: Boolean,\n\t\treflect: true,\n\t\tconverter: v => !(v && v === 'false'),\n\t})\n\t\tautoplay = true;\n\t@query('.swiper-container')\n\tprivate swiperContainer?: HTMLElement;\n\t@query('.swiper-wrapper')\n\tprivate swiperWrapper?: HTMLElement;\n\t@query('.swiper-pagination')\n\tprivate swiperPagination?: HTMLElement;\n\tprivate swiper?: Swiper;\n\tprivate slideRefs: Element[] = [];\n\n\tstatic override get styles(): CSSResult[] {\n\t\treturn [style];\n\t}\n\n\tprivate get swiperOptions(): SwiperOptions {\n\t\treturn {\n\t\t\tmodules: [Autoplay, Keyboard, Mousewheel, Navigation, Manipulation],\n\t\t\tloop: false,\n\t\t\tautoplay: this.autoplay\n\t\t\t\t? {\n\t\t\t\t\tdelay: 2500\n\t\t\t\t}\n\t\t\t\t: false,\n\t\t\tcssMode: false,\n\t\t\tkeyboard: true,\n\t\t\tmousewheel: true,\n\t\t\tuniqueNavElements: true,\n\t\t\tnavigation: {\n\t\t\t\tprevEl: '.swiper-button-prev',\n\t\t\t\tnextEl: '.swiper-button-next',\n\t\t\t},\n\t\t\ton: {\n\t\t\t\tslideNextTransitionEnd: this.moveFirstIfNeeded,\n\t\t\t\tslidePrevTransitionEnd: this.moveLastIfNeeded,\n\t\t\t\tslideChange: this.onSlideChange.bind(this),\n\t\t\t},\n\t\t};\n\t}\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tthis.ensureStyleApplied();\n\t\tthis.tabIndex = 0;\n\t}\n\n\toverride render(): TemplateResult {\n\t\tconst slides = Array.from(this.children);\n\t\tslides.forEach((s) => {\n\t\t\tif (s.nodeName.toLowerCase() === 'vwc-carousel-item') {\n\t\t\t\ts.classList.add('swiper-slide');\n\t\t\t}\n\t\t});\n\n\t\treturn html`\n\t\t\t<div class=\"upper-pane\">\n\t\t\t\t<div class=\"swiper-nav swiper-button-prev\">\n\t\t\t\t\t<vwc-icon type=\"left\"></vwc-icon>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"swiper-container\">\n\t\t\t\t\t<div class=\"swiper-wrapper\">${slides}</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"swiper-nav swiper-button-next\">\n\t\t\t\t\t<vwc-icon type=\"right\"></vwc-icon>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"lower-pane swiper-pagination\"></div>\n\t\t`;\n\t}\n\n\tprotected override firstUpdated(): void {\n\t\tthis.swiper = new Swiper(\n\t\t\tthis.swiperContainer as HTMLElement,\n\t\t\tthis.swiperOptions\n\t\t);\n\t\tthis.collectSlideRefs(this.swiper);\n\t\tthis.moveFirstIfNeeded(this.swiper);\n\t\tthis.moveLastIfNeeded(this.swiper);\n\t\tthis.renderPagination();\n\t\tthis.updatePagination(this.swiper);\n\t\tthis.addEventListener('mouseenter', () => {\n\t\t\tif (this.autoplay) {\n\t\t\t\tthis.swiper?.autoplay?.stop();\n\t\t\t}\n\t\t});\n\t\tthis.addEventListener('mouseleave', () => {\n\t\t\tif (this.autoplay) {\n\t\t\t\tthis.swiper?.autoplay?.start();\n\t\t\t}\n\t\t});\n\t\tif (this.autoplay) {\n\t\t\tthis.swiper.autoplay?.start();\n\t\t}\n\t}\n\n\tprotected override createRenderRoot(): HTMLElement {\n\t\treturn this;\n\t}\n\n\tprivate ensureStyleApplied() {\n\t\tVWCCarousel.styles.forEach((styleResult, index) => {\n\t\t\tconst tmpId = `${CAROUSEL_STYLE_ID}-${index}`;\n\t\t\tif (!document.head.querySelector(`#${tmpId}`)) {\n\t\t\t\tconst cs = document.createElement('style');\n\t\t\t\tcs.id = tmpId;\n\t\t\t\tcs.type = 'text/css';\n\t\t\t\tcs.innerHTML = styleResult.cssText;\n\t\t\t\tdocument.head.appendChild(cs);\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate collectSlideRefs(swiper: Swiper): void {\n\t\tconst slides = swiper.slides;\n\t\tfor (let i = 0, l = slides.length; i < l; i++) {\n\t\t\tthis.slideRefs[i] = slides[i];\n\t\t}\n\t}\n\n\tprivate moveFirstIfNeeded(swiper?: Swiper): void {\n\t\tconst s = swiper ?? ((this as unknown) as Swiper);\n\t\tconst slides = s.slides;\n\t\tif (slides.length > 2 && s.isEnd) {\n\t\t\tconst first = slides[0] as HTMLElement;\n\t\t\ts.removeSlide(0);\n\t\t\ts.appendSlide(first);\n\t\t}\n\t}\n\n\tprivate moveLastIfNeeded(swiper?: Swiper): void {\n\t\tconst s = swiper ?? ((this as unknown) as Swiper);\n\t\tconst slides = s.slides;\n\t\tif (slides.length > 2 && s.isBeginning) {\n\t\t\tconst last = slides[slides.length - 1] as HTMLElement;\n\t\t\ts.removeSlide(slides.length - 1);\n\t\t\ts.prependSlide(last);\n\t\t}\n\t}\n\n\tprivate renderPagination() {\n\t\tif (this.swiperPagination) {\n\t\t\tconst df = document.createDocumentFragment();\n\t\t\tfor (let i = 0, l = this.slideRefs.length; i < l; i++) {\n\t\t\t\tconst bullet = document.createElement('span');\n\t\t\t\tbullet.classList.add('swiper-pagination-bullet');\n\t\t\t\tbullet.addEventListener('click', this.goToSlide.bind(this));\n\t\t\t\tdf.appendChild(bullet);\n\t\t\t}\n\t\t\tthis.swiperPagination.appendChild(df);\n\t\t}\n\t}\n\n\tprivate updatePagination(swiper?: Swiper): void {\n\t\tif (swiper && this.swiperPagination) {\n\t\t\tconst activeIndex = this.calculateActiveIndex(swiper);\n\t\t\tArray.from(this.swiperPagination.children).forEach((bullet, index) => {\n\t\t\t\tbullet.classList[index === activeIndex ? 'add' : 'remove'](\n\t\t\t\t\t'swiper-pagination-bullet-active'\n\t\t\t\t);\n\t\t\t});\n\t\t}\n\t}\n\n\tprivate onSlideChange(): void {\n\t\tthis.updatePagination(this.swiper);\n\t}\n\n\tprivate goToSlide(event: Event): void {\n\t\tif (this.swiper && this.swiperPagination && this.swiperWrapper) {\n\t\t\tconst logicalIndex = Array.from(this.swiperPagination.children).indexOf(\n\t\t\t\tevent.target as HTMLElement\n\t\t\t);\n\t\t\tconst domIndex = Array.from(this.swiperWrapper.children).indexOf(\n\t\t\t\tthis.slideRefs[logicalIndex]\n\t\t\t);\n\t\t\tif (domIndex >= 0) {\n\t\t\t\tthis.swiper.slideTo(domIndex);\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate calculateActiveIndex(swiper: Swiper): number {\n\t\tconst nai = swiper.activeIndex;\n\t\tconst slides = swiper.slides;\n\t\treturn this.slideRefs.indexOf(slides[nai]);\n\t}\n}\n"]}
|
|
1
|
+
{"version":3,"file":"vwc-carousel.js","sourceRoot":"","sources":["src/vwc-carousel.ts"],"names":[],"mappings":"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","sourcesContent":["import '@vonage/vvd-core';\nimport {\n\tcustomElement,\n\tproperty,\n\tquery,\n\thtml,\n\tLitElement,\n\tCSSResult,\n\tTemplateResult,\n} from 'lit-element';\nimport { style } from './vwc-carousel.css.js';\nimport Swiper from 'swiper';\n// eslint-disable-next-line import/extensions\nimport { Autoplay, Keyboard, Mousewheel, Navigation, Manipulation } from 'swiper/modules';\nimport '@vonage/vwc-icon';\nimport './vwc-carousel-item.js';\n\ntype SwiperOptions = ConstructorParameters<typeof Swiper>[1] & Record<string, unknown>;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'vwc-carousel': VWCCarousel;\n\t}\n}\n\nconst CAROUSEL_STYLE_ID = 'vwc-carousel-style-id';\n\n/**\n * This component is a carousel\n */\n@customElement('vwc-carousel')\nexport class VWCCarousel extends LitElement {\n\t@property({\n\t\ttype: Boolean,\n\t\treflect: true,\n\t\tconverter: v => !(v && v === 'false'),\n\t})\n\t\tautoplay = true;\n\t@query('.swiper-container')\n\tprivate swiperContainer?: HTMLElement;\n\t@query('.swiper-wrapper')\n\tprivate swiperWrapper?: HTMLElement;\n\t@query('.swiper-pagination')\n\tprivate swiperPagination?: HTMLElement;\n\tprivate swiper?: Swiper;\n\tprivate slideRefs: Element[] = [];\n\n\tstatic override get styles(): CSSResult[] {\n\t\treturn [style];\n\t}\n\n\tprivate get swiperOptions(): SwiperOptions {\n\t\treturn {\n\t\t\tmodules: [Autoplay, Keyboard, Mousewheel, Navigation, Manipulation],\n\t\t\tloop: false,\n\t\t\tautoplay: this.autoplay\n\t\t\t\t? {\n\t\t\t\t\tdelay: 2500\n\t\t\t\t}\n\t\t\t\t: false,\n\t\t\tcssMode: false,\n\t\t\tkeyboard: true,\n\t\t\tmousewheel: true,\n\t\t\tuniqueNavElements: true,\n\t\t\tnavigation: {\n\t\t\t\tprevEl: '.swiper-button-prev',\n\t\t\t\tnextEl: '.swiper-button-next',\n\t\t\t},\n\t\t\ton: {\n\t\t\t\tslideNextTransitionEnd: this.moveFirstIfNeeded,\n\t\t\t\tslidePrevTransitionEnd: this.moveLastIfNeeded,\n\t\t\t\tslideChange: this.onSlideChange.bind(this),\n\t\t\t},\n\t\t};\n\t}\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tthis.ensureStyleApplied();\n\t\tthis.tabIndex = 0;\n\t}\n\n\toverride render(): TemplateResult {\n\t\tconst slides = Array.from(this.children);\n\t\tslides.forEach((s) => {\n\t\t\tif (s.nodeName.toLowerCase() === 'vwc-carousel-item') {\n\t\t\t\ts.classList.add('swiper-slide');\n\t\t\t}\n\t\t});\n\n\t\treturn html`\n\t\t\t<div class=\"upper-pane\">\n\t\t\t\t<div class=\"swiper-nav swiper-button-prev\">\n\t\t\t\t\t<vwc-icon type=\"left\"></vwc-icon>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"swiper-container\">\n\t\t\t\t\t<div class=\"swiper-wrapper\">${slides}</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"swiper-nav swiper-button-next\">\n\t\t\t\t\t<vwc-icon type=\"right\"></vwc-icon>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"lower-pane swiper-pagination\"></div>\n\t\t`;\n\t}\n\n\tprotected override firstUpdated(): void {\n\t\tthis.swiper = new Swiper(\n\t\t\tthis.swiperContainer as HTMLElement,\n\t\t\tthis.swiperOptions\n\t\t);\n\t\tthis.collectSlideRefs(this.swiper);\n\t\tthis.moveFirstIfNeeded(this.swiper);\n\t\tthis.moveLastIfNeeded(this.swiper);\n\t\tthis.renderPagination();\n\t\tthis.updatePagination(this.swiper);\n\t\tthis.addEventListener('mouseenter', () => {\n\t\t\tif (this.autoplay) {\n\t\t\t\tthis.swiper?.autoplay?.stop();\n\t\t\t}\n\t\t});\n\t\tthis.addEventListener('mouseleave', () => {\n\t\t\tif (this.autoplay) {\n\t\t\t\tthis.swiper?.autoplay?.start();\n\t\t\t}\n\t\t});\n\t\tif (this.autoplay) {\n\t\t\tthis.swiper.autoplay?.start();\n\t\t}\n\t}\n\n\tprotected override createRenderRoot(): HTMLElement {\n\t\treturn this;\n\t}\n\n\tprivate ensureStyleApplied() {\n\t\tVWCCarousel.styles.forEach((styleResult, index) => {\n\t\t\tconst tmpId = `${CAROUSEL_STYLE_ID}-${index}`;\n\t\t\tif (!document.head.querySelector(`#${tmpId}`)) {\n\t\t\t\tconst cs = document.createElement('style');\n\t\t\t\tcs.id = tmpId;\n\t\t\t\tcs.type = 'text/css';\n\t\t\t\tcs.innerHTML = styleResult.cssText;\n\t\t\t\tdocument.head.appendChild(cs);\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate collectSlideRefs(swiper: Swiper): void {\n\t\tconst slides = swiper.slides;\n\t\tfor (let i = 0, l = slides.length; i < l; i++) {\n\t\t\tthis.slideRefs[i] = slides[i];\n\t\t}\n\t}\n\n\tprivate moveFirstIfNeeded(swiper?: Swiper): void {\n\t\tconst s = swiper ?? ((this as unknown) as Swiper);\n\t\tconst slides = s.slides;\n\t\tif (slides.length > 2 && s.isEnd) {\n\t\t\tconst first = slides[0] as HTMLElement;\n\t\t\ts.removeSlide(0);\n\t\t\ts.appendSlide(first);\n\t\t}\n\t}\n\n\tprivate moveLastIfNeeded(swiper?: Swiper): void {\n\t\tconst s = swiper ?? ((this as unknown) as Swiper);\n\t\tconst slides = s.slides;\n\t\tif (slides.length > 2 && s.isBeginning) {\n\t\t\tconst last = slides[slides.length - 1] as HTMLElement;\n\t\t\ts.removeSlide(slides.length - 1);\n\t\t\ts.prependSlide(last);\n\t\t}\n\t}\n\n\tprivate renderPagination() {\n\t\tif (this.swiperPagination) {\n\t\t\tconst df = document.createDocumentFragment();\n\t\t\tfor (let i = 0, l = this.slideRefs.length; i < l; i++) {\n\t\t\t\tconst bullet = document.createElement('span');\n\t\t\t\tbullet.classList.add('swiper-pagination-bullet');\n\t\t\t\tbullet.addEventListener('click', this.goToSlide.bind(this));\n\t\t\t\tdf.appendChild(bullet);\n\t\t\t}\n\t\t\tthis.swiperPagination.appendChild(df);\n\t\t}\n\t}\n\n\tprivate updatePagination(swiper?: Swiper): void {\n\t\tif (swiper && this.swiperPagination) {\n\t\t\tconst activeIndex = this.calculateActiveIndex(swiper);\n\t\t\tArray.from(this.swiperPagination.children).forEach((bullet, index) => {\n\t\t\t\tbullet.classList[index === activeIndex ? 'add' : 'remove'](\n\t\t\t\t\t'swiper-pagination-bullet-active'\n\t\t\t\t);\n\t\t\t});\n\t\t}\n\t}\n\n\tprivate onSlideChange(): void {\n\t\tthis.updatePagination(this.swiper);\n\t}\n\n\tprivate goToSlide(event: Event): void {\n\t\tif (this.swiper && this.swiperPagination && this.swiperWrapper) {\n\t\t\tconst logicalIndex = Array.from(this.swiperPagination.children).indexOf(\n\t\t\t\tevent.target as HTMLElement\n\t\t\t);\n\t\t\tconst domIndex = Array.from(this.swiperWrapper.children).indexOf(\n\t\t\t\tthis.slideRefs[logicalIndex]\n\t\t\t);\n\t\t\tif (domIndex >= 0) {\n\t\t\t\tthis.swiper.slideTo(domIndex);\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate calculateActiveIndex(swiper: Swiper): number {\n\t\tconst nai = swiper.activeIndex;\n\t\tconst slides = swiper.slides;\n\t\treturn this.slideRefs.indexOf(slides[nai]);\n\t}\n}\n"]}
|