@designcrowd/library.brand-page 5.17.21 → 5.17.23-ast-subnav

package/lib/src/{CreatedOnBrandCrowd-de-de-Brtp2yWB.js → CreatedOnBrandCrowd-de-de-Ct9Aewoo.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-BIJ5VoX4.js → CreatedOnBrandCrowd-en-us-BsEzGp5K.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-JrKK9K0u.js → CreatedOnBrandCrowd-es-es-UiIPmY0h.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-D_HvOZe-.js → CreatedOnBrandCrowd-fr-ca-CQmEXbU7.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-D_HvOZe-.js → CreatedOnBrandCrowd-fr-fr-CQmEXbU7.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-SSLb0vlp.js → CreatedOnBrandCrowd-pt-br-DoMI5QSQ.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-SSLb0vlp.js → CreatedOnBrandCrowd-pt-pt-DoMI5QSQ.js}

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

package/lib/src/{CreatedOnDcom-de-de-BG39ozFo.js → CreatedOnDcom-de-de-gexV_wWX.js}

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

package/lib/src/{CreatedOnDcom-en-us-D2NzqECZ.js → CreatedOnDcom-en-us-C2sLHLjJ.js}

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

package/lib/src/{CreatedOnDcom-es-es-C55r2Lb4.js → CreatedOnDcom-es-es-CZFd666H.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-Bj-sAaJI.js → CreatedOnDcom-fr-ca-CPaRB_io.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-D8l0r-Tc.js → CreatedOnDcom-fr-fr-BQo5D5gE.js}

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

package/lib/src/{CreatedOnDcom-pt-br-CXHC6E1h.js → CreatedOnDcom-pt-br-CRr3CqOj.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-2dMvgnyi.js → CreatedOnDcom-pt-pt-DR6Vi-eZ.js}

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

package/lib/src/brand-page/components/banner-section/BannerSection.mixin.d.ts

@@ -96,8 +96,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    contentIndex: number;
     containerClientWidth: number | undefined;
     containerClientHeight: number | undefined;
+    contentIndex: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/brand-page/components/contact-form/ContactForm.mixin.d.ts

@@ -60,6 +60,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     title(): string;
     renderText(): string;
     renderSuccessText(): string;
