@plitzi/sdk-elements 0.30.19

package/dist/elements/structure/List/ListItem/index.mjs

@@ -0,0 +1,46 @@
+import e from "./ListItem.mjs";
+//#region src/elements/structure/List/ListItem/index.ts
+var t = Object.assign(e, {
+	type: "listItem",
+	content: {
+		attributes: {},
+		definition: {
+			label: "List Item",
+			type: "listItem",
+			description: "The List Item element lets you add more items to existing List elements. You can then add any content you would like to them, including links, images, etc.",
+			items: [],
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: ["listItem"]
+		},
+		market: {
+			category: "structure",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-list"
+		},
+		defaultStyle: {
+			name: "List Item",
+			displayMode: "desktop",
+			style: { base: { default: {
+				"min-width": "50px",
+				"min-height": "50px"
+			} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

package/dist/elements/structure/List/Settings.d.ts

@@ -0,0 +1,7 @@
+type SettingsProps = {
+    subType?: 'ul' | 'ol';
+    source?: 'none' | 'controlled';
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ subType, source, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default Settings;

package/dist/elements/structure/List/Settings.mjs

@@ -0,0 +1,37 @@
+import { useCallback as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/Select";
+//#region src/elements/structure/List/Settings.tsx
+var i = ({ subType: i = "ul", source: a = "none", onUpdate: o }) => {
+	let s = e((e) => (t) => o?.(e, t), [o]);
+	return /* @__PURE__ */ n("div", {
+		className: "flex flex-col gap-4 py-2",
+		children: [/* @__PURE__ */ n(r, {
+			label: "Source",
+			value: a,
+			onChange: s("source"),
+			size: "xs",
+			children: [/* @__PURE__ */ t("option", {
+				value: "none",
+				children: "None"
+			}), /* @__PURE__ */ t("option", {
+				value: "controlled",
+				children: "Controlled"
+			})]
+		}), a === "none" && /* @__PURE__ */ n(r, {
+			label: "List Type",
+			value: i,
+			onChange: s("subType"),
+			size: "xs",
+			children: [/* @__PURE__ */ t("option", {
+				value: "ul",
+				children: "Unordered"
+			}), /* @__PURE__ */ t("option", {
+				value: "ol",
+				children: "Ordered"
+			})]
+		})]
+	});
+};
+//#endregion
+export { i as default };

package/dist/elements/structure/List/index.d.ts

@@ -0,0 +1,143 @@
+declare const List: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./List').ListProps<unknown>>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    type: string;
+    content: {
+        attributes: {
+            items: never[];
+            source: string;
+            subType: string;
+        };
+        definition: {
+            label: string;
+            type: string;
+            description: string;
+            items: never[];
+            bindings: {};
+            styleSelectors: {
+                base: string;
+            };
+            initialState: {
+                visibility: boolean;
+            };
+        };
+        builder: {
+            canDelete: boolean;
+            canSelect: boolean;
+            canDragDrop: boolean;
+            canMove: boolean;
+            canTemplate: boolean;
+            itemsAllowed: never[];
+            itemsNotAllowed: never[];
+        };
+        market: {
+            category: string;
+            owner: string;
+            verified: boolean;
+            license: string;
+            website: string;
+            backgroundColor: string;
+            icon: string;
+        };
+        defaultStyle: {
+            name: string;
+            displayMode: string;
+            style: {
+                base: {
+                    default: {};
+                };
+            };
+            subTypes: {
+                ul: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {
+                                'margin-top': string;
+                                'margin-bottom': string;
+                                'padding-left': string;
+                                'min-width': string;
+                                'min-height': string;
+                            };
+                        };
+                    };
+                };
+                ol: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {
+                                'margin-top': string;
+                                'margin-bottom': string;
+                                'padding-left': string;
+                                'min-width': string;
+                                'min-height': string;
+                            };
+                        };
+                    };
+                };
+            };
+        };
+        settings: {};
+    };
+    initialItems: string[];
+    plugins: {
+        listItem: {
+            (props: import('../../../Element/hocs/withElement').WithElementProps<import('./ListItem/ListItem').ListItemProps>): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        } & {
+            type: string;
+            content: {
+                attributes: {};
+                definition: {
+                    label: string;
+                    type: string;
+                    description: string;
+                    items: never[];
+                    bindings: {};
+                    styleSelectors: {
+                        base: string;
+                    };
+                    initialState: {
+                        visibility: boolean;
+                    };
+                };
+                builder: {
+                    canDelete: boolean;
+                    canSelect: boolean;
+                    canDragDrop: boolean;
+                    canMove: boolean;
+                    canTemplate: boolean;
+                    itemsAllowed: never[];
+                    itemsNotAllowed: string[];
+                };
+                market: {
+                    category: string;
+                    owner: string;
+                    verified: boolean;
+                    license: string;
+                    website: string;
+                    backgroundColor: string;
+                    icon: string;
+                };
+                defaultStyle: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {
+                                'min-width': string;
+                                'min-height': string;
+                            };
+                        };
+                    };
+                };
+                settings: {};
+            };
+        };
+    };
+};
+export default List;

