@plitzi/sdk-elements 0.30.19

package/dist/elements/structure/DialogContainer/DialogContainer.mjs

@@ -0,0 +1,209 @@
+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, headerLabel: h = "Dialog Header", acceptButtonLabel: g = "Accept", acceptButtonLabelLoading: _ = "Loading...", rejectButtonLabel: v = "Cancel", autoHideAfterClick: y = !0 }) => {
+	let { id: b, setElementState: x, definition: { styleSelectors: S, label: C = "Dialog" }, elementState: w } = f(), { contexts: { InteractionsContext: T, DataSourceContext: E } } = s(), { interactionsManager: D } = n(T), { useDataSource: O } = n(E), [k, A] = o({}), [j, M] = o(!1), N = r((e) => {
+		let { metadata: t } = e;
+		if (t && typeof t == "object") A(t);
+		else if (typeof t == "string") try {
+			A(JSON.parse(t));
+		} catch {
+			A({ content: t });
+		}
+		else A(typeof t == "boolean" || typeof t == "number" ? { content: t } : {});
+		x((e) => ({
+			...e,
+			visibility: !0
+		}));
+	}, [x, A]), P = r(() => {
+		D.interactionTrigger(b, "onDialogClose", { metadata: k }), A({}), x((e) => ({
+			...e,
+			visibility: !1
+		}));
+	}, [
+		D,
+		x,
+		A,
+		k,
+		b
+	]), F = r(() => {
+		y && (D.interactionTrigger(b, "onDialogClose", { metadata: k }), A({}), x((e) => ({
+			...e,
+			visibility: !1
+		})));
+	}, [
+		D,
+		y,
+		x,
+		A,
+		k,
+		b
+	]);
+	r(async () => {
+		M(!0), await D.interactionTrigger(b, "onDialogAccept", { metadata: k }), M(!1), x((e) => ({
+			...e,
+			visibility: !1
+		}));
+	}, [
+		D,
+		b,
+		k,
+		x
+	]), r(async () => {
+		M(!0), await D.interactionTrigger(b, "onDialogReject", { metadata: k }), M(!1), x((e) => ({
+			...e,
+			visibility: !1
+		}));
+	}, [
+		D,
+		b,
+		k,
+		x
+	]);
+	let I = a(() => ({
+		onDialogAccept: {
+			action: "onDialogAccept",
+			title: "On Dialog Accept",
+			type: "trigger",
+			params: { metadata: {
+				type: "text",
+				defaultValue: ""
+			} },
+			preview: { metadata: "" }
+		},
+		onDialogReject: {
+			action: "onDialogReject",
+			title: "On Dialog Reject",
+			type: "trigger",
+			params: { metadata: {
+				type: "text",
+				defaultValue: ""
+			} },
+			preview: { metadata: "" }
+		},
+		onDialogOpen: {
+			action: "onDialogOpen",
+			title: "On Dialog Open",
+			type: "trigger",
+			params: { metadata: {
+				type: "text",
+				defaultValue: ""
+			} },
+			preview: { metadata: "" }
+		},
+		onDialogClose: {
+			action: "onDialogClose",
+			title: "On Dialog Close",
+			type: "trigger",
+			params: { metadata: {
+				type: "text",
+				defaultValue: ""
+			} },
+			preview: { metadata: "" }
+		}
+	}), []), L = a(() => ({
+		openDialog: {
+			action: "openDialog",
+			title: `Open ${C}`,
+			type: "callback",
+			callback: N,
+			params: { metadata: {
+				type: "text",
+				defaultValue: ""
+			} },
+			preview: { metadata: "" }
+		},
+		closeDialog: {
+			action: "closeDialog",
+			title: `Close ${C}`,
+			type: "callback",
+			callback: P,
+			preview: {},
+			params: {}
+		}
+	}), [
+		P,
+		N,
+		C
+	]);
+	i(() => {
+		w.visibility !== !1 && D.interactionTrigger(b, "onDialogOpen", { metadata: k });
+	}, [
+		b,
+		D,
+		k,
+		w.visibility
+	]);
+	let R = r(() => typeof k == "object" ? c(k).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]
+		}];
+	}, []) : [], [k]), [z] = O({
+		id: b,
+		source: `dialogContainer_${b}`,
+		mode: "write",
+		name: C || `Dialog - ${b}`,
+		fields: R
+	});
+	return /* @__PURE__ */ u(e, {
+		ref: t,
+		className: d("plitzi-component__dialog-container", p),
+		interactionTriggers: I,
+		interactionCallbacks: L,
+		children: [/* @__PURE__ */ l("div", {
+			className: d("dialog-container__background", S.backgroundContainer),
+			onClick: F
+		}), /* @__PURE__ */ u("div", {
+			className: d("dialog-container__root", S.rootContainer),
+			children: [
+				/* @__PURE__ */ u("div", {
+					className: d("dialog-container__header", S.headerContainer),
+					children: [/* @__PURE__ */ l("div", {
+						className: d("dialog-container__header__title", S.headerTitle),
+						children: h || "Dialog Header"
+					}), /* @__PURE__ */ l("i", {
+						className: "fa-solid fa-xmark",
+						title: "Close",
+						onClick: void 0
+					})]
+				}),
+				/* @__PURE__ */ l("div", {
+					className: d("dialog-container__body", S.body),
+					children: /* @__PURE__ */ l(z, {
+						value: k,
+						children: m
+					})
+				}),
+				/* @__PURE__ */ u("div", {
+					className: d("dialog-container__footer", S.footerContainer),
+					children: [/* @__PURE__ */ u("button", {
+						className: d("footer__button button--accept", S.acceptButton),
+						onClick: void 0,
+						disabled: j,
+						children: [j && /* @__PURE__ */ u("div", {
+							className: "button--accept__container",
+							children: [/* @__PURE__ */ l("i", { className: "fa-solid fa-rotate fa-spin" }), _]
+						}), !j && g]
+					}), /* @__PURE__ */ l("button", {
+						className: d("footer__button button--cancel", S.cancelButton),
+						onClick: void 0,
+						disabled: j,
+						children: v
+					})]
+				})
+			]
+		})]
+	});
+});
+//#endregion
+export { p as default };

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

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

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

