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

package/lib/src/{CreatedOnBrandCrowd-de-de-CE3q_ouk.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-DO1Zk3d3.js";
+import { _ as t } from "./lib-wvy4koSU.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-YmCINEd2.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-DO1Zk3d3.js";
+import { _ as t } from "./lib-wvy4koSU.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-po716FZh.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-DO1Zk3d3.js";
+import { _ as t } from "./lib-wvy4koSU.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-DgSeh7zq.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-DO1Zk3d3.js";
+import { _ as t } from "./lib-wvy4koSU.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-DgSeh7zq.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-DO1Zk3d3.js";
+import { _ as t } from "./lib-wvy4koSU.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-BY3I3OVc.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-DO1Zk3d3.js";
+import { _ as t } from "./lib-wvy4koSU.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-BY3I3OVc.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-DO1Zk3d3.js";
+import { _ as t } from "./lib-wvy4koSU.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-VF__9AH9.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-DO1Zk3d3.js";
+import { _ as e } from "./lib-wvy4koSU.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-B653tDEJ.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-DO1Zk3d3.js";
+import { _ as e } from "./lib-wvy4koSU.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-Cc3g0BMj.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-DO1Zk3d3.js";
+import { _ as e } from "./lib-wvy4koSU.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-NzxsUZqx.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-DO1Zk3d3.js";
+import { _ as e } from "./lib-wvy4koSU.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-DFuj0umw.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-DO1Zk3d3.js";
+import { _ as e } from "./lib-wvy4koSU.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-VxpFX1Jd.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-DO1Zk3d3.js";
+import { _ as M } from "./lib-wvy4koSU.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-CG2qMIlw.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-DO1Zk3d3.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/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();

package/lib/src/brand-page-maker/constants/config-settings-constant.js

@@ -1774,6 +1774,7 @@ export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
             placeholder: contentSettingsTr(`successMessagePlaceholder`),
             title: contentSettingsTr(`successMessageTitle`),
             groupId: CONTACT_FORM_GROUPS.settings,
+            maxLength: 1000,
         },
         responseEmail: {
             type: 'email',
@@ -1813,16 +1814,6 @@ export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
             title: contentSettingsTr(`backgroundColorTitle`),
             valueConvertor: backgroundColorConvertor,
         },
-        messageTextColor: {
-            type: 'color',
-            groupId: CONTACT_FORM_GROUPS.style,
-            defaultValue: {},
-            isInline: true,
-            showToggle: false,
-            disableTransparent: true,
-            title: contentSettingsTr(`successMessageTextColorTitle`),
-            valueConvertor: colorConvertor,
-        },
     },
     isEnabled: true,
     isLocked: (features) => !features.canAddContactFormContents,

package/lib/src/brand-page-maker/models/content-settings-configs.d.ts

@@ -99,6 +99,11 @@ export interface ContentSettingsField<TContent> {
     fieldTypeAssessor?: FieldTypeAssessor<TContent>;
     defaultGetter?: DefaultGetter<any>;
     validator?: ContentValidator<TContent>;
+    /**
+     * Override the style field name used by the RTE editor.
+     * Defaults to `${fieldName}Style` when not specified.
+     */
+    styleName?: string;
 }
 export interface ContentSettingsMultiField<TContent, TField> extends Omit<ContentSettingsField<TContent>, 'type' | 'role'> {
     type: ItemMultiFieldType;

package/lib/src/brand-page-maker/models/content-settings.js

@@ -437,6 +437,9 @@ export const createInitialContactFormContent = (options) => {
             textStyleType: TEXT_STYLE_TYPES.paragraphs,
             textAlign: 'center',
         },
+        successMessageStyle: {
+            textStyleType: TEXT_STYLE_TYPES.paragraphs,
+        },
         buttonTextStyle: {
             applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
             textStyleType: TEXT_STYLE_TYPES.buttons,

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,