@plitzi/sdk-elements 0.30.19

package/dist/elements/basic/Dropdown/index.mjs

@@ -0,0 +1,73 @@
+import e from "./Dropdown.mjs";
+import t from "./DropdownPopup/index.mjs";
+//#region src/elements/basic/Dropdown/index.ts
+var n = Object.assign(e, {
+	type: "dropdown",
+	content: {
+		attributes: {
+			popupPlacement: "bottom",
+			openPopup: !1,
+			backgroundDisabled: !1,
+			closeOnClickBackground: !0,
+			closeOnClickPopup: !0,
+			containerTopOffset: 5,
+			containerLeftOffset: 5,
+			disabled: !1
+		},
+		definition: {
+			label: "Dropdown",
+			type: "dropdown",
+			items: [],
+			bindings: {},
+			styleSelectors: {
+				base: "",
+				backgroundContainer: ""
+			},
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "basic",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-angle-down"
+		},
+		defaultStyle: {
+			name: "Dropdown",
+			displayMode: "desktop",
+			style: {
+				base: { default: {
+					"min-height": "50px",
+					"min-width": "50px",
+					cursor: "pointer",
+					"user-select": "none"
+				} },
+				backgroundContainer: { default: {
+					top: 0,
+					bottom: 0,
+					left: 0,
+					right: 0,
+					position: "fixed",
+					cursor: "default",
+					"z-index": 50
+				} }
+			}
+		},
+		settings: {}
+	},
+	initialItems: ["dropdownPopup"],
+	plugins: { dropdownPopup: t }
+});
+//#endregion
+export { n as default };

package/dist/elements/basic/Dropdown/useDropdown.d.ts

@@ -0,0 +1,28 @@
+import { Dispatch, RefObject, SetStateAction } from 'react';
+export type FloatingPosition = {
+    top: number;
+    left: number;
+};
+export type UseDropdownProps = {
+    ref?: RefObject<HTMLDivElement | null>;
+    popupRef?: RefObject<HTMLDivElement | null>;
+    open?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    closeOnClickPopup?: boolean;
+    placement?: 'left' | 'right' | 'top' | 'bottom';
+    myWindow?: Window | null;
+    offsetX?: number;
+    offsetY?: number;
+    onChange?: (open: boolean, isControlled: boolean) => void;
+};
+export type UseDropdownReturn = [
+    boolean,
+    Dispatch<SetStateAction<boolean>>,
+    (e: React.MouseEvent) => void,
+    (e: React.MouseEvent) => void,
+    DOMRect | undefined,
+    FloatingPosition | undefined
+];
+declare const useDropdown: ({ ref, popupRef, open: openProp, placement, disabled, loading, closeOnClickPopup, offsetX, offsetY, myWindow, onChange }: UseDropdownProps) => UseDropdownReturn;
+export default useDropdown;

package/dist/elements/basic/Dropdown/useDropdown.mjs