@@ -0,0 +1,45 @@
+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/DialogContainer/Settings.tsx
+var a = ({ acceptButtonLabel: a = "Accept", acceptButtonLabelLoading: o = "Loading...", rejectButtonLabel: s = "Cancel", headerLabel: c = "Dialog Header", autoHideAfterClick: l = !0, onUpdate: u }) => {
+	let d = e((e) => (t) => u?.(e, t), [u]), f = e((e) => u?.("autoHideAfterClick", e.target.checked), [u]);
+	return /* @__PURE__ */ n("div", {
+		className: "flex flex-col gap-4 py-2",
+		children: [
+			/* @__PURE__ */ t(i, {
+				label: "Header Label",
+				value: c,
+				onChange: d("headerLabel"),
+				size: "xs"
+			}),
+			/* @__PURE__ */ t(i, {
+				label: "Accept Label Button",
+				value: a,
+				onChange: d("acceptButtonLabel"),
+				size: "xs"
+			}),
+			/* @__PURE__ */ t(i, {
+				label: "Reject Label Button",
+				value: s,
+				onChange: d("rejectButtonLabel"),
+				size: "xs"
+			}),
+			/* @__PURE__ */ t(i, {
+				label: "Accept Label Button Loading",
+				value: o,
+				onChange: d("acceptButtonLabelLoading"),
+				size: "xs"
+			}),
+			/* @__PURE__ */ t(r, {
+				label: "Hide after click background",
+				checked: l,
+				onChange: f,
+				size: "xs"
+			})
+		]
+	});
+};
+//#endregion
+export { a as default };

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

