UNPKG

25.5 kBJavaScriptView Raw
1/**
2 * Swiper Custom Element 11.1.4
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: May 30, 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-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-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-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 observeSlideChildren: this.slideSlots > 0
157 }),
158 ...swiperParams,
159 touchEventsTarget: 'container',
160 onAny: function (name) {
161 if (name === 'observerUpdate') {
162 _this.calcSlideSlots();
163 }
164 const eventName = swiperParams.eventsPrefix ? `${swiperParams.eventsPrefix}${name.toLowerCase()}` : name.toLowerCase();
165 for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
166 args[_key - 1] = arguments[_key];
167 }
168 const event = new CustomEvent(eventName, {
169 detail: args,
170 bubbles: name !== 'hashChange',
171 cancelable: true
172 });
173 _this.dispatchEvent(event);
174 }
175 });
176 }
177 connectedCallback() {
178 if (this.initialized && this.nested && this.closest('swiper-slide') && this.closest('swiper-slide').swiperLoopMoveDOM) {
179 return;
180 }
181 if (this.init === false || this.getAttribute('init') === 'false') {
182 return;
183 }
184 this.initialize();
185 }
186 disconnectedCallback() {
187 if (this.nested && this.closest('swiper-slide') && this.closest('swiper-slide').swiperLoopMoveDOM) {
188 return;
189 }
190 if (this.swiper && this.swiper.destroy) {
191 this.swiper.destroy();
192 }
193 this.initialized = false;
194 }
195 updateSwiperOnPropChange(propName, propValue) {
196 const {
197 params: swiperParams,
198 passedParams
199 } = getParams(this, propName, propValue);
200 this.passedParams = passedParams;
201 this.swiperParams = swiperParams;
202 if (this.swiper && this.swiper.params[propName] === propValue) {
203 return;
204 }
205 updateSwiper({
206 swiper: this.swiper,
207 passedParams: this.passedParams,
208 changedParams: [attrToProp(propName)],
209 ...(propName === 'navigation' && passedParams[propName] ? {
210 prevEl: '.swiper-button-prev',
211 nextEl: '.swiper-button-next'
212 } : {}),
213 ...(propName === 'pagination' && passedParams[propName] ? {
214 paginationEl: '.swiper-pagination'
215 } : {}),
216 ...(propName === 'scrollbar' && passedParams[propName] ? {
217 scrollbarEl: '.swiper-scrollbar'
218 } : {})
219 });
220 }
221 attributeChangedCallback(attr, prevValue, newValue) {
222 if (!this.initialized) return;
223 if (prevValue === 'true' && newValue === null) {
224 newValue = false;
225 }
226 this.updateSwiperOnPropChange(attr, newValue);
227 }
228 static get observedAttributes() {
229 const attrs = paramsList.filter(param => param.includes('_')).map(param => param.replace(/[A-Z]/g, v => `-${v}`).replace('_', '').toLowerCase());
230 return attrs;
231 }
232}
233paramsList.forEach(paramName => {
234 if (paramName === 'init') return;
235 paramName = paramName.replace('_', '');
236 Object.defineProperty(SwiperContainer.prototype, paramName, {
237 configurable: true,
238 get() {
239 return (this.passedParams || {})[paramName];
240 },
241 set(value) {
242 if (!this.passedParams) this.passedParams = {};
243 this.passedParams[paramName] = value;
244 if (!this.initialized) return;
245 this.updateSwiperOnPropChange(paramName, value);
246 }
247 });
248});
249class SwiperSlide extends ClassToExtend {
250 constructor() {
251 super();
252 this.attachShadow({
253 mode: 'open'
254 });
255 }
256 render() {
257 const lazy = this.lazy || this.getAttribute('lazy') === '' || this.getAttribute('lazy') === 'true';
258 addStyle(this.shadowRoot, SwiperSlideCSS);
259 this.shadowRoot.appendChild(document.createElement('slot'));
260 if (lazy) {
261 const lazyDiv = document.createElement('div');
262 lazyDiv.classList.add('swiper-lazy-preloader');
263 lazyDiv.part.add('preloader');
264 this.shadowRoot.appendChild(lazyDiv);
265 }
266 }
267 initialize() {
268 this.render();
269 }
270 connectedCallback() {
271 this.initialize();
272 }
273}
274
275// eslint-disable-next-line
276const register = () => {
277 if (typeof window === 'undefined') return;
278 if (!window.customElements.get('swiper-container')) window.customElements.define('swiper-container', SwiperContainer);
279 if (!window.customElements.get('swiper-slide')) window.customElements.define('swiper-slide', SwiperSlide);
280};
281if (typeof window !== 'undefined') {
282 window.SwiperElementRegisterParams = params => {
283 paramsList.push(...params);
284 };
285}
286
287export { SwiperContainer, SwiperSlide, register };