@designcrowd/library.brand-page 5.18.1 → 5.18.2-ast-subnav-1

package/lib/src/{CreatedOnBrandCrowd-de-de-DFpjIAUv.js → CreatedOnBrandCrowd-de-de-BcE0fnK1.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-BapIT2xO.js → CreatedOnBrandCrowd-en-us-CSiIpDLD.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-DaSf3Dt6.js → CreatedOnBrandCrowd-es-es-D_dx-lMy.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-Cvgei7yn.js → CreatedOnBrandCrowd-fr-ca-BR7qAax-.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-Cvgei7yn.js → CreatedOnBrandCrowd-fr-fr-BR7qAax-.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-Duxd2NmR.js → CreatedOnBrandCrowd-pt-br-D8L6aJoK.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-Duxd2NmR.js → CreatedOnBrandCrowd-pt-pt-D8L6aJoK.js}

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

package/lib/src/{CreatedOnDcom-de-de-DXwNbruv.js → CreatedOnDcom-de-de-Bo0WNPXh.js}

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

package/lib/src/{CreatedOnDcom-en-us-CkNGwN-p.js → CreatedOnDcom-en-us-B0GDCSrA.js}

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

package/lib/src/{CreatedOnDcom-es-es-Csyf5yhI.js → CreatedOnDcom-es-es-CDq2MPQJ.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-GOIUmIdy.js → CreatedOnDcom-fr-ca-B8L5Wjnk.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-DF63cL2a.js → CreatedOnDcom-fr-fr-vpgsTke6.js}

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

package/lib/src/{CreatedOnDcom-pt-br-Ct6FWj7D.js → CreatedOnDcom-pt-br-CUMf_n7T.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-D22yb8Ci.js → CreatedOnDcom-pt-pt-B_Ek1lUj.js}

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

package/lib/src/brand-page/components/page/Page.mixin.d.ts

@@ -145,8 +145,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     viewport: ViewportsType;
     isMobileDevice: boolean;
-    containerClientWidth: number | undefined;
     containerClientHeight: number | undefined;
+    containerClientWidth: number | undefined;
     isContentSelected: boolean;
     isHeaderSelected: boolean;
     isFooterSelected: boolean;

package/lib/src/brand-page/components/page/PageComponent.mixin.d.ts

