@pie-element/number-line 13.1.1 → 13.1.2-next.0

package/dist/delivery/number-line/point-chooser/index.js

@@ -0,0 +1,154 @@
+import { __exportAll as e } from "../../../_virtual/_rolldown/runtime.js";
+import t from "./button.js";
+import n from "./img.js";
+import r from "react";
+import { styled as i } from "@mui/material/styles";
+import a from "prop-types";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "@pie-lib/translator";
+//#region src/delivery/number-line/point-chooser/index.tsx
+var l = /* @__PURE__ */ e({
+	Point: () => v,
+	PointChooser: () => w,
+	default: () => w
+}), { translator: u } = c, d = 41, f = 42, p = i("svg")({
+	fill: "black",
+	cursor: "pointer",
+	transition: "opacity 100ms linear",
+	"&:hover": { opacity: "0.5" }
+}), m = () => /* @__PURE__ */ s(p, {
+	fill: "#000000",
+	height: "24",
+	viewBox: "0 0 24 24",
+	width: "24",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: [/* @__PURE__ */ o("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }), /* @__PURE__ */ o("path", {
+		d: "M0 0h24v24H0z",
+		fill: "none"
+	})]
+}), h = {
+	pf: 0,
+	lff: 1,
+	lef: 2,
+	lfe: 3,
+	lee: 4,
+	rfn: 5,
+	rfp: 6,
+	ren: 7,
+	rep: 8
+}, g = i("a")(({ $iconIndex: e, $active: t }) => ({
+	display: "inline-block",
+	width: f,
+	height: d,
+	position: "relative",
+	top: "1px",
+	cursor: "pointer",
+	background: `url(${n}) -${e * f}px 0px`,
+	...t && { backgroundPosition: `-${e * f}px -${2 * d}px` },
+	"&:hover": {
+		textDecoration: "none",
+		backgroundPosition: `-${e * f}px -${d}px`
+	},
+	...t && { "&:hover": { backgroundPosition: `-${e * f}px -${2 * d}px` } }
+})), _ = (e) => {
+	let { iconKey: t, active: n, onClick: r } = e;
+	return /* @__PURE__ */ o("span", {
+		role: "presentation",
+		onClick: r,
+		children: /* @__PURE__ */ o(g, {
+			$iconIndex: h[t.toLowerCase()] ?? 0,
+			$active: n,
+			children: "\xA0"
+		})
+	}, t);
+};
+_.propTypes = {
+	iconKey: a.string.isRequired,
+	active: a.bool,
+	onClick: a.func
+};
+var v = _, y = i("div")({
+	width: "55%",
+	padding: "1px",
+	"-webkit-touch-callout": "none",
+	"-webkit-user-select": "none",
+	"-khtml-user-select": "none",
+	"-moz-user-select": "none",
+	"-ms-user-select": "none",
+	"user-select": "none"
+}), b = ({ selectPoint: e, selected: t, icons: n }) => /* @__PURE__ */ o(y, { children: n.map((n) => {
+	let r = n === t, i = r ? () => {} : e.bind(null, n);
+	return /* @__PURE__ */ o(v, {
+		iconKey: n.toLowerCase(),
+		active: r,
+		onClick: i
+	}, n.toLowerCase());
+}) });
+b.propTypes = {
+	selectPoint: a.func.isRequired,
+	selected: a.string,
+	icons: a.array
+};
+var x = i("div")({
+	display: "flex",
+	justifyContent: "space-between",
+	borderRadius: "4px",
+	padding: "1px"
+}), S = i("div")({
+	display: "flex",
+	paddingTop: "7px"
+}), C = i("span")({
+	position: "relative",
+	top: "3px",
+	width: "30px"
+}), w = class e extends r.Component {
+	static defaultProps = {
+		showDeleteButton: !1,
+		elementType: e.DEFAULT_TYPE,
+		icons: [
+			"pf",
+			"lff",
+			"lef",
+			"lfe",
+			"lee",
+			"rfn",
+			"rfp",
+			"ren",
+			"rep"
+		]
+	};
+	static propTypes = {
+		elementType: a.string,
+		showDeleteButton: a.bool,
+		onDeleteClick: a.func.isRequired,
+		onElementType: a.func.isRequired,
+		onUndoElement: a.func.isRequired,
+		onClearElements: a.func.isRequired,
+		icons: a.array,
+		language: a.string
+	};
+	render() {
+		let { elementType: e, showDeleteButton: n, onDeleteClick: r, onUndoElement: i, onClearElements: a, icons: c, onElementType: l, language: d } = this.props;
+		return /* @__PURE__ */ s(x, { children: [/* @__PURE__ */ o(b, {
+			selected: e,
+			selectPoint: l,
+			icons: c
+		}), /* @__PURE__ */ s(S, { children: [
+			n && /* @__PURE__ */ o(C, {
+				onClick: r,
+				children: /* @__PURE__ */ o(m, {})
+			}),
+			/* @__PURE__ */ o(t, {
+				onClick: i,
+				label: u.t("common:undo", { lng: d })
+			}),
+			/* @__PURE__ */ o(t, {
+				onClick: a,
+				label: u.t("numberLine.clearAll", { lng: d })
+			})
+		] })] });
+	}
+};
+w.DEFAULT_TYPE = "pf";
+//#endregion
+export { w as default, l as point_chooser_exports };