package/dist/elements/structure/List/index.mjs

@@ -0,0 +1,78 @@
+import e from "./List.mjs";
+import t from "./ListItem/index.mjs";
+//#region src/elements/structure/List/index.ts
+var n = Object.assign(e, {
+	type: "list",
+	content: {
+		attributes: {
+			items: [],
+			source: "none",
+			subType: "ul"
+		},
+		definition: {
+			label: "List",
+			type: "list",
+			description: "A List gives you the ability to group elements or content (like links in a navigation menu, or steps in a recipe), to add helpful structure to your site.",
+			items: [],
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "structure",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-list"
+		},
+		defaultStyle: {
+			name: "List",
+			displayMode: "desktop",
+			style: { base: { default: {} } },
+			subTypes: {
+				ul: {
+					name: "List UL",
+					displayMode: "desktop",
+					style: { base: { default: {
+						"margin-top": "0px",
+						"margin-bottom": "10px",
+						"padding-left": "40px",
+						"min-width": "50px",
+						"min-height": "50px"
+					} } }
+				},
+				ol: {
+					name: "List OL",
+					displayMode: "desktop",
+					style: { base: { default: {
+						"margin-top": "0px",
+						"margin-bottom": "10px",
+						"padding-left": "40px",
+						"min-width": "50px",
+						"min-height": "50px"
+					} } }
+				}
+			}
+		},
+		settings: {}
+	},
+	initialItems: [
+		"listItem",
+		"listItem",
+		"listItem"
+	],
+	plugins: { listItem: t }
+});
+//#endregion
+export { n as default };

package/dist/elements/structure/List/modes/ListBasic.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode, RefObject } from 'react';
+export type ListBasicProps = {
+    ref?: RefObject<HTMLElement>;
+    className?: string;
+    subType?: 'ul' | 'ol';
+    children?: ReactNode;
+};
+declare const ListBasic: ({ ref, className, subType, children }: ListBasicProps) => import("react/jsx-runtime").JSX.Element;
+export default ListBasic;

package/dist/elements/structure/List/modes/ListBasic.mjs

@@ -0,0 +1,12 @@
+import e from "../../../../Element/RootElement.mjs";
+import { jsx as t } from "react/jsx-runtime";
+import n from "clsx";
+//#region src/elements/structure/List/modes/ListBasic.tsx
+var r = ({ ref: r, className: i = "", subType: a = "ul", children: o }) => /* @__PURE__ */ t(e, {
+	ref: r,
+	tag: a,
+	className: n("plitzi-component__list", i),
+	children: o
+});
+//#endregion
+export { r as default };

package/dist/elements/structure/List/modes/ListControlled/ListControlled.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode, RefObject } from 'react';
+export type ListControlledProps<T = unknown> = {
+    ref?: RefObject<HTMLElement>;
+    className: string;
+    children: ReactNode;
+    items: T[];
+};
+declare const ListControlled: ({ ref, className, children, items }: ListControlledProps) => import("react/jsx-runtime").JSX.Element;
+export default ListControlled;

package/dist/elements/structure/List/modes/ListControlled/ListControlled.mjs

@@ -0,0 +1,50 @@
+import e from "../../../../../Element/RootElement.mjs";
+import t from "./ListControlledItem.mjs";
+import { use as n, useCallback as r, useMemo as i } from "react";
+import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { get as o } from "@plitzi/plitzi-ui/helpers";
+import { getPathsFromObeject as s } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import u from "clsx";
+import d from "@plitzi/sdk-shared/elements/hooks/useElement";
+//#region src/elements/structure/List/modes/ListControlled/ListControlled.tsx
+var f = ({ ref: f, className: p = "", children: m, items: h = [] }) => {
+	let { id: g, definition: { label: _ } } = d(), { settings: { previewMode: v }, contexts: { DataSourceContext: y } } = a(), { useDataSource: b } = n(y), x = i(() => Array.isArray(h) ? h : [], [h]), S = r(() => s({
+		item: o(x, "0", {}),
+		index: "0"
+	}).reduce((e, t) => [...e, {
+		path: t,
+		name: t
+	}], []), [x]), C = i(() => ({ items: x }), [x]), [w, T] = b({
+		id: g,
+		source: `list_${g}`,
+		mode: "write",
+		name: _ || `List - ${g}`,
+		fields: S
+	});
+	return /* @__PURE__ */ l(e, {
+		ref: f,
+		className: u("plitzi-component__controlled-list", p, { "controlled-list--build-mode": !v }),
+		children: [/* @__PURE__ */ c(w, {
+			value: C,
+			children: x.map((e, n) => !m || Array.isArray(m) && m.length === 0 ? /* @__PURE__ */ c("div", {
+				className: "plitzi-component__controlled-list-item controlled-list--empty",
+				children: /* @__PURE__ */ c("div", {
+					className: "controlled-list-item__counter",
+					children: `List Item - ${n + 1}`
+				})
+			}, n) : /* @__PURE__ */ c(t, {
+				itemCount: n + 1,
+				isTemplate: n !== 0 && !v,
+				record: e,
+				listContextId: T,
+				children: m
+			}, n))
+		}), !v && x.length === 0 && /* @__PURE__ */ c("div", {
+			className: "controlled-list controlled-list--empty",
+			children: "This list does not contain any items"
+		})]
+	});
+};
+//#endregion
+export { f as default };

