@pie-element/placement-ordering 15.0.3-next.20261007184841 → 15.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/author/index.js +1369 -1369
- package/dist/browser/author/index.js.map +1 -1
- package/dist/browser/delivery/index.js +237 -238
- package/dist/browser/delivery/index.js.map +1 -1
- package/dist/browser/{drag-provider-ClKwhQWw.js → drag-provider-CD83T8uu.js} +2938 -2975
- package/dist/browser/drag-provider-CD83T8uu.js.map +1 -0
- package/dist/browser/editor-runtime/author/index.js +4277 -4277
- package/dist/browser/editor-runtime/author/index.js.map +1 -1
- package/dist/browser/editor-runtime/delivery/index.js +237 -238
- package/dist/browser/editor-runtime/delivery/index.js.map +1 -1
- package/dist/browser/editor-runtime/{drag-provider-DZxHQkwd.js → drag-provider-DqD0-DIx.js} +2938 -2975
- package/dist/browser/editor-runtime/drag-provider-DqD0-DIx.js.map +1 -0
- package/dist/delivery/tile.js +66 -67
- package/dist/index.iife.js +33 -33
- package/package.json +15 -15
- package/dist/browser/drag-provider-ClKwhQWw.js.map +0 -1
- package/dist/browser/editor-runtime/drag-provider-DZxHQkwd.js.map +0 -1
- package/dist/delivery/__tests__/math-control-names.test.d.ts +0 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { i as e } from "../rolldown-runtime-CWhphoD1.js";
|
|
2
2
|
import { S as t, g as n, i as r, l as i, n as a, r as o, t as s, w as c, x as l } from "../dist-CwKUcf7l.js";
|
|
3
|
-
import {
|
|
3
|
+
import { Bt as u, N as d, Vt as f, _t as p, a as m, c as h, ft as g, g as _, h as v, ht as y, i as b, j as x, m as S, mt as C, n as w, o as ee, p as T, pt as E, r as D, s as te, t as O, w as k } from "../drag-provider-CD83T8uu.js";
|
|
4
4
|
import A, { createElement as j, useRef as M } from "react";
|
|
5
|
-
import { createRoot as
|
|
6
|
-
import
|
|
5
|
+
import { createRoot as ne } from "react-dom/client";
|
|
6
|
+
import N from "react-dom";
|
|
7
7
|
import { jsx as P, jsxs as F } from "react/jsx-runtime";
|
|
8
8
|
//#region ../../shared/player-events/dist/index.js
|
|
9
9
|
var I = /* @__PURE__ */ e(a(), 1);
|
|
@@ -23,7 +23,7 @@ var I = /* @__PURE__ */ e(a(), 1);
|
|
|
23
23
|
}), this.component = t, this.complete = n;
|
|
24
24
|
}
|
|
25
25
|
});
|
|
26
|
-
var
|
|
26
|
+
var re = class e extends CustomEvent {
|
|
27
27
|
static {
|
|
28
28
|
this.TYPE = "session-changed";
|
|
29
29
|
}
|
|
@@ -37,7 +37,7 @@ var L = class e extends CustomEvent {
|
|
|
37
37
|
}
|
|
38
38
|
}), this.component = t, this.complete = n;
|
|
39
39
|
}
|
|
40
|
-
},
|
|
40
|
+
}, L = /* @__PURE__ */ e(u(), 1);
|
|
41
41
|
function ie(e, t, n) {
|
|
42
42
|
let r = { ...e };
|
|
43
43
|
return t.top + e.y <= n.top ? r.y = n.top - t.top : t.bottom + e.y >= n.top + n.height && (r.y = n.top + n.height - t.bottom), t.left + e.x <= n.left ? r.x = n.left - t.left : t.right + e.x >= n.left + n.width && (r.x = n.left + n.width - t.right), r;
|
|
@@ -70,8 +70,8 @@ var ae = (e) => {
|
|
|
70
70
|
]
|
|
71
71
|
});
|
|
72
72
|
oe.propTypes = {
|
|
73
|
-
bgFill:
|
|
74
|
-
fgFill:
|
|
73
|
+
bgFill: L.default.string.isRequired,
|
|
74
|
+
fgFill: L.default.string.isRequired
|
|
75
75
|
};
|
|
76
76
|
var se = ({ bgFill: e, fgFill: t, borderFill: n }) => /* @__PURE__ */ F("svg", {
|
|
77
77
|
"aria-hidden": "true",
|
|
@@ -116,14 +116,14 @@ var se = ({ bgFill: e, fgFill: t, borderFill: n }) => /* @__PURE__ */ F("svg", {
|
|
|
116
116
|
]
|
|
117
117
|
});
|
|
118
118
|
se.propTypes = {
|
|
119
|
-
bgFill:
|
|
120
|
-
fgFill:
|
|
121
|
-
borderFill:
|
|
119
|
+
bgFill: L.default.string.isRequired,
|
|
120
|
+
fgFill: L.default.string.isRequired,
|
|
121
|
+
borderFill: L.default.string.isRequired
|
|
122
122
|
};
|
|
123
|
-
var ce =
|
|
123
|
+
var ce = p("div")(({ size: e }) => ({
|
|
124
124
|
width: e || "25px",
|
|
125
125
|
height: e || "25px"
|
|
126
|
-
})),
|
|
126
|
+
})), R = ({ open: e, size: t }) => /* @__PURE__ */ P(ce, {
|
|
127
127
|
size: t,
|
|
128
128
|
children: e ? /* @__PURE__ */ P(oe, {
|
|
129
129
|
bgFill: "#bce2ff",
|
|
@@ -134,13 +134,13 @@ var ce = k("div")(({ size: e }) => ({
|
|
|
134
134
|
borderFill: "#bce2ff"
|
|
135
135
|
})
|
|
136
136
|
});
|
|
137
|
-
|
|
138
|
-
open:
|
|
139
|
-
size:
|
|
140
|
-
},
|
|
137
|
+
R.propTypes = {
|
|
138
|
+
open: L.default.bool,
|
|
139
|
+
size: L.default.string
|
|
140
|
+
}, R.defaultProps = { open: !1 };
|
|
141
141
|
//#endregion
|
|
142
142
|
//#region ../../lib-react/correct-answer-toggle/dist/expander.js
|
|
143
|
-
var
|
|
143
|
+
var z = "height ease-in 300ms, opacity ease-in 300ms", le = p("div")(() => ({
|
|
144
144
|
position: "relative",
|
|
145
145
|
height: 0,
|
|
146
146
|
overflow: "hidden",
|
|
@@ -148,7 +148,7 @@ var le = "height ease-in 300ms, opacity ease-in 300ms", ue = k("div")(() => ({
|
|
|
148
148
|
visibility: "hidden",
|
|
149
149
|
width: 0,
|
|
150
150
|
"&.enter": {
|
|
151
|
-
transition:
|
|
151
|
+
transition: z,
|
|
152
152
|
opacity: 1,
|
|
153
153
|
height: "auto",
|
|
154
154
|
width: "auto",
|
|
@@ -162,7 +162,7 @@ var le = "height ease-in 300ms, opacity ease-in 300ms", ue = k("div")(() => ({
|
|
|
162
162
|
minHeight: "25px"
|
|
163
163
|
},
|
|
164
164
|
"&.exit": {
|
|
165
|
-
transition:
|
|
165
|
+
transition: z,
|
|
166
166
|
opacity: 0,
|
|
167
167
|
height: 0,
|
|
168
168
|
visibility: "visible",
|
|
@@ -174,9 +174,9 @@ var le = "height ease-in 300ms, opacity ease-in 300ms", ue = k("div")(() => ({
|
|
|
174
174
|
height: 0,
|
|
175
175
|
width: 0
|
|
176
176
|
}
|
|
177
|
-
})),
|
|
177
|
+
})), ue = (e) => {
|
|
178
178
|
let { show: t, children: n, className: r } = e, i = M(null);
|
|
179
|
-
return /* @__PURE__ */ P(
|
|
179
|
+
return /* @__PURE__ */ P(C, {
|
|
180
180
|
nodeRef: i,
|
|
181
181
|
in: t,
|
|
182
182
|
appear: !0,
|
|
@@ -188,37 +188,37 @@ var le = "height ease-in 300ms, opacity ease-in 300ms", ue = k("div")(() => ({
|
|
|
188
188
|
exit: "exit",
|
|
189
189
|
exitDone: "exit-done"
|
|
190
190
|
},
|
|
191
|
-
children: /* @__PURE__ */ P(
|
|
191
|
+
children: /* @__PURE__ */ P(le, {
|
|
192
192
|
ref: i,
|
|
193
193
|
className: r,
|
|
194
194
|
children: n
|
|
195
195
|
})
|
|
196
196
|
});
|
|
197
197
|
};
|
|
198
|
-
|
|
199
|
-
show:
|
|
200
|
-
className:
|
|
201
|
-
children:
|
|
198
|
+
ue.propTypes = {
|
|
199
|
+
show: L.default.bool.isRequired,
|
|
200
|
+
className: L.default.string,
|
|
201
|
+
children: L.default.oneOfType([L.default.arrayOf(L.default.node), L.default.node]).isRequired
|
|
202
202
|
};
|
|
203
203
|
//#endregion
|
|
204
204
|
//#region ../../lib-react/correct-answer-toggle/dist/index.js
|
|
205
205
|
function B(e) {
|
|
206
206
|
return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
|
|
207
207
|
}
|
|
208
|
-
function
|
|
208
|
+
function de(e, t) {
|
|
209
209
|
return !e || B(e) ? e : B(e.default) ? e.default : t && B(e[t]) ? e[t] : t && B(e[t]?.default) ? e[t].default : e;
|
|
210
210
|
}
|
|
211
|
-
var
|
|
211
|
+
var fe = de(v, "Readable") || de(me.Readable, "Readable"), pe = h, V = pe.default, me = V && typeof V == "object" ? V : pe, { translator: H } = s, he = {
|
|
212
212
|
WebkitTouchCallout: "none",
|
|
213
213
|
WebkitUserSelect: "none",
|
|
214
214
|
KhtmlUserSelect: "none",
|
|
215
215
|
MozUserSelect: "none",
|
|
216
216
|
msUserSelect: "none",
|
|
217
217
|
userSelect: "none"
|
|
218
|
-
},
|
|
218
|
+
}, ge = p("div")(() => ({
|
|
219
219
|
width: "100%",
|
|
220
220
|
cursor: "pointer"
|
|
221
|
-
})),
|
|
221
|
+
})), _e = p("button")(() => ({
|
|
222
222
|
margin: "0 auto",
|
|
223
223
|
textAlign: "center",
|
|
224
224
|
display: "flex",
|
|
@@ -234,15 +234,15 @@ var pe = fe(v, "Readable") || fe(he.Readable, "Readable"), me = _, V = me.defaul
|
|
|
234
234
|
outline: `2px solid ${y.buttonFocusOutline()}`,
|
|
235
235
|
outlineOffset: "-2px"
|
|
236
236
|
}
|
|
237
|
-
})),
|
|
237
|
+
})), ve = p("div")(() => ({
|
|
238
238
|
width: "fit-content",
|
|
239
239
|
minWidth: "140px",
|
|
240
240
|
alignSelf: "center",
|
|
241
241
|
verticalAlign: "middle",
|
|
242
242
|
color: `var(--correct-answer-toggle-label-color, ${y.text()})`,
|
|
243
243
|
fontWeight: "normal",
|
|
244
|
-
...
|
|
245
|
-
})),
|
|
244
|
+
...he
|
|
245
|
+
})), ye = p("div")(() => ({
|
|
246
246
|
position: "absolute",
|
|
247
247
|
width: "25px",
|
|
248
248
|
"&.enter": { opacity: "0" },
|
|
@@ -255,20 +255,20 @@ var pe = fe(v, "Readable") || fe(he.Readable, "Readable"), me = _, V = me.defaul
|
|
|
255
255
|
opacity: "0",
|
|
256
256
|
transition: "opacity 0.3s ease-in"
|
|
257
257
|
}
|
|
258
|
-
})), be =
|
|
258
|
+
})), be = p("div")(() => ({
|
|
259
259
|
width: "25px",
|
|
260
260
|
marginRight: "5px",
|
|
261
261
|
display: "flex",
|
|
262
262
|
alignItems: "center"
|
|
263
263
|
})), xe = class e extends A.Component {
|
|
264
264
|
static propTypes = {
|
|
265
|
-
onToggle:
|
|
266
|
-
toggled:
|
|
267
|
-
show:
|
|
268
|
-
hideMessage:
|
|
269
|
-
showMessage:
|
|
270
|
-
className:
|
|
271
|
-
language:
|
|
265
|
+
onToggle: L.default.func,
|
|
266
|
+
toggled: L.default.bool,
|
|
267
|
+
show: L.default.bool,
|
|
268
|
+
hideMessage: L.default.string,
|
|
269
|
+
showMessage: L.default.string,
|
|
270
|
+
className: L.default.string,
|
|
271
|
+
language: L.default.string
|
|
272
272
|
};
|
|
273
273
|
static defaultProps = {
|
|
274
274
|
showMessage: "Show correct answer",
|
|
@@ -298,16 +298,16 @@ var pe = fe(v, "Readable") || fe(he.Readable, "Readable"), me = _, V = me.defaul
|
|
|
298
298
|
}
|
|
299
299
|
render() {
|
|
300
300
|
let { className: e, toggled: t, hideMessage: n, showMessage: r } = this.props;
|
|
301
|
-
return /* @__PURE__ */ P(
|
|
301
|
+
return /* @__PURE__ */ P(ge, {
|
|
302
302
|
className: e,
|
|
303
|
-
children: /* @__PURE__ */ P(
|
|
303
|
+
children: /* @__PURE__ */ P(ue, {
|
|
304
304
|
show: this.state.show,
|
|
305
|
-
children: /* @__PURE__ */ F(
|
|
305
|
+
children: /* @__PURE__ */ F(_e, {
|
|
306
306
|
type: "button",
|
|
307
307
|
"aria-pressed": !!t,
|
|
308
308
|
onClick: this.onClick.bind(this),
|
|
309
309
|
onTouchEnd: this.onTouch.bind(this),
|
|
310
|
-
children: [/* @__PURE__ */ F(be, { children: [/* @__PURE__ */ P(
|
|
310
|
+
children: [/* @__PURE__ */ F(be, { children: [/* @__PURE__ */ P(C, {
|
|
311
311
|
nodeRef: this.openIconRef,
|
|
312
312
|
timeout: 400,
|
|
313
313
|
in: t,
|
|
@@ -318,11 +318,11 @@ var pe = fe(v, "Readable") || fe(he.Readable, "Readable"), me = _, V = me.defaul
|
|
|
318
318
|
exit: "exit",
|
|
319
319
|
exitActive: "exit-active"
|
|
320
320
|
},
|
|
321
|
-
children: /* @__PURE__ */ P(
|
|
321
|
+
children: /* @__PURE__ */ P(ye, {
|
|
322
322
|
ref: this.openIconRef,
|
|
323
|
-
children: /* @__PURE__ */ P(
|
|
323
|
+
children: /* @__PURE__ */ P(R, { open: t }, "correct-open")
|
|
324
324
|
})
|
|
325
|
-
}), /* @__PURE__ */ P(
|
|
325
|
+
}), /* @__PURE__ */ P(C, {
|
|
326
326
|
nodeRef: this.closedIconRef,
|
|
327
327
|
timeout: 5e3,
|
|
328
328
|
in: !t,
|
|
@@ -333,13 +333,13 @@ var pe = fe(v, "Readable") || fe(he.Readable, "Readable"), me = _, V = me.defaul
|
|
|
333
333
|
exit: "exit",
|
|
334
334
|
exitActive: "exit-active"
|
|
335
335
|
},
|
|
336
|
-
children: /* @__PURE__ */ P(
|
|
336
|
+
children: /* @__PURE__ */ P(ye, {
|
|
337
337
|
ref: this.closedIconRef,
|
|
338
|
-
children: /* @__PURE__ */ P(
|
|
338
|
+
children: /* @__PURE__ */ P(R, { open: t }, "correct-closed")
|
|
339
339
|
})
|
|
340
|
-
})] }), /* @__PURE__ */ P(
|
|
340
|
+
})] }), /* @__PURE__ */ P(fe, {
|
|
341
341
|
false: !0,
|
|
342
|
-
children: /* @__PURE__ */ P(
|
|
342
|
+
children: /* @__PURE__ */ P(ve, {
|
|
343
343
|
"aria-hidden": !this.state.show,
|
|
344
344
|
children: t ? n : r
|
|
345
345
|
})
|
|
@@ -360,13 +360,13 @@ function Se(e) {
|
|
|
360
360
|
} else for (n in e) e[n] && (r && (r += " "), r += n);
|
|
361
361
|
return r;
|
|
362
362
|
}
|
|
363
|
-
function
|
|
363
|
+
function U() {
|
|
364
364
|
for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = Se(e)) && (r && (r += " "), r += t);
|
|
365
365
|
return r;
|
|
366
366
|
}
|
|
367
367
|
//#endregion
|
|
368
368
|
//#region ../../lib-react/drag/dist/placeholder.js
|
|
369
|
-
var
|
|
369
|
+
var Ce = y.v("pie")("background", y.defaults.WHITE), we = p("div")(({ theme: e }) => ({
|
|
370
370
|
"&.placeholder": {
|
|
371
371
|
WebkitTouchCallout: "none",
|
|
372
372
|
WebkitUserSelect: "none",
|
|
@@ -376,7 +376,7 @@ var we = y.v("pie")("background", y.defaults.WHITE), Te = k("div")(({ theme: e }
|
|
|
376
376
|
userSelect: "none",
|
|
377
377
|
width: "100%",
|
|
378
378
|
height: "100%",
|
|
379
|
-
background:
|
|
379
|
+
background: Ce,
|
|
380
380
|
transition: "background-color 200ms linear, border-color 200ms linear",
|
|
381
381
|
boxSizing: "border-box",
|
|
382
382
|
display: "grid",
|
|
@@ -387,7 +387,7 @@ var we = y.v("pie")("background", y.defaults.WHITE), Te = k("div")(({ theme: e }
|
|
|
387
387
|
},
|
|
388
388
|
"&.placeholderDisabled": {
|
|
389
389
|
boxShadow: "none",
|
|
390
|
-
background:
|
|
390
|
+
background: Ce
|
|
391
391
|
},
|
|
392
392
|
"&.over": {
|
|
393
393
|
border: `1px solid ${y.border()}`,
|
|
@@ -419,50 +419,50 @@ var we = y.v("pie")("background", y.defaults.WHITE), Te = k("div")(({ theme: e }
|
|
|
419
419
|
display: "flex",
|
|
420
420
|
flexFlow: "column wrap"
|
|
421
421
|
}
|
|
422
|
-
})),
|
|
423
|
-
let { children: t, className: n, isOver: r, type: i, grid: a, disabled: o, choiceBoard: s, isCategorize: c, isVerticalPool: l, minHeight: u, extraStyles: d } = e, f =
|
|
422
|
+
})), Te = (e) => {
|
|
423
|
+
let { children: t, className: n, isOver: r, type: i, grid: a, disabled: o, choiceBoard: s, isCategorize: c, isVerticalPool: l, minHeight: u, extraStyles: d } = e, f = U("placeholder", o && "placeholderDisabled", r && "over", i, n), p = {};
|
|
424
424
|
if (a && a.columns && (p.gridTemplateColumns = `repeat(${a.columns}, 1fr)`), a && a.rows) {
|
|
425
425
|
let e = a.rowsRepeatValue || "1fr";
|
|
426
426
|
p.gridTemplateRows = `repeat(${a.rows}, ${e})`;
|
|
427
427
|
}
|
|
428
428
|
i === "choice" && (p.border = `1px solid ${y.borderDark()}`, p.background = y.surface());
|
|
429
429
|
let m = c ? "categorizeBoard" : "board";
|
|
430
|
-
return /* @__PURE__ */ P(
|
|
430
|
+
return /* @__PURE__ */ P(we, {
|
|
431
431
|
style: {
|
|
432
432
|
...p,
|
|
433
433
|
minHeight: u,
|
|
434
434
|
...d
|
|
435
435
|
},
|
|
436
|
-
className:
|
|
436
|
+
className: U(s ? m : f, l && "verticalPool"),
|
|
437
437
|
children: t
|
|
438
438
|
});
|
|
439
439
|
};
|
|
440
|
-
|
|
441
|
-
choiceBoard:
|
|
442
|
-
grid:
|
|
443
|
-
columns:
|
|
444
|
-
rows:
|
|
445
|
-
rowsRepeatValue:
|
|
440
|
+
Te.propTypes = {
|
|
441
|
+
choiceBoard: L.default.bool,
|
|
442
|
+
grid: L.default.shape({
|
|
443
|
+
columns: L.default.number,
|
|
444
|
+
rows: L.default.number,
|
|
445
|
+
rowsRepeatValue: L.default.string
|
|
446
446
|
}),
|
|
447
|
-
children:
|
|
448
|
-
className:
|
|
449
|
-
isOver:
|
|
450
|
-
index:
|
|
451
|
-
type:
|
|
452
|
-
disabled:
|
|
453
|
-
isCategorize:
|
|
454
|
-
isVerticalPool:
|
|
455
|
-
minHeight:
|
|
447
|
+
children: L.default.oneOfType([L.default.arrayOf(L.default.node), L.default.node]).isRequired,
|
|
448
|
+
className: L.default.string,
|
|
449
|
+
isOver: L.default.bool,
|
|
450
|
+
index: L.default.number,
|
|
451
|
+
type: L.default.string,
|
|
452
|
+
disabled: L.default.bool,
|
|
453
|
+
isCategorize: L.default.bool,
|
|
454
|
+
isVerticalPool: L.default.bool,
|
|
455
|
+
minHeight: L.default.number
|
|
456
456
|
};
|
|
457
457
|
//#endregion
|
|
458
458
|
//#region ../../lib-react/drag/dist/collision.js
|
|
459
|
-
var
|
|
459
|
+
var Ee = (e, t, n) => ({
|
|
460
460
|
...e,
|
|
461
461
|
left: e.left + t,
|
|
462
462
|
right: e.right + t,
|
|
463
463
|
top: e.top + n,
|
|
464
464
|
bottom: e.bottom + n
|
|
465
|
-
}),
|
|
465
|
+
}), De = (e, t) => {
|
|
466
466
|
let n = /* @__PURE__ */ new Map();
|
|
467
467
|
return e.forEach((e, r) => {
|
|
468
468
|
let i = Math.max(e.left, t.left), a = Math.max(e.top, t.top), o = Math.min(e.right, t.right), s = Math.min(e.bottom, t.bottom);
|
|
@@ -476,7 +476,7 @@ var De = (e, t, n) => ({
|
|
|
476
476
|
});
|
|
477
477
|
}), n;
|
|
478
478
|
};
|
|
479
|
-
function
|
|
479
|
+
function Oe({ detect: e = m, modifiers: t } = {}) {
|
|
480
480
|
let n = null, r = {
|
|
481
481
|
x: 0,
|
|
482
482
|
y: 0
|
|
@@ -484,8 +484,8 @@ function ke({ detect: e = g, modifiers: t } = {}) {
|
|
|
484
484
|
return {
|
|
485
485
|
collisionDetection: (a) => (n = a.pointerCoordinates, e(!t || !n ? a : {
|
|
486
486
|
...a,
|
|
487
|
-
collisionRect:
|
|
488
|
-
droppableRects: i ?
|
|
487
|
+
collisionRect: Ee(a.collisionRect, -r.x, -r.y),
|
|
488
|
+
droppableRects: i ? De(a.droppableRects, i) : a.droppableRects
|
|
489
489
|
})),
|
|
490
490
|
...t && { modifiers: [(e) => {
|
|
491
491
|
let n = D(t, e);
|
|
@@ -502,24 +502,24 @@ function ke({ detect: e = g, modifiers: t } = {}) {
|
|
|
502
502
|
}
|
|
503
503
|
//#endregion
|
|
504
504
|
//#region src/delivery/tile.tsx
|
|
505
|
-
var
|
|
505
|
+
var ke = (0, I.default)("pie-elements:placement-ordering:tile"), Ae = p("div")(({ theme: e }) => ({
|
|
506
506
|
width: "100%",
|
|
507
507
|
fontSize: e.typography.fontSize + 4,
|
|
508
508
|
textAlign: "center",
|
|
509
509
|
color: "inherit"
|
|
510
|
-
})),
|
|
510
|
+
})), je = ({ type: e, index: t, isOver: n, disabled: r }) => /* @__PURE__ */ P(Te, {
|
|
511
511
|
type: e,
|
|
512
512
|
isOver: n,
|
|
513
513
|
disabled: r,
|
|
514
|
-
children: e === "target" && t !== void 0 && /* @__PURE__ */ P(
|
|
514
|
+
children: e === "target" && t !== void 0 && /* @__PURE__ */ P(Ae, { children: t })
|
|
515
515
|
});
|
|
516
|
-
|
|
517
|
-
type:
|
|
518
|
-
index:
|
|
519
|
-
isOver:
|
|
520
|
-
disabled:
|
|
516
|
+
je.propTypes = {
|
|
517
|
+
type: L.default.string,
|
|
518
|
+
index: L.default.number,
|
|
519
|
+
isOver: L.default.bool,
|
|
520
|
+
disabled: L.default.bool
|
|
521
521
|
};
|
|
522
|
-
var
|
|
522
|
+
var Me = p("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled: i, outcome: a, label: o, type: s }) => ({
|
|
523
523
|
cursor: i ? "not-allowed" : "grab",
|
|
524
524
|
width: "100%",
|
|
525
525
|
height: "100%",
|
|
@@ -563,14 +563,14 @@ var Ne = k("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled
|
|
|
563
563
|
border: "none",
|
|
564
564
|
"&:hover": { backgroundColor: "unset" }
|
|
565
565
|
}
|
|
566
|
-
})),
|
|
566
|
+
})), Ne = (e) => {
|
|
567
567
|
let { type: t, isDragging: n, isSelected: r, empty: i, isOver: a, label: o, disabled: s, outcome: c, guideIndex: l } = e;
|
|
568
|
-
return i ? /* @__PURE__ */ P(
|
|
568
|
+
return i ? /* @__PURE__ */ P(je, {
|
|
569
569
|
type: t,
|
|
570
570
|
index: l,
|
|
571
571
|
isOver: a,
|
|
572
572
|
disabled: s
|
|
573
|
-
}) : /* @__PURE__ */ P(
|
|
573
|
+
}) : /* @__PURE__ */ P(Me, {
|
|
574
574
|
type: t,
|
|
575
575
|
isDragging: n,
|
|
576
576
|
isSelected: r,
|
|
@@ -578,7 +578,7 @@ var Ne = k("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled
|
|
|
578
578
|
disabled: s,
|
|
579
579
|
outcome: c,
|
|
580
580
|
label: o,
|
|
581
|
-
dangerouslySetInnerHTML: { __html:
|
|
581
|
+
dangerouslySetInnerHTML: { __html: E(o) }
|
|
582
582
|
});
|
|
583
583
|
}, W = (e) => {
|
|
584
584
|
let { label: t, type: n, id: r, empty: i, disabled: a, outcome: o, index: s, guideIndex: c, instanceId: l, draggable: u, tileIndex: d, selectedChoice: f, onChoiceClick: p, onPlacementClick: m } = e, h = `tile-${n}-${r ?? "empty"}-${d}-${l}`, g = `drop-${n}-${r ?? "empty"}-${d}-${l}`, _ = {
|
|
@@ -587,34 +587,34 @@ var Ne = k("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled
|
|
|
587
587
|
instanceId: l,
|
|
588
588
|
value: t,
|
|
589
589
|
index: s
|
|
590
|
-
}, { attributes: v, listeners: y, setNodeRef: b, transform: x, isDragging: S } =
|
|
590
|
+
}, { attributes: v, listeners: y, setNodeRef: b, transform: x, isDragging: S } = ee({
|
|
591
591
|
id: h,
|
|
592
592
|
data: _,
|
|
593
593
|
disabled: !u || a
|
|
594
|
-
}), { setNodeRef: C, isOver: w } =
|
|
594
|
+
}), { setNodeRef: C, isOver: w } = te({
|
|
595
595
|
id: g,
|
|
596
596
|
data: _,
|
|
597
597
|
disabled: S
|
|
598
598
|
}), T = !!f && f.type === _.type && f.id === _.id && f.index === _.index, [E, D] = A.useState(!1), O = !!f && !a, k = w || n === "target" && O && E, j = () => {
|
|
599
599
|
a || (n === "choice" ? f?.type === "target" ? m?.(_) : u && p?.(_) : n === "target" && (T ? p?.(_) : f ? m?.(_) : u && p?.(_)));
|
|
600
|
-
}, M = u && !a
|
|
600
|
+
}, M = !(u && !a) && !a && O, ne = (e) => {
|
|
601
601
|
(e.code === "Space" || e.code === "Enter") && (e.preventDefault(), j());
|
|
602
|
-
},
|
|
602
|
+
}, N = A.useRef(null);
|
|
603
603
|
A.useEffect(() => {
|
|
604
|
-
let e =
|
|
604
|
+
let e = N.current, t = (e) => {
|
|
605
605
|
e.preventDefault();
|
|
606
606
|
};
|
|
607
607
|
return e && e.addEventListener("touchstart", t, { passive: !1 }), () => {
|
|
608
608
|
e && e.removeEventListener("touchstart", t);
|
|
609
609
|
};
|
|
610
610
|
}, []);
|
|
611
|
-
let
|
|
612
|
-
|
|
611
|
+
let F = (e) => {
|
|
612
|
+
N.current = e, b(e), C(e);
|
|
613
613
|
};
|
|
614
|
-
|
|
615
|
-
let
|
|
614
|
+
ke("[render], props: ", e);
|
|
615
|
+
let I = n === "target" ? `target-${s}` : n === "choice" ? `choice-${r}` : null, re = I ? `${l}:${I}` : void 0;
|
|
616
616
|
return /* @__PURE__ */ P("div", {
|
|
617
|
-
ref:
|
|
617
|
+
ref: F,
|
|
618
618
|
style: {
|
|
619
619
|
transform: x ? `translate3d(${x.x}px, ${x.y}px, 0)` : void 0,
|
|
620
620
|
boxSizing: "border-box",
|
|
@@ -627,19 +627,18 @@ var Ne = k("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled
|
|
|
627
627
|
zIndex: S ? 1e3 : "auto",
|
|
628
628
|
willChange: S ? "transform" : "auto"
|
|
629
629
|
},
|
|
630
|
-
role:
|
|
631
|
-
tabIndex:
|
|
632
|
-
onKeyDown:
|
|
630
|
+
role: M ? "button" : void 0,
|
|
631
|
+
tabIndex: M ? 0 : void 0,
|
|
632
|
+
onKeyDown: M ? ne : void 0,
|
|
633
633
|
onClick: j,
|
|
634
634
|
onMouseEnter: () => D(!0),
|
|
635
635
|
onMouseLeave: () => D(!1),
|
|
636
|
-
"data-tile-id":
|
|
637
|
-
|
|
638
|
-
...M ? {
|
|
636
|
+
"data-tile-id": re,
|
|
637
|
+
...u && !a ? {
|
|
639
638
|
...y,
|
|
640
639
|
...v
|
|
641
640
|
} : {},
|
|
642
|
-
children: /* @__PURE__ */ P(
|
|
641
|
+
children: /* @__PURE__ */ P(Ne, {
|
|
643
642
|
label: t,
|
|
644
643
|
id: r,
|
|
645
644
|
empty: i,
|
|
@@ -655,39 +654,39 @@ var Ne = k("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled
|
|
|
655
654
|
});
|
|
656
655
|
};
|
|
657
656
|
W.propTypes = {
|
|
658
|
-
id:
|
|
659
|
-
label:
|
|
660
|
-
isOver:
|
|
661
|
-
type:
|
|
662
|
-
empty:
|
|
663
|
-
disabled:
|
|
664
|
-
outcome:
|
|
665
|
-
index:
|
|
666
|
-
guideIndex:
|
|
667
|
-
instanceId:
|
|
668
|
-
draggable:
|
|
669
|
-
tileIndex:
|
|
670
|
-
selectedChoice:
|
|
671
|
-
onChoiceClick:
|
|
672
|
-
onPlacementClick:
|
|
657
|
+
id: L.default.any,
|
|
658
|
+
label: L.default.string,
|
|
659
|
+
isOver: L.default.bool,
|
|
660
|
+
type: L.default.string,
|
|
661
|
+
empty: L.default.bool,
|
|
662
|
+
disabled: L.default.bool,
|
|
663
|
+
outcome: L.default.string,
|
|
664
|
+
index: L.default.number,
|
|
665
|
+
guideIndex: L.default.number,
|
|
666
|
+
instanceId: L.default.any,
|
|
667
|
+
draggable: L.default.bool,
|
|
668
|
+
tileIndex: L.default.number,
|
|
669
|
+
selectedChoice: L.default.object,
|
|
670
|
+
onChoiceClick: L.default.func,
|
|
671
|
+
onPlacementClick: L.default.func
|
|
673
672
|
};
|
|
674
673
|
//#endregion
|
|
675
674
|
//#region src/delivery/tiler.tsx
|
|
676
675
|
var G = {
|
|
677
|
-
choiceLabel:
|
|
678
|
-
targetLabel:
|
|
679
|
-
disabled:
|
|
680
|
-
tiles:
|
|
681
|
-
tileSize:
|
|
682
|
-
addGuide:
|
|
683
|
-
selectedChoice:
|
|
684
|
-
onChoiceClick:
|
|
685
|
-
onPlacementClick:
|
|
686
|
-
},
|
|
676
|
+
choiceLabel: L.default.string,
|
|
677
|
+
targetLabel: L.default.string,
|
|
678
|
+
disabled: L.default.bool,
|
|
679
|
+
tiles: L.default.array.isRequired,
|
|
680
|
+
tileSize: L.default.string,
|
|
681
|
+
addGuide: L.default.bool,
|
|
682
|
+
selectedChoice: L.default.object,
|
|
683
|
+
onChoiceClick: L.default.func,
|
|
684
|
+
onPlacementClick: L.default.func
|
|
685
|
+
}, K = {
|
|
687
686
|
tileSize: "1fr",
|
|
688
687
|
disabled: !1,
|
|
689
688
|
addGuide: !1
|
|
690
|
-
},
|
|
689
|
+
}, Pe = (e) => {
|
|
691
690
|
let t = (t, n) => (t.instanceId = e.instanceId, t.disabled = e.disabled, t.guideIndex = e.addGuide ? t.index + 1 : void 0, t.tileIndex = n, t.selectedChoice = e.selectedChoice, t.onChoiceClick = e.onChoiceClick, t.onPlacementClick = e.onPlacementClick, e.includeTargets || t.type === "choice" ? /* @__PURE__ */ j(W, {
|
|
692
691
|
...t,
|
|
693
692
|
key: n
|
|
@@ -697,66 +696,66 @@ var G = {
|
|
|
697
696
|
key: n
|
|
698
697
|
}));
|
|
699
698
|
return t.propTypes = { ...G }, t;
|
|
700
|
-
},
|
|
699
|
+
}, Fe = p("div")(({ theme: e, includeTargets: t }) => ({
|
|
701
700
|
display: "grid",
|
|
702
701
|
paddingBottom: e.spacing(2),
|
|
703
702
|
...t && { gridGap: "10px" }
|
|
704
|
-
})),
|
|
703
|
+
})), Ie = p("div")({ textAlign: "center" }), Le = p("div")({
|
|
705
704
|
textAlign: "center",
|
|
706
705
|
gridRow: "3/4"
|
|
707
|
-
}),
|
|
706
|
+
}), Re = p("div")(({ includeTargets: e }) => ({
|
|
708
707
|
gridAutoFlow: "column",
|
|
709
708
|
display: "grid",
|
|
710
709
|
...e && { gridGap: "10px" }
|
|
711
|
-
})),
|
|
710
|
+
})), ze = p("div")({
|
|
712
711
|
gridColumn: "1/2",
|
|
713
712
|
textAlign: "center"
|
|
714
|
-
}),
|
|
713
|
+
}), Be = p("div")({
|
|
715
714
|
gridColumn: "2/3",
|
|
716
715
|
textAlign: "center"
|
|
717
|
-
}),
|
|
716
|
+
}), Ve = class extends A.Component {
|
|
718
717
|
static propTypes = { ...G };
|
|
719
|
-
static defaultProps = { ...
|
|
718
|
+
static defaultProps = { ...K };
|
|
720
719
|
render() {
|
|
721
720
|
let { includeTargets: e, choiceLabelEnabled: t, choiceLabel: n, targetLabel: r, tiles: i, tileSize: a } = this.props, o = e ? `auto ${a} auto ${a}` : `auto ${a} auto`, s = e ? i.length / 2 : i.length, c = {
|
|
722
721
|
gridTemplateColumns: e ? `repeat(${s}, ${a})` : `auto repeat(${Math.floor(s / 2) - 1}, ${a} 10px) ${a} auto`,
|
|
723
722
|
gridTemplateRows: o
|
|
724
723
|
}, l = { gridColumn: `1/${s + 1}` };
|
|
725
|
-
return /* @__PURE__ */ F(
|
|
724
|
+
return /* @__PURE__ */ F(Fe, {
|
|
726
725
|
includeTargets: e,
|
|
727
726
|
style: c,
|
|
728
727
|
children: [
|
|
729
|
-
/* @__PURE__ */ P(
|
|
728
|
+
/* @__PURE__ */ P(Ie, {
|
|
730
729
|
style: l,
|
|
731
|
-
dangerouslySetInnerHTML: { __html:
|
|
730
|
+
dangerouslySetInnerHTML: { __html: E(t ? n : "") }
|
|
732
731
|
}),
|
|
733
|
-
e && /* @__PURE__ */ P(
|
|
732
|
+
e && /* @__PURE__ */ P(Le, {
|
|
734
733
|
style: l,
|
|
735
|
-
dangerouslySetInnerHTML: { __html:
|
|
734
|
+
dangerouslySetInnerHTML: { __html: E(r) }
|
|
736
735
|
}),
|
|
737
|
-
i.map(
|
|
736
|
+
i.map(Pe(this.props))
|
|
738
737
|
]
|
|
739
738
|
});
|
|
740
739
|
}
|
|
741
|
-
},
|
|
740
|
+
}, He = class extends A.Component {
|
|
742
741
|
static propTypes = { ...G };
|
|
743
|
-
static defaultProps = { ...
|
|
742
|
+
static defaultProps = { ...K };
|
|
744
743
|
render() {
|
|
745
744
|
let { includeTargets: e, choiceLabelEnabled: t, choiceLabel: n, targetLabel: r, tiles: i, tileSize: a } = this.props, o = e ? 2 : 1, s = e ? i.length / 2 : i.length;
|
|
746
|
-
return /* @__PURE__ */ F(
|
|
745
|
+
return /* @__PURE__ */ F(Re, {
|
|
747
746
|
includeTargets: e,
|
|
748
747
|
style: {
|
|
749
748
|
gridTemplateColumns: `repeat(${o}, ${a})`,
|
|
750
749
|
gridTemplateRows: e ? `auto repeat(${s}, ${a})` : `auto auto repeat(${Math.floor(s / 2) - 1}, ${a} 10px) ${a} auto`
|
|
751
750
|
},
|
|
752
751
|
children: [
|
|
753
|
-
/* @__PURE__ */ P(
|
|
754
|
-
e && /* @__PURE__ */ P(
|
|
755
|
-
i.map(
|
|
752
|
+
/* @__PURE__ */ P(ze, { dangerouslySetInnerHTML: { __html: E(t ? n : "") } }),
|
|
753
|
+
e && /* @__PURE__ */ P(Be, { dangerouslySetInnerHTML: { __html: E(r) } }),
|
|
754
|
+
i.map(Pe(this.props))
|
|
756
755
|
]
|
|
757
756
|
});
|
|
758
757
|
}
|
|
759
|
-
},
|
|
758
|
+
}, Ue = (0, I.default)("pie-elements:placement-ordering:ordering"), We = (e, t, n) => {
|
|
760
759
|
let r = e.find((e, n) => n === t), i = e.filter((e, n) => n !== t);
|
|
761
760
|
return [
|
|
762
761
|
...i.slice(0, n),
|
|
@@ -764,19 +763,19 @@ var G = {
|
|
|
764
763
|
...i.slice(n)
|
|
765
764
|
];
|
|
766
765
|
};
|
|
767
|
-
function
|
|
766
|
+
function Ge(e, n) {
|
|
768
767
|
let r = t(e.response);
|
|
769
768
|
if (r[n.index] === n.id) r[n.index] = void 0;
|
|
770
769
|
else throw Error(`Tried to remove from index: ${n.index}, but the id doesn't match: array: ${r}, target: ${n.id}`);
|
|
771
770
|
return r;
|
|
772
771
|
}
|
|
773
|
-
function
|
|
772
|
+
function Ke(e, n, r) {
|
|
774
773
|
let { response: i, opts: a } = e, o = t(i);
|
|
775
|
-
if (a.includeTargets) return n.type === "choice" && r.type === "target" ? (o[r.index] = n.id, o) : n.type === "target" && r.type === "choice" ? (o[n.index] = void 0, o) : n.type === "target" && r.type === "target" ? (o[r.index] = n.id, o[n.index] = void 0, o) : (
|
|
774
|
+
if (a.includeTargets) return n.type === "choice" && r.type === "target" ? (o[r.index] = n.id, o) : n.type === "target" && r.type === "choice" ? (o[n.index] = void 0, o) : n.type === "target" && r.type === "target" ? (o[r.index] = n.id, o[n.index] = void 0, o) : (Ue("do nothing to the response"), i);
|
|
776
775
|
let s = e.response.findIndex((e) => e !== void 0 && e === n.id), c = e.response.findIndex((e) => e !== void 0 && e === r.id);
|
|
777
|
-
return
|
|
776
|
+
return Ue("fromIndex: ", s, "toIndex:", c), We(e.response, s, c);
|
|
778
777
|
}
|
|
779
|
-
function
|
|
778
|
+
function q(e, t, n, r) {
|
|
780
779
|
if (r.includeTargets) {
|
|
781
780
|
let i = [];
|
|
782
781
|
for (let r = 0; r < t.length; r++) {
|
|
@@ -811,26 +810,26 @@ function K(e, t, n, r) {
|
|
|
811
810
|
return i === 0 && t.push(a), t.push(o, a), t;
|
|
812
811
|
}, []);
|
|
813
812
|
}
|
|
814
|
-
function
|
|
813
|
+
function qe(e, t, n, a) {
|
|
815
814
|
return a = i({ includeTargets: !0 }, a), n ||= [], t = !t || r(t) ? a.includeTargets ? Array(e.length) : o(e, (e) => e.id) : t, {
|
|
816
815
|
choices: e,
|
|
817
816
|
response: t,
|
|
818
817
|
opts: a,
|
|
819
818
|
outcomes: n,
|
|
820
|
-
tiles:
|
|
819
|
+
tiles: q(e, t, n, a)
|
|
821
820
|
};
|
|
822
821
|
}
|
|
823
|
-
function
|
|
822
|
+
function Je(e, t) {
|
|
824
823
|
switch (e.type) {
|
|
825
824
|
case "move": {
|
|
826
|
-
let { from: n, to: r } = e, i =
|
|
825
|
+
let { from: n, to: r } = e, i = Ke(t, n, r), a = q(t.choices, i, t.outcomes, t.opts);
|
|
827
826
|
return Object.assign({}, t, {
|
|
828
827
|
response: i,
|
|
829
828
|
tiles: a
|
|
830
829
|
});
|
|
831
830
|
}
|
|
832
831
|
case "remove": {
|
|
833
|
-
let { target: n } = e, r =
|
|
832
|
+
let { target: n } = e, r = Ge(t, n), i = q(t.choices, r, t.outcomes, t.opts);
|
|
834
833
|
return Object.assign({}, t, {
|
|
835
834
|
response: r,
|
|
836
835
|
tiles: i
|
|
@@ -841,14 +840,14 @@ function Xe(e, t) {
|
|
|
841
840
|
}
|
|
842
841
|
//#endregion
|
|
843
842
|
//#region src/delivery/utils.ts
|
|
844
|
-
var
|
|
843
|
+
var Ye = (e, t) => {
|
|
845
844
|
if (!Array.isArray(e) || !Array.isArray(t) || e.length !== t.length) return !1;
|
|
846
845
|
let n = (e) => e.map((e) => JSON.stringify(e)).sort(), r = n(e), i = n(t), a = r.every((e, t) => e === i[t]), o = e.every((e, n) => JSON.stringify(e) === JSON.stringify(t[n]));
|
|
847
846
|
return a && !o;
|
|
848
|
-
},
|
|
849
|
-
let { code: i } = e, a = i === "Tab", o = i ===
|
|
847
|
+
}, Xe = (e, { active: t, context: n, currentCoordinates: r }) => {
|
|
848
|
+
let { code: i } = e, a = i === "Tab", o = i === w.Down || i === w.Up || i === w.Left || i === w.Right;
|
|
850
849
|
if (!a && !o) return;
|
|
851
|
-
if (o) return
|
|
850
|
+
if (o) return b(e, {
|
|
852
851
|
context: n,
|
|
853
852
|
currentCoordinates: r
|
|
854
853
|
});
|
|
@@ -885,26 +884,26 @@ var Ze = (e, t) => {
|
|
|
885
884
|
if (_.length === 0 && !v) return r;
|
|
886
885
|
let y = e.shiftKey;
|
|
887
886
|
_.sort((e, t) => Math.abs(e.center.y - t.center.y) > 10 ? e.center.y - t.center.y : e.center.x - t.center.x), v && _.push(v);
|
|
888
|
-
let
|
|
887
|
+
let x = 0, S = Infinity;
|
|
889
888
|
for (let e = 0; e < _.length; e++) {
|
|
890
|
-
let t =
|
|
891
|
-
t <
|
|
889
|
+
let t = Ze(p, _[e].center);
|
|
890
|
+
t < S && (S = t, x = e);
|
|
892
891
|
}
|
|
893
|
-
return _[y ? (
|
|
894
|
-
},
|
|
892
|
+
return _[y ? (x - 1 + _.length) % _.length : (x + 1) % _.length].dropPosition;
|
|
893
|
+
}, Ze = (e, t) => Math.sqrt((e.x - t.x) ** 2 + (e.y - t.y) ** 2);
|
|
895
894
|
//#endregion
|
|
896
895
|
//#region src/delivery/placement-ordering.tsx
|
|
897
|
-
function
|
|
896
|
+
function J(e) {
|
|
898
897
|
return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
|
|
899
898
|
}
|
|
900
|
-
function
|
|
901
|
-
return !e ||
|
|
899
|
+
function Y(e, t) {
|
|
900
|
+
return !e || J(e) ? e : J(e.default) ? e.default : t && J(e[t]) ? e[t] : t && J(e[t]?.default) ? e[t].default : e;
|
|
902
901
|
}
|
|
903
|
-
var
|
|
902
|
+
var Qe = Y(k, "UiLayout") || Y(Q.UiLayout, "UiLayout"), X = Y(_, "PreviewPrompt") || Y(Q.PreviewPrompt, "PreviewPrompt"), $e = Y(g, "Feedback") || Y(Q.Feedback, "Feedback"), et = Y(x, "Collapsible") || Y(Q.Collapsible, "Collapsible"), tt = h, Z = tt.default, Q = Z && typeof Z == "object" ? Z : tt, nt = 250, rt = (e, t) => {
|
|
904
903
|
if (!e || !t) return !1;
|
|
905
904
|
let n = t.left + t.width / 2, r = t.top + t.height / 2;
|
|
906
905
|
return n >= e.left && n <= e.right && r >= e.top && r <= e.bottom;
|
|
907
|
-
},
|
|
906
|
+
}, it = (e, t, n) => {
|
|
908
907
|
let { initial: r, translated: i } = e || {};
|
|
909
908
|
if (!r || !t || typeof n?.clientX != "number") return i;
|
|
910
909
|
let a = t.x - n.clientX, o = t.y - n.clientY;
|
|
@@ -915,34 +914,34 @@ var et = J(p, "UiLayout") || J(Q.UiLayout, "UiLayout"), Y = J(h, "PreviewPrompt"
|
|
|
915
914
|
top: r.top + o,
|
|
916
915
|
bottom: r.bottom + o
|
|
917
916
|
};
|
|
918
|
-
},
|
|
919
|
-
keyboardCoordinateGetter:
|
|
917
|
+
}, at = (e) => e ? {
|
|
918
|
+
keyboardCoordinateGetter: Xe,
|
|
920
919
|
keyboardCodes: {
|
|
921
920
|
start: ["Space", "Enter"],
|
|
922
921
|
cancel: ["Escape"],
|
|
923
922
|
end: ["Space", "Enter"]
|
|
924
923
|
},
|
|
925
924
|
accessibility: { screenReaderInstructions: { draggable: "Press Space or Enter to pick up this answer choice. Once picked up, use Tab or Shift+Tab to cycle through response areas, or use arrow keys to move it freely. Press Space or Enter to drop, or Escape to cancel." } }
|
|
926
|
-
} : {}, { translator: $ } = s,
|
|
925
|
+
} : {}, { translator: $ } = s, ot = (0, I.default)("pie-elements:placement-ordering"), st = p("div")({
|
|
927
926
|
color: y.text(),
|
|
928
927
|
backgroundColor: y.background(),
|
|
929
928
|
display: "flex",
|
|
930
929
|
flexDirection: "column",
|
|
931
930
|
alignItems: "center",
|
|
932
931
|
boxSizing: "border-box"
|
|
933
|
-
}),
|
|
932
|
+
}), ct = p("div")({
|
|
934
933
|
alignSelf: "stretch",
|
|
935
934
|
maxWidth: "100%",
|
|
936
935
|
overflowX: "auto",
|
|
937
936
|
overflowY: "hidden"
|
|
938
|
-
}),
|
|
937
|
+
}), lt = p("div")({
|
|
939
938
|
display: "flex",
|
|
940
939
|
justifyContent: "center",
|
|
941
940
|
minWidth: "min-content"
|
|
942
|
-
}),
|
|
941
|
+
}), ut = p("div")(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), dt = p("div")(({ theme: e }) => ({ paddingBottom: e.spacing(2) })), ft = p(xe)(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), pt = p(et)(({ theme: e }) => ({
|
|
943
942
|
marginBottom: e.spacing(2),
|
|
944
943
|
alignSelf: "flex-start"
|
|
945
|
-
})),
|
|
944
|
+
})), mt = (e) => {
|
|
946
945
|
let { tiler: t, ordering: n, onDropChoice: r, onRemoveChoice: i, ...a } = e;
|
|
947
946
|
return /* @__PURE__ */ P(t, {
|
|
948
947
|
...a,
|
|
@@ -951,25 +950,25 @@ var et = J(p, "UiLayout") || J(Q.UiLayout, "UiLayout"), Y = J(h, "PreviewPrompt"
|
|
|
951
950
|
onRemoveChoice: (e) => i(e, n)
|
|
952
951
|
});
|
|
953
952
|
};
|
|
954
|
-
|
|
955
|
-
tiler:
|
|
956
|
-
ordering:
|
|
957
|
-
onDropChoice:
|
|
958
|
-
onRemoveChoice:
|
|
953
|
+
mt.propTypes = {
|
|
954
|
+
tiler: L.default.func,
|
|
955
|
+
ordering: L.default.any,
|
|
956
|
+
onDropChoice: L.default.func,
|
|
957
|
+
onRemoveChoice: L.default.func
|
|
959
958
|
};
|
|
960
|
-
var
|
|
959
|
+
var ht = class extends A.Component {
|
|
961
960
|
static propTypes = {
|
|
962
|
-
onSessionChange:
|
|
963
|
-
model:
|
|
964
|
-
session:
|
|
961
|
+
onSessionChange: L.default.func.isRequired,
|
|
962
|
+
model: L.default.object.isRequired,
|
|
963
|
+
session: L.default.oneOfType([L.default.array.isRequired, L.default.object.isRequired])
|
|
965
964
|
};
|
|
966
965
|
constructor(e) {
|
|
967
|
-
super(e), this.instanceId =
|
|
966
|
+
super(e), this.instanceId = d("placement-ordering");
|
|
968
967
|
let { value: t, needsReset: n } = this.validateSession(e);
|
|
969
968
|
this.state = {
|
|
970
969
|
showingCorrect: !1,
|
|
971
970
|
selectedChoice: null
|
|
972
|
-
}, this.lastDragEndAt = 0, this.dragCollision =
|
|
971
|
+
}, this.lastDragEndAt = 0, this.dragCollision = Oe();
|
|
973
972
|
let { model: r } = e || {}, { env: i } = r || {}, { mode: a } = i || {};
|
|
974
973
|
n && a === "gather" && this.props.onSessionChange({
|
|
975
974
|
...e.session,
|
|
@@ -978,7 +977,7 @@ var gt = class extends A.Component {
|
|
|
978
977
|
}
|
|
979
978
|
toggleCorrect = (e) => this.setState({ showingCorrect: e });
|
|
980
979
|
componentDidUpdate() {
|
|
981
|
-
|
|
980
|
+
f(N.findDOMNode(this));
|
|
982
981
|
}
|
|
983
982
|
validateSession = ({ model: e, session: t }, n = !1) => {
|
|
984
983
|
let { config: r, choices: i } = e || {}, { includeTargets: a } = r || {}, o = i.map((e) => e.id), { value: s } = t || {}, u;
|
|
@@ -999,7 +998,7 @@ var gt = class extends A.Component {
|
|
|
999
998
|
UNSAFE_componentWillReceiveProps(e) {
|
|
1000
999
|
let { model: t = {} } = e || {}, { model: n = {} } = this.props || {}, { correctResponse: r, config: i, choices: a = [], env: o } = t, { includeTargets: s } = i || {}, c = {}, l = n.language && n.language !== t.language, u = n.note && n.note === $.t("common:commonCorrectAnswerWithAlternates", { lng: n.language });
|
|
1001
1000
|
l && u && (n.note = $.t("common:commonCorrectAnswerWithAlternates", { lng: t.language })), r || (c.showingCorrect = !1);
|
|
1002
|
-
let d =
|
|
1001
|
+
let d = Ye(a, n.choices), { value: f, needsReset: p } = this.validateSession(e, d), m = {
|
|
1003
1002
|
...e.session,
|
|
1004
1003
|
value: f
|
|
1005
1004
|
}, h = n.config?.includeTargets !== s;
|
|
@@ -1010,8 +1009,8 @@ var gt = class extends A.Component {
|
|
|
1010
1009
|
}
|
|
1011
1010
|
onDropChoice = (e, t, n) => {
|
|
1012
1011
|
let { onSessionChange: r, session: i } = this.props, a = n.tiles.find((e) => e.id === t.id && e.type === t.type && e.index === t.index), o = e;
|
|
1013
|
-
|
|
1014
|
-
let s =
|
|
1012
|
+
ot("[onDropChoice] ", a, o);
|
|
1013
|
+
let s = Je({
|
|
1015
1014
|
type: "move",
|
|
1016
1015
|
from: a,
|
|
1017
1016
|
to: o
|
|
@@ -1020,8 +1019,8 @@ var gt = class extends A.Component {
|
|
|
1020
1019
|
};
|
|
1021
1020
|
onRemoveChoice = (e, t) => {
|
|
1022
1021
|
let { onSessionChange: n, session: r } = this.props;
|
|
1023
|
-
|
|
1024
|
-
let i =
|
|
1022
|
+
ot("[onRemoveChoice]", e);
|
|
1023
|
+
let i = Je({
|
|
1025
1024
|
type: "remove",
|
|
1026
1025
|
target: e
|
|
1027
1026
|
}, t);
|
|
@@ -1032,13 +1031,13 @@ var gt = class extends A.Component {
|
|
|
1032
1031
|
orientation: "vertical",
|
|
1033
1032
|
includeTargets: !0
|
|
1034
1033
|
};
|
|
1035
|
-
return n ?
|
|
1034
|
+
return n ? qe(e.choices, e.correctResponse, e.correctResponse.map((e) => ({
|
|
1036
1035
|
id: e,
|
|
1037
1036
|
outcome: "correct"
|
|
1038
1037
|
})), {
|
|
1039
1038
|
includeTargets: r,
|
|
1040
1039
|
allowSameChoiceInTargets: e.config.allowSameChoiceInTargets
|
|
1041
|
-
}) :
|
|
1040
|
+
}) : qe(e.choices, t.value, e.outcomes, {
|
|
1042
1041
|
includeTargets: r,
|
|
1043
1042
|
allowSameChoiceInTargets: e.config.allowSameChoiceInTargets
|
|
1044
1043
|
});
|
|
@@ -1053,7 +1052,7 @@ var gt = class extends A.Component {
|
|
|
1053
1052
|
}
|
|
1054
1053
|
e && r && (this.onDropChoice(r, e, i), this.focusTile(this.getDestinationSlotId(r)));
|
|
1055
1054
|
} else if (!t && n) {
|
|
1056
|
-
let e = n.data.current, t = n.rect?.current, a =
|
|
1055
|
+
let e = n.data.current, t = n.rect?.current, a = it(t, this.dragCollision.lastPointer(), r), o = rt(t?.initial, a);
|
|
1057
1056
|
e && e.type === "target" && !o && (this.onRemoveChoice(e, i), this.focusTile(this.getDestinationSlotId({
|
|
1058
1057
|
type: "choice",
|
|
1059
1058
|
id: e.id
|
|
@@ -1100,7 +1099,7 @@ var gt = class extends A.Component {
|
|
|
1100
1099
|
});
|
|
1101
1100
|
});
|
|
1102
1101
|
};
|
|
1103
|
-
isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt <
|
|
1102
|
+
isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < nt;
|
|
1104
1103
|
onChoiceClick = (e) => {
|
|
1105
1104
|
this.isClickSoonAfterDragEnd() || this.toggleChoiceSelection(e);
|
|
1106
1105
|
};
|
|
@@ -1111,7 +1110,7 @@ var gt = class extends A.Component {
|
|
|
1111
1110
|
let { model: e } = this.props, { correctResponse: t, correctness: n, extraCSSRules: r, prompt: i, rationale: a, feedback: o, config: s, note: c, showNote: l, env: u, disabled: d, teacherInstructions: f, language: p } = e, m = t && t.length > 0, { showingCorrect: h } = this.state, g = s || {
|
|
1112
1111
|
orientation: "vertical",
|
|
1113
1112
|
includeTargets: !0
|
|
1114
|
-
}, { orientation: _, includeTargets: v } = g,
|
|
1113
|
+
}, { orientation: _, includeTargets: v } = g, b = _ === "vertical", x = this.createOrdering(), { mode: C, role: w } = u || {}, ee = b ? He : Ve, D = (h || C === "view" && w === "instructor") && l && c, te = a && (S(a) || T(a)), k = f && (S(f) || T(f)), A = {
|
|
1115
1114
|
color: y.text(),
|
|
1116
1115
|
backgroundColor: y.background(),
|
|
1117
1116
|
display: "flex",
|
|
@@ -1119,7 +1118,7 @@ var gt = class extends A.Component {
|
|
|
1119
1118
|
alignItems: "center",
|
|
1120
1119
|
boxSizing: "border-box",
|
|
1121
1120
|
width: "100%"
|
|
1122
|
-
},
|
|
1121
|
+
}, j = v ? {
|
|
1123
1122
|
selectedChoice: this.state.selectedChoice,
|
|
1124
1123
|
onChoiceClick: this.onChoiceClick,
|
|
1125
1124
|
onPlacementClick: this.onPlacementClick
|
|
@@ -1130,49 +1129,49 @@ var gt = class extends A.Component {
|
|
|
1130
1129
|
onDragCancel: this.onDragCancel,
|
|
1131
1130
|
collisionDetection: this.dragCollision.collisionDetection,
|
|
1132
1131
|
modifiers: [ae],
|
|
1133
|
-
...
|
|
1134
|
-
children: /* @__PURE__ */ P(
|
|
1132
|
+
...at(v),
|
|
1133
|
+
children: /* @__PURE__ */ P(st, { children: /* @__PURE__ */ F(Qe, {
|
|
1135
1134
|
extraCSSRules: r,
|
|
1136
|
-
style:
|
|
1135
|
+
style: A,
|
|
1137
1136
|
children: [
|
|
1138
|
-
|
|
1137
|
+
k && /* @__PURE__ */ P(pt, {
|
|
1139
1138
|
labels: {
|
|
1140
1139
|
hidden: $.t("common:showTeacherInstructions", { lng: p }),
|
|
1141
1140
|
visible: $.t("common:hideTeacherInstructions", { lng: p })
|
|
1142
1141
|
},
|
|
1143
1142
|
className: "collapsible",
|
|
1144
|
-
children: /* @__PURE__ */ P(
|
|
1143
|
+
children: /* @__PURE__ */ P(X, { prompt: f })
|
|
1145
1144
|
}),
|
|
1146
|
-
/* @__PURE__ */ P(
|
|
1147
|
-
/* @__PURE__ */ P(
|
|
1145
|
+
/* @__PURE__ */ P(ut, { children: /* @__PURE__ */ P(X, { prompt: i }) }),
|
|
1146
|
+
/* @__PURE__ */ P(ft, {
|
|
1148
1147
|
show: m,
|
|
1149
1148
|
toggled: h,
|
|
1150
1149
|
onToggle: this.toggleCorrect,
|
|
1151
1150
|
language: p
|
|
1152
1151
|
}),
|
|
1153
|
-
/* @__PURE__ */ P(
|
|
1152
|
+
/* @__PURE__ */ P(ct, { children: /* @__PURE__ */ P(lt, { children: /* @__PURE__ */ P(mt, {
|
|
1154
1153
|
instanceId: this.instanceId,
|
|
1155
1154
|
choiceLabel: g.choiceLabel,
|
|
1156
1155
|
targetLabel: g.targetLabel,
|
|
1157
|
-
ordering:
|
|
1158
|
-
tiler:
|
|
1156
|
+
ordering: x,
|
|
1157
|
+
tiler: ee,
|
|
1159
1158
|
disabled: d,
|
|
1160
1159
|
addGuide: g.showOrdering,
|
|
1161
1160
|
tileSize: g.tileSize,
|
|
1162
1161
|
includeTargets: v,
|
|
1163
1162
|
choiceLabelEnabled: e.config && e.config.choiceLabelEnabled,
|
|
1164
|
-
...
|
|
1163
|
+
...j
|
|
1165
1164
|
}) }) }),
|
|
1166
|
-
|
|
1167
|
-
|
|
1165
|
+
D && /* @__PURE__ */ P(dt, { dangerouslySetInnerHTML: { __html: E(c) } }),
|
|
1166
|
+
te && /* @__PURE__ */ P(pt, {
|
|
1168
1167
|
labels: {
|
|
1169
1168
|
hidden: $.t("common:showRationale", { lng: p }),
|
|
1170
1169
|
visible: $.t("common:hideRationale", { lng: p })
|
|
1171
1170
|
},
|
|
1172
1171
|
className: "collapsible",
|
|
1173
|
-
children: /* @__PURE__ */ P(
|
|
1172
|
+
children: /* @__PURE__ */ P(X, { prompt: a })
|
|
1174
1173
|
}),
|
|
1175
|
-
!h && /* @__PURE__ */ P(
|
|
1174
|
+
!h && /* @__PURE__ */ P($e, {
|
|
1176
1175
|
correctness: n,
|
|
1177
1176
|
feedback: o
|
|
1178
1177
|
})
|
|
@@ -1180,30 +1179,30 @@ var gt = class extends A.Component {
|
|
|
1180
1179
|
}) })
|
|
1181
1180
|
});
|
|
1182
1181
|
}
|
|
1183
|
-
},
|
|
1182
|
+
}, gt = class extends A.Component {
|
|
1184
1183
|
static propTypes = {
|
|
1185
|
-
model:
|
|
1186
|
-
session:
|
|
1187
|
-
onSessionChange:
|
|
1184
|
+
model: L.default.object.isRequired,
|
|
1185
|
+
session: L.default.oneOfType([L.default.array.isRequired, L.default.object.isRequired]),
|
|
1186
|
+
onSessionChange: L.default.func.isRequired
|
|
1188
1187
|
};
|
|
1189
1188
|
render() {
|
|
1190
1189
|
let { model: e, session: t, onSessionChange: n } = this.props;
|
|
1191
|
-
return /* @__PURE__ */ P(
|
|
1190
|
+
return /* @__PURE__ */ P(ht, {
|
|
1192
1191
|
model: e,
|
|
1193
1192
|
session: t,
|
|
1194
1193
|
onSessionChange: n
|
|
1195
1194
|
});
|
|
1196
1195
|
}
|
|
1197
|
-
},
|
|
1196
|
+
}, _t = (0, I.default)("pie-elements:placement-ordering"), vt = ({ model: e, session: t }) => {
|
|
1198
1197
|
let { config: r } = e, i = (t && n(t.value) || []).length === e.choices.length;
|
|
1199
1198
|
return r.includeTargets || i;
|
|
1200
|
-
},
|
|
1199
|
+
}, yt = class extends HTMLElement {
|
|
1201
1200
|
constructor() {
|
|
1202
1201
|
super(), this._root = null, this._mathObserver = null, this._mathRenderPending = !1;
|
|
1203
1202
|
}
|
|
1204
1203
|
_scheduleMathRender = () => {
|
|
1205
1204
|
this._mathRenderPending || (this._mathRenderPending = !0, requestAnimationFrame(() => {
|
|
1206
|
-
this._mathObserver && this._mathObserver.disconnect(),
|
|
1205
|
+
this._mathObserver && this._mathObserver.disconnect(), f(this), this._mathRenderPending = !1, setTimeout(() => {
|
|
1207
1206
|
this._mathObserver && this._mathObserver.observe(this, {
|
|
1208
1207
|
childList: !0,
|
|
1209
1208
|
subtree: !0
|
|
@@ -1222,7 +1221,7 @@ var gt = class extends A.Component {
|
|
|
1222
1221
|
}
|
|
1223
1222
|
isComplete = (e) => e && n(e).length === this._model.completeLength;
|
|
1224
1223
|
sessionChange = (e) => {
|
|
1225
|
-
this._session.value = e.value, this.render(), this.dispatchEvent(new
|
|
1224
|
+
this._session.value = e.value, this.render(), this.dispatchEvent(new re(this.tagName.toLowerCase(), this._session && this.isComplete(this._session.value)));
|
|
1226
1225
|
};
|
|
1227
1226
|
set model(e) {
|
|
1228
1227
|
this._model = e, this.render(), this.dispatchEvent(new CustomEvent("model-set", {
|
|
@@ -1238,13 +1237,13 @@ var gt = class extends A.Component {
|
|
|
1238
1237
|
}
|
|
1239
1238
|
render() {
|
|
1240
1239
|
if (this._model && this._session) {
|
|
1241
|
-
|
|
1242
|
-
let e = A.createElement(
|
|
1240
|
+
_t("[render] session: ", this._session.value), _t("[render] model: ", this._model), this._initMathObserver();
|
|
1241
|
+
let e = A.createElement(gt, {
|
|
1243
1242
|
model: this._model,
|
|
1244
1243
|
session: this._session,
|
|
1245
1244
|
onSessionChange: this.sessionChange
|
|
1246
1245
|
});
|
|
1247
|
-
this._root ||=
|
|
1246
|
+
this._root ||= ne(this), this._root.render(e);
|
|
1248
1247
|
}
|
|
1249
1248
|
}
|
|
1250
1249
|
connectedCallback() {
|
|
@@ -1255,6 +1254,6 @@ var gt = class extends A.Component {
|
|
|
1255
1254
|
}
|
|
1256
1255
|
};
|
|
1257
1256
|
//#endregion
|
|
1258
|
-
export {
|
|
1257
|
+
export { yt as default, vt as isValidSession };
|
|
1259
1258
|
|
|
1260
1259
|
//# sourceMappingURL=index.js.map
|