@designcrowd/library.brand-page 5.15.21 → 5.15.24-ast-previews-2

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

@@ -517,9 +517,6 @@ a.maker-anchor {
 .bp .tw-mt-0 {
     margin-top: 0px
 }
-.bp .tw-mt-0\.5 {
-    margin-top: 0.125rem
-}
 .bp .tw-mt-1 {
     margin-top: 0.25rem
 }
@@ -3971,7 +3968,7 @@ a.maker-anchor {
   width: 100%;
 }
 
-.bp .done-btn[data-v-4b72bdd6] {
+.bp .done-btn[data-v-cc85f529] {
   box-shadow:
     0 0 0 1px #d4d4d4,
     0 8px 16px #d4d4d4;
@@ -4021,7 +4018,7 @@ a.maker-anchor {
 }
 }
 
-.bp .dropdown-item-hover[data-v-2050c29c]:hover {
+.bp .dropdown-item-hover[data-v-a3bd940b]:hover {
   background-color: #eee;
 }
 
@@ -4988,7 +4985,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
        object-fit: cover
 }
 
-.bp .c-image--height-limited[data-v-4dbc9bf6] {
+.bp .c-image--height-limited[data-v-d8be9346] {
   max-height: 45vh;
 }
 
@@ -5587,10 +5584,10 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
     text-align: center
 }
 
-.bp .c_banner--with-image-overlay[data-v-dcac170d] {
+.bp .c_banner--with-image-overlay[data-v-be5be4ad] {
   min-height: 24rem;
 }
-.bp .c_banner--divided-container[data-v-dcac170d] {
+.bp .c_banner--divided-container[data-v-be5be4ad] {
   min-height: 30rem;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
@@ -5598,67 +5595,67 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
           flex-direction: row;
   gap: 1rem;
 }
-.bp .device-wrapper--mobile .c_banner--divided-container[data-v-dcac170d] {
+.bp .device-wrapper--mobile .c_banner--divided-container[data-v-be5be4ad] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
 }
-.bp .c_banner-container[data-v-dcac170d] {
+.bp .c_banner-container[data-v-be5be4ad] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.bp .c_banner--with-image-flip[data-v-dcac170d] {
+.bp .c_banner--with-image-flip[data-v-be5be4ad] {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: reverse;
       -ms-flex-direction: row-reverse;
           flex-direction: row-reverse;
 }
-.bp .c_banner--divided-container[data-v-dcac170d] .full-square-image {
+.bp .c_banner--divided-container[data-v-be5be4ad] .full-square-image {
   width: 100%;
   aspect-ratio: 1/1;
   -o-object-fit: cover;
      object-fit: cover;
 }
 @container (min-width: 640px) {
-.bp .c_banner-container--left-aligned-stacking[data-v-dcac170d] {
+.bp .c_banner-container--left-aligned-stacking[data-v-be5be4ad] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.bp .c_banner-container--right-aligned-stacking[data-v-dcac170d] {
+.bp .c_banner-container--right-aligned-stacking[data-v-be5be4ad] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;
             flex-direction: row-reverse;
 }
-.bp .c_banner-button--stacking[data-v-dcac170d] {
+.bp .c_banner-button--stacking[data-v-be5be4ad] {
     width: -webkit-fit-content;
     width: -moz-fit-content;
     width: fit-content;
 }
 }
 @container (max-width: 640px) {
-.bp .c_banner-container--left-aligned-stacking[data-v-dcac170d] {
+.bp .c_banner-container--left-aligned-stacking[data-v-be5be4ad] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.bp .c_banner-container--right-aligned-stacking[data-v-dcac170d] {
+.bp .c_banner-container--right-aligned-stacking[data-v-be5be4ad] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.bp .c_banner-item--stacking[data-v-dcac170d] {
+.bp .c_banner-item--stacking[data-v-be5be4ad] {
     width: 100%;
 }
-.bp .c_banner-button--stacking[data-v-dcac170d] {
+.bp .c_banner-button--stacking[data-v-be5be4ad] {
     width: 100%;
 }
-.bp .c_banner--divided-container[data-v-dcac170d] {
+.bp .c_banner--divided-container[data-v-be5be4ad] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6830,14 +6827,14 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   line-height: 1.5;
 }
 
-.bp .brand-page-root[data-v-4eac537a] {
+.bp .brand-page-root[data-v-d4cc0d12] {
   height: 100%;
 }
-.bp .sortable[data-v-4eac537a] {
+.bp .sortable[data-v-d4cc0d12] {
   outline-color: #F7768C;
   outline-width: 0.2rem;
 }
-.bp .brand-page[data-v-4eac537a] {
+.bp .brand-page[data-v-d4cc0d12] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -6849,7 +6846,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.bp .brand-page__inner--default[data-v-4eac537a] {
+.bp .brand-page__inner--default[data-v-d4cc0d12] {
   position: relative;
   z-index: 10;
   display: -webkit-box;
@@ -6861,16 +6858,16 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.bp .brand-page__inner--desktop[data-v-4eac537a] {
+.bp .brand-page__inner--desktop[data-v-d4cc0d12] {
   min-height: 100vh;
 }
-.bp .brand-site__header[data-v-4eac537a] {
+.bp .brand-site__header[data-v-d4cc0d12] {
   container-type: inline-size;
 }
-.bp .brand-page__header[data-v-4eac537a] {
+.bp .brand-page__header[data-v-d4cc0d12] {
   padding-top: var(--page-padding);
 }
-.bp .brand-page__content--default[data-v-4eac537a] {
+.bp .brand-page__content--default[data-v-d4cc0d12] {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 2.5rem;
@@ -6887,7 +6884,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
           flex-direction: column;
   max-width: var(--page-max-width);
 }
-.bp .brand-page__content--desktop[data-v-4eac537a] {
+.bp .brand-page__content--desktop[data-v-d4cc0d12] {
   margin-left: auto;
   margin-right: auto;
   display: -webkit-box;
@@ -6903,15 +6900,15 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
           flex-direction: column;
   max-width: 100%;
 }
-.bp .brand-page__content--inner[data-v-4eac537a] {
+.bp .brand-page__content--inner[data-v-d4cc0d12] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.bp .brand-page__content--inner--brandsite[data-v-4eac537a] {
+.bp .brand-page__content--inner--brandsite[data-v-d4cc0d12] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.bp .brand-page__content--outline-selected[data-v-4eac537a] {
+.bp .brand-page__content--outline-selected[data-v-d4cc0d12] {
   position: relative;
   z-index: 10;
   outline-color: #F7768C;
@@ -6919,20 +6916,20 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
-.bp .brand-page__content--outline-footer-selected[data-v-4eac537a] {
+.bp .brand-page__content--outline-footer-selected[data-v-d4cc0d12] {
   outline-color: #f7768c;
   outline-width: 0.2rem;
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
 @media (max-width: 640px) {
-.bp .brand-page__content--inner--full-width[data-v-4eac537a] {
+.bp .brand-page__content--inner--full-width[data-v-d4cc0d12] {
     padding-left: 0;
     padding-right: 0;
 }
 }
 @media (min-width: 640px) {
-.bp .brand-page__content--inner--full-width[data-v-4eac537a] {
+.bp .brand-page__content--inner--full-width[data-v-d4cc0d12] {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
 }
@@ -7764,7 +7761,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   background-color: rgba(17, 21, 23, 0.33);
 }
 
-.bp .c-media-btn__img[data-v-01009e7c] {
+.bp .c-media-btn__img[data-v-567b76b5] {
   width: 100%;
   border-radius: 0.375rem;
   -webkit-transition-property: -webkit-box-shadow;
@@ -7782,7 +7779,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
      object-fit: cover;
   max-height: 150px;
 }
-.bp .c-media-btn__overlay[data-v-01009e7c] {
+.bp .c-media-btn__overlay[data-v-567b76b5] {
   position: absolute;
   left: 0px;
   bottom: 0px;
@@ -7798,13 +7795,13 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   -webkit-transition-duration: 200ms;
           transition-duration: 200ms;
 }
-.bp .c-media-btn__overlay--category[data-v-01009e7c] {
+.bp .c-media-btn__overlay--category[data-v-567b76b5] {
   background-color: rgba(17, 21, 23, 0.66);
 }
-.bp .c-media-btn__overlay--video[data-v-01009e7c]:hover {
+.bp .c-media-btn__overlay--video[data-v-567b76b5]:hover {
   background-color: rgba(17, 21, 23, 0.33);
 }
-.bp .c-media-btn[data-v-01009e7c] {
+.bp .c-media-btn[data-v-567b76b5] {
   width: 100%;
   aspect-ratio: 1;
   max-height: 150px;
@@ -8390,11 +8387,11 @@ input[type='number'][data-v-28a532b4] {
 }
 }
 
-.bp .template-preview[data-v-c5fa6125] {
+.bp .template-preview[data-v-072c3b9b] {
   position: relative;
   background-attachment: initial !important
 }
-.bp .template-preview__overlay[data-v-c5fa6125] {
+.bp .template-preview__overlay[data-v-072c3b9b] {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -8405,10 +8402,28 @@ input[type='number'][data-v-28a532b4] {
   cursor: pointer;
   opacity: 0
 }
-.bp .template-preview__page[data-v-c5fa6125] {
+.bp .template-preview__image-container[data-v-072c3b9b] {
+  pointer-events: none;
+  height: 100%;
+  width: 100%
+}
+.bp .template-preview__image[data-v-072c3b9b] {
+  height: 100%;
+  width: 100%;
+  -o-object-fit: fill;
+     object-fit: fill;
+  -webkit-transition: -webkit-filter 0.2s ease;
+  transition: -webkit-filter 0.2s ease;
+  transition: filter 0.2s ease;
+  transition: filter 0.2s ease, -webkit-filter 0.2s ease
+}
+.bp .template-preview__page[data-v-072c3b9b] {
   pointer-events: none
 }
-.bp .template-preview[data-v-c5fa6125] .c-shape-background {
+.bp .template-preview[data-v-072c3b9b] .c-shape-background {
+  position: absolute
+}
+.bp .template-preview__image[data-v-072c3b9b] .c-shape-background {
   position: absolute
 }
 

package/lib/src/helpers/ts.helper.d.ts

@@ -6,4 +6,5 @@ export declare function getQueryParam(name: string, url?: string): string | null
 type Callback = (...args: any) => void;
 export declare function refDebounce(fn: Callback, timeout: number, ref?: string): (...args: any[]) => void;
 export declare function sanitiseObject(obj: any): {};
+export declare const findValuesByKey: (obj: any, keyToFind: string, results?: string[]) => string[];
 export {};

package/lib/src/helpers/ts.helper.js

@@ -40,3 +40,25 @@ export function sanitiseObject(obj) {
         return ac;
     }, {});
 }
+export const findValuesByKey = (obj, keyToFind, results = []) => {
+    if (typeof obj !== 'object' || obj === null) {
+        return results;
+    }
+    if (Array.isArray(obj)) {
+        for (const item of obj) {
+            findValuesByKey(item, keyToFind, results);
+        }
+    }
+    else {
+        for (const key in obj) {
+            if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                const value = obj[key];
+                if (key === keyToFind && value && typeof value === 'string') {
+                    results.push(value);
+                }
+                findValuesByKey(value, keyToFind, results);
+            }
+        }
+    }
+    return results;
+};

package/lib/src/index.d.ts

@@ -26,7 +26,7 @@ export type { CriticalResourceURLs } from './brand-page/utils/view-model.util';
 export { getOptimalLogoSize, calculateOptimizedLogoDimensions, } from './brand-page/utils/logo.util';
 export { sanitizeRTEHtml } from './brand-page-maker/utils';
 export { getPageSlugFromPageTitle } from './brand-page-maker/utils/slug.util';
-export { useBrandPageMakerStore, useBrandPageMakerUserStore, useUiStore, useBrandPageContainerStore, useEventManagerStore, useLocalisedRouteStore, } from './brand-page-maker/stores';
+export { useBrandPageMakerStore, useBrandPageMakerUserStore, useUiStore, useBrandPageContainerStore, useEventManagerStore, useLocalisedRouteStore, useVideoStore, } from './brand-page-maker/stores';
 export { useShopConfigStore } from './shared/ecommerce-settings/store/shop-settings-store';
 import { createPinia, setActivePinia } from 'pinia';
 declare const setupSSRPinia: (piniaInstance: any) => void;