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

package/lib/src/{CreatedOnBrandCrowd-de-de-BAarxb6H.js → CreatedOnBrandCrowd-de-de-CWU8xU2K.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-YOx0LzQn.js → CreatedOnBrandCrowd-en-us-BoDkcBrU.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-gFq6vRVt.js → CreatedOnBrandCrowd-es-es-BWOqRfVb.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-CALN_e6Y.js → CreatedOnBrandCrowd-fr-ca-CG4z978C.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-CALN_e6Y.js → CreatedOnBrandCrowd-fr-fr-CG4z978C.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-GykC2_NN.js → CreatedOnBrandCrowd-pt-br-4HmU2v2R.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-GykC2_NN.js → CreatedOnBrandCrowd-pt-pt-4HmU2v2R.js}

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

package/lib/src/{CreatedOnDcom-de-de-CU_L-yTx.js → CreatedOnDcom-de-de-CPFtfEgt.js}

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

package/lib/src/{CreatedOnDcom-en-us-CziJY0nZ.js → CreatedOnDcom-en-us-DQV9NsVn.js}

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

package/lib/src/{CreatedOnDcom-es-es-rh_DWPQz.js → CreatedOnDcom-es-es-EhDGIuHJ.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-_MM7Khy3.js → CreatedOnDcom-fr-ca-C_qZjWbX.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-DFYKIg6R.js → CreatedOnDcom-fr-fr-DEMhqMGc.js}

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

package/lib/src/{CreatedOnDcom-pt-br-CFxfISCj.js → CreatedOnDcom-pt-br-B6o2lYXf.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-sn-NPNxT.js → CreatedOnDcom-pt-pt-BYRXGUUB.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-BT4J66OZ.js";
+import { _ as M } from "./lib-v80Mpvhi.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,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

@@ -6,10 +6,13 @@ 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;
     }
 }
 class NavigationStyles {
@@ -18,6 +21,7 @@ class NavigationStyles {
     defaultButtonStyle;
     selectedButtonStyle;
     iconStyle;
+    subNavBackgroundColor;
     isLogoVisible;
     hamburgerMenuStyle;
     viewport;
@@ -55,6 +59,7 @@ class NavigationStyles {
             borderColor: theme?.primaryColor,
         }, option?.selectedButtonStyle || {});
         this.iconStyle = Object.assign({}, option?.iconStyle || {});
+        this.subNavBackgroundColor = option?.subNavBackgroundColor;
         this.isLogoVisible = option?.isLogoVisible || true;
         this.hamburgerMenuStyle = new NavigationMenuStyles(option?.hamburgerMenuStyle || {}, {
             defaultButtonStyle: {
@@ -74,6 +79,7 @@ class NavigationStyles {
                 color: theme?.secondaryColor,
                 backgroundColor: theme?.primaryColor,
             },
+            subNavBackgroundColor: theme?.secondaryColor,
         });
     }
 }

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,3 @@
+export const migration15 = async (migrationResult) => {
+    return migrationResult;
+};

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

@@ -17,6 +17,7 @@ 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,
@@ -109,6 +110,11 @@ const MIGRATION_TABLE = [
         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);

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

@@ -1,3 +1,5 @@
 export declare const getRenderText: (text: string) => string;
 export declare const escapeContentText: (text: string | undefined) => string | undefined;
+export declare const decodeHtmlEntities: (text: string) => string;
 export declare const unescapeContentText: (text: string) => string;
+export declare const encodeContentText: (text: string | undefined) => string | undefined;

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

@@ -10,6 +10,22 @@ export const escapeContentText = (text) => {
         .replace(/(<([^>]+)>)/gi, '')
         .replace(/(\r\n|\r|\n)/g, ESCAPED_NEWLINE_CHARACTER);
 };
+export const decodeHtmlEntities = (text) => {
+    return text
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&amp;/g, '&');
+};
 export const unescapeContentText = (text) => {
-    return text.replace(new RegExp(`${ESCAPED_NEWLINE_CHARACTER}`, 'g'), '\n');
+    return decodeHtmlEntities(text.replace(new RegExp(`${ESCAPED_NEWLINE_CHARACTER}`, 'g'), '\n'));
+};
+export const encodeContentText = (text) => {
+    if (!text) {
+        return text;
+    }
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/(\r\n|\r|\n)/g, ESCAPED_NEWLINE_CHARACTER);
 };

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/utils/rich-text-editor.util.d.ts

@@ -6,6 +6,7 @@ import type { StyleSettingsState } from '@shared/style-settings/store';
 import type { Mark } from 'prosemirror-model';
 import { type DOMPurify } from 'dompurify';
 export declare const RTE_ALLOWED_SECTION_TYPES: string[];
+export declare const isRTEManagedStyleField: (sectionType: string, fieldName: string) => boolean;
 export declare const isStyleChanged: (tr: Transaction) => boolean;
 export declare const skipStyleDetection: (chain: ChainedCommands, marks?: Mark[]) => ChainedCommands;
 export declare const hasRTEContent: (content: string) => boolean;

package/lib/src/brand-page-maker/utils/rich-text-editor.util.js

@@ -55,6 +55,14 @@ export const RTE_ALLOWED_SECTION_TYPES = [
     ...Object.keys(RTE_SECTION_FIELD_PAIRS),
     'text',
 ];
+export const isRTEManagedStyleField = (sectionType, fieldName) => {
+    if (sectionType === 'text' && fieldName === 'textStyle')
+        return true;
+    const pairs = RTE_SECTION_FIELD_PAIRS[sectionType];
+    if (!pairs)
+        return false;
+    return pairs.some((pair) => pair.styleField === fieldName);
+};
 // Only allow tags used by the enabled Tiptap extensions
 const allowedTags = [
     'p',