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

package/dist/delivery/number-line/graph/tick-utils.js

@@ -0,0 +1,297 @@
+import { __exportAll as e } from "../../../_virtual/_rolldown/runtime.js";
+import t from "../../../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isObject.js";
+import n from "../../../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isNumber.js";
+import r from "../../../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/uniqWith.js";
+import * as i from "mathjs";
+//#region src/delivery/number-line/graph/tick-utils.ts
+var a = /* @__PURE__ */ e({
+	buildTickData: () => w,
+	buildTickDataAsFractions: () => x,
+	closeTo: () => h,
+	decimalTickValues: () => o,
+	fraction: () => y,
+	fractionRange: () => l,
+	fractionSnapTo: () => T,
+	fractionTickValues: () => s,
+	generateMajorValuesForMinor: () => C,
+	generateMinorValues: () => S,
+	getMinorLimits: () => _,
+	isMultiple: () => v,
+	labelMultiplier: () => c,
+	normalizeTicks: () => b,
+	simpleRange: () => m,
+	snapElements: () => D,
+	snapTo: () => E,
+	zbrErrorMessage: () => u,
+	zeroBasedRange: () => d
+}), o = [
+	.001,
+	.01,
+	.02,
+	.04,
+	.05,
+	.1,
+	.125,
+	.2,
+	.25,
+	.5
+], s = [
+	"1/1000",
+	"1/100",
+	"1/64",
+	"1/50",
+	"1/32",
+	"1/25",
+	"1/20",
+	"1/16",
+	"1/15",
+	"1/12",
+	"1/10",
+	"1/9",
+	"1/8",
+	"1/7",
+	"1/6",
+	"1/5",
+	"1/4",
+	"1/3",
+	"1/2"
+], c = {
+	1: [
+		1,
+		2,
+		3,
+		4,
+		5,
+		6,
+		7,
+		8,
+		9,
+		10
+	],
+	2: [
+		1,
+		2,
+		4,
+		6,
+		8,
+		10
+	],
+	3: [
+		1,
+		3,
+		6,
+		9
+	],
+	4: [
+		1,
+		2,
+		4,
+		8
+	],
+	5: [
+		1,
+		5,
+		10
+	],
+	6: [
+		1,
+		2,
+		3,
+		6
+	],
+	7: [1, 7],
+	8: [
+		1,
+		2,
+		4,
+		8
+	],
+	9: [
+		1,
+		3,
+		9
+	],
+	10: [
+		1,
+		2,
+		5,
+		10
+	],
+	12: [
+		1,
+		2,
+		3,
+		4,
+		6
+	],
+	15: [
+		1,
+		3,
+		5
+	],
+	16: [
+		1,
+		2,
+		4,
+		8
+	],
+	20: [
+		1,
+		2,
+		4,
+		5,
+		10
+	],
+	25: [1, 5],
+	32: [
+		1,
+		2,
+		4,
+		8
+	],
+	50: [
+		1,
+		2,
+		5,
+		10
+	],
+	64: [
+		1,
+		2,
+		4,
+		8
+	],
+	100: [
+		1,
+		2,
+		4,
+		5,
+		10
+	],
+	1e3: [
+		1,
+		2,
+		4,
+		5,
+		8,
+		10
+	]
+}, l = (e, t, n) => {
+	let r = i.mod(i.abs(e), i.abs(n));
+	if (!i.equal(r, 0)) throw Error("start point must be divisible by interval");
+	if (i.equal(e, t)) return [];
+	let a = i.subtract(t, i.mod(t, i.abs(n))), o = i.larger(n, 0) ? "positive" : "negative";
+	if (o === "negative" && i.largerEq(t, e)) throw Error("start must be > than end when doing a negative decrement");
+	if (o === "positive" && i.smallerEq(t, e)) throw Error("start must be < end when doing increments");
+	let s;
+	s = o === "positive" ? i.smallerEq : i.equal(a, t) ? i.largerEq : i.larger;
+	let c = [], l = e;
+	for (; s(l, a);) c.push(l), l = i.add(l, n);
+	return c;
+}, u = (e, t) => `Can only do a positive or negative range, but got: start: ${e} and end:${t}`, d = (e, t, n) => {
+	e = i.fraction(e), t = i.fraction(t), n = i.fraction(n);
+	let r = i.abs(i.subtract(t, e));
+	if (i.larger(r, i.abs(t))) throw Error(u(e, t));
+	let a = {
+		start: i.abs(e),
+		end: i.abs(t),
+		interval: i.abs(n),
+		multiplier: i.smaller(n, 0) ? -1 : 1
+	}, o = i.mod(a.start, a.interval), s = l(i.larger(o, 0) ? i.add(i.subtract(a.start, o), a.interval) : a.start, a.end, a.interval), c = a.multiplier === -1 ? s.map((e) => i.multiply(e, -1)) : s;
+	return i.smaller(n, 0) && c.reverse(), c;
+}, f = (e, t) => (e = i.fraction(e), t = i.fraction(t), i.smaller(e, t) ? e : t), p = (e, t) => (e = i.fraction(e), t = i.fraction(t), i.larger(e, t) ? e : t), m = (e, t, n) => {
+	e = i.fraction(e), t = i.fraction(t), n = i.fraction(n);
+	let a = i.larger(t, 0) ? d(p(0, e), t, n) : [];
+	return r((i.smaller(e, 0) ? d(f(0, t), e, i.multiply(n, -1)) : []).concat(a), i.equal);
+}, h = (e, t, n) => {
+	n ||= 2;
+	let r = 10 ** -n / 2;
+	return Math.abs(e - t) < r;
+}, g = (e, t, n) => i.smaller(y(e), y(t)) ? t : i.larger(y(e), y(n)) ? n : e, _ = (e, t) => {
+	let n = e.max - e.min, r = i.number(i.multiply(10, i.divide(i.fraction(n), t)));
+	return {
+		min: r,
+		max: i.number(i.multiply(20, r))
+	};
+}, v = (e, t) => {
+	let n = i.mod(e, t);
+	return i.equal(n, 0);
+}, y = (e) => {
+	if (t(e)) return i.fraction(e.n * e.s, e.d);
+	if (n(e)) return i.fraction(e);
+}, b = (e, t, n, r) => {
+	let a = r ? r.limit !== !1 : !0, o = _(e, t), s = a ? g(y(n.minor), o.min, o.max) : y(n.minor), c = a ? g(y(n.major), s, i.multiply(s, 20)) : y(n.major);
+	if (!v(c, s)) {
+		let e = i.divide(c, s), t = e <= 2 ? 2 : Math.round(e);
+		return {
+			minor: s,
+			major: i.multiply(s, t)
+		};
+	}
+	return {
+		major: c,
+		minor: s
+	};
+}, x = (e, t, n, r) => (n = b(e, t, n, r), m(e.min, e.max, n.minor).filter((t) => i.smallerEq(t, i.fraction(e.max))).map((e) => {
+	let t = "minor", r = i.mod(e, n.major);
+	return h(i.number(r), 0) && (t = "major"), {
+		x: e,
+		type: t
+	};
+})), S = (e) => {
+	let t = {
+		fraction: [],
+		decimal: []
+	};
+	return o.forEach((n) => {
+		n >= e.min && n <= e.max && t.decimal.push(n);
+	}), s.forEach((n) => {
+		let r = i.number(i.fraction(n));
+		r >= e.min && r <= e.max && t.fraction.push(n);
+	}), t;
+}, C = (e, t, n) => {
+	let r = {
+		decimal: [],
+		fraction: []
+	}, a = i.fraction(i.number(i.number(e))), o = a.n, s = a.d;
+	if (o >= 1 && s === 1) for (let a = 1; a <= 10; a++) {
+		let s = i.number(i.multiply(o, a));
+		w(t, n, {
+			minor: e,
+			major: s
+		}, { fraction: void 0 }).filter((e) => e.type === "major").length > 1 && (r.fraction.push(s.toString()), r.decimal.push(s));
+	}
+	else for (let a in c[s]) {
+		let l = i.multiply(i.fraction(o, s), c[s][a]);
+		w(t, n, {
+			minor: e,
+			major: i.number(l)
+		}, { fraction: void 0 }).filter((e) => e.type === "major").length > 1 && (l.d === 1 ? r.fraction.push(l.n.toString()) : r.fraction.push(l.n + "/" + l.d), r.decimal.push(i.number(l)));
+	}
+	return r;
+}, w = (e, t, n, r) => x(e, t, n, r).map((e) => r.fraction ? e : {
+	...e,
+	x: i.number(e.x) || 0
+}), T = (e, t, n, r) => {
+	r = p(f(r, t), e);
+	let a = r.mod(n), o, s = n.div(2);
+	if (i.largerEq(i.abs(a), s)) {
+		let e = n.sub(i.abs(a)), t = i.largerEq(r, 0) ? "add" : "sub";
+		o = r[t](e);
+	} else {
+		let e = i.largerEq(r, 0) ? "sub" : "add";
+		o = r[e](i.abs(a));
+	}
+	return o;
+}, E = (e, t, n, r) => {
+	let a = T(i.fraction(e), i.fraction(t), i.fraction(n), i.fraction(r));
+	return i.number(a);
+}, D = (e, t, n) => n.map((n) => {
+	let r = Number.isFinite(n.size) ? E(0, n.size, t.minor, n.size) : void 0, i = E(e.min, e.max, t.minor, n.domainPosition), a = {
+		...n,
+		domainPosition: i
+	};
+	return Number.isFinite(r) && (a.size = r), a;
+});
+//#endregion
+export { w as buildTickData, C as generateMajorValuesForMinor, S as generateMinorValues, _ as getMinorLimits, D as snapElements, E as snapTo, a as tick_utils_exports };

