UNPKG

25.5 kBJavaScriptView Raw
1/**
2 * Swiper Custom Element 11.1.14
3 * Most modern mobile touch slider and framework with hardware accelerated transitions
4 * https://swiperjs.com
5 *
6 * Copyright 2014-2024 Vladimir Kharlampidi
7 *
8 * Released under the MIT License
9 *
10 * Released on: September 12, 2024
11 */
12
13import './swiper-bundle.mjs';
14import { p as paramsList, n as needsNavigation, a as needsPagination, b as needsScrollbar, u as updateSwiper, c as attrToProp } from './shared/update-swiper.mjs';
15import { g as getParams } from './shared/get-element-params.mjs';
16import { S as Swiper } from './shared/swiper-core.mjs';
17
18/* eslint-disable spaced-comment */
19
20const 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}`
21const 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
23class DummyHTMLElement {}
24const ClassToExtend = typeof window === 'undefined' || typeof HTMLElement === 'undefined' ? DummyHTMLElement : HTMLElement;
25const 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 `;
27const 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};
39class 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 // eslint-disable-line
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 // slide slots
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 // local styles
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 // prettier-ignore
107 const el = document.createElement('div');
108 el.classList.add('swiper');
109 el.part = 'container';
110
111 // prettier-ignore
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 // eslint-disable-next-line
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}
232paramsList.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});
248class 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// eslint-disable-next-line
275const 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};
280if (typeof window !== 'undefined') {
281 window.SwiperElementRegisterParams = params => {
282 paramsList.push(...params);
283 };
284}
285
286export { SwiperContainer, SwiperSlide, register };