@plitzi/sdk-elements 0.33.2 → 0.34.0

package/dist/elements/media/FontAwesome/index.d.ts

@@ -2,55 +2,60 @@ declare const FontAwesome: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<import('./FontAwesome').FontAwesomeProps>): import("react").JSX.Element;
     displayName: string;
 } & {
-    type: string;
-    content: {
-        attributes: {
-            icon: string;
-            size: string;
-            iconAnimation: string;
+    readonly type: "fontAwesome";
+    readonly content: {
+        readonly attributes: {
+            readonly icon: "fas fa-flag";
+            readonly size: "fa-1x";
+            readonly iconAnimation: "";
         };
-        definition: {
-            label: string;
-            type: string;
-            bindings: {};
-            styleSelectors: {
-                base: string;
+        readonly definition: {
+            readonly label: "Font Awesome";
+            readonly type: "fontAwesome";
+            readonly description: "Renders a Font Awesome icon by its icon name.";
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
             };
-            initialState: {
-                visibility: boolean;
+            readonly initialState: {
+                readonly visibility: true;
             };
         };
-        builder: {
-            canDelete: boolean;
-            canSelect: boolean;
-            canDragDrop: boolean;
-            canMove: boolean;
-            canTemplate: boolean;
-            itemsAllowed: never[];
-            itemsNotAllowed: never[];
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canTemplate: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
         };
-        market: {
-            category: string;
-            owner: string;
-            verified: boolean;
-            license: string;
-            website: string;
-            backgroundColor: string;
-            icon: string;
+        readonly market: {
+            readonly category: "media";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-font-awesome";
         };
-        defaultStyle: {
-            name: string;
-            displayMode: string;
-            style: {
-                base: {
-                    default: {
-                        display: string;
-                        'font-size': string;
+        readonly defaultStyle: {
+            readonly name: "Font Awesome";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly display: "inline-block";
+                        readonly 'font-size': "16px";
                     };
                 };
             };
         };
-        settings: {};
+        readonly settings: {};
     };
-};
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    size?: string | undefined;
+    icon?: string | undefined;
+    iconAnimation?: string | undefined;
+}>>;
 export default FontAwesome;

package/dist/elements/media/FontAwesome/index.mjs

@@ -1,48 +1,6 @@
-import e from "./FontAwesome.mjs";
+import e from "./declaration.mjs";
+import t from "./FontAwesome.mjs";
 //#region src/elements/media/FontAwesome/index.ts
-var t = Object.assign(e, {
-	type: "fontAwesome",
-	content: {
-		attributes: {
-			icon: "fas fa-flag",
-			size: "fa-1x",
-			iconAnimation: ""
-		},
-		definition: {
-			label: "Font Awesome",
-			type: "fontAwesome",
-			bindings: {},
-			styleSelectors: { base: "" },
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canTemplate: !0,
-			itemsAllowed: [],
-			itemsNotAllowed: []
-		},
-		market: {
-			category: "media",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
-			icon: "fa-solid fa-font-awesome"
-		},
-		defaultStyle: {
-			name: "Font Awesome",
-			displayMode: "desktop",
-			style: { base: { default: {
-				display: "inline-block",
-				"font-size": "16px"
-			} } }
-		},
-		settings: {}
-	}
-});
+var n = Object.assign(t, e);
 //#endregion
-export { t as default };
+export { n as default };

package/dist/elements/media/Image/Image.d.ts

@@ -7,7 +7,7 @@ export type ImageProps = {
     fetchPriority?: 'high' | 'low' | 'auto';
     loadMode?: 'eager' | 'lazy';
 };
-declare const Image: ({ ref, className, src, alt, fetchPriority, loadMode }: ImageProps) => import("react").JSX.Element;
+declare const Image: ({ ref, className, src: srcProp, alt, fetchPriority, loadMode }: ImageProps) => import("react").JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<ImageProps>): import("react").JSX.Element;
     displayName: string;

package/dist/elements/media/Image/Image.mjs

@@ -1,37 +1,37 @@
-import { RootElement as e } from "../../../Element/RootElement.mjs";
-import { getFallbackSVGBase64 as t } from "./ImageHelper.mjs";
-import n from "../../../Element/hocs/withElement.mjs";
+import e from "../../../Element/hocs/withElement.mjs";
+import { RootElement as t } from "../../../Element/RootElement.mjs";
+import { getFallbackSVGBase64 as n } from "./ImageHelper.mjs";
 import { useCallback as r } from "react";
 import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
 import { jsx as a } from "react/jsx-runtime";
 import o from "clsx";
 //#region src/elements/media/Image/Image.tsx
-var s = t(), c = ({ ref: t, className: n = "", src: c = "https://cdn.plitzi.com/resources/img/placeholder-img.svg", alt: l = "", fetchPriority: u = "auto", loadMode: d }) => {
-	let { settings: { previewMode: f } } = i(), p = r((e) => {
+var s = n(), c = "https://cdn.plitzi.com/resources/img/placeholder-img.svg", l = ({ ref: e, className: n = "", src: l, alt: u = "", fetchPriority: d = "auto", loadMode: f }) => {
+	let { settings: { previewMode: p } } = i(), m = l || c, h = r((e) => {
 		e.currentTarget.onerror = null, e.currentTarget.src = s;
 	}, []);
-	return f ? /* @__PURE__ */ a(e, {
+	return p ? /* @__PURE__ */ a(t, {
 		tag: "img",
 		draggable: !1,
-		ref: t,
+		ref: e,
 		className: o("plitzi-component__image", n),
-		src: c,
-		alt: l,
-		loading: d,
-		fetchPriority: u,
-		onError: p
-	}) : /* @__PURE__ */ a(e, {
-		ref: t,
+		src: m,
+		alt: u,
+		loading: f,
+		fetchPriority: d,
+		onError: h
+	}) : /* @__PURE__ */ a(t, {
+		ref: e,
 		className: o("plitzi-component__image image--edit-mode", n),
 		children: /* @__PURE__ */ a("img", {
 			draggable: !1,
-			src: c,
-			alt: l,
-			loading: d,
-			fetchPriority: u,
-			onError: p
+			src: m,
+			alt: u,
+			loading: f,
+			fetchPriority: d,
+			onError: h
 		})
 	});
-}, l = n(c);
+}, u = e(l);
 //#endregion
-export { c as Image, l as default };
+export { l as Image, u as default };

package/dist/elements/media/Image/declaration.d.ts

@@ -0,0 +1,65 @@
+import { ImageProps } from './Image';
+import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
+/** What this element can be authored with — its component's own props, minus what the runtime supplies. */
+export type ImageAttributes = AuthorableAttributes<ImageProps>;
+declare const declaration: {
+    readonly type: "image";
+    readonly content: {
+        readonly attributes: {
+            readonly src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg";
+            readonly alt: "";
+            readonly fetchPriority: "auto";
+            readonly loadMode: "auto";
+        };
+        readonly definition: {
+            readonly label: "Image";
+            readonly type: "image";
+            readonly description: "Displays an image from a URL.";
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
+            };
+            readonly initialState: {
+                readonly visibility: true;
+            };
+        };
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canTemplate: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
+        };
+        readonly market: {
+            readonly category: "media";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-image";
+        };
+        readonly defaultStyle: {
+            readonly name: "Image";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly display: "block";
+                        readonly width: "140px";
+                        readonly height: "140px";
+                    };
+                };
+            };
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    fetchPriority?: "high" | "low" | "auto" | undefined;
+    src?: string | undefined;
+    alt?: string | undefined;
+    loadMode?: "eager" | "lazy" | undefined;
+}>>;
+export default declaration;

package/dist/elements/media/Image/declaration.mjs

@@ -0,0 +1,51 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/media/Image/declaration.ts
+var t = e()({
+	type: "image",
+	content: {
+		attributes: {
+			src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg",
+			alt: "",
+			fetchPriority: "auto",
+			loadMode: "auto"
+		},
+		definition: {
+			label: "Image",
+			type: "image",
+			description: "Displays an image from a URL.",
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "media",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-image"
+		},
+		defaultStyle: {
+			name: "Image",
+			displayMode: "desktop",
+			style: { base: { default: {
+				display: "block",
+				width: "140px",
+				height: "140px"
+			} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

package/dist/elements/media/Image/index.d.ts

@@ -2,58 +2,63 @@ declare const Image: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Image').ImageProps>): import("react").JSX.Element;
     displayName: string;
 } & {
-    type: string;
-    content: {
-        attributes: {
-            src: string;
-            alt: string;
-            fetchPriority: string;
-            loadMode: string;
+    readonly type: "image";
+    readonly content: {
+        readonly attributes: {
+            readonly src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg";
+            readonly alt: "";
+            readonly fetchPriority: "auto";
+            readonly loadMode: "auto";
         };
-        definition: {
-            label: string;
-            type: string;
-            description: string;
-            bindings: {};
-            styleSelectors: {
-                base: string;
+        readonly definition: {
+            readonly label: "Image";
+            readonly type: "image";
+            readonly description: "Displays an image from a URL.";
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
             };
-            initialState: {
-                visibility: boolean;
+            readonly initialState: {
+                readonly visibility: true;
             };
         };
-        builder: {
-            canDelete: boolean;
-            canSelect: boolean;
-            canDragDrop: boolean;
-            canMove: boolean;
-            canTemplate: boolean;
-            itemsAllowed: never[];
-            itemsNotAllowed: never[];
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canTemplate: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
         };
-        market: {
-            category: string;
-            owner: string;
-            verified: boolean;
-            license: string;
-            website: string;
-            backgroundColor: string;
-            icon: string;
+        readonly market: {
+            readonly category: "media";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-image";
         };
-        defaultStyle: {
-            name: string;
-            displayMode: string;
-            style: {
-                base: {
-                    default: {
-                        display: string;
-                        width: string;
-                        height: string;
+        readonly defaultStyle: {
+            readonly name: "Image";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly display: "block";
+                        readonly width: "140px";
+                        readonly height: "140px";
                     };
                 };
             };
         };
-        settings: {};
+        readonly settings: {};
     };
-};
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    fetchPriority?: "high" | "low" | "auto" | undefined;
+    src?: string | undefined;
+    alt?: string | undefined;
+    loadMode?: "eager" | "lazy" | undefined;
+}>>;
 export default Image;

package/dist/elements/media/Image/index.mjs

@@ -1,51 +1,6 @@
-import e from "./Image.mjs";
+import e from "./declaration.mjs";
+import t from "./Image.mjs";
 //#region src/elements/media/Image/index.ts
-var t = Object.assign(e, {
-	type: "image",
-	content: {
-		attributes: {
-			src: "https://cdn.plitzi.com/resources/img/placeholder-img.svg",
-			alt: "",
-			fetchPriority: "auto",
-			loadMode: "auto"
-		},
-		definition: {
-			label: "Image",
-			type: "image",
-			description: "Use an URL to display an image.",
-			bindings: {},
-			styleSelectors: { base: "" },
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canTemplate: !0,
-			itemsAllowed: [],
-			itemsNotAllowed: []
-		},
-		market: {
-			category: "media",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
-			icon: "fa-solid fa-image"
-		},
-		defaultStyle: {
-			name: "Image",
-			displayMode: "desktop",
-			style: { base: { default: {
-				display: "block",
-				width: "140px",
-				height: "140px"
-			} } }
-		},
-		settings: {}
-	}
-});
+var n = Object.assign(t, e);
 //#endregion
-export { t as default };
+export { n as default };

package/dist/elements/media/Video/Video.mjs

@@ -1,23 +1,23 @@
-import { RootElement as e } from "../../../Element/RootElement.mjs";
-import t from "../../../Element/hocs/withElement.mjs";
+import e from "../../../Element/hocs/withElement.mjs";
+import { RootElement as t } from "../../../Element/RootElement.mjs";
 import n from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
 import { jsx as r } from "react/jsx-runtime";
 import i from "clsx";
 //#region src/elements/media/Video/Video.tsx
-var a = ({ ref: t, src: a, autoPlay: o = !1, playsInline: s = !1, loop: c = !1, muted: l = !0, className: u = "" }) => {
+var a = ({ ref: e, src: a, autoPlay: o = !1, playsInline: s = !1, loop: c = !1, muted: l = !0, className: u = "" }) => {
 	let { settings: { previewMode: d } } = n();
-	return d ? /* @__PURE__ */ r(e, {
+	return d ? /* @__PURE__ */ r(t, {
 		tag: "video",
 		draggable: !1,
-		ref: t,
+		ref: e,
 		className: i("plitzi-component__video", u),
 		src: a,
 		autoPlay: o,
 		playsInline: s,
 		loop: c,
 		muted: l
-	}) : /* @__PURE__ */ r(e, {
-		ref: t,
+	}) : /* @__PURE__ */ r(t, {
+		ref: e,
 		className: i("plitzi-component__video video--edit-mode", u),
 		children: /* @__PURE__ */ r("video", {
 			src: a,
@@ -28,6 +28,6 @@ var a = ({ ref: t, src: a, autoPlay: o = !1, playsInline: s = !1, loop: c = !1,
 			children: /* @__PURE__ */ r("track", { kind: "captions" })
 		})
 	});
-}, o = t(a);
+}, o = e(a);
 //#endregion
 export { a as Video, o as default };

package/dist/elements/media/Video/declaration.d.ts

@@ -0,0 +1,67 @@
+import { VideoProps } from './Video';
+import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
+/** What this element can be authored with — its component's own props, minus what the runtime supplies. */
+export type VideoAttributes = AuthorableAttributes<VideoProps>;
+declare const declaration: {
+    readonly type: "video";
+    readonly content: {
+        readonly attributes: {
+            readonly src: "";
+            readonly autoPlay: false;
+            readonly playsInline: false;
+            readonly loop: false;
+            readonly muted: true;
+        };
+        readonly definition: {
+            readonly label: "Video";
+            readonly type: "video";
+            readonly description: "Embeds a video from a URL.";
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
+            };
+            readonly initialState: {
+                readonly visibility: true;
+            };
+        };
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canTemplate: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
+        };
+        readonly market: {
+            readonly category: "media";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-solid fa-video";
+        };
+        readonly defaultStyle: {
+            readonly name: "Video";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly display: "block";
+                        readonly width: "400px";
+                        readonly height: "250px";
+                    };
+                };
+            };
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    src?: string | undefined;
+    autoPlay?: boolean | undefined;
+    loop?: boolean | undefined;
+    muted?: boolean | undefined;
+    playsInline?: boolean | undefined;
+}>>;
+export default declaration;

package/dist/elements/media/Video/declaration.mjs

@@ -0,0 +1,52 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/media/Video/declaration.ts
+var t = e()({
+	type: "video",
+	content: {
+		attributes: {
+			src: "",
+			autoPlay: !1,
+			playsInline: !1,
+			loop: !1,
+			muted: !0
+		},
+		definition: {
+			label: "Video",
+			type: "video",
+			description: "Embeds a video from a URL.",
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "media",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-video"
+		},
+		defaultStyle: {
+			name: "Video",
+			displayMode: "desktop",
+			style: { base: { default: {
+				display: "block",
+				width: "400px",
+				height: "250px"
+			} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };