pb-sxp-ui 1.9.1 → 1.9.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -298,6 +298,17 @@ function getCookie(val) {
298
298
  });
299
299
  return value !== null && value !== void 0 ? value : '';
300
300
  }
301
+ function getScreenReader() {
302
+ let userAgent = self.navigator.userAgent;
303
+ if (!userAgent)
304
+ return false;
305
+ return (/TalkBack/i.test(userAgent) ||
306
+ /Funtouch/i.test(userAgent) ||
307
+ /VoiceOver/i.test(userAgent) ||
308
+ /NVDA/i.test(userAgent) ||
309
+ /JAWS/i.test(userAgent) ||
310
+ /ChromeVox/i.test(userAgent));
311
+ }
301
312
 
302
313
  function unzip(b64Data) {
303
314
  const strData = atob(b64Data);
@@ -2579,6 +2590,119 @@ function makeElementsArray(el) {
2579
2590
  return (Array.isArray(el) ? el : [el]).filter(e => !!e);
2580
2591
  }
2581
2592
 
2593
+ /* eslint-disable consistent-return */
2594
+ function Keyboard(_ref) {
2595
+ let {
2596
+ swiper,
2597
+ extendParams,
2598
+ on,
2599
+ emit
2600
+ } = _ref;
2601
+ const document = getDocument();
2602
+ const window = getWindow();
2603
+ swiper.keyboard = {
2604
+ enabled: false
2605
+ };
2606
+ extendParams({
2607
+ keyboard: {
2608
+ enabled: false,
2609
+ onlyInViewport: true,
2610
+ pageUpDown: true
2611
+ }
2612
+ });
2613
+ function handle(event) {
2614
+ if (!swiper.enabled) return;
2615
+ const {
2616
+ rtlTranslate: rtl
2617
+ } = swiper;
2618
+ let e = event;
2619
+ if (e.originalEvent) e = e.originalEvent; // jquery fix
2620
+ const kc = e.keyCode || e.charCode;
2621
+ const pageUpDown = swiper.params.keyboard.pageUpDown;
2622
+ const isPageUp = pageUpDown && kc === 33;
2623
+ const isPageDown = pageUpDown && kc === 34;
2624
+ const isArrowLeft = kc === 37;
2625
+ const isArrowRight = kc === 39;
2626
+ const isArrowUp = kc === 38;
2627
+ const isArrowDown = kc === 40;
2628
+ // Directions locks
2629
+ if (!swiper.allowSlideNext && (swiper.isHorizontal() && isArrowRight || swiper.isVertical() && isArrowDown || isPageDown)) {
2630
+ return false;
2631
+ }
2632
+ if (!swiper.allowSlidePrev && (swiper.isHorizontal() && isArrowLeft || swiper.isVertical() && isArrowUp || isPageUp)) {
2633
+ return false;
2634
+ }
2635
+ if (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) {
2636
+ return undefined;
2637
+ }
2638
+ if (document.activeElement && document.activeElement.nodeName && (document.activeElement.nodeName.toLowerCase() === 'input' || document.activeElement.nodeName.toLowerCase() === 'textarea')) {
2639
+ return undefined;
2640
+ }
2641
+ if (swiper.params.keyboard.onlyInViewport && (isPageUp || isPageDown || isArrowLeft || isArrowRight || isArrowUp || isArrowDown)) {
2642
+ let inView = false;
2643
+ // Check that swiper should be inside of visible area of window
2644
+ if (elementParents(swiper.el, `.${swiper.params.slideClass}, swiper-slide`).length > 0 && elementParents(swiper.el, `.${swiper.params.slideActiveClass}`).length === 0) {
2645
+ return undefined;
2646
+ }
2647
+ const el = swiper.el;
2648
+ const swiperWidth = el.clientWidth;
2649
+ const swiperHeight = el.clientHeight;
2650
+ const windowWidth = window.innerWidth;
2651
+ const windowHeight = window.innerHeight;
2652
+ const swiperOffset = elementOffset(el);
2653
+ if (rtl) swiperOffset.left -= el.scrollLeft;
2654
+ const swiperCoord = [[swiperOffset.left, swiperOffset.top], [swiperOffset.left + swiperWidth, swiperOffset.top], [swiperOffset.left, swiperOffset.top + swiperHeight], [swiperOffset.left + swiperWidth, swiperOffset.top + swiperHeight]];
2655
+ for (let i = 0; i < swiperCoord.length; i += 1) {
2656
+ const point = swiperCoord[i];
2657
+ if (point[0] >= 0 && point[0] <= windowWidth && point[1] >= 0 && point[1] <= windowHeight) {
2658
+ if (point[0] === 0 && point[1] === 0) continue; // eslint-disable-line
2659
+ inView = true;
2660
+ }
2661
+ }
2662
+ if (!inView) return undefined;
2663
+ }
2664
+ if (swiper.isHorizontal()) {
2665
+ if (isPageUp || isPageDown || isArrowLeft || isArrowRight) {
2666
+ if (e.preventDefault) e.preventDefault();else e.returnValue = false;
2667
+ }
2668
+ if ((isPageDown || isArrowRight) && !rtl || (isPageUp || isArrowLeft) && rtl) swiper.slideNext();
2669
+ if ((isPageUp || isArrowLeft) && !rtl || (isPageDown || isArrowRight) && rtl) swiper.slidePrev();
2670
+ } else {
2671
+ if (isPageUp || isPageDown || isArrowUp || isArrowDown) {
2672
+ if (e.preventDefault) e.preventDefault();else e.returnValue = false;
2673
+ }
2674
+ if (isPageDown || isArrowDown) swiper.slideNext();
2675
+ if (isPageUp || isArrowUp) swiper.slidePrev();
2676
+ }
2677
+ emit('keyPress', kc);
2678
+ return undefined;
2679
+ }
2680
+ function enable() {
2681
+ if (swiper.keyboard.enabled) return;
2682
+ document.addEventListener('keydown', handle);
2683
+ swiper.keyboard.enabled = true;
2684
+ }
2685
+ function disable() {
2686
+ if (!swiper.keyboard.enabled) return;
2687
+ document.removeEventListener('keydown', handle);
2688
+ swiper.keyboard.enabled = false;
2689
+ }
2690
+ on('init', () => {
2691
+ if (swiper.params.keyboard.enabled) {
2692
+ enable();
2693
+ }
2694
+ });
2695
+ on('destroy', () => {
2696
+ if (swiper.keyboard.enabled) {
2697
+ disable();
2698
+ }
2699
+ });
2700
+ Object.assign(swiper.keyboard, {
2701
+ enable,
2702
+ disable
2703
+ });
2704
+ }
2705
+
2582
2706
  /* eslint-disable consistent-return */
2583
2707
  function Mousewheel(_ref) {
2584
2708
  let {
@@ -2986,6 +3110,202 @@ function createElementIfNotDefined(swiper, originalParams, params, checkProps) {
2986
3110
  return params;
2987
3111
  }
2988
3112
 
3113
+ function Navigation(_ref) {
3114
+ let {
3115
+ swiper,
3116
+ extendParams,
3117
+ on,
3118
+ emit
3119
+ } = _ref;
3120
+ extendParams({
3121
+ navigation: {
3122
+ nextEl: null,
3123
+ prevEl: null,
3124
+ hideOnClick: false,
3125
+ disabledClass: 'swiper-button-disabled',
3126
+ hiddenClass: 'swiper-button-hidden',
3127
+ lockClass: 'swiper-button-lock',
3128
+ navigationDisabledClass: 'swiper-navigation-disabled'
3129
+ }
3130
+ });
3131
+ swiper.navigation = {
3132
+ nextEl: null,
3133
+ prevEl: null
3134
+ };
3135
+ function getEl(el) {
3136
+ let res;
3137
+ if (el && typeof el === 'string' && swiper.isElement) {
3138
+ res = swiper.el.querySelector(el);
3139
+ if (res) return res;
3140
+ }
3141
+ if (el) {
3142
+ if (typeof el === 'string') res = [...document.querySelectorAll(el)];
3143
+ if (swiper.params.uniqueNavElements && typeof el === 'string' && res && res.length > 1 && swiper.el.querySelectorAll(el).length === 1) {
3144
+ res = swiper.el.querySelector(el);
3145
+ } else if (res && res.length === 1) {
3146
+ res = res[0];
3147
+ }
3148
+ }
3149
+ if (el && !res) return el;
3150
+ // if (Array.isArray(res) && res.length === 1) res = res[0];
3151
+ return res;
3152
+ }
3153
+ function toggleEl(el, disabled) {
3154
+ const params = swiper.params.navigation;
3155
+ el = makeElementsArray(el);
3156
+ el.forEach(subEl => {
3157
+ if (subEl) {
3158
+ subEl.classList[disabled ? 'add' : 'remove'](...params.disabledClass.split(' '));
3159
+ if (subEl.tagName === 'BUTTON') subEl.disabled = disabled;
3160
+ if (swiper.params.watchOverflow && swiper.enabled) {
3161
+ subEl.classList[swiper.isLocked ? 'add' : 'remove'](params.lockClass);
3162
+ }
3163
+ }
3164
+ });
3165
+ }
3166
+ function update() {
3167
+ // Update Navigation Buttons
3168
+ const {
3169
+ nextEl,
3170
+ prevEl
3171
+ } = swiper.navigation;
3172
+ if (swiper.params.loop) {
3173
+ toggleEl(prevEl, false);
3174
+ toggleEl(nextEl, false);
3175
+ return;
3176
+ }
3177
+ toggleEl(prevEl, swiper.isBeginning && !swiper.params.rewind);
3178
+ toggleEl(nextEl, swiper.isEnd && !swiper.params.rewind);
3179
+ }
3180
+ function onPrevClick(e) {
3181
+ e.preventDefault();
3182
+ if (swiper.isBeginning && !swiper.params.loop && !swiper.params.rewind) return;
3183
+ swiper.slidePrev();
3184
+ emit('navigationPrev');
3185
+ }
3186
+ function onNextClick(e) {
3187
+ e.preventDefault();
3188
+ if (swiper.isEnd && !swiper.params.loop && !swiper.params.rewind) return;
3189
+ swiper.slideNext();
3190
+ emit('navigationNext');
3191
+ }
3192
+ function init() {
3193
+ const params = swiper.params.navigation;
3194
+ swiper.params.navigation = createElementIfNotDefined(swiper, swiper.originalParams.navigation, swiper.params.navigation, {
3195
+ nextEl: 'swiper-button-next',
3196
+ prevEl: 'swiper-button-prev'
3197
+ });
3198
+ if (!(params.nextEl || params.prevEl)) return;
3199
+ let nextEl = getEl(params.nextEl);
3200
+ let prevEl = getEl(params.prevEl);
3201
+ Object.assign(swiper.navigation, {
3202
+ nextEl,
3203
+ prevEl
3204
+ });
3205
+ nextEl = makeElementsArray(nextEl);
3206
+ prevEl = makeElementsArray(prevEl);
3207
+ const initButton = (el, dir) => {
3208
+ if (el) {
3209
+ el.addEventListener('click', dir === 'next' ? onNextClick : onPrevClick);
3210
+ }
3211
+ if (!swiper.enabled && el) {
3212
+ el.classList.add(...params.lockClass.split(' '));
3213
+ }
3214
+ };
3215
+ nextEl.forEach(el => initButton(el, 'next'));
3216
+ prevEl.forEach(el => initButton(el, 'prev'));
3217
+ }
3218
+ function destroy() {
3219
+ let {
3220
+ nextEl,
3221
+ prevEl
3222
+ } = swiper.navigation;
3223
+ nextEl = makeElementsArray(nextEl);
3224
+ prevEl = makeElementsArray(prevEl);
3225
+ const destroyButton = (el, dir) => {
3226
+ el.removeEventListener('click', dir === 'next' ? onNextClick : onPrevClick);
3227
+ el.classList.remove(...swiper.params.navigation.disabledClass.split(' '));
3228
+ };
3229
+ nextEl.forEach(el => destroyButton(el, 'next'));
3230
+ prevEl.forEach(el => destroyButton(el, 'prev'));
3231
+ }
3232
+ on('init', () => {
3233
+ if (swiper.params.navigation.enabled === false) {
3234
+ // eslint-disable-next-line
3235
+ disable();
3236
+ } else {
3237
+ init();
3238
+ update();
3239
+ }
3240
+ });
3241
+ on('toEdge fromEdge lock unlock', () => {
3242
+ update();
3243
+ });
3244
+ on('destroy', () => {
3245
+ destroy();
3246
+ });
3247
+ on('enable disable', () => {
3248
+ let {
3249
+ nextEl,
3250
+ prevEl
3251
+ } = swiper.navigation;
3252
+ nextEl = makeElementsArray(nextEl);
3253
+ prevEl = makeElementsArray(prevEl);
3254
+ if (swiper.enabled) {
3255
+ update();
3256
+ return;
3257
+ }
3258
+ [...nextEl, ...prevEl].filter(el => !!el).forEach(el => el.classList.add(swiper.params.navigation.lockClass));
3259
+ });
3260
+ on('click', (_s, e) => {
3261
+ let {
3262
+ nextEl,
3263
+ prevEl
3264
+ } = swiper.navigation;
3265
+ nextEl = makeElementsArray(nextEl);
3266
+ prevEl = makeElementsArray(prevEl);
3267
+ const targetEl = e.target;
3268
+ let targetIsButton = prevEl.includes(targetEl) || nextEl.includes(targetEl);
3269
+ if (swiper.isElement && !targetIsButton) {
3270
+ const path = e.path || e.composedPath && e.composedPath();
3271
+ if (path) {
3272
+ targetIsButton = path.find(pathEl => nextEl.includes(pathEl) || prevEl.includes(pathEl));
3273
+ }
3274
+ }
3275
+ if (swiper.params.navigation.hideOnClick && !targetIsButton) {
3276
+ if (swiper.pagination && swiper.params.pagination && swiper.params.pagination.clickable && (swiper.pagination.el === targetEl || swiper.pagination.el.contains(targetEl))) return;
3277
+ let isHidden;
3278
+ if (nextEl.length) {
3279
+ isHidden = nextEl[0].classList.contains(swiper.params.navigation.hiddenClass);
3280
+ } else if (prevEl.length) {
3281
+ isHidden = prevEl[0].classList.contains(swiper.params.navigation.hiddenClass);
3282
+ }
3283
+ if (isHidden === true) {
3284
+ emit('navigationShow');
3285
+ } else {
3286
+ emit('navigationHide');
3287
+ }
3288
+ [...nextEl, ...prevEl].filter(el => !!el).forEach(el => el.classList.toggle(swiper.params.navigation.hiddenClass));
3289
+ }
3290
+ });
3291
+ const enable = () => {
3292
+ swiper.el.classList.remove(...swiper.params.navigation.navigationDisabledClass.split(' '));
3293
+ init();
3294
+ update();
3295
+ };
3296
+ const disable = () => {
3297
+ swiper.el.classList.add(...swiper.params.navigation.navigationDisabledClass.split(' '));
3298
+ destroy();
3299
+ };
3300
+ Object.assign(swiper.navigation, {
3301
+ enable,
3302
+ disable,
3303
+ update,
3304
+ init,
3305
+ destroy
3306
+ });
3307
+ }
3308
+
2989
3309
  function classesToSelector(classes) {
2990
3310
  if (classes === void 0) {
2991
3311
  classes = '';
@@ -3792,6 +4112,374 @@ function Scrollbar(_ref) {
3792
4112
  });
3793
4113
  }
3794
4114
 
4115
+ function A11y(_ref) {
4116
+ let {
4117
+ swiper,
4118
+ extendParams,
4119
+ on
4120
+ } = _ref;
4121
+ extendParams({
4122
+ a11y: {
4123
+ enabled: true,
4124
+ notificationClass: 'swiper-notification',
4125
+ prevSlideMessage: 'Previous slide',
4126
+ nextSlideMessage: 'Next slide',
4127
+ firstSlideMessage: 'This is the first slide',
4128
+ lastSlideMessage: 'This is the last slide',
4129
+ paginationBulletMessage: 'Go to slide {{index}}',
4130
+ slideLabelMessage: '{{index}} / {{slidesLength}}',
4131
+ containerMessage: null,
4132
+ containerRoleDescriptionMessage: null,
4133
+ itemRoleDescriptionMessage: null,
4134
+ slideRole: 'group',
4135
+ id: null
4136
+ }
4137
+ });
4138
+ swiper.a11y = {
4139
+ clicked: false
4140
+ };
4141
+ let liveRegion = null;
4142
+ let preventFocusHandler;
4143
+ let focusTargetSlideEl;
4144
+ let visibilityChangedTimestamp = new Date().getTime();
4145
+ function notify(message) {
4146
+ const notification = liveRegion;
4147
+ if (notification.length === 0) return;
4148
+ notification.innerHTML = '';
4149
+ notification.innerHTML = message;
4150
+ }
4151
+ function getRandomNumber(size) {
4152
+ if (size === void 0) {
4153
+ size = 16;
4154
+ }
4155
+ const randomChar = () => Math.round(16 * Math.random()).toString(16);
4156
+ return 'x'.repeat(size).replace(/x/g, randomChar);
4157
+ }
4158
+ function makeElFocusable(el) {
4159
+ el = makeElementsArray(el);
4160
+ el.forEach(subEl => {
4161
+ subEl.setAttribute('tabIndex', '0');
4162
+ });
4163
+ }
4164
+ function makeElNotFocusable(el) {
4165
+ el = makeElementsArray(el);
4166
+ el.forEach(subEl => {
4167
+ subEl.setAttribute('tabIndex', '-1');
4168
+ });
4169
+ }
4170
+ function addElRole(el, role) {
4171
+ el = makeElementsArray(el);
4172
+ el.forEach(subEl => {
4173
+ subEl.setAttribute('role', role);
4174
+ });
4175
+ }
4176
+ function addElRoleDescription(el, description) {
4177
+ el = makeElementsArray(el);
4178
+ el.forEach(subEl => {
4179
+ subEl.setAttribute('aria-roledescription', description);
4180
+ });
4181
+ }
4182
+ function addElControls(el, controls) {
4183
+ el = makeElementsArray(el);
4184
+ el.forEach(subEl => {
4185
+ subEl.setAttribute('aria-controls', controls);
4186
+ });
4187
+ }
4188
+ function addElLabel(el, label) {
4189
+ el = makeElementsArray(el);
4190
+ el.forEach(subEl => {
4191
+ subEl.setAttribute('aria-label', label);
4192
+ });
4193
+ }
4194
+ function addElId(el, id) {
4195
+ el = makeElementsArray(el);
4196
+ el.forEach(subEl => {
4197
+ subEl.setAttribute('id', id);
4198
+ });
4199
+ }
4200
+ function addElLive(el, live) {
4201
+ el = makeElementsArray(el);
4202
+ el.forEach(subEl => {
4203
+ subEl.setAttribute('aria-live', live);
4204
+ });
4205
+ }
4206
+ function disableEl(el) {
4207
+ el = makeElementsArray(el);
4208
+ el.forEach(subEl => {
4209
+ subEl.setAttribute('aria-disabled', true);
4210
+ });
4211
+ }
4212
+ function enableEl(el) {
4213
+ el = makeElementsArray(el);
4214
+ el.forEach(subEl => {
4215
+ subEl.setAttribute('aria-disabled', false);
4216
+ });
4217
+ }
4218
+ function onEnterOrSpaceKey(e) {
4219
+ if (e.keyCode !== 13 && e.keyCode !== 32) return;
4220
+ const params = swiper.params.a11y;
4221
+ const targetEl = e.target;
4222
+ if (swiper.pagination && swiper.pagination.el && (targetEl === swiper.pagination.el || swiper.pagination.el.contains(e.target))) {
4223
+ if (!e.target.matches(classesToSelector(swiper.params.pagination.bulletClass))) return;
4224
+ }
4225
+ if (swiper.navigation && swiper.navigation.prevEl && swiper.navigation.nextEl) {
4226
+ const prevEls = makeElementsArray(swiper.navigation.prevEl);
4227
+ const nextEls = makeElementsArray(swiper.navigation.nextEl);
4228
+ if (nextEls.includes(targetEl)) {
4229
+ if (!(swiper.isEnd && !swiper.params.loop)) {
4230
+ swiper.slideNext();
4231
+ }
4232
+ if (swiper.isEnd) {
4233
+ notify(params.lastSlideMessage);
4234
+ } else {
4235
+ notify(params.nextSlideMessage);
4236
+ }
4237
+ }
4238
+ if (prevEls.includes(targetEl)) {
4239
+ if (!(swiper.isBeginning && !swiper.params.loop)) {
4240
+ swiper.slidePrev();
4241
+ }
4242
+ if (swiper.isBeginning) {
4243
+ notify(params.firstSlideMessage);
4244
+ } else {
4245
+ notify(params.prevSlideMessage);
4246
+ }
4247
+ }
4248
+ }
4249
+ if (swiper.pagination && targetEl.matches(classesToSelector(swiper.params.pagination.bulletClass))) {
4250
+ targetEl.click();
4251
+ }
4252
+ }
4253
+ function updateNavigation() {
4254
+ if (swiper.params.loop || swiper.params.rewind || !swiper.navigation) return;
4255
+ const {
4256
+ nextEl,
4257
+ prevEl
4258
+ } = swiper.navigation;
4259
+ if (prevEl) {
4260
+ if (swiper.isBeginning) {
4261
+ disableEl(prevEl);
4262
+ makeElNotFocusable(prevEl);
4263
+ } else {
4264
+ enableEl(prevEl);
4265
+ makeElFocusable(prevEl);
4266
+ }
4267
+ }
4268
+ if (nextEl) {
4269
+ if (swiper.isEnd) {
4270
+ disableEl(nextEl);
4271
+ makeElNotFocusable(nextEl);
4272
+ } else {
4273
+ enableEl(nextEl);
4274
+ makeElFocusable(nextEl);
4275
+ }
4276
+ }
4277
+ }
4278
+ function hasPagination() {
4279
+ return swiper.pagination && swiper.pagination.bullets && swiper.pagination.bullets.length;
4280
+ }
4281
+ function hasClickablePagination() {
4282
+ return hasPagination() && swiper.params.pagination.clickable;
4283
+ }
4284
+ function updatePagination() {
4285
+ const params = swiper.params.a11y;
4286
+ if (!hasPagination()) return;
4287
+ swiper.pagination.bullets.forEach(bulletEl => {
4288
+ if (swiper.params.pagination.clickable) {
4289
+ makeElFocusable(bulletEl);
4290
+ if (!swiper.params.pagination.renderBullet) {
4291
+ addElRole(bulletEl, 'button');
4292
+ addElLabel(bulletEl, params.paginationBulletMessage.replace(/\{\{index\}\}/, elementIndex(bulletEl) + 1));
4293
+ }
4294
+ }
4295
+ if (bulletEl.matches(classesToSelector(swiper.params.pagination.bulletActiveClass))) {
4296
+ bulletEl.setAttribute('aria-current', 'true');
4297
+ } else {
4298
+ bulletEl.removeAttribute('aria-current');
4299
+ }
4300
+ });
4301
+ }
4302
+ const initNavEl = (el, wrapperId, message) => {
4303
+ makeElFocusable(el);
4304
+ if (el.tagName !== 'BUTTON') {
4305
+ addElRole(el, 'button');
4306
+ el.addEventListener('keydown', onEnterOrSpaceKey);
4307
+ }
4308
+ addElLabel(el, message);
4309
+ addElControls(el, wrapperId);
4310
+ };
4311
+ const handlePointerDown = e => {
4312
+ if (focusTargetSlideEl && focusTargetSlideEl !== e.target && !focusTargetSlideEl.contains(e.target)) {
4313
+ preventFocusHandler = true;
4314
+ }
4315
+ swiper.a11y.clicked = true;
4316
+ };
4317
+ const handlePointerUp = () => {
4318
+ preventFocusHandler = false;
4319
+ requestAnimationFrame(() => {
4320
+ requestAnimationFrame(() => {
4321
+ if (!swiper.destroyed) {
4322
+ swiper.a11y.clicked = false;
4323
+ }
4324
+ });
4325
+ });
4326
+ };
4327
+ const onVisibilityChange = e => {
4328
+ visibilityChangedTimestamp = new Date().getTime();
4329
+ };
4330
+ const handleFocus = e => {
4331
+ if (swiper.a11y.clicked) return;
4332
+ if (new Date().getTime() - visibilityChangedTimestamp < 100) return;
4333
+ const slideEl = e.target.closest(`.${swiper.params.slideClass}, swiper-slide`);
4334
+ if (!slideEl || !swiper.slides.includes(slideEl)) return;
4335
+ focusTargetSlideEl = slideEl;
4336
+ const isActive = swiper.slides.indexOf(slideEl) === swiper.activeIndex;
4337
+ const isVisible = swiper.params.watchSlidesProgress && swiper.visibleSlides && swiper.visibleSlides.includes(slideEl);
4338
+ if (isActive || isVisible) return;
4339
+ if (e.sourceCapabilities && e.sourceCapabilities.firesTouchEvents) return;
4340
+ if (swiper.isHorizontal()) {
4341
+ swiper.el.scrollLeft = 0;
4342
+ } else {
4343
+ swiper.el.scrollTop = 0;
4344
+ }
4345
+ requestAnimationFrame(() => {
4346
+ if (preventFocusHandler) return;
4347
+ if (swiper.params.loop) {
4348
+ swiper.slideToLoop(parseInt(slideEl.getAttribute('data-swiper-slide-index')), 0);
4349
+ } else {
4350
+ swiper.slideTo(swiper.slides.indexOf(slideEl), 0);
4351
+ }
4352
+ preventFocusHandler = false;
4353
+ });
4354
+ };
4355
+ const initSlides = () => {
4356
+ const params = swiper.params.a11y;
4357
+ if (params.itemRoleDescriptionMessage) {
4358
+ addElRoleDescription(swiper.slides, params.itemRoleDescriptionMessage);
4359
+ }
4360
+ if (params.slideRole) {
4361
+ addElRole(swiper.slides, params.slideRole);
4362
+ }
4363
+ const slidesLength = swiper.slides.length;
4364
+ if (params.slideLabelMessage) {
4365
+ swiper.slides.forEach((slideEl, index) => {
4366
+ const slideIndex = swiper.params.loop ? parseInt(slideEl.getAttribute('data-swiper-slide-index'), 10) : index;
4367
+ const ariaLabelMessage = params.slideLabelMessage.replace(/\{\{index\}\}/, slideIndex + 1).replace(/\{\{slidesLength\}\}/, slidesLength);
4368
+ addElLabel(slideEl, ariaLabelMessage);
4369
+ });
4370
+ }
4371
+ };
4372
+ const init = () => {
4373
+ const params = swiper.params.a11y;
4374
+ swiper.el.append(liveRegion);
4375
+
4376
+ // Container
4377
+ const containerEl = swiper.el;
4378
+ if (params.containerRoleDescriptionMessage) {
4379
+ addElRoleDescription(containerEl, params.containerRoleDescriptionMessage);
4380
+ }
4381
+ if (params.containerMessage) {
4382
+ addElLabel(containerEl, params.containerMessage);
4383
+ }
4384
+
4385
+ // Wrapper
4386
+ const wrapperEl = swiper.wrapperEl;
4387
+ const wrapperId = params.id || wrapperEl.getAttribute('id') || `swiper-wrapper-${getRandomNumber(16)}`;
4388
+ const live = swiper.params.autoplay && swiper.params.autoplay.enabled ? 'off' : 'polite';
4389
+ addElId(wrapperEl, wrapperId);
4390
+ addElLive(wrapperEl, live);
4391
+
4392
+ // Slide
4393
+ initSlides();
4394
+
4395
+ // Navigation
4396
+ let {
4397
+ nextEl,
4398
+ prevEl
4399
+ } = swiper.navigation ? swiper.navigation : {};
4400
+ nextEl = makeElementsArray(nextEl);
4401
+ prevEl = makeElementsArray(prevEl);
4402
+ if (nextEl) {
4403
+ nextEl.forEach(el => initNavEl(el, wrapperId, params.nextSlideMessage));
4404
+ }
4405
+ if (prevEl) {
4406
+ prevEl.forEach(el => initNavEl(el, wrapperId, params.prevSlideMessage));
4407
+ }
4408
+
4409
+ // Pagination
4410
+ if (hasClickablePagination()) {
4411
+ const paginationEl = makeElementsArray(swiper.pagination.el);
4412
+ paginationEl.forEach(el => {
4413
+ el.addEventListener('keydown', onEnterOrSpaceKey);
4414
+ });
4415
+ }
4416
+
4417
+ // Tab focus
4418
+ const document = getDocument();
4419
+ document.addEventListener('visibilitychange', onVisibilityChange);
4420
+ swiper.el.addEventListener('focus', handleFocus, true);
4421
+ swiper.el.addEventListener('focus', handleFocus, true);
4422
+ swiper.el.addEventListener('pointerdown', handlePointerDown, true);
4423
+ swiper.el.addEventListener('pointerup', handlePointerUp, true);
4424
+ };
4425
+ function destroy() {
4426
+ if (liveRegion) liveRegion.remove();
4427
+ let {
4428
+ nextEl,
4429
+ prevEl
4430
+ } = swiper.navigation ? swiper.navigation : {};
4431
+ nextEl = makeElementsArray(nextEl);
4432
+ prevEl = makeElementsArray(prevEl);
4433
+ if (nextEl) {
4434
+ nextEl.forEach(el => el.removeEventListener('keydown', onEnterOrSpaceKey));
4435
+ }
4436
+ if (prevEl) {
4437
+ prevEl.forEach(el => el.removeEventListener('keydown', onEnterOrSpaceKey));
4438
+ }
4439
+
4440
+ // Pagination
4441
+ if (hasClickablePagination()) {
4442
+ const paginationEl = makeElementsArray(swiper.pagination.el);
4443
+ paginationEl.forEach(el => {
4444
+ el.removeEventListener('keydown', onEnterOrSpaceKey);
4445
+ });
4446
+ }
4447
+ const document = getDocument();
4448
+ document.removeEventListener('visibilitychange', onVisibilityChange);
4449
+ // Tab focus
4450
+ if (swiper.el && typeof swiper.el !== 'string') {
4451
+ swiper.el.removeEventListener('focus', handleFocus, true);
4452
+ swiper.el.removeEventListener('pointerdown', handlePointerDown, true);
4453
+ swiper.el.removeEventListener('pointerup', handlePointerUp, true);
4454
+ }
4455
+ }
4456
+ on('beforeInit', () => {
4457
+ liveRegion = createElement('span', swiper.params.a11y.notificationClass);
4458
+ liveRegion.setAttribute('aria-live', 'assertive');
4459
+ liveRegion.setAttribute('aria-atomic', 'true');
4460
+ });
4461
+ on('afterInit', () => {
4462
+ if (!swiper.params.a11y.enabled) return;
4463
+ init();
4464
+ });
4465
+ on('slidesLengthChange snapGridLengthChange slidesGridLengthChange', () => {
4466
+ if (!swiper.params.a11y.enabled) return;
4467
+ initSlides();
4468
+ });
4469
+ on('fromEdge toEdge afterInit lock unlock', () => {
4470
+ if (!swiper.params.a11y.enabled) return;
4471
+ updateNavigation();
4472
+ });
4473
+ on('paginationUpdate', () => {
4474
+ if (!swiper.params.a11y.enabled) return;
4475
+ updatePagination();
4476
+ });
4477
+ on('destroy', () => {
4478
+ if (!swiper.params.a11y.enabled) return;
4479
+ destroy();
4480
+ });
4481
+ }
4482
+
3795
4483
  /* eslint no-underscore-dangle: "off" */
3796
4484
  /* eslint no-use-before-define: "off" */
3797
4485
  function Autoplay(_ref) {
@@ -8975,13 +9663,13 @@ SwiperSlide.displayName = 'SwiperSlide';
8975
9663
  * @Author: binruan@chatlabs.com
8976
9664
  * @Date: 2023-11-02 18:34:34
8977
9665
  * @LastEditors: binruan@chatlabs.com
8978
- * @LastEditTime: 2024-11-19 14:28:41
9666
+ * @LastEditTime: 2024-11-20 18:37:10
8979
9667
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Modal\index.tsx
8980
9668
  *
8981
9669
  */
8982
9670
  const closeIcon$1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
8983
9671
  const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false, openState }) => {
8984
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
9672
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
8985
9673
  const touchRef = useRef(null);
8986
9674
  const fTouchRef = useRef(null);
8987
9675
  const touchMoveRef = useRef(null);
@@ -9036,7 +9724,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
9036
9724
  }, [_popup, openState, globalConfig]);
9037
9725
  useEffect(() => {
9038
9726
  const trapFocus = (element) => {
9039
- var focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('a, a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
9727
+ var focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('[role="button"],a, a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
9040
9728
  var firstFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[0];
9041
9729
  var lastFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[(focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) - 1];
9042
9730
  var KEYCODE_TAB = 9;
@@ -9159,7 +9847,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
9159
9847
  }
9160
9848
  })), child()),
9161
9849
  React.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
9162
- React.createElement("img", { src: (_0 = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _0 !== void 0 ? _0 : closeIcon$1, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
9850
+ React.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon$1, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
9163
9851
  };
9164
9852
  var Modal$1 = memo(Modal);
9165
9853
 
@@ -9426,7 +10114,8 @@ const CommodityDetail$1 = (_a) => {
9426
10114
  const [showModal, setShowModal] = useState(false);
9427
10115
  const [show3DModal, setShow3DModal] = useState(false);
9428
10116
  const [checkCommodityIndex, setCheckCommodityIndex] = useState((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
9429
- const ref = useRef();
10117
+ const swiperRef = useRef();
10118
+ const [swiperActiveIndex, setSwiperActiveIndex] = useState(0);
9430
10119
  const data = isPost ? rec : popupDetailData;
9431
10120
  let product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) !== null && _d !== void 0 ? _d : (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProducts) === null || _f === void 0 ? void 0 : _f[0];
9432
10121
  let cta = isPost
@@ -9517,9 +10206,9 @@ const CommodityDetail$1 = (_a) => {
9517
10206
  popupCurTimeRef.current = new Date();
9518
10207
  setCheckCommodityIndex(index);
9519
10208
  checkCommodityIndexRef.current = index;
9520
- if (ref === null || ref === void 0 ? void 0 : ref.current) {
9521
- ref.current.swiper.slideTo(0);
9522
- ref.current.swiper.autoplay.start();
10209
+ if (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) {
10210
+ swiperRef.current.swiper.slideTo(0);
10211
+ swiperRef.current.swiper.autoplay.start();
9523
10212
  }
9524
10213
  }, []);
9525
10214
  const renderCommodityGroup = useCallback(() => {
@@ -9537,19 +10226,40 @@ const CommodityDetail$1 = (_a) => {
9537
10226
  return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
9538
10227
  }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
9539
10228
  const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
10229
+ const handleMouseEnter = useCallback(() => {
10230
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
10231
+ swiperRef.current.swiper.autoplay.stop();
10232
+ }
10233
+ }, []);
10234
+ const handleMouseLeave = useCallback(() => {
10235
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
10236
+ swiperRef.current.swiper.autoplay.start();
10237
+ }
10238
+ }, []);
10239
+ const handleSlideChange = useCallback((swiper) => {
10240
+ setSwiperActiveIndex(swiper.activeIndex);
10241
+ }, []);
10242
+ const isAlly = useMemo(() => getScreenReader(), []);
9540
10243
  return (React.createElement(React.Fragment, null,
9541
10244
  React.createElement("div", Object.assign({ className: css(Object.assign({}, style)) }, props),
9542
- React.createElement("div", { style: { position: 'relative' } },
9543
- product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, { a11y: {
9544
- enabled: true
9545
- }, height: height, modules: [Pagination, Autoplay], pagination: {
10245
+ React.createElement("div", { style: { position: 'relative' }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
10246
+ product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, Object.assign({ height: height, modules: [Pagination, Autoplay, ...(isAlly ? [Navigation, A11y, Mousewheel, Keyboard] : [])], pagination: {
9546
10247
  clickable: true,
9547
10248
  bulletActiveClass: 'swipe-item-active-bullet',
9548
10249
  clickableClass: getDotsAlign,
9549
10250
  bulletElement: 'button'
9550
- }, loop: true, autoplay: {
10251
+ } }, (isAlly
10252
+ ? {
10253
+ mousewheel: true,
10254
+ keyboard: true,
10255
+ navigation: true,
10256
+ a11y: {
10257
+ enabled: true
10258
+ }
10259
+ }
10260
+ : {}), { loop: true, autoplay: {
9551
10261
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
9552
- }, ref: ref, className: css(Object.assign(Object.assign({ '.swiper-pagination': { bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0, fontSize: '14px' } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
10262
+ }, ref: swiperRef, onSlideChange: handleSlideChange, className: css(Object.assign(Object.assign({ '.swiper-pagination': { bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0, fontSize: '14px' } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
9553
10263
  '.swiper-pagination-bullet': {
9554
10264
  backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
9555
10265
  opacity: 1
@@ -9559,10 +10269,10 @@ const CommodityDetail$1 = (_a) => {
9559
10269
  backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
9560
10270
  opacity: 1
9561
10271
  }
9562
- }))) },
9563
- React.createElement(React.Fragment, null, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src) => {
10272
+ }))) }),
10273
+ React.createElement(React.Fragment, null, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src, srcKey) => {
9564
10274
  var _a;
9565
- return (React.createElement(SwiperSlide, { key: src },
10275
+ return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
9566
10276
  React.createElement("div", { style: {
9567
10277
  overflow: 'hidden',
9568
10278
  width,
@@ -10315,7 +11025,8 @@ const CommodityDetailDiroNew$1 = (_a) => {
10315
11025
  const curTimeRef = useRef(null);
10316
11026
  const [show3DModal, setShow3DModal] = useState(false);
10317
11027
  const [checkCommodityIndex, setCheckCommodityIndex] = useState((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
10318
- const ref = useRef();
11028
+ const swiperRef = useRef();
11029
+ const [swiperActiveIndex, setSwiperActiveIndex] = useState(0);
10319
11030
  const data = isPost ? rec : popupDetailData;
10320
11031
  let product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) !== null && _d !== void 0 ? _d : (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProducts) === null || _f === void 0 ? void 0 : _f[0];
10321
11032
  let cta = isPost
@@ -10435,9 +11146,9 @@ Made in Italy` })));
10435
11146
  popupCurTimeRef.current = new Date();
10436
11147
  setCheckCommodityIndex(index);
10437
11148
  checkCommodityIndexRef.current = index;
10438
- if (ref === null || ref === void 0 ? void 0 : ref.current) {
10439
- ref.current.swiper.slideTo(0);
10440
- ref.current.swiper.autoplay.start();
11149
+ if (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) {
11150
+ swiperRef.current.swiper.slideTo(0);
11151
+ swiperRef.current.swiper.autoplay.start();
10441
11152
  }
10442
11153
  }, []);
10443
11154
  const renderCommodityGroup = useCallback(() => {
@@ -10455,17 +11166,40 @@ Made in Italy` })));
10455
11166
  return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
10456
11167
  }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
10457
11168
  const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
11169
+ const handleMouseEnter = useCallback(() => {
11170
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
11171
+ swiperRef.current.swiper.autoplay.stop();
11172
+ }
11173
+ }, []);
11174
+ const handleMouseLeave = useCallback(() => {
11175
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
11176
+ swiperRef.current.swiper.autoplay.start();
11177
+ }
11178
+ }, []);
11179
+ const handleSlideChange = useCallback((swiper) => {
11180
+ setSwiperActiveIndex(swiper.activeIndex);
11181
+ }, []);
11182
+ const isAlly = useMemo(() => getScreenReader(), []);
10458
11183
  return (React.createElement("div", { className: 'pb-commondityDiroNew' },
10459
11184
  React.createElement("div", Object.assign({ className: css(Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' })) }, props),
10460
- React.createElement("div", { style: { position: 'relative' } },
10461
- product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, { height: height, modules: [Pagination, Autoplay], pagination: {
11185
+ React.createElement("div", { style: { position: 'relative' }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
11186
+ product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, Object.assign({ height: height, modules: [Pagination, Autoplay, ...(isAlly ? [Navigation, A11y, Mousewheel, Keyboard] : [])], pagination: {
10462
11187
  clickable: true,
10463
11188
  bulletActiveClass: 'swipe-item-active-bullet',
10464
11189
  clickableClass: getDotsAlign,
10465
11190
  bulletElement: 'button'
10466
- }, loop: true, autoplay: {
11191
+ } }, (isAlly
11192
+ ? {
11193
+ mousewheel: true,
11194
+ keyboard: true,
11195
+ navigation: true,
11196
+ a11y: {
11197
+ enabled: true
11198
+ }
11199
+ }
11200
+ : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, autoplay: {
10467
11201
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
10468
- }, ref: ref, className: css(Object.assign(Object.assign({ '.swiper-pagination': {
11202
+ }, className: css(Object.assign(Object.assign({ '.swiper-pagination': {
10469
11203
  bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0,
10470
11204
  fontSize: '14px'
10471
11205
  } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
@@ -10478,9 +11212,9 @@ Made in Italy` })));
10478
11212
  backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
10479
11213
  opacity: 1
10480
11214
  }
10481
- }))) }, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src) => {
11215
+ }))) }), (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src, srcKey) => {
10482
11216
  var _a;
10483
- return (React.createElement(SwiperSlide, { key: src },
11217
+ return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
10484
11218
  React.createElement("div", { style: {
10485
11219
  overflow: 'hidden',
10486
11220
  width,
@@ -15386,7 +16120,7 @@ var styles = {"aniLinkPopup":"index-module_aniLinkPopup__YT7kj","animated-fadeIn
15386
16120
 
15387
16121
  const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
15388
16122
  const AniLinkPopup$1 = (_a) => {
15389
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
16123
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
15390
16124
  var { style, recData, ctaTempStyles, index, event, bottom_image, translateY, isTel, onClick, isExternalLink = false, isActive } = _a, props = __rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "bottom_image", "translateY", "isTel", "onClick", "isExternalLink", "isActive"]);
15391
16125
  style === null || style === void 0 ? true : delete style.transform;
15392
16126
  const { sxpParameter, globalConfig, ctaEvent, setPopupDetailData } = useSxpDataSource();
@@ -15443,12 +16177,12 @@ const AniLinkPopup$1 = (_a) => {
15443
16177
  paddingLeft: '6px'
15444
16178
  } }, "Cta Title")) : (React.createElement("div", Object.assign({}, props, { className: `${css(Object.assign(Object.assign({}, style), { '--transY': `translateY(calc(100% + ${(_r = style === null || style === void 0 ? void 0 : style.margin) !== null && _r !== void 0 ? _r : 0}px))` }))} ${styles['aniLinkPopup']} ${aniNamStyle} ${css(aniTimStyle)}`, onClick: handleTo }),
15445
16179
  React.createElement("div", { onClick: onClose, className: styles['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style['padding']) !== null && _s !== void 0 ? _s : 0 } },
15446
- React.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon, alt: 'close', className: styles['modal-icon-wrapper-img'] })),
15447
- React.createElement(Img$1, { src: src, rec: recData, item: (_y = (_w = (_v = (_u = recData === null || recData === void 0 ? void 0 : recData.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v[0]) !== null && _w !== void 0 ? _w : (_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.bindProduct) !== null && _y !== void 0 ? _y : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
16180
+ React.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close', className: styles['modal-icon-wrapper-img'] })),
16181
+ React.createElement(Img$1, { src: src, rec: recData, item: (_x = (_v = (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u[0]) !== null && _v !== void 0 ? _v : (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.bindProduct) !== null && _x !== void 0 ? _x : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
15448
16182
  (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (React.createElement("div", { className: styles['one-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
15449
- __html: setFontForText((_z = product === null || product === void 0 ? void 0 : product.title) !== null && _z !== void 0 ? _z : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
16183
+ __html: setFontForText((_y = product === null || product === void 0 ? void 0 : product.title) !== null && _y !== void 0 ? _y : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
15450
16184
  } })),
15451
- React.createElement("div", { className: styles['one-line-ellipsis'], style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_0 = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _0 === void 0 ? void 0 : _0.height) + 'px' }), dangerouslySetInnerHTML: {
16185
+ React.createElement("div", { className: styles['one-line-ellipsis'], style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_z = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _z === void 0 ? void 0 : _z.height) + 'px' }), dangerouslySetInnerHTML: {
15452
16186
  __html: setFontForText(title, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
15453
16187
  } })))));
15454
16188
  };
@@ -16460,15 +17194,16 @@ const Picture = (props) => {
16460
17194
 
16461
17195
  const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
16462
17196
  var _a, _b;
16463
- const ref = useRef();
17197
+ const swiperRef = useRef();
16464
17198
  const { isActive } = useSwiperSlide();
16465
17199
  const { sxpParameter, openHashtag } = useSxpDataSource();
16466
17200
  const [isLoad, setIsLoad] = useState(false);
16467
17201
  const [imgInfo, setImgInfo] = useState();
16468
17202
  const initTime = new Date();
17203
+ const [swiperActiveIndex, setSwiperActiveIndex] = useState(0);
16469
17204
  useEffect(() => {
16470
17205
  if (isLoad && isActive) {
16471
- (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.start();
17206
+ (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
16472
17207
  if (openHashtag) {
16473
17208
  onViewImageEndEvent(rec);
16474
17209
  }
@@ -16477,7 +17212,7 @@ const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
16477
17212
  }
16478
17213
  }
16479
17214
  else {
16480
- (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
17215
+ (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.stop();
16481
17216
  }
16482
17217
  }, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
16483
17218
  const showFirstImageFn = useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
@@ -16501,27 +17236,51 @@ const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
16501
17236
  SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
16502
17237
  };
16503
17238
  }, [imgInfo]);
16504
- return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
16505
- clickable: true,
16506
- bulletActiveClass: 'swipe-item-active-bullet',
16507
- bulletElement: 'button'
16508
- }, className: css(Object.assign(Object.assign({ '.swiper-pagination': {
16509
- bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
16510
- fontSize: '14px'
16511
- } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
16512
- '.swiper-pagination-bullet': {
16513
- backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor,
16514
- opacity: 1
16515
- }
16516
- })), ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor) && {
16517
- '.swipe-item-active-bullet': {
16518
- backgroundColor: `${imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor}!important`,
16519
- opacity: 1
17239
+ const handleMouseEnter = useCallback(() => {
17240
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
17241
+ swiperRef.current.swiper.autoplay.stop();
17242
+ }
17243
+ }, []);
17244
+ const handleMouseLeave = useCallback(() => {
17245
+ if (swiperRef.current && swiperRef.current.swiper && isAlly) {
17246
+ swiperRef.current.swiper.autoplay.start();
17247
+ }
17248
+ }, []);
17249
+ const handleSlideChange = useCallback((swiper) => {
17250
+ setSwiperActiveIndex(swiper.activeIndex);
17251
+ }, []);
17252
+ const isAlly = useMemo(() => getScreenReader(), []);
17253
+ return (React.createElement("div", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
17254
+ React.createElement(Swiper, Object.assign({ defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay, ...(isAlly ? [Navigation, A11y, Mousewheel, Keyboard] : [])], pagination: {
17255
+ clickable: true,
17256
+ bulletActiveClass: 'swipe-item-active-bullet',
17257
+ bulletElement: 'button'
17258
+ } }, (isAlly
17259
+ ? {
17260
+ mousewheel: true,
17261
+ keyboard: true,
17262
+ navigation: true,
17263
+ a11y: {
17264
+ enabled: true
17265
+ }
16520
17266
  }
16521
- }))), height: height, loop: true, autoplay: { delay: ((_b = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _b !== void 0 ? _b : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
16522
- return (React.createElement(SwiperSlide, { key: index },
16523
- React.createElement(Picture, { src: !isLoad && index > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
16524
- })));
17267
+ : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, className: css(Object.assign(Object.assign({ '.swiper-pagination': {
17268
+ bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
17269
+ fontSize: '14px'
17270
+ } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
17271
+ '.swiper-pagination-bullet': {
17272
+ backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor,
17273
+ opacity: 1
17274
+ }
17275
+ })), ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor) && {
17276
+ '.swipe-item-active-bullet': {
17277
+ backgroundColor: `${imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor}!important`,
17278
+ opacity: 1
17279
+ }
17280
+ }))), height: height, autoplay: { delay: ((_b = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _b !== void 0 ? _b : 3) * 1000 } }), imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, srcKey) => {
17281
+ return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
17282
+ React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
17283
+ }))));
16525
17284
  };
16526
17285
  var PictureGroup$3 = memo(PictureGroup$2);
16527
17286
 
@@ -16787,7 +17546,7 @@ var ConsentPopup = memo(Consent);
16787
17546
  * @Author: binruan@chatlabs.com
16788
17547
  * @Date: 2024-03-20 10:27:31
16789
17548
  * @LastEditors: binruan@chatlabs.com
16790
- * @LastEditTime: 2024-11-19 09:47:45
17549
+ * @LastEditTime: 2024-11-21 11:01:19
16791
17550
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
16792
17551
  *
16793
17552
  */
@@ -16800,7 +17559,7 @@ var ConsentPopup = memo(Consent);
16800
17559
  *
16801
17560
  */
16802
17561
  const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], licenseUrl }) => {
16803
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
17562
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
16804
17563
  const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
16805
17564
  const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
16806
17565
  const { schema } = useEditor();
@@ -17314,8 +18073,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
17314
18073
  padding: 0,
17315
18074
  background: 'transparent'
17316
18075
  }, role: 'button', "aria-label": 'back button', onClick: () => history === null || history === void 0 ? void 0 : history.back() },
17317
- React.createElement("img", { src: (_s = (_r = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _r === void 0 ? void 0 : _r.icon) !== null && _s !== void 0 ? _s : img, alt: 'back button', width: 100, style: { objectFit: 'cover' } }))),
17318
- isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _t !== void 0 ? _t : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
18076
+ React.createElement("img", { src: ((_r = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.backButton) === null || _r === void 0 ? void 0 : _r.icon) || img, alt: 'back button', width: 100, style: { objectFit: 'cover' } }))),
18077
+ isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_s = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _s !== void 0 ? _s : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
17319
18078
  React.createElement(Swiper, { style: {
17320
18079
  marginTop: tagHeight
17321
18080
  }, ref: swiperRef, onSlideChange: () => {
@@ -17347,7 +18106,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
17347
18106
  renderView,
17348
18107
  renderLikeButton(visList[activeIndex], activeIndex, !!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
17349
18108
  renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
17350
- React.createElement(WaterFall$1, Object.assign({}, (_w = (_v = (_u = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _u === void 0 ? void 0 : _u[0]) === null || _v === void 0 ? void 0 : _v.item) === null || _w === void 0 ? void 0 : _w.props)),
18109
+ React.createElement(WaterFall$1, Object.assign({}, (_v = (_u = (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _t === void 0 ? void 0 : _t[0]) === null || _u === void 0 ? void 0 : _u.item) === null || _v === void 0 ? void 0 : _v.props)),
17351
18110
  React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig })));
17352
18111
  };
17353
18112