@designcrowd/library.brand-page 5.16.13-ast-bug-fix-9 → 5.16.13

package/lib/src/{CreatedOnBrandCrowd-de-de-C-Kjk7Mf.js → CreatedOnBrandCrowd-de-de-CtO2RJXa.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-Da73K6iE.js → CreatedOnBrandCrowd-en-us-CZ3dIt1i.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-CqSmhjNh.js → CreatedOnBrandCrowd-es-es-9ScTkL0Q.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-TpguCMe4.js → CreatedOnBrandCrowd-fr-ca-BWrn1KZs.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-TpguCMe4.js → CreatedOnBrandCrowd-fr-fr-BWrn1KZs.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-Dv47A0wQ.js → CreatedOnBrandCrowd-pt-br-w9BZQE0-.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-Dv47A0wQ.js → CreatedOnBrandCrowd-pt-pt-w9BZQE0-.js}

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

package/lib/src/{CreatedOnDcom-de-de-DNaAebBi.js → CreatedOnDcom-de-de-5MYEbeQk.js}

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

package/lib/src/{CreatedOnDcom-en-us-qnXpTeaa.js → CreatedOnDcom-en-us-Btw0u0Ks.js}

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

package/lib/src/{CreatedOnDcom-es-es-B2sQE-wp.js → CreatedOnDcom-es-es-4YwGIV-M.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-BcyuEyOt.js → CreatedOnDcom-fr-ca-BpIS0iFt.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-FFt3_3mc.js → CreatedOnDcom-fr-fr-Bnk2A1-e.js}

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

package/lib/src/{CreatedOnDcom-pt-br-DZit9sQw.js → CreatedOnDcom-pt-br-CCZRRMaR.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-CXuEvbvE.js → CreatedOnDcom-pt-pt-BG8aaK5S.js}

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

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