@@ -0,0 +1,146 @@
+declare const DialogContainer: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./DialogContainer').DialogContainerProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    type: string;
+    content: {
+        attributes: {
+            headerLabel: string;
+            acceptButtonLabel: string;
+            rejectButtonLabel: string;
+            autoHideAfterClick: boolean;
+        };
+        definition: {
+            label: string;
+            type: string;
+            description: string;
+            items: never[];
+            bindings: {};
+            styleSelectors: {
+                base: string;
+                backgroundContainer: string;
+                rootContainer: string;
+                headerContainer: string;
+                headerTitle: string;
+                headerCloseButton: string;
+                bodyContainer: string;
+                footerContainer: string;
+                acceptButton: string;
+                cancelButton: 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: {
+                        position: string;
+                        top: string;
+                        bottom: string;
+                        left: string;
+                        right: string;
+                    };
+                };
+                backgroundContainer: {
+                    default: {
+                        height: string;
+                        width: string;
+                        left: string;
+                        top: string;
+                        position: string;
+                        'background-color': string;
+                        opacity: string;
+                    };
+                };
+                rootContainer: {
+                    default: {
+                        display: string;
+                        'flex-direction': string;
+                        position: string;
+                        top: string;
+                        left: string;
+                        width: string;
+                        height: string;
+                        'background-color': string;
+                        transform: string;
+                        'padding-top': string;
+                        'padding-bottom': string;
+                        'padding-left': string;
+                        'padding-right': string;
+                        'border-top-left-radius': string;
+                        'border-top-right-radius': string;
+                        'border-bottom-left-radius': string;
+                        'border-bottom-right-radius': string;
+                    };
+                };
+                headerContainer: {
+                    default: {
+                        display: string;
+                        'align-items': string;
+                        'justify-content': string;
+                    };
+                };
+                headerTitle: {
+                    default: {
+                        'font-size': string;
+                        'font-weight': string;
+                        'line-height': string;
+                        color: string;
+                    };
+                };
+                headerCloseButton: {
+                    default: {
+                        height: string;
+                        width: string;
+                        padding: string;
+                        display: string;
+                        'justify-content': string;
+                        'align-items': string;
+                        cursor: string;
+                    };
+                };
+                bodyContainer: {
+                    default: {
+                        display: string;
+                        'flex-direction': string;
+                        'flex-grow': string;
+                        'flex-basis': string;
+                    };
+                };
+                footerContainer: {
+                    default: {
+                        display: string;
+                        'justify-content': string;
+                        'margin-top': string;
+                    };
+                };
+            };
+            subTypes: {};
+        };
+        settings: {};
+    };
+    initialItems: string[];
+};
+export default DialogContainer;

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