package/dist/delivery/number-line/point-chooser/styles.d.ts

@@ -0,0 +1,192 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/point-chooser/styles.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+declare const _default: {
+    pointChooser: {
+        display: string;
+        justifyContent: string;
+        borderRadius: string;
+        padding: string;
+    };
+    deleteIconHolder: {
+        position: string;
+        top: string;
+        width: string;
+    };
+    deleteIcon: {
+        fill: string;
+        cursor: string;
+        transition: string;
+        '&:hover': {
+            opacity: string;
+        };
+    };
+    elementSelector: {
+        width: string;
+        padding: string;
+    } & {
+        '-webkit-touch-callout': string;
+        '-webkit-user-select': string;
+        '-khtml-user-select': string;
+        '-moz-user-select': string;
+        '-ms-user-select': string;
+        'user-select': string;
+    };
+    controls: {
+        display: string;
+        paddingTop: string;
+    };
+    buttonText: {
+        textWrap: string;
+    };
+    pf: {
+        display: string;
+        width: number;
+        height: number;
+        position: string;
+        top: string;
+        cursor: string;
+        background: string;
+        '&.active, &.active:hover': {
+            backgroundPosition: string;
+        };
+        '&:hover': {
+            textDecoration: string;
+            backgroundPosition: string;
+        };
+    };
+    lff: {
+        display: string;
+        width: number;
+        height: number;
+        position: string;
+        top: string;
+        cursor: string;
+        background: string;
+        '&.active, &.active:hover': {
+            backgroundPosition: string;
+        };
+        '&:hover': {
+            textDecoration: string;
+            backgroundPosition: string;
+        };
+    };
+    lef: {
+        display: string;
+        width: number;
+        height: number;
+        position: string;
+        top: string;
+        cursor: string;
+        background: string;
+        '&.active, &.active:hover': {
+            backgroundPosition: string;
+        };
+        '&:hover': {
+            textDecoration: string;
+            backgroundPosition: string;
+        };
+    };
+    lfe: {
+        display: string;
+        width: number;
+        height: number;
+        position: string;
+        top: string;
+        cursor: string;
+        background: string;
+        '&.active, &.active:hover': {
+            backgroundPosition: string;
+        };
+        '&:hover': {
+            textDecoration: string;
+            backgroundPosition: string;
+        };
+    };
+    lee: {
+        display: string;
+        width: number;
+        height: number;
+        position: string;
+        top: string;
+        cursor: string;
+        background: string;
+        '&.active, &.active:hover': {
+            backgroundPosition: string;
+        };
+        '&:hover': {
+            textDecoration: string;
+            backgroundPosition: string;
+        };
+    };
+    rfn: {
+        display: string;
+        width: number;
+        height: number;
+        position: string;
+        top: string;
+        cursor: string;
+        background: string;
+        '&.active, &.active:hover': {
+            backgroundPosition: string;
+        };
+        '&:hover': {
+            textDecoration: string;
+            backgroundPosition: string;
+        };
+    };
+    rfp: {
+        display: string;
+        width: number;
+        height: number;
+        position: string;
+        top: string;
+        cursor: string;
+        background: string;
+        '&.active, &.active:hover': {
+            backgroundPosition: string;
+        };
+        '&:hover': {
+            textDecoration: string;
+            backgroundPosition: string;
+        };
+    };
+    ren: {
+        display: string;
+        width: number;
+        height: number;
+        position: string;
+        top: string;
+        cursor: string;
+        background: string;
+        '&.active, &.active:hover': {
+            backgroundPosition: string;
+        };
+        '&:hover': {
+            textDecoration: string;
+            backgroundPosition: string;
+        };
+    };
+    rep: {
+        display: string;
+        width: number;
+        height: number;
+        position: string;
+        top: string;
+        cursor: string;
+        background: string;
+        '&.active, &.active:hover': {
+            backgroundPosition: string;
+        };
+        '&:hover': {
+            textDecoration: string;
+            backgroundPosition: string;
+        };
+    };
+};
+export default _default;

