@designcrowd/library.brand-page 5.14.11 → 5.14.12

package/lib/src/{CreatedOnBrandCrowd-de-de-BJ3Foxao.js → CreatedOnBrandCrowd-de-de-C5tl1NwD.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-BjI_fxWY.js → CreatedOnBrandCrowd-en-us-C7J2vGwU.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-Dt8190BK.js → CreatedOnBrandCrowd-es-es-IREekVx2.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-Ck6zCiIn.js → CreatedOnBrandCrowd-fr-fr-EJkAJ0iH.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-CaNvmzQJ.js → CreatedOnBrandCrowd-pt-pt-mKBH6Ary.js}

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

package/lib/src/{CreatedOnDcom-de-de-DMEecXw8.js → CreatedOnDcom-de-de-CWWw2LBb.js}

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

package/lib/src/{CreatedOnDcom-en-us-BZIPLMxJ.js → CreatedOnDcom-en-us-Db6zzKtc.js}

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

package/lib/src/{CreatedOnDcom-es-es-D6ey1TnI.js → CreatedOnDcom-es-es-CsMu_iBW.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-NaeiDsv-.js → CreatedOnDcom-fr-fr-oJRc8eop.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-BwEUUii2.js → CreatedOnDcom-pt-pt-CQ_otC6l.js}

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

package/lib/src/brand-page/components/button/Button.mixin.js