package/dist/delivery/number-line/graph/ticks.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/ticks.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';
+export declare const TickValidator: PropTypes.Validator<NonNullable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>>;
+export declare class Tick extends React.Component {
+    static propTypes: {
+        y: PropTypes.Validator<number>;
+        x: PropTypes.Validator<number>;
+        major: PropTypes.Requireable<boolean>;
+        fraction: PropTypes.Requireable<boolean>;
+        xScale: PropTypes.Requireable<(...args: any[]) => any>;
+        type: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        major: boolean;
+    };
+    constructor(props: any);
+    updateTextBox(): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+}
+export declare class Ticks extends React.Component {
+    static contextTypes: {
+        xScale: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    static propTypes: {
+        domain: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            min: PropTypes.Validator<number>;
+            max: PropTypes.Validator<number>;
+        }>>>;
+        fraction: PropTypes.Requireable<boolean>;
+        width: PropTypes.Requireable<number>;
+        ticks: PropTypes.Validator<NonNullable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>>;
+        y: PropTypes.Validator<number>;
+    };
+    render(): React.JSX.Element;
+}
+export default Ticks;

package/dist/delivery/number-line/graph/ticks.js

@@ -0,0 +1,115 @@
+import { buildTickData as e } from "./tick-utils.js";
+import t from "react";
+import { styled as n } from "@mui/material/styles";
+import r from "prop-types";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { color as o } from "@pie-lib/render-ui";
+//#region src/delivery/number-line/graph/ticks.tsx
+var s = n("text")({
+	userSelect: "none",
+	textAlign: "center",
+	fill: o.primary()
+}), c = n("line")({ stroke: o.primary() }), l = r.shape({
+	major: (e, t) => {},
+	minor: (e, t, n) => {
+		if (e[t] <= 0) return /* @__PURE__ */ Error(`Invalid prop ${t} must be > 0. ${n}`);
+	}
+}).isRequired, u = class extends t.Component {
+	static propTypes = {
+		y: r.number.isRequired,
+		x: r.number.isRequired,
+		major: r.bool,
+		fraction: r.bool,
+		xScale: r.func,
+		type: r.string
+	};
+	static defaultProps = { major: !1 };
+	constructor(e) {
+		super(e), this.wasRendered = !1, this.state = { textBox: {
+			width: 0,
+			height: 0,
+			x: 0,
+			y: 0
+		} }, this.resizeObserver = null;
+	}
+	updateTextBox() {
+		if (this.text) {
+			let { width: e, height: t, x: n, y: r } = this.text.getBBox();
+			this.text.setAttribute("x", e / 2 * -1), this.setState({ textBox: {
+				width: e,
+				height: t,
+				x: n,
+				y: r
+			} });
+		}
+	}
+	componentDidMount() {
+		this.resizeObserver = new ResizeObserver(() => {
+			this.updateTextBox();
+		}), this.text && this.resizeObserver.observe(this.text);
+	}
+	componentWillUnmount() {
+		this.resizeObserver && this.resizeObserver.disconnect();
+	}
+	render() {
+		let { x: e, y: n, type: r, xScale: o, fraction: l } = this.props, u = l && e.n !== e.d && e.n !== 0 && e.d !== 1, d = r === "major", f = d ? 20 : 10, { width: p = 0, height: m = 0, x: h = 0, y: g = 0 } = this.state.textBox, _ = l ? u ? /* @__PURE__ */ a(t.Fragment, { children: [/* @__PURE__ */ i("tspan", {
+			x: "0",
+			dy: "0.71em",
+			children: e.n * e.s
+		}), /* @__PURE__ */ i("tspan", {
+			x: "0",
+			dy: "1.11em",
+			children: e.d
+		})] }) : e.n * e.s : Number(e.toFixed(3));
+		return /* @__PURE__ */ a("g", {
+			opacity: "1",
+			transform: `translate(${o(e)}, ${n})`,
+			children: [
+				/* @__PURE__ */ i(c, {
+					y1: f / 2 * -1,
+					y2: f / 2,
+					x1: "0.5",
+					x2: "0.5"
+				}),
+				u && /* @__PURE__ */ i(c, {
+					x1: h,
+					x2: h + p,
+					y1: g + m / 2,
+					y2: g + m / 2
+				}),
+				d && /* @__PURE__ */ i(s, {
+					ref: (e) => this.text = e,
+					y: "14",
+					width: "10",
+					dy: "0.71em",
+					textAnchor: u && "middle",
+					children: _
+				})
+			]
+		});
+	}
+}, d = class extends t.Component {
+	static contextTypes = { xScale: r.func.isRequired };
+	static propTypes = {
+		domain: r.shape({
+			min: r.number.isRequired,
+			max: r.number.isRequired
+		}).isRequired,
+		fraction: r.bool,
+		width: r.number,
+		ticks: l,
+		y: r.number.isRequired
+	};
+	render() {
+		let { domain: t, width: n, ticks: r, y: a, fraction: o } = this.props, { xScale: s } = this.context;
+		return /* @__PURE__ */ i("g", { children: e(t, n, r, { fraction: o }).map(({ x: e, type: t }) => /* @__PURE__ */ i(u, {
+			fraction: o,
+			x: e,
+			y: a,
+			type: t,
+			xScale: s
+		}, `${e}-${t}-${o}`)) });
+	}
+};
+//#endregion
+export { d as default };

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