package/dist/elements/structure/List/modes/ListControlled/ListControlledItem.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export type ListControlledItemProps<T = unknown> = {
+    children: ReactNode;
+    className?: string;
+    isTemplate: boolean;
+    itemCount: number;
+    record: T;
+    listContextId: string;
+};
+declare const ListControlledItem: ({ children, className, isTemplate, itemCount, record, listContextId }: ListControlledItemProps) => import("react/jsx-runtime").JSX.Element;
+export default ListControlledItem;

package/dist/elements/structure/List/modes/ListControlled/ListControlledItem.mjs

@@ -0,0 +1,27 @@
+import e from "../../../../../Element/ReplicaProvider.mjs";
+import { use as t, useMemo as n } from "react";
+import r from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "clsx";
+//#region src/elements/structure/List/modes/ListControlled/ListControlledItem.tsx
+var s = ({ children: s, className: c = "", isTemplate: l = !1, itemCount: u = 0, record: d, listContextId: f = "" }) => {
+	let { contexts: { DataSourceContext: p } } = r(), { getSources: m } = t(p), h = n(() => ({
+		item: d,
+		index: `${u}`
+	}), [d, u]), g = n(() => m(f)?.context, [f, m]);
+	return l ? /* @__PURE__ */ a("div", {
+		className: o("plitzi-component__controlled-list-item", c),
+		children: [/* @__PURE__ */ i("div", {
+			className: "controlled-list-item__counter",
+			children: `List Item - ${u}`
+		}), /* @__PURE__ */ a(e, { children: [g && /* @__PURE__ */ i(g, {
+			value: h,
+			children: s
+		}), !g && "This element can be only inside a List"] })]
+	}) : /* @__PURE__ */ a(e, { children: [g && /* @__PURE__ */ i(g, {
+		value: h,
+		children: s
+	}), !g && "This element can be only inside a List"] });
+};
+//#endregion
+export { s as default };

package/dist/elements/structure/List/modes/ListControlled/index.d.ts

@@ -0,0 +1,2 @@
+import { default as ListControlled } from './ListControlled';
+export default ListControlled;

package/dist/elements/structure/List/modes/ListControlled/index.mjs

