@designcrowd/library.brand-page 5.17.26 → 5.17.27-ast-subnav-1

package/lib/src/{CreatedOnBrandCrowd-de-de-VRXS13Qb.js → CreatedOnBrandCrowd-de-de-QPSG1My1.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-DDlGTS8d.js → CreatedOnBrandCrowd-en-us-DYw-8tnU.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-CaILSVOE.js → CreatedOnBrandCrowd-es-es-Bg7a_t7D.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-kiixi46I.js → CreatedOnBrandCrowd-fr-ca-C7lmWy4y.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-kiixi46I.js → CreatedOnBrandCrowd-fr-fr-C7lmWy4y.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-BAWhHTNW.js → CreatedOnBrandCrowd-pt-br-ul3uX7x1.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-BAWhHTNW.js → CreatedOnBrandCrowd-pt-pt-ul3uX7x1.js}

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

package/lib/src/{CreatedOnDcom-de-de-KMymmdYJ.js → CreatedOnDcom-de-de-DpcKIqq_.js}

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

package/lib/src/{CreatedOnDcom-en-us-Xbb1s9xr.js → CreatedOnDcom-en-us-KU2QVmYM.js}

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

package/lib/src/{CreatedOnDcom-es-es-CrKF6nhT.js → CreatedOnDcom-es-es-CBfEZBfC.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-BHWAZ396.js → CreatedOnDcom-fr-ca-BjbxwU17.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-BkdyCo1N.js → CreatedOnDcom-fr-fr-DhuQWFFk.js}

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

package/lib/src/{CreatedOnDcom-pt-br-D6uGMOQK.js → CreatedOnDcom-pt-br-CgsjIRmA.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-DiTbBVlw.js → CreatedOnDcom-pt-pt-B0Bv8d8B.js}

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

package/lib/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.mixin.js

