1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 | import './swiper-bundle.mjs';
|
14 | import { p as paramsList, n as needsNavigation, a as needsPagination, b as needsScrollbar, u as updateSwiper, c as attrToProp } from './shared/update-swiper.mjs';
|
15 | import { g as getParams } from './shared/get-element-params.mjs';
|
16 | import { S as Swiper } from './shared/swiper-core.mjs';
|
17 |
|
18 |
|
19 |
|
20 | const SwiperCSS = `:host{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{width:100%;height:100%;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 ::slotted(swiper-slide),.swiper-ios ::slotted(swiper-slide),.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}::slotted(swiper-slide){flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}::slotted(.swiper-slide-invisible-blank){visibility:hidden}.swiper-autoheight,.swiper-autoheight ::slotted(swiper-slide){height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden ::slotted(swiper-slide){transform:translateZ(0);-webkit-backface-visibility:hidden;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-cube-shadow,.swiper-3d ::slotted(swiper-slide){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 ::slotted(swiper-slide){scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode ::slotted(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 ::slotted(swiper-slide){scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal ::slotted(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 ::slotted(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-virtual ::slotted(swiper-slide){-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:host{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}::slotted(.swiper-slide-zoomed){cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode ::slotted(swiper-slide){transition-timing-function:ease-out}.swiper-fade ::slotted(swiper-slide){pointer-events:none;transition-property:opacity}.swiper-fade ::slotted(swiper-slide) ::slotted(swiper-slide){pointer-events:none}.swiper-fade ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-fade ::slotted(.swiper-slide-active) ::slotted(.swiper-slide-active){pointer-events:auto}.swiper.swiper-cube{overflow:visible}.swiper-cube ::slotted(swiper-slide){pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube ::slotted(swiper-slide) ::slotted(swiper-slide){pointer-events:none}.swiper-cube.swiper-rtl ::slotted(swiper-slide){transform-origin:100% 0}.swiper-cube ::slotted(.swiper-slide-active),.swiper-cube ::slotted(.swiper-slide-active) ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-cube ::slotted(.swiper-slide-active),.swiper-cube ::slotted(.swiper-slide-next),.swiper-cube ::slotted(.swiper-slide-prev){pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube ::slotted(.swiper-slide-next)+::slotted(swiper-slide){pointer-events:auto;visibility:visible}.swiper.swiper-flip{overflow:visible}.swiper-flip ::slotted(swiper-slide){pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip ::slotted(swiper-slide) ::slotted(swiper-slide){pointer-events:none}.swiper-flip ::slotted(.swiper-slide-active),.swiper-flip ::slotted(.swiper-slide-active) ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-creative ::slotted(swiper-slide){-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards ::slotted(swiper-slide){transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}`
|
21 | const SwiperSlideCSS = `::slotted(.swiper-slide-shadow),::slotted(.swiper-slide-shadow-bottom),::slotted(.swiper-slide-shadow-left),::slotted(.swiper-slide-shadow-right),::slotted(.swiper-slide-shadow-top){position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}::slotted(.swiper-slide-shadow){background:rgba(0,0,0,.15)}::slotted(.swiper-slide-shadow-left){background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}::slotted(.swiper-slide-shadow-right){background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}::slotted(.swiper-slide-shadow-top){background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}::slotted(.swiper-slide-shadow-bottom){background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear;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}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-bottom),::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-left),::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-right),::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-top){z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-bottom),::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-left),::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-right),::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-top){z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}::slotted(.swiper-zoom-container){width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}::slotted(.swiper-zoom-container)>canvas,::slotted(.swiper-zoom-container)>img,::slotted(.swiper-zoom-container)>svg{max-width:100%;max-height:100%;object-fit:contain}`
|
22 |
|
23 | class DummyHTMLElement {}
|
24 | const ClassToExtend = typeof window === 'undefined' || typeof HTMLElement === 'undefined' ? DummyHTMLElement : HTMLElement;
|
25 | const arrowSvg = `<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.38296 20.0762C0.111788 19.805 0.111788 19.3654 0.38296 19.0942L9.19758 10.2796L0.38296 1.46497C0.111788 1.19379 0.111788 0.754138 0.38296 0.482966C0.654131 0.211794 1.09379 0.211794 1.36496 0.482966L10.4341 9.55214C10.8359 9.9539 10.8359 10.6053 10.4341 11.007L1.36496 20.0762C1.09379 20.3474 0.654131 20.3474 0.38296 20.0762Z" fill="currentColor"/></svg>
|
26 | `;
|
27 | const addStyle = (shadowRoot, styles) => {
|
28 | if (typeof CSSStyleSheet !== 'undefined' && shadowRoot.adoptedStyleSheets) {
|
29 | const styleSheet = new CSSStyleSheet();
|
30 | styleSheet.replaceSync(styles);
|
31 | shadowRoot.adoptedStyleSheets = [styleSheet];
|
32 | } else {
|
33 | const style = document.createElement('style');
|
34 | style.rel = 'stylesheet';
|
35 | style.textContent = styles;
|
36 | shadowRoot.appendChild(style);
|
37 | }
|
38 | };
|
39 | class SwiperContainer extends ClassToExtend {
|
40 | constructor() {
|
41 | super();
|
42 | this.attachShadow({
|
43 | mode: 'open'
|
44 | });
|
45 | }
|
46 | static get nextButtonSvg() {
|
47 | return arrowSvg;
|
48 | }
|
49 | static get prevButtonSvg() {
|
50 | return arrowSvg.replace('/></svg>', ' transform-origin="center" transform="rotate(180)"/></svg>');
|
51 | }
|
52 | cssStyles() {
|
53 | return [SwiperCSS,
|
54 |
|
55 | ...(this.injectStyles && Array.isArray(this.injectStyles) ? this.injectStyles : [])].join('\n');
|
56 | }
|
57 | cssLinks() {
|
58 | return this.injectStylesUrls || [];
|
59 | }
|
60 | calcSlideSlots() {
|
61 | const currentSideSlots = this.slideSlots || 0;
|
62 |
|
63 | const slideSlotChildren = [...this.querySelectorAll(`[slot^=slide-]`)].map(child => {
|
64 | return parseInt(child.getAttribute('slot').split('slide-')[1], 10);
|
65 | });
|
66 | this.slideSlots = slideSlotChildren.length ? Math.max(...slideSlotChildren) + 1 : 0;
|
67 | if (!this.rendered) return;
|
68 | if (this.slideSlots > currentSideSlots) {
|
69 | for (let i = currentSideSlots; i < this.slideSlots; i += 1) {
|
70 | const slideEl = document.createElement('swiper-slide');
|
71 | slideEl.setAttribute('part', `slide slide-${i + 1}`);
|
72 | const slotEl = document.createElement('slot');
|
73 | slotEl.setAttribute('name', `slide-${i + 1}`);
|
74 | slideEl.appendChild(slotEl);
|
75 | this.shadowRoot.querySelector('.swiper-wrapper').appendChild(slideEl);
|
76 | }
|
77 | } else if (this.slideSlots < currentSideSlots) {
|
78 | const slides = this.swiper.slides;
|
79 | for (let i = slides.length - 1; i >= 0; i -= 1) {
|
80 | if (i > this.slideSlots) {
|
81 | slides[i].remove();
|
82 | }
|
83 | }
|
84 | }
|
85 | }
|
86 | render() {
|
87 | if (this.rendered) return;
|
88 | this.calcSlideSlots();
|
89 |
|
90 |
|
91 | let localStyles = this.cssStyles();
|
92 | if (this.slideSlots > 0) {
|
93 | localStyles = localStyles.replace(/::slotted\(([a-z-0-9.]*)\)/g, '$1');
|
94 | }
|
95 | if (localStyles.length) {
|
96 | addStyle(this.shadowRoot, localStyles);
|
97 | }
|
98 | this.cssLinks().forEach(url => {
|
99 | const linkExists = this.shadowRoot.querySelector(`link[href="${url}"]`);
|
100 | if (linkExists) return;
|
101 | const linkEl = document.createElement('link');
|
102 | linkEl.rel = 'stylesheet';
|
103 | linkEl.href = url;
|
104 | this.shadowRoot.appendChild(linkEl);
|
105 | });
|
106 |
|
107 | const el = document.createElement('div');
|
108 | el.classList.add('swiper');
|
109 | el.part = 'container';
|
110 |
|
111 |
|
112 | el.innerHTML = `
|
113 | <slot name="container-start"></slot>
|
114 | <div class="swiper-wrapper" part="wrapper">
|
115 | <slot></slot>
|
116 | ${Array.from({
|
117 | length: this.slideSlots
|
118 | }).map((_, index) => `
|
119 | <swiper-slide part="slide slide-${index}">
|
120 | <slot name="slide-${index}"></slot>
|
121 | </swiper-slide>
|
122 | `).join('')}
|
123 | </div>
|
124 | <slot name="container-end"></slot>
|
125 | ${needsNavigation(this.passedParams) ? `
|
126 | <div part="button-prev" class="swiper-button-prev">${this.constructor.prevButtonSvg}</div>
|
127 | <div part="button-next" class="swiper-button-next">${this.constructor.nextButtonSvg}</div>
|
128 | ` : ''}
|
129 | ${needsPagination(this.passedParams) ? `
|
130 | <div part="pagination" class="swiper-pagination"></div>
|
131 | ` : ''}
|
132 | ${needsScrollbar(this.passedParams) ? `
|
133 | <div part="scrollbar" class="swiper-scrollbar"></div>
|
134 | ` : ''}
|
135 | `;
|
136 | this.shadowRoot.appendChild(el);
|
137 | this.rendered = true;
|
138 | }
|
139 | initialize() {
|
140 | var _this = this;
|
141 | if (this.initialized) return;
|
142 | this.initialized = true;
|
143 | const {
|
144 | params: swiperParams,
|
145 | passedParams
|
146 | } = getParams(this);
|
147 | this.swiperParams = swiperParams;
|
148 | this.passedParams = passedParams;
|
149 | delete this.swiperParams.init;
|
150 | this.render();
|
151 |
|
152 |
|
153 | this.swiper = new Swiper(this.shadowRoot.querySelector('.swiper'), {
|
154 | ...(swiperParams.virtual ? {} : {
|
155 | observer: true
|
156 | }),
|
157 | ...swiperParams,
|
158 | touchEventsTarget: 'container',
|
159 | onAny: function (name) {
|
160 | if (name === 'observerUpdate') {
|
161 | _this.calcSlideSlots();
|
162 | }
|
163 | const eventName = swiperParams.eventsPrefix ? `${swiperParams.eventsPrefix}${name.toLowerCase()}` : name.toLowerCase();
|
164 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
165 | args[_key - 1] = arguments[_key];
|
166 | }
|
167 | const event = new CustomEvent(eventName, {
|
168 | detail: args,
|
169 | bubbles: name !== 'hashChange',
|
170 | cancelable: true
|
171 | });
|
172 | _this.dispatchEvent(event);
|
173 | }
|
174 | });
|
175 | }
|
176 | connectedCallback() {
|
177 | if (this.initialized && this.nested && this.closest('swiper-slide') && this.closest('swiper-slide').swiperLoopMoveDOM) {
|
178 | return;
|
179 | }
|
180 | if (this.init === false || this.getAttribute('init') === 'false') {
|
181 | return;
|
182 | }
|
183 | this.initialize();
|
184 | }
|
185 | disconnectedCallback() {
|
186 | if (this.nested && this.closest('swiper-slide') && this.closest('swiper-slide').swiperLoopMoveDOM) {
|
187 | return;
|
188 | }
|
189 | if (this.swiper && this.swiper.destroy) {
|
190 | this.swiper.destroy();
|
191 | }
|
192 | this.initialized = false;
|
193 | }
|
194 | updateSwiperOnPropChange(propName, propValue) {
|
195 | const {
|
196 | params: swiperParams,
|
197 | passedParams
|
198 | } = getParams(this, propName, propValue);
|
199 | this.passedParams = passedParams;
|
200 | this.swiperParams = swiperParams;
|
201 | if (this.swiper && this.swiper.params[propName] === propValue) {
|
202 | return;
|
203 | }
|
204 | updateSwiper({
|
205 | swiper: this.swiper,
|
206 | passedParams: this.passedParams,
|
207 | changedParams: [attrToProp(propName)],
|
208 | ...(propName === 'navigation' && passedParams[propName] ? {
|
209 | prevEl: '.swiper-button-prev',
|
210 | nextEl: '.swiper-button-next'
|
211 | } : {}),
|
212 | ...(propName === 'pagination' && passedParams[propName] ? {
|
213 | paginationEl: '.swiper-pagination'
|
214 | } : {}),
|
215 | ...(propName === 'scrollbar' && passedParams[propName] ? {
|
216 | scrollbarEl: '.swiper-scrollbar'
|
217 | } : {})
|
218 | });
|
219 | }
|
220 | attributeChangedCallback(attr, prevValue, newValue) {
|
221 | if (!this.initialized) return;
|
222 | if (prevValue === 'true' && newValue === null) {
|
223 | newValue = false;
|
224 | }
|
225 | this.updateSwiperOnPropChange(attr, newValue);
|
226 | }
|
227 | static get observedAttributes() {
|
228 | const attrs = paramsList.filter(param => param.includes('_')).map(param => param.replace(/[A-Z]/g, v => `-${v}`).replace('_', '').toLowerCase());
|
229 | return attrs;
|
230 | }
|
231 | }
|
232 | paramsList.forEach(paramName => {
|
233 | if (paramName === 'init') return;
|
234 | paramName = paramName.replace('_', '');
|
235 | Object.defineProperty(SwiperContainer.prototype, paramName, {
|
236 | configurable: true,
|
237 | get() {
|
238 | return (this.passedParams || {})[paramName];
|
239 | },
|
240 | set(value) {
|
241 | if (!this.passedParams) this.passedParams = {};
|
242 | this.passedParams[paramName] = value;
|
243 | if (!this.initialized) return;
|
244 | this.updateSwiperOnPropChange(paramName, value);
|
245 | }
|
246 | });
|
247 | });
|
248 | class SwiperSlide extends ClassToExtend {
|
249 | constructor() {
|
250 | super();
|
251 | this.attachShadow({
|
252 | mode: 'open'
|
253 | });
|
254 | }
|
255 | render() {
|
256 | const lazy = this.lazy || this.getAttribute('lazy') === '' || this.getAttribute('lazy') === 'true';
|
257 | addStyle(this.shadowRoot, SwiperSlideCSS);
|
258 | this.shadowRoot.appendChild(document.createElement('slot'));
|
259 | if (lazy) {
|
260 | const lazyDiv = document.createElement('div');
|
261 | lazyDiv.classList.add('swiper-lazy-preloader');
|
262 | lazyDiv.part.add('preloader');
|
263 | this.shadowRoot.appendChild(lazyDiv);
|
264 | }
|
265 | }
|
266 | initialize() {
|
267 | this.render();
|
268 | }
|
269 | connectedCallback() {
|
270 | this.initialize();
|
271 | }
|
272 | }
|
273 |
|
274 |
|
275 | const register = () => {
|
276 | if (typeof window === 'undefined') return;
|
277 | if (!window.customElements.get('swiper-container')) window.customElements.define('swiper-container', SwiperContainer);
|
278 | if (!window.customElements.get('swiper-slide')) window.customElements.define('swiper-slide', SwiperSlide);
|
279 | };
|
280 | if (typeof window !== 'undefined') {
|
281 | window.SwiperElementRegisterParams = params => {
|
282 | paramsList.push(...params);
|
283 | };
|
284 | }
|
285 |
|
286 | export { SwiperContainer, SwiperSlide, register };
|