@selectwin/kit 0.1.211 → 0.1.212

package/dist/SelectFlowCanvas.d.ts

@@ -74,8 +74,16 @@ export interface SelectFlowNodeProps {
     invalid?: boolean;
     onClick?: () => void;
     ariaLabel?: string;
+    /**
+     * Remover o bloco: com ele, o nó ganha uma lixeira no canto de cima, à direita. Ela aparece com o mouse em cima, com
+     * o foco dentro (Tab do nó para ela) ou com o nó selecionado; no toque, só com o nó selecionado. Escondida, não
+     * recebe clique nem foco: um toque no canto do nó não apaga o que não se via. Confirmar ou desfazer é de quem chama.
+     */
+    onRemove?: () => void;
+    /** Nome acessível e dica da lixeira, com o que sai (ex.: "Remover o envio por SMS"). Padrão: "Remover". */
+    removeLabel?: string;
 }
-export declare function SelectFlowNode({ x, y, width, height, shape, tone, icon, order, eyebrow, title, subtitle, tags, titleTone, selected, active, muted, invalid, onClick, ariaLabel, }: SelectFlowNodeProps): import("react").JSX.Element;
+export declare function SelectFlowNode({ x, y, width, height, shape, tone, icon, order, eyebrow, title, subtitle, tags, titleTone, selected, active, muted, invalid, onClick, ariaLabel, onRemove, removeLabel, }: SelectFlowNodeProps): import("react").JSX.Element;
 export interface SelectFlowLayoutProps {
     title: ReactNode;
     subtitle?: ReactNode;

package/dist/SelectFlowCanvas.js

@@ -1,34 +1,34 @@
 /* empty css           */
-import { ArrowLeftIcon as e, CloseIcon as t, MinusCircleIcon as n, PlusIcon as r } from "./icons.js";
-import { SelectAlert as i } from "./SelectAlert.js";
-import { SelectIconButton as a } from "./SelectIconButton.js";
-import { useId as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { ArrowLeftIcon as e, CloseIcon as t, MinusCircleIcon as n, PlusIcon as r, TrashIcon as i } from "./icons.js";
+import { SelectAlert as a } from "./SelectAlert.js";
+import { SelectIconButton as o } from "./SelectIconButton.js";
+import { useId as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/SelectFlowCanvas.tsx
-var u = (e) => Math.round(e * 100) / 100;
-function d({ width: e, height: t, edges: i, labels: d = [], pluses: f = [], children: p, zoom: m, defaultZoom: h = 1, onZoomChange: g, minZoom: _ = .5, maxZoom: v = 1.3, onBackgroundClick: y, ariaLabel: b }) {
-	let x = o().replace(/:/g, ""), [S, C] = s(h), w = m ?? S, T = (e) => {
-		let t = u(Math.min(v, Math.max(_, e)));
+var d = (e) => Math.round(e * 100) / 100;
+function f({ width: e, height: t, edges: i, labels: a = [], pluses: f = [], children: p, zoom: m, defaultZoom: h = 1, onZoomChange: g, minZoom: _ = .5, maxZoom: v = 1.3, onBackgroundClick: y, ariaLabel: b }) {
+	let x = s().replace(/:/g, ""), [S, C] = c(h), w = m ?? S, T = (e) => {
+		let t = d(Math.min(v, Math.max(_, e)));
 		m === void 0 && C(t), g == null || g(t);
 	}, E = `select-flow-arrow-${x}`, D = `select-flow-arrow-on-${x}`;
-	return /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ u("div", {
 		className: "select-flow",
 		role: "region",
 		"aria-label": b,
-		children: [/* @__PURE__ */ c("div", {
+		children: [/* @__PURE__ */ l("div", {
 			className: "select-flow__scroll",
 			onClick: (e) => {
 				e.target.dataset.flowBackground === "true" && (y == null || y());
 			},
 			"data-flow-background": "true",
-			children: /* @__PURE__ */ c("div", {
+			children: /* @__PURE__ */ l("div", {
 				className: "select-flow__sizer",
 				style: {
 					width: e * w,
 					height: t * w
 				},
 				"data-flow-background": "true",
-				children: /* @__PURE__ */ l("div", {
+				children: /* @__PURE__ */ u("div", {
 					className: "select-flow__stage",
 					style: {
 						width: e,
@@ -37,12 +37,12 @@ function d({ width: e, height: t, edges: i, labels: d = [], pluses: f = [], chil
 					},
 					"data-flow-background": "true",
 					children: [
-						/* @__PURE__ */ l("svg", {
+						/* @__PURE__ */ u("svg", {
 							className: "select-flow__edges",
 							width: e,
 							height: t,
 							"aria-hidden": "true",
-							children: [/* @__PURE__ */ l("defs", { children: [/* @__PURE__ */ c("marker", {
+							children: [/* @__PURE__ */ u("defs", { children: [/* @__PURE__ */ l("marker", {
 								id: E,
 								viewBox: "0 0 10 10",
 								refX: "8",
@@ -50,11 +50,11 @@ function d({ width: e, height: t, edges: i, labels: d = [], pluses: f = [], chil
 								markerWidth: "7",
 								markerHeight: "7",
 								orient: "auto-start-reverse",
-								children: /* @__PURE__ */ c("path", {
+								children: /* @__PURE__ */ l("path", {
 									className: "select-flow__arrow",
 									d: "M 0 0 L 10 5 L 0 10 z"
 								})
-							}), /* @__PURE__ */ c("marker", {
+							}), /* @__PURE__ */ l("marker", {
 								id: D,
 								viewBox: "0 0 10 10",
 								refX: "8",
@@ -62,17 +62,17 @@ function d({ width: e, height: t, edges: i, labels: d = [], pluses: f = [], chil
 								markerWidth: "7",
 								markerHeight: "7",
 								orient: "auto-start-reverse",
-								children: /* @__PURE__ */ c("path", {
+								children: /* @__PURE__ */ l("path", {
 									className: "select-flow__arrow select-flow__arrow--on",
 									d: "M 0 0 L 10 5 L 0 10 z"
 								})
-							})] }), i.map((e) => /* @__PURE__ */ c("path", {
+							})] }), i.map((e) => /* @__PURE__ */ l("path", {
 								d: e.d,
 								className: `select-flow__edge${e.state === "on" ? " select-flow__edge--on" : e.state === "muted" ? " select-flow__edge--muted" : ""}`,
 								markerEnd: `url(#${e.state === "on" ? D : E})`
 							}, e.id))]
 						}),
-						d.map((e) => /* @__PURE__ */ c("span", {
+						a.map((e) => /* @__PURE__ */ l("span", {
 							className: `select-flow__label${e.tone === "yes" ? " select-flow__label--yes" : ""}${e.active ? " select-flow__label--on" : ""}`,
 							style: {
 								left: e.x,
@@ -81,7 +81,7 @@ function d({ width: e, height: t, edges: i, labels: d = [], pluses: f = [], chil
 							children: e.text
 						}, e.id)),
 						p,
-						f.map((e) => /* @__PURE__ */ c("button", {
+						f.map((e) => /* @__PURE__ */ l("button", {
 							type: "button",
 							className: "select-flow__plus",
 							style: {
@@ -91,30 +91,30 @@ function d({ width: e, height: t, edges: i, labels: d = [], pluses: f = [], chil
 							title: e.label,
 							"aria-label": e.label,
 							onClick: e.onClick,
-							children: /* @__PURE__ */ c(r, {})
+							children: /* @__PURE__ */ l(r, {})
 						}, e.id))
 					]
 				})
 			})
-		}), /* @__PURE__ */ l("div", {
+		}), /* @__PURE__ */ u("div", {
 			className: "select-flow__zoom",
 			children: [
-				/* @__PURE__ */ c(a, {
-					icon: /* @__PURE__ */ c(n, {}),
+				/* @__PURE__ */ l(o, {
+					icon: /* @__PURE__ */ l(n, {}),
 					label: "Diminuir o zoom",
 					size: "sm",
 					disabled: w <= _,
 					onClick: () => T(w - .1)
 				}),
-				/* @__PURE__ */ l("button", {
+				/* @__PURE__ */ u("button", {
 					type: "button",
 					className: "select-flow__zoomvalue",
 					onClick: () => T(1),
 					title: "Voltar a 100%",
 					children: [Math.round(w * 100), "%"]
 				}),
-				/* @__PURE__ */ c(a, {
-					icon: /* @__PURE__ */ c(r, {}),
+				/* @__PURE__ */ l(o, {
+					icon: /* @__PURE__ */ l(r, {}),
 					label: "Aumentar o zoom",
 					size: "sm",
 					disabled: w >= v,
@@ -124,149 +124,192 @@ function d({ width: e, height: t, edges: i, labels: d = [], pluses: f = [], chil
 		})]
 	});
 }
-function f({ x: e, y: t, width: n, height: r, shape: i = "card", tone: a = "neutral", icon: o, order: s, eyebrow: u, title: d, subtitle: f, tags: p, titleTone: m = "default", selected: h = !1, active: g = !1, muted: _ = !1, invalid: v = !1, onClick: y, ariaLabel: b }) {
-	let x = `${h ? " is-selected" : v ? " is-invalid" : g ? " is-on" : ""}${_ ? " is-muted" : ""}`, S = {
+function p({ x: e, y: t, width: n, height: r, shape: a = "card", tone: o = "neutral", icon: s, order: c, eyebrow: d, title: f, subtitle: p, tags: h, titleTone: g = "default", selected: _ = !1, active: v = !1, muted: y = !1, invalid: b = !1, onClick: x, ariaLabel: S, onRemove: C, removeLabel: w = "Remover" }) {
+	let T = m({
+		shape: a,
+		tone: o,
+		icon: s,
+		order: c,
+		eyebrow: d,
+		title: f,
+		subtitle: p,
+		tags: h,
+		titleTone: g,
+		selected: _,
+		active: v,
+		muted: y,
+		invalid: b,
+		onClick: x,
+		ariaLabel: S
+	}, C ? {
+		left: 0,
+		top: 0,
+		width: n,
+		height: r
+	} : {
 		left: e,
 		top: t,
 		width: n,
 		height: r
-	}, C = d != null && /* @__PURE__ */ c("span", {
-		className: `select-flownode__title${m === "warning" ? " select-flownode__title--warning" : ""}`,
-		children: d
 	});
-	return i === "decision" ? /* @__PURE__ */ c("button", {
+	return C ? /* @__PURE__ */ u("div", {
+		className: `select-flownode-slot select-flownode-slot--${a}${_ ? " is-selected" : ""}`,
+		style: {
+			left: e,
+			top: t,
+			width: n,
+			height: r
+		},
+		children: [T, /* @__PURE__ */ l("button", {
+			type: "button",
+			className: "select-flownode__remove",
+			"aria-label": w,
+			title: w,
+			onClick: (e) => {
+				e.stopPropagation(), C();
+			},
+			children: /* @__PURE__ */ l(i, {})
+		})]
+	}) : T;
+}
+function m({ shape: e = "card", tone: t = "neutral", icon: n, order: r, eyebrow: i, title: a, subtitle: o, tags: s, titleTone: c = "default", selected: d = !1, active: f = !1, muted: p = !1, invalid: m = !1, onClick: h, ariaLabel: g }, _) {
+	let v = `${d ? " is-selected" : m ? " is-invalid" : f ? " is-on" : ""}${p ? " is-muted" : ""}`, y = a != null && /* @__PURE__ */ l("span", {
+		className: `select-flownode__title${c === "warning" ? " select-flownode__title--warning" : ""}`,
+		children: a
+	});
+	return e === "decision" ? /* @__PURE__ */ l("button", {
 		type: "button",
-		className: `select-flownode select-flownode--decision${x}`,
-		style: S,
-		onClick: y,
-		"aria-label": b,
-		children: /* @__PURE__ */ l("span", {
+		className: `select-flownode select-flownode--decision${v}`,
+		style: _,
+		onClick: h,
+		"aria-label": g,
+		children: /* @__PURE__ */ u("span", {
 			className: "select-flownode__inner",
-			children: [s != null && /* @__PURE__ */ c("span", {
+			children: [r != null && /* @__PURE__ */ l("span", {
 				className: "select-flownode__order",
-				children: s
-			}), /* @__PURE__ */ l("span", {
+				children: r
+			}), /* @__PURE__ */ u("span", {
 				className: "select-flownode__text",
 				children: [
-					u != null && /* @__PURE__ */ c("span", {
+					i != null && /* @__PURE__ */ l("span", {
 						className: "select-flownode__eyebrow",
-						children: u
+						children: i
 					}),
-					C,
-					f != null && /* @__PURE__ */ c("span", {
+					y,
+					o != null && /* @__PURE__ */ l("span", {
 						className: "select-flownode__sub",
-						children: f
+						children: o
 					}),
-					p != null && /* @__PURE__ */ c("span", {
+					s != null && /* @__PURE__ */ l("span", {
 						className: "select-flownode__tags",
-						children: p
+						children: s
 					})
 				]
 			})]
 		})
-	}) : i === "pill" ? /* @__PURE__ */ l("button", {
+	}) : e === "pill" ? /* @__PURE__ */ u("button", {
 		type: "button",
-		className: `select-flownode select-flownode--pill${x}`,
-		style: S,
-		onClick: y,
-		"aria-label": b,
-		children: [o, d]
-	}) : /* @__PURE__ */ l("button", {
+		className: `select-flownode select-flownode--pill${v}`,
+		style: _,
+		onClick: h,
+		"aria-label": g,
+		children: [n, a]
+	}) : /* @__PURE__ */ u("button", {
 		type: "button",
-		className: `select-flownode select-flownode--${i === "terminal" ? "terminal" : "card"}${x}`,
-		style: S,
-		onClick: y,
-		"aria-label": b,
-		children: [i === "card" && o != null && /* @__PURE__ */ c("span", {
-			className: `select-flownode__chip select-flownode__chip--${a}`,
-			children: o
-		}), /* @__PURE__ */ l("span", {
+		className: `select-flownode select-flownode--${e === "terminal" ? "terminal" : "card"}${v}`,
+		style: _,
+		onClick: h,
+		"aria-label": g,
+		children: [e === "card" && n != null && /* @__PURE__ */ l("span", {
+			className: `select-flownode__chip select-flownode__chip--${t}`,
+			children: n
+		}), /* @__PURE__ */ u("span", {
 			className: "select-flownode__text",
 			children: [
-				u != null && /* @__PURE__ */ c("span", {
+				i != null && /* @__PURE__ */ l("span", {
 					className: "select-flownode__eyebrow",
-					children: u
+					children: i
 				}),
-				C,
-				f != null && /* @__PURE__ */ c("span", {
+				y,
+				o != null && /* @__PURE__ */ l("span", {
 					className: "select-flownode__sub",
-					children: f
+					children: o
 				}),
-				p != null && /* @__PURE__ */ c("span", {
+				s != null && /* @__PURE__ */ l("span", {
 					className: "select-flownode__tags",
-					children: p
+					children: s
 				})
 			]
 		})]
 	});
 }
-function p({ title: n, subtitle: r, onBack: o, backLabel: s = "Voltar", toolbar: u, actions: d, error: f, canvas: p, inspectorHead: m, inspector: h, inspectorLabel: g = "Painel", inspectorOpen: _, onInspectorClose: v }) {
+function h({ title: n, subtitle: r, onBack: i, backLabel: s = "Voltar", toolbar: c, actions: d, error: f, canvas: p, inspectorHead: m, inspector: h, inspectorLabel: g = "Painel", inspectorOpen: _, onInspectorClose: v }) {
 	let y = _ !== void 0;
-	return /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ u("div", {
 		className: `select-flowpage${y ? " select-flowpage--sheet" : ""}${y && _ ? " is-inspecting" : ""}`,
 		children: [
-			/* @__PURE__ */ l("header", {
+			/* @__PURE__ */ u("header", {
 				className: "select-flowpage__bar",
 				children: [
-					o && /* @__PURE__ */ c(a, {
-						icon: /* @__PURE__ */ c(e, {}),
+					i && /* @__PURE__ */ l(o, {
+						icon: /* @__PURE__ */ l(e, {}),
 						label: s,
 						variant: "outline",
-						onClick: o
+						onClick: i
 					}),
-					/* @__PURE__ */ l("div", {
+					/* @__PURE__ */ u("div", {
 						className: "select-flowpage__ident",
-						children: [/* @__PURE__ */ c("span", {
+						children: [/* @__PURE__ */ l("span", {
 							className: "select-flowpage__title",
 							children: n
-						}), r != null && /* @__PURE__ */ c("span", {
+						}), r != null && /* @__PURE__ */ l("span", {
 							className: "select-flowpage__sub",
 							children: r
 						})]
 					}),
-					u != null && /* @__PURE__ */ c("div", {
+					c != null && /* @__PURE__ */ l("div", {
 						className: "select-flowpage__tools",
-						children: u
+						children: c
 					}),
-					d != null && /* @__PURE__ */ c("div", {
+					d != null && /* @__PURE__ */ l("div", {
 						className: "select-flowpage__actions",
 						children: d
 					})
 				]
 			}),
-			f != null && f !== "" && /* @__PURE__ */ c("div", {
+			f != null && f !== "" && /* @__PURE__ */ l("div", {
 				className: "select-flowpage__error",
-				children: /* @__PURE__ */ c(i, {
+				children: /* @__PURE__ */ l(a, {
 					tone: "critical",
 					children: f
 				})
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ u("div", {
 				className: "select-flowpage__body",
-				children: [/* @__PURE__ */ c("div", {
+				children: [/* @__PURE__ */ l("div", {
 					className: "select-flowpage__canvas",
 					children: p
-				}), /* @__PURE__ */ l("aside", {
+				}), /* @__PURE__ */ u("aside", {
 					className: "select-flowpage__inspector",
 					"aria-label": g,
 					children: [
-						y && v && /* @__PURE__ */ l("button", {
+						y && v && /* @__PURE__ */ u("button", {
 							type: "button",
 							className: "select-flowpage__sheetclose",
 							onClick: v,
-							children: [/* @__PURE__ */ c("span", {
+							children: [/* @__PURE__ */ l("span", {
 								className: "select-flowpage__sheetgrip",
 								"aria-hidden": "true"
-							}), /* @__PURE__ */ l("span", {
+							}), /* @__PURE__ */ u("span", {
 								className: "select-flowpage__sheetlabel",
-								children: [/* @__PURE__ */ c(t, {}), "Fechar"]
+								children: [/* @__PURE__ */ l(t, {}), "Fechar"]
 							})]
 						}),
-						m != null && /* @__PURE__ */ c("div", {
+						m != null && /* @__PURE__ */ l("div", {
 							className: "select-flowpage__inspectorhead",
 							children: m
 						}),
-						/* @__PURE__ */ c("div", {
+						/* @__PURE__ */ l("div", {
 							className: "select-flowpage__inspectorbody",
 							children: h
 						})
@@ -277,6 +320,6 @@ function p({ title: n, subtitle: r, onBack: o, backLabel: s = "Voltar", toolbar:
 	});
 }
 //#endregion
-export { d as SelectFlowCanvas, p as SelectFlowLayout, f as SelectFlowNode };
+export { f as SelectFlowCanvas, h as SelectFlowLayout, p as SelectFlowNode };
 
 //# sourceMappingURL=SelectFlowCanvas.js.map