@vonage/vwc-carousel 2.45.0 → 2.46.2
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vonage/vwc-carousel",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.46.2",
|
|
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.
|
|
30
|
-
"@vonage/vwc-icon": "2.
|
|
29
|
+
"@vonage/vvd-core": "2.46.2",
|
|
30
|
+
"@vonage/vwc-icon": "2.46.2",
|
|
31
31
|
"lit-element": "^2.4.0",
|
|
32
|
-
"swiper": "^
|
|
32
|
+
"swiper": "^12.1.2",
|
|
33
33
|
"tslib": "^2.3.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@vonage/vvd-design-tokens": "2.
|
|
37
|
-
"@vonage/vvd-umbrella": "2.
|
|
36
|
+
"@vonage/vvd-design-tokens": "2.46.2",
|
|
37
|
+
"@vonage/vvd-umbrella": "2.46.2",
|
|
38
38
|
"typescript": "^4.3.2"
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "2a75a64858a73af9d7fb30d966e340fd92a76f39"
|
|
41
41
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit-element';
|
|
2
|
-
export const style = css `.swiper-nav{display:flex;overflow:hidden;box-sizing:border-box;flex:0 0 29px;align-items:center;justify-content:center;border:1px solid var(--vvd-color-neutral-50);background-color:var(--vvd-color-canvas);cursor:pointer;fill:var(--vvd-color-on-canvas);outline:none}@media(prefers-reduced-motion: no-preference){.swiper-nav{transition:fill .2s}}.swiper-nav:hover{fill:#9b9da3}.swiper-button-prev{border-bottom-left-radius:6px;border-top-left-radius:6px}.swiper-button-next{border-bottom-right-radius:6px;border-top-right-radius:6px}`;
|
|
2
|
+
export const style = css `.swiper-nav{display:flex;overflow:hidden;box-sizing:border-box;flex:0 0 29px;align-items:center;justify-content:center;border:1px solid var(--vvd-color-neutral-50);background-color:var(--vvd-color-canvas);cursor:pointer;fill:var(--vvd-color-on-canvas);outline:none}@media(prefers-reduced-motion: no-preference){.swiper-nav{transition:fill .2s}}.swiper-nav:hover{fill:#9b9da3}.swiper-button-prev{border-bottom-left-radius:6px;border-top-left-radius:6px}.swiper-button-next{border-bottom-right-radius:6px;border-top-right-radius:6px}.swiper-nav .swiper-navigation-icon{display:none}`;
|
|
3
3
|
//# sourceMappingURL=vwc-carousel-navigation.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vwc-carousel-navigation.css.js","sourceRoot":"","sources":["src/vwc-carousel-navigation.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"vwc-carousel-navigation.css.js","sourceRoot":"","sources":["src/vwc-carousel-navigation.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,skBAAskB,CAAC","sourcesContent":["// autogenerated module\nimport {css} from 'lit-element';\nexport const style = css`.swiper-nav{display:flex;overflow:hidden;box-sizing:border-box;flex:0 0 29px;align-items:center;justify-content:center;border:1px solid var(--vvd-color-neutral-50);background-color:var(--vvd-color-canvas);cursor:pointer;fill:var(--vvd-color-on-canvas);outline:none}@media(prefers-reduced-motion: no-preference){.swiper-nav{transition:fill .2s}}.swiper-nav:hover{fill:#9b9da3}.swiper-button-prev{border-bottom-left-radius:6px;border-top-left-radius:6px}.swiper-button-next{border-bottom-right-radius:6px;border-top-right-radius:6px}.swiper-nav .swiper-navigation-icon{display:none}`;"]}
|
package/vwc-carousel.css.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit-element';
|
|
2
|
-
export const style = css
|
|
2
|
+
export const style = css `:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px, 0, 0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-nav{display:flex;overflow:hidden;box-sizing:border-box;flex:0 0 29px;align-items:center;justify-content:center;border:1px solid var(--vvd-color-neutral-50);background-color:var(--vvd-color-canvas);cursor:pointer;fill:var(--vvd-color-on-canvas);outline:none}@media(prefers-reduced-motion: no-preference){.swiper-nav{transition:fill .2s}}.swiper-nav:hover{fill:#9b9da3}.swiper-button-prev{border-bottom-left-radius:6px;border-top-left-radius:6px}.swiper-button-next{border-bottom-right-radius:6px;border-top-right-radius:6px}.swiper-nav .swiper-navigation-icon{display:none}@media screen and (prefers-reduced-motion: reduce){.swiper-pagination-bullet{display:inline-block;width:24px;height:3px;margin:0 3px;background-color:var(--vvd-color-neutral);border-radius:0;cursor:pointer;font-size:0;outline:none;transition:none}}@media screen and (prefers-reduced-motion: reduce)and (prefers-reduced-motion: no-preference){.swiper-pagination-bullet{transition:transform .1s}}@media screen and (prefers-reduced-motion: reduce){.swiper-pagination-bullet-active{background-color:var(--vvd-color-on-canvas)}}.swiper-pagination-bullet{display:inline-block;width:24px;height:3px;margin:0 3px;background-color:var(--vvd-color-neutral);border-radius:0;cursor:pointer;font-size:0;outline:none;transition:transform .1s}@media(prefers-reduced-motion: no-preference){.swiper-pagination-bullet{transition:transform .1s}}.swiper-pagination-bullet-active{background-color:var(--vvd-color-on-canvas)}vwc-carousel{display:inline-flex;width:300px;height:200px;flex-direction:column;outline:none;user-select:none}.upper-pane{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:row;border-radius:6px}vwc-carousel:focus-within .upper-pane,vwc-casousel:active .upper-pane{box-shadow:0 0 5px 1px #e1e2e6}.lower-pane{display:flex;overflow:hidden;flex:0 0 15px;align-items:flex-end;justify-content:center}.swiper-container{position:relative;z-index:1;display:block;overflow:hidden;flex:1;padding:0;margin-right:auto;margin-left:auto;list-style:none}.swiper-slide{display:flex;overflow:hidden;contain:strict}`;
|
|
3
3
|
//# sourceMappingURL=vwc-carousel.css.js.map
|
package/vwc-carousel.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vwc-carousel.css.js","sourceRoot":"","sources":["src/vwc-carousel.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"vwc-carousel.css.js","sourceRoot":"","sources":["src/vwc-carousel.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,u6NAAu6N,CAAC","sourcesContent":["// autogenerated module\nimport {css} from 'lit-element';\nexport const style = css`:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px, 0, 0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:\"\";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-nav{display:flex;overflow:hidden;box-sizing:border-box;flex:0 0 29px;align-items:center;justify-content:center;border:1px solid var(--vvd-color-neutral-50);background-color:var(--vvd-color-canvas);cursor:pointer;fill:var(--vvd-color-on-canvas);outline:none}@media(prefers-reduced-motion: no-preference){.swiper-nav{transition:fill .2s}}.swiper-nav:hover{fill:#9b9da3}.swiper-button-prev{border-bottom-left-radius:6px;border-top-left-radius:6px}.swiper-button-next{border-bottom-right-radius:6px;border-top-right-radius:6px}.swiper-nav .swiper-navigation-icon{display:none}@media screen and (prefers-reduced-motion: reduce){.swiper-pagination-bullet{display:inline-block;width:24px;height:3px;margin:0 3px;background-color:var(--vvd-color-neutral);border-radius:0;cursor:pointer;font-size:0;outline:none;transition:none}}@media screen and (prefers-reduced-motion: reduce)and (prefers-reduced-motion: no-preference){.swiper-pagination-bullet{transition:transform .1s}}@media screen and (prefers-reduced-motion: reduce){.swiper-pagination-bullet-active{background-color:var(--vvd-color-on-canvas)}}.swiper-pagination-bullet{display:inline-block;width:24px;height:3px;margin:0 3px;background-color:var(--vvd-color-neutral);border-radius:0;cursor:pointer;font-size:0;outline:none;transition:transform .1s}@media(prefers-reduced-motion: no-preference){.swiper-pagination-bullet{transition:transform .1s}}.swiper-pagination-bullet-active{background-color:var(--vvd-color-on-canvas)}vwc-carousel{display:inline-flex;width:300px;height:200px;flex-direction:column;outline:none;user-select:none}.upper-pane{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:row;border-radius:6px}vwc-carousel:focus-within .upper-pane,vwc-casousel:active .upper-pane{box-shadow:0 0 5px 1px #e1e2e6}.lower-pane{display:flex;overflow:hidden;flex:0 0 15px;align-items:flex-end;justify-content:center}.swiper-container{position:relative;z-index:1;display:block;overflow:hidden;flex:1;padding:0;margin-right:auto;margin-left:auto;list-style:none}.swiper-slide{display:flex;overflow:hidden;contain:strict}`;"]}
|
package/vwc-carousel.js
CHANGED
|
@@ -3,11 +3,11 @@ import { __decorate } from "tslib";
|
|
|
3
3
|
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
|
-
import
|
|
6
|
+
import Swiper from 'swiper';
|
|
7
|
+
import { Autoplay, Keyboard, Mousewheel, Navigation, Manipulation } from 'swiper/modules/index.mjs';
|
|
7
8
|
import '@vonage/vwc-icon';
|
|
8
9
|
import './vwc-carousel-item.js';
|
|
9
10
|
const CAROUSEL_STYLE_ID = 'vwc-carousel-style-id';
|
|
10
|
-
SwiperCore.use([Autoplay, Keyboard, Mousewheel, Navigation]);
|
|
11
11
|
let VWCCarousel = VWCCarousel_1 = class VWCCarousel extends LitElement {
|
|
12
12
|
constructor() {
|
|
13
13
|
super(...arguments);
|
|
@@ -19,6 +19,7 @@ let VWCCarousel = VWCCarousel_1 = class VWCCarousel extends LitElement {
|
|
|
19
19
|
}
|
|
20
20
|
get swiperOptions() {
|
|
21
21
|
return {
|
|
22
|
+
modules: [Autoplay, Keyboard, Mousewheel, Navigation, Manipulation],
|
|
22
23
|
loop: false,
|
|
23
24
|
autoplay: this.autoplay
|
|
24
25
|
? {
|
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 SwiperCore, {\n\tSwiper, Autoplay, Keyboard, Mousewheel, Navigation\n// eslint-disable-next-line import/extensions\n} from 'swiper/core';\n// eslint-disable-next-line import/extensions\nimport type { SwiperOptions } from 'swiper/core';\nimport '@vonage/vwc-icon';\nimport './vwc-carousel-item.js';\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\nSwiperCore.use([Autoplay, Keyboard, Mousewheel, Navigation]);\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\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// @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"]}
|