@plitzi/sdk-elements 0.33.2 → 0.34.0

package/dist/elements/internal/Page/Page.mjs

@@ -1,7 +1,7 @@
-import e from "../../../Element/hooks/useElement.mjs";
-import { RootElement as t } from "../../../Element/RootElement.mjs";
-import n from "../LayoutContainer/index.mjs";
-import r from "../../../Element/hocs/withElement.mjs";
+import e from "../../../Element/hocs/withElement.mjs";
+import t from "../../../Element/hooks/useElement.mjs";
+import { RootElement as n } from "../../../Element/RootElement.mjs";
+import r from "../LayoutContainer/index.mjs";
 import { use as i, useEffect as a, useMemo as o } from "react";
 import s from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
 import { useSdkStore as c } from "@plitzi/sdk-shared/store";
@@ -9,8 +9,8 @@ import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import d from "clsx";
 import { Helmet as f } from "@dr.pogodin/react-helmet";
 //#region src/elements/internal/Page/Page.tsx
-var p = ({ ref: r, seoEnabled: p = !1, seoPageTitle: m = "Title", seoPageDescription: h = "Description", className: g = "", layout: _ = "", layoutContainer: v = "", children: y }) => {
-	let { id: b, idRef: x } = e(), { settings: { previewMode: S }, contexts: { InteractionsContext: C } } = s(), { interactionsManager: w } = i(C), [[T, E]] = c(["navigation.routeParams", "navigation.queryParams"]), D = o(() => ({
+var p = ({ ref: e, seoEnabled: p = !1, seoPageTitle: m = "Title", seoPageDescription: h = "Description", className: g = "", layout: _ = "", layoutContainer: v = "", children: y }) => {
+	let { id: b } = t(), { settings: { previewMode: x }, contexts: { InteractionsContext: S } } = s(), { interactionsManager: C } = i(S), [[w, T]] = c(["navigation.routeParams", "navigation.queryParams"]), E = o(() => ({
 		id: _,
 		rootId: b,
 		plitziElementLayout: {
@@ -25,7 +25,7 @@ var p = ({ ref: r, seoEnabled: p = !1, seoPageTitle: m = "Title", seoPageDescrip
 		_,
 		b,
 		y
-	]), O = o(() => ({ onPageLoad: {
+	]), D = o(() => ({ onPageLoad: {
 		action: "onPageLoad",
 		title: "On Page Load",
 		type: "trigger",
@@ -37,30 +37,34 @@ var p = ({ ref: r, seoEnabled: p = !1, seoPageTitle: m = "Title", seoPageDescrip
 		}
 	} }), []);
 	return a(() => {
-		w.interactionTrigger(x, "onPageLoad", {
-			pageId: b,
-			routeParams: T,
-			queryParams: E
-		});
+		let e = !1;
+		return queueMicrotask(() => {
+			e || C.interactionTrigger(b, "onPageLoad", {
+				pageId: b,
+				routeParams: w,
+				queryParams: T
+			});
+		}), () => {
+			e = !0;
+		};
 	}, [
 		b,
-		x,
-		w,
-		E,
-		T
-	]), /* @__PURE__ */ u(t, {
-		ref: r,
+		C,
+		T,
+		w
+	]), /* @__PURE__ */ u(n, {
+		ref: e,
 		className: d("plitzi-component__page", g),
-		interactionTriggers: O,
+		interactionTriggers: D,
 		children: [
-			p && S && /* @__PURE__ */ u(f, { children: [!!m && /* @__PURE__ */ l("title", { children: m }), !!h && /* @__PURE__ */ l("meta", {
+			p && x && /* @__PURE__ */ u(f, { children: [!!m && /* @__PURE__ */ l("title", { children: m }), !!h && /* @__PURE__ */ l("meta", {
 				name: "description",
 				content: h
 			})] }),
-			_ && /* @__PURE__ */ l(n, { internalProps: D }),
+			_ && /* @__PURE__ */ l(r, { internalProps: E }, v || _),
 			!_ && y
 		]
 	});
-}, m = r(p);
+}, m = e(p);
 //#endregion
 export { p as Page, m as default };

package/dist/elements/internal/Page/declaration.d.ts

@@ -0,0 +1,80 @@
+import { PageProps } from './Page';
+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 PageAttributes = AuthorableAttributes<PageProps>;
+declare const declaration: {
+    readonly type: "page";
+    readonly content: {
+        readonly attributes: {
+            readonly enabled: true;
+            readonly name: "Page";
+            readonly slug: "";
+            readonly folder: "";
+            readonly layout: "";
+            readonly layoutContainer: "";
+            readonly seoEnabled: false;
+            readonly seoPageTitle: "Title";
+            readonly seoPageDescription: "Description";
+        };
+        readonly definition: {
+            readonly label: "Page";
+            readonly type: "page";
+            readonly description: string;
+            readonly items: readonly [];
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
+            };
+            readonly initialState: {
+                readonly visibility: true;
+            };
+        };
+        readonly builder: {
+            readonly canDelete: false;
+            readonly canSelect: true;
+            readonly canDragDrop: false;
+            readonly canMove: false;
+            readonly canTemplate: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
+        };
+        readonly market: {
+            readonly category: "internal";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fas fa-file";
+        };
+        readonly defaultStyle: {
+            readonly name: "Page";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly display: "flex";
+                        readonly 'flex-direction': "column";
+                        readonly 'min-height': "100%";
+                        readonly 'min-width': "100%";
+                        readonly 'font-family': "Arial";
+                        readonly color: "#333";
+                        readonly 'font-size': "14px";
+                        readonly 'font-weight': 400;
+                        readonly 'line-height': "16px";
+                        readonly 'text-align': "left";
+                        readonly 'background-color': "#ffffff";
+                    };
+                };
+            };
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    layout?: string | undefined;
+    layoutContainer?: string | undefined;
+    seoEnabled?: boolean | undefined;
+    seoPageTitle?: string | undefined;
+    seoPageDescription?: string | undefined;
+}>>;
+export default declaration;

package/dist/elements/internal/Page/declaration.mjs

@@ -0,0 +1,65 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/internal/Page/declaration.ts
+var t = e()({
+	type: "page",
+	content: {
+		attributes: {
+			enabled: !0,
+			name: "Page",
+			slug: "",
+			folder: "",
+			layout: "",
+			layoutContainer: "",
+			seoEnabled: !1,
+			seoPageTitle: "Title",
+			seoPageDescription: "Description"
+		},
+		definition: {
+			label: "Page",
+			type: "page",
+			description: "The root of a routable screen. Managed through the page ops (upsertPage/deletePage), not added as a child element.",
+			items: [],
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !1,
+			canSelect: !0,
+			canDragDrop: !1,
+			canMove: !1,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "internal",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fas fa-file"
+		},
+		defaultStyle: {
+			name: "Page",
+			displayMode: "desktop",
+			style: { base: { default: {
+				display: "flex",
+				"flex-direction": "column",
+				"min-height": "100%",
+				"min-width": "100%",
+				"font-family": "Arial",
+				color: "#333",
+				"font-size": "14px",
+				"font-weight": 400,
+				"line-height": "16px",
+				"text-align": "left",
+				"background-color": "#ffffff"
+			} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

package/dist/elements/internal/Page/index.d.ts

@@ -2,72 +2,78 @@ declare const Page: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Page').PageProps>): import("react").JSX.Element;
     displayName: string;
 } & {
-    type: string;
-    content: {
-        attributes: {
-            enabled: boolean;
-            name: string;
-            slug: string;
-            folder: string;
-            layout: string;
-            layoutContainer: string;
-            seoEnabled: boolean;
-            seoPageTitle: string;
-            seoPageDescription: string;
+    readonly type: "page";
+    readonly content: {
+        readonly attributes: {
+            readonly enabled: true;
+            readonly name: "Page";
+            readonly slug: "";
+            readonly folder: "";
+            readonly layout: "";
+            readonly layoutContainer: "";
+            readonly seoEnabled: false;
+            readonly seoPageTitle: "Title";
+            readonly seoPageDescription: "Description";
         };
-        definition: {
-            label: string;
-            type: string;
-            description: string;
-            items: never[];
-            bindings: {};
-            styleSelectors: {
-                base: string;
+        readonly definition: {
+            readonly label: "Page";
+            readonly type: "page";
+            readonly description: string;
+            readonly items: readonly [];
+            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: false;
+            readonly canSelect: true;
+            readonly canDragDrop: false;
+            readonly canMove: false;
+            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: "internal";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fas fa-file";
         };
-        defaultStyle: {
-            name: string;
-            displayMode: string;
-            style: {
-                base: {
-                    default: {
-                        display: string;
-                        'flex-direction': string;
-                        'min-height': string;
-                        'min-width': string;
-                        'font-family': string;
-                        color: string;
-                        'font-size': string;
-                        'font-weight': number;
-                        'line-height': string;
-                        'text-align': string;
-                        'background-color': string;
+        readonly defaultStyle: {
+            readonly name: "Page";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly display: "flex";
+                        readonly 'flex-direction': "column";
+                        readonly 'min-height': "100%";
+                        readonly 'min-width': "100%";
+                        readonly 'font-family': "Arial";
+                        readonly color: "#333";
+                        readonly 'font-size': "14px";
+                        readonly 'font-weight': 400;
+                        readonly 'line-height': "16px";
+                        readonly 'text-align': "left";
+                        readonly 'background-color': "#ffffff";
                     };
                 };
             };
         };
-        settings: {};
+        readonly settings: {};
     };
-};
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    layout?: string | undefined;
+    layoutContainer?: string | undefined;
+    seoEnabled?: boolean | undefined;
+    seoPageTitle?: string | undefined;
+    seoPageDescription?: string | undefined;
+}>>;
 export default Page;

package/dist/elements/internal/Page/index.mjs

@@ -1,65 +1,6 @@
-import e from "./Page.mjs";
+import e from "./declaration.mjs";
+import t from "./Page.mjs";
 //#region src/elements/internal/Page/index.ts
-var t = Object.assign(e, {
-	type: "page",
-	content: {
-		attributes: {
-			enabled: !0,
-			name: "Page",
-			slug: "",
-			folder: "",
-			layout: "",
-			layoutContainer: "",
-			seoEnabled: !1,
-			seoPageTitle: "Title",
-			seoPageDescription: "Description"
-		},
-		definition: {
-			label: "Page",
-			type: "page",
-			description: "",
-			items: [],
-			bindings: {},
-			styleSelectors: { base: "" },
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !1,
-			canSelect: !0,
-			canDragDrop: !1,
-			canMove: !1,
-			canTemplate: !0,
-			itemsAllowed: [],
-			itemsNotAllowed: []
-		},
-		market: {
-			category: "internal",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
-			icon: "fas fa-file"
-		},
-		defaultStyle: {
-			name: "Page",
-			displayMode: "desktop",
-			style: { base: { default: {
-				display: "flex",
-				"flex-direction": "column",
-				"min-height": "100%",
-				"min-width": "100%",
-				"font-family": "Arial",
-				color: "#333",
-				"font-size": "14px",
-				"font-weight": 400,
-				"line-height": "16px",
-				"text-align": "left",
-				"background-color": "#ffffff"
-			} } }
-		},
-		settings: {}
-	}
-});
+var n = Object.assign(t, e);
 //#endregion
-export { t as default };
+export { n as default };

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

@@ -1,20 +1,12 @@
-import { RootElement as e } from "../../../Element/RootElement.mjs";
-import t from "../../../Element/hocs/withElement.mjs";
-import n from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { jsx as r } from "react/jsx-runtime";
-import i from "clsx";
+import e from "../../../Element/hocs/withElement.mjs";
+import { RootElement as t } from "../../../Element/RootElement.mjs";
+import { jsx as n } from "react/jsx-runtime";
+import r from "clsx";
 //#region src/elements/media/FontAwesome/FontAwesome.tsx
-var a = ({ ref: t, className: a = "", icon: o = "fas fa-flag", size: s = "fa-1x", iconAnimation: c = "" }) => {
-	let { settings: { previewMode: l } } = n();
-	return l ? /* @__PURE__ */ r(e, {
-		ref: t,
-		tag: "i",
-		className: i("plitzi-component__fontawesome", a, o, s, c)
-	}) : /* @__PURE__ */ r(e, {
-		ref: t,
-		className: i("plitzi-component__fontawesome fontawesome--edit-mode", a),
-		children: /* @__PURE__ */ r("i", { className: i(o, s, c) })
-	});
-}, o = t(a);
+var i = ({ ref: e, className: i = "", icon: a = "fas fa-flag", size: o = "fa-1x", iconAnimation: s = "" }) => /* @__PURE__ */ n(t, {
+	ref: e,
+	tag: "i",
+	className: r("plitzi-component__fontawesome", i, a, o, s)
+}), a = e(i);
 //#endregion
-export { a as FontAwesome, o as default };
+export { i as FontAwesome, a as default };

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

@@ -0,0 +1,62 @@
+import { FontAwesomeProps } from './FontAwesome';
+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 FontAwesomeAttributes = AuthorableAttributes<FontAwesomeProps>;
+declare const declaration: {
+    readonly type: "fontAwesome";
+    readonly content: {
+        readonly attributes: {
+            readonly icon: "fas fa-flag";
+            readonly size: "fa-1x";
+            readonly iconAnimation: "";
+        };
+        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: "";
+            };
+            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-font-awesome";
+        };
+        readonly defaultStyle: {
+            readonly name: "Font Awesome";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly display: "inline-block";
+                        readonly 'font-size': "16px";
+                    };
+                };
+            };
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    size?: string | undefined;
+    icon?: string | undefined;
+    iconAnimation?: string | undefined;
+}>>;
+export default declaration;

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

@@ -0,0 +1,49 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/media/FontAwesome/declaration.ts
+var t = e()({
+	type: "fontAwesome",
+	content: {
+		attributes: {
+			icon: "fas fa-flag",
+			size: "fa-1x",
+			iconAnimation: ""
+		},
+		definition: {
+			label: "Font Awesome",
+			type: "fontAwesome",
+			description: "Renders a Font Awesome icon by its icon name.",
+			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: {}
+	}
+});
+//#endregion
+export { t as default };