package/dist/delivery/number-line/transitions/fade.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/transitions/fade.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+declare const FadeTransition: {
+    (props: any): React.JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        in: PropTypes.Requireable<boolean>;
+        mountOnEnter: PropTypes.Requireable<boolean>;
+        unmountOnExit: PropTypes.Requireable<boolean>;
+        appear: PropTypes.Requireable<boolean>;
+        enter: PropTypes.Requireable<boolean>;
+        exit: PropTypes.Requireable<boolean>;
+        timeout: PropTypes.Requireable<NonNullable<number | PropTypes.InferProps<{
+            enter: PropTypes.Requireable<number>;
+            exit: PropTypes.Requireable<number>;
+        }> | null | undefined>>;
+        addEndListener: PropTypes.Requireable<(...args: any[]) => any>;
+        onEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        onEntering: PropTypes.Requireable<(...args: any[]) => any>;
+        onEntered: PropTypes.Requireable<(...args: any[]) => any>;
+        onExit: PropTypes.Requireable<(...args: any[]) => any>;
+        onExiting: PropTypes.Requireable<(...args: any[]) => any>;
+        onExited: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
+export default FadeTransition;

package/dist/delivery/number-line/transitions/fade.js

@@ -0,0 +1,75 @@
+import e, { useEffect as t, useRef as n } from "react";
+import r from "prop-types";
+import { jsx as i } from "react/jsx-runtime";
+import { CSSTransition as a } from "react-transition-group";
+//#region src/delivery/number-line/transitions/fade.tsx
+var o = 200, s = "fade-transition", c = `
+  .${s}-appear {
+    opacity: 0;
+  }
+  .${s}-appear-active {
+    opacity: 1;
+    transition: opacity ${o}ms ease-in;
+  }
+  .${s}-enter {
+    opacity: 0;
+  }
+  .${s}-enter-active {
+    opacity: 1;
+    transition: opacity ${o}ms ease-in;
+  }
+  .${s}-exit {
+    opacity: 1;
+  }
+  .${s}-exit-active {
+    opacity: 0;
+    transition: opacity ${o}ms ease-in;
+  }
+`, l = (r) => {
+	let l = n(null), u = e.Children.only(r.children);
+	return t(() => {
+		if (!document.getElementById(`${s}-styles`)) {
+			let e = document.createElement("style");
+			e.id = `${s}-styles`, e.textContent = c, document.head.appendChild(e);
+		}
+	}, []), /* @__PURE__ */ i(a, {
+		...r,
+		nodeRef: l,
+		appear: !0,
+		classNames: {
+			enter: `${s}-enter`,
+			enterActive: `${s}-enter-active`,
+			exit: `${s}-exit`,
+			exitActive: `${s}-exit-active`,
+			appear: `${s}-appear`,
+			appearActive: `${s}-appear-active`
+		},
+		timeout: o,
+		children: /* @__PURE__ */ i("g", {
+			ref: l,
+			children: u
+		})
+	});
+};
+l.propTypes = {
+	children: r.node,
+	in: r.bool,
+	mountOnEnter: r.bool,
+	unmountOnExit: r.bool,
+	appear: r.bool,
+	enter: r.bool,
+	exit: r.bool,
+	timeout: r.oneOfType([r.number, r.shape({
+		enter: r.number,
+		exit: r.number
+	})]),
+	addEndListener: r.func,
+	onEnter: r.func,
+	onEntering: r.func,
+	onEntered: r.func,
+	onExit: r.func,
+	onExiting: r.func,
+	onExited: r.func
+};
+//#endregion
+export { l as default };

package/dist/delivery/number-line/transitions/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/transitions/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import Fade from './fade.js';
+export { Fade };

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default } from './delivery/index.js';

package/dist/index.iife.d.ts

@@ -0,0 +1,8 @@
+/**
+ * IIFE entry point for number-line element
+ * This file is only used for IIFE builds and includes auto-registration
+ *
+ * @sync-generated - Auto-generated during sync from pie-elements
+ */
+import Element from './index.js';
+export default Element;