@@ -78,7 +78,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{}>, {
     brandPageToken: string;
     isMobileDevice: boolean;
-    containerClientWidth: number;
     containerClientHeight: number;
+    containerClientWidth: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -12,6 +12,12 @@ export declare const ALIGN_LEFT_BIG_IMAGE = "left-aligned-big-image";
 export declare const ALIGN_CARD_CENTER_IMAGE = "center-card-aligned-image";
 export declare const ALIGN_CARD_CENTER = "center-card-aligned";
 export declare const ALIGN_CARD_LEFT_IMAGE = "left-card-aligned-image";
+export declare const ALIGN_TOP_CARD_IMAGE = "top-card-aligned-image";
+export declare const ALIGN_BOTTOM_CARD_IMAGE = "bottom-card-aligned-image";
+export declare const ALIGN_MIDDLE_CARD_IMAGE = "middle-card-aligned-image";
+export declare const ALIGN_TOP_FULL_IMAGE = "top-aligned-full-image";
+export declare const ALIGN_BOTTOM_FULL_IMAGE = "bottom-aligned-full-image";
+export declare const ALIGN_MIDDLE_FULL_IMAGE = "middle-aligned-full-image";
 export declare const MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH = 3;
 export declare const TEXT_COLUMNS: {
     readonly 1: "1";

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

@@ -13,6 +13,12 @@ export const ALIGN_LEFT_BIG_IMAGE = 'left-aligned-big-image';
 export const ALIGN_CARD_CENTER_IMAGE = 'center-card-aligned-image';
 export const ALIGN_CARD_CENTER = 'center-card-aligned';
 export const ALIGN_CARD_LEFT_IMAGE = 'left-card-aligned-image';
+export const ALIGN_TOP_CARD_IMAGE = 'top-card-aligned-image';
+export const ALIGN_BOTTOM_CARD_IMAGE = 'bottom-card-aligned-image';
+export const ALIGN_MIDDLE_CARD_IMAGE = 'middle-card-aligned-image';
+export const ALIGN_TOP_FULL_IMAGE = 'top-aligned-full-image';
+export const ALIGN_BOTTOM_FULL_IMAGE = 'bottom-aligned-full-image';
+export const ALIGN_MIDDLE_FULL_IMAGE = 'middle-aligned-full-image';
 export const MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH = 3;
 export const TEXT_COLUMNS = {
     1: '1',

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

@@ -8,6 +8,7 @@ export declare class NavigationMenuStyles {
     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>;
 };

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';
@@ -15,6 +15,17 @@ export class NavigationMenuStyles {
             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;
@@ -59,7 +70,9 @@ class NavigationStyles {
             borderColor: theme?.primaryColor,
         }, option?.selectedButtonStyle || {});
         this.iconStyle = Object.assign({}, option?.iconStyle || {});
-        this.subNavBackgroundColor = option?.subNavBackgroundColor;
+        this.subNavBackgroundColor =
+            option?.subNavBackgroundColor ??
+                getDefaultSubNavBackgroundColor(this.defaultButtonStyle.color);
         this.isLogoVisible = option?.isLogoVisible || true;
         this.hamburgerMenuStyle = new NavigationMenuStyles(option?.hamburgerMenuStyle || {}, {
             defaultButtonStyle: {
@@ -81,6 +94,19 @@ class NavigationStyles {
             },
             subNavBackgroundColor: theme?.secondaryColor,
         });
+        // Default the hamburger sub nav to the opposite logo colour when the menu
+        // text is colour matched (e.g. logo text colour -> logo background colour).
+        // Runs on every load - so it also reaches sites already stamped at the latest
+        // model version, where the migration is version-gated out (bp-5454). Only an
+        // unset value or the legacy explicit default is upgraded, so a deliberate
+        // non-matched choice (or an already color matched value) is preserved.
+        const colorMatchedHamburgerSubNav = getDefaultSubNavBackgroundColor(this.hamburgerMenuStyle.defaultButtonStyle.color);
+        if (colorMatchedHamburgerSubNav &&
+            (this.hamburgerMenuStyle.subNavBackgroundColor === undefined ||
+                this.hamburgerMenuStyle.subNavBackgroundColor === theme?.secondaryColor)) {
+            this.hamburgerMenuStyle.subNavBackgroundColor =
+                colorMatchedHamburgerSubNav;
+        }
     }
 }
 export class NavigationDesktop extends NavigationStyles {

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

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

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

@@ -0,0 +1,52 @@
+import { STYLE_THEME_KEYS, NAVIGATION_DISPLAY } from '../../constants';
+import { getDefaultSubNavBackgroundColor } from '../../models';
+/**
+ * Migration 16: Default the sub nav background color to "color match on" for
+ * existing sites using the TAB_2 ("nav 2") or any hamburger display style.
+ *
+ * Before the sub nav background colour feature shipped, these styles defaulted
+ * to an explicit colour (e.g. the theme secondary colour for hamburger). This
+ * migration brings existing sites in line with the new default by setting the
+ * sub nav background colour to a logo theme key (color matched), unless the
+ * value is already color matched - in which case the user's choice is kept.
+ */
+const isColorMatched = (color) => !!color && Object.values(STYLE_THEME_KEYS).includes(color);
+// Matches NavigationStyleSettings.getMenuStyles: hamburger styles live on the
+// hamburgerMenuStyle (looser `.includes` to catch any hamburger variant),
+// TAB_2 uses the top-level styles.
+const isHamburger = (displayType) => displayType.includes('hamburger');
+const isColorMatchTargetDisplayType = (displayType) => isHamburger(displayType) || displayType === NAVIGATION_DISPLAY.TAB_2;
+const applyDefaultSubNavColorMatch = (navigation) => {
+    if (!navigation?.displayType) {
+        return;
+    }
+    if (!isColorMatchTargetDisplayType(navigation.displayType)) {
+        return;
+    }
+    let menuStyles;
+    if (isHamburger(navigation.displayType)) {
+        navigation.hamburgerMenuStyle =
+            navigation.hamburgerMenuStyle ?? {};
+        menuStyles = navigation.hamburgerMenuStyle;
+    }
+    else {
+        menuStyles = navigation;
+    }
+    // Respect an existing color matched value so we don't clobber a deliberate choice.
+    if (isColorMatched(menuStyles.subNavBackgroundColor)) {
+        return;
+    }
+    // Only color match the sub nav when the default text color is itself color
+    // matched - in which case it takes the opposite logo color (e.g. logo text
+    // color -> logo background color). Otherwise leave the sub nav as-is.
+    const colorMatchedSubNav = getDefaultSubNavBackgroundColor(menuStyles.defaultButtonStyle?.color);
+    if (colorMatchedSubNav) {
+        menuStyles.subNavBackgroundColor = colorMatchedSubNav;
+    }
+};
+export const migration16 = async (migrationResult) => {
+    const { brandPageModel } = migrationResult;
+    applyDefaultSubNavColorMatch(brandPageModel.pageHeaderDesktop?.navigation);
+    applyDefaultSubNavColorMatch(brandPageModel.pageHeaderMobile?.navigation);
+    return migrationResult;
+};

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

@@ -18,6 +18,7 @@ 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';
+import { migration16 } from './migration/migration-16';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -115,6 +116,11 @@ const MIGRATION_TABLE = [
         migrateFn: migration15,
         description: 'Adding default mediaOverlayStyle to background styles',
     },
+    {
+        version: 16,
+        migrateFn: migration16,
+        description: 'Default sub nav background color to color match on for existing TAB_2 and hamburger navs',
+    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = async (brandPageModel, options) => {

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

@@ -1312,8 +1312,8 @@ declare const _default: import("vue").DefineComponent<{}, {
 }>, {
     viewport: import("@brand-page").ViewportsType;
     isMobileDevice: boolean;
-    containerClientWidth: number | undefined;
     containerClientHeight: number | undefined;
+    containerClientWidth: number | undefined;
     isContentSelected: boolean;
     isHeaderSelected: boolean;
     isFooterSelected: boolean;

package/lib/src/brand-page-maker/convertors/banner-align-display-style.convertor.js

@@ -1,4 +1,4 @@
-import { ALIGN_CENTERED, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, BIG_IMAGE, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, } from '@brand-page/constants';
+import { ALIGN_CENTERED, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, BIG_IMAGE, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, ALIGN_TOP_CARD_IMAGE, ALIGN_BOTTOM_CARD_IMAGE, ALIGN_MIDDLE_CARD_IMAGE, ALIGN_TOP_FULL_IMAGE, ALIGN_BOTTOM_FULL_IMAGE, ALIGN_MIDDLE_FULL_IMAGE, } from '@brand-page/constants';
 export const bannerAlignDisplayStyleConvertor = {
     convertBackToMultipleValues: true,
     convert(value) {
@@ -28,6 +28,54 @@ export const bannerAlignDisplayStyleConvertor = {
                     iconViewBox: '0 0 110 64',
                     dataAttribute: 'data-test-btn-text-only',
                 },
+                {
+                    title: '',
+                    value: ALIGN_TOP_CARD_IMAGE,
+                    isSelected: value === ALIGN_TOP_CARD_IMAGE,
+                    iconName: 'display-style-banner-10',
+                    iconViewBox: '0 0 110 64',
+                    dataAttribute: 'data-test-btn-top-card-image',
+                },
+                {
+                    title: '',
+                    value: ALIGN_BOTTOM_CARD_IMAGE,
+                    isSelected: value === ALIGN_BOTTOM_CARD_IMAGE,
+                    iconName: 'display-style-banner-11',
+                    iconViewBox: '0 0 110 64',
+                    dataAttribute: 'data-test-btn-bottom-card-image',
+                },
+                {
+                    title: '',
+                    value: ALIGN_MIDDLE_CARD_IMAGE,
+                    isSelected: value === ALIGN_MIDDLE_CARD_IMAGE,
+                    iconName: 'display-style-banner-12',
+                    iconViewBox: '0 0 110 64',
+                    dataAttribute: 'data-test-btn-middle-card-image',
+                },
+                {
+                    title: '',
+                    value: ALIGN_TOP_FULL_IMAGE,
+                    isSelected: value === ALIGN_TOP_FULL_IMAGE,
+                    iconName: 'display-style-banner-13',
+                    iconViewBox: '0 0 110 64',
+                    dataAttribute: 'data-test-btn-top-full-image',
+                },
+                {
+                    title: '',
+                    value: ALIGN_BOTTOM_FULL_IMAGE,
+                    isSelected: value === ALIGN_BOTTOM_FULL_IMAGE,
+                    iconName: 'display-style-banner-14',
+                    iconViewBox: '0 0 110 64',
+                    dataAttribute: 'data-test-btn-bottom-full-image',
+                },
+                {
+                    title: '',
+                    value: ALIGN_MIDDLE_FULL_IMAGE,
+                    isSelected: value === ALIGN_MIDDLE_FULL_IMAGE,
+                    iconName: 'display-style-banner-15',
+                    iconViewBox: '0 0 110 64',
+                    dataAttribute: 'data-test-btn-middle-full-image',
+                },
                 {
                     title: '',
                     value: BIG_IMAGE,
@@ -86,7 +134,13 @@ export const bannerAlignDisplayStyleConvertor = {
         if (!selectedOption ||
             selectedOption.value === ALIGN_CENTERED ||
             selectedOption.value === BIG_IMAGE ||
-            selectedOption.value === ALIGN_CARD_CENTER_IMAGE) {
+            selectedOption.value === ALIGN_CARD_CENTER_IMAGE ||
+            selectedOption.value === ALIGN_TOP_CARD_IMAGE ||
+            selectedOption.value === ALIGN_BOTTOM_CARD_IMAGE ||
+            selectedOption.value === ALIGN_MIDDLE_CARD_IMAGE ||
+            selectedOption.value === ALIGN_TOP_FULL_IMAGE ||
+            selectedOption.value === ALIGN_BOTTOM_FULL_IMAGE ||
+            selectedOption.value === ALIGN_MIDDLE_FULL_IMAGE) {
             textAlign = 'center';
         }
         return {