@designcrowd/library.brand-page 6.0.3 → 6.0.4

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

@@ -8,9 +8,23 @@ 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: {
@@ -33,7 +47,6 @@ 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,3 +1,4 @@
+/// <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) => import("@brand-page").Content | string | undefined>;
+    getValue: import("vue").ComputedRef<(id: string, fieldName: string) => string | import("@brand-page").Content | 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,23 @@ declare const _default: import("vue").DefineComponent<{}, {
         contentErrorCount(): number;
         getContent(state: {
             addContentOptions: {
-                type: import("@brand-page").ContentType;
+                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";
                 category: string;
                 createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
                 displayName: string;
                 iconName: string;
                 isEnabled: boolean;
                 isLocked: boolean;
-                displayMode?: import("@brand-page-maker/models").ContentSettingsDisplayMode | undefined;
+                displayMode?: "default" | "focused" | undefined;
             }[];
             items: {
                 id: string;
-                type: import("@brand-page").ContentType;
+                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";
                 settings: {
                     content: {
                         id: string;
-                        type: import("@brand-page").ContentType;
-                        personalisationRole?: PersonalisationRole | undefined;
+                        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;
                         topPadding?: number | undefined;
                         bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
@@ -56,37 +56,37 @@ declare const _default: import("vue").DefineComponent<{}, {
             }[];
             itemStates: Record<string, import("../../models").ContentSettingsItemState>;
             modeStack: {
-                mode: import("../../store").ContentSettingsMode;
+                mode: "images" | "pages" | "add" | "edit" | "focusedContentItem";
                 selectedItemId?: string | undefined;
                 selectedItemFieldName?: string | undefined;
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: import("../../../models").UIEventSource | null;
+            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
-            activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
+            activeCategoryTab: string;
         } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string) => import("@brand-page").Content | undefined;
         getFieldSettings(state: {
             addContentOptions: {
-                type: import("@brand-page").ContentType;
+                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";
                 category: string;
                 createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
                 displayName: string;
                 iconName: string;
                 isEnabled: boolean;
                 isLocked: boolean;
-                displayMode?: import("@brand-page-maker/models").ContentSettingsDisplayMode | undefined;
+                displayMode?: "default" | "focused" | undefined;
             }[];
             items: {
                 id: string;
-                type: import("@brand-page").ContentType;
+                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";
                 settings: {
                     content: {
                         id: string;
-                        type: import("@brand-page").ContentType;
-                        personalisationRole?: PersonalisationRole | undefined;
+                        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;
                         topPadding?: number | undefined;
                         bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
@@ -107,37 +107,37 @@ declare const _default: import("vue").DefineComponent<{}, {
             }[];
             itemStates: Record<string, import("../../models").ContentSettingsItemState>;
             modeStack: {
-                mode: import("../../store").ContentSettingsMode;
+                mode: "images" | "pages" | "add" | "edit" | "focusedContentItem";
                 selectedItemId?: string | undefined;
                 selectedItemFieldName?: string | undefined;
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: import("../../../models").UIEventSource | null;
+            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
-            activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
+            activeCategoryTab: string;
         } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string, fieldName: string) => import("../../models").ContentItemFieldSettings | undefined;
         getItem(state: {
             addContentOptions: {
-                type: import("@brand-page").ContentType;
+                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";
                 category: string;
                 createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
                 displayName: string;
                 iconName: string;
                 isEnabled: boolean;
                 isLocked: boolean;
-                displayMode?: import("@brand-page-maker/models").ContentSettingsDisplayMode | undefined;
+                displayMode?: "default" | "focused" | undefined;
             }[];
             items: {
                 id: string;
-                type: import("@brand-page").ContentType;
+                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";
                 settings: {
                     content: {
                         id: string;
-                        type: import("@brand-page").ContentType;
-                        personalisationRole?: PersonalisationRole | undefined;
+                        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;
                         topPadding?: number | undefined;
                         bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
@@ -158,37 +158,37 @@ declare const _default: import("vue").DefineComponent<{}, {
             }[];
             itemStates: Record<string, import("../../models").ContentSettingsItemState>;
             modeStack: {
-                mode: import("../../store").ContentSettingsMode;
+                mode: "images" | "pages" | "add" | "edit" | "focusedContentItem";
                 selectedItemId?: string | undefined;
                 selectedItemFieldName?: string | undefined;
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: import("../../../models").UIEventSource | null;
+            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
-            activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
+            activeCategoryTab: string;
         } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string) => ContentItem<any> | undefined;
         getValue(state: {
             addContentOptions: {
-                type: import("@brand-page").ContentType;
+                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";
                 category: string;
                 createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
                 displayName: string;
                 iconName: string;
                 isEnabled: boolean;
                 isLocked: boolean;
-                displayMode?: import("@brand-page-maker/models").ContentSettingsDisplayMode | undefined;
+                displayMode?: "default" | "focused" | undefined;
             }[];
             items: {
                 id: string;
-                type: import("@brand-page").ContentType;
+                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";
                 settings: {
                     content: {
                         id: string;
-                        type: import("@brand-page").ContentType;
-                        personalisationRole?: PersonalisationRole | undefined;
+                        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;
                         topPadding?: number | undefined;
                         bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
@@ -209,37 +209,37 @@ declare const _default: import("vue").DefineComponent<{}, {
             }[];
             itemStates: Record<string, import("../../models").ContentSettingsItemState>;
             modeStack: {
-                mode: import("../../store").ContentSettingsMode;
+                mode: "images" | "pages" | "add" | "edit" | "focusedContentItem";
                 selectedItemId?: string | undefined;
                 selectedItemFieldName?: string | undefined;
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: import("../../../models").UIEventSource | null;
+            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
-            activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
-        } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string, fieldName: string) => import("@brand-page").Content | string | undefined;
+            activeCategoryTab: string;
+        } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string, fieldName: string) => string | import("@brand-page").Content | undefined;
         getItemState(state: {
             addContentOptions: {
-                type: import("@brand-page").ContentType;
+                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";
                 category: string;
                 createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
                 displayName: string;
                 iconName: string;
                 isEnabled: boolean;
                 isLocked: boolean;
-                displayMode?: import("@brand-page-maker/models").ContentSettingsDisplayMode | undefined;
+                displayMode?: "default" | "focused" | undefined;
             }[];
             items: {
                 id: string;
-                type: import("@brand-page").ContentType;
+                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";
                 settings: {
                     content: {
                         id: string;
-                        type: import("@brand-page").ContentType;
-                        personalisationRole?: PersonalisationRole | undefined;
+                        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;
                         topPadding?: number | undefined;
                         bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
@@ -260,37 +260,37 @@ declare const _default: import("vue").DefineComponent<{}, {
             }[];
             itemStates: Record<string, import("../../models").ContentSettingsItemState>;
             modeStack: {
-                mode: import("../../store").ContentSettingsMode;
+                mode: "images" | "pages" | "add" | "edit" | "focusedContentItem";
                 selectedItemId?: string | undefined;
                 selectedItemFieldName?: string | undefined;
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: import("../../../models").UIEventSource | null;
+            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
-            activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
+            activeCategoryTab: string;
         } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string) => import("../../models").ContentSettingsItemState;
         getItemGroupState(state: {
             addContentOptions: {
-                type: import("@brand-page").ContentType;
+                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";
                 category: string;
                 createInitialContent: (options: import("../../models").CreateInitialContentOptions) => import("@brand-page").Content;
                 displayName: string;
                 iconName: string;
                 isEnabled: boolean;
                 isLocked: boolean;
-                displayMode?: import("@brand-page-maker/models").ContentSettingsDisplayMode | undefined;
+                displayMode?: "default" | "focused" | undefined;
             }[];
             items: {
                 id: string;
-                type: import("@brand-page").ContentType;
+                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";
                 settings: {
                     content: {
                         id: string;
-                        type: import("@brand-page").ContentType;
-                        personalisationRole?: PersonalisationRole | undefined;
+                        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;
                         topPadding?: number | undefined;
                         bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
@@ -311,26 +311,26 @@ declare const _default: import("vue").DefineComponent<{}, {
             }[];
             itemStates: Record<string, import("../../models").ContentSettingsItemState>;
             modeStack: {
-                mode: import("../../store").ContentSettingsMode;
+                mode: "images" | "pages" | "add" | "edit" | "focusedContentItem";
                 selectedItemId?: string | undefined;
                 selectedItemFieldName?: string | undefined;
                 selectedItemIndex?: number | undefined;
             }[];
             selectedItemId: string | null;
-            selectedItemEventSource: import("../../../models").UIEventSource | null;
+            selectedItemEventSource: "preview" | "contentSettings" | "pageSettings" | null;
             selectedItemFieldName: string | null;
             selectedItemValue: string | null;
             selectedItemIndex: number | null;
-            activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
+            activeCategoryTab: string;
         } & import("pinia").PiniaCustomStateProperties<import("../../store").ContentSettingsState>): (id: string, groupId: string) => import("../../models").ContentSettingsItemGroupState;
-        mode(): import("../../store").ContentSettingsMode;
+        mode(): "images" | "pages" | "add" | "edit" | "focusedContentItem";
         selectedItem(): ContentItem<any> | undefined;
-        selectedItemTemplate(): ContentSettingsConfig<any> | undefined;
+        selectedItemTemplate(): ContentSettingsConfig<any, {}> | undefined;
     }, {
         onContentChanged(): void;
         _addItem({ item, index, }: {
             item: ContentItem<any>;
-            index?: number;
+            index?: number | undefined;
         }): void;
         setState(payload: {
             newState: Partial<import("../../store").ContentSettingsState>;
@@ -347,7 +347,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         _setItemSettingsFieldErrorState(payload: import("../../models").SetItemSettingsFieldErrorMessagePayload): void;
         _setSelectedItemId({ id, eventSource, }: {
             id: string | null;
-            eventSource: import("../../../models").UIEventSource | null;
+            eventSource: "preview" | "contentSettings" | "pageSettings" | null;
         }): void;
         _setSelectedItemFieldName({ name: name }: {
             name: string | null;
@@ -361,10 +361,10 @@ declare const _default: import("vue").DefineComponent<{}, {
         _setSelectedItemImage({ selectedItemId, imageUrl, width, height, colorReplacements, aspectRatio, }: {
             selectedItemId: string | null;
             imageUrl: string;
-            width?: number;
-            height?: number;
-            colorReplacements?: import("@brand-page").ColorReplacement[];
-            aspectRatio?: number | null;
+            width?: number | undefined;
+            height?: number | undefined;
+            colorReplacements?: import("@brand-page").ColorReplacement[] | undefined;
+            aspectRatio?: number | null | undefined;
         }): void;
         _setSelectedItemMedia(selectedItemId: string | null, mediaPayload: import("../../../my-uploads/models").MediaBaseSelectedPayload): void;
         _setItems({ items }: {
@@ -388,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: import("@brand-page-maker/models").ItemCategory;
+            activeCategoryTab: string;
         }): void;
         setItemState({ id, itemState, }: {
             id: string;
@@ -411,7 +411,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         addItemByType({ type, index, }: {
             type: string;
-            index?: number;
+            index?: number | undefined;
         }): ContentItem<import("@brand-page").Content> | undefined;
         deleteItem(payload: {
             id: string;
@@ -423,13 +423,13 @@ declare const _default: import("vue").DefineComponent<{}, {
         updateIsDefaultTextColorRequired(): void;
         setSelectedItemId(payload: {
             id: string | null;
-            eventSource: import("../../../models").UIEventSource;
+            eventSource: "preview" | "contentSettings" | "pageSettings";
         }): void;
         setSelectedItemAndFieldName(payload: {
             id: string | null;
             name: string | null;
             index: number | null;
-            eventSource: import("../../../models").UIEventSource | null;
+            eventSource: "preview" | "contentSettings" | "pageSettings" | null;
         }): void;
         setSelectedItemValue(payload: {
             value: string | null;
@@ -437,10 +437,10 @@ declare const _default: import("vue").DefineComponent<{}, {
         setSelectedItemImage(payload: {
             selectedItemId: string | null;
             imageUrl: string;
-            width?: number;
-            height?: number;
-            colorReplacements?: import("@brand-page").ColorReplacement[];
-            aspectRatio?: number | null;
+            width?: number | undefined;
+            height?: number | undefined;
+            colorReplacements?: import("@brand-page").ColorReplacement[] | undefined;
+            aspectRatio?: number | null | undefined;
         }): void;
         setSelectedItemMedia(selectedItemId: string | null, mediaPayload: import("../../../my-uploads/models").MediaBaseSelectedPayload): void;
         setItems(payload: {
@@ -452,19 +452,19 @@ declare const _default: import("vue").DefineComponent<{}, {
             type: string;
         }): Promise<void>;
         setActiveCategoryTab(payload: {
-            activeCategoryTab: import("@brand-page-maker/models").ItemCategory;
+            activeCategoryTab: string;
         }): void;
         selectInitialContentCategory(payload: {
             selectedCategory: string;
         }): void;
         initialiseItemState({ item, itemState, }: {
             item: ContentItem<import("@brand-page").Content>;
-            itemState?: Partial<import("../../store").ContentSettingsState>;
+            itemState?: Partial<import("../../store").ContentSettingsState> | undefined;
         }): void;
         initialiseItemGroupState({ id, groupId, groupState, }: {
             id: string;
             groupId: string;
-            groupState?: import("../../models").ContentSettingsItemGroupState;
+            groupState?: import("../../models").ContentSettingsItemGroupState | undefined;
         }): void;
     }>;
 }, {
@@ -485,7 +485,5 @@ declare const _default: import("vue").DefineComponent<{}, {
     onCaptureSnapshotBeforeModal(): void;
     onToggleGroupCollapseClick(groupId: string): void;
     onPersonalisationRoleChange(payload: UpdateItemValuePayload<PersonalisationRole | undefined>): void;
-}, 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>;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -5,17 +5,16 @@ 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 { isRTEManagedStyleField } from '@brand-page-maker/utils';
+import { switchAllContentToRTE, 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: import("@brand-page").FormFieldId;
+            id: "firstName" | "lastName" | "emailAddress" | "phoneNumber" | "message" | "customField1" | "customField2" | "customField3";
             name: string;
             enabled: boolean;
             required: boolean;
-            type: import("@brand-page").FormFieldType;
+            type: "email" | "phone" | "text" | "text-area";
         };
         isCollapsed: boolean;
         isTypeDropdownOpen: boolean;
@@ -45,11 +45,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         isTypeDropdownOpen: boolean;
     }[] | {
         field: {
-            id: import("@brand-page").FormFieldId;
+            id: "firstName" | "lastName" | "emailAddress" | "phoneNumber" | "message" | "customField1" | "customField2" | "customField3";
             name: string;
             enabled: boolean;
             required: boolean;
-            type: import("@brand-page").FormFieldType;
+            type: "email" | "phone" | "text" | "text-area";
         };
         isCollapsed: boolean;
         isTypeDropdownOpen: boolean;

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

@@ -2,9 +2,7 @@ declare const _default: import("vue").DefineComponent<{}, {}, {
     orderedIcons: string[];
 }, {}, {
     setSelectedIcon(icon: string): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "on-select-image"[], "on-select-image", import("vue").PublicProps, Readonly<{}> & Readonly<{
-    "onOn-select-image"?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
     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,7 +5,6 @@ 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<ImageGalleryItem[]>;
+        type: PropType<import("@brand-page").ImageItem[]>;
         required: true;
     };
     maxLength: {
@@ -69,7 +69,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
     };
     value: {
-        type: PropType<ImageGalleryItem[]>;
+        type: PropType<import("@brand-page").ImageItem[]>;
         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<ItemFieldItem[]>;
+        type: PropType<unknown[]>;
         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" | "itemsEdit")[], "items-change" | "items-delete" | "itemsEdit", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("items-change" | "items-delete")[], "items-change" | "items-delete", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
-        type: PropType<ItemFieldItem[]>;
+        type: PropType<unknown[]>;
         required: true;
     };
     canCollapse: {
@@ -53,6 +53,5 @@ 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', 'itemsEdit'],
+    emits: ['items-change', 'items-delete'],
     data: () => ({
         itemStates: {},
     }),