@designcrowd/library.brand-page 5.8.6 → 5.8.8

package/lib/src/brand-page/components/media/Shape.mixin.js

@@ -75,6 +75,9 @@ export default defineComponent({
     },
     methods: {
         async rerender() {
+            if (!this.originalSvgData) {
+                return;
+            }
             this.svgData = applyColorReplacementsToSvgString(this.originalSvgData, this.colorReplacements);
             this.svgData = this.svgData.replace('<svg ', `<svg ${this.svgAttributes} `);
         },

package/lib/src/brand-page/constants/misc.constants.d.ts

@@ -41,28 +41,6 @@ export declare const HEADER_CSRF_TOKEN = "csrf-token";
 export declare const STYLE_THEME_KEYS: Readonly<{
     LogoTextColor: "logo-text-color";
     LogoBackgroundColor: "logo-background-color";
-    LogoTextColor50: "logo-text-color-50";
-    LogoTextColor100: "logo-text-color-100";
-    LogoTextColor200: "logo-text-color-200";
-    LogoTextColor300: "logo-text-color-300";
-    LogoTextColor400: "logo-text-color-400";
-    LogoTextColor500: "logo-text-color-500";
-    LogoTextColor600: "logo-text-color-600";
-    LogoTextColor700: "logo-text-color-700";
-    LogoTextColor800: "logo-text-color-800";
-    LogoTextColor900: "logo-text-color-900";
-    LogoTextColor950: "logo-text-color-950";
-    LogoBackgroundColor50: "logo-background-color-50";
-    LogoBackgroundColor100: "logo-background-color-100";
-    LogoBackgroundColor200: "logo-background-color-200";
-    LogoBackgroundColor300: "logo-background-color-300";
-    LogoBackgroundColor400: "logo-background-color-400";
-    LogoBackgroundColor500: "logo-background-color-500";
-    LogoBackgroundColor600: "logo-background-color-600";
-    LogoBackgroundColor700: "logo-background-color-700";
-    LogoBackgroundColor800: "logo-background-color-800";
-    LogoBackgroundColor900: "logo-background-color-900";
-    LogoBackgroundColor950: "logo-background-color-950";
 }>;
 export declare const BoxShadowSpread = 0.5;
 export declare const ButtonBoxShadowSize = "3px 3px 0px 0px";

package/lib/src/brand-page/constants/misc.constants.js

@@ -50,28 +50,6 @@ export const HEADER_CSRF_TOKEN = 'csrf-token';
 export const STYLE_THEME_KEYS = Object.freeze({
     LogoTextColor: 'logo-text-color',
     LogoBackgroundColor: 'logo-background-color',
-    LogoTextColor50: 'logo-text-color-50',
-    LogoTextColor100: 'logo-text-color-100',
-    LogoTextColor200: 'logo-text-color-200',
-    LogoTextColor300: 'logo-text-color-300',
-    LogoTextColor400: 'logo-text-color-400',
-    LogoTextColor500: 'logo-text-color-500',
-    LogoTextColor600: 'logo-text-color-600',
-    LogoTextColor700: 'logo-text-color-700',
-    LogoTextColor800: 'logo-text-color-800',
-    LogoTextColor900: 'logo-text-color-900',
-    LogoTextColor950: 'logo-text-color-950',
-    LogoBackgroundColor50: 'logo-background-color-50',
-    LogoBackgroundColor100: 'logo-background-color-100',
-    LogoBackgroundColor200: 'logo-background-color-200',
-    LogoBackgroundColor300: 'logo-background-color-300',
-    LogoBackgroundColor400: 'logo-background-color-400',
-    LogoBackgroundColor500: 'logo-background-color-500',
-    LogoBackgroundColor600: 'logo-background-color-600',
-    LogoBackgroundColor700: 'logo-background-color-700',
-    LogoBackgroundColor800: 'logo-background-color-800',
-    LogoBackgroundColor900: 'logo-background-color-900',
-    LogoBackgroundColor950: 'logo-background-color-950',
 });
 export const BoxShadowSpread = 0.5;
 export const ButtonBoxShadowSize = '3px 3px 0px 0px';

package/lib/src/brand-page/utils/color.util.d.ts

@@ -1,4 +1,5 @@
 import type { LogoTheme, Theme } from '../models';
+import { type ColorInstance } from 'color';
 export declare const luminance: (r: number, g: number, b: number) => number;
 export declare const calculateLuminanceRatio: (color1: string, color2: string) => number;
 export declare const isHexTransparent: (hex: string) => boolean;
@@ -7,3 +8,4 @@ export declare const addTransparentAlphaChannelToHex: (hex: string) => string;
 export declare const addOpacityToHex: (hex: string, opacity: number) => string;
 export declare const setRgbAlpha: (rgb: string, alpha: number) => string;
 export declare const getThemeByTextStyleAndLogoTheme: (textStyle: BrandPageCssStyle, logoTheme: LogoTheme) => Theme;
+export declare const getNewColorBasedOnTargetColorTheme: (originalColor: string, targetColor: string) => ColorInstance | undefined;

package/lib/src/brand-page/utils/color.util.js

@@ -1,5 +1,6 @@
 import isHexColor from 'validator/lib/isHexColor';
 import { hexToRGBA, isColor } from '../../utils/helpers';
+import Color, {} from 'color';
 // function from https://stackoverflow.com/a/9733420/3695983
 export const luminance = (r, g, b) => {
     const a = [r, g, b].map(function (v) {
@@ -62,3 +63,15 @@ export const getThemeByTextStyleAndLogoTheme = (textStyle, logoTheme) => {
         secondaryColor,
     };
 };
+export const getNewColorBasedOnTargetColorTheme = (originalColor, targetColor) => {
+    try {
+        const originalColorGrayScaled = Color(originalColor).grayscale().hsl();
+        const targetHslColor = Color(targetColor)
+            .hsl()
+            .lightness(originalColorGrayScaled.lightness());
+        return targetHslColor.rgb();
+    }
+    catch (e) {
+        return;
+    }
+};

package/lib/src/brand-page/utils/style.util.d.ts

@@ -1,12 +1,16 @@
 import type { BrandPageModel, LogoTheme, FabricLogoTheme, ButtonStyles, PageModel } from '../models';
 import { NavigationDesktop, NavigationMobile } from '../models';
 import { PageStyles, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop } from '../models';
-export declare const colorMatchCssKeyValue: (cssKey: string, cssValue: string, logoTheme: LogoTheme) => {
+export declare const colorMatchCssKeyValue: (cssKey: string, cssValue: string, logoTheme: LogoTheme, applyColorWithMatchingLuminance?: {
+    originalColor: string;
+}) => {
     cssValue: string;
     isModified: boolean;
 };
 type Style = Record<string, string | any>;
-export declare const applyLogoThemeToBrandPageStyleRecursive: (logoTheme: LogoTheme, style: Style | Style[]) => {
+export declare const applyLogoThemeToBrandPageStyleRecursive: (logoTheme: LogoTheme, attribute: string, style: Style | Style[], options?: {
+    isMultiColorShape: boolean;
+}) => {
     newStyle: Style | Style[];
     isApplied: boolean;
 };

package/lib/src/brand-page/utils/style.util.js

@@ -2,7 +2,7 @@ import { VIEWPORTS, NavigationDesktop, NavigationMobile } from '../models';
 import { PageStyles, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, } from '../models';
 import { STYLE_THEME_KEYS } from '../constants';
 import { arrayToLinearGradient, linearGradientToArray, isColorLinearGradient, RGBAtoHex, } from '../../utils/helpers';
-import { addTransparentAlphaChannelToHex, calculateLuminanceRatio, } from './color.util';
+import { addTransparentAlphaChannelToHex, calculateLuminanceRatio, getNewColorBasedOnTargetColorTheme, } from './color.util';
 import chroma from 'chroma-js';
 const MIN_LUM_RATIO = 0.3;
 const parseFabricColorToCssStyle = (fabricColor) => {
@@ -31,32 +31,43 @@ const getColorValueForCorrectCssProperty = (k, colorData) => {
         ? colorData.gradient
         : colorData.rgb;
 };
-export const colorMatchCssKeyValue = (cssKey, cssValue, logoTheme) => {
-    switch (cssValue) {
-        case STYLE_THEME_KEYS.LogoBackgroundColor:
-            cssValue = getColorValueForCorrectCssProperty(cssKey, logoTheme.logoBackgroundColor);
-            return { cssValue, isModified: true };
-        case STYLE_THEME_KEYS.LogoTextColor:
-            cssValue = getColorValueForCorrectCssProperty(cssKey, logoTheme.logoTextColor);
-            return { cssValue, isModified: true };
+export const colorMatchCssKeyValue = (cssKey, cssValue, logoTheme, applyColorWithMatchingLuminance) => {
+    if (applyColorWithMatchingLuminance?.originalColor) {
+        const styleThemeMatch = Object.values(STYLE_THEME_KEYS).find((k) => cssValue === k);
+        if (styleThemeMatch) {
+            const theme = styleThemeMatch.startsWith(STYLE_THEME_KEYS.LogoTextColor)
+                ? logoTheme.logoTextColor
+                : logoTheme.logoBackgroundColor;
+            let newColor = applyColorWithMatchingLuminance.originalColor;
+            try {
+                newColor = getNewColorBasedOnTargetColorTheme(applyColorWithMatchingLuminance.originalColor, theme.rgb).toString();
+            }
+            catch (e) { }
+            return { cssValue: newColor, isModified: true };
+        }
+    }
+    if (cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextColor, 'g'))) {
+        cssValue = getColorValueForCorrectCssProperty(cssKey, logoTheme.logoTextColor);
+        return { cssValue, isModified: true };
     }
-    const match = Object.values(STYLE_THEME_KEYS).find((k) => cssValue === k);
-    if (match) {
-        const split = match.split('-');
-        const colorShadeKey = split[split.length - 1];
-        const colorKey = match.startsWith(STYLE_THEME_KEYS.LogoBackgroundColor)
-            ? logoTheme.logoBackgroundColor
-            : logoTheme.logoTextColor;
-        return { cssValue: colorKey[colorShadeKey], isModified: true };
+    else if (cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundColor, 'g'))) {
+        cssValue = getColorValueForCorrectCssProperty(cssKey, logoTheme.logoBackgroundColor);
+        return { cssValue, isModified: true };
     }
     return { cssValue, isModified: false };
 };
-export const applyLogoThemeToBrandPageStyleRecursive = (logoTheme, style) => {
+export const applyLogoThemeToBrandPageStyleRecursive = (logoTheme, attribute, style, options) => {
     let isApplied = false;
     let newStyle = {};
     if (Array.isArray(style)) {
         newStyle = style.map((s) => {
-            const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, s);
+            const isShapeColorReplacement = attribute === 'colorReplacements';
+            const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, attribute, s, isShapeColorReplacement
+                ? {
+                    isMultiColorShape: style.filter((x) => x.originalColor.toLowerCase() !== '' &&
+                        x.originalColor.toLowerCase() !== 'none').length > 1,
+                }
+                : undefined);
             isApplied = isApplied || output.isApplied;
             return output.newStyle;
         });
@@ -64,12 +75,17 @@ export const applyLogoThemeToBrandPageStyleRecursive = (logoTheme, style) => {
     else if (style && typeof style === 'object') {
         for (const [key, value] of Object.entries(style)) {
             if (typeof value === 'string') {
-                const output = colorMatchCssKeyValue(key, value, logoTheme);
+                const applyColorWithMatchingLuminance = options?.isMultiColorShape && key === `replacementColor`
+                    ? {
+                        originalColor: style[`originalColor`],
+                    }
+                    : undefined;
+                const output = colorMatchCssKeyValue(key, value, logoTheme, applyColorWithMatchingLuminance);
                 newStyle[key] = output.cssValue;
                 isApplied = isApplied || output.isModified;
             }
             else if (typeof value === 'object') {
-                const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, value);
+                const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, key, value);
                 newStyle[key] = output.newStyle;
                 isApplied = isApplied || output.isApplied;
                 // if (process.env.NODE_ENV !== 'production' && output.isApplied) {
@@ -115,7 +131,7 @@ export const applyLogoThemeToBrandPageNavigationStyles = (logoTheme, navigation)
             newNavigation[key] = value;
         }
         else {
-            const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, value);
+            const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, key, value);
             newNavigation[key] = output.newStyle;
             isModified = isModified || output.isApplied;
         }
@@ -139,7 +155,7 @@ export const applyLogoThemeToBrandPageHeaderStyles = (logoTheme, pageHeader) =>
             newPageHeader[key] = value;
         }
         else {
-            const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, value);
+            const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, key, value);
             newPageHeader[key] = output.newStyle;
             isModified = isModified || output.isApplied;
         }
@@ -162,7 +178,7 @@ export const applyLogoThemeToBrandPageFooterStyles = (logoTheme, pageFooter) =>
             newPageFooter[key] = value;
         }
         else {
-            const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, value);
+            const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, key, value);
             newPageFooter[key] = output.newStyle;
             isModified = isModified || output.isApplied;
         }