@@ -0,0 +1,69 @@
+/// <reference types="types/lodash-shims" />
+import type { PropType } from 'vue';
+import type { ImageGalleryViewModel } from '../../../view-models';
+import type { DebounceHandle } from 'lodash.debounce';
+import type { BrandPageContext, ImageGalleryItem } from '../../../models';
+interface IndexedImageGalleryItem extends ImageGalleryItem {
+    id: number;
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    gap: {
+        type: NumberConstructor;
+        required: false;
+        default: number;
+    };
+    viewModel: {
+        type: PropType<ImageGalleryViewModel>;
+        required: true;
+    };
+    context: {
+        type: PropType<BrandPageContext>;
+        required: true;
+    };
+    contentIndex: {
+        type: NumberConstructor;
+        required: false;
+        default: undefined;
+    };
+}>, {
+    masonryRef: import("vue").Ref<any, any>;
+}, {
+    columnWidth: number;
+    resizeDebounceHandler: DebounceHandle | undefined;
+    resizeObserver: ResizeObserver | undefined;
+    imagesBroken: {};
+}, {
+    items(): IndexedImageGalleryItem[];
+    altText(): (item: ImageGalleryItem) => string;
+}, {
+    onImageClick(selectedIndex: number): void;
+    onResize(): void;
+    onImageError(index: number): void;
+    hasImageError(index: number): any;
+    resetImageBrokenList(): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "image-click"[], "image-click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    gap: {
+        type: NumberConstructor;
+        required: false;
+        default: number;
+    };
+    viewModel: {
+        type: PropType<ImageGalleryViewModel>;
+        required: true;
+    };
+    context: {
+        type: PropType<BrandPageContext>;
+        required: true;
+    };
+    contentIndex: {
+        type: NumberConstructor;
+        required: false;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onImage-click"?: ((...args: any[]) => any) | undefined;
+}>, {
+    contentIndex: number;
+    gap: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,122 @@
+import { defineComponent, ref } from 'vue';
+import debounce from 'lodash.debounce';
+import { getImageAltText } from '../../../utils';
+const CONTAINER_WIDTH_MIN_THRESHOLD = 360;
+const DEBOUNCE_WAIT_MS = 100;
+const INIT_COLUMN_WIDTH = 140;
+const MIN_COLUMNS = 2;
+const MAX_COLUMNS = 3;
+export default defineComponent({
+    props: {
+        gap: {
+            type: Number,
+            required: false,
+            default: 5,
+        },
+        viewModel: {
+            type: Object,
+            required: true,
+        },
+        context: {
+            type: Object,
+            required: true,
+        },
+        contentIndex: {
+            type: Number,
+            required: false,
+            default: undefined,
+        },
+    },
+    setup() {
+        const masonryRef = ref(null);
+        return {
+            masonryRef,
+        };
+    },
+    emits: ['image-click'],
+    data() {
+        return {
+            columnWidth: INIT_COLUMN_WIDTH,
+            resizeDebounceHandler: undefined,
+            resizeObserver: undefined,
+            imagesBroken: {},
+        };
+    },
+    computed: {
+        items() {
+            if (!this.viewModel || !Array.isArray(this.viewModel.images)) {
+                return [];
+            }
+            return this.viewModel.images.map((item, id) => {
+                return { ...item, id };
+            });
+        },
+        altText() {
+            return (item) => {
+                return getImageAltText(item, this.context);
+            };
+        },
+    },
+    created() {
+        if (!this.resizeDebounceHandler) {
+            this.resizeDebounceHandler = debounce(() => {
+                this.onResize();
+            }, DEBOUNCE_WAIT_MS);
+        }
+    },
+    mounted() {
+        const $masonry = this.masonryRef;
+        if (this.resizeDebounceHandler && $masonry) {
+            this.resizeObserver?.disconnect();
+            this.resizeObserver = new ResizeObserver(this.resizeDebounceHandler);
+            this.resizeObserver.observe($masonry.$el);
+        }
+        this.onResize();
+    },
+    beforeUnmount() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+    },
+    watch: {
+        viewModel: {
+            handler(newVal, oldVal) {
+                if (newVal.images !== oldVal.images) {
+                    this.resetImageBrokenList();
+                }
+            },
+            deep: true,
+        },
+    },
+    methods: {
+        onImageClick(selectedIndex) {
+            const payload = {
+                selectedIndex,
+            };
+            this.$emit('image-click', payload);
+        },
+        onResize() {
+            const $masonry = this.masonryRef;
+            if (!$masonry) {
+                return;
+            }
+            const containerWidth = $masonry.$el.clientWidth;
+            const column = containerWidth < CONTAINER_WIDTH_MIN_THRESHOLD
+                ? MIN_COLUMNS
+                : MAX_COLUMNS;
+            this.columnWidth = containerWidth / column - this.gap;
+            // Force vue masonry wall to resize when container width changed but document width unchanged
+            if ($masonry.$el.$children && $masonry.$el.$children[0]) {
+                $masonry.$el.$children[0].$resize();
+            }
+        },
+        onImageError(index) {
+            this.imagesBroken[index] = true;
+        },
+        hasImageError(index) {
+            return this.imagesBroken[index] || false;
+        },
+        resetImageBrokenList() {
+            this.imagesBroken = {};
+        },
+    },
+});

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

@@ -555,12 +555,6 @@ a.maker-anchor {
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1
 }
-.tw-line-clamp-none {
-    overflow: visible;
-    display: block;
-    -webkit-box-orient: horizontal;
-    -webkit-line-clamp: none
-}
 .tw-block {
     display: block
 }