@@ -110,7 +110,8 @@ export default defineComponent({
         },
         isValidUrl() {
             if (this.viewModel.role === 'banner-section' ||
-                this.viewModel.role === 'booking-section') {
+                this.viewModel.role === 'booking-section' ||
+                this.viewModel.role === 'images-section') {
                 switch (this.viewModel.buttonLinkType) {
                     case 'mailTo':
                         return isEmail(this.viewModel.url);
@@ -131,7 +132,8 @@ export default defineComponent({
         },
         url() {
             if (this.viewModel.role === 'banner-section' ||
-                this.viewModel.role === 'booking-section') {
+                this.viewModel.role === 'booking-section' ||
+                this.viewModel.role === 'images-section') {
                 switch (this.viewModel.buttonLinkType) {
                     case 'mailTo':
                         return `mailto:${this.viewModel.url}`;

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

@@ -114,7 +114,7 @@ export interface ImageItem {
     mediaType?: MediaType;
     colorReplacements?: ColorReplacement[];
     size?: string;
-    imageLink: string;
+    imageLink: string | false;
     imageUrlOverride?: string;
     imageTitleOverride?: string;
 }
@@ -280,8 +280,13 @@ export type MediaType = keyof typeof MEDIA_TYPES;
 export interface TextMediaItem extends ImageItem {
     title: string;
     paragraph: string;
-    imageLink: string;
     itemsId: number;
+    buttonText?: string | false;
+    pageSlug?: string;
+    buttonLinkType?: ButtonLinkType;
+    url?: string;
+    email?: string;
+    tel?: string;
     titleOverride?: string;
     paragraphOverride?: string;
 }
@@ -326,6 +331,7 @@ export interface ImagesSectionContent extends Content, MediaSection {
     aspectRatio: AspectRatio;
     areImagesFullWidth: boolean;
     cardStyle: BrandPageCssStyle;
+    enablePopup: boolean;
 }
 export interface MediaSection extends Content {
     title: string;
@@ -337,6 +343,7 @@ export interface MediaSection extends Content {
     headingStyle: TextStyleDeclaration;
     paragraphStyle: TextStyleDeclaration;
     backgroundStyle: BrandPageCssStyle;
+    buttonTextStyle?: TextStyleDeclaration;
 }
 export interface ColorReplacement {
     attribute: string;

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

@@ -0,0 +1,2 @@
+import { type BrandPageModel } from '../..';
+export declare const migration06: (brandPageModel: BrandPageModel) => BrandPageModel;

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

@@ -0,0 +1,48 @@
+import {} from '../..';
+import { isImagesContent } from '../model.util';
+export const migration06 = (brandPageModel) => {
+    brandPageModel.pages.forEach((page) => {
+        page.contents.forEach((content) => {
+            // Migration for ImagesSection content
+            if (isImagesContent(content)) {
+                const imagesSectionContent = content;
+                // Add content-level buttonTextStyle if it doesn't exist
+                if (imagesSectionContent.buttonTextStyle === undefined) {
+                    imagesSectionContent.buttonTextStyle = {};
+                }
+                // Add content-level buttonTextStyle if it doesn't exist
+                if (imagesSectionContent.enablePopup === undefined) {
+                    imagesSectionContent.enablePopup = true;
+                }
+                imagesSectionContent.items?.forEach((item) => {
+                    const mediaItem = item;
+                    // Add buttonText if it doesn't exist
+                    if (mediaItem.buttonText === undefined) {
+                        mediaItem.buttonText = false;
+                    }
+                    // Remove item-level buttonTextStyle as it's now at content level
+                    if (mediaItem.buttonTextStyle !== undefined) {
+                        delete mediaItem.buttonTextStyle;
+                    }
+                    // Add button link properties if they don't exist
+                    if (mediaItem.buttonLinkType === undefined) {
+                        mediaItem.buttonLinkType = 'url';
+                    }
+                    if (mediaItem.url === undefined) {
+                        mediaItem.url = '';
+                    }
+                    if (mediaItem.email === undefined) {
+                        mediaItem.email = '';
+                    }
+                    if (mediaItem.tel === undefined) {
+                        mediaItem.tel = '';
+                    }
+                    if (mediaItem.pageSlug === undefined) {
+                        mediaItem.pageSlug = '';
+                    }
+                });
+            }
+        });
+    });
+    return brandPageModel;
+};

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

@@ -7,6 +7,7 @@ import { migration04 } from './migration/migration-04';
 import { migration05 } from './migration/migration-05';
 import { migration05_1 } from './migration/migration-05_1';
 import { migration05_2 } from './migration/migration-05_2';
+import { migration06 } from './migration/migration-06';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -49,6 +50,11 @@ const MIGRATION_TABLE = [
         migrateFn: migration05_2,
         description: 'Migrating twitter content to x content',
     },
+    {
+        version: 6,
+        migrateFn: migration06,
+        description: 'Migrating new fields for images section',
+    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = (brandPageModel, options) => {

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

@@ -201,10 +201,23 @@ const mapToButtonViewModel = (content, styles, options) => {
         },
         selectedButtonStyleId: styles.buttonStyles.selectedButtonStyleId,
     };
+    // Extract only text-related properties from titleStyle, excluding button styling properties
+    const textOnlyProperties = {
+        color: options.titleStyle.color,
+        fontFamily: options.titleStyle.fontFamily,
+        fontSize: options.titleStyle.fontSize,
+        fontWeight: options.titleStyle.fontWeight,
+        textAlign: options.titleStyle.textAlign,
+        letterSpacing: options.titleStyle.letterSpacing,
+        lineHeight: options.titleStyle.lineHeight || LINE_HEIGHT_HEADINGS,
+        textStyleType: options.titleStyle.textStyleType,
+        applyAutoScale: options.titleStyle.applyAutoScale,
+        textDecoration: options.titleStyle.textDecoration,
+        fontStyle: options.titleStyle.fontStyle,
+    };
     /* For text content text style backward compatibility */
     const titleStyle = {
-        lineHeight: LINE_HEIGHT_HEADINGS,
-        ...options.titleStyle,
+        ...textOnlyProperties,
     };
     return applyViewModelTextStyles({
         ...content,
@@ -415,31 +428,56 @@ const mapToDividerSectionViewModel = (content) => {
     };
 };
 export const mapToImagesSectionViewModel = (content, styles, brandPageType) => {
+    const processedItems = content.items
+        .map((item, index) => ({
+        ...item,
+        itemsId: index,
+    }))
+        .filter((item) => content.displayStyle === ALIGN_LEFT_ALIGNED ||
+        content.displayStyle === ALIGN_RIGHT_ALIGNED
+        ? item.itemsId < MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH
+        : true)
+        .map((item) => ({
+        ...item,
+        buttonViewModel: item.buttonText && typeof item.buttonText === 'string'
+            ? mapToButtonViewModel({
+                ...content,
+                clickActionField: 'url',
+                iconUrl: '',
+                modalImageUrl: '',
+                url: item.url,
+                title: item.buttonText || '',
+                page: item.pageSlug || '',
+                colorReplacements: [],
+                titleStyle: content.buttonTextStyle || styles.buttonStyles.style,
+            }, styles, {
+                titleStyle: content.buttonTextStyle || styles.buttonStyles.style,
+            })
+            : undefined,
+    }));
     return applyViewModelTextStyles({
         ...content,
         role: content.type,
         type: 'images-section',
+        buttonTextStyle: styles.buttonStyles.style,
         isFullWidth: brandPageType === BRAND_PAGE_TYPES.brandSite ||
             ((brandPageType === BRAND_PAGE_TYPES.default ||
                 brandPageType === BRAND_PAGE_TYPES.brandContact) &&
                 content.areImagesFullWidth),
-        items: content.items
-            .map((item, index) => ({
-            ...item,
-            itemsId: index,
-        }))
-            .filter((item) => content.displayStyle === ALIGN_LEFT_ALIGNED ||
-            content.displayStyle === ALIGN_RIGHT_ALIGNED
-            ? item.itemsId < MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH
-            : true),
+        items: processedItems,
     }, styles);
 };
 const mapToShapesSectionViewModel = (content, styles, brandPageType) => {
+    const processedItems = content.items.map((item, index) => ({
+        ...item,
+        itemsId: index,
+    }));
     return applyViewModelTextStyles({
         ...content,
         role: content.type,
         type: 'shapes-section',
         isFullWidth: brandPageType === BRAND_PAGE_TYPES.brandSite,
+        items: processedItems,
     }, styles);
 };
 const mapToShopViewModel = (content, styles) => {

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

@@ -1,4 +1,4 @@
-import type { PageStyles, ButtonWithModalContent, ProfileContent, TextContent, VideoContent, ImageContent, ContentType, ButtonStyles, LogoStyles, MapContent, ImageGalleryContent, GalleryStyles, MailingListContent, RequestPaymentContent, ShopContent, SupportMeContent, ContactFormContent, BannerSectionContent, BrandPageType, SocialLinksContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ButtonLinkType, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, TextMediaItem, TextStyleDeclaration, AspectRatio, LogoImageModel, LogoTemplateImageModel, CookieOptions, BookingSectionContent } from './models';
+import type { PageStyles, ButtonWithModalContent, ProfileContent, TextContent, VideoContent, ImageContent, ContentType, ButtonStyles, LogoStyles, MapContent, ImageGalleryContent, GalleryStyles, MailingListContent, RequestPaymentContent, ShopContent, SupportMeContent, ContactFormContent, BannerSectionContent, BrandPageType, SocialLinksContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ButtonLinkType, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, TextMediaItem, TextShapeItem, TextStyleDeclaration, AspectRatio, LogoImageModel, LogoTemplateImageModel, CookieOptions, BookingSectionContent } from './models';
 import type { ImagesSectionContentDisplayStyle } from './constants';
 export type ViewModelType = 'button' | 'image' | 'image-gallery' | 'logo' | 'map' | 'mailing-list' | 'profile' | 'support-me' | 'request-payment' | 'text' | 'video' | 'contact-form' | 'banner-section' | 'images-section' | 'about-section' | 'divider-section' | 'testimonial-section' | 'social-links' | 'shapes-section' | 'shop-section' | 'booking-section';
 export interface ContentViewModel {
@@ -36,7 +36,8 @@ export interface LogoViewModel extends ContentViewModel {
 export interface ProfileViewModel extends ContentViewModel, Omit<ProfileContent, 'type'> {
     containerStyle?: BrandPageCssStyle;
 }
-export interface ShapesSectionViewModel extends ContentViewModel, Omit<ShapesSectionContent, 'type'> {
+export interface ShapesSectionViewModel extends ContentViewModel, Omit<ShapesSectionContent, 'type' | 'items'> {
+    items: TextShapeItem[];
     isFullWidth: boolean;
 }
 export type TextViewModel = ContentViewModel & Omit<TextContent, 'type' | 'textSize' | 'textAlignment' | 'textColor'> & {
@@ -74,15 +75,21 @@ export interface TextImageSectionViewModel {
     type: 'images-section';
     role: ContentType;
     title: string;
+    description: string;
     displayStyle: ImagesSectionContentDisplayStyle;
     aspectRatio: AspectRatio;
     areImagesFullWidth: boolean;
-    items: TextMediaItem[];
+    enablePopup: boolean;
+    items: (TextMediaItem & {
+        buttonViewModel?: ButtonViewModel;
+    })[];
     backgroundStyle: BrandPageCssStyle;
     titleStyle: TextStyleDeclaration;
+    descriptionStyle: TextStyleDeclaration;
     headingStyle: TextStyleDeclaration;
     paragraphStyle: TextStyleDeclaration;
     cardStyle: BrandPageCssStyle;
+    buttonTextStyle?: TextStyleDeclaration;
     isFullWidth: boolean;
 }
 export interface TestimonialSectionViewModel extends ContentViewModel, Omit<TestimonialSectionContent, 'type'> {

package/lib/src/brand-page-maker/constants/config-settings-constant.js

@@ -2,7 +2,7 @@ import { SOCIAL_LINKS_ICON_DISPLAY_STYLES, BRAND_PAGE_TYPES, DIVIDER_STYLES, MED
 import { createInitialButtonContent, createInitialImageContent, createInitialProfileContent, createInitialTextContent, createInitialVideoContent, createInitialLogoContent, createInitialMapContent, createInitialImageGalleryContent, createInitialGeneralLinkContent, createInitialMailingListContent, createInitialRequestPaymentContent, createInitialSupportMeContent, createInitialContactFormContent, CONTENT_SETTINGS_DISPLAY_MODES, createInitialBannerSectionContent, createInitialSocialLinksContent, createInitialImagesSectionContent, createInitialTestimonialSectionContent, createInitialAboutSectionContent, createInitialDividerSectionContent, createInitialShapesSectionContent, VARIANT_DISPLAY_MODES, createInitialShopContent, createInitialBookingSectionContent, } from '../models';
 import { colorConvertor, backgroundColorConvertor, borderColorConvertor, displayStyleConvertor, galleryTypeConvertor, imageAspectRatioConvertor, textAlignmentOptionsConvertor, videoContentStateConvertor, fillColorConvertor, bannerAlignDisplayStyleConvertor, aboutDisplayStyleConvertor, dividerStyleConvertor, shapeSizeOptionsConvertor, buttonLinkStyleConvertor, textSizeValueConvertor, textColumnStyleConvertor, contactLayoutStyleConvertor, paymentLinkDisplayStyleConvertor, shopDisplayConvertor, shopAspectRatioConvertor, } from '../convertors';
 import { ALIGN_CENTERED, DISPLAY_STYLE_COLLAPSED, DISPLAY_STYLE_PREVIEW, } from '../../brand-page';
-import { imageFieldVisibilityAssessor, imageOptionVisibilityAssessor, imageGalleryFieldVisibilityAssessor, cardFillVisibilityAssessor, mediaSectionItemsFieldTypeAssessor, dividerToggleFieldVisibilityAssessor, shapeSectionItemsFieldTypeAssessor, colorReplacementVisibilityTypeAssessor, colorReplacementProfileVisibilityTypeAssessor, colorReplacementIconVisibilityTypeAssessor, imagesSectionCardStyleVisibilityAssessor, contactBackgroundDisplayTypeVisibilityAssessor, contactCardDisplayTypeVisibilityAssessor, imageUrlVisibilityAssessor, displayTypeVisibilityAssessor, logoFieldVisibilityAssessor, shapesSectionCardStyleVisibilityAssessor, shopImageOptionVisibilityAssessor, shopItemColorVisibility, personalisationOverrideVisibility, } from '../assessors';
+import { imageFieldVisibilityAssessor, imageOptionVisibilityAssessor, imageGalleryFieldVisibilityAssessor, cardFillVisibilityAssessor, mediaSectionItemsFieldTypeAssessor, dividerToggleFieldVisibilityAssessor, shapeSectionItemsFieldTypeAssessor, colorReplacementVisibilityTypeAssessor, colorReplacementProfileVisibilityTypeAssessor, colorReplacementIconVisibilityTypeAssessor, imagesSectionCardStyleVisibilityAssessor, contactCardDisplayTypeVisibilityAssessor, imageUrlVisibilityAssessor, displayTypeVisibilityAssessor, logoFieldVisibilityAssessor, shapesSectionCardStyleVisibilityAssessor, shopImageOptionVisibilityAssessor, shopItemColorVisibility, personalisationOverrideVisibility, } from '../assessors';
 import { logoBackgroundColorDefaultGetter, paymentFillColorFieldDefaultGetter, paymentTextAndBorderColorFieldDefaultGetter, shopBorderColorFieldDefaultGetter, shopFillColorFieldDefaultGetter, textColorFieldDefaultGetter, } from '../default-getters';
 import { socialLinksIconDisplayStyleConvertor } from '../convertors/social-links-icon-display-style.convertor';
 import { getTextMediaOptionsConverterByMediaType } from '../convertors/text-image-display-style.convertor';
@@ -2122,6 +2122,12 @@ export const IMAGES_SECTION_SETTINGS_CONFIG = () => ({
                 ? VARIANT_DISPLAY_MODES.custom
                 : VARIANT_DISPLAY_MODES.none,
         },
+        enablePopup: {
+            type: 'toggle',
+            label: contentSettingsTr(`enablePopupLabel`),
+            defaultValue: true,
+            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+        },
         areImagesFullWidth: {
             type: 'toggle',
             label: contentSettingsTr(`fullWidthLabel`),
@@ -2139,6 +2145,7 @@ export const IMAGES_SECTION_SETTINGS_CONFIG = () => ({
         descriptionStyle: TEXT_MEDIA_DESCRIPTION_STYLE_FIELD(),
         headingStyle: TEXT_MEDIA_HEADING_STYLE_FIELD(),
         paragraphStyle: TEXT_MEDIA_PARAGRAPH_STYLE_FIELD(),
+        buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
         cardStyle: {
             type: 'color',
             groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,

package/lib/src/brand-page-maker/models/content-settings.js

@@ -455,6 +455,7 @@ export const createInitialImagesSectionContent = (options) => {
         displayStyle: 'centered',
         aspectRatio: 'Default',
         areImagesFullWidth: false,
+        enablePopup: true,
         items: [
             {
                 height: -1,
@@ -464,7 +465,7 @@ export const createInitialImagesSectionContent = (options) => {
                 paragraph: '',
                 title: '',
                 width: -1,
-                imageLink: '',
+                imageLink: false,
                 itemsId: -1,
             },
         ],
@@ -490,6 +491,11 @@ export const createInitialImagesSectionContent = (options) => {
             textStyleType: TEXT_STYLE_TYPES.paragraphs,
             textAlign: 'center',
         },
+        buttonTextStyle: {
+            applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
+            textStyleType: TEXT_STYLE_TYPES.buttons,
+            textAlign: 'center',
+        },
     };
 };
 export const createInitialTestimonialSectionContent = (options) => {