@@ -0,0 +1,35 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/index.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 Graph from './graph/index.js';
+import PropTypes from 'prop-types';
+export { Graph };
+export declare class NumberLine extends React.Component {
+    static propTypes: {
+        onMoveElement: PropTypes.Validator<(...args: any[]) => any>;
+        onDeleteElements: PropTypes.Validator<(...args: any[]) => any>;
+        onAddElement: PropTypes.Validator<(...args: any[]) => any>;
+        onUndoElement: PropTypes.Validator<(...args: any[]) => any>;
+        onClearElements: PropTypes.Validator<(...args: any[]) => any>;
+        model: PropTypes.Validator<object>;
+        answer: PropTypes.Requireable<any[]>;
+    };
+    constructor(props: any, context: any);
+    toggleElement(index: any): void;
+    elementTypeSelected(t: any): void;
+    addElement(x: any): void;
+    hasMaxNoOfPoints(): any;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    deselectElements(): void;
+    getSize(type: any, min: any, max: any, defaultValue: any): any;
+    undo(): void;
+    clearAll(): void;
+    render(): React.JSX.Element;
+}
+export default NumberLine;

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

@@ -0,0 +1,218 @@
+import e from "./point-chooser/index.js";
+import t from "../../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isArray.js";
+import n from "../../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/cloneDeep.js";
+import r from "../../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEqual.js";
+import i from "../../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isNumber.js";
+import a from "./graph/index.js";
+import o from "./feedback.js";
+import { buildElementModel as s } from "./graph/elements/builder.js";
+import c from "react";
+import { styled as l } from "@mui/material/styles";
+import u from "prop-types";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import p from "@pie-lib/translator";
+import * as m from "@pie-lib/render-ui";
+import { Collapsible as h, PreviewPrompt as g, UiLayout as _, color as v, hasMedia as y, hasText as ee } from "@pie-lib/render-ui";
+import b from "@pie-lib/correct-answer-toggle";
+//#region src/delivery/number-line/index.tsx
+function x(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function S(e, t) {
+	return !e || x(e) ? e : x(e.default) ? e.default : t && x(e[t]) ? e[t] : t && x(e[t]?.default) ? e[t].default : e;
+}
+var C = S(_, "UiLayout") || S(O.UiLayout, "UiLayout"), w = S(g, "PreviewPrompt") || S(O.PreviewPrompt, "PreviewPrompt"), T = S(h, "Collapsible") || S(O.Collapsible, "Collapsible"), E = m, D = E.default, O = D && typeof D == "object" ? D : E, { translator: k } = p, A = l(C)(({ $colorContrast: e }) => ({
+	color: v.text(),
+	backgroundColor: v.background(),
+	...e === "black_on_rose" && { backgroundColor: "mistyrose" },
+	...e === "white_on_black" && {
+		backgroundColor: "black",
+		"--correct-answer-toggle-label-color": "white",
+		"--tick-color": "white",
+		"--line-stroke": "white",
+		"--arrow-color": "white",
+		"--point-stroke": "white",
+		"--point-fill": "black"
+	}
+})), j = l("div")(({ $colorContrast: e }) => ({
+	boxSizing: "unset",
+	color: v.text(),
+	backgroundColor: v.background(),
+	...e === "black_on_rose" && { backgroundColor: "mistyrose" },
+	...e === "white_on_black" && {
+		backgroundColor: "black",
+		"--correct-answer-toggle-label-color": "white",
+		"--tick-color": "white",
+		"--line-stroke": "white",
+		"--arrow-color": "white",
+		"--point-stroke": "white",
+		"--point-fill": "black"
+	}
+})), M = l("div")({
+	textAlign: "center",
+	pointerEvents: "none",
+	userSelect: "none"
+}), N = l("div")({ marginBottom: "16px" }), P = l("div")({
+	verticalAlign: "middle",
+	marginBottom: "16px"
+}), F = l(T)(({ theme: e }) => ({ paddingBottom: e.spacing(2) })), I = class extends c.Component {
+	static propTypes = {
+		onMoveElement: u.func.isRequired,
+		onDeleteElements: u.func.isRequired,
+		onAddElement: u.func.isRequired,
+		onUndoElement: u.func.isRequired,
+		onClearElements: u.func.isRequired,
+		model: u.object.isRequired,
+		answer: u.array
+	};
+	constructor(t, n) {
+		super(t, n);
+		let r = t.model.graph ? t.model.graph.initialType : null;
+		r = r ? r.toLowerCase() : e.DEFAULT_TYPE, this.state = {
+			selectedElements: [],
+			elementType: r,
+			answers: t.answer
+		};
+	}
+	toggleElement(e) {
+		let t = [];
+		t = this.state.selectedElements.indexOf(e) === -1 ? this.state.selectedElements.concat([e]) : this.state.selectedElements.filter((t) => t !== e), this.setState({ selectedElements: t });
+	}
+	elementTypeSelected(e) {
+		this.setState({ elementType: e });
+	}
+	addElement(e) {
+		if (this.hasMaxNoOfPoints()) {
+			this.setState({ showMaxPointsWarning: !0 }), setTimeout(() => {
+				this.setState({ showMaxPointsWarning: !1 });
+			}, 2e3);
+			return;
+		}
+		let { ticks: t, domain: n, availableTypes: i } = this.props.model.graph;
+		if (i && !i[this.state.elementType.toUpperCase()]) return;
+		let a = s(e, this.state.elementType, n, t.minor);
+		if (a) {
+			let { answers: e } = this.state;
+			e.some((e) => r(e, a)) || (e.push(a), this.setState({ answers: e }), this.props.onAddElement(a));
+		}
+	}
+	hasMaxNoOfPoints() {
+		let { answer: e, model: { graph: { maxNumberOfPoints: t } } } = this.props;
+		return i(t) && t > 0 && (e || []).length >= t;
+	}
+	UNSAFE_componentWillReceiveProps(e) {
+		let { answer: t } = e;
+		r(this.state.answers, t) || this.setState({
+			showCorrectAnswer: !1,
+			answers: t
+		});
+	}
+	deselectElements() {
+		this.setState({ selectedElements: [] });
+	}
+	getSize(e, t, n, r) {
+		let { model: { graph: i } } = this.props;
+		return i && i[e] ? Math.max(t, Math.min(n, i[e])) : r;
+	}
+	undo() {
+		let { answers: e } = this.state, { onUndoElement: t } = this.props;
+		e.pop(), this.setState({ answers: e }), t();
+	}
+	clearAll() {
+		let { onClearElements: e } = this.props;
+		this.setState({ answers: [] }), e();
+	}
+	render() {
+		let { model: r, onDeleteElements: i, onMoveElement: s, minWidth: c = 400, maxWidth: l = 1600, maxHeight: u } = this.props, { showCorrectAnswer: p, answers: m, selectedElements: h, showMaxPointsWarning: g, elementType: _ } = this.state, { corrected: v = {
+			correct: [],
+			incorrect: []
+		}, disabled: x, extraCSSRules: S, graph: C, correctResponse: T, prompt: E, emptyAnswer: D, feedback: O, colorContrast: I, language: L, teacherInstructions: R } = r, z = this.addElement.bind(this), B = !x && h && h.length > 0, { ticks: V, domain: H, arrows: U, maxNumberOfPoints: W, height: G = 100, availableTypes: K, title: q, fraction: J } = C, Y = this.getSize("width", c, l, 600), X = R && (ee(R) || y(R)), Z = {
+			disabled: x,
+			domain: H,
+			ticks: V,
+			width: Y,
+			height: (G > u ? u : G) || 100,
+			arrows: U,
+			fraction: J
+		}, Q = p && T ? (T || []).map((e) => (e.correct = !0, e)) : (m || []).map((e, t) => {
+			let r = n(e);
+			return r.selected = h.indexOf(t) !== -1, v.correct.includes(t) ? r.correct = !0 : v.incorrect.includes(t) ? r.correct = !1 : r.correct = void 0, r;
+		}), te = () => W == 1 ? k.t("numberLine.addElementLimit_one", {
+			lng: L,
+			count: 1
+		}) : k.t("numberLine.addElementLimit_other", {
+			lng: L,
+			count: W
+		}), ne = () => {
+			i(h), m = m.filter((e, t) => !h.some((e) => e === t)), this.setState({
+				selectedElements: [],
+				answers: m
+			});
+		}, re = () => {
+			if (K) return Object.keys(K).filter((e) => K[e]).map((e) => e.toLowerCase());
+		}, ie = (e) => {
+			this.setState({ showCorrectAnswer: e });
+		}, $ = Z.width - 20;
+		return /* @__PURE__ */ f(A, {
+			extraCSSRules: S,
+			$colorContrast: I,
+			children: [
+				X && /* @__PURE__ */ d(F, {
+					labels: {
+						hidden: "Show Teacher Instructions",
+						visible: "Hide Teacher Instructions"
+					},
+					children: /* @__PURE__ */ d(w, { prompt: R })
+				}),
+				E && /* @__PURE__ */ d(P, { children: /* @__PURE__ */ d(w, { prompt: E }) }),
+				/* @__PURE__ */ f(j, {
+					$colorContrast: I,
+					style: { width: Y },
+					children: [
+						/* @__PURE__ */ d(N, {
+							style: { width: $ },
+							children: /* @__PURE__ */ d(b, {
+								show: t(T) && T.length && !D,
+								toggled: p,
+								onToggle: ie,
+								initialValue: !1,
+								language: L
+							})
+						}),
+						!x && /* @__PURE__ */ d(e, {
+							elementType: _,
+							showDeleteButton: B,
+							onDeleteClick: ne,
+							onElementType: this.elementTypeSelected.bind(this),
+							onClearElements: this.clearAll.bind(this),
+							onUndoElement: this.undo.bind(this),
+							icons: re(),
+							language: L
+						}),
+						/* @__PURE__ */ d(a, {
+							...Z,
+							elements: Q,
+							onAddElement: z,
+							onMoveElement: s,
+							onToggleElement: this.toggleElement.bind(this),
+							onDeselectElements: this.deselectElements.bind(this),
+							debug: !1
+						}),
+						q && /* @__PURE__ */ d(M, { dangerouslySetInnerHTML: { __html: q } }),
+						g && /* @__PURE__ */ d(o, {
+							type: "info",
+							width: $,
+							message: te()
+						}),
+						O && !p && /* @__PURE__ */ d(o, {
+							...O,
+							width: $
+						})
+					]
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { I as default };