@pie-element/simple-cloze 0.1.4-next.4 → 0.1.4-next.5
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/delivery/index.js +42 -27
- package/dist/browser/delivery/index.js.map +1 -1
- package/dist/delivery/index.d.ts +6 -0
- package/dist/delivery/index.js +28 -2
- package/dist/delivery/index.js.map +1 -1
- package/dist/index.iife.js +2 -2
- package/dist/index.js +28 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -13
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { C as e, E as t, F as n, I as r, M as i, O as a, P as o, R as s, S as c, T as l, _ as u, b as d, c as f, d as p, f as m, g as
|
|
1
|
+
import { C as e, E as t, F as n, I as r, M as i, O as a, P as o, R as s, S as c, T as l, _ as u, b as d, c as f, d as p, f as m, g as ee, h, i as g, j as _, k as v, o as y, r as b, t as x, u as S, w as C, x as w, y as T } from "../client-Dt8SOe5Z.js";
|
|
2
2
|
//#region ../../lib-svelte/delivery-events/dist/index2.js
|
|
3
3
|
var E = class e extends CustomEvent {
|
|
4
4
|
static {
|
|
@@ -45,25 +45,39 @@ function k(e, t = {}) {
|
|
|
45
45
|
}
|
|
46
46
|
return null;
|
|
47
47
|
}
|
|
48
|
-
function A(
|
|
48
|
+
function A(e) {
|
|
49
|
+
return !!e && typeof e == "object" && !Array.isArray(e);
|
|
50
|
+
}
|
|
51
|
+
function j(e, t) {
|
|
52
|
+
if (e === t) return e;
|
|
53
|
+
if (!A(e) || !A(t) || Object.isFrozen(e) || !Object.isExtensible(e)) return t;
|
|
54
|
+
try {
|
|
55
|
+
for (let n of Object.keys(e)) n in t || delete e[n];
|
|
56
|
+
Object.assign(e, t);
|
|
57
|
+
} catch {
|
|
58
|
+
return t;
|
|
59
|
+
}
|
|
60
|
+
return e;
|
|
61
|
+
}
|
|
62
|
+
function M({ sourceEl: e, fallbackSelector: t, component: n, complete: r, session: i }) {
|
|
49
63
|
let a = k(e, { fallbackSelector: t });
|
|
50
64
|
return a ? typeof a.onSessionChange == "function" ? (a.onSessionChange(i), a) : (a.dispatchEvent(new D(n, r)), a) : null;
|
|
51
65
|
}
|
|
52
66
|
//#endregion
|
|
53
67
|
//#region src/delivery/SimpleCloze.svelte
|
|
54
|
-
var
|
|
68
|
+
var N = /* @__PURE__ */ new Set([
|
|
55
69
|
"$$slots",
|
|
56
70
|
"$$events",
|
|
57
71
|
"$$legacy",
|
|
58
72
|
"$$host"
|
|
59
|
-
]),
|
|
73
|
+
]), P = T("<div class=\"mb-4 prose\"></div>"), F = d("<svg style=\"width: 25px; height: 25px;\" preserveAspectRatio=\"xMinYMin meet\" version=\"1.1\" viewBox=\"-283 359 34 35\"><circle cx=\"-266\" cy=\"375.9\" r=\"14\" fill=\"#bce2ff\"></circle><path d=\"M-280.5,375.9c0-8,6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5s-6.5,14.5-14.5,14.5S-280.5,383.9-280.5,375.9z M-279.5,375.9c0,7.4,6.1,13.5,13.5,13.5c7.4,0,13.5-6.1,13.5-13.5s-6.1-13.5-13.5-13.5C-273.4,362.4-279.5,368.5-279.5,375.9z\" fill=\"#bce2ff\"></path><polygon points=\"-265.4,383.1 -258.6,377.2 -261.2,374.2 -264.3,376.9 -268.9,368.7 -272.4,370.6\" fill=\"#1a9cff\"></polygon></svg>"), I = d("<svg style=\"width: 25px; height: 25px;\" preserveAspectRatio=\"xMinYMin meet\" version=\"1.1\" viewBox=\"-129.5 127 34 35\"><path style=\"fill: #D0CAC5; stroke: #E6E3E0; stroke-width: 0.75; stroke-miterlimit: 10;\" d=\"M-112.9,160.4c-8.5,0-15.5-6.9-15.5-15.5c0-8.5,6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5 C-97.4,153.5-104.3,160.4-112.9,160.4z\"></path><path style=\"fill: #B3ABA4; stroke: #CDC7C2; stroke-width: 0.5; stroke-miterlimit: 10;\" d=\"M-113.2,159c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-105.2,159-113.2,159z\"></path><circle cx=\"-114.2\" cy=\"143.5\" r=\"14\" fill=\"white\"></circle><path d=\"M-114.2,158c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-106.2,158-114.2,158z M-114.2,130c-7.4,0-13.5,6.1-13.5,13.5s6.1,13.5,13.5,13.5s13.5-6.1,13.5-13.5S-106.8,130-114.2,130z\" fill=\"#bce2ff\"></path><polygon points=\"-114.8,150.7 -121.6,144.8 -119,141.8 -115.9,144.5 -111.3,136.3 -107.8,138.2\" fill=\"#1a9cff\"></polygon></svg>"), L = T("<button type=\"button\" class=\"mb-3 flex items-center gap-2 cursor-pointer select-none\"><!> <span class=\"text-sm hover:underline\"> </span></button>"), R = T("<span class=\"correctness-icon svelte-1glps5n\" style=\"background-color: #0EA449;\"><svg style=\"width: 12px; height: 12px; color: white;\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z\"></path></svg></span>"), z = T("<span class=\"correctness-icon svelte-1glps5n\" style=\"background-color: #BF0D00;\"><svg style=\"width: 12px; height: 12px; color: white;\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"></path></svg></span>"), B = T("<div class=\"p-4\"><!> <!> <div class=\"relative inline-block\"><!> <!> <input type=\"text\" placeholder=\"Enter your answer...\" class=\"outline-none px-3 py-2 rounded svelte-1glps5n\"/></div></div>"), V = {
|
|
60
74
|
hash: "svelte-1glps5n",
|
|
61
75
|
code: "\n /* Custom styles for correct answer display */input[readonly].svelte-1glps5n {font-weight:600;}.correctness-icon.svelte-1glps5n {position:absolute;top:-8px;left:-8px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:2px;}"
|
|
62
76
|
};
|
|
63
|
-
function
|
|
64
|
-
r(x, !0), S(d,
|
|
77
|
+
function H(d, x) {
|
|
78
|
+
r(x, !0), S(d, V), b(x, N);
|
|
65
79
|
let w = null, T = i(!1);
|
|
66
|
-
|
|
80
|
+
h(() => (w && (w.value = x?.session?.response || "", w.addEventListener("input", E)), () => {
|
|
67
81
|
w && w.removeEventListener("input", E);
|
|
68
82
|
})), l(() => {
|
|
69
83
|
if (w && !e(T)) {
|
|
@@ -75,7 +89,7 @@ function B(d, x) {
|
|
|
75
89
|
});
|
|
76
90
|
function E(e) {
|
|
77
91
|
let t = e.target, n = t.value;
|
|
78
|
-
|
|
92
|
+
M({
|
|
79
93
|
sourceEl: t,
|
|
80
94
|
fallbackSelector: "simple-cloze",
|
|
81
95
|
component: "simple-cloze",
|
|
@@ -89,60 +103,61 @@ function B(d, x) {
|
|
|
89
103
|
function D() {
|
|
90
104
|
_(T, !e(T));
|
|
91
105
|
}
|
|
92
|
-
let O = o(() => x?.model?.env?.mode === "evaluate"), k = o(() => x?.model?.correctness),
|
|
93
|
-
var H =
|
|
94
|
-
var t =
|
|
106
|
+
let O = o(() => x?.model?.env?.mode === "evaluate"), k = o(() => x?.model?.correctness), A = o(() => e(k) === "correct"), j = o(() => e(k) === "incorrect");
|
|
107
|
+
var H = B(), U = t(H), W = (e) => {
|
|
108
|
+
var t = P();
|
|
95
109
|
p(t, () => x.model.prompt, !0), s(t), u(e, t);
|
|
96
110
|
};
|
|
97
111
|
m(U, (e) => {
|
|
98
112
|
x?.model?.prompt && e(W);
|
|
99
113
|
});
|
|
100
114
|
var G = v(U, 2), K = (n) => {
|
|
101
|
-
var r =
|
|
102
|
-
u(e,
|
|
115
|
+
var r = L(), i = t(r), o = (e) => {
|
|
116
|
+
u(e, F());
|
|
103
117
|
}, l = (e) => {
|
|
104
|
-
u(e,
|
|
118
|
+
u(e, I());
|
|
105
119
|
};
|
|
106
120
|
m(i, (t) => {
|
|
107
121
|
e(T) ? t(o) : t(l, -1);
|
|
108
122
|
});
|
|
109
123
|
var d = a(v(i, 2));
|
|
110
124
|
s(r), C(() => {
|
|
111
|
-
y(r, "aria-pressed", e(T)),
|
|
125
|
+
y(r, "aria-pressed", e(T)), ee(d, `${e(T) ? "Hide" : "Show"} correct answer`);
|
|
112
126
|
}), c("click", r, D), u(n, r);
|
|
113
127
|
};
|
|
114
128
|
m(G, (t) => {
|
|
115
|
-
e(O) && e(
|
|
129
|
+
e(O) && e(j) && t(K);
|
|
116
130
|
});
|
|
117
131
|
var q = v(G, 2), J = t(q), Y = (e) => {
|
|
118
|
-
u(e,
|
|
132
|
+
u(e, R());
|
|
119
133
|
};
|
|
120
134
|
m(J, (t) => {
|
|
121
|
-
e(O) && (e(
|
|
135
|
+
e(O) && (e(A) || e(T)) && t(Y);
|
|
122
136
|
});
|
|
123
137
|
var X = v(J, 2), Z = (e) => {
|
|
124
|
-
u(e,
|
|
138
|
+
u(e, z());
|
|
125
139
|
};
|
|
126
140
|
m(X, (t) => {
|
|
127
|
-
e(O) && e(
|
|
141
|
+
e(O) && e(j) && !e(T) && t(Z);
|
|
128
142
|
});
|
|
129
143
|
var Q = v(X, 2);
|
|
130
144
|
let $;
|
|
131
145
|
g(Q, (e) => w = e, () => w), s(q), s(H), C(() => {
|
|
132
146
|
Q.disabled = x?.model?.disabled, Q.readOnly = e(T), $ = f(Q, "", $, {
|
|
133
|
-
border: e(O) && (e(
|
|
134
|
-
color: e(O) && (e(
|
|
147
|
+
border: e(O) && (e(A) || e(T)) ? "solid 2px #0EA449" : e(O) && e(j) && !e(T) ? "solid 2px #BF0D00" : "solid 1px #d1d5db",
|
|
148
|
+
color: e(O) && (e(A) || e(j)) ? "black" : ""
|
|
135
149
|
});
|
|
136
150
|
}), u(d, H), n();
|
|
137
151
|
}
|
|
138
|
-
w(["click"]), x(
|
|
152
|
+
w(["click"]), x(H, {
|
|
139
153
|
model: { type: "Object" },
|
|
140
154
|
session: { type: "Object" }
|
|
141
155
|
}, [], []);
|
|
142
156
|
//#endregion
|
|
143
157
|
//#region src/delivery/index.ts
|
|
144
|
-
var
|
|
158
|
+
var U = H.element, W = class extends U {
|
|
145
159
|
_internalSession = null;
|
|
160
|
+
_playerSession = null;
|
|
146
161
|
_model = null;
|
|
147
162
|
_isComplete = () => {
|
|
148
163
|
let e = this._internalSession?.response;
|
|
@@ -161,19 +176,19 @@ var V = B.element, H = class extends V {
|
|
|
161
176
|
return this._model;
|
|
162
177
|
}
|
|
163
178
|
set session(e) {
|
|
164
|
-
this._internalSession = e, super.session = e, this._dispatchSessionChanged();
|
|
179
|
+
this._playerSession = e, this._internalSession = e, super.session = e, this._dispatchSessionChanged();
|
|
165
180
|
}
|
|
166
181
|
get session() {
|
|
167
182
|
return this._internalSession;
|
|
168
183
|
}
|
|
169
184
|
onSessionChange = (e) => {
|
|
170
|
-
this._internalSession = e, super.session = e, this._dispatchSessionChanged();
|
|
185
|
+
j(this._playerSession, e), this._internalSession = e, super.session = e, this._dispatchSessionChanged();
|
|
171
186
|
};
|
|
172
187
|
connectedCallback() {
|
|
173
188
|
super.connectedCallback(), this.onSessionChange = this.onSessionChange;
|
|
174
189
|
}
|
|
175
190
|
};
|
|
176
191
|
//#endregion
|
|
177
|
-
export {
|
|
192
|
+
export { W as default };
|
|
178
193
|
|
|
179
194
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["t","e"],"sources":["../../../../../lib-svelte/delivery-events/dist/index2.js","../../../../../lib-svelte/delivery-events/dist/index3.js","../../../src/delivery/SimpleCloze.svelte","../../../src/delivery/index.ts"],"sourcesContent":["//#region ../../shared/player-events/dist/index.js\nvar e = class e extends CustomEvent {\n\tstatic {\n\t\tthis.TYPE = \"model-set\";\n\t}\n\tconstructor(t, n, r) {\n\t\tsuper(e.TYPE, {\n\t\t\tbubbles: !0,\n\t\t\tcomposed: !0,\n\t\t\tdetail: {\n\t\t\t\tcomplete: n,\n\t\t\t\tcomponent: t,\n\t\t\t\thasModel: r\n\t\t\t}\n\t\t}), this.component = t, this.complete = n;\n\t}\n}, t = class e extends CustomEvent {\n\tstatic {\n\t\tthis.TYPE = \"session-changed\";\n\t}\n\tconstructor(t, n) {\n\t\tsuper(e.TYPE, {\n\t\t\tbubbles: !0,\n\t\t\tcomposed: !0,\n\t\t\tdetail: {\n\t\t\t\tcomplete: n,\n\t\t\t\tcomponent: t\n\t\t\t}\n\t\t}), this.component = t, this.complete = n;\n\t}\n};\n//#endregion\nexport { e as ModelSetEvent, t as SessionChangedEvent };\n","import { SessionChangedEvent as e } from \"./index2.js\";\n//#region src/session-bridge.ts\nvar t = (e) => {\n\tlet t = e;\n\treturn t ? typeof t.onSessionChange == \"function\" || typeof t.onAudioStarted == \"function\" || typeof t.onAudioEnded == \"function\" : !1;\n};\nfunction n(e, n = {}) {\n\tlet r = n.hostPredicate ?? t, i = e;\n\tfor (; i;) {\n\t\tif (r(i)) return i;\n\t\ti = i.parentElement;\n\t}\n\tif (typeof document < \"u\" && n.fallbackSelector) {\n\t\tlet e = document.querySelector(n.fallbackSelector);\n\t\tif (r(e)) return e;\n\t}\n\treturn null;\n}\nfunction r({ sourceEl: t, fallbackSelector: r, component: i, complete: a, session: o }) {\n\tlet s = n(t, { fallbackSelector: r });\n\treturn s ? typeof s.onSessionChange == \"function\" ? (s.onSessionChange(o), s) : (s.dispatchEvent(new e(i, a)), s) : null;\n}\n//#endregion\nexport { r as forwardSessionChange, n as resolveDeliveryHost };\n","<svelte:options\n customElement={{\n shadow: 'none',\n props: {\n model: { type: 'Object' },\n session: { type: 'Object' }\n }\n }}\n/>\n\n<script lang=\"ts\">\nimport { onMount } from 'svelte';\nimport { forwardSessionChange } from '@pie-lib/delivery-events-svelte';\n\n// Props using $props() in Svelte 5 custom element mode\nlet props = $props<{ model?: any; session?: any }>();\n\nlet inputElement: HTMLInputElement | null = null;\nlet showCorrectAnswer = $state(false);\n\nonMount(() => {\n if (inputElement) {\n // Set initial value from session\n inputElement.value = props?.session?.response || '';\n\n inputElement.addEventListener('input', handleInput);\n }\n\n return () => {\n if (inputElement) {\n inputElement.removeEventListener('input', handleInput);\n }\n };\n});\n\n// Update input value when session changes externally\n$effect(() => {\n if (inputElement && !showCorrectAnswer) {\n const sessionValue = props?.session?.response || '';\n if (inputElement.value !== sessionValue) {\n inputElement.value = sessionValue;\n }\n }\n});\n\n// Update input value when showing correct answer\n$effect(() => {\n if (inputElement) {\n if (showCorrectAnswer && props?.model?.correctAnswer) {\n inputElement.value = props.model.correctAnswer;\n } else if (!showCorrectAnswer) {\n inputElement.value = props?.session?.response || '';\n }\n }\n});\n\nfunction handleInput(event: Event) {\n const target = event.target as HTMLInputElement;\n const newValue = target.value;\n\n // Replace the session object so host players can detect updates reliably.\n const updatedSession = {\n ...props.session,\n response: newValue,\n };\n\n forwardSessionChange({\n sourceEl: target,\n fallbackSelector: 'simple-cloze',\n component: 'simple-cloze',\n session: updatedSession,\n complete: newValue.trim().length > 0,\n });\n}\n\nfunction toggleCorrectAnswer() {\n showCorrectAnswer = !showCorrectAnswer;\n}\n\n// Computed values\nconst isEvaluateMode = $derived(props?.model?.env?.mode === 'evaluate');\nconst correctness = $derived(props?.model?.correctness);\nconst isCorrect = $derived(correctness === 'correct');\nconst isIncorrect = $derived(correctness === 'incorrect');\n</script>\n\n<div class=\"p-4\">\n {#if props?.model?.prompt}\n <div class=\"mb-4 prose\">{@html props.model.prompt}</div>\n {/if}\n\n {#if isEvaluateMode && isIncorrect}\n <button\n type=\"button\"\n class=\"mb-3 flex items-center gap-2 cursor-pointer select-none\"\n onclick={toggleCorrectAnswer}\n aria-pressed={showCorrectAnswer}\n >\n {#if showCorrectAnswer}\n <!-- Hide correct answer icon (open state) -->\n <svg style=\"width: 25px; height: 25px;\" preserveAspectRatio=\"xMinYMin meet\" version=\"1.1\" viewBox=\"-283 359 34 35\">\n <circle cx=\"-266\" cy=\"375.9\" r=\"14\" fill=\"#bce2ff\" />\n <path d=\"M-280.5,375.9c0-8,6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5s-6.5,14.5-14.5,14.5S-280.5,383.9-280.5,375.9z M-279.5,375.9c0,7.4,6.1,13.5,13.5,13.5c7.4,0,13.5-6.1,13.5-13.5s-6.1-13.5-13.5-13.5C-273.4,362.4-279.5,368.5-279.5,375.9z\" fill=\"#bce2ff\" />\n <polygon points=\"-265.4,383.1 -258.6,377.2 -261.2,374.2 -264.3,376.9 -268.9,368.7 -272.4,370.6\" fill=\"#1a9cff\" />\n </svg>\n {:else}\n <!-- Show correct answer icon (closed state) -->\n <svg style=\"width: 25px; height: 25px;\" preserveAspectRatio=\"xMinYMin meet\" version=\"1.1\" viewBox=\"-129.5 127 34 35\">\n <path style=\"fill: #D0CAC5; stroke: #E6E3E0; stroke-width: 0.75; stroke-miterlimit: 10;\" d=\"M-112.9,160.4c-8.5,0-15.5-6.9-15.5-15.5c0-8.5,6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5 C-97.4,153.5-104.3,160.4-112.9,160.4z\" />\n <path style=\"fill: #B3ABA4; stroke: #CDC7C2; stroke-width: 0.5; stroke-miterlimit: 10;\" d=\"M-113.2,159c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-105.2,159-113.2,159z\" />\n <circle cx=\"-114.2\" cy=\"143.5\" r=\"14\" fill=\"white\" />\n <path d=\"M-114.2,158c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-106.2,158-114.2,158z M-114.2,130c-7.4,0-13.5,6.1-13.5,13.5s6.1,13.5,13.5,13.5s13.5-6.1,13.5-13.5S-106.8,130-114.2,130z\" fill=\"#bce2ff\" />\n <polygon points=\"-114.8,150.7 -121.6,144.8 -119,141.8 -115.9,144.5 -111.3,136.3 -107.8,138.2\" fill=\"#1a9cff\" />\n </svg>\n {/if}\n <span class=\"text-sm hover:underline\">\n {showCorrectAnswer ? 'Hide' : 'Show'} correct answer\n </span>\n </button>\n {/if}\n\n <div class=\"relative inline-block\">\n {#if isEvaluateMode && (isCorrect || showCorrectAnswer)}\n <span class=\"correctness-icon\" style=\"background-color: #0EA449;\">\n <svg style=\"width: 12px; height: 12px; color: white;\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z\"/>\n </svg>\n </span>\n {/if}\n {#if isEvaluateMode && isIncorrect && !showCorrectAnswer}\n <span class=\"correctness-icon\" style=\"background-color: #BF0D00;\">\n <svg style=\"width: 12px; height: 12px; color: white;\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"/>\n </svg>\n </span>\n {/if}\n <input\n bind:this={inputElement}\n type=\"text\"\n placeholder=\"Enter your answer...\"\n disabled={props?.model?.disabled}\n readonly={showCorrectAnswer}\n class=\"outline-none px-3 py-2 rounded\"\n style:border={isEvaluateMode && (isCorrect || showCorrectAnswer) ? 'solid 2px #0EA449' : isEvaluateMode && isIncorrect && !showCorrectAnswer ? 'solid 2px #BF0D00' : 'solid 1px #d1d5db'}\n style:color={isEvaluateMode && (isCorrect || isIncorrect) ? 'black' : ''}\n />\n </div>\n</div>\n\n<style>\n /* Custom styles for correct answer display */\n input[readonly] {\n font-weight: 600;\n }\n\n .correctness-icon {\n position: absolute;\n top: -8px;\n left: -8px;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px;\n }\n</style>\n","// Import the Svelte component compiled as custom element\nimport SimpleClozeComponent from './SimpleCloze.svelte';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-lib/delivery-events-svelte';\n\n// Get the base Svelte custom element class\nconst SvelteElementClass = (SimpleClozeComponent as any).element;\n\n// Create a wrapper that properly handles session updates\nclass SimpleClozeElement extends SvelteElementClass {\n _internalSession: any = null;\n _model: any = null;\n\n _isComplete = () => {\n const response = this._internalSession?.response;\n return typeof response === 'string' && response.trim().length > 0;\n };\n\n _dispatchModelSet = () => {\n this.dispatchEvent(\n new ModelSetEvent(this.tagName.toLowerCase(), this._isComplete(), this._model !== undefined)\n );\n };\n\n _dispatchSessionChanged = () => {\n this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this._isComplete()));\n };\n\n set model(m: any) {\n this._model = m;\n super.model = m;\n this._dispatchModelSet();\n }\n\n get model() {\n return this._model;\n }\n\n set session(s: any) {\n this._internalSession = s;\n super.session = s;\n this._dispatchSessionChanged();\n }\n\n get session() {\n return this._internalSession;\n }\n\n onSessionChange = (updatedSession: any) => {\n this._internalSession = updatedSession;\n super.session = updatedSession;\n this._dispatchSessionChanged();\n };\n\n connectedCallback() {\n super.connectedCallback();\n (this as any).onSessionChange = this.onSessionChange;\n }\n}\n\n// Export the custom element class\n// The demo loader will register it with customElements.define()\nexport default SimpleClozeElement;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["t","e"],"sources":["../../../../../lib-svelte/delivery-events/dist/index2.js","../../../../../lib-svelte/delivery-events/dist/index3.js","../../../src/delivery/SimpleCloze.svelte","../../../src/delivery/index.ts"],"sourcesContent":["//#region ../../shared/player-events/dist/index.js\nvar e = class e extends CustomEvent {\n\tstatic {\n\t\tthis.TYPE = \"model-set\";\n\t}\n\tconstructor(t, n, r) {\n\t\tsuper(e.TYPE, {\n\t\t\tbubbles: !0,\n\t\t\tcomposed: !0,\n\t\t\tdetail: {\n\t\t\t\tcomplete: n,\n\t\t\t\tcomponent: t,\n\t\t\t\thasModel: r\n\t\t\t}\n\t\t}), this.component = t, this.complete = n;\n\t}\n}, t = class e extends CustomEvent {\n\tstatic {\n\t\tthis.TYPE = \"session-changed\";\n\t}\n\tconstructor(t, n) {\n\t\tsuper(e.TYPE, {\n\t\t\tbubbles: !0,\n\t\t\tcomposed: !0,\n\t\t\tdetail: {\n\t\t\t\tcomplete: n,\n\t\t\t\tcomponent: t\n\t\t\t}\n\t\t}), this.component = t, this.complete = n;\n\t}\n};\n//#endregion\nexport { e as ModelSetEvent, t as SessionChangedEvent };\n","import { SessionChangedEvent as e } from \"./index2.js\";\n//#region src/session-bridge.ts\nvar t = (e) => {\n\tlet t = e;\n\treturn t ? typeof t.onSessionChange == \"function\" || typeof t.onAudioStarted == \"function\" || typeof t.onAudioEnded == \"function\" : !1;\n};\nfunction n(e, n = {}) {\n\tlet r = n.hostPredicate ?? t, i = e;\n\tfor (; i;) {\n\t\tif (r(i)) return i;\n\t\ti = i.parentElement;\n\t}\n\tif (typeof document < \"u\" && n.fallbackSelector) {\n\t\tlet e = document.querySelector(n.fallbackSelector);\n\t\tif (r(e)) return e;\n\t}\n\treturn null;\n}\nfunction r(e) {\n\treturn !!e && typeof e == \"object\" && !Array.isArray(e);\n}\nfunction i(e, t) {\n\tif (e === t) return e;\n\tif (!r(e) || !r(t) || Object.isFrozen(e) || !Object.isExtensible(e)) return t;\n\ttry {\n\t\tfor (let n of Object.keys(e)) n in t || delete e[n];\n\t\tObject.assign(e, t);\n\t} catch {\n\t\treturn t;\n\t}\n\treturn e;\n}\nfunction a({ sourceEl: t, fallbackSelector: r, component: i, complete: a, session: o }) {\n\tlet s = n(t, { fallbackSelector: r });\n\treturn s ? typeof s.onSessionChange == \"function\" ? (s.onSessionChange(o), s) : (s.dispatchEvent(new e(i, a)), s) : null;\n}\n//#endregion\nexport { a as forwardSessionChange, n as resolveDeliveryHost, i as writeSessionInPlace };\n","<svelte:options\n customElement={{\n shadow: 'none',\n props: {\n model: { type: 'Object' },\n session: { type: 'Object' }\n }\n }}\n/>\n\n<script lang=\"ts\">\nimport { onMount } from 'svelte';\nimport { forwardSessionChange } from '@pie-lib/delivery-events-svelte';\n\n// Props using $props() in Svelte 5 custom element mode\nlet props = $props<{ model?: any; session?: any }>();\n\nlet inputElement: HTMLInputElement | null = null;\nlet showCorrectAnswer = $state(false);\n\nonMount(() => {\n if (inputElement) {\n // Set initial value from session\n inputElement.value = props?.session?.response || '';\n\n inputElement.addEventListener('input', handleInput);\n }\n\n return () => {\n if (inputElement) {\n inputElement.removeEventListener('input', handleInput);\n }\n };\n});\n\n// Update input value when session changes externally\n$effect(() => {\n if (inputElement && !showCorrectAnswer) {\n const sessionValue = props?.session?.response || '';\n if (inputElement.value !== sessionValue) {\n inputElement.value = sessionValue;\n }\n }\n});\n\n// Update input value when showing correct answer\n$effect(() => {\n if (inputElement) {\n if (showCorrectAnswer && props?.model?.correctAnswer) {\n inputElement.value = props.model.correctAnswer;\n } else if (!showCorrectAnswer) {\n inputElement.value = props?.session?.response || '';\n }\n }\n});\n\nfunction handleInput(event: Event) {\n const target = event.target as HTMLInputElement;\n const newValue = target.value;\n\n // Replace the session object so host players can detect updates reliably.\n const updatedSession = {\n ...props.session,\n response: newValue,\n };\n\n forwardSessionChange({\n sourceEl: target,\n fallbackSelector: 'simple-cloze',\n component: 'simple-cloze',\n session: updatedSession,\n complete: newValue.trim().length > 0,\n });\n}\n\nfunction toggleCorrectAnswer() {\n showCorrectAnswer = !showCorrectAnswer;\n}\n\n// Computed values\nconst isEvaluateMode = $derived(props?.model?.env?.mode === 'evaluate');\nconst correctness = $derived(props?.model?.correctness);\nconst isCorrect = $derived(correctness === 'correct');\nconst isIncorrect = $derived(correctness === 'incorrect');\n</script>\n\n<div class=\"p-4\">\n {#if props?.model?.prompt}\n <div class=\"mb-4 prose\">{@html props.model.prompt}</div>\n {/if}\n\n {#if isEvaluateMode && isIncorrect}\n <button\n type=\"button\"\n class=\"mb-3 flex items-center gap-2 cursor-pointer select-none\"\n onclick={toggleCorrectAnswer}\n aria-pressed={showCorrectAnswer}\n >\n {#if showCorrectAnswer}\n <!-- Hide correct answer icon (open state) -->\n <svg style=\"width: 25px; height: 25px;\" preserveAspectRatio=\"xMinYMin meet\" version=\"1.1\" viewBox=\"-283 359 34 35\">\n <circle cx=\"-266\" cy=\"375.9\" r=\"14\" fill=\"#bce2ff\" />\n <path d=\"M-280.5,375.9c0-8,6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5s-6.5,14.5-14.5,14.5S-280.5,383.9-280.5,375.9z M-279.5,375.9c0,7.4,6.1,13.5,13.5,13.5c7.4,0,13.5-6.1,13.5-13.5s-6.1-13.5-13.5-13.5C-273.4,362.4-279.5,368.5-279.5,375.9z\" fill=\"#bce2ff\" />\n <polygon points=\"-265.4,383.1 -258.6,377.2 -261.2,374.2 -264.3,376.9 -268.9,368.7 -272.4,370.6\" fill=\"#1a9cff\" />\n </svg>\n {:else}\n <!-- Show correct answer icon (closed state) -->\n <svg style=\"width: 25px; height: 25px;\" preserveAspectRatio=\"xMinYMin meet\" version=\"1.1\" viewBox=\"-129.5 127 34 35\">\n <path style=\"fill: #D0CAC5; stroke: #E6E3E0; stroke-width: 0.75; stroke-miterlimit: 10;\" d=\"M-112.9,160.4c-8.5,0-15.5-6.9-15.5-15.5c0-8.5,6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5 C-97.4,153.5-104.3,160.4-112.9,160.4z\" />\n <path style=\"fill: #B3ABA4; stroke: #CDC7C2; stroke-width: 0.5; stroke-miterlimit: 10;\" d=\"M-113.2,159c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-105.2,159-113.2,159z\" />\n <circle cx=\"-114.2\" cy=\"143.5\" r=\"14\" fill=\"white\" />\n <path d=\"M-114.2,158c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-106.2,158-114.2,158z M-114.2,130c-7.4,0-13.5,6.1-13.5,13.5s6.1,13.5,13.5,13.5s13.5-6.1,13.5-13.5S-106.8,130-114.2,130z\" fill=\"#bce2ff\" />\n <polygon points=\"-114.8,150.7 -121.6,144.8 -119,141.8 -115.9,144.5 -111.3,136.3 -107.8,138.2\" fill=\"#1a9cff\" />\n </svg>\n {/if}\n <span class=\"text-sm hover:underline\">\n {showCorrectAnswer ? 'Hide' : 'Show'} correct answer\n </span>\n </button>\n {/if}\n\n <div class=\"relative inline-block\">\n {#if isEvaluateMode && (isCorrect || showCorrectAnswer)}\n <span class=\"correctness-icon\" style=\"background-color: #0EA449;\">\n <svg style=\"width: 12px; height: 12px; color: white;\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z\"/>\n </svg>\n </span>\n {/if}\n {#if isEvaluateMode && isIncorrect && !showCorrectAnswer}\n <span class=\"correctness-icon\" style=\"background-color: #BF0D00;\">\n <svg style=\"width: 12px; height: 12px; color: white;\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"/>\n </svg>\n </span>\n {/if}\n <input\n bind:this={inputElement}\n type=\"text\"\n placeholder=\"Enter your answer...\"\n disabled={props?.model?.disabled}\n readonly={showCorrectAnswer}\n class=\"outline-none px-3 py-2 rounded\"\n style:border={isEvaluateMode && (isCorrect || showCorrectAnswer) ? 'solid 2px #0EA449' : isEvaluateMode && isIncorrect && !showCorrectAnswer ? 'solid 2px #BF0D00' : 'solid 1px #d1d5db'}\n style:color={isEvaluateMode && (isCorrect || isIncorrect) ? 'black' : ''}\n />\n </div>\n</div>\n\n<style>\n /* Custom styles for correct answer display */\n input[readonly] {\n font-weight: 600;\n }\n\n .correctness-icon {\n position: absolute;\n top: -8px;\n left: -8px;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px;\n }\n</style>\n","// Import the Svelte component compiled as custom element\nimport SimpleClozeComponent from './SimpleCloze.svelte';\nimport {\n ModelSetEvent,\n SessionChangedEvent,\n writeSessionInPlace,\n} from '@pie-lib/delivery-events-svelte';\n\n// Get the base Svelte custom element class\nconst SvelteElementClass = (SimpleClozeComponent as any).element;\n\n// Create a wrapper that properly handles session updates\nclass SimpleClozeElement extends SvelteElementClass {\n _internalSession: any = null;\n /**\n * The session object the player handed us. A player reads the learner's\n * response back off this object, so every update is written into it as well\n * as into the copy the component renders from.\n */\n _playerSession: any = null;\n _model: any = null;\n\n _isComplete = () => {\n const response = this._internalSession?.response;\n return typeof response === 'string' && response.trim().length > 0;\n };\n\n _dispatchModelSet = () => {\n this.dispatchEvent(\n new ModelSetEvent(this.tagName.toLowerCase(), this._isComplete(), this._model !== undefined)\n );\n };\n\n _dispatchSessionChanged = () => {\n this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this._isComplete()));\n };\n\n set model(m: any) {\n this._model = m;\n super.model = m;\n this._dispatchModelSet();\n }\n\n get model() {\n return this._model;\n }\n\n set session(s: any) {\n this._playerSession = s;\n this._internalSession = s;\n super.session = s;\n this._dispatchSessionChanged();\n }\n\n get session() {\n return this._internalSession;\n }\n\n onSessionChange = (updatedSession: any) => {\n writeSessionInPlace(this._playerSession, updatedSession);\n this._internalSession = updatedSession;\n super.session = updatedSession;\n this._dispatchSessionChanged();\n };\n\n connectedCallback() {\n super.connectedCallback();\n (this as any).onSessionChange = this.onSessionChange;\n }\n}\n\n// Export the custom element class\n// The demo loader will register it with customElements.define()\nexport default SimpleClozeElement;\n"],"mappings":"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"}
|
package/dist/delivery/index.d.ts
CHANGED
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
declare const SvelteElementClass: any;
|
|
2
2
|
declare class SimpleClozeElement extends SvelteElementClass {
|
|
3
3
|
_internalSession: any;
|
|
4
|
+
/**
|
|
5
|
+
* The session object the player handed us. A player reads the learner's
|
|
6
|
+
* response back off this object, so every update is written into it as well
|
|
7
|
+
* as into the copy the component renders from.
|
|
8
|
+
*/
|
|
9
|
+
_playerSession: any;
|
|
4
10
|
_model: any;
|
|
5
11
|
_isComplete: () => boolean;
|
|
6
12
|
_dispatchModelSet: () => void;
|
package/dist/delivery/index.js
CHANGED
|
@@ -4700,7 +4700,21 @@ function n(e, n = {}) {
|
|
|
4700
4700
|
}
|
|
4701
4701
|
return null;
|
|
4702
4702
|
}
|
|
4703
|
-
function r(
|
|
4703
|
+
function r(e) {
|
|
4704
|
+
return !!e && typeof e == "object" && !Array.isArray(e);
|
|
4705
|
+
}
|
|
4706
|
+
function i(e, t) {
|
|
4707
|
+
if (e === t) return e;
|
|
4708
|
+
if (!r(e) || !r(t) || Object.isFrozen(e) || !Object.isExtensible(e)) return t;
|
|
4709
|
+
try {
|
|
4710
|
+
for (let n of Object.keys(e)) n in t || delete e[n];
|
|
4711
|
+
Object.assign(e, t);
|
|
4712
|
+
} catch {
|
|
4713
|
+
return t;
|
|
4714
|
+
}
|
|
4715
|
+
return e;
|
|
4716
|
+
}
|
|
4717
|
+
function a({ sourceEl: t, fallbackSelector: r, component: i, complete: a, session: o }) {
|
|
4704
4718
|
let s = n(t, { fallbackSelector: r });
|
|
4705
4719
|
return s ? typeof s.onSessionChange == "function" ? (s.onSessionChange(o), s) : (s.dispatchEvent(new t$1(i, a)), s) : null;
|
|
4706
4720
|
}
|
|
@@ -4744,7 +4758,7 @@ function SimpleCloze($$anchor, $$props) {
|
|
|
4744
4758
|
function handleInput(event) {
|
|
4745
4759
|
const target = event.target;
|
|
4746
4760
|
const newValue = target.value;
|
|
4747
|
-
|
|
4761
|
+
a({
|
|
4748
4762
|
sourceEl: target,
|
|
4749
4763
|
fallbackSelector: "simple-cloze",
|
|
4750
4764
|
component: "simple-cloze",
|
|
@@ -4842,6 +4856,16 @@ var SimpleClozeElement = class extends SvelteElementClass {
|
|
|
4842
4856
|
constructor(..._args) {
|
|
4843
4857
|
super(..._args);
|
|
4844
4858
|
_defineProperty(this, "_internalSession", null);
|
|
4859
|
+
_defineProperty(
|
|
4860
|
+
this,
|
|
4861
|
+
/**
|
|
4862
|
+
* The session object the player handed us. A player reads the learner's
|
|
4863
|
+
* response back off this object, so every update is written into it as well
|
|
4864
|
+
* as into the copy the component renders from.
|
|
4865
|
+
*/
|
|
4866
|
+
"_playerSession",
|
|
4867
|
+
null
|
|
4868
|
+
);
|
|
4845
4869
|
_defineProperty(this, "_model", null);
|
|
4846
4870
|
_defineProperty(this, "_isComplete", () => {
|
|
4847
4871
|
const response = this._internalSession?.response;
|
|
@@ -4854,6 +4878,7 @@ var SimpleClozeElement = class extends SvelteElementClass {
|
|
|
4854
4878
|
this.dispatchEvent(new t$1(this.tagName.toLowerCase(), this._isComplete()));
|
|
4855
4879
|
});
|
|
4856
4880
|
_defineProperty(this, "onSessionChange", (updatedSession) => {
|
|
4881
|
+
i(this._playerSession, updatedSession);
|
|
4857
4882
|
this._internalSession = updatedSession;
|
|
4858
4883
|
super.session = updatedSession;
|
|
4859
4884
|
this._dispatchSessionChanged();
|
|
@@ -4868,6 +4893,7 @@ var SimpleClozeElement = class extends SvelteElementClass {
|
|
|
4868
4893
|
return this._model;
|
|
4869
4894
|
}
|
|
4870
4895
|
set session(s) {
|
|
4896
|
+
this._playerSession = s;
|
|
4871
4897
|
this._internalSession = s;
|
|
4872
4898
|
super.session = s;
|
|
4873
4899
|
this._dispatchSessionChanged();
|