@@ -3402,9 +3396,6 @@ a.maker-anchor {
     .sm\:tw-mb-4 {
         margin-bottom: 1rem
     }
-    .sm\:tw-ml-2 {
-        margin-left: 0.5rem
-    }
     .sm\:tw-ml-4 {
         margin-left: 1rem
     }
@@ -3447,11 +3438,6 @@ a.maker-anchor {
             -ms-flex-direction: row;
                 flex-direction: row
     }
-    .sm\:tw-items-center {
-        -webkit-box-align: center;
-            -ms-flex-align: center;
-                align-items: center
-    }
     .sm\:tw-rounded-md {
         border-radius: 0.375rem
     }
@@ -3634,10 +3620,6 @@ a.maker-anchor {
     .md\:tw-p-8 {
         padding: 2rem
     }
-    .md\:tw-px-12 {
-        padding-left: 3rem;
-        padding-right: 3rem
-    }
     .md\:tw-px-4 {
         padding-left: 1rem;
         padding-right: 1rem
@@ -4990,20 +4972,20 @@ a.maker-anchor {
     margin-right: 0.75rem
 }
 
-.masonry-wall[data-v-26d89c07] {
+.masonry-wall[data-v-1612e531] {
   display: flex;
 }
-.masonry-wall[data-v-26d89c07]:not(.ready) {
+.masonry-wall[data-v-1612e531]:not(.ready) {
   opacity: 0;
 }
-.masonry-column[data-v-26d89c07] {
+.masonry-column[data-v-1612e531] {
   flex-grow: 1;
   flex-basis: 0;
 
   display: flex;
   flex-direction: column;
 }
-.masonry-bottom[data-v-26d89c07] {
+.masonry-bottom[data-v-1612e531] {
   flex-grow: 1;
   margin-top: -300px;
   padding-top: 300px;
@@ -5642,11 +5624,9 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
        object-fit: cover
 }
 
-.c-masonry-img[data-v-f46624e3] {
-  width: 100%;
-  cursor: pointer;
-  display: block;
-  height: auto
+.c-masonry-img[data-v-80212e36] {
+    width: 100%;
+    cursor: pointer
 }
 
 .masonry-bottom {
@@ -6449,18 +6429,18 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   margin-bottom: 0.5rem
 }
 
-.form-error[data-v-729ce8d0] {
+.form-error[data-v-f6c89027] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f
 }
 @media (max-width: 767px) {
-.product-detail[data-v-729ce8d0] {
+.product-detail[data-v-f6c89027] {
     grid-template-columns: repeat(1, minmax(0, 1fr))
 }
 }
 @media (min-width: 767px) {
-.product-detail[data-v-729ce8d0] {
+.product-detail[data-v-f6c89027] {
     grid-template-columns: repeat(2, minmax(0, 1fr))
 }
 }

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

@@ -977,12 +977,6 @@ a.maker-anchor {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
 }
-.tw-line-clamp-none {
-  overflow: visible;
-  display: block;
-  -webkit-box-orient: horizontal;
-  -webkit-line-clamp: none;
-}
 .tw-block {
   display: block;
 }
@@ -3599,10 +3593,6 @@ a.maker-anchor {
     margin-bottom: 1rem;
   }
 
-  .sm\:tw-ml-2 {
-    margin-left: 0.5rem;
-  }
-
   .sm\:tw-ml-4 {
     margin-left: 1rem;
   }
@@ -3658,12 +3648,6 @@ a.maker-anchor {
             flex-direction: row;
   }
 
-  .sm\:tw-items-center {
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-  }
-
   .sm\:tw-rounded-md {
     border-radius: 0.375rem;
   }
@@ -3895,11 +3879,6 @@ a.maker-anchor {
     padding: 2rem;
   }
 
-  .md\:tw-px-12 {
-    padding-left: 3rem;
-    padding-right: 3rem;
-  }
-
   .md\:tw-px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -5308,20 +5287,20 @@ a.maker-anchor {
     margin-right: 0.75rem
 }
 
-.masonry-wall[data-v-26d89c07] {
+.masonry-wall[data-v-1612e531] {
   display: flex;
 }
-.masonry-wall[data-v-26d89c07]:not(.ready) {
+.masonry-wall[data-v-1612e531]:not(.ready) {
   opacity: 0;
 }
-.masonry-column[data-v-26d89c07] {
+.masonry-column[data-v-1612e531] {
   flex-grow: 1;
   flex-basis: 0;
 
   display: flex;
   flex-direction: column;
 }
-.masonry-bottom[data-v-26d89c07] {
+.masonry-bottom[data-v-1612e531] {
   flex-grow: 1;
   margin-top: -300px;
   padding-top: 300px;
@@ -5960,11 +5939,9 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
        object-fit: cover
 }
 
-.c-masonry-img[data-v-f46624e3] {
-  width: 100%;
-  cursor: pointer;
-  display: block;
-  height: auto
+.c-masonry-img[data-v-80212e36] {
+    width: 100%;
+    cursor: pointer
 }
 
 .masonry-bottom {
@@ -6767,18 +6744,18 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   margin-bottom: 0.5rem
 }
 
-.form-error[data-v-729ce8d0] {
+.form-error[data-v-f6c89027] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f
 }
 @media (max-width: 767px) {
-.product-detail[data-v-729ce8d0] {
+.product-detail[data-v-f6c89027] {
     grid-template-columns: repeat(1, minmax(0, 1fr))
 }
 }
 @media (min-width: 767px) {
-.product-detail[data-v-729ce8d0] {
+.product-detail[data-v-f6c89027] {
     grid-template-columns: repeat(2, minmax(0, 1fr))
 }
 }

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

@@ -16,18 +16,6 @@ a:not(.tw-lowercase) {
 .dcom-rounded {
     border-radius: 8px
 }
-.dcom-rounded-tl {
-    border-top-left-radius: 8px
-}
-.dcom-rounded-tr {
-    border-top-right-radius: 8px
-}
-.dcom-rounded-bl {
-    border-bottom-left-radius: 8px
-}
-.dcom-rounded-br {
-    border-bottom-right-radius: 8px
-}
 .\!dcom-capitalize {
     text-transform: capitalize !important
 }
@@ -585,12 +573,6 @@ a:not(.tw-lowercase) {
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1
 }
-.tw-line-clamp-none {
-    overflow: visible;
-    display: block;
-    -webkit-box-orient: horizontal;
-    -webkit-line-clamp: none
-}
 .tw-block {
     display: block
 }
@@ -3432,9 +3414,6 @@ a:not(.tw-lowercase) {
     .sm\:tw-mb-4 {
         margin-bottom: 1rem
     }
-    .sm\:tw-ml-2 {
-        margin-left: 0.5rem
-    }
     .sm\:tw-ml-4 {
         margin-left: 1rem
     }
@@ -3477,11 +3456,6 @@ a:not(.tw-lowercase) {
             -ms-flex-direction: row;
                 flex-direction: row
     }
-    .sm\:tw-items-center {
-        -webkit-box-align: center;
-            -ms-flex-align: center;
-                align-items: center
-    }
     .sm\:tw-rounded-md {
         border-radius: 0.375rem
     }
@@ -3664,10 +3638,6 @@ a:not(.tw-lowercase) {
     .md\:tw-p-8 {
         padding: 2rem
     }
-    .md\:tw-px-12 {
-        padding-left: 3rem;
-        padding-right: 3rem
-    }
     .md\:tw-px-4 {
         padding-left: 1rem;
         padding-right: 1rem
@@ -5020,20 +4990,20 @@ a:not(.tw-lowercase) {
     margin-right: 0.75rem
 }
 
-.masonry-wall[data-v-26d89c07] {
+.masonry-wall[data-v-1612e531] {
   display: flex;
 }
-.masonry-wall[data-v-26d89c07]:not(.ready) {
+.masonry-wall[data-v-1612e531]:not(.ready) {
   opacity: 0;
 }
-.masonry-column[data-v-26d89c07] {
+.masonry-column[data-v-1612e531] {
   flex-grow: 1;
   flex-basis: 0;
 
   display: flex;
   flex-direction: column;
 }
-.masonry-bottom[data-v-26d89c07] {
+.masonry-bottom[data-v-1612e531] {
   flex-grow: 1;
   margin-top: -300px;
   padding-top: 300px;
@@ -5672,11 +5642,9 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
        object-fit: cover
 }
 
-.c-masonry-img[data-v-f46624e3] {
-  width: 100%;
-  cursor: pointer;
-  display: block;
-  height: auto
+.c-masonry-img[data-v-80212e36] {
+    width: 100%;
+    cursor: pointer
 }
 
 .masonry-bottom {
@@ -6479,18 +6447,18 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   margin-bottom: 0.5rem
 }
 
-.form-error[data-v-729ce8d0] {
+.form-error[data-v-f6c89027] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f
 }
 @media (max-width: 767px) {
-.product-detail[data-v-729ce8d0] {
+.product-detail[data-v-f6c89027] {
     grid-template-columns: repeat(1, minmax(0, 1fr))
 }
 }
 @media (min-width: 767px) {
-.product-detail[data-v-729ce8d0] {
+.product-detail[data-v-f6c89027] {
     grid-template-columns: repeat(2, minmax(0, 1fr))
 }
 }