@@ -70,12 +70,16 @@ export default defineComponent({
             return navItem.relativePath === this.context.currentPageRelativePath;
         },
         getSubNavItemStyle(navItem) {
-            const baseStyle = this.isCurrentPage(navItem)
+            const isActive = this.isCurrentPage(navItem);
+            const baseStyle = isActive
                 ? this.selectedButtonStyle
                 : this.defaultButtonStyle;
             return {
                 ...baseStyle,
-                paddingLeft: '32px', // 16px additional indentation (base is 16px)
+                paddingLeft: '32px',
+                backgroundColor: isActive
+                    ? baseStyle.backgroundColor
+                    : this.styles.hamburgerMenuStyle.subNavBackgroundColor ?? '#ffffff',
             };
         },
         closeSideMenu() {

package/lib/src/brand-page/models/navigation-styles.model.d.ts

@@ -5,8 +5,10 @@ export declare class NavigationMenuStyles {
     defaultButtonStyle: TextStyleDeclaration;
     selectedButtonStyle: BrandPageCssStyle;
     iconStyle: BrandPageCssStyle;
+    subNavBackgroundColor?: string;
     constructor(options: Partial<NavigationMenuStyles>, defaultOptions: Partial<NavigationMenuStyles>);
 }
+export declare const getDefaultSubNavBackgroundColor: (defaultTextColor: string | undefined) => string | undefined;
 type NavigationStylesOptionType = Partial<Omit<NavigationDesktop | NavigationMobile, 'hamburgerMenuStyle'>> & {
     hamburgerMenuStyle?: Partial<NavigationMenuStyles>;
 };
@@ -17,6 +19,7 @@ declare abstract class NavigationStyles implements NavigationMenuStyles {
     defaultButtonStyle: TextStyleDeclaration;
     selectedButtonStyle: BrandPageCssStyle;
     iconStyle: BrandPageCssStyle;
+    subNavBackgroundColor?: string;
     isLogoVisible: boolean;
     hamburgerMenuStyle: NavigationMenuStyles;
     viewport: ViewportsType;

package/lib/src/brand-page/models/navigation-styles.model.js

@@ -1,4 +1,4 @@
-import { DEFAULT_FONT_FAMILY_KEY, DEFAULT_FONT_STYLE, DEFAULT_TEXT_ALIGN, DEFAULT_TEXT_DECORATION, FONT_FAMILY_CONFIGS, FONT_SIZE_BODY, FONT_WEIGHT_NORMAL, defaultHamburgerNavigation, NAVIGATION_DISPLAY, } from '../constants';
+import { DEFAULT_FONT_FAMILY_KEY, DEFAULT_FONT_STYLE, DEFAULT_TEXT_ALIGN, DEFAULT_TEXT_DECORATION, FONT_FAMILY_CONFIGS, FONT_SIZE_BODY, FONT_WEIGHT_NORMAL, STYLE_THEME_KEYS, defaultHamburgerNavigation, NAVIGATION_DISPLAY, } from '../constants';
 import { VIEWPORTS } from './index';
 import { TEXT_STYLE_TYPES } from './index';
 import cloneDeep from 'lodash.clonedeep';
@@ -6,18 +6,33 @@ export class NavigationMenuStyles {
     defaultButtonStyle;
     selectedButtonStyle;
     iconStyle;
+    subNavBackgroundColor;
     constructor(options, defaultOptions) {
         this.defaultButtonStyle = Object.assign({}, defaultOptions.defaultButtonStyle, options.defaultButtonStyle || {});
         this.selectedButtonStyle = Object.assign({}, defaultOptions.selectedButtonStyle, options.selectedButtonStyle || {});
         this.iconStyle = Object.assign({}, defaultOptions.iconStyle, options.iconStyle || {});
+        this.subNavBackgroundColor =
+            options.subNavBackgroundColor ?? defaultOptions.subNavBackgroundColor;
     }
 }
+export const getDefaultSubNavBackgroundColor = (defaultTextColor) => {
+    if (defaultTextColor === STYLE_THEME_KEYS.LogoTextColor ||
+        defaultTextColor === STYLE_THEME_KEYS.LogoTextMultiColor) {
+        return STYLE_THEME_KEYS.LogoBackgroundColor;
+    }
+    if (defaultTextColor === STYLE_THEME_KEYS.LogoBackgroundColor ||
+        defaultTextColor === STYLE_THEME_KEYS.LogoBackgroundMultiColor) {
+        return STYLE_THEME_KEYS.LogoTextColor;
+    }
+    return undefined;
+};
 class NavigationStyles {
     displayType;
     renderAfterLogo;
     defaultButtonStyle;
     selectedButtonStyle;
     iconStyle;
+    subNavBackgroundColor;
     isLogoVisible;
     hamburgerMenuStyle;
     viewport;
@@ -55,6 +70,9 @@ class NavigationStyles {
             borderColor: theme?.primaryColor,
         }, option?.selectedButtonStyle || {});
         this.iconStyle = Object.assign({}, option?.iconStyle || {});
+        this.subNavBackgroundColor =
+            option?.subNavBackgroundColor ??
+                getDefaultSubNavBackgroundColor(this.defaultButtonStyle.color);
         this.isLogoVisible = option?.isLogoVisible || true;
         this.hamburgerMenuStyle = new NavigationMenuStyles(option?.hamburgerMenuStyle || {}, {
             defaultButtonStyle: {
@@ -74,6 +92,7 @@ class NavigationStyles {
                 color: theme?.secondaryColor,
                 backgroundColor: theme?.primaryColor,
             },
+            subNavBackgroundColor: theme?.secondaryColor,
         });
     }
 }

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

@@ -162,13 +162,23 @@ export const applyLogoThemeToBrandPageNavigationStyles = (logoTheme, navigation)
         : new NavigationDesktop();
     for (const [key, value] of Object.entries(navigation)) {
         if (typeof value === 'string' || typeof value === 'boolean') {
-            newNavigation[key] = value;
+            if (typeof value === 'string') {
+                const output = colorMatchCssKeyValue(key, value, logoTheme);
+                newNavigation[key] = output.cssValue;
+                isModified = isModified || output.isModified;
+            }
+            else {
+                newNavigation[key] = value;
+            }
         }
-        else {
+        else if (value != null && typeof value === 'object') {
             const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, key, value);
             newNavigation[key] = output.newStyle;
             isModified = isModified || output.isApplied;
         }
+        else {
+            newNavigation[key] = value;
+        }
     }
     return { navigation: newNavigation, isModified };
 };

package/lib/src/brand-page/utils/view-model.util.js

@@ -669,10 +669,12 @@ export const mapToPageHeaderViewModel = (pageHeader, pageStyles, pages, useOldLo
     };
     const navDefaultButtonTextStyle = getTextStyleByContentTextStyle(pageHeader.navigation.defaultButtonStyle, pageStyles.textStyles.textStyleOptions);
     const navDefaultButtonStyle = Object.assign({}, pageHeader.navigation.defaultButtonStyle, navDefaultButtonTextStyle);
-    const navSelectedButtonStyle = Object.assign({}, navDefaultButtonTextStyle, pageHeader.navigation.selectedButtonStyle);
+    const { backgroundColor: _defaultBg, ...navDefaultTextStyleWithoutBg } = navDefaultButtonTextStyle || {};
+    const navSelectedButtonStyle = Object.assign({}, navDefaultTextStyleWithoutBg, pageHeader.navigation.selectedButtonStyle);
     const hamburgerButtonTextStyle = getTextStyleByContentTextStyle(pageHeader.navigation.hamburgerMenuStyle.defaultButtonStyle, pageStyles.textStyles.textStyleOptions);
     const hamburgerButtonStyle = Object.assign({}, pageHeader.navigation.hamburgerMenuStyle.defaultButtonStyle, hamburgerButtonTextStyle);
-    const hamburgerSelectedButtonStyle = Object.assign({}, hamburgerButtonTextStyle, pageHeader.navigation.hamburgerMenuStyle.selectedButtonStyle);
+    const { backgroundColor: _hamburgerDefaultBg, ...hamburgerTextStyleWithoutBg } = hamburgerButtonTextStyle || {};
+    const hamburgerSelectedButtonStyle = Object.assign({}, hamburgerTextStyleWithoutBg, pageHeader.navigation.hamburgerMenuStyle.selectedButtonStyle);
     const hamburgerMenuStyle = new NavigationMenuStyles(Object.assign({}, pageHeader.navigation.hamburgerMenuStyle, {
         defaultButtonStyle: hamburgerButtonStyle,
         selectedButtonStyle: hamburgerSelectedButtonStyle,

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts

@@ -964,6 +964,12 @@ declare const _default: import("vue").DefineComponent<{}, {
             style: BrandPageCssStyle;
             viewport: import("@brand-page").ViewportsType;
         }): void;
+        _setSubNavBackgroundColor({ displayType, section, value, viewport, }: {
+            displayType: import("@brand-page").NavigationDisplayType;
+            section: "footer" | "header";
+            value: string | undefined;
+            viewport: import("@brand-page").ViewportsType;
+        }): void;
         _setButtonStyles({ section, defaultButtonStyle, selectedButtonStyle, iconStyle, viewport, }: {
             section: "footer" | "header";
             defaultButtonStyle: import("@brand-page").TextStyleDeclaration;
@@ -978,7 +984,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         setNavigationStyleOptionValue({ section, option, value, viewport, }: {
             section: "footer" | "header";
-            option: "defaultBorderColor" | "selectedBorderColor" | "defaultTextStyle" | "defaultBackgroundColor" | "selectedTextColor" | "selectedBackgroundColor" | "iconColor" | "iconBackgroundColor";
+            option: "defaultBorderColor" | "selectedBorderColor" | "subNavBackgroundColor" | "defaultTextStyle" | "defaultBackgroundColor" | "selectedTextColor" | "selectedBackgroundColor" | "iconColor" | "iconBackgroundColor";
             value: any;
             viewport: import("@brand-page").ViewportsType;
         }): void;

package/lib/src/brand-page-maker/models/navigation-style-configs.d.ts

@@ -11,6 +11,7 @@ export declare const NavigationStyleConfigOptions: {
     readonly selectedBackgroundColor: "selectedBackgroundColor";
     readonly iconColor: "iconColor";
     readonly iconBackgroundColor: "iconBackgroundColor";
+    readonly subNavBackgroundColor: "subNavBackgroundColor";
 };
 export type NavigationStyleConfigOption = keyof typeof NavigationStyleConfigOptions;
 export declare const NAVIGATION_STYLE_CONFIG_OPTION_TITLES: () => Record<NavigationStyleConfigOption, string>;

package/lib/src/brand-page-maker/models/navigation-style-configs.js

@@ -10,6 +10,7 @@ export const NavigationStyleConfigOptions = {
     selectedBackgroundColor: 'selectedBackgroundColor',
     iconColor: 'iconColor',
     iconBackgroundColor: 'iconBackgroundColor',
+    subNavBackgroundColor: 'subNavBackgroundColor',
 };
 export const NAVIGATION_STYLE_CONFIG_OPTION_TITLES = () => ({
     defaultBorderColor: modelsTr('defaultBorderColor'),
@@ -20,6 +21,7 @@ export const NAVIGATION_STYLE_CONFIG_OPTION_TITLES = () => ({
     selectedBackgroundColor: modelsTr('selectedBackgroundColor'),
     iconColor: commonTr('iconColor'),
     iconBackgroundColor: modelsTr('iconBackgroundColor'),
+    subNavBackgroundColor: modelsTr('subNavBackgroundColor'),
 });
 const hamburgerNavigationConfig = {
     ...defaultHamburgerNavigation,
@@ -29,6 +31,7 @@ const hamburgerNavigationConfig = {
         'selectedBackgroundColor',
         'iconColor',
         'iconBackgroundColor',
+        'subNavBackgroundColor',
     ],
     selectedButtonStyle: {},
     iconStyle: {},
@@ -68,6 +71,7 @@ export const availableNavigationStyleConfigs = [
             'selectedBackgroundColor',
             'selectedBorderColor',
             'selectedTextColor',
+            'subNavBackgroundColor',
         ],
         buttonGroupOption: {
             value: NAVIGATION_DISPLAY.TAB_1,
@@ -104,6 +108,7 @@ export const availableNavigationStyleConfigs = [
             'defaultBorderColor',
             'selectedBackgroundColor',
             'selectedTextColor',
+            'subNavBackgroundColor',
         ],
         buttonGroupOption: {
             value: NAVIGATION_DISPLAY.TAB_2,

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

@@ -18,7 +18,7 @@ import { useUiContentSettingsStore } from '@shared/content-settings/store';
 import { setContentSettingsAddContentOptions } from './brandpage-maker-store-utils';
 import { useAdminLogoSettingsStore } from '../admin-logo-settings';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
-import { mapBrandPageContentToContentSettingsItem, removeContentFieldValues, removeLogoTemplateModel, } from '@brand-page-maker/utils';
+import { isColorMatched, mapBrandPageContentToContentSettingsItem, removeContentFieldValues, removeLogoTemplateModel, } from '@brand-page-maker/utils';
 import { UI_DEVICE_MODES, UI_SCREENSIZE_MODES, } from '@shared/models';
 import { PAGE_SECTIONS } from '@shared/page-settings/models';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
@@ -644,6 +644,14 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                         },
                     },
                 });
+                if (userStore.isAdmin && !this.isUserDraft) {
+                    for (const viewport of [VIEWPORTS.desktop, VIEWPORTS.mobile]) {
+                        const hamburger = navigationStyleSettingsStore.navigation[PAGE_SECTIONS.header][viewport].hamburgerMenuStyle;
+                        if (isColorMatched(hamburger.subNavBackgroundColor)) {
+                            hamburger.subNavBackgroundColor = undefined;
+                        }
+                    }
+                }
                 uiStore.setThirdPartySettings({
                     thirdPartySettings: {
                         unsplashApplicationName,