@@ -186,7 +202,7 @@ export const applyLogoThemeToContents = (logoTheme, pages) => {
                 .filter(([, v]) => typeof v === 'object')
                 .map(([k]) => k);
             for (const styleKey of styleKeys) {
-                const { newStyle, isApplied } = applyLogoThemeToBrandPageStyleRecursive(logoTheme, content[styleKey]);
+                const { newStyle, isApplied } = applyLogoThemeToBrandPageStyleRecursive(logoTheme, styleKey, content[styleKey]);
                 newContent[styleKey] = newStyle;
                 isModified = isModified || isApplied;
             }
@@ -202,13 +218,13 @@ export const applyLogoThemeToBrandPageStyles = (logoTheme, pageStyles) => {
     for (const [key, value] of Object.entries(pageStyles)) {
         if (Array.isArray(value)) {
             for (let i = 0; i < value.length; i++) {
-                const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, value[i]);
+                const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, `pageStyles`, value[i]);
                 newStyle[key] = output.newStyle;
                 isModified = isModified || output.isApplied;
             }
         }
         else {
-            const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, value);
+            const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, key, value);
             newStyle[key] = output.newStyle;
             isModified = isModified || output.isApplied;
         }

package/lib/src/brand-page-maker/components/admin-background-settings/AdminBackgroundSettings.mixin.d.ts