@@ -0,0 +1,105 @@
+import { useCallback as e, useEffect as t, useMemo as n, useState as r } from "react";
+import i from "@plitzi/plitzi-ui/hooks/useDidUpdateEffect";
+//#region src/elements/basic/Dropdown/useDropdown.ts
+var a = ({ ref: a, popupRef: o, open: s, placement: c = "bottom", disabled: l = !1, loading: u = !1, closeOnClickPopup: d = !0, offsetX: f = 0, offsetY: p = 0, myWindow: m, onChange: h }) => {
+	let [g, _] = r(s ?? !1), [v, y] = r(() => a?.current?.getBoundingClientRect()), b = n(() => m || (typeof window < "u" ? window : null), [m]), x = e((e) => {
+		if (!(l || u)) {
+			if (e.stopPropagation(), e.preventDefault(), s !== void 0) {
+				h?.(!g, !1);
+				return;
+			}
+			h?.(!g, !0), _((e) => !e);
+		}
+	}, [
+		l,
+		u,
+		h,
+		g,
+		s
+	]), S = e((e) => {
+		if (!(l || u || !d)) {
+			if (e.stopPropagation(), e.preventDefault(), s !== void 0) {
+				h?.(!g, !1);
+				return;
+			}
+			h?.(!g, !0), _((e) => !e);
+		}
+	}, [
+		d,
+		l,
+		u,
+		h,
+		g,
+		s
+	]);
+	t(() => {
+		let e = a?.current;
+		if (!e || typeof window > "u" || !g) return;
+		let t = () => y(a.current?.getBoundingClientRect()), n;
+		return typeof ResizeObserver < "u" && (n = new ResizeObserver(t), n.observe(e)), window.addEventListener("scroll", t, !0), window.addEventListener("resize", t), () => {
+			n?.disconnect(), window.removeEventListener("scroll", t, !0), window.removeEventListener("resize", t);
+		};
+	}, [g, a]);
+	let C = e((e) => {
+		e.key === "Escape" && (h?.(!g, s !== void 0), _((e) => !e));
+	}, [
+		h,
+		g,
+		s
+	]);
+	t(() => {
+		if (!(!g || l)) return window.addEventListener("keydown", C), () => {
+			window.removeEventListener("keydown", C);
+		};
+	}, [
+		g,
+		C,
+		l
+	]);
+	let w = e((e) => {
+		if (!v || !b) return;
+		let t = b.innerWidth, n = b.innerHeight, r = 0, i = 0;
+		switch (c) {
+			case "top":
+				r = v.top - e.height, i = v.left;
+				break;
+			case "bottom":
+				r = v.bottom, i = v.left;
+				break;
+			case "left":
+				r = v.top, i = v.left - e.width;
+				break;
+			case "right":
+				r = v.top, i = v.right;
+				break;
+			default: r = v.bottom, i = v.left;
+		}
+		return c === "bottom" ? (r += p, i += f) : c === "top" ? (r -= p, i += f) : c === "left" ? (r += p, i -= f) : c === "right" && (r += p, i += f), c === "bottom" || c === "top" ? (i + e.width > t ? i = v.right - e.width : i < 0 && (i = v.left), r = Math.max(0, Math.min(n - e.height, r))) : c === "left" || c === "right" ? (r + e.height > n ? r = v.bottom - e.height : r < 0 && (r = v.top), i = Math.max(0, Math.min(t - e.width, i))) : (r = Math.max(0, Math.min(n - e.height, r)), i = Math.max(0, Math.min(t - e.width, i))), {
+			top: r,
+			left: i
+		};
+	}, [
+		v,
+		b,
+		c,
+		p,
+		f
+	]);
+	return i(() => {
+		_(s ?? !1);
+	}, [s]), [
+		g,
+		_,
+		x,
+		S,
+		v,
+		n(() => !g || !a?.current || !o?.current ? void 0 : w(o.current.getBoundingClientRect()), [
+			g,
+			a,
+			o,
+			w
+		])
+	];
+};
+//#endregion
+export { a as default };