@@ -0,0 +1,5 @@
+import e from "./ListControlled.mjs";
+//#region src/elements/structure/List/modes/ListControlled/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/dist/elements/structure/ModalContainer/ModalContainer.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode, RefObject } from 'react';
+export type ModalContainerProps = {
+    ref?: RefObject<HTMLElement>;
+    className?: string;
+    children?: ReactNode;
+    title?: string;
+    autoHideAfterClick?: boolean;
+};
+declare const ModalContainer: ({ ref, className, children, title, autoHideAfterClick }: ModalContainerProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<ModalContainerProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { ModalContainer };

package/dist/elements/structure/ModalContainer/ModalContainer.mjs

@@ -0,0 +1,144 @@
+import e from "../../../Element/RootElement.mjs";
+import t from "../../../Element/hocs/withElement.mjs";
+import { use as n, useCallback as r, useEffect as i, useMemo as a, useState as o } from "react";
+import s from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { getPathsFromObeject as c } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import d from "clsx";
+import f from "@plitzi/sdk-shared/elements/hooks/useElement";
+var p = t(({ ref: t, className: p = "", children: m, title: h = "Modal Header", autoHideAfterClick: g = !0 }) => {
+	let { id: _, definition: { styleSelectors: v, label: y = "Modal" }, elementState: b, setElementState: x } = f(), { contexts: { InteractionsContext: S, DataSourceContext: C } } = s(), { interactionsManager: w } = n(S), { useDataSource: T } = n(C), [E, D] = o({}), O = r((e) => {
+		let { metadata: t } = e;
+		if (t && typeof t == "object") D(t);
+		else if (typeof t == "string") try {
+			D(JSON.parse(t));
+		} catch {
+			D({ content: t });
+		}
+		else D(typeof t == "boolean" || typeof t == "number" ? { content: t } : {});
+		x((e) => ({
+			...e,
+			visibility: !0
+		}));
+	}, [x, D]), k = r(() => {
+		w.interactionTrigger(_, "onModalClose", { metadata: E }), D({}), x((e) => ({
+			...e,
+			visibility: !1
+		}));
+	}, [
+		w,
+		x,
+		D,
+		E,
+		_
+	]), A = r(() => {
+		g && (w.interactionTrigger(_, "onModalClose", { metadata: E }), D({}), x((e) => ({
+			...e,
+			visibility: !1
+		})));
+	}, [
+		w,
+		g,
+		x,
+		D,
+		E,
+		_
+	]), j = a(() => ({
+		onModalOpen: {
+			action: "onModalOpen",
+			title: "On Modal Open",
+			type: "trigger",
+			params: { metadata: {
+				type: "text",
+				defaultValue: ""
+			} },
+			preview: { metadata: "" }
+		},
+		onModalClose: {
+			action: "onModalClose",
+			title: "On Modal Close",
+			type: "trigger",
+			preview: {},
+			params: {}
+		}
+	}), []), M = a(() => ({
+		openModal: {
+			action: "openModal",
+			title: `Open ${y}`,
+			type: "callback",
+			callback: O,
+			params: { metadata: {
+				type: "text",
+				defaultValue: ""
+			} },
+			preview: { metadata: "" }
+		},
+		closeModal: {
+			action: "closeModal",
+			title: `Close ${y}`,
+			type: "callback",
+			callback: k,
+			params: {},
+			preview: {}
+		}
+	}), [
+		k,
+		O,
+		y
+	]);
+	i(() => {
+		b.visibility !== !1 && w.interactionTrigger(_, "onModalOpen", { metadata: E });
+	}, [
+		_,
+		w,
+		E,
+		b.visibility
+	]);
+	let N = r(() => c(E).reduce((e, t) => {
+		let n = t.split(".");
+		return n.length > 1 ? [...e, {
+			path: t,
+			name: n.slice(n.length - 2).join(" ")
+		}] : [...e, {
+			path: t,
+			name: n[n.length - 1]
+		}];
+	}, []), [E]), [P] = T({
+		id: _,
+		source: `modalContainer_${_}`,
+		mode: "write",
+		name: y || `Modal - ${_}`,
+		fields: N
+	});
+	return /* @__PURE__ */ u(e, {
+		ref: t,
+		className: d("plitzi-component__modal-container", p),
+		interactionTriggers: j,
+		interactionCallbacks: M,
+		children: [/* @__PURE__ */ l("div", {
+			className: d("modal-container__background", v.backgroundContainer),
+			onClick: A
+		}), /* @__PURE__ */ u("div", {
+			className: d("modal-container__root", v.rootContainer),
+			children: [/* @__PURE__ */ u("div", {
+				className: d("modal-container__header", v.headerContainer),
+				children: [/* @__PURE__ */ l("div", {
+					className: d("modal-container__header__title", v.headerTitle),
+					children: h || "Modal Header"
+				}), /* @__PURE__ */ l("i", {
+					className: d("fa-solid fa-xmark", v.headerCloseButton),
+					title: "Close",
+					onClick: k
+				})]
+			}), /* @__PURE__ */ l("div", {
+				className: d("modal-container__body", v.bodyContainer),
+				children: /* @__PURE__ */ l(P, {
+					value: E,
+					children: m
+				})
+			})]
+		})]
+	});
+});
+//#endregion
+export { p as default };

package/dist/elements/structure/ModalContainer/Settings.d.ts

@@ -0,0 +1,7 @@
+type SettingsProps = {
+    title?: string;
+    autoHideAfterClick?: boolean;
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ title, autoHideAfterClick, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default Settings;

package/dist/elements/structure/ModalContainer/Settings.mjs

@@ -0,0 +1,24 @@
+import { useCallback as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/Checkbox";
+import i from "@plitzi/plitzi-ui/Input";
+//#region src/elements/structure/ModalContainer/Settings.tsx
+var a = ({ title: a = "Modal Header", autoHideAfterClick: o = !0, onUpdate: s }) => {
+	let c = e((e) => (t) => s?.(e, t), [s]), l = e((e) => s?.("autoHideAfterClick", e.target.checked), [s]);
+	return /* @__PURE__ */ n("div", {
+		className: "flex flex-col gap-4 py-2",
+		children: [/* @__PURE__ */ t(i, {
+			label: "Title",
+			value: a,
+			onChange: c("title"),
+			size: "xs"
+		}), /* @__PURE__ */ t(r, {
+			label: "Hide after click background",
+			checked: o,
+			onChange: l,
+			size: "xs"
+		})]
+	});
+};
+//#endregion
+export { a as default };