@designcrowd/library.brand-page 6.1.8 → 6.1.9-ast-header-opacity

package/lib/src/{CreatedOnBrandCrowd-de-de-s5PgrS4k.js → CreatedOnBrandCrowd-de-de-Cg44FPyh.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-DialvDTn.js → CreatedOnBrandCrowd-en-us-C0rLC1ad.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-CkWPaELu.js → CreatedOnBrandCrowd-es-es-BjsA9eA2.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-DKsU-7B3.js → CreatedOnBrandCrowd-fr-ca-YzDr9Lt1.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-DKsU-7B3.js → CreatedOnBrandCrowd-fr-fr-YzDr9Lt1.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-_nFRiTF7.js → CreatedOnBrandCrowd-pt-br-CQWmIiqQ.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-_nFRiTF7.js → CreatedOnBrandCrowd-pt-pt-CQWmIiqQ.js}

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

package/lib/src/{CreatedOnDcom-de-de-E3RR9E-W.js → CreatedOnDcom-de-de-D5WpKTnT.js}

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

package/lib/src/{CreatedOnDcom-en-us-BaKpfZyU.js → CreatedOnDcom-en-us-D7upf-Ic.js}

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

package/lib/src/{CreatedOnDcom-es-es-DAKlDkym.js → CreatedOnDcom-es-es-6gWXmKZh.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-COcb6S6R.js → CreatedOnDcom-fr-ca-B8UylQeT.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-kIujhHbs.js → CreatedOnDcom-fr-fr-BvitcVtY.js}

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

package/lib/src/{CreatedOnDcom-pt-br-q7aggQB7.js → CreatedOnDcom-pt-br-CI22d2m2.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-CWA39oCo.js → CreatedOnDcom-pt-pt-DQOGxwrk.js}

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

package/lib/src/brand-page/components/payment/support-me/SupportMe.mixin.d.ts

@@ -22,6 +22,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         paddingBottom: string;
     };
     isCustomAmountFieldVisible(): boolean;
+    isCustomAmountValid(): boolean;
     isCustomerMessageFieldVisible(): boolean;
     isCustomerMessageValid(): boolean;
     paymentRequestDetails(): PaymentRequestDetails;

package/lib/src/brand-page/components/payment/support-me/SupportMe.mixin.js

@@ -4,6 +4,7 @@ import { isPaymentAmountValid, contentPaddingStyle as toContentPaddingStyle, } f
 import { DEFAULT_CURRENCY_SYMBOL, DEFAULT_CURRENCY_CODE, } from '../../../constants';
 import { paymentTr } from '@src/composables/useTranslate';
 const MAX_CUSTOM_MESSAGE_CHARS = 500;
+const MINIMUM_CUSTOM_AMOUNT = 0.1;
 export default defineComponent({
     props: {
         context: {
@@ -30,6 +31,16 @@ export default defineComponent({
         isCustomAmountFieldVisible() {
             return this.viewModel.supportMeConfig.paymentOptions.some((o) => o.name === SUPPORT_ME_CUSTOM_PRODUCT_NAME);
         },
+        // Drives the continue button: when the custom-amount option is the
+        // selected one, require a valid amount (>= MINIMUM_CUSTOM_AMOUNT) so
+        // empty/zero/negative inputs disable the button.
+        isCustomAmountValid() {
+            const customOption = this.viewModel.supportMeConfig.paymentOptions.find((o) => o.name === SUPPORT_ME_CUSTOM_PRODUCT_NAME);
+            const isCustomAmountSelected = !!customOption &&
+                this.selectedPaymentOptionIds.includes(customOption.id);
+            return (!isCustomAmountSelected ||
+                parseFloat(this.customAmount) >= MINIMUM_CUSTOM_AMOUNT);
+        },
         isCustomerMessageFieldVisible() {
             return this.viewModel.supportMeConfig.isCustomerMessageEnabled;
         },
@@ -41,7 +52,8 @@ export default defineComponent({
         paymentRequestDetails() {
             return {
                 isRequestValid: this.isCustomerMessageValid &&
-                    this.selectedPaymentOptionIds.length > 0,
+                    this.selectedPaymentOptionIds.length > 0 &&
+                    this.isCustomAmountValid,
                 customerMessage: this.customerMessage,
                 selectedPaymentOptionIds: this.selectedPaymentOptionIds,
                 customAmount: this.customAmount

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

@@ -500,6 +500,8 @@ export declare abstract class AbstractPageHeaderStyles {
     logoTemplateImage: LogoTemplateImageModel | undefined;
     logoImageBase64Url?: string;
     backgroundStyle: BrandPageCssStyle;
+    /** 0-100. Alpha applied to backgroundStyle.backgroundColor at render time only. */
+    backgroundOpacity: number;
     style: BrandPageCssStyle;
     viewport: ViewportsType;
     protected constructor(options?: AbstractPageHeaderStylesType);

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

@@ -209,6 +209,8 @@ export class AbstractPageHeaderStyles {
     logoTemplateImage;
     logoImageBase64Url;
     backgroundStyle;
+    /** 0-100. Alpha applied to backgroundStyle.backgroundColor at render time only. */
+    backgroundOpacity;
     style;
     viewport;
     constructor(options = {}) {
@@ -238,6 +240,7 @@ export class AbstractPageHeaderStyles {
         this.logoVariation = options.logoVariation || 0;
         this.style = options.style || {};
         this.backgroundStyle = options.backgroundStyle || {};
+        this.backgroundOpacity = options.backgroundOpacity ?? 100;
     }
 }
 export class PageHeaderDesktop extends AbstractPageHeaderStyles {

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

@@ -5,6 +5,7 @@ export declare const calculateLuminanceRatio: (color1: string, color2: string) =
 export declare const isHexTransparent: (hex: string) => boolean;
 export declare const removeAlphaFromHex: (hex: string) => string;
 export declare const addTransparentAlphaChannelToHex: (hex: string) => string;
+export declare const isBackgroundTransparent: (color: string | undefined) => boolean;
 export declare const addOpacityToHex: (hex: string, opacity: number) => string;
 export declare const setRgbAlpha: (rgb: string, alpha: number) => string;
 /**

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

@@ -34,6 +34,13 @@ export const removeAlphaFromHex = (hex) => {
 export const addTransparentAlphaChannelToHex = (hex) => {
     return `${removeAlphaFromHex(hex)}00`;
 };
+export const isBackgroundTransparent = (color) => {
+    if (!color || color.trim() === '') {
+        return true;
+    }
+    const trimmed = color.trim();
+    return trimmed === 'transparent' || isHexTransparent(trimmed);
+};
 export const addOpacityToHex = (hex, opacity) => {
     return `${removeAlphaFromHex(hex)}${Math.round(opacity * 255).toString(16)}`;
 };

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

@@ -2,7 +2,7 @@ import { reactive } from 'vue';
 import { assertUnreachable } from '../../helpers/ts.helper';
 import { ButtonStyles, VIEWPORTS } from '../models';
 import { NavigationMobile, NavigationDesktop, BRAND_PAGE_TYPES, BUTTON_LINK_TYPE, NavigationMenuStyles, } from '../models';
-import { isHexTransparent } from './color.util';
+import { isBackgroundTransparent, isHexTransparent, setRgbAlpha, } from './color.util';
 import { CONTENT_TEXT_STYLE_PROPERTY_KEYS, FALLBACK_DEFAULT_LINK_COLOR, FONT_SIZE_BODY, LINE_HEIGHT_BODY, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH, FONT_FAMILY_CONFIGS, isGoogleType, LINE_HEIGHT_HEADINGS, FONT_SIZE_HEADINGS, DEFAULT_TEXT_ALIGN, IMAGE_RESOLUTION_PRESETS, BIG_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, } from '../constants';
 import uniq from 'lodash/uniq';
 import { generateGoogleFontUrl } from './font-loader.util';
@@ -698,7 +698,25 @@ export const mapToPageHeaderViewModel = (pageHeader, pageStyles, pages, useOldLo
                 hamburgerMenuStyle,
             }),
         style: pageHeader.style,
-        backgroundStyle: pageHeader.backgroundStyle,
+        backgroundStyle: getHeaderBackgroundStyleWithOpacity(pageHeader),
+        backgroundOpacity: pageHeader.backgroundOpacity,
+    };
+};
+// Composites backgroundOpacity into backgroundColor's alpha channel so the
+// header container's own paint is translucent without affecting children
+// (unlike CSS `opacity`, which would fade the logo/nav/text too).
+const getHeaderBackgroundStyleWithOpacity = (pageHeader) => {
+    const { backgroundStyle } = pageHeader;
+    const backgroundColor = backgroundStyle.backgroundColor;
+    const backgroundOpacity = pageHeader.backgroundOpacity ?? 100;
+    if (backgroundOpacity >= 100 ||
+        !backgroundColor ||
+        isBackgroundTransparent(backgroundColor)) {
+        return backgroundStyle;
+    }
+    return {
+        ...backgroundStyle,
+        backgroundColor: setRgbAlpha(backgroundColor, backgroundOpacity / 100),
     };
 };
 export const mapToPageFooterViewModel = (pageFooter, pageStyles, useOldLogoRenderSize = false) => {

package/lib/src/brand-page-maker/stores/ai-checkpoint/ai-checkpoint-store.d.ts

@@ -1745,6 +1745,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     width?: string | undefined;
                     wordBreak?: string | undefined;
                 };
+                backgroundOpacity: number;
                 style: {
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
@@ -3037,6 +3038,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     width?: string | undefined;
                     wordBreak?: string | undefined;
                 };
+                backgroundOpacity: number;
                 style: {
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
@@ -4329,6 +4331,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     width?: string | undefined;
                     wordBreak?: string | undefined;
                 };
+                backgroundOpacity: number;
                 style: {
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
@@ -6856,6 +6859,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     width?: string | undefined;
                     wordBreak?: string | undefined;
                 };
+                backgroundOpacity: number;
                 style: {
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
@@ -8148,6 +8152,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     width?: string | undefined;
                     wordBreak?: string | undefined;
                 };
+                backgroundOpacity: number;
                 style: {
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
@@ -9440,6 +9445,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     width?: string | undefined;
                     wordBreak?: string | undefined;
                 };
+                backgroundOpacity: number;
                 style: {
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
@@ -11973,6 +11979,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     width?: string | undefined;
                     wordBreak?: string | undefined;
                 };
+                backgroundOpacity: number;
                 style: {
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
@@ -13265,6 +13272,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     width?: string | undefined;
                     wordBreak?: string | undefined;
                 };
+                backgroundOpacity: number;
                 style: {
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
@@ -14557,6 +14565,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     width?: string | undefined;
                     wordBreak?: string | undefined;
                 };
+                backgroundOpacity: number;
                 style: {
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
@@ -17084,6 +17093,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     width?: string | undefined;
                     wordBreak?: string | undefined;
                 };
+                backgroundOpacity: number;
                 style: {
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
@@ -18376,6 +18386,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     width?: string | undefined;
                     wordBreak?: string | undefined;
                 };
+                backgroundOpacity: number;
                 style: {
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
@@ -19668,6 +19679,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     width?: string | undefined;
                     wordBreak?: string | undefined;
                 };
+                backgroundOpacity: number;
                 style: {
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
@@ -22201,6 +22213,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     width?: string | undefined;
                     wordBreak?: string | undefined;
                 };
+                backgroundOpacity: number;
                 style: {
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
@@ -23493,6 +23506,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     width?: string | undefined;
                     wordBreak?: string | undefined;
                 };
+                backgroundOpacity: number;
                 style: {
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
@@ -24785,6 +24799,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     width?: string | undefined;
                     wordBreak?: string | undefined;
                 };
+                backgroundOpacity: number;
                 style: {
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
@@ -27312,6 +27327,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     width?: string | undefined;
                     wordBreak?: string | undefined;
                 };
+                backgroundOpacity: number;
                 style: {
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
@@ -28604,6 +28620,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     width?: string | undefined;
                     wordBreak?: string | undefined;
                 };
+                backgroundOpacity: number;
                 style: {
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
@@ -29896,6 +29913,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     width?: string | undefined;
                     wordBreak?: string | undefined;
                 };
+                backgroundOpacity: number;
                 style: {
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;