package/dist/elements/basic/Heading/Heading.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from 'react';
+export type HeadingProps = {
+    ref?: RefObject<HTMLElement>;
+    className?: string;
+    content?: string;
+    subType?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+};
+declare const Heading: ({ ref, className, content, subType }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<HeadingProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { Heading };

package/dist/elements/basic/Heading/Heading.mjs

@@ -0,0 +1,23 @@
+import e from "../../../Element/RootElement.mjs";
+import t from "../../../Element/hocs/withElement.mjs";
+import { use as n, useCallback as r, useMemo as i } from "react";
+import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "clsx";
+import l from "@plitzi/sdk-shared/elements/hooks/useElement";
+import u from "@plitzi/plitzi-ui/ContentEditable";
+var d = t(({ ref: t, className: d = "", content: f = "Heading", subType: p = "h1" }) => {
+	let { id: m } = l(), { settings: { previewMode: h }, contexts: { BuilderContext: g } } = a(), _ = g ? n(g) : void 0, v = i(() => typeof f != "string" && typeof f != "number" ? JSON.stringify(f) : !f && f !== "" && !h ? "Heading" : f, [f, h]), y = r((e) => !h && _?.updateElement(m, "content", e), [_?.updateElement, m]);
+	return /* @__PURE__ */ s(e, {
+		ref: t,
+		tag: h ? p : "div",
+		className: c("plitzi-component__heading", { [`plitzi-component__heading-${p}`]: p }, d),
+		children: [h && v, !h && /* @__PURE__ */ o(u, {
+			value: v,
+			onChange: y,
+			openMode: "doubleClick"
+		})]
+	});
+});
+//#endregion
+export { d as default };

package/dist/elements/basic/Heading/Settings.d.ts

@@ -0,0 +1,7 @@
+type SettingsProps = {
+    subType?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    content?: string;
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ subType, content, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default Settings;

package/dist/elements/basic/Heading/Settings.mjs

@@ -0,0 +1,50 @@
+import { useCallback as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/TextArea";
+import i from "@plitzi/plitzi-ui/Select";
+//#region src/elements/basic/Heading/Settings.tsx
+var a = ({ subType: a = "h1", content: o = "", onUpdate: s }) => {
+	let c = e((e) => (t) => s?.(e, t), [s]);
+	return /* @__PURE__ */ n("div", {
+		className: "flex h-full flex-col gap-4 py-2",
+		children: [/* @__PURE__ */ n(i, {
+			value: a,
+			label: "Heading Tag",
+			onChange: c("subType"),
+			size: "xs",
+			children: [
+				/* @__PURE__ */ t("option", {
+					value: "h1",
+					children: "H1"
+				}),
+				/* @__PURE__ */ t("option", {
+					value: "h2",
+					children: "H2"
+				}),
+				/* @__PURE__ */ t("option", {
+					value: "h3",
+					children: "H3"
+				}),
+				/* @__PURE__ */ t("option", {
+					value: "h4",
+					children: "H4"
+				}),
+				/* @__PURE__ */ t("option", {
+					value: "h5",
+					children: "H5"
+				}),
+				/* @__PURE__ */ t("option", {
+					value: "h6",
+					children: "H6"
+				})
+			]
+		}), /* @__PURE__ */ t(r, {
+			value: o,
+			label: "Content",
+			onChange: c("content"),
+			size: "xs"
+		})]
+	});
+};
+//#endregion
+export { a as default };

package/dist/elements/basic/Heading/index.d.ts

@@ -0,0 +1,144 @@
+declare const Heading: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Heading').HeadingProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    type: string;
+    content: {
+        attributes: {
+            content: string;
+            subType: string;
+        };
+        definition: {
+            label: string;
+            type: string;
+            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: {
+                h1: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {
+                                'margin-top': string;
+                                'margin-bottom': string;
+                                'font-size': string;
+                                'font-weight': number;
+                                'line-height': string;
+                            };
+                        };
+                    };
+                };
+                h2: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {
+                                'margin-top': string;
+                                'margin-bottom': string;
+                                'font-size': string;
+                                'font-weight': number;
+                                'line-height': string;
+                            };
+                        };
+                    };
+                };
+                h3: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {
+                                'margin-top': string;
+                                'margin-bottom': string;
+                                'font-size': string;
+                                'font-weight': number;
+                                'line-height': string;
+                            };
+                        };
+                    };
+                };
+                h4: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {
+                                'margin-top': string;
+                                'margin-bottom': string;
+                                'font-size': string;
+                                'font-weight': number;
+                                'line-height': string;
+                            };
+                        };
+                    };
+                };
+                h5: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {
+                                'margin-top': string;
+                                'margin-bottom': string;
+                                'font-size': string;
+                                'font-weight': number;
+                                'line-height': string;
+                            };
+                        };
+                    };
+                };
+                h6: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {
+                                'margin-top': string;
+                                'margin-bottom': string;
+                                'font-size': string;
+                                'font-weight': number;
+                                'line-height': string;
+                            };
+                        };
+                    };
+                };
+            };
+        };
+        settings: {};
+    };
+};
+export default Heading;

package/dist/elements/basic/Heading/index.mjs

