@plitzi/sdk-elements 0.37.9 → 0.38.1

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

@@ -1,77 +1,97 @@
 import e from "../../../Element/hocs/withElement.mjs";
 import t from "../../../Element/hooks/useElement.mjs";
 import { RootElement as n } from "../../../Element/RootElement.mjs";
-import { useMemo as r } from "react";
-import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { useSdkStore as a } from "@plitzi/sdk-shared/store";
-import { processTwig as o } from "@plitzi/sdk-shared/helpers/twigWrapper";
-import { jsx as s } from "react/jsx-runtime";
-import c from "clsx";
-import { getPageFullPath as l } from "@plitzi/sdk-navigation/NavigationHelper";
+import r from "../../../Element/ElementWords.mjs";
+import { isCurrentPage as i } from "./isCurrentPage.mjs";
+import { useMemo as a } from "react";
+import o from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { useSdkStore as s } from "@plitzi/sdk-shared/store";
+import { processTwig as c } from "@plitzi/sdk-shared/helpers/twigWrapper";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import d from "clsx";
+import { getPageFullPath as f } from "@plitzi/sdk-navigation/NavigationHelper";
 //#region src/elements/basic/Link/Link.tsx
-var u = ({ ref: e, children: u, className: d = "", href: f = "#", target: p = "self", mode: m = "page", label: h = "" }) => {
-	let { style: g } = t(), { settings: { previewMode: _ } } = i(), [[v, y, b, x, S]] = a([
+var p = ({ ref: e, children: p, className: m = "", href: h = "#", target: g = "self", mode: _ = "page", hash: v = "", label: y = "", content: b = "", contentPlacement: x = "after", icon: S = "", iconPlacement: C = "before" }) => {
+	let { style: w, definition: { styleSelectors: T } } = t(), { settings: { previewMode: E } } = o(), [[D, O, k, A, j, M]] = s([
 		"pageDefinitions",
 		"schema.pageFolders",
 		"navigation.routeParams",
 		"navigation.queryParams",
-		"navigation.navigate"
-	]), C = r(() => {
-		if (m === "external") return f;
-		if (m === "internal") {
-			let e = `/${f}`.replaceAll(/[/]+/gim, "/");
+		"navigation.navigate",
+		"navigation.href"
+	]), N = a(() => {
+		if (_ === "external") return h;
+		if (_ === "internal") {
+			let e = `/${h}`.replaceAll(/[/]+/gim, "/");
 			try {
-				let t = o(e, {
-					...x,
-					...b
+				let t = c(e, {
+					...A,
+					...k
 				}, !0);
 				return typeof t == "string" ? t : e;
 			} catch {}
 			return e;
 		}
-		return l(v, y, f, !0);
+		return f(D, O, h, !0);
 	}, [
-		m,
-		f,
-		v,
-		y,
-		x,
-		b
-	]), w = (e) => {
-		if (!_) return;
+		_,
+		h,
+		D,
+		O,
+		A,
+		k
+	]), P = _ !== "external" && v ? `${N}#${v}` : N, F = _ !== "external" && i(N, M), I = (e) => {
+		if (!E) return;
 		e.stopPropagation();
-		let t = p !== "self" || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0;
-		(m === "page" || m === "internal") && !t && (e.preventDefault(), S(C));
-	}, T = r(() => {
+		let t = g !== "self" || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0;
+		(_ === "page" || _ === "internal") && !t && (e.preventDefault(), j(P));
+	}, L = a(() => {
 		let t = {
 			ref: e,
-			style: g,
-			target: `_${p}`,
-			"aria-label": h || void 0,
-			className: c("plitzi-component__link", d)
+			style: w,
+			target: `_${g}`,
+			...g === "blank" ? { rel: "noopener noreferrer" } : {},
+			"aria-label": y || void 0,
+			"aria-current": F ? "page" : void 0,
+			className: d("plitzi-component__link", m)
 		};
-		return _ ? {
+		return E ? {
 			...t,
-			href: C
+			href: P
 		} : {
 			...t,
-			"href-disabled": C
+			"href-disabled": P
 		};
 	}, [
 		e,
+		w,
 		g,
-		p,
-		h,
-		d,
-		_,
-		C
+		y,
+		F,
+		m,
+		E,
+		P
 	]);
-	return /* @__PURE__ */ s(n, {
+	return /* @__PURE__ */ u(n, {
 		tag: "a",
-		...T,
-		onClick: w,
-		children: u
+		...L,
+		onClick: I,
+		children: [
+			x === "before" && /* @__PURE__ */ l(r, {
+				content: b,
+				icon: S,
+				iconPlacement: C,
+				iconClassName: T.icon
+			}),
+			p,
+			x === "after" && /* @__PURE__ */ l(r, {
+				content: b,
+				icon: S,
+				iconPlacement: C,
+				iconClassName: T.icon
+			})
+		]
 	});
-}, d = e(u);
+}, m = e(p);
 //#endregion
-export { u as Link, d as default };
+export { p as Link, m as default };

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

@@ -1,9 +1,14 @@
 type SettingsProps = {
     mode?: 'page' | 'internal' | 'external';
     href?: string;
+    hash?: string;
     target?: 'blank' | 'self' | 'parent' | 'top';
     label?: string;
+    content?: string;
+    contentPlacement?: 'before' | 'after';
+    icon?: string;
+    iconPlacement?: 'before' | 'after';
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ mode, href, target, label, onUpdate }: SettingsProps) => import('react').JSX.Element;
+declare const Settings: ({ mode, href, hash, target, label, content, contentPlacement, icon, iconPlacement, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

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

@@ -1,136 +1,169 @@
-import { use as e, useCallback as t, useEffect as n, useMemo as r } from "react";
-import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { useCommonStore as a } from "@plitzi/sdk-shared/store";
-import { get as o, pick as s } from "@plitzi/plitzi-ui/helpers";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { getPageFullPath as u } from "@plitzi/sdk-navigation/NavigationHelper";
-import d from "@plitzi/plitzi-ui/Input";
-import f from "@plitzi/plitzi-ui/Select";
+import e from "../../../components/IconField/IconField.mjs";
+import { use as t, useCallback as n, useEffect as r, useMemo as i } from "react";
+import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { useCommonStore as o } from "@plitzi/sdk-shared/store";
+import { get as s, pick as c } from "@plitzi/plitzi-ui/helpers";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { getPageFullPath as d } from "@plitzi/sdk-navigation/NavigationHelper";
+import f from "@plitzi/plitzi-ui/Input";
+import p from "@plitzi/plitzi-ui/Select";
 //#region src/elements/basic/Link/Settings.tsx
-var p = ({ mode: p = "page", href: m = "#", target: h = "self", label: g = "", onUpdate: _ }) => {
-	let { contexts: { NetworkContext: v } } = i(), [[y, b, x]] = a([
+var m = ({ mode: m = "page", href: h = "#", hash: g = "", target: _ = "self", label: v = "", content: y = "", contentPlacement: b = "after", icon: x = "", iconPlacement: S = "before", onUpdate: C }) => {
+	let { contexts: { NetworkContext: w } } = a(), [[T, E, D]] = o([
 		"schema.flat",
 		"schema.pages",
 		"schema.pageFolders"
-	]), { server: S } = e(v), C = r(() => o(S, "domain", "https://subdomain.plitzi.app"), [S]), w = r(() => {
-		let e = s(y, b);
+	]), { server: O } = t(w), k = i(() => s(O, "domain", "https://subdomain.plitzi.app"), [O]), A = i(() => {
+		let e = c(T, E);
 		return Object.keys(e).reduce((t, n) => {
-			let r = e[n], i = o(r, "attributes.name", n), a = o(r, "attributes.default", !1);
+			let r = e[n], i = s(r, "attributes.name", n), a = s(r, "attributes.default", !1);
 			return [...t, {
 				key: n,
 				label: i,
 				defaultPage: a
 			}];
 		}, []);
-	}, [y, b]), T = t((e) => (t) => _?.(e, t), [_]), E = t((e) => _?.("href", e), [_]), D = t((e) => {
-		if (_?.("mode", e), e !== "page") {
-			_?.("href", "#");
+	}, [T, E]), j = n((e) => (t) => C?.(e, t), [C]), M = n((e) => C?.("href", e), [C]), N = n((e) => {
+		if (C?.("mode", e), e !== "page") {
+			C?.("href", "#");
 			return;
 		}
-		let t = w.find((e) => e.defaultPage);
-		t && _?.("href", t.key);
-	}, [_, w]);
-	n(() => {
-		if (p === "page" && m === "#") {
-			let e = w.find((e) => e.defaultPage);
-			e && _?.("href", e.key);
+		let t = A.find((e) => e.defaultPage);
+		t && C?.("href", t.key);
+	}, [C, A]);
+	r(() => {
+		if (m === "page" && h === "#") {
+			let e = A.find((e) => e.defaultPage);
+			e && C?.("href", e.key);
 		}
 	}, [
-		p,
 		m,
-		w,
-		_
+		h,
+		A,
+		C
 	]);
-	let O = r(() => p === "page" ? `${C}${u(y, x, m, !0)}` : m.replaceAll(/[/]+/gim, "/"), [
-		p,
-		y,
-		x,
+	let P = i(() => m === "page" ? `${k}${d(T, D, h, !0)}` : h.replaceAll(/[/]+/gim, "/"), [
 		m,
-		C
+		T,
+		D,
+		h,
+		k
 	]);
-	return /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ u("div", {
 		className: "flex h-full flex-col gap-4 py-2",
 		children: [
 			/* @__PURE__ */ l(f, {
-				value: h,
+				value: y,
+				label: "Content",
+				placeholder: "The link's words, without a text inside it",
+				onChange: j("content"),
+				size: "sm"
+			}),
+			/* @__PURE__ */ u(p, {
+				value: b,
+				label: "Content Placement",
+				onChange: j("contentPlacement"),
+				size: "sm",
+				children: [/* @__PURE__ */ l("option", {
+					value: "before",
+					children: "Before Elements"
+				}), /* @__PURE__ */ l("option", {
+					value: "after",
+					children: "After Elements"
+				})]
+			}),
+			/* @__PURE__ */ u(p, {
+				value: _,
 				label: "Target",
-				onChange: T("target"),
+				onChange: j("target"),
 				size: "sm",
 				children: [
-					/* @__PURE__ */ c("option", {
+					/* @__PURE__ */ l("option", {
 						value: "blank",
 						children: "Blank"
 					}),
-					/* @__PURE__ */ c("option", {
+					/* @__PURE__ */ l("option", {
 						value: "self",
 						children: "Self"
 					}),
-					/* @__PURE__ */ c("option", {
+					/* @__PURE__ */ l("option", {
 						value: "parent",
 						children: "Parent"
 					}),
-					/* @__PURE__ */ c("option", {
+					/* @__PURE__ */ l("option", {
 						value: "top",
 						children: "Top"
 					})
 				]
 			}),
-			/* @__PURE__ */ l(f, {
-				value: p,
+			/* @__PURE__ */ u(p, {
+				value: m,
 				label: "Mode",
-				onChange: D,
+				onChange: N,
 				size: "sm",
 				children: [
-					/* @__PURE__ */ c("option", {
+					/* @__PURE__ */ l("option", {
 						value: "page",
 						children: "Space Page"
 					}),
-					/* @__PURE__ */ c("option", {
+					/* @__PURE__ */ l("option", {
 						value: "internal",
 						children: "Inside Space"
 					}),
-					/* @__PURE__ */ c("option", {
+					/* @__PURE__ */ l("option", {
 						value: "external",
 						children: "Outside Space"
 					})
 				]
 			}),
-			p !== "page" && /* @__PURE__ */ c(d, {
-				value: m,
+			m !== "page" && /* @__PURE__ */ l(f, {
+				value: h,
 				label: "Url",
-				onChange: E,
+				onChange: M,
 				size: "sm"
 			}),
-			p === "page" && /* @__PURE__ */ l("div", {
+			m === "page" && /* @__PURE__ */ u("div", {
 				className: "flex flex-col",
-				children: [/* @__PURE__ */ l(f, {
-					value: m,
+				children: [/* @__PURE__ */ u(p, {
+					value: h,
 					label: "Url",
-					onChange: E,
+					onChange: M,
 					className: { inputContainer: "rounded-t" },
 					size: "sm",
-					children: [/* @__PURE__ */ c("option", {
+					children: [/* @__PURE__ */ l("option", {
 						value: "",
 						disabled: !0,
 						children: "Select a page"
-					}), w.map((e) => /* @__PURE__ */ c("option", {
+					}), A.map((e) => /* @__PURE__ */ l("option", {
 						value: e.key,
 						children: e.label
 					}, e.key))]
-				}), /* @__PURE__ */ c("div", {
+				}), /* @__PURE__ */ l("div", {
 					className: "truncate rounded-b border-r border-b border-l border-gray-200 p-1 text-xs",
-					children: O
+					children: P
 				})]
 			}),
-			/* @__PURE__ */ c(d, {
+			m !== "external" && /* @__PURE__ */ l(f, {
 				value: g,
+				label: "Section",
+				placeholder: "An element's anchor, without the #",
+				onChange: j("hash"),
+				size: "sm"
+			}),
+			/* @__PURE__ */ l(f, {
+				value: v,
 				label: "Accessible Name",
 				placeholder: "For a link that wraps a whole card",
-				onChange: T("label"),
+				onChange: j("label"),
 				size: "sm"
+			}),
+			/* @__PURE__ */ l(e, {
+				icon: x,
+				iconPlacement: S,
+				onUpdate: C
 			})
 		]
 	});
 };
 //#endregion
-export { p as default };
+export { m as default };

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

@@ -7,13 +7,20 @@ declare const declaration: {
     readonly attributeValues: {
         readonly mode: readonly string[];
         readonly target: readonly string[];
+        readonly contentPlacement: readonly string[];
+        readonly iconPlacement: readonly string[];
     };
     readonly content: {
         readonly attributes: {
             readonly href: "#";
             readonly target: "self";
             readonly mode: "page";
+            readonly hash: "";
             readonly label: "";
+            readonly content: "";
+            readonly contentPlacement: "after";
+            readonly icon: "";
+            readonly iconPlacement: "before";
         };
         readonly definition: {
             readonly label: "Link";
@@ -23,6 +30,7 @@ declare const declaration: {
             readonly bindings: {};
             readonly styleSelectors: {
                 readonly base: "";
+                readonly icon: "";
             };
             readonly initialState: {
                 readonly visibility: true;
@@ -33,7 +41,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly ["link"];
         };
@@ -66,5 +74,10 @@ declare const declaration: {
     href?: string | undefined;
     label?: string | undefined;
     target?: "self" | "blank" | "parent" | "top" | undefined;
+    content?: string | undefined;
+    icon?: string | undefined;
+    iconPlacement?: import('../../../Element/ElementWords').IconPlacement | undefined;
+    contentPlacement?: "before" | "after" | undefined;
+    hash?: string | undefined;
 }>>;
 export default declaration;

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

@@ -13,22 +13,32 @@ var n = e()({
 			"blank",
 			"parent",
 			"top"
-		])
+		]),
+		contentPlacement: t()(["before", "after"]),
+		iconPlacement: t()(["before", "after"])
 	},
 	content: {
 		attributes: {
 			href: "#",
 			target: "self",
 			mode: "page",
-			label: ""
+			hash: "",
+			label: "",
+			content: "",
+			contentPlacement: "after",
+			icon: "",
+			iconPlacement: "before"
 		},
 		definition: {
 			label: "Link",
 			type: "link",
-			description: "Navigation. Moves the user between pages of the site or to an external URL (its `mode`/`href` decide which). Use this to go page-to-page rather than a button + interaction.",
+			description: "Navigation. Moves the user between pages of the site or to an external URL (its `mode`/`href` decide which). Use this to go page-to-page rather than a button + interaction. Its words are its own `content` and an icon beside them its `icon` (Font Awesome classes) — no text or fontAwesome element inside it for them.",
 			items: [],
 			bindings: {},
-			styleSelectors: { base: "" },
+			styleSelectors: {
+				base: "",
+				icon: ""
+			},
 			initialState: { visibility: !0 }
 		},
 		builder: {
@@ -36,7 +46,7 @@ var n = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: ["link"]
 		},

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

@@ -6,13 +6,20 @@ declare const Link: {
     readonly attributeValues: {
         readonly mode: readonly string[];
         readonly target: readonly string[];
+        readonly contentPlacement: readonly string[];
+        readonly iconPlacement: readonly string[];
     };
     readonly content: {
         readonly attributes: {
             readonly href: "#";
             readonly target: "self";
             readonly mode: "page";
+            readonly hash: "";
             readonly label: "";
+            readonly content: "";
+            readonly contentPlacement: "after";
+            readonly icon: "";
+            readonly iconPlacement: "before";
         };
         readonly definition: {
             readonly label: "Link";
@@ -22,6 +29,7 @@ declare const Link: {
             readonly bindings: {};
             readonly styleSelectors: {
                 readonly base: "";
+                readonly icon: "";
             };
             readonly initialState: {
                 readonly visibility: true;
@@ -32,7 +40,7 @@ declare const Link: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly ["link"];
         };
@@ -65,5 +73,10 @@ declare const Link: {
     href?: string | undefined;
     label?: string | undefined;
     target?: "self" | "blank" | "parent" | "top" | undefined;
+    content?: string | undefined;
+    icon?: string | undefined;
+    iconPlacement?: import('../../../Element/ElementWords').IconPlacement | undefined;
+    contentPlacement?: "before" | "after" | undefined;
+    hash?: string | undefined;
 }>>;
 export default Link;

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

@@ -0,0 +1,5 @@
+/**
+ * Whether a link's path is the page being shown, given the page's whole address (`navigation.href`). Paths alone: the
+ * query and the section (`#plans`) are the same page. Undefined while no address is known — nothing is current then.
+ */
+export declare const isCurrentPage: (path: string, location: string | undefined) => boolean;

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

@@ -0,0 +1,12 @@
+//#region src/elements/basic/Link/isCurrentPage.ts
+var e = (e) => e.length > 1 ? e.replace(/\/+$/, "") : e, t = (t, n) => {
+	if (!n || !t.startsWith("/")) return !1;
+	try {
+		let r = new URL(n).pathname, i = new URL(t, n).pathname;
+		return e(decodeURI(r)) === e(decodeURI(i));
+	} catch {
+		return !1;
+	}
+};
+//#endregion
+export { t as isCurrentPage };

package/dist/elements/basic/Markdown/declaration.d.ts

@@ -25,7 +25,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/basic/Markdown/declaration.mjs

@@ -17,7 +17,7 @@ var t = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

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

@@ -24,7 +24,7 @@ declare const Markdown: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/basic/Paragraph/declaration.d.ts

@@ -25,7 +25,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/basic/Paragraph/declaration.mjs

@@ -17,7 +17,7 @@ var t = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

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

@@ -24,7 +24,7 @@ declare const Paragraph: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/basic/RichText/declaration.d.ts

@@ -31,7 +31,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/basic/RichText/declaration.mjs

@@ -27,7 +27,7 @@ var n = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

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

@@ -30,7 +30,7 @@ declare const RichText: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/basic/Text/declaration.d.ts

@@ -25,7 +25,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };