@designcrowd/library.brand-page 6.1.16 → 6.1.17-ast-header-button

package/lib/src/{CreatedOnBrandCrowd-de-de-CmNhDMIf.js → CreatedOnBrandCrowd-de-de-Cwq9enJs.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-DgplxxWa.js → CreatedOnBrandCrowd-en-us-ILK04gFj.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-DFdhFOa1.js → CreatedOnBrandCrowd-es-es-CbjxLxtu.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-DjLCWBLB.js → CreatedOnBrandCrowd-fr-ca-BwBDiK9z.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-DjLCWBLB.js → CreatedOnBrandCrowd-fr-fr-BwBDiK9z.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-CI2XD0OS.js → CreatedOnBrandCrowd-pt-br-DvhJROpG.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-CI2XD0OS.js → CreatedOnBrandCrowd-pt-pt-DvhJROpG.js}

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

package/lib/src/{CreatedOnDcom-de-de-CkLkBztx.js → CreatedOnDcom-de-de-BK9imWOh.js}

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

package/lib/src/{CreatedOnDcom-en-us-frnxBJJv.js → CreatedOnDcom-en-us-CyH-_qz1.js}

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

package/lib/src/{CreatedOnDcom-es-es-CrqgiERj.js → CreatedOnDcom-es-es-Dh51qYEA.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-CPoEcusj.js → CreatedOnDcom-fr-ca-BArRxwWX.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-BqrRH3dV.js → CreatedOnDcom-fr-fr-CdglI-ZB.js}

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

package/lib/src/{CreatedOnDcom-pt-br-CpbVi3Sw.js → CreatedOnDcom-pt-br-DCehns-G.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-s0XZ3c7y.js → CreatedOnDcom-pt-pt-B8hl-oew.js}

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

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

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import type { BrandPageContext, NavigationDesktop, NavigationMobile } from '../../../models';
-import type { NavItemViewModel } from '../../../view-models';
+import type { ButtonViewModel, NavItemViewModel } from '../../../view-models';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {
         type: PropType<BrandPageContext>;
@@ -18,6 +18,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<NavigationDesktop | NavigationMobile>;
         required: true;
     };
+    headerButtonViewModel: {
+        type: PropType<ButtonViewModel>;
+        required: false;
+        default: undefined;
+    };
+    isMobile: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
 }>, {}, {
     expandedItems: Record<string, boolean>;
 }, {
@@ -27,12 +37,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     selectedButtonStyle(): BrandPageCssStyle;
     defaultWrapperStyle(): BrandPageCssStyle;
     selectedWrapperStyle(): BrandPageCssStyle;
+    showHeaderButton(): boolean;
     routes(): any[];
 }, {
     filterHiddenNavItems(navItems: NavItemViewModel[]): NavItemViewModel[];
     isCurrentPage(navItem: NavItemViewModel): boolean;
     getSubNavItemStyle(navItem: NavItemViewModel): BrandPageCssStyle;
     closeSideMenu(): void;
+    onDrawerCtaClick(event: MouseEvent): void;
     toggleExpanded(pageId: string): void;
     isExpanded(pageId: string): boolean;
     expandSubPageIfCurrentPage(): void;
@@ -53,7 +65,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<NavigationDesktop | NavigationMobile>;
         required: true;
     };