+    successMessageColorStyle(): BrandPageCssStyle;
 }, {
     submitContactForm(): Promise<void>;
     validateFormValues(): void;

package/lib/src/brand-page/components/contact-form/ContactForm.mixin.js

@@ -5,6 +5,7 @@ import brandPageClient from '../../clients/brand-page.client';
 import { isEmail } from '../../../utils/validator.util';
 import { ALIGN_CARD_CENTER, ALIGN_CARD_CENTER_IMAGE, ALIGN_CENTERED, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, DISPLAY_STYLE_COLLAPSED, RECAPTCHA_ACTION_CONTACT_FORM, TEXT_ONLY, } from '../../constants';
 import { getRenderText } from '@brand-page/utils';
+import { hasRTEContent } from '@brand-page-maker/utils';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 export default defineComponent({
     props: {
@@ -116,13 +117,30 @@ export default defineComponent({
             if (!this.viewModel.description) {
                 return '';
             }
-            return getRenderText(this.viewModel.description);
+            if (hasRTEContent(this.viewModel.description)) {
+                return this.viewModel.description;
+            }
+            else {
+                return getRenderText(this.viewModel.description);
+            }
         },
         renderSuccessText() {
             if (!this.viewModel.successMessage) {
                 return '';
             }
-            return getRenderText(this.viewModel.successMessage);
+            if (hasRTEContent(this.viewModel.successMessage)) {
+                return this.viewModel.successMessage;
+            }
+            else {
+                return getRenderText(this.viewModel.successMessage);
+            }
+        },
+        successMessageColorStyle() {
+            const color = this.viewModel.successMessageStyle?.color;
+            if (color) {
+                return { color };
+            }
+            return {};
         },
     },
     watch: {

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

@@ -30,13 +30,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isImageModalLoading: boolean;
     carouselImages: any[][] | undefined;
     showControl: boolean;
+    carouselComponentRef: string;
 }, {
     isImageModalVisible(): boolean;
     altText(): string;
     showCarouselControls(): boolean;
     navigationUniqueIndexer(): string;
     swiperOptions(): {
-        initialSlide: number;
+        initialSlide: any;
         loop: boolean;
         slidesPerGroup: number;
         slidesPerView: number;
@@ -58,6 +59,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     imageLoading(): void;
     checkImageLoading(isLoading: any): void;
     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

@@ -2,6 +2,14 @@ import { defineComponent } from 'vue';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import ImageModalMixin from '../mixins/image-modal.mixin';
 import cloneDeep from 'lodash.clonedeep';
+// Number of slides on each side of the current slide to keep mounted with a
+// 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.
+// 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: {
@@ -37,6 +45,7 @@ export default defineComponent({
             isImageModalLoading: false,
             carouselImages: [],
             showControl: true,
+            carouselComponentRef: 'image-gallery-carousel',
         };
     },
     computed: {
@@ -59,7 +68,7 @@ export default defineComponent({
         },
         swiperOptions() {
             return {
-                initialSlide: 0,
+                initialSlide: this.selectedImageIndex ?? 0,
                 loop: this.images.length > 1,
                 slidesPerGroup: 1,
                 slidesPerView: 1,
@@ -89,8 +98,6 @@ export default defineComponent({
                 return;
             }
             this.isImageModalLoading = true;
-            this.swiperOptions.initialSlide = newIndex;
-            // this.$nextTick(() => this.checkImageModalImageComplete());
         },
         images: {
             deep: true,
@@ -131,5 +138,92 @@ export default defineComponent({
         onImageModalClose() {
             this.$emit('close');
         },
+        isSlideInRenderWindow(index) {
+            if (this.currentImageIndex === undefined) {
+                return false;
+            }
+            const total = this.images.length;
+            if (total === 0) {
+                return false;
+            }
+            const direct = Math.abs(index - this.currentImageIndex);
+            // For looped galleries, the shortest path between two slides may wrap
+            // around the end. Use whichever distance is smaller.
+            const wrapped = total - direct;
+            const distance = Math.min(direct, wrapped);
+            return distance <= IMAGE_RENDER_WINDOW;
+        },
+        onCarouselLoaded() {
+            // 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;
+            }
+            // 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' && 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/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/index.d.ts

@@ -245,7 +245,7 @@ export interface ContactFormContent extends Content {
     descriptionStyle?: TextStyleDeclaration;
     buttonTextStyle?: TextStyleDeclaration;
     backgroundStyle?: BrandPageCssStyle;
-    messageTextColor?: BrandPageCssStyle;
+    successMessageStyle?: TextStyleDeclaration;
     cardStyle?: BrandPageCssStyle;
     colorReplacements?: ColorReplacement[];
     mediaType?: string;

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

@@ -5,6 +5,7 @@ export declare class NavigationMenuStyles {
     defaultButtonStyle: TextStyleDeclaration;
     selectedButtonStyle: BrandPageCssStyle;
     iconStyle: BrandPageCssStyle;
+    subNavBackgroundColor?: string;
     constructor(options: Partial<NavigationMenuStyles>, defaultOptions: Partial<NavigationMenuStyles>);
 }
 type NavigationStylesOptionType = Partial<Omit<NavigationDesktop | NavigationMobile, 'hamburgerMenuStyle'>> & {
@@ -17,6 +18,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;
     }
 }
+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 '#ffffff';
+};
 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(option?.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 ?? '#ffffff',
         });
     }
 }

package/lib/src/brand-page/utils/migration/migration-14.d.ts

@@ -0,0 +1,2 @@
+import type { MigrationData } from '../migration.util';
+export declare const migration14: (migrationResult: MigrationData) => Promise<MigrationData>;

package/lib/src/brand-page/utils/migration/migration-14.js

@@ -0,0 +1,16 @@
+import { isContact } from '../model.util';
+export const migration14 = async (migrationResult) => {
+    const { brandPageModel } = migrationResult;
+    brandPageModel.pages.forEach((page) => {
+        page.contents.forEach((content) => {
+            if (isContact(content)) {
+                const contactForm = content;
+                if ('messageTextColor' in contactForm) {
+                    contactForm.successMessageStyle = contactForm.messageTextColor;
+                    delete contactForm.messageTextColor;
+                }
+            }
+        });
+    });
+    return migrationResult;
+};

package/lib/src/brand-page/utils/migration/migration-15.d.ts

@@ -0,0 +1,2 @@
+import type { MigrationData } from '../migration.util';
+export declare const migration15: (migrationResult: MigrationData) => Promise<MigrationData>;

package/lib/src/brand-page/utils/migration/migration-15.js

@@ -0,0 +1,37 @@
+import { STYLE_THEME_KEYS } from '../../constants';
+const DEFAULT_SUB_NAV_BG_COLOR = '#ffffff';
+const getSubNavBgColorFromTextColor = (textColor) => {
+    if (textColor === STYLE_THEME_KEYS.LogoTextColor ||
+        textColor === STYLE_THEME_KEYS.LogoTextMultiColor) {
+        return STYLE_THEME_KEYS.LogoBackgroundColor;
+    }
+    if (textColor === STYLE_THEME_KEYS.LogoBackgroundColor ||
+        textColor === STYLE_THEME_KEYS.LogoBackgroundMultiColor) {
+        return STYLE_THEME_KEYS.LogoTextColor;
+    }
+    return DEFAULT_SUB_NAV_BG_COLOR;
+};
+export const migration15 = async (migrationResult) => {
+    const { brandPageModel } = migrationResult;
+    const navigations = [
+        brandPageModel.pageHeaderDesktop?.navigation,
+        brandPageModel.pageHeaderMobile?.navigation,
+        brandPageModel.headerStyles?.navigation,
+    ];
+    for (const nav of navigations) {
+        if (!nav)
+            continue;
+        if (!nav.subNavBackgroundColor ||
+            nav.subNavBackgroundColor === DEFAULT_SUB_NAV_BG_COLOR) {
+            nav.subNavBackgroundColor = getSubNavBgColorFromTextColor(nav.defaultButtonStyle?.color);
+        }
+        if (nav.hamburgerMenuStyle) {
+            const hamburgerBg = nav.hamburgerMenuStyle.subNavBackgroundColor;
+            if (!hamburgerBg || hamburgerBg === DEFAULT_SUB_NAV_BG_COLOR) {
+                nav.hamburgerMenuStyle.subNavBackgroundColor =
+                    getSubNavBgColorFromTextColor(nav.hamburgerMenuStyle.defaultButtonStyle?.color);
+            }
+        }
+    }
+    return migrationResult;
+};

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

@@ -16,6 +16,8 @@ import { migration11 } from './migration/migration-11';
 import { migration12 } from './migration/migration-12';
 import { migration12_1 } from './migration/migration-12_1';
 import { migration13 } from './migration/migration-13';
+import { migration14 } from './migration/migration-14';
+import { migration15 } from './migration/migration-15';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -103,6 +105,16 @@ const MIGRATION_TABLE = [
         migrateFn: migration13,
         description: 'Migrating old page navigation refererences to use page ids',
     },
+    {
+        version: 14,
+        migrateFn: migration14,
+        description: 'Renaming messageTextColor to successMessageStyle on contact form content',
+    },
+    {
+        version: 15,
+        migrateFn: migration15,
+        description: 'Set sub nav background color based on default text style color',
+    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = async (brandPageModel, options) => {

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

@@ -162,7 +162,14 @@ 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 {
             const output = applyLogoThemeToBrandPageStyleRecursive(logoTheme, key, value);
@@ -225,7 +232,14 @@ const CONTENT_STYLE_PROP_NAME_SUFFIX = [
     'Color',
     'Replacements',
 ];
-const RTE_ALLOWED_FIELDS = ['title', 'description', 'text', 'textItems'];
+const RTE_ALLOWED_FIELDS = [
+    'title',
+    'description',
+    'text',
+    'textItems',
+    'paragraph',
+    'successMessage',
+];
 export const applyLogoThemeToContents = (logoTheme, pages) => {
     let isModified = false;
     const newPages = pages.map((page) => {

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.d.ts

@@ -757,7 +757,7 @@ export declare const BRAND_SITE_SAMPLE_WITH_LOGO: {
                 textStyleType: string;
                 applyAutoScale: boolean;
             };
-            messageTextColor: {};
+            successMessageStyle: {};
         }[];
     })[];
     styles: {

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.js

@@ -1455,7 +1455,7 @@ export const BRAND_SITE_SAMPLE_WITH_LOGO = {
                         textStyleType: 'paragraphs',
                         applyAutoScale: true,
                     },
-                    messageTextColor: {},
+                    successMessageStyle: {},
                 },
             ],
         },

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-site-template.examples.js

@@ -803,7 +803,7 @@ export const BRAND_SITE_TEMPLATE_SAMPLE_2 = [
                     overflowWrap: 'anywhere',
                     wordBreak: 'normal',
                 },
-                messageTextColor: {},
+                successMessageStyle: {},
                 role: 'contact-form',
                 buttonStyles: {
                     style: {

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;
+            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/composables/rich-text-editor/useRichTextEditor.js

@@ -387,7 +387,7 @@ export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDro
     const copyGlobalStyleSettings = (selectedTextStyle) => {
         const globalStyles = selectedTextStyle ?? selectedGlobalTextStyles.value?.style;
         if (globalStyles) {
-            globalStyles.fontWeight && toggleBoldAll();
+            globalStyles.fontWeight === 'bold' && toggleBoldAll();
             globalStyles.fontStyle && toggleItalicAll();
             globalStyles.textDecoration?.includes('underline') &&
                 toggleUnderlineAll();