@@ -0,0 +1,128 @@
+import e from "./DialogContainer.mjs";
+//#region src/elements/structure/DialogContainer/index.ts
+var t = Object.assign(e, {
+	type: "dialogContainer",
+	content: {
+		attributes: {
+			headerLabel: "Dialog Header",
+			acceptButtonLabel: "Accept",
+			rejectButtonLabel: "Cancel",
+			autoHideAfterClick: !0
+		},
+		definition: {
+			label: "Dialog Container",
+			type: "dialogContainer",
+			description: "",
+			items: [],
+			bindings: {},
+			styleSelectors: {
+				base: "",
+				backgroundContainer: "",
+				rootContainer: "",
+				headerContainer: "",
+				headerTitle: "",
+				headerCloseButton: "",
+				bodyContainer: "",
+				footerContainer: "",
+				acceptButton: "",
+				cancelButton: ""
+			},
+			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-regular fa-clone"
+		},
+		defaultStyle: {
+			name: "Dialog Container",
+			displayMode: "desktop",
+			style: {
+				base: { default: {
+					position: "absolute",
+					top: "0",
+					bottom: "0",
+					left: "0",
+					right: "0"
+				} },
+				backgroundContainer: { default: {
+					height: "100%",
+					width: "100%",
+					left: "0",
+					top: "0",
+					position: "absolute",
+					"background-color": "black",
+					opacity: "0.5"
+				} },
+				rootContainer: { default: {
+					display: "flex",
+					"flex-direction": "column",
+					position: "absolute",
+					top: "50%",
+					left: "50%",
+					width: "500px",
+					height: "300px",
+					"background-color": "white",
+					transform: "translate3d(-50%, -50%, 0px)",
+					"padding-top": "20px",
+					"padding-bottom": "20px",
+					"padding-left": "20px",
+					"padding-right": "20px",
+					"border-top-left-radius": "8px",
+					"border-top-right-radius": "8px",
+					"border-bottom-left-radius": "8px",
+					"border-bottom-right-radius": "8px"
+				} },
+				headerContainer: { default: {
+					display: "flex",
+					"align-items": "center",
+					"justify-content": "space-between"
+				} },
+				headerTitle: { default: {
+					"font-size": "20px",
+					"font-weight": "500",
+					"line-height": "1.2",
+					color: "#333"
+				} },
+				headerCloseButton: { default: {
+					height: "20px",
+					width: "20px",
+					padding: "4px",
+					display: "flex",
+					"justify-content": "center",
+					"align-items": "center",
+					cursor: "pointer"
+				} },
+				bodyContainer: { default: {
+					display: "flex",
+					"flex-direction": "column",
+					"flex-grow": "1",
+					"flex-basis": "0"
+				} },
+				footerContainer: { default: {
+					display: "flex",
+					"justify-content": "flex-end",
+					"margin-top": "8px"
+				} }
+			},
+			subTypes: {}
+		},
+		settings: {}
+	},
+	initialItems: ["container"]
+});
+//#endregion
+export { t as default };

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

@@ -0,0 +1,16 @@
+import { ReactNode, RefObject } from 'react';
+export type ListProps<T = unknown> = {
+    ref?: RefObject<HTMLElement>;
+    className?: string;
+    subType?: 'ul' | 'ol';
+    children?: ReactNode;
+    items?: T[];
+    source?: 'none' | 'controlled';
+};
+declare const List: ({ ref, className, subType, children, items, source }: ListProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<ListProps<unknown>>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { List };

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

@@ -0,0 +1,22 @@
+import e from "./modes/ListBasic.mjs";
+import t from "./modes/ListControlled/index.mjs";
+import n from "../../../Element/hocs/withElement.mjs";
+import { jsx as r } from "react/jsx-runtime";
+var i = n(({ ref: n, className: i = "", subType: a = "ul", children: o, items: s = [], source: c = "none" }) => {
+	switch (c) {
+		case "controlled": return /* @__PURE__ */ r(t, {
+			ref: n,
+			className: i,
+			items: s,
+			children: o
+		});
+		default: return /* @__PURE__ */ r(e, {
+			ref: n,
+			className: i,
+			subType: a,
+			children: o
+		});
+	}
+});
+//#endregion
+export { i as default };

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

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

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

@@ -0,0 +1,12 @@
+import e from "../../../../Element/RootElement.mjs";
+import t from "../../../../Element/hocs/withElement.mjs";
+import { jsx as n } from "react/jsx-runtime";
+import r from "clsx";
+var i = t(({ ref: t, className: i = "", children: a }) => /* @__PURE__ */ n(e, {
+	tag: "li",
+	ref: t,
+	className: r("plitzi-component__list-item", i),
+	children: a
+}));
+//#endregion
+export { i as default };

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

@@ -0,0 +1,2 @@
+declare const Settings: () => import("react/jsx-runtime").JSX.Element;
+export default Settings;

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

@@ -0,0 +1,5 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/elements/structure/List/ListItem/Settings.tsx
+var t = () => /* @__PURE__ */ e("div", { className: "flex flex-col gap-4" });
+//#endregion
+export { t as default };

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

@@ -0,0 +1,54 @@
+declare const ListItem: {
+    (props: import('../../../../Element/hocs/withElement').WithElementProps<import('./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 ListItem;