@designcrowd/library.brand-page 5.17.21-kp-1 → 5.17.22

package/lib/src/{CreatedOnBrandCrowd-de-de-tDfigFsQ.js → CreatedOnBrandCrowd-de-de-CE3q_ouk.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib--fXSGh_Q.js";
+import { _ as t } from "./lib-DO1Zk3d3.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-CdzRfLTq.js → CreatedOnBrandCrowd-en-us-YmCINEd2.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib--fXSGh_Q.js";
+import { _ as t } from "./lib-DO1Zk3d3.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-DpBKI4Qi.js → CreatedOnBrandCrowd-es-es-po716FZh.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib--fXSGh_Q.js";
+import { _ as t } from "./lib-DO1Zk3d3.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-8BjTrEak.js → CreatedOnBrandCrowd-fr-ca-DgSeh7zq.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib--fXSGh_Q.js";
+import { _ as t } from "./lib-DO1Zk3d3.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-8BjTrEak.js → CreatedOnBrandCrowd-fr-fr-DgSeh7zq.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib--fXSGh_Q.js";
+import { _ as t } from "./lib-DO1Zk3d3.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-kxnznjPB.js → CreatedOnBrandCrowd-pt-br-BY3I3OVc.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib--fXSGh_Q.js";
+import { _ as t } from "./lib-DO1Zk3d3.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-kxnznjPB.js → CreatedOnBrandCrowd-pt-pt-BY3I3OVc.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib--fXSGh_Q.js";
+import { _ as t } from "./lib-DO1Zk3d3.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-YLebq5nt.js → CreatedOnDcom-de-de-VF__9AH9.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib--fXSGh_Q.js";
+import { _ as e } from "./lib-DO1Zk3d3.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-BCkkX4NC.js → CreatedOnDcom-en-us-B653tDEJ.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib--fXSGh_Q.js";
+import { _ as e } from "./lib-DO1Zk3d3.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-BlIwjtBb.js → CreatedOnDcom-es-es-Cc3g0BMj.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib--fXSGh_Q.js";
+import { _ as e } from "./lib-DO1Zk3d3.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-Cax8GNl7.js → CreatedOnDcom-fr-ca-NzxsUZqx.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib--fXSGh_Q.js";
+import { _ as e } from "./lib-DO1Zk3d3.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-CKYbDU0-.js → CreatedOnDcom-fr-fr-DFuj0umw.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib--fXSGh_Q.js";
+import { _ as e } from "./lib-DO1Zk3d3.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-D_3XGCdM.js → CreatedOnDcom-pt-br-VxpFX1Jd.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib--fXSGh_Q.js";
+import { _ as M } from "./lib-DO1Zk3d3.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-D0o7kehp.js → CreatedOnDcom-pt-pt-CG2qMIlw.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib--fXSGh_Q.js";
+import { _ as M } from "./lib-DO1Zk3d3.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/brand-page/components/image-gallery/ImageGalleryModal.mixin.d.ts

@@ -61,6 +61,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onImageModalClose(): void;
     isSlideInRenderWindow(index: number): boolean;
     onCarouselLoaded(): void;
+    onSlideImageLoading(index: number): void;
+    onSlideImageLoaded(index: number): void;
+    onSlideImageError(index: number): void;
+    placeholderStyle(slide: any): Record<string, string>;
 }, import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     isPreview: {
         type: BooleanConstructor;

package/lib/src/brand-page/components/image-gallery/ImageGalleryModal.mixin.js

@@ -6,11 +6,10 @@ import cloneDeep from 'lodash.clonedeep';
 // real <img>. Slides outside this window render an empty placeholder so the
 // browser does not request full-resolution images for the entire gallery on
 // modal open — required to prevent mobile tab crashes on large galleries.
-const IMAGE_RENDER_WINDOW = 2;
-// Swiper `loop: true` duplicates slide DOM nodes at both ends. For large
-// galleries this doubles the DOM cost without user benefit, so we disable
-// loop above this threshold.
-const LOOP_DISABLED_ABOVE = 20;
+// 3 (= 7 slides total) is wide enough that a user dragging slowly across
+// 2-3 slides never exposes a placeholder, while still capping decoded
+// image memory well under mobile per-tab limits.
+const IMAGE_RENDER_WINDOW = 3;
 export default defineComponent({
     mixins: [ComponentCommonMixin, ImageModalMixin],
     props: {
@@ -70,7 +69,7 @@ export default defineComponent({
         swiperOptions() {
             return {
                 initialSlide: this.selectedImageIndex ?? 0,
-                loop: this.images.length > 1 && this.images.length <= LOOP_DISABLED_ABOVE,
+                loop: this.images.length > 1,
                 slidesPerGroup: 1,
                 slidesPerView: 1,
                 spaceBetween: 10,
@@ -155,25 +154,76 @@ export default defineComponent({
             return distance <= IMAGE_RENDER_WINDOW;
         },
         onCarouselLoaded() {
-            // The shared Carousel doesn't emit slide-change events, so we reach
-            // through its ref to bind directly to the underlying Swiper instance.
-            // Keeps `currentImageIndex` in sync with user navigation (arrows,
-            // swipes, keyboard) so the render window slides with the user.
+            // Reach through the Carousel ref to bind directly to the underlying
+            // Swiper instance — the shared Carousel doesn't emit slide-change
+            // events. Keeps `currentImageIndex` in sync with user navigation
+            // (arrows, swipes, keyboard) so the render window slides with the
+            // user.
+            //
+            // NOTE: `currentImageIndex` must not be bound back to Carousel's
+            // `:slide-index` prop. The shared Carousel watches that prop and
+            // calls `swiper.update()` + `swiper.slideTo()` on every change.
+            // With `slideChangeTransitionStart` updating currentImageIndex on
+            // every swipe, that creates a feedback loop where Swiper redoes a
+            // full layout recalculation on every user gesture — visible as
+            // jank and capable of crashing the tab on real mobile devices.
             const carousel = this.$refs[this.carouselComponentRef];
             const swiper = carousel?.swiper;
             if (!swiper || typeof swiper.on !== 'function') {
                 return;
             }
-            swiper.on('slideChange', () => {
+            // Listen at the *start* of the transition so the incoming neighbour
+            // mounts and starts loading while the slide animation is still
+            // playing. Listening on `slideChange` (end of transition) leaves a
+            // gap during fast swipes where the next neighbour is still a
+            // placeholder when it reaches the viewport — visible as a flicker.
+            const handleSlideChange = () => {
                 // `realIndex` reflects the underlying slide index when loop mode
                 // duplicates slides; `activeIndex` would include those duplicates.
                 const next = typeof swiper.realIndex === 'number'
                     ? swiper.realIndex
                     : swiper.activeIndex;
-                if (typeof next === 'number') {
+                if (typeof next === 'number' && next !== this.currentImageIndex) {
                     this.currentImageIndex = next;
                 }
-            });
+            };
+            swiper.on('slideChangeTransitionStart', handleSlideChange);
+            // Also handle instant jumps that bypass the transition (e.g. when
+            // navigation arrows trigger no-animation slides).
+            swiper.on('slideChange', handleSlideChange);
+        },
+        // Only the currently-viewed slide's load lifecycle should drive the
+        // modal's Loader. Neighbour FallbackImages mounted by the render window
+        // emit `image-loading` synchronously in their onMounted hook; without
+        // these gates that emission flips `isImageModalLoading` true mid-swipe,
+        // briefly flashing the spinner over the slide the user is actually on
+        // — the flicker reported on real mobile devices.
+        onSlideImageLoading(index) {
+            if (index === this.currentImageIndex) {
+                this.imageLoading();
+            }
+        },
+        onSlideImageLoaded(index) {
+            if (index === this.currentImageIndex) {
+                this.checkImageLoading(false);
+            }
+        },
+        onSlideImageError(index) {
+            if (index === this.currentImageIndex) {
+                this.checkImageLoading(true);
+            }
+        },
+        placeholderStyle(slide) {
+            // Sized so the placeholder occupies the exact space the loaded image
+            // would, preventing slide-height jumps when the render window swaps
+            // between placeholder and real image. Mirrors the image's own
+            // `max-width: 100%` + `max-height: 90vh` + intrinsic aspect ratio.
+            if (!slide?.width || !slide?.height) {
+                return {};
+            }
+            return {
+                aspectRatio: `${slide.width} / ${slide.height}`,
+            };
         },
     },
 });

package/lib/src/css/library.brand-page-brandCrowd.min.css

@@ -5990,26 +5990,27 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   min-height: 0 !important; /* fix masonry bottom gap */
 }
 
-.c-image-gallery-modal[data-v-d308e332] .modal {
+.c-image-gallery-modal[data-v-96c9f3de] .modal {
   padding-top: 0px
 }
-.c-image-gallery-modal[data-v-d308e332] .swiper {
+.c-image-gallery-modal[data-v-96c9f3de] .swiper {
   padding-top: 4rem
 }
-.c-image-gallery-modal[data-v-d308e332] .swiper-slide {
+.c-image-gallery-modal[data-v-96c9f3de] .swiper-slide {
   width: 100%
 }
-.c-image-gallery-modal[data-v-d308e332] .carousel > div:first-child,
-.c-image-gallery-modal[data-v-d308e332] .swiper-container {
+.c-image-gallery-modal[data-v-96c9f3de] .carousel > div:first-child,
+.c-image-gallery-modal[data-v-96c9f3de] .swiper-container {
   height: 100%
 }
-.c-modal-image[data-v-d308e332] {
+.c-modal-image[data-v-96c9f3de] {
   max-width: 100%;
   max-height: 90vh
 }
-.c-modal-image-placeholder[data-v-d308e332] {
+.c-modal-image-placeholder[data-v-96c9f3de] {
+  max-width: 100%;
   width: 100%;
-  height: 90vh
+  max-height: 90vh
 }
 
 .c-image-gallery[data-v-5ed761de] {

package/lib/src/css/library.brand-page-brandPage.min.css

@@ -6308,26 +6308,27 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   min-height: 0 !important; /* fix masonry bottom gap */
 }
 
-.c-image-gallery-modal[data-v-d308e332] .modal {
+.c-image-gallery-modal[data-v-96c9f3de] .modal {
   padding-top: 0px
 }
-.c-image-gallery-modal[data-v-d308e332] .swiper {
+.c-image-gallery-modal[data-v-96c9f3de] .swiper {
   padding-top: 4rem
 }
-.c-image-gallery-modal[data-v-d308e332] .swiper-slide {
+.c-image-gallery-modal[data-v-96c9f3de] .swiper-slide {
   width: 100%
 }
-.c-image-gallery-modal[data-v-d308e332] .carousel > div:first-child,
-.c-image-gallery-modal[data-v-d308e332] .swiper-container {
+.c-image-gallery-modal[data-v-96c9f3de] .carousel > div:first-child,
+.c-image-gallery-modal[data-v-96c9f3de] .swiper-container {
   height: 100%
 }
-.c-modal-image[data-v-d308e332] {
+.c-modal-image[data-v-96c9f3de] {
   max-width: 100%;
   max-height: 90vh
 }
-.c-modal-image-placeholder[data-v-d308e332] {
+.c-modal-image-placeholder[data-v-96c9f3de] {
+  max-width: 100%;
   width: 100%;
-  height: 90vh
+  max-height: 90vh
 }
 
 .c-image-gallery[data-v-5ed761de] {

package/lib/src/css/library.brand-page-designCom.min.css

@@ -6020,26 +6020,27 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   min-height: 0 !important; /* fix masonry bottom gap */
 }
 
-.c-image-gallery-modal[data-v-d308e332] .modal {
+.c-image-gallery-modal[data-v-96c9f3de] .modal {
   padding-top: 0px
 }
-.c-image-gallery-modal[data-v-d308e332] .swiper {
+.c-image-gallery-modal[data-v-96c9f3de] .swiper {
   padding-top: 4rem
 }
-.c-image-gallery-modal[data-v-d308e332] .swiper-slide {
+.c-image-gallery-modal[data-v-96c9f3de] .swiper-slide {
   width: 100%
 }
-.c-image-gallery-modal[data-v-d308e332] .carousel > div:first-child,
-.c-image-gallery-modal[data-v-d308e332] .swiper-container {
+.c-image-gallery-modal[data-v-96c9f3de] .carousel > div:first-child,
+.c-image-gallery-modal[data-v-96c9f3de] .swiper-container {
   height: 100%
 }
-.c-modal-image[data-v-d308e332] {
+.c-modal-image[data-v-96c9f3de] {
   max-width: 100%;
   max-height: 90vh
 }
-.c-modal-image-placeholder[data-v-d308e332] {
+.c-modal-image-placeholder[data-v-96c9f3de] {
+  max-width: 100%;
   width: 100%;
-  height: 90vh
+  max-height: 90vh
 }
 
 .c-image-gallery[data-v-5ed761de] {

package/lib/src/css/library.brand-page-preview.min.css

@@ -5718,26 +5718,27 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   min-height: 0 !important; /* fix masonry bottom gap */
 }
 
-.bp .c-image-gallery-modal[data-v-d308e332] .modal {
+.bp .c-image-gallery-modal[data-v-96c9f3de] .modal {
   padding-top: 0px
 }
-.bp .c-image-gallery-modal[data-v-d308e332] .swiper {
+.bp .c-image-gallery-modal[data-v-96c9f3de] .swiper {
   padding-top: 4rem
 }
-.bp .c-image-gallery-modal[data-v-d308e332] .swiper-slide {
+.bp .c-image-gallery-modal[data-v-96c9f3de] .swiper-slide {
   width: 100%
 }
-.bp .c-image-gallery-modal[data-v-d308e332] .carousel > div:first-child,
-.bp .c-image-gallery-modal[data-v-d308e332] .swiper-container {
+.bp .c-image-gallery-modal[data-v-96c9f3de] .carousel > div:first-child,
+.bp .c-image-gallery-modal[data-v-96c9f3de] .swiper-container {
   height: 100%
 }
-.bp .c-modal-image[data-v-d308e332] {
+.bp .c-modal-image[data-v-96c9f3de] {
   max-width: 100%;
   max-height: 90vh
 }
-.bp .c-modal-image-placeholder[data-v-d308e332] {
+.bp .c-modal-image-placeholder[data-v-96c9f3de] {
+  max-width: 100%;
   width: 100%;
-  height: 90vh
+  max-height: 90vh
 }
 
 .bp .c-image-gallery[data-v-5ed761de] {

package/lib/src/index.mjs

@@ -1,4 +1,4 @@
-import { A as E, a as T, b as s, c as I, d as S, e as N, f as e, B as A, g as O, h as C, i as G, j as D, k as P, l as t, m as R, n as L, o as M, p as o, q as r, r as b, s as n, t as F, u as i, v as l, w as g, x as B, y as c, z as Y, C as U, D as d, E as u, F as H, G as p, H as y, I as K, J as k, K as m, L as V, M as X, N as h, O as v, P as W, Q as f, R as x, S as z, T as w, U as Z, V as j, W as Q, X as q, Y as J, Z as $, $ as aa, a0 as _a, a1 as Ea, a2 as Ta, a3 as sa, a4 as Ia, a5 as Sa, a6 as Na, a7 as ea, a8 as Aa, a9 as Oa, aa as Ca, ab as Ga, ac as Da, ad as Pa, ae as ta, af as Ra, ag as La, ah as Ma, ai as oa, aj as ra, ak as ba, al as na, am as Fa, an as ia, ao as la, ap as ga, aq as Ba, ar as ca, as as Ya, at as Ua, au as da, av as ua, aw as Ha, ax as pa, ay as ya, az as Ka, aA as ka, aB as ma, aC as Va, aD as Xa, aE as ha, aF as va, aG as Wa, aH as fa, aI as xa, aJ as za, aK as wa, aL as Za, aM as ja, aN as Qa, aO as qa, aP as Ja, aQ as $a, aR as a_, aS as __, aT as E_, aU as T_, aV as s_, aW as I_, aX as S_, aY as N_, aZ as e_, a_ as A_, a$ as O_, b0 as C_, b1 as G_, b2 as D_, b3 as P_, b4 as t_, b5 as R_, b6 as L_, b7 as M_, b8 as o_, b9 as r_, ba as b_, bb as n_, bc as F_, bd as i_, be as l_, bf as g_, bg as B_, bh as c_, bi as Y_, bj as U_, bk as d_, bl as u_, bm as H_, bn as p_, bo as y_, bp as K_, bq as k_, br as m_, bs as V_, bt as X_, bu as h_, bv as v_, bw as W_, bx as f_, by as x_, bz as z_, bA as w_, bB as Z_, bC as j_, bD as Q_, bE as q_, bF as J_, bG as $_, bH as aE, bI as _E, bJ as EE, bK as TE, bL as sE, bM as IE, bN as SE, bO as NE, bP as eE, bQ as AE, bR as OE, bS as CE, bT as GE, bU as DE, bV as PE, bW as tE, bX as RE, bY as LE, bZ as ME, b_ as oE, b$ as rE, c0 as bE, c1 as nE, c2 as FE, c3 as iE, c4 as lE, c5 as gE, c6 as BE, c7 as cE, c8 as YE, c9 as UE, ca as dE, cb as uE, cc as HE, cd as pE, ce as yE, cf as KE, cg as kE, ch as mE, ci as VE, cj as XE, ck as hE, cl as vE, cm as WE, cn as fE, co as xE } from "./lib--fXSGh_Q.js";
+import { A as E, a as T, b as s, c as I, d as S, e as N, f as e, B as A, g as O, h as C, i as G, j as D, k as P, l as t, m as R, n as L, o as M, p as o, q as r, r as b, s as n, t as F, u as i, v as l, w as g, x as B, y as c, z as Y, C as U, D as d, E as u, F as H, G as p, H as y, I as K, J as k, K as m, L as V, M as X, N as h, O as v, P as W, Q as f, R as x, S as z, T as w, U as Z, V as j, W as Q, X as q, Y as J, Z as $, $ as aa, a0 as _a, a1 as Ea, a2 as Ta, a3 as sa, a4 as Ia, a5 as Sa, a6 as Na, a7 as ea, a8 as Aa, a9 as Oa, aa as Ca, ab as Ga, ac as Da, ad as Pa, ae as ta, af as Ra, ag as La, ah as Ma, ai as oa, aj as ra, ak as ba, al as na, am as Fa, an as ia, ao as la, ap as ga, aq as Ba, ar as ca, as as Ya, at as Ua, au as da, av as ua, aw as Ha, ax as pa, ay as ya, az as Ka, aA as ka, aB as ma, aC as Va, aD as Xa, aE as ha, aF as va, aG as Wa, aH as fa, aI as xa, aJ as za, aK as wa, aL as Za, aM as ja, aN as Qa, aO as qa, aP as Ja, aQ as $a, aR as a_, aS as __, aT as E_, aU as T_, aV as s_, aW as I_, aX as S_, aY as N_, aZ as e_, a_ as A_, a$ as O_, b0 as C_, b1 as G_, b2 as D_, b3 as P_, b4 as t_, b5 as R_, b6 as L_, b7 as M_, b8 as o_, b9 as r_, ba as b_, bb as n_, bc as F_, bd as i_, be as l_, bf as g_, bg as B_, bh as c_, bi as Y_, bj as U_, bk as d_, bl as u_, bm as H_, bn as p_, bo as y_, bp as K_, bq as k_, br as m_, bs as V_, bt as X_, bu as h_, bv as v_, bw as W_, bx as f_, by as x_, bz as z_, bA as w_, bB as Z_, bC as j_, bD as Q_, bE as q_, bF as J_, bG as $_, bH as aE, bI as _E, bJ as EE, bK as TE, bL as sE, bM as IE, bN as SE, bO as NE, bP as eE, bQ as AE, bR as OE, bS as CE, bT as GE, bU as DE, bV as PE, bW as tE, bX as RE, bY as LE, bZ as ME, b_ as oE, b$ as rE, c0 as bE, c1 as nE, c2 as FE, c3 as iE, c4 as lE, c5 as gE, c6 as BE, c7 as cE, c8 as YE, c9 as UE, ca as dE, cb as uE, cc as HE, cd as pE, ce as yE, cf as KE, cg as kE, ch as mE, ci as VE, cj as XE, ck as hE, cl as vE, cm as WE, cn as fE, co as xE } from "./lib-DO1Zk3d3.js";
 import { createPinia as wE, setActivePinia as ZE } from "pinia";
 export {
   E as ABOUT_SECTION_SETTINGS_CONFIG,