@plitzi/sdk-elements 0.37.8 → 0.37.10

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

@@ -1,82 +1,88 @@
-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";
-import a from "@plitzi/plitzi-ui/Select";
+import e from "../../../components/IconField/IconField.mjs";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@plitzi/plitzi-ui/Checkbox";
+import a from "@plitzi/plitzi-ui/Input";
+import o from "@plitzi/plitzi-ui/Select";
 //#region src/elements/basic/Button/Settings.tsx
-var o = ({ content: o = "Button", contentPlacement: s = "after", subType: c = "button", disabled: l = !1, title: u = "", label: d = "", onUpdate: f }) => {
-	let p = e((e) => f?.("content", e), [f]), m = e((e) => f?.("contentPlacement", e), [f]), h = e((e) => f?.("subType", e), [f]), g = e((e) => f?.("title", e), [f]), _ = e((e) => f?.("label", e), [f]), v = e((e) => f?.("disabled", e.target.checked), [f]);
-	return /* @__PURE__ */ n("div", {
+var s = ({ content: s = "Button", contentPlacement: c = "after", icon: l = "", iconPlacement: u = "before", subType: d = "button", disabled: f = !1, title: p = "", label: m = "", onUpdate: h }) => {
+	let g = t((e) => h?.("content", e), [h]), _ = t((e) => h?.("contentPlacement", e), [h]), v = t((e) => h?.("subType", e), [h]), y = t((e) => h?.("title", e), [h]), b = t((e) => h?.("label", e), [h]), x = t((e) => h?.("disabled", e.target.checked), [h]);
+	return /* @__PURE__ */ r("div", {
 		className: "flex h-full flex-col gap-4 py-2",
 		children: [
-			/* @__PURE__ */ t(i, {
-				value: o,
+			/* @__PURE__ */ n(a, {
+				value: s,
 				label: "Content",
-				onChange: p,
+				onChange: g,
 				size: "xs"
 			}),
-			/* @__PURE__ */ t(i, {
-				value: u,
+			/* @__PURE__ */ n(a, {
+				value: p,
 				label: "Tooltip",
 				placeholder: "What the button does, for an icon-only one",
-				onChange: g,
+				onChange: y,
 				size: "xs"
 			}),
-			/* @__PURE__ */ t(i, {
-				value: d,
+			/* @__PURE__ */ n(a, {
+				value: m,
 				label: "Accessible Name",
 				placeholder: "When its words do not say what it does",
-				onChange: _,
+				onChange: b,
 				size: "xs"
 			}),
-			/* @__PURE__ */ n(a, {
-				value: s,
+			/* @__PURE__ */ r(o, {
+				value: c,
 				label: "Mode",
-				onChange: m,
+				onChange: _,
 				size: "xs",
 				children: [
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "before",
 						children: "Before Elements"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "after",
 						children: "After Elements"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "elements",
 						children: "Only Elements"
 					})
 				]
 			}),
-			/* @__PURE__ */ n(a, {
-				value: c,
+			/* @__PURE__ */ r(o, {
+				value: d,
 				label: "Button Type",
-				onChange: h,
+				onChange: v,
 				size: "xs",
 				children: [
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "button",
 						children: "Button"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "submit",
 						children: "Submit"
 					}),
-					/* @__PURE__ */ t("option", {
+					/* @__PURE__ */ n("option", {
 						value: "reset",
 						children: "Reset"
 					})
 				]
 			}),
-			/* @__PURE__ */ t(r, {
-				checked: l,
+			/* @__PURE__ */ n(i, {
+				checked: f,
 				label: "Is Disabled",
-				onChange: v,
+				onChange: x,
 				size: "xs"
+			}),
+			/* @__PURE__ */ n(e, {
+				icon: l,
+				iconPlacement: u,
+				onUpdate: h
 			})
 		]
 	});
 };
 //#endregion
-export { o as default };
+export { s as default };

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

@@ -7,11 +7,14 @@ declare const declaration: {
     readonly attributeValues: {
         readonly subType: readonly string[];
         readonly contentPlacement: readonly string[];
+        readonly iconPlacement: readonly string[];
     };
     readonly content: {
         readonly attributes: {
             readonly contentPlacement: "after";
             readonly content: "Button";
+            readonly icon: "";
+            readonly iconPlacement: "before";
             readonly subType: "button";
             readonly disabled: false;
         };
@@ -23,6 +26,7 @@ declare const declaration: {
             readonly bindings: {};
             readonly styleSelectors: {
                 readonly base: "";
+                readonly icon: "";
             };
             readonly initialState: {
                 readonly visibility: true;
@@ -33,7 +37,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 [];
         };
@@ -127,7 +131,9 @@ declare const declaration: {
     title?: string | undefined;
     content?: string | undefined;
     disabled?: boolean | undefined;
+    icon?: string | undefined;
     subType?: "button" | "submit" | "reset" | undefined;
+    iconPlacement?: import('../../../Element/ElementWords').IconPlacement | undefined;
     contentPlacement?: "before" | "after" | undefined;
     ariaExpanded?: boolean | undefined;
     ariaPressed?: boolean | undefined;

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

@@ -8,22 +8,28 @@ var n = e()({
 			"submit",
 			"reset"
 		]),
-		contentPlacement: t()(["before", "after"])
+		contentPlacement: t()(["before", "after"]),
+		iconPlacement: t()(["before", "after"])
 	},
 	content: {
 		attributes: {
 			contentPlacement: "after",
 			content: "Button",
+			icon: "",
+			iconPlacement: "before",
 			subType: "button",
 			disabled: !1
 		},
 		definition: {
 			label: "Button",
 			type: "button",
-			description: "A clickable button. On its own it only renders; wire an interaction flow (trigger onClick → callbacks) to make it DO something.",
+			description: "A clickable button. On its own it only renders; wire an interaction flow (trigger onClick → callbacks) to make it DO something. Its words are its `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: {
@@ -31,7 +37,7 @@ var n = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

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

@@ -6,11 +6,14 @@ declare const Button: {
     readonly attributeValues: {
         readonly subType: readonly string[];
         readonly contentPlacement: readonly string[];
+        readonly iconPlacement: readonly string[];
     };
     readonly content: {
         readonly attributes: {
             readonly contentPlacement: "after";
             readonly content: "Button";
+            readonly icon: "";
+            readonly iconPlacement: "before";
             readonly subType: "button";
             readonly disabled: false;
         };
@@ -22,6 +25,7 @@ declare const Button: {
             readonly bindings: {};
             readonly styleSelectors: {
                 readonly base: "";
+                readonly icon: "";
             };
             readonly initialState: {
                 readonly visibility: true;
@@ -32,7 +36,7 @@ declare const Button: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };
@@ -126,7 +130,9 @@ declare const Button: {
     title?: string | undefined;
     content?: string | undefined;
     disabled?: boolean | undefined;
+    icon?: string | undefined;
     subType?: "button" | "submit" | "reset" | undefined;
+    iconPlacement?: import('../../../Element/ElementWords').IconPlacement | undefined;
     contentPlacement?: "before" | "after" | undefined;
     ariaExpanded?: boolean | undefined;
     ariaPressed?: boolean | undefined;

package/dist/elements/basic/Dropdown/DropdownPopup/declaration.d.ts

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

package/dist/elements/basic/Dropdown/DropdownPopup/declaration.mjs

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

package/dist/elements/basic/Dropdown/DropdownPopup/index.d.ts

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

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

@@ -37,7 +37,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/Dropdown/declaration.mjs

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

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

@@ -27,7 +27,7 @@ declare const Dropdown: {
                     readonly canSelect: true;
                     readonly canDragDrop: false;
                     readonly canMove: false;
-                    readonly canTemplate: false;
+                    readonly canSnippet: false;
                     readonly itemsAllowed: readonly [];
                     readonly itemsNotAllowed: readonly [];
                 };
@@ -104,7 +104,7 @@ declare const Dropdown: {
             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/Heading/declaration.d.ts

@@ -29,7 +29,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/Heading/declaration.mjs

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

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

@@ -28,7 +28,7 @@ declare const Heading: {
             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/Link/Link.d.ts

@@ -1,3 +1,4 @@
+import { IconPlacement } from '../../../Element/ElementWords';
 import { ReactNode, RefObject } from 'react';
 export type LinkProps = {
     ref?: RefObject<HTMLElement>;
@@ -6,6 +7,11 @@ export type LinkProps = {
     href?: string;
     target?: 'self' | 'blank' | 'parent' | 'top';
     mode?: 'page' | 'internal' | 'external';
+    /**
+     * A section of the page it goes to: the `anchor` of an element there, without the `#`. `/pricing` and `hash: 'plans'`
+     * land on `/pricing#plans`, scrolled to that element. Read in `page` and `internal` modes.
+     */
+    hash?: string;
     /**
      * What a screen reader announces instead of the link's contents.
      *
@@ -13,8 +19,21 @@ export type LinkProps = {
      * it — the topic, the headline, the standfirst, the byline and the button — read out as one link.
      */
     label?: string;
+    /**
+     * The link's own words — `Pricing` — drawn without a text element inside it, so a link that says something is one
+     * element rather than two. Beside its children when it has any, where `contentPlacement` says.
+     */
+    content?: string;
+    contentPlacement?: 'before' | 'after';
+    /**
+     * An icon beside the words, as Font Awesome classes — `'fa-solid fa-arrow-right'` — instead of a `fontAwesome`
+     * element inside. Decoration: the words (or `title`/`label`) name it. Its `icon` slot styles it.
+     */
+    icon?: string;
+    /** Which side of the words the icon sits on. */
+    iconPlacement?: IconPlacement;
 };
-declare const Link: ({ ref, children, className, href, target, mode, label }: LinkProps) => import('react').JSX.Element;
+declare const Link: ({ ref, children, className, href, target, mode, hash, label, content, contentPlacement, icon, iconPlacement }: LinkProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<LinkProps>): import('react').JSX.Element;
     displayName: string;

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;