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

package/lib/src/{CreatedOnBrandCrowd-de-de-CE3q_ouk.js → CreatedOnBrandCrowd-de-de-CDAxjKt-.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-CFEFnrUm.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-YmCINEd2.js → CreatedOnBrandCrowd-en-us-DkA_TUjP.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-CFEFnrUm.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-po716FZh.js → CreatedOnBrandCrowd-es-es-BYpg9xvN.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-CFEFnrUm.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-DgSeh7zq.js → CreatedOnBrandCrowd-fr-ca-C8hTipTz.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-CFEFnrUm.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-DgSeh7zq.js → CreatedOnBrandCrowd-fr-fr-C8hTipTz.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-CFEFnrUm.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-BY3I3OVc.js → CreatedOnBrandCrowd-pt-br-G8yyoNtI.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-CFEFnrUm.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-BY3I3OVc.js → CreatedOnBrandCrowd-pt-pt-G8yyoNtI.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-CFEFnrUm.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-VF__9AH9.js → CreatedOnDcom-de-de-DyaUv6JA.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-CFEFnrUm.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-B653tDEJ.js → CreatedOnDcom-en-us-DpGsEh5B.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-CFEFnrUm.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-Cc3g0BMj.js → CreatedOnDcom-es-es-BiOgNsAu.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-CFEFnrUm.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-NzxsUZqx.js → CreatedOnDcom-fr-ca-tg_w97_1.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-CFEFnrUm.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-DFuj0umw.js → CreatedOnDcom-fr-fr-CwqXK1VU.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-CFEFnrUm.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-VxpFX1Jd.js → CreatedOnDcom-pt-br-B4QG_xx7.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-CFEFnrUm.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-CG2qMIlw.js → CreatedOnDcom-pt-pt-CD2m6NMT.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-CFEFnrUm.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/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/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.util.js

@@ -16,6 +16,7 @@ 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';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -103,6 +104,11 @@ 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',
+    },
 ];
 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

@@ -225,7 +225,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/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 unescapeContentText: (text: string) => string;
+export declare const encodeContentText: (text: string | undefined) => string | undefined;
+export declare const decodeHtmlEntities: (text: string) => string;

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

@@ -11,5 +11,25 @@ export const escapeContentText = (text) => {
         .replace(/(\r\n|\r|\n)/g, ESCAPED_NEWLINE_CHARACTER);
 };
 export const unescapeContentText = (text) => {
-    return text.replace(new RegExp(`${ESCAPED_NEWLINE_CHARACTER}`, 'g'), '\n');
+    return text
+        .replace(new RegExp(`${ESCAPED_NEWLINE_CHARACTER}`, 'g'), '\n')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&amp;/g, '&');
+};
+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);
+};
+export const decodeHtmlEntities = (text) => {
+    return text
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&amp;/g, '&');
 };

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/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,