+    headerButtonViewModel: {
+        type: PropType<ButtonViewModel>;
+        required: false;
+        default: undefined;
+    };
+    isMobile: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onClose-side-menu"?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {
+    isMobile: boolean;
+    headerButtonViewModel: ButtonViewModel;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -18,6 +18,18 @@ export default defineComponent({
             type: Object,
             required: true,
         },
+        headerButtonViewModel: {
+            type: Object,
+            required: false,
+            default: undefined,
+        },
+        // The desktop drawer suppresses the header CTA — the desktop header row already
+        // renders it. Only the mobile drawer carries the button.
+        isMobile: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
     },
     emits: ['close-side-menu'],
     data() {
@@ -50,6 +62,9 @@ export default defineComponent({
             const { fontSize: _fontSize, lineHeight: _lineHeight, letterSpacing: _letterSpacing, ...rest } = this.selectedButtonStyle;
             return rest;
         },
+        showHeaderButton() {
+            return this.isMobile && Boolean(this.headerButtonViewModel);
+        },
         routes() {
             return this.visibleNavItems.map((navItem, _i) => {
                 return {
@@ -85,6 +100,17 @@ export default defineComponent({
         closeSideMenu() {
             this.$emit('close-side-menu');
         },
+        // In the maker preview the CTA is inert (BP-5852 decision): capture-phase so the
+        // prevent lands before the inner anchor/router-link fires. On the published site
+        // the click follows the link and the drawer closes behind it.
+        onDrawerCtaClick(event) {
+            if (this.context.isPreview) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            this.closeSideMenu();
+        },
         toggleExpanded(pageId) {
             const isCurrentlyExpanded = this.expandedItems[pageId];
             this.expandedItems = {};

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

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import type { BrandPageContext } from '@brand-page/models';
-import type { PageHeaderViewModel } from '@brand-page/view-models';
+import type { ButtonViewModel, PageHeaderViewModel } from '@brand-page/view-models';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     navId: {
         type: StringConstructor;
@@ -23,9 +23,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     LOGO_SLIDER_DESKTOP_MAX: number;
 }, {
     containerCss(): BrandPageCssStyle;
+    headerButtonViewModel(): ButtonViewModel | undefined;
     showNav(): boolean;
 }, {
     onHeaderContainerClick(): void;
+    onHeaderCtaClick(event: MouseEvent): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "header-container-click"[], "header-container-click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     navId: {
         type: StringConstructor;

package/lib/src/brand-page/components/page-header/PageHeader.mixin.js

@@ -33,6 +33,9 @@ export default defineComponent({
                 padding: '1.5rem 0', // var(--page-padding) 0
             };
         },
+        headerButtonViewModel() {
+            return this.viewModel.headerButtonViewModel;
+        },
         showNav() {
             const visibleNavItems = this.context.nav.navItems.filter((item) => !item.isHidden);
             return (visibleNavItems.length > 1 ||
@@ -45,5 +48,14 @@ export default defineComponent({
         onHeaderContainerClick() {
             this.$emit('header-container-click');
         },
+        // In the maker preview the CTA is inert (BP-5852 decision): capture-phase so the
+        // prevent lands before the inner anchor/router-link fires, and the stop keeps the
+        // click from selecting the header panel. On the published site it does nothing.
+        onHeaderCtaClick(event) {
+            if (this.context.isPreview) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        },
     },
 });

package/lib/src/brand-page/models/index.d.ts

@@ -501,6 +501,16 @@ export declare class NavModel {
     routes: NavRoute[];
     constructor(options?: Partial<NavModel>);
 }
+export interface HeaderButton {
+    isVisible: boolean;
+    text: string;
+    buttonLinkType: ButtonLinkType;
+    url?: string;
+    buttonPageId?: string;
+    buttonTextStyle?: TextStyleDeclaration;
+    fillColor?: string;
+    borderColor?: string;
+}
 type AbstractPageHeaderStylesType = Partial<AbstractPageHeaderStyles>;
 export declare abstract class AbstractPageHeaderStyles {
     displayStyle: HeaderDisplayStyle;
@@ -525,6 +535,8 @@ export declare abstract class AbstractPageHeaderStyles {
     backgroundStyle: BackgroundColorStyle;
     style: BrandPageCssStyle;
     viewport: ViewportsType;
+    /** Absent means no header call-to-action button — never seed a default. */
+    headerButton?: HeaderButton;
     protected constructor(options?: AbstractPageHeaderStylesType);
 }
 export declare class PageHeaderDesktop extends AbstractPageHeaderStyles {

package/lib/src/brand-page/models/index.js

@@ -227,6 +227,8 @@ export class AbstractPageHeaderStyles {
     backgroundStyle;
     style;
     viewport;
+    /** Absent means no header call-to-action button — never seed a default. */
+    headerButton;
     constructor(options = {}) {
         if (typeof options.viewport === 'undefined') {
             throw new Error('"viewport" is required');
@@ -257,6 +259,7 @@ export class AbstractPageHeaderStyles {
             ...(options.backgroundStyle || {}),
             backgroundOpacity: options.backgroundStyle?.backgroundOpacity ?? 100,
         };
+        this.headerButton = options.headerButton;
     }
 }
 export class PageHeaderDesktop extends AbstractPageHeaderStyles {

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

@@ -5,6 +5,11 @@ import type { ButtonStyles } from '../models';
  * @returns The calculated box shadow CSS value
  */
 export declare const getBoxShadowValue: (buttonStyles: ButtonStyles) => string;
+export declare const BUTTON_VARIANTS: {
+    readonly section: "section";
+    readonly header: "header";
+};
+export type ButtonVariant = (typeof BUTTON_VARIANTS)[keyof typeof BUTTON_VARIANTS];
 export declare const BUTTON_STYLE_BRUSHSTROKE = "BUTTON_STYLE_19";
 export declare const BUTTON_STYLE_ARROW = "BUTTON_STYLE_20";
 export declare const BUTTON_STYLE_PAPER = "BUTTON_STYLE_21";

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

@@ -32,6 +32,10 @@ export const getBoxShadowValue = (buttonStyles) => {
     }
     return boxShadow;
 };
+export const BUTTON_VARIANTS = {
+    section: 'section',
+    header: 'header',
+};
 // The "decorative" button styles — brushstroke / arrow / torn-paper — whose visual
 // is drawn by ButtonStyleWrapper rather than plain CSS. Their banner-like SVG
 // decoration needs the button to be reasonably wide to render legibly, so narrow

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

@@ -13,6 +13,7 @@ export declare const mapToImagesSectionViewModel: (content: ImagesSectionContent
 export declare const mapToBookingSectionViewModel: (content: BookingSectionContent, styles: PageStyles) => BookingSectionViewModel;
 export declare const mapToNavViewModel: (nav: NavModel, brandPageSlug?: string, isCustomDomain?: boolean) => NavViewModel;
 export declare const mapToPageStyleViewModel: (pageStyles: PageStyles, options: ViewModelMappingOptions) => PageStylesViewModel;
+export declare const HEADER_BUTTON_FALLBACK_TEXT = "Contact Us";
 export declare const mapToPageHeaderViewModel: (pageHeader: PageHeaderDesktop | PageHeaderMobile, pageStyles: PageStyles, pages: PageViewModel[], useOldLogoRenderSize?: boolean) => PageHeaderViewModel;
 export declare const mapToPageFooterViewModel: (pageFooter: PageFooterDesktop | PageFooterMobile, pageStyles: PageStyles, useOldLogoRenderSize?: boolean) => PageFooterViewModel;
 export declare const mapToViewModel: (styles: PageStyles, brandPageType: BrandPageType, options: ViewModelMappingOptions) => (content: Content) => ContentViewModel | undefined;

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

@@ -1,6 +1,6 @@
 import { reactive } from 'vue';
 import { assertUnreachable } from '../../helpers/ts.helper';
-import { ButtonStyles, VIEWPORTS } from '../models';
+import { ButtonStyles, TEXT_STYLE_TYPES, VIEWPORTS } from '../models';
 import { NavigationMobile, NavigationDesktop, BRAND_PAGE_TYPES, BUTTON_LINK_TYPE, NavigationMenuStyles, } from '../models';
 import { backgroundColorFromStyle, isTransparentColour, mutedTextForBackground, withColorOpacity, } from './color.util';
 import { resolveColorReference } from './color-palette.util';
@@ -691,6 +691,55 @@ export const mapToPageStyleViewModel = (pageStyles, options) => {
         colors: pageStyles.colors ?? [],
     };
 };
+// Must stay in step with the maker's `pageSettingsSection.buttonLabelPlaceholder`
+// (page-settings-section.json) — the placeholder shows what an empty label publishes as.
+export const HEADER_BUTTON_FALLBACK_TEXT = 'Contact Us';
+/**
+ * `Button.vue` reads the link kind off `role` for every non-section role, so the header
+ * CTA's authored `buttonLinkType` is expressed as the role (+ `clickActionField` for a
+ * page link) that component already resolves — no new branch in the button itself.
+ */
+const HEADER_BUTTON_LINK_ROLES = {
+    [BUTTON_LINK_TYPE.url]: 'general-link',
+    [BUTTON_LINK_TYPE.page]: 'general-link',
+    [BUTTON_LINK_TYPE.mailTo]: 'email',
+    [BUTTON_LINK_TYPE.tel]: 'phone',
+};
+const mapToHeaderButtonViewModel = (headerButton, styles) => {
+    if (!headerButton?.isVisible) {
+        return undefined;
+    }
+    const titleStyle = headerButton.buttonTextStyle ?? {
+        textStyleType: TEXT_STYLE_TYPES.buttons,
+    };
+    const viewModel = mapToButtonViewModel({
+        id: 'page-header-button',
+        type: HEADER_BUTTON_LINK_ROLES[headerButton.buttonLinkType],
+        iconUrl: '',
+        modalImageUrl: '',
+        colorReplacements: [],
+        title: headerButton.text?.trim() || HEADER_BUTTON_FALLBACK_TEXT,
+        titleStyle,
+        url: headerButton.url ?? '',
+        page: headerButton.buttonPageId ?? '',
+        clickActionField: headerButton.buttonLinkType === BUTTON_LINK_TYPE.page ? 'page' : 'url',
+    }, styles, { titleStyle });
+    return {
+        ...viewModel,
+        styles: {
+            ...viewModel.styles,
+            style: {
+                ...viewModel.styles.style,
+                ...(headerButton.fillColor
+                    ? { backgroundColor: headerButton.fillColor }
+                    : {}),
+                ...(headerButton.borderColor
+                    ? { borderColor: headerButton.borderColor }
+                    : {}),
+            },
+        },
+    };
+};
 export const mapToPageHeaderViewModel = (pageHeader, pageStyles, pages, useOldLogoRenderSize = false) => {
     const viewport = pageHeader.viewport;
     const logoContent = {
@@ -738,6 +787,7 @@ export const mapToPageHeaderViewModel = (pageHeader, pageStyles, pages, useOldLo
             }),
         style: pageHeader.style,
         backgroundStyle: getHeaderBackgroundStyleWithOpacity(pageHeader),
+        headerButtonViewModel: mapToHeaderButtonViewModel(pageHeader.headerButton, pageStyles),
     };
 };
 // Folds backgroundOpacity into backgroundColor's alpha so only the container's paint fades, not its children.

package/lib/src/brand-page/view-models.d.ts

@@ -132,10 +132,12 @@ export interface BookingSectionViewModel extends ContentViewModel, Omit<BookingS
     buttonViewModel: ButtonViewModel;
     isFullWidth: boolean;
 }
-export interface PageHeaderViewModel extends Omit<PageHeaderDesktop | PageHeaderMobile, 'logoImage' | 'logoImageStyle' | 'isLogoOptional' | 'viewport' | 'isLogoVisible' | 'logoTemplateImage' | 'logoImageHeight' | 'logoImageWidth' | 'backgroundStyle'> {
+export interface PageHeaderViewModel extends Omit<PageHeaderDesktop | PageHeaderMobile, 'logoImage' | 'logoImageStyle' | 'isLogoOptional' | 'viewport' | 'isLogoVisible' | 'logoTemplateImage' | 'logoImageHeight' | 'logoImageWidth' | 'headerButton' | 'backgroundStyle'> {
     logo: LogoViewModel;
     pages: PageViewModel[];
     backgroundStyle: BrandPageCssStyle;
+    /** Absent unless the header call-to-action button is configured AND visible. */
+    headerButtonViewModel?: ButtonViewModel;
 }
 export interface PageFooterViewModel extends Omit<PageFooterDesktop | PageFooterMobile, 'logoImage' | 'logoImageStyle' | 'isLogoOptional' | 'viewport' | 'isLogoVisible' | 'logoTemplateImage' | 'logoImageHeight' | 'logoImageWidth'> {
     logo: LogoViewModel;

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

@@ -1127,7 +1127,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             sectionName: import("@shared/page-settings/store").PageSettingsSection;
             propName: keyof import("@shared/page-settings/store").PageSettingsStateSectionStyles;
             index?: number;
-            value: string | boolean | import("@brand-page").LinksItem[] | BrandPageCssStyle | Partial<import("@brand-page").ImageGalleryItem> | number | null | undefined;
+            value: string | boolean | import("@brand-page").LinksItem[] | BrandPageCssStyle | Partial<import("@brand-page").ImageGalleryItem> | import("@brand-page").HeaderButton | number | null | undefined;
             merge?: boolean;
             viewport: ViewportsType;
         }): void;

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

@@ -1110,7 +1110,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             sectionName: import("@shared/page-settings/store").PageSettingsSection;
             propName: keyof import("@shared/page-settings/store").PageSettingsStateSectionStyles;
             index?: number;
-            value: string | boolean | import("@brand-page").LinksItem[] | BrandPageCssStyle | Partial<import("@brand-page").ImageGalleryItem> | number | null | undefined;
+            value: string | boolean | import("@brand-page").LinksItem[] | BrandPageCssStyle | Partial<import("@brand-page").ImageGalleryItem> | import("@brand-page").HeaderButton | number | null | undefined;
             merge?: boolean;
             viewport: import("@brand-page").ViewportsType;
         }): void;