@@ -0,0 +1,112 @@
+import e from "./Heading.mjs";
+//#region src/elements/basic/Heading/index.ts
+var t = Object.assign(e, {
+	type: "heading",
+	content: {
+		attributes: {
+			content: "Heading",
+			subType: "h1"
+		},
+		definition: {
+			label: "Heading",
+			type: "heading",
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "basic",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-heading"
+		},
+		defaultStyle: {
+			name: "Heading",
+			displayMode: "desktop",
+			style: { base: { default: {} } },
+			subTypes: {
+				h1: {
+					name: "H1 Heading",
+					displayMode: "desktop",
+					style: { base: { default: {
+						"margin-top": "25px",
+						"margin-bottom": "25px",
+						"font-size": "38px",
+						"font-weight": 700,
+						"line-height": "44px"
+					} } }
+				},
+				h2: {
+					name: "H2 Heading",
+					displayMode: "desktop",
+					style: { base: { default: {
+						"margin-top": "25px",
+						"margin-bottom": "25px",
+						"font-size": "32px",
+						"font-weight": 700,
+						"line-height": "36px"
+					} } }
+				},
+				h3: {
+					name: "H3 Heading",
+					displayMode: "desktop",
+					style: { base: { default: {
+						"margin-top": "25px",
+						"margin-bottom": "25px",
+						"font-size": "24px",
+						"font-weight": 700,
+						"line-height": "30px"
+					} } }
+				},
+				h4: {
+					name: "H4 Heading",
+					displayMode: "desktop",
+					style: { base: { default: {
+						"margin-top": "25px",
+						"margin-bottom": "25px",
+						"font-size": "18px",
+						"font-weight": 700,
+						"line-height": "24px"
+					} } }
+				},
+				h5: {
+					name: "H5 Heading",
+					displayMode: "desktop",
+					style: { base: { default: {
+						"margin-top": "25px",
+						"margin-bottom": "25px",
+						"font-size": "14px",
+						"font-weight": 700,
+						"line-height": "20px"
+					} } }
+				},
+				h6: {
+					name: "H6 Heading",
+					displayMode: "desktop",
+					style: { base: { default: {
+						"margin-top": "25px",
+						"margin-bottom": "25px",
+						"font-size": "12px",
+						"font-weight": 700,
+						"line-height": "18px"
+					} } }
+				}
+			}
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

package/dist/elements/basic/Link/Link.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode, RefObject } from 'react';
+export type LinkProps = {
+    ref?: RefObject<HTMLElement>;
+    children?: ReactNode;
+    className?: string;
+    href?: string;
+    target?: 'self' | 'blank' | 'parent' | 'top';
+    mode?: 'page' | 'internal' | 'external';
+};
+declare const Link: ({ ref, children, className, href, target, mode }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<LinkProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { Link };

package/dist/elements/basic/Link/Link.mjs

@@ -0,0 +1,65 @@
+import e from "../../../Element/RootElement.mjs";
+import t from "../../../Element/hocs/withElement.mjs";
+import { use as n, useMemo as r } from "react";
+import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { processTwig as a } from "@plitzi/sdk-shared/helpers/twigWrapper";
+import { createStoreHook as o } from "@plitzi/sdk-store/createStore";
+import { jsx as s } from "react/jsx-runtime";
+import c from "clsx";
+import l from "@plitzi/sdk-shared/elements/hooks/useElement";
+import { getPageFullPath as u } from "@plitzi/sdk-navigation/NavigationHelper";
+var d = t(({ ref: t, children: d, className: f = "", href: p = "#", target: m = "self", mode: h = "page" }) => {
+	let { style: g } = l(), { settings: { previewMode: _ }, contexts: { NavigationContext: v } } = i(), { navigate: y, routeParams: b, queryParams: x } = n(v), { useStore: S } = o(), [[C, w]] = S(["pageDefinitions", "schema.pageFolders"]), T = r(() => {
+		if (h === "external") return p;
+		let e = `/${p}`.replaceAll(/[/]+/gim, "/");
+		if (h === "internal") {
+			try {
+				let t = a(e, {
+					...x,
+					...b
+				}, !0);
+				return typeof t == "string" ? t : e;
+			} catch {}
+			return e;
+		}
+		return u(C, w, p, !0);
+	}, [
+		h,
+		p,
+		C,
+		w,
+		x,
+		b
+	]), E = (e) => {
+		_ && (e.stopPropagation(), (h === "page" || h === "internal") && (e.preventDefault(), y(T)));
+	};
+	return /* @__PURE__ */ s(e, {
+		tag: "a",
+		...r(() => {
+			let e = {
+				ref: t,
+				style: g,
+				target: `_${m}`,
+				className: c("plitzi-component__link", f)
+			};
+			return _ ? {
+				...e,
+				href: T
+			} : {
+				...e,
+				"href-disabled": T
+			};
+		}, [
+			t,
+			g,
+			m,
+			f,
+			_,
+			T
+		]),
+		onClick: E,
+		children: d
+	});
+});
+//#endregion
+export { d as default };

package/dist/elements/basic/Link/Settings.d.ts

@@ -0,0 +1,8 @@
+type SettingsProps = {
+    mode?: 'page' | 'internal' | 'external';
+    href?: string;
+    target?: 'blank' | 'self' | 'parent' | 'top';
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ mode, href, target, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default Settings;