From 2021d1de09c596040bf8921c5901ecdfc67d69ee Mon Sep 17 00:00:00 2001 From: yinonov Date: Wed, 14 Apr 2021 11:24:21 +0300 Subject: [PATCH 01/10] fix(vwc-carousel): WhiteSource report high severity for carousel --- components/carousel/package.json | 4 ++-- yarn.lock | 36 ++++++++++++++++---------------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/components/carousel/package.json b/components/carousel/package.json index e5868ec41..41b9672ff 100644 --- a/components/carousel/package.json +++ b/components/carousel/package.json @@ -29,11 +29,11 @@ "@vonage/vvd-core": "2.3.0", "@vonage/vwc-icon": "2.3.0", "lit-element": "^2.4.0", - "swiper": "^5.4.5", + "swiper": "^6.5.6", "tslib": "^2.0.3" }, "devDependencies": { - "@types/swiper": "^5.4.0", + "@types/swiper": "^5.4.2", "@vonage/vvd-design-tokens": "2.3.0", "@vonage/vvd-umbrella": "2.3.0", "typescript": "^4.1.3" diff --git a/yarn.lock b/yarn.lock index 6b9f1924d..15d3d5d3c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4850,10 +4850,10 @@ resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/download/@types/source-list-map/0.1.2/0d3836d982bc181a779327f6c0da46c9c32475e744c04c3b4e3bfa3d04a848c9#bc5f765df10572135c0bd4a956baf458c9996827" integrity sha1-vF92XfEFchNcC9SpVrr0WMmZaCc= -"@types/swiper@^5.4.0": +"@types/swiper@^5.4.2": version "5.4.2" - resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/download/@types/swiper/5.4.2/39a23fb48f7aa5da47d06ca834a1d6d5bd4f1d40ebde7c7acc903e67abe652aa#ff206cf5aea787f580b5dd9b466b4bcb8e0442f3" - integrity sha1-/yBs9a6nh/WAtd2bRmtLy44EQvM= + resolved "https://registry.yarnpkg.com/@types/swiper/-/swiper-5.4.2.tgz#ff206cf5aea787f580b5dd9b466b4bcb8e0442f3" + integrity sha512-/7MaVDZ8ltMCZb6yfg1HWBRjwFjy9ytKpuPSZfNTrxpkQCaGQZdpceDSqKaSfGmJcVF0NcBFRsGTStyytV7grw== "@types/tapable@*", "@types/tapable@^1.0.5": version "1.0.6" @@ -8155,12 +8155,12 @@ dom5@^3.0.1: clone "^2.1.0" parse5 "^4.0.0" -dom7@^2.1.5: - version "2.1.5" - resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/dom7/-/dom7-2.1.5.tgz#a79411017800b31d8400070cdaebbfc92c1f6377" - integrity sha1-p5QRAXgAsx2EAAcM2uu/ySwfY3c= +dom7@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/dom7/-/dom7-3.0.0.tgz#b861ce5d67a6becd7aaa3ad02942ff14b1240331" + integrity sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g== dependencies: - ssr-window "^2.0.0" + ssr-window "^3.0.0-alpha.1" domain-browser@^1.1.1: version "1.2.0" @@ -16232,10 +16232,10 @@ sshpk@^1.7.0: safer-buffer "^2.0.2" tweetnacl "~0.14.0" -ssr-window@^2.0.0: - version "2.0.0" - resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/ssr-window/-/ssr-window-2.0.0.tgz#98c301aef99523317f8d69618f0010791096efc4" - integrity sha1-mMMBrvmVIzF/jWlhjwAQeRCW78Q= +ssr-window@^3.0.0, ssr-window@^3.0.0-alpha.1: + version "3.0.0" + resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-3.0.0.tgz#fd5b82801638943e0cc704c4691801435af7ac37" + integrity sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA== ssri@^6.0.0, ssri@^6.0.1: version "6.0.1" @@ -16780,13 +16780,13 @@ svg-tags@^1.0.0: resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764" integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q= -swiper@^5.4.5: - version "5.4.5" - resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/swiper/-/swiper-5.4.5.tgz#a350f654bf68426dbb651793824925512d223c0f" - integrity sha1-o1D2VL9oQm27ZReTgkklUS0iPA8= +swiper@^6.5.6: + version "6.5.6" + resolved "https://registry.yarnpkg.com/swiper/-/swiper-6.5.6.tgz#4d1dc5cd124696dd765818f2484a1ec8e0d3d3bc" + integrity sha512-oKVshbF0vhdMFJXtcNH8vLpmyCHc7VvvIlOUafyazzlYzCRJmI80FxoIBWKzSqDyy8EXRn7Iy78p9o4I1Bww/Q== dependencies: - dom7 "^2.1.5" - ssr-window "^2.0.0" + dom7 "^3.0.0" + ssr-window "^3.0.0" symbol-observable@^1.0.4: version "1.2.0" From 7cb17a92abc58e1befb39e3f1f7184a58aa683ee Mon Sep 17 00:00:00 2001 From: yinonov Date: Thu, 15 Apr 2021 11:29:05 +0300 Subject: [PATCH 02/10] forward swiper bundle --- components/carousel/src/vwc-carousel.scss | 33 ++++++++++++----------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/components/carousel/src/vwc-carousel.scss b/components/carousel/src/vwc-carousel.scss index 5d1091a62..918b00189 100644 --- a/components/carousel/src/vwc-carousel.scss +++ b/components/carousel/src/vwc-carousel.scss @@ -1,4 +1,5 @@ @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables'; +@forward 'swiper/swiper-bundle.min.css'; vwc-carousel { display: inline-flex; @@ -46,21 +47,21 @@ vwc-casousel:active { /* stylelint-disable-next-line scss/dollar-variable-pattern -- (used in swiper lib) */ $themeColor: var(#{scheme-variables.$vvd-color-on-base}) !default; -@import 'swiper/scss/functions'; -@import 'swiper/components/core/core'; +// @import 'swiper/scss/functions'; +// @import 'swiper/components/core/core'; -//IMPORT_COMPONENTS -@import 'swiper/components/a11y/a11y'; -@import 'swiper/components/controller/controller'; -@import 'swiper/components/effect-coverflow/effect-coverflow'; -@import 'swiper/components/effect-cube/effect-cube'; -@import 'swiper/components/effect-fade/effect-fade'; -@import 'swiper/components/effect-flip/effect-flip'; -@import 'swiper/components/lazy/lazy'; -@import 'swiper/components/scrollbar/scrollbar'; -@import 'swiper/components/thumbs/thumbs'; -@import 'swiper/components/zoom/zoom'; +// //IMPORT_COMPONENTS +// @import 'swiper/components/a11y/a11y'; +// @import 'swiper/components/controller/controller'; +// @import 'swiper/components/effect-coverflow/effect-coverflow'; +// @import 'swiper/components/effect-cube/effect-cube'; +// @import 'swiper/components/effect-fade/effect-fade'; +// @import 'swiper/components/effect-flip/effect-flip'; +// @import 'swiper/components/lazy/lazy'; +// @import 'swiper/components/scrollbar/scrollbar'; +// @import 'swiper/components/thumbs/thumbs'; +// @import 'swiper/components/zoom/zoom'; -//IMPORT NAVIGATION/PAGINATION -@import './vwc-carousel-navigation'; -@import './vwc-carousel-pagination'; +// //IMPORT NAVIGATION/PAGINATION +// @import './vwc-carousel-navigation'; +// @import './vwc-carousel-pagination'; From 04d05d21f67e3d70df7e9a2a2f8315de588b5ad7 Mon Sep 17 00:00:00 2001 From: yinonov Date: Fri, 16 Apr 2021 09:42:02 +0300 Subject: [PATCH 03/10] typescript issues fixed --- components/carousel/package.json | 1 - components/carousel/src/vwc-carousel.ts | 10 +++++----- yarn.lock | 5 ----- 3 files changed, 5 insertions(+), 11 deletions(-) diff --git a/components/carousel/package.json b/components/carousel/package.json index 41b9672ff..29769b56e 100644 --- a/components/carousel/package.json +++ b/components/carousel/package.json @@ -33,7 +33,6 @@ "tslib": "^2.0.3" }, "devDependencies": { - "@types/swiper": "^5.4.2", "@vonage/vvd-design-tokens": "2.3.0", "@vonage/vvd-umbrella": "2.3.0", "typescript": "^4.1.3" diff --git a/components/carousel/src/vwc-carousel.ts b/components/carousel/src/vwc-carousel.ts index 17c59a81e..8734e1d6b 100644 --- a/components/carousel/src/vwc-carousel.ts +++ b/components/carousel/src/vwc-carousel.ts @@ -9,7 +9,7 @@ import { TemplateResult, } from 'lit-element'; import { style } from './vwc-carousel.css'; -import Swiper, { SwiperOptions } from 'swiper'; +import { Swiper, SwiperOptions } from 'swiper'; import '@vonage/vwc-icon'; import './vwc-carousel-item.js'; @@ -43,7 +43,7 @@ export class VWCCarousel extends LitElement { @query('.swiper-pagination') private swiperPagination?: HTMLElement; private swiper?: Swiper; - private slideRefs: HTMLElement[] = []; + private slideRefs: unknown[] = []; static get styles(): CSSResult[] { return [style]; @@ -158,7 +158,7 @@ export class VWCCarousel extends LitElement { if (slides.length > 2 && s.isEnd) { const first = slides[0]; s.removeSlide(0); - s.appendSlide(first); + s.appendSlide(first as HTMLElement); } } @@ -168,7 +168,7 @@ export class VWCCarousel extends LitElement { if (slides.length > 2 && s.isBeginning) { const last = slides[slides.length - 1]; s.removeSlide(slides.length - 1); - s.prependSlide(last); + s.prependSlide(last as HTMLElement); } } @@ -206,7 +206,7 @@ export class VWCCarousel extends LitElement { event.target as HTMLElement ); const domIndex = Array.from(this.swiperWrapper.children).indexOf( - this.slideRefs[logicalIndex] + (this.slideRefs as Element[])[logicalIndex] ); if (domIndex >= 0) { this.swiper.slideTo(domIndex); diff --git a/yarn.lock b/yarn.lock index 15d3d5d3c..3c95d8d58 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4850,11 +4850,6 @@ resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/download/@types/source-list-map/0.1.2/0d3836d982bc181a779327f6c0da46c9c32475e744c04c3b4e3bfa3d04a848c9#bc5f765df10572135c0bd4a956baf458c9996827" integrity sha1-vF92XfEFchNcC9SpVrr0WMmZaCc= -"@types/swiper@^5.4.2": - version "5.4.2" - resolved "https://registry.yarnpkg.com/@types/swiper/-/swiper-5.4.2.tgz#ff206cf5aea787f580b5dd9b466b4bcb8e0442f3" - integrity sha512-/7MaVDZ8ltMCZb6yfg1HWBRjwFjy9ytKpuPSZfNTrxpkQCaGQZdpceDSqKaSfGmJcVF0NcBFRsGTStyytV7grw== - "@types/tapable@*", "@types/tapable@^1.0.5": version "1.0.6" resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/download/@types/tapable/1.0.6/73adb44cd2ead4b333b1db97e94278c3c08d5e4c4254c274c82ac4725324115f#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74" From 1bd5e4ecc3d4f8d4e8e0e52db05c1ab6dd8c2259 Mon Sep 17 00:00:00 2001 From: yinonov Date: Sat, 17 Apr 2021 21:20:20 +0300 Subject: [PATCH 04/10] explicit click handler --- __snapshots__/carousel.md | 55 ----------------------- components/carousel/src/vwc-carousel.scss | 49 ++++++++++---------- components/carousel/src/vwc-carousel.ts | 15 +++---- 3 files changed, 31 insertions(+), 88 deletions(-) delete mode 100644 __snapshots__/carousel.md diff --git a/__snapshots__/carousel.md b/__snapshots__/carousel.md deleted file mode 100644 index 3fbaf49a4..000000000 --- a/__snapshots__/carousel.md +++ /dev/null @@ -1,55 +0,0 @@ -# `carousel` - -## `init flow` - -#### `should have the required elements` - -```html - -
-
- - -
-
-
-
- - -
-
- - -
-
-
-
- - -``` - diff --git a/components/carousel/src/vwc-carousel.scss b/components/carousel/src/vwc-carousel.scss index 918b00189..bd7e6379e 100644 --- a/components/carousel/src/vwc-carousel.scss +++ b/components/carousel/src/vwc-carousel.scss @@ -1,5 +1,30 @@ @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables'; -@forward 'swiper/swiper-bundle.min.css'; + +/* stylelint-disable-next-line scss/dollar-variable-pattern -- (used in swiper lib) */ +// $themeColor: var(#{scheme-variables.$vvd-color-on-base}) !default; + +@forward 'swiper/swiper'; +//IMPORT_COMPONENTS +@forward 'swiper/components/a11y/a11y'; +@forward 'swiper/components/controller/controller'; +@forward 'swiper/components/effect-coverflow/effect-coverflow'; +@forward 'swiper/components/effect-cube/effect-cube'; +@forward 'swiper/components/effect-fade/effect-fade'; +@forward 'swiper/components/effect-flip/effect-flip'; +@forward 'swiper/components/lazy/lazy'; +// @forward 'swiper/components/navigation/navigation' hide $themeColor, $colors; +// @forward 'swiper/components/pagination/pagination' hide $themeColor, $colors; +@forward 'swiper/components/scrollbar/scrollbar'; +@forward 'swiper/components/thumbs/thumbs'; +@forward 'swiper/components/zoom/zoom'; + +@forward 'vwc-carousel-navigation'; +@forward 'vwc-carousel-pagination'; + +:root { + --swiper-theme-color: var(#{scheme-variables.$vvd-color-on-base}); + --swiper-navigation-size: 144px; +} vwc-carousel { display: inline-flex; @@ -43,25 +68,3 @@ vwc-casousel:active { overflow: hidden; contain: strict; } - -/* stylelint-disable-next-line scss/dollar-variable-pattern -- (used in swiper lib) */ -$themeColor: var(#{scheme-variables.$vvd-color-on-base}) !default; - -// @import 'swiper/scss/functions'; -// @import 'swiper/components/core/core'; - -// //IMPORT_COMPONENTS -// @import 'swiper/components/a11y/a11y'; -// @import 'swiper/components/controller/controller'; -// @import 'swiper/components/effect-coverflow/effect-coverflow'; -// @import 'swiper/components/effect-cube/effect-cube'; -// @import 'swiper/components/effect-fade/effect-fade'; -// @import 'swiper/components/effect-flip/effect-flip'; -// @import 'swiper/components/lazy/lazy'; -// @import 'swiper/components/scrollbar/scrollbar'; -// @import 'swiper/components/thumbs/thumbs'; -// @import 'swiper/components/zoom/zoom'; - -// //IMPORT NAVIGATION/PAGINATION -// @import './vwc-carousel-navigation'; -// @import './vwc-carousel-pagination'; diff --git a/components/carousel/src/vwc-carousel.ts b/components/carousel/src/vwc-carousel.ts index 8734e1d6b..b7fde7140 100644 --- a/components/carousel/src/vwc-carousel.ts +++ b/components/carousel/src/vwc-carousel.ts @@ -36,10 +36,6 @@ export class VWCCarousel extends LitElement { private swiperContainer?: HTMLElement; @query('.swiper-wrapper') private swiperWrapper?: HTMLElement; - @query('.swiper-button-next') - private swiperButtonNext?: HTMLElement; - @query('.swiper-button-prev') - private swiperButtonPrev?: HTMLElement; @query('.swiper-pagination') private swiperPagination?: HTMLElement; private swiper?: Swiper; @@ -59,10 +55,6 @@ export class VWCCarousel extends LitElement { } : false, cssMode: false, - navigation: { - prevEl: this.swiperButtonPrev as HTMLElement, - nextEl: this.swiperButtonNext as HTMLElement, - }, mousewheel: true, keyboard: true, on: { @@ -87,20 +79,23 @@ export class VWCCarousel extends LitElement { } }); + /* eslint-disable lit-a11y/click-events-have-key-events */ return html`
-
+ +
${slides}
-
+
`; + /* eslint-enable lit-a11y/click-events-have-key-events */ } protected firstUpdated(): void { From f3ba223e4550b2da50e4cd15470ce005399641cf Mon Sep 17 00:00:00 2001 From: Yuri Guller Date: Sun, 18 Apr 2021 12:57:08 +0300 Subject: [PATCH 05/10] fixing some TS glitches --- components/carousel/src/vwc-carousel.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/carousel/src/vwc-carousel.ts b/components/carousel/src/vwc-carousel.ts index b7fde7140..f381b815b 100644 --- a/components/carousel/src/vwc-carousel.ts +++ b/components/carousel/src/vwc-carousel.ts @@ -39,7 +39,7 @@ export class VWCCarousel extends LitElement { @query('.swiper-pagination') private swiperPagination?: HTMLElement; private swiper?: Swiper; - private slideRefs: unknown[] = []; + private slideRefs: Element[] = []; static get styles(): CSSResult[] { return [style]; @@ -201,7 +201,7 @@ export class VWCCarousel extends LitElement { event.target as HTMLElement ); const domIndex = Array.from(this.swiperWrapper.children).indexOf( - (this.slideRefs as Element[])[logicalIndex] + this.slideRefs[logicalIndex] ); if (domIndex >= 0) { this.swiper.slideTo(domIndex); From 1db58fab1c535a8d25ecec25c0315380eb64f0cc Mon Sep 17 00:00:00 2001 From: yinonov Date: Sun, 18 Apr 2021 13:02:24 +0300 Subject: [PATCH 06/10] revert changes --- __snapshots__/carousel.md | 37 +++++++++++++++++++++++++ components/carousel/src/vwc-carousel.ts | 13 +++++++-- 2 files changed, 47 insertions(+), 3 deletions(-) create mode 100644 __snapshots__/carousel.md diff --git a/__snapshots__/carousel.md b/__snapshots__/carousel.md new file mode 100644 index 000000000..195abe16c --- /dev/null +++ b/__snapshots__/carousel.md @@ -0,0 +1,37 @@ +# `carousel` + +## `init flow` + +#### `should have the required elements` + +```html + +
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+ + +``` + diff --git a/components/carousel/src/vwc-carousel.ts b/components/carousel/src/vwc-carousel.ts index b7fde7140..647d586cf 100644 --- a/components/carousel/src/vwc-carousel.ts +++ b/components/carousel/src/vwc-carousel.ts @@ -36,6 +36,10 @@ export class VWCCarousel extends LitElement { private swiperContainer?: HTMLElement; @query('.swiper-wrapper') private swiperWrapper?: HTMLElement; + @query('.swiper-button-next') + private swiperButtonNext?: HTMLElement; + @query('.swiper-button-prev') + private swiperButtonPrev?: HTMLElement; @query('.swiper-pagination') private swiperPagination?: HTMLElement; private swiper?: Swiper; @@ -55,6 +59,10 @@ export class VWCCarousel extends LitElement { } : false, cssMode: false, + navigation: { + prevEl: this.swiperButtonPrev as HTMLElement, + nextEl: this.swiperButtonNext as HTMLElement, + }, mousewheel: true, keyboard: true, on: { @@ -82,14 +90,13 @@ export class VWCCarousel extends LitElement { /* eslint-disable lit-a11y/click-events-have-key-events */ return html`
- -
+
${slides}
-
+
From 020288d1815e4e250dd6253048f01fcd6b8efe32 Mon Sep 17 00:00:00 2001 From: Yuri Guller Date: Sun, 18 Apr 2021 14:54:59 +0300 Subject: [PATCH 07/10] issue 493: fixed stuff --- __snapshots__/carousel.md | 4 ++-- .../carousel/src/vwc-carousel-navigation.scss | 1 + components/carousel/src/vwc-carousel.scss | 13 ----------- components/carousel/src/vwc-carousel.ts | 23 +++++++++---------- 4 files changed, 14 insertions(+), 27 deletions(-) diff --git a/__snapshots__/carousel.md b/__snapshots__/carousel.md index 195abe16c..0fd68fd4a 100644 --- a/__snapshots__/carousel.md +++ b/__snapshots__/carousel.md @@ -10,13 +10,13 @@ tabindex="0" >
-
+
+
diff --git a/components/carousel/src/vwc-carousel-navigation.scss b/components/carousel/src/vwc-carousel-navigation.scss index 19c38dfd0..d256eeeaa 100644 --- a/components/carousel/src/vwc-carousel-navigation.scss +++ b/components/carousel/src/vwc-carousel-navigation.scss @@ -28,4 +28,5 @@ } .swiper-button-next { border-bottom-right-radius: 6px; + border-top-right-radius: 6px; } diff --git a/components/carousel/src/vwc-carousel.scss b/components/carousel/src/vwc-carousel.scss index bd7e6379e..38f1dce7b 100644 --- a/components/carousel/src/vwc-carousel.scss +++ b/components/carousel/src/vwc-carousel.scss @@ -7,25 +7,12 @@ //IMPORT_COMPONENTS @forward 'swiper/components/a11y/a11y'; @forward 'swiper/components/controller/controller'; -@forward 'swiper/components/effect-coverflow/effect-coverflow'; -@forward 'swiper/components/effect-cube/effect-cube'; -@forward 'swiper/components/effect-fade/effect-fade'; -@forward 'swiper/components/effect-flip/effect-flip'; -@forward 'swiper/components/lazy/lazy'; // @forward 'swiper/components/navigation/navigation' hide $themeColor, $colors; // @forward 'swiper/components/pagination/pagination' hide $themeColor, $colors; -@forward 'swiper/components/scrollbar/scrollbar'; -@forward 'swiper/components/thumbs/thumbs'; -@forward 'swiper/components/zoom/zoom'; @forward 'vwc-carousel-navigation'; @forward 'vwc-carousel-pagination'; -:root { - --swiper-theme-color: var(#{scheme-variables.$vvd-color-on-base}); - --swiper-navigation-size: 144px; -} - vwc-carousel { display: inline-flex; width: 300px; diff --git a/components/carousel/src/vwc-carousel.ts b/components/carousel/src/vwc-carousel.ts index faf108ca6..01ef343aa 100644 --- a/components/carousel/src/vwc-carousel.ts +++ b/components/carousel/src/vwc-carousel.ts @@ -9,7 +9,9 @@ import { TemplateResult, } from 'lit-element'; import { style } from './vwc-carousel.css'; -import { Swiper, SwiperOptions } from 'swiper'; +import { + Swiper, SwiperOptions, Autoplay, Keyboard, Mousewheel, Navigation +} from 'swiper'; import '@vonage/vwc-icon'; import './vwc-carousel-item.js'; @@ -21,6 +23,8 @@ declare global { const CAROUSEL_STYLE_ID = 'vwc-carousel-style-id'; +Swiper.use([Autoplay, Keyboard, Mousewheel, Navigation]); + /** * This component is a carousel */ @@ -36,10 +40,6 @@ export class VWCCarousel extends LitElement { private swiperContainer?: HTMLElement; @query('.swiper-wrapper') private swiperWrapper?: HTMLElement; - @query('.swiper-button-next') - private swiperButtonNext?: HTMLElement; - @query('.swiper-button-prev') - private swiperButtonPrev?: HTMLElement; @query('.swiper-pagination') private swiperPagination?: HTMLElement; private swiper?: Swiper; @@ -54,17 +54,16 @@ export class VWCCarousel extends LitElement { loop: false, autoplay: this.autoplay ? { - delay: 2500, - disableOnInteraction: true, - } + delay: 2500 + } : false, cssMode: false, + keyboard: true, + uniqueNavElements: true, navigation: { - prevEl: this.swiperButtonPrev as HTMLElement, - nextEl: this.swiperButtonNext as HTMLElement, + prevEl: '.swiper-button-prev', + nextEl: '.swiper-button-next', }, - mousewheel: true, - keyboard: true, on: { slideNextTransitionEnd: this.moveFirstIfNeeded, slidePrevTransitionEnd: this.moveLastIfNeeded, From 0918e575e18cc09ea240adaeb6259d12fc0d5c6a Mon Sep 17 00:00:00 2001 From: Yuri Guller Date: Sun, 18 Apr 2021 15:50:28 +0300 Subject: [PATCH 08/10] issue #493: fixed the swiper touch part --- __snapshots__/carousel.md | 6 +++--- components/carousel/src/vwc-carousel.scss | 6 ------ components/carousel/src/vwc-carousel.ts | 1 + 3 files changed, 4 insertions(+), 9 deletions(-) diff --git a/__snapshots__/carousel.md b/__snapshots__/carousel.md index 0fd68fd4a..8a41ebecd 100644 --- a/__snapshots__/carousel.md +++ b/__snapshots__/carousel.md @@ -10,18 +10,18 @@ tabindex="0" >
- +
-
+
Date: Sun, 18 Apr 2021 15:56:59 +0300 Subject: [PATCH 09/10] issue #493: fixed the swiper touch part --- components/carousel/src/vwc-carousel.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/carousel/src/vwc-carousel.ts b/components/carousel/src/vwc-carousel.ts index 5f590c256..e2949deae 100644 --- a/components/carousel/src/vwc-carousel.ts +++ b/components/carousel/src/vwc-carousel.ts @@ -156,9 +156,9 @@ export class VWCCarousel extends LitElement { const s = swiper ?? ((this as unknown) as Swiper); const slides = s.slides; if (slides.length > 2 && s.isEnd) { - const first = slides[0]; + const first = slides[0] as HTMLElement; s.removeSlide(0); - s.appendSlide(first as HTMLElement); + s.appendSlide(first); } } @@ -166,9 +166,9 @@ export class VWCCarousel extends LitElement { const s = swiper ?? ((this as unknown) as Swiper); const slides = s.slides; if (slides.length > 2 && s.isBeginning) { - const last = slides[slides.length - 1]; + const last = slides[slides.length - 1] as HTMLElement; s.removeSlide(slides.length - 1); - s.prependSlide(last as HTMLElement); + s.prependSlide(last); } } From 15806e19623acb3c5de662e62df29f9cbbc30ff9 Mon Sep 17 00:00:00 2001 From: Yuri Guller Date: Sun, 18 Apr 2021 16:14:34 +0300 Subject: [PATCH 10/10] issue #493: reducing swiper consumptions --- components/carousel/src/vwc-carousel.scss | 2 -- components/carousel/src/vwc-carousel.ts | 6 +++--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/components/carousel/src/vwc-carousel.scss b/components/carousel/src/vwc-carousel.scss index 6d4c75217..63a85b2cf 100644 --- a/components/carousel/src/vwc-carousel.scss +++ b/components/carousel/src/vwc-carousel.scss @@ -1,8 +1,6 @@ @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables'; @forward 'swiper/swiper'; -@forward 'swiper/components/a11y/a11y'; -@forward 'swiper/components/controller/controller'; @forward 'vwc-carousel-navigation'; @forward 'vwc-carousel-pagination'; diff --git a/components/carousel/src/vwc-carousel.ts b/components/carousel/src/vwc-carousel.ts index e2949deae..59322f639 100644 --- a/components/carousel/src/vwc-carousel.ts +++ b/components/carousel/src/vwc-carousel.ts @@ -9,9 +9,9 @@ import { TemplateResult, } from 'lit-element'; import { style } from './vwc-carousel.css'; -import { +import SwiperCore, { Swiper, SwiperOptions, Autoplay, Keyboard, Mousewheel, Navigation -} from 'swiper'; +} from 'swiper/core'; import '@vonage/vwc-icon'; import './vwc-carousel-item.js'; @@ -23,7 +23,7 @@ declare global { const CAROUSEL_STYLE_ID = 'vwc-carousel-style-id'; -Swiper.use([Autoplay, Keyboard, Mousewheel, Navigation]); +SwiperCore.use([Autoplay, Keyboard, Mousewheel, Navigation]); /** * This component is a carousel