npm - @designcrowd/library.brand-page - Versions diffs - 5.19.2 → 6.0.0 - Mend

@designcrowd/library.brand-page 5.19.2 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (323) hide show

package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItem.mixin.d.ts CHANGED Viewed

@@ -1,8 +1,7 @@
-/// <reference types="types/lodash-shims" />
 import type { PropType } from 'vue';
 import type { ContentSettingsConfig } from '@brand-page-maker/models';
 import type { Field, UpdateItemValuePayload } from '../../models';
-import { type BrandPageContext, type PersonalisationRole } from '@brand-page';
+import { type BrandPageContext, type ContentType, type PersonalisationRole } from '@brand-page';
 import type { DebounceHandle } from 'lodash.debounce';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     id: {
@@ -10,7 +9,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: true;
     };
     type: {
-        type: PropType<"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: PropType<ContentType>;
         required: true;
     };
 }>, {
@@ -20,30 +19,30 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     getContent: import("vue").ComputedRef<(id: string) => import("@brand-page").Content | undefined>;
     getItemState: import("vue").ComputedRef<(id: string) => import("../../models").ContentSettingsItemState>;
     brandPageData: import("vue").ComputedRef<import("@brand-page").BrandPageModel>;
-    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>;
     isPersonalisationEnabled: import("vue").ComputedRef<boolean>;
     isAdmin: import("vue").ComputedRef<boolean>;
     contentSettingsStore: import("pinia").Store<"uiContentSettings", import("../../store").ContentSettingsState, {
         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: 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: 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: ContentType;
+                        personalisationRole?: PersonalisationRole | undefined;
                         topPadding?: number | undefined;
                         bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
@@ -64,37 +63,37 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             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: 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: 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: ContentType;
+                        personalisationRole?: PersonalisationRole | undefined;
                         topPadding?: number | undefined;
                         bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
@@ -115,37 +114,37 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             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: 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: 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: ContentType;
+                        personalisationRole?: PersonalisationRole | undefined;
                         topPadding?: number | undefined;
                         bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
@@ -166,37 +165,37 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             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").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: 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: 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: ContentType;
+                        personalisationRole?: PersonalisationRole | undefined;
                         topPadding?: number | undefined;
                         bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
@@ -217,37 +216,37 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             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: 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: 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: ContentType;
+                        personalisationRole?: PersonalisationRole | undefined;
                         topPadding?: number | undefined;
                         bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
@@ -268,37 +267,37 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             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: 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: 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: ContentType;
+                        personalisationRole?: PersonalisationRole | undefined;
                         topPadding?: number | undefined;
                         bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
@@ -319,26 +318,26 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             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(): import("../../models").ContentItem<any> | undefined;
-        selectedItemTemplate(): ContentSettingsConfig<any, {}> | undefined;
+        selectedItemTemplate(): ContentSettingsConfig<any> | undefined;
     }, {
         onContentChanged(): void;
         _addItem({ item, index, }: {
             item: import("../../models").ContentItem<any>;
-            index?: number | undefined;
+            index?: number;
         }): void;
         setState(payload: {
             newState: Partial<import("../../store").ContentSettingsState>;
@@ -355,7 +354,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         _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;
@@ -369,10 +368,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         _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 }: {
@@ -396,7 +395,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         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;
@@ -419,7 +418,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         addItemByType({ type, index, }: {
             type: string;
-            index?: number | undefined;
+            index?: number;
         }): import("../../models").ContentItem<import("@brand-page").Content> | undefined;
         deleteItem(payload: {
             id: string;
@@ -431,13 +430,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         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;
@@ -445,10 +444,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         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: {
@@ -460,19 +459,19 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             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: import("../../models").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;
     }>;
     sideBarStore: import("pinia").Store<"uiSideBar", import("../../../side-bar/store").SideBarState, {}, {
@@ -481,7 +480,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         setSelectedTabName(payload: import("../../../side-bar/models").SetSelectedTabNamePayload): void;
         setSelectedSettingsSection(payload: {
-            sectionName?: string | undefined;
+            sectionName?: string;
         }): void;
     }>;
     eventTracker: {
@@ -516,15 +515,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         subscribe: (callbackFn: (event: import("@brand-page-maker/composables/useEventTracker").BpEventTrackerEvent) => void) => void;
         sendWebsiteEvent: (event: import("@brand-page-maker/composables/useEventTracker").BpEventTrackerEvent) => void;
         sendWebsiteMakerOpenEvent: (location: string) => void;
-        sendUpsellOpenEvent: (cta_location?: string | undefined) => void;
+        sendUpsellOpenEvent: (cta_location?: string) => void;
         sendDomainUpsellOpenEvent: () => void;
         sendDomainUpsellContinuationEvent: (continuation: string) => void;
         sendUpsellContinuationEvent: (continuation: string) => void;
         sendPublishOpenEvent: () => void;
         appendPublishBridgeState: (props: any) => void;
         sendPublishContinuationEvent: (continuation: string, domain: string | null) => void;
-        sendWebsiteManageAddPageEvent: (pageName: string, isSubPageMode?: boolean | undefined) => void;
-        sendWebsiteManageRemovePageEvent: (pageName: string, isRouteNested?: boolean | undefined) => void;
+        sendWebsiteManageAddPageEvent: (pageName: string, isSubPageMode?: boolean) => void;
+        sendWebsiteManageRemovePageEvent: (pageName: string, isRouteNested?: boolean) => void;
         sendWebsiteManageReorderPageEvent: (pageName: string) => void;
         sendPublishOptionsForFreeEvent: () => void;
         sendPublishOptionsForPremiumEvent: () => void;
@@ -533,8 +532,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         sendTemplateSelectEvent: (templateId: string) => void;
         sendTemplateCategorySelectEvent: (category: string) => void;
         sendSidebarCategoryClickedEvent: (tabName: string) => void;
-        sendAddContentEvent: (contentType: string, selectLocation?: string | undefined, contentCategory?: string | undefined, triggerType?: string) => void;
-        sendRemoveContentEvent: (contentType: string, selectLocation?: string | undefined, contentCategory?: string | undefined, triggerType?: string) => void;
+        sendAddContentEvent: (contentType: string, selectLocation?: string, contentCategory?: string, triggerType?: string) => void;
+        sendRemoveContentEvent: (contentType: string, selectLocation?: string, contentCategory?: string, triggerType?: string) => void;
         sendAddContentContinuationEvent: (continuation: string) => void;
         sendUpsellOfferEvent: (upsellType: string) => void;
         sendUpsellOfferActionEvent: (upsellType: string, action: string) => void;
@@ -561,14 +560,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     toggleButtonClick(): void;
     sendSelectContentEvent(): void;
     onPersonalisationRoleChange(payload: UpdateItemValuePayload<PersonalisationRole | undefined>): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("capture-preview-snapshot" | "on-delete" | "capture-snapshot-before-modal")[], "capture-preview-snapshot" | "on-delete" | "capture-snapshot-before-modal", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;
         required: true;
     };
     type: {
-        type: PropType<"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: PropType<ContentType>;
         required: true;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{
+    "onCapture-preview-snapshot"?: ((...args: any[]) => any) | undefined;
+    "onOn-delete"?: ((...args: any[]) => any) | undefined;
+    "onCapture-snapshot-before-modal"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItem.mixin.js CHANGED Viewed

@@ -23,6 +23,11 @@ export default defineComponent({
             required: true,
         },
     },
+    emits: [
+        'on-delete',
+        'capture-snapshot-before-modal',
+        'capture-preview-snapshot',
+    ],
     setup() {
         const contentSettingsStore = useUiContentSettingsStore();
         const sideBarStore = useUiSideBarStore();