@designcrowd/library.brand-page 5.19.0 → 5.19.1-error-html2canvas-2

package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.js

@@ -8,23 +8,9 @@ import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
 import { ITEM_FIELD_TYPES } from '@brand-page-maker/models';
 import { useUiPageSettingsStore } from '../../../page-settings/store';
 import { PAGE_SECTIONS } from '../../../page-settings/models';
-import { commonTr } from '@src/composables/useTranslate';
 import { getPlainTextFromRTE, replaceTextInRTE, RTE_ALLOWED_SECTION_TYPES, isRTEManagedStyleField, } from '@brand-page-maker/utils';
 import { isDefaultContentText } from '@shared/content-settings/utils';
 import { useUiLogoSettingsStore } from '../../../logo-settings/store';
-const RTE_DISALLOWED_STYLE_FIELD_NAMES = [
-    'descriptionStyle',
-    'titleStyle',
-    'textStyle',
-    'paragraphStyle',
-];
-const AI_ALLOWED_SECTION_TYPES = [
-    'banner-section',
-    'text',
-    'about-section',
-    'testimonials-section',
-];
-const AI_ALLOWED_FIELD_NAMES = ['description', 'title', 'text', 'paragraph'];
 const RTE_DISALLOWED_FIELD_NAMES = ['buttonText'];
 export default defineComponent({
     props: {
@@ -47,6 +33,7 @@ export default defineComponent({
             default: undefined,
         },
     },
+    emits: ['capture-preview-snapshot'],
     setup() {
         const contentSettingsStore = useUiContentSettingsStore();
         const brandPageMakerStore = useBrandPageMakerStore();

package/lib/src/shared/content-settings/components/email-field/EmailField.mixin.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="types/lodash-shims" />
 declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     attrs: {
         type: ObjectConstructor;

package/lib/src/shared/content-settings/components/focused-content-item-settings/FocusedContentItemSettings.mixin.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     selectedItemId: import("vue").ComputedRef<string | null>;
     getContent: import("vue").ComputedRef<(id: string) => import("@brand-page").Content | undefined>;
     getItem: import("vue").ComputedRef<(id: string) => ContentItem<any> | undefined>;
-    getValue: import("vue").ComputedRef<(id: string, fieldName: string) => string | import("@brand-page").Content | undefined>;
+    getValue: import("vue").ComputedRef<(id: string, fieldName: string) => import("@brand-page").Content | string | undefined>;
     getItemGroupState: import("vue").ComputedRef<(id: string, groupId: string) => import("../../models").ContentSettingsItemGroupState>;
     brandPageData: import("vue").ComputedRef<import("@brand-page").BrandPageModel>;
     isPersonalisationEnabled: import("vue").ComputedRef<boolean>;
@@ -19,23 +19,25 @@ declare const _default: import("vue").DefineComponent<{}, {
         contentErrorCount(): number;
         getContent(state: {
             addContentOptions: {
-                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: import("@brand-page").ContentType;
                 category: string;
                 createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
                 displayName: string;
                 iconName: string;
                 isEnabled: boolean;
                 isLocked: boolean;
-                displayMode?: "default" | "focused" | undefined;
+                displayMode?: import("@brand-page-maker/models").ContentSettingsDisplayMode | undefined;
             }[];
             items: {
                 id: string;
-                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: import("@brand-page").ContentType;
                 settings: {
                     content: {
                         id: string;
-                        type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
-                        personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                        type: import("@brand-page").ContentType;
+                        personalisationRole?: PersonalisationRole | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -54,37 +56,39 @@ declare const _default: import("vue").DefineComponent<{}, {
             }[];
             itemStates: Record<string, import("../../models").ContentSettingsItemState>;
             modeStack: {
-                mode: "images" | "pages" | "add" | "edit" | "focusedContentItem";
+                mode: import("../../store").ContentSettingsMode;
                 selectedItemId?: string | undefined;
                 selectedItemFieldName?: string | undefined;
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            selectedItemEventSource: import("../../../models").UIEventSource | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
-            activeCategoryTab: string;
+            activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
         } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string) => import("@brand-page").Content | undefined;
         getFieldSettings(state: {
             addContentOptions: {
-                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: import("@brand-page").ContentType;
                 category: string;
                 createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
                 displayName: string;
                 iconName: string;
                 isEnabled: boolean;
                 isLocked: boolean;
-                displayMode?: "default" | "focused" | undefined;
+                displayMode?: import("@brand-page-maker/models").ContentSettingsDisplayMode | undefined;
             }[];
             items: {
                 id: string;
-                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: import("@brand-page").ContentType;
                 settings: {
                     content: {
                         id: string;
-                        type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
-                        personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                        type: import("@brand-page").ContentType;
+                        personalisationRole?: PersonalisationRole | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -103,37 +107,39 @@ declare const _default: import("vue").DefineComponent<{}, {
             }[];
             itemStates: Record<string, import("../../models").ContentSettingsItemState>;
             modeStack: {
-                mode: "images" | "pages" | "add" | "edit" | "focusedContentItem";
+                mode: import("../../store").ContentSettingsMode;
                 selectedItemId?: string | undefined;
                 selectedItemFieldName?: string | undefined;
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            selectedItemEventSource: import("../../../models").UIEventSource | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
-            activeCategoryTab: string;
+            activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
         } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string, fieldName: string) => import("../../models").ContentItemFieldSettings | undefined;
         getItem(state: {
             addContentOptions: {
-                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: import("@brand-page").ContentType;
                 category: string;
                 createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
                 displayName: string;
                 iconName: string;
                 isEnabled: boolean;
                 isLocked: boolean;
-                displayMode?: "default" | "focused" | undefined;
+                displayMode?: import("@brand-page-maker/models").ContentSettingsDisplayMode | undefined;
             }[];
             items: {
                 id: string;
-                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: import("@brand-page").ContentType;
                 settings: {
                     content: {
                         id: string;
-                        type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
-                        personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                        type: import("@brand-page").ContentType;
+                        personalisationRole?: PersonalisationRole | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -152,37 +158,39 @@ declare const _default: import("vue").DefineComponent<{}, {
             }[];
             itemStates: Record<string, import("../../models").ContentSettingsItemState>;
             modeStack: {
-                mode: "images" | "pages" | "add" | "edit" | "focusedContentItem";
+                mode: import("../../store").ContentSettingsMode;
                 selectedItemId?: string | undefined;
                 selectedItemFieldName?: string | undefined;
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            selectedItemEventSource: import("../../../models").UIEventSource | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
-            activeCategoryTab: string;
+            activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
         } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string) => ContentItem<any> | undefined;
         getValue(state: {
             addContentOptions: {
-                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: import("@brand-page").ContentType;
                 category: string;
                 createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
                 displayName: string;
                 iconName: string;
                 isEnabled: boolean;
                 isLocked: boolean;
-                displayMode?: "default" | "focused" | undefined;
+                displayMode?: import("@brand-page-maker/models").ContentSettingsDisplayMode | undefined;
             }[];
             items: {
                 id: string;
-                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: import("@brand-page").ContentType;
                 settings: {
                     content: {
                         id: string;
-                        type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
-                        personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                        type: import("@brand-page").ContentType;
+                        personalisationRole?: PersonalisationRole | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -201,37 +209,39 @@ declare const _default: import("vue").DefineComponent<{}, {
             }[];
             itemStates: Record<string, import("../../models").ContentSettingsItemState>;
             modeStack: {
-                mode: "images" | "pages" | "add" | "edit" | "focusedContentItem";
+                mode: import("../../store").ContentSettingsMode;
                 selectedItemId?: string | undefined;
                 selectedItemFieldName?: string | undefined;
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            selectedItemEventSource: import("../../../models").UIEventSource | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
-            activeCategoryTab: string;
-        } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string, fieldName: string) => string | import("@brand-page").Content | undefined;
+            activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
+        } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string, fieldName: string) => import("@brand-page").Content | string | undefined;
         getItemState(state: {
             addContentOptions: {
-                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: import("@brand-page").ContentType;
                 category: string;
                 createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
                 displayName: string;
                 iconName: string;
                 isEnabled: boolean;
                 isLocked: boolean;
-                displayMode?: "default" | "focused" | undefined;
+                displayMode?: import("@brand-page-maker/models").ContentSettingsDisplayMode | undefined;
             }[];
             items: {
                 id: string;
-                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: import("@brand-page").ContentType;
                 settings: {
                     content: {
                         id: string;
-                        type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
-                        personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                        type: import("@brand-page").ContentType;
+                        personalisationRole?: PersonalisationRole | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -250,37 +260,39 @@ declare const _default: import("vue").DefineComponent<{}, {
             }[];
             itemStates: Record<string, import("../../models").ContentSettingsItemState>;
             modeStack: {
-                mode: "images" | "pages" | "add" | "edit" | "focusedContentItem";
+                mode: import("../../store").ContentSettingsMode;
                 selectedItemId?: string | undefined;
                 selectedItemFieldName?: string | undefined;
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            selectedItemEventSource: import("../../../models").UIEventSource | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
-            activeCategoryTab: string;
+            activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
         } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string) => import("../../models").ContentSettingsItemState;
         getItemGroupState(state: {
             addContentOptions: {
-                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: import("@brand-page").ContentType;
                 category: string;
                 createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
                 displayName: string;
                 iconName: string;
                 isEnabled: boolean;
                 isLocked: boolean;
-                displayMode?: "default" | "focused" | undefined;
+                displayMode?: import("@brand-page-maker/models").ContentSettingsDisplayMode | undefined;
             }[];
             items: {
                 id: string;
-                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
+                type: import("@brand-page").ContentType;
                 settings: {
                     content: {
                         id: string;
-                        type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
-                        personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                        type: import("@brand-page").ContentType;
+                        personalisationRole?: PersonalisationRole | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -299,26 +311,26 @@ declare const _default: import("vue").DefineComponent<{}, {
             }[];
             itemStates: Record<string, import("../../models").ContentSettingsItemState>;
             modeStack: {
-                mode: "images" | "pages" | "add" | "edit" | "focusedContentItem";
+                mode: import("../../store").ContentSettingsMode;
                 selectedItemId?: string | undefined;
                 selectedItemFieldName?: string | undefined;
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            selectedItemEventSource: import("../../../models").UIEventSource | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
-            activeCategoryTab: string;
+            activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
         } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string, groupId: string) => import("../../models").ContentSettingsItemGroupState;
-        mode(): "images" | "pages" | "add" | "edit" | "focusedContentItem";
+        mode(): import("../../store").ContentSettingsMode;
         selectedItem(): ContentItem<any> | undefined;
-        selectedItemTemplate(): ContentSettingsConfig<any, {}> | undefined;
+        selectedItemTemplate(): ContentSettingsConfig<any> | undefined;
     }, {
         onContentChanged(): void;
         _addItem({ item, index, }: {
             item: ContentItem<any>;
-            index?: number | undefined;
+            index?: number;
         }): void;
         setState(payload: {
             newState: Partial<import("../../store").ContentSettingsState>;
@@ -335,7 +347,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         _setItemSettingsFieldErrorState(payload: import("../../models").SetItemSettingsFieldErrorMessagePayload): void;
         _setSelectedItemId({ id, eventSource, }: {
             id: string | null;
-            eventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            eventSource: import("../../../models").UIEventSource | null;
         }): void;
         _setSelectedItemFieldName({ name: name }: {
             name: string | null;
@@ -349,10 +361,10 @@ declare const _default: import("vue").DefineComponent<{}, {
         _setSelectedItemImage({ selectedItemId, imageUrl, width, height, colorReplacements, aspectRatio, }: {
             selectedItemId: string | null;
             imageUrl: string;
-            width?: number | undefined;
-            height?: number | undefined;
-            colorReplacements?: import("@brand-page").ColorReplacement[] | undefined;
-            aspectRatio?: number | null | undefined;
+            width?: number;
+            height?: number;
+            colorReplacements?: import("@brand-page").ColorReplacement[];
+            aspectRatio?: number | null;
         }): void;
         _setSelectedItemMedia(selectedItemId: string | null, mediaPayload: import("../../../my-uploads/models").MediaBaseSelectedPayload): void;
         _setItems({ items }: {
@@ -376,7 +388,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         updateTextItemTextStyleType({ id, name, value, index, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         updateTextItemTextStyleTypeWithStyles({ id, name, value, index, }: import("../../models").UpdateMultipleItemValuesPayload<any>): void;
         _setActiveCategoryTab({ activeCategoryTab, }: {
-            activeCategoryTab: string;
+            activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
         }): void;
         setItemState({ id, itemState, }: {
             id: string;
@@ -399,7 +411,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         addItemByType({ type, index, }: {
             type: string;
-            index?: number | undefined;
+            index?: number;
         }): ContentItem<import("@brand-page").Content> | undefined;
         deleteItem(payload: {
             id: string;
@@ -411,13 +423,13 @@ declare const _default: import("vue").DefineComponent<{}, {
         updateIsDefaultTextColorRequired(): void;
         setSelectedItemId(payload: {
             id: string | null;
-            eventSource: "preview" | "contentSettings" | "pageSettings";
+            eventSource: import("../../../models").UIEventSource;
         }): void;
         setSelectedItemAndFieldName(payload: {
             id: string | null;
             name: string | null;
             index: number | null;
-            eventSource: "preview" | "contentSettings" | "pageSettings" | null;
+            eventSource: import("../../../models").UIEventSource | null;
         }): void;
         setSelectedItemValue(payload: {
             value: string | null;
@@ -425,10 +437,10 @@ declare const _default: import("vue").DefineComponent<{}, {
         setSelectedItemImage(payload: {
             selectedItemId: string | null;
             imageUrl: string;
-            width?: number | undefined;
-            height?: number | undefined;
-            colorReplacements?: import("@brand-page").ColorReplacement[] | undefined;
-            aspectRatio?: number | null | undefined;
+            width?: number;
+            height?: number;
+            colorReplacements?: import("@brand-page").ColorReplacement[];
+            aspectRatio?: number | null;
         }): void;
         setSelectedItemMedia(selectedItemId: string | null, mediaPayload: import("../../../my-uploads/models").MediaBaseSelectedPayload): void;
         setItems(payload: {
@@ -440,19 +452,19 @@ declare const _default: import("vue").DefineComponent<{}, {
             type: string;
         }): Promise<void>;
         setActiveCategoryTab(payload: {
-            activeCategoryTab: string;
+            activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
         }): void;
         selectInitialContentCategory(payload: {
             selectedCategory: string;
         }): void;
         initialiseItemState({ item, itemState, }: {
             item: ContentItem<import("@brand-page").Content>;
-            itemState?: Partial<import("../../store").ContentSettingsState> | undefined;
+            itemState?: Partial<import("../../store").ContentSettingsState>;
         }): void;
         initialiseItemGroupState({ id, groupId, groupState, }: {
             id: string;
             groupId: string;
-            groupState?: import("../../models").ContentSettingsItemGroupState | undefined;
+            groupState?: import("../../models").ContentSettingsItemGroupState;
         }): void;
     }>;
 }, {
@@ -473,5 +485,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     onCaptureSnapshotBeforeModal(): void;
     onToggleGroupCollapseClick(groupId: string): void;
     onPersonalisationRoleChange(payload: UpdateItemValuePayload<PersonalisationRole | undefined>): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "capture-preview-snapshot"[], "capture-preview-snapshot", import("vue").PublicProps, Readonly<{}> & Readonly<{
+    "onCapture-preview-snapshot"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/shared/content-settings/components/focused-content-item-settings/FocusedContentItemSettings.mixin.js

@@ -5,16 +5,17 @@ import { useUiContentSettingsStore } from '../../store';
 import { useBrandPageMakerStore, useBrandPageMakerUserStore, useRouteStore, useUiStore, } from '@brand-page-maker/stores';
 import { BRAND_PAGE_TYPES, MEDIA_SIZES, } from '@brand-page';
 import { buildRelativePathFromParams } from '@brand-page/utils/route.util';
-import { switchAllContentToRTE, isRTEManagedStyleField, } from '@brand-page-maker/utils';
+import { isRTEManagedStyleField } from '@brand-page-maker/utils';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
 import { useExternalRichTextEditor } from '@brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import { useUiStyleSettingsStore } from '@shared/style-settings/store';
 export default defineComponent({
+    emits: ['capture-preview-snapshot'],
     setup() {
         const contentSettingsStore = useUiContentSettingsStore();
         const brandPageMakerStore = useBrandPageMakerStore();
-        const pageSettingsStore = useUiPageSettingsStore();
-        const styleSettingsStore = useUiStyleSettingsStore();
+        const _pageSettingsStore = useUiPageSettingsStore();
+        const _styleSettingsStore = useUiStyleSettingsStore();
         const userStore = useBrandPageMakerUserStore();
         const uiStore = useUiStore();
         const routeStore = useRouteStore();

package/lib/src/shared/content-settings/components/form-fields-field/FormFieldsField.mixin.d.ts

@@ -31,11 +31,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }[];
     valueWithState: import("vue").Ref<{
         field: {
-            id: "firstName" | "lastName" | "emailAddress" | "phoneNumber" | "message" | "customField1" | "customField2" | "customField3";
+            id: import("@brand-page").FormFieldId;
             name: string;
             enabled: boolean;
             required: boolean;
-            type: "email" | "phone" | "text" | "text-area";
+            type: import("@brand-page").FormFieldType;
         };
         isCollapsed: boolean;
         isTypeDropdownOpen: boolean;
@@ -45,11 +45,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         isTypeDropdownOpen: boolean;
     }[] | {
         field: {
-            id: "firstName" | "lastName" | "emailAddress" | "phoneNumber" | "message" | "customField1" | "customField2" | "customField3";
+            id: import("@brand-page").FormFieldId;
             name: string;
             enabled: boolean;
             required: boolean;
-            type: "email" | "phone" | "text" | "text-area";
+            type: import("@brand-page").FormFieldType;
         };
         isCollapsed: boolean;
         isTypeDropdownOpen: boolean;

package/lib/src/shared/content-settings/components/icon-library/IconLibrary.mixin.d.ts

@@ -2,7 +2,9 @@ declare const _default: import("vue").DefineComponent<{}, {}, {
     orderedIcons: string[];
 }, {}, {
     setSelectedIcon(icon: string): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "on-select-image"[], "on-select-image", import("vue").PublicProps, Readonly<{}> & Readonly<{
+    "onOn-select-image"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {
     Icon: import("vue").DefineComponent<{}, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/shared/content-settings/components/icon-library/IconLibrary.mixin.js

@@ -5,6 +5,7 @@ export default defineComponent({
     components: {
         Icon,
     },
+    emits: ['on-select-image'],
     data() {
         return {
             orderedIcons: BRAND_PAGE_ICONS,

package/lib/src/shared/content-settings/components/images-field/ImagesField.mixin.d.ts

@@ -20,7 +20,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
     };
     value: {
-        type: PropType<import("@brand-page").ImageItem[]>;
+        type: PropType<ImageGalleryItem[]>;
         required: true;
     };
     maxLength: {
@@ -69,7 +69,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
     };
     value: {
-        type: PropType<import("@brand-page").ImageItem[]>;
+        type: PropType<ImageGalleryItem[]>;
         required: true;
     };
     maxLength: {

package/lib/src/shared/content-settings/components/items-field/ItemsField.mixin.d.ts

@@ -11,7 +11,7 @@ interface ItemField {
 }
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     items: {
-        type: PropType<unknown[]>;
+        type: PropType<ItemFieldItem[]>;
         required: true;
     };
     canCollapse: {
@@ -35,9 +35,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     toggleCollapsed(index: number): void;
     onDelete(index: number): void;
     onEdit(index: number): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("items-change" | "items-delete")[], "items-change" | "items-delete", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("items-change" | "items-delete" | "itemsEdit")[], "items-change" | "items-delete" | "itemsEdit", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
-        type: PropType<unknown[]>;
+        type: PropType<ItemFieldItem[]>;
         required: true;
     };
     canCollapse: {
@@ -53,5 +53,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{
     "onItems-change"?: ((...args: any[]) => any) | undefined;
     "onItems-delete"?: ((...args: any[]) => any) | undefined;
+    onItemsEdit?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/shared/content-settings/components/items-field/ItemsField.mixin.js

@@ -16,7 +16,7 @@ export default defineComponent({
             default: false,
         },
     },
-    emits: ['items-change', 'items-delete'],
+    emits: ['items-change', 'items-delete', 'itemsEdit'],
     data: () => ({
         itemStates: {},
     }),