@@ -257,28 +257,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     styleThemeKeys: Readonly<{
         LogoTextColor: "logo-text-color";
         LogoBackgroundColor: "logo-background-color";
-        LogoTextColor50: "logo-text-color-50";
-        LogoTextColor100: "logo-text-color-100";
-        LogoTextColor200: "logo-text-color-200";
-        LogoTextColor300: "logo-text-color-300";
-        LogoTextColor400: "logo-text-color-400";
-        LogoTextColor500: "logo-text-color-500";
-        LogoTextColor600: "logo-text-color-600";
-        LogoTextColor700: "logo-text-color-700";
-        LogoTextColor800: "logo-text-color-800";
-        LogoTextColor900: "logo-text-color-900";
-        LogoTextColor950: "logo-text-color-950";
-        LogoBackgroundColor50: "logo-background-color-50";
-        LogoBackgroundColor100: "logo-background-color-100";
-        LogoBackgroundColor200: "logo-background-color-200";
-        LogoBackgroundColor300: "logo-background-color-300";
-        LogoBackgroundColor400: "logo-background-color-400";
-        LogoBackgroundColor500: "logo-background-color-500";
-        LogoBackgroundColor600: "logo-background-color-600";
-        LogoBackgroundColor700: "logo-background-color-700";
-        LogoBackgroundColor800: "logo-background-color-800";
-        LogoBackgroundColor900: "logo-background-color-900";
-        LogoBackgroundColor950: "logo-background-color-950";
     }>;
     configOptions: {
         readonly style: "style";

package/lib/src/brand-page-maker/stores/event-manager/event-manager-store.js

@@ -42,6 +42,12 @@ const safePushToDataLayer = async (eventPayload, { waitForEventCallback } = {})
                 },
                 eventTimeout: EVENT_TIMEOUT_MS,
             });
+            // This timeout will resolve the promise if the eventCallback fails to resolve the promise
+            setTimeout(() => {
+                if (!isEventCallbackCalled) {
+                    resolve(false);
+                }
+            }, EVENT_TIMEOUT_MS + 50);
         }
         else {
             window.dataLayer.push(eventPayload);