@1024pix/epreuves-components 2.8.1 → 4.0.0

package/dist/components/quiz-stepper.ce.js.js

@@ -1,13 +1,15 @@
-import { d as S, c as h, o as u, n as B, a as i, B as b, t as l, _ as j, r as m, j as G, y as d, e as v, A as I, E as y, K as z, H as P, l as Q, f as R } from "../_plugin-vue_export-helper-BPDEgOal.js";
-import { u as M, a as O, i as k, b as D } from "../i18n-BuCPzaih.js";
-import { _ as H, a as K, F as J } from "../Cross.ce.vue_vue_type_script_setup_true_lang-D7kq2waU.js";
-import { a as f, u as U } from "../normalize-props-DtfVI0Xg.js";
+import { b as q, c as m, o as r, n as B, a as l, B as g, t as u, _ as j, r as b, j as V, g as p, E as h, f as v, K as k, H as G, l as Q, d as R } from "../_plugin-vue_export-helper-D0N_62VD.js";
+import { u as O, a as P, i as z, b as D } from "../i18n-ekiZvzf6.js";
+import { _ as H, a as I, F as K } from "../Cross.ce.vue_vue_type_script_setup_true_lang-CVBFTfq5.js";
+import { S as M } from "../Stepper.ce-B1yDelzC.js";
+import { a as f, b as J } from "../normalize-props-DH0oPBss.js";
+import { l as U } from "../index-BpqxFmwz.js";
 const W = {}, X = {}, Y = {}, Z = {}, ee = {}, te = {
-  "quiz-stepper": { submitButton: "Valider", nextStepButton: "Continuer", step: "Étape {{step}} sur {{totalStep}}", feedback: { success: "Bien joué", failed: "Pas tout à fait" } }
-}, se = {}, ne = {}, ie = ["id", "aria-disabled", "checked"], ae = ["for"], oe = {
+  "quiz-stepper": { submitButton: "Valider", nextStepButton: "Continuer", feedback: { success: "Bien joué", failed: "Pas tout à fait" } }
+}, ne = {}, se = {}, ie = ["id", "aria-disabled", "checked"], oe = ["for"], ae = {
   key: 0,
   class: "answer__subtitle"
-}, re = { class: "answer__content" }, le = /* @__PURE__ */ S({
+}, le = { class: "answer__content" }, ce = /* @__PURE__ */ q({
   __name: "Answer.ce",
   props: {
     choice: { type: Object },
@@ -17,14 +19,14 @@ const W = {}, X = {}, Y = {}, Z = {}, ee = {}, te = {
   },
   emits: ["select-answer"],
   setup(e, { emit: c }) {
-    const n = c;
+    const s = c;
     function t() {
-      n("select-answer", e.choice);
+      s("select-answer", e.choice);
     }
-    return (s, o) => (u(), h("div", {
+    return (n, o) => (r(), m("div", {
       class: B(["answer", { "is-selected": e.isSelected, "is-disabled": e.showFeedback }])
     }, [
-      i("input", {
+      l("input", {
         type: "radio",
         id: e.id,
         name: "choice",
@@ -33,151 +35,143 @@ const W = {}, X = {}, Y = {}, Z = {}, ee = {}, te = {
         onChange: t,
         class: "sr-only"
       }, null, 40, ie),
-      i("label", { for: e.id }, [
-        e.choice.title ? (u(), h("span", oe, l(e.choice.title), 1)) : b("", !0),
-        i("span", re, l(e.choice.content), 1)
-      ], 8, ae)
+      l("label", { for: e.id }, [
+        e.choice.title ? (r(), m("span", ae, u(e.choice.title), 1)) : g("", !0),
+        l("span", le, u(e.choice.content), 1)
+      ], 8, oe)
     ], 2));
   }
-}), ce = ".answer{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:.25em;border-radius:8px;border:1px solid #cdd1d9;background:#fff;color:var(--neutral-900);text-align:left;font-size:.875em}.answer label{cursor:pointer;height:100%;padding:1em}.answer.is-selected{border-radius:8px;border:1px solid #fff;background:var(--neutral-800);color:#fff}.answer__subtitle{font-size:1em;font-weight:700;line-height:24px;display:block}.answer__content{text-wrap-mode:wrap;white-space-collapse:preserve}.answer .is-disabled{cursor:not-allowed}.answer:focus-within{outline:2px solid black}", q = /* @__PURE__ */ j(le, [["styles", [ce]]]), ue = { class: "quiz-stepper-container__layout" }, de = { class: "steps-wrapper" }, pe = { class: "steps-wrapper__stepper" }, fe = { "aria-hidden": "true" }, he = {
-  class: "sr-only",
-  "aria-live": "polite"
-}, me = ["aria-level"], ve = { class: "card-wrapper" }, be = ["aria-disable"], ge = /* @__PURE__ */ S({
+}), re = ".answer{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:.25em;border-radius:8px;border:1px solid #cdd1d9;background:#fff;color:var(--neutral-900);text-align:left;font-size:.875em}.answer label{cursor:pointer;height:100%;padding:1em}.answer.is-selected{border-radius:8px;border:1px solid #fff;background:var(--neutral-800);color:#fff}.answer__subtitle{font-size:1em;font-weight:700;line-height:24px;display:block}.answer__content{text-wrap-mode:wrap;white-space-collapse:preserve}.answer .is-disabled{cursor:not-allowed}.answer:focus-within{outline:2px solid black}", S = /* @__PURE__ */ j(ce, [["styles", [re]]]), ue = { class: "quiz-stepper-container__layout" }, de = ["aria-level"], pe = { class: "card-wrapper" }, fe = ["aria-disable"], me = /* @__PURE__ */ q({
   __name: "QuizStepper.ce",
   props: {
     steps: { type: Array },
     titleLevel: { default: 2, type: Number }
   },
   setup(e, { expose: c }) {
-    const n = m(0), t = m(), s = m(!1), o = G("form"), { t: g } = M(), r = d(() => e.steps?.[n.value]), _ = d(() => !s.value), $ = d(() => {
-      const a = n.value === e.steps.length - 1;
-      return a ? a && !s.value : !0;
-    }), C = d(() => Math.floor((n.value + 1) / e.steps.length * 100)), F = d(() => _.value ? g("quiz-stepper.submitButton") : g("quiz-stepper.nextStepButton"));
-    function w(a) {
-      s.value || (t.value = a);
+    const s = b(0), t = b(), n = b(!1), o = V("form"), { t: _ } = O(), a = p(() => e.steps?.[s.value]), w = p(() => !n.value), $ = p(() => {
+      const i = s.value === e.steps.length - 1;
+      return i ? i && !n.value : !0;
+    }), C = p(() => w.value ? _("quiz-stepper.submitButton") : _("quiz-stepper.nextStepButton"));
+    function x(i) {
+      n.value || (t.value = i);
     }
-    function N() {
-      if (n.value + 1 > e.steps.length) {
-        n.value = e.steps.length;
+    function F() {
+      if (s.value + 1 > e.steps.length) {
+        s.value = e.steps.length;
         return;
       }
-      n.value++, s.value = !1, t.value = void 0, o.value?.focus();
+      s.value++, n.value = !1, t.value = void 0, o.value?.focus();
     }
-    function T() {
-      t.value && (s.value = !0, n.value + 1 === e.steps.length && o.value?.focus());
+    function N() {
+      t.value && (n.value = !0, s.value + 1 === e.steps.length && o.value?.focus());
     }
-    function E() {
-      if (_.value) {
-        T();
+    function T() {
+      if (w.value) {
+        N();
         return;
       }
-      N();
+      F();
     }
-    function x(a) {
-      return a.content ? a.content === t.value?.content : a.title === t.value?.title;
+    function y(i) {
+      return i.content ? i.content === t.value?.content : i.title === t.value?.title;
     }
-    function L() {
-      n.value = 0, t.value = void 0, s.value = !1;
+    function E() {
+      s.value = 0, t.value = void 0, n.value = !1;
     }
     return c({
-      reset: L
-    }), (a, p) => (u(), h("form", {
+      reset: E
+    }), (i, d) => (r(), m("form", {
       class: "quiz-stepper-container",
-      onSubmit: Q(E, ["prevent"]),
+      onSubmit: Q(T, ["prevent"]),
       ref_key: "form",
       ref: o,
       tabindex: "-1"
     }, [
-      i("div", ue, [
-        i("div", de, [
-          i("div", pe, [
-            i("div", {
-              class: "steps-wrapper__effective-steps",
-              style: I({ "--stepIndex": `${C.value}%` })
-            }, null, 4)
-          ]),
-          i("p", fe, l(n.value + 1) + "/" + l(e.steps.length), 1),
-          i("p", he, l(a.$t("quiz-stepper.step", { step: n.value + 1, totalStep: e.steps.length })), 1)
-        ]),
-        i("fieldset", null, [
-          i("legend", null, [
-            i("div", {
+      l("div", ue, [
+        h(M, {
+          step: s.value,
+          "steps-count": e.steps.length
+        }, null, 8, ["step", "steps-count"]),
+        l("fieldset", null, [
+          l("legend", null, [
+            l("div", {
               role: "heading",
               "aria-level": e.titleLevel,
               class: "question"
-            }, l(r.value.question), 9, me)
+            }, u(a.value.question), 9, de)
           ]),
-          i("div", ve, [
-            y(q, {
+          l("div", pe, [
+            h(S, {
               id: "choice1",
-              choice: r.value.choice1,
-              "show-feedback": s.value,
-              "is-selected": x(r.value.choice1),
-              onSelectAnswer: p[0] || (p[0] = (V) => w(r.value.choice1))
+              choice: a.value.choice1,
+              "show-feedback": n.value,
+              "is-selected": y(a.value.choice1),
+              onSelectAnswer: d[0] || (d[0] = (L) => x(a.value.choice1))
             }, null, 8, ["choice", "show-feedback", "is-selected"]),
-            y(q, {
+            h(S, {
               id: "choice2",
-              choice: r.value.choice2,
-              "show-feedback": s.value,
-              "is-selected": x(r.value.choice2),
-              onSelectAnswer: p[1] || (p[1] = (V) => w(r.value.choice2))
+              choice: a.value.choice2,
+              "show-feedback": n.value,
+              "is-selected": y(a.value.choice2),
+              onSelectAnswer: d[1] || (d[1] = (L) => x(a.value.choice2))
             }, null, 8, ["choice", "show-feedback", "is-selected"])
           ])
         ]),
-        s.value ? (u(), v(J, {
+        n.value ? (r(), v(K, {
           key: 0,
-          title: t.value?.isGoodAnswer ? a.$t("quiz-stepper.feedback.success") : a.$t("quiz-stepper.feedback.failed")
+          title: t.value?.isGoodAnswer ? i.$t("quiz-stepper.feedback.success") : i.$t("quiz-stepper.feedback.failed")
         }, {
-          icon: z(() => [
-            t.value?.isGoodAnswer ? (u(), v(H, {
+          icon: k(() => [
+            t.value?.isGoodAnswer ? (r(), v(H, {
               key: 0,
               class: "icon-size"
-            })) : (u(), v(K, {
+            })) : (r(), v(I, {
               key: 1,
               class: "icon-size"
             }))
           ]),
-          content: z(() => [
-            P(l(t.value?.isGoodAnswer ? r.value.feedback.success : r.value.feedback.failed), 1)
+          content: k(() => [
+            G(u(t.value?.isGoodAnswer ? a.value.feedback.success : a.value.feedback.failed), 1)
           ]),
           _: 1
-        }, 8, ["title"])) : b("", !0),
-        $.value ? (u(), h("button", {
+        }, 8, ["title"])) : g("", !0),
+        $.value ? (r(), m("button", {
           key: 1,
           type: "submit",
           class: B(["submit-button", { "is-disabled": !t.value }]),
           "aria-disable": !t.value
-        }, l(F.value), 11, be)) : b("", !0)
+        }, u(C.value), 11, fe)) : g("", !0)
       ])
     ], 544));
   }
-}), _e = "*{--neutral-800: #253858;--neutral-900: #122647;font-family:Roboto,sans-serif}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);border:0}.icon-size{width:16px;height:16px}.quiz-stepper-container{display:flex;flex-direction:column;align-items:center;color:var(--neutral-800)}.quiz-stepper-container button{cursor:pointer}.quiz-stepper-container fieldset{border:none}.quiz-stepper-container legend{margin-bottom:1.5em}.quiz-stepper-container__layout{width:80%;display:flex;flex-direction:column;gap:1.5em;align-items:center;padding:1.5em 1em}.quiz-stepper-container .question{color:var(--neutral-900);text-align:center;font-family:Nunito;font-size:1.25em;font-style:normal;font-weight:700;line-height:28px}.quiz-stepper-container .card-wrapper{display:flex;padding:1.5em;justify-content:center;gap:1.5em;border-radius:16px;background:#f4f5f7;width:calc(100% - 3em)}.quiz-stepper-container .submit-button{display:flex;padding:.5em 1.5em;justify-content:center;align-items:center;gap:.5em;border-radius:8px;background:#253858;border:none;color:#fff;font-weight:700}.quiz-stepper-container .submit-button.is-disabled{background:#cdd1d9;cursor:not-allowed}.quiz-stepper-container .steps-wrapper{display:flex;align-items:center;justify-content:center;color:#613fdd;font-size:.875rem;gap:6px;font-weight:500;width:100%}.quiz-stepper-container .steps-wrapper p{text-wrap:nowrap;margin:0}.quiz-stepper-container .steps-wrapper__stepper{background:#e8eaed;height:8px;width:100%;border-radius:4px}.quiz-stepper-container .steps-wrapper__effective-steps{width:var(--stepIndex);background:#613fdd;border-radius:4px;height:8px}@media screen and (max-width:630px){.quiz-stepper-container__layout{width:calc(100% - 1em);padding:1em .5em}.quiz-stepper-container .card-wrapper{padding:1em;flex-direction:column;width:calc(100% - 2em)}}", we = /* @__PURE__ */ j(ge, [["styles", [_e]]]);
-O(/* @__PURE__ */ Object.assign({ "./locales/de-AT.json": W, "./locales/en.json": X, "./locales/es-419.json": Y, "./locales/es.json": Z, "./locales/fr-BE.json": ee, "./locales/fr.json": te, "./locales/it.json": se, "./locales/nl.json": ne })).catch((e) => console.error(e));
-const A = R(we, {
+}), be = "*{--neutral-800: #253858;--neutral-900: #122647;font-family:Roboto,sans-serif}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);border:0}.icon-size{width:16px;height:16px}.quiz-stepper-container{display:flex;flex-direction:column;align-items:center;color:var(--neutral-800)}.quiz-stepper-container button{cursor:pointer}.quiz-stepper-container fieldset{border:none}.quiz-stepper-container legend{margin-bottom:1.5em}.quiz-stepper-container__layout{width:80%;display:flex;flex-direction:column;gap:1.5em;align-items:center;padding:1.5em 1em}.quiz-stepper-container .question{color:var(--neutral-900);text-align:center;font-family:Nunito;font-size:1.25em;font-style:normal;font-weight:700;line-height:28px}.quiz-stepper-container .card-wrapper{display:flex;padding:1.5em;justify-content:center;gap:1.5em;border-radius:16px;background:#f4f5f7;width:calc(100% - 3em)}.quiz-stepper-container .submit-button{display:flex;padding:.5em 1.5em;justify-content:center;align-items:center;gap:.5em;border-radius:8px;background:#253858;border:none;color:#fff;font-weight:700}.quiz-stepper-container .submit-button.is-disabled{background:#cdd1d9;cursor:not-allowed}@media screen and (max-width:630px){.quiz-stepper-container__layout{width:calc(100% - 1em);padding:1em .5em}.quiz-stepper-container .card-wrapper{padding:1em;flex-direction:column;width:calc(100% - 2em)}}", he = /* @__PURE__ */ j(me, [["styles", [be]]]);
+P(/* @__PURE__ */ Object.assign({ "./locales/de-AT.json": W, "./locales/en.json": X, "./locales/es-419.json": Y, "./locales/es.json": Z, "./locales/fr-BE.json": ee, "./locales/fr.json": te, "./locales/it.json": ne, "./locales/nl.json": se })).catch((e) => console.error(e));
+U();
+const A = R(he, {
   configureApp(e) {
-    k.changeLanguage(document?.documentElement?.lang || navigator.language), e.use(D, { i18next: k });
+    z.changeLanguage(document?.documentElement?.lang || navigator.language), e.use(D, { i18next: z });
   }
 });
 A.prototype.normalizeProps = (e) => {
-  let { steps: c, titleLevel: n } = e;
+  let { steps: c, titleLevel: s } = e;
   return c = c.map((t) => {
-    let { choice1: s, choice2: o } = t;
-    return s = {
+    let { choice1: n, choice2: o } = t;
+    return n = {
       ...t.choice1,
-      title: f(s.title),
-      content: f(s.content)
+      title: f(n.title),
+      content: f(n.content)
     }, o = {
       ...t.choice2,
       title: f(o.title),
       content: f(o.content)
     }, {
       ...t,
-      choice1: s,
+      choice1: n,
       choice2: o
     };
   }), {
     steps: c,
-    titleLevel: U(n)
+    titleLevel: J(s)
   };
 };
 window.customElements.define("quiz-stepper", A);

package/dist/components/select-conversation.ce.js.js

@@ -1,7 +1,7 @@
-import { d as w, r as g, y as u, c as n, o as i, a as e, t as a, k as l, n as z, H as k, F as p, b as M, B as T, _ as D, f as C } from "../_plugin-vue_export-helper-BPDEgOal.js";
-import { a as j, i as _, b as L } from "../i18n-BuCPzaih.js";
-import { u as S } from "../normalize-props-DtfVI0Xg.js";
-import { r as F, q as B, t as f } from "../temporal.utils-CotrC6ao.js";
+import { b as w, r as g, g as p, c as n, o as i, a as e, t as a, k as l, n as z, H as k, F as u, e as M, B as T, _ as D, d as C } from "../_plugin-vue_export-helper-D0N_62VD.js";
+import { a as j, i as _, b as L } from "../i18n-ekiZvzf6.js";
+import { b as S } from "../normalize-props-DH0oPBss.js";
+import { a as F, q as B, t as f } from "../temporal.utils-7Uvm62ss.js";
 const $ = {}, I = {}, N = {}, E = {}, q = {}, A = {
   "select-conversation": { "select-response-title": "Sélectionnez le message que {{username}} devrait envoyer :", "message-date": "{{messageDay, relativetime(numeric: auto)}} · {{messageTime, datetime(timeStyle: short)}}", "incoming-message-sr": "Message de {{username}} reçu {{messageDay, relativetime(numeric: auto)}} à {{messageTime, datetime(timeStyle: short)}}", "outgoing-message-sr": "Message envoyé par {{username}} {{messageDay, relativetime(numeric: auto)}} à {{messageTime, datetime(timeStyle: short)}}", "good-idea": "Bonne idée", "bad-idea": "Mauvaise idée" }
 }, R = {}, H = {}, O = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3e%3c!--!Font%20Awesome%20Free%20v7.1.0%20by%20@fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202025%20Fonticons,%20Inc.--%3e%3cpath%20d='M434.8%2070.1c14.3%2010.4%2017.5%2030.4%207.1%2044.7l-256%20352c-5.5%207.6-14%2012.3-23.4%2013.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8%200-45.3s32.8-12.5%2045.3%200l101.5%20101.5%20234-321.7c10.4-14.3%2030.4-17.5%2044.7-7.1z'/%3e%3c/svg%3e", V = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3e%3c!--!Font%20Awesome%20Free%20v7.1.0%20by%20@fontawesome%20-%20https://fontawesome.com%20License%20-%20https://fontawesome.com/license/free%20Copyright%202025%20Fonticons,%20Inc.--%3e%3cpath%20d='M256%2048a208%20208%200%201%201%200%20416%20208%20208%200%201%201%200-416zm0%20464a256%20256%200%201%200%200-512%20256%20256%200%201%200%200%20512zM167%20167c-9.4%209.4-9.4%2024.6%200%2033.9l55%2055-55%2055c-9.4%209.4-9.4%2024.6%200%2033.9s24.6%209.4%2033.9%200l55-55%2055%2055c9.4%209.4%2024.6%209.4%2033.9%200s9.4-24.6%200-33.9l-55-55%2055-55c9.4-9.4%209.4-24.6%200-33.9s-24.6-9.4-33.9%200l-55%2055-55-55c-9.4-9.4-24.6-9.4-33.9%200z'/%3e%3c/svg%3e", G = { class: "messages" }, P = { class: "message" }, X = {
@@ -16,7 +16,7 @@ const $ = {}, I = {}, N = {}, E = {}, q = {}, A = {
 }, Y = { class: "sr-only" }, Z = { class: "message__content-container" }, ee = { class: "message__content-title" }, se = ["src"], te = { class: "message__content" }, ae = {
   class: "message__date",
   "aria-hidden": "true"
-}, oe = { class: "response-select" }, ne = ["aria-level"], ie = { class: "response-select__choices" }, le = ["aria-disabled", "onClick"], re = { "aria-live": "polite" }, ce = ["innerHTML"], de = /* @__PURE__ */ w({
+}, oe = { class: "response-select" }, ne = ["aria-level"], ie = { class: "response-select__choices" }, le = ["aria-disabled", "onClick"], ce = { "aria-live": "polite" }, re = ["innerHTML"], de = /* @__PURE__ */ w({
   __name: "SelectConversation.ce",
   props: {
     titleLevel: { default: 2, type: Number },
@@ -25,7 +25,7 @@ const $ = {}, I = {}, N = {}, E = {}, q = {}, A = {
     responseChoices: { type: Array }
   },
   setup(s, { expose: v }) {
-    const d = g(s.responseChoices.map((t) => ({ ...t, selected: !1 }))), o = g(), r = u(() => F(s.incomingMessage.time)), m = u(() => r.value.day - B.Now.plainDateTimeISO().day);
+    const d = g(s.responseChoices.map((t) => ({ ...t, selected: !1 }))), o = g(), c = p(() => F(s.incomingMessage.time)), m = p(() => c.value.day - B.Now.plainDateTimeISO().day);
     function b(t) {
       t.selected || (t.selected = !0, o.value = t);
     }
@@ -36,13 +36,13 @@ const $ = {}, I = {}, N = {}, E = {}, q = {}, A = {
     }
     return v({
       reset: y
-    }), (t, ue) => (i(), n(p, null, [
+    }), (t, pe) => (i(), n(u, null, [
       e("div", G, [
         e("div", P, [
           e("p", X, a(s.incomingMessage.username), 1),
-          e("p", J, a(t.$t("select-conversation.incoming-message-sr", { username: s.incomingMessage.username, messageDay: m.value, messageTime: l(f)(r.value) })), 1),
+          e("p", J, a(t.$t("select-conversation.incoming-message-sr", { username: s.incomingMessage.username, messageDay: m.value, messageTime: l(f)(c.value) })), 1),
           e("p", K, a(s.incomingMessage.content), 1),
-          e("p", Q, a(t.$t("select-conversation.message-date", { messageDay: m.value, messageTime: l(f)(r.value) })), 1)
+          e("p", Q, a(t.$t("select-conversation.message-date", { messageDay: m.value, messageTime: l(f)(c.value) })), 1)
         ]),
         e("div", {
           class: z(["message message--outgoing", { "message--hidden": !o.value }]),
@@ -72,20 +72,20 @@ const $ = {}, I = {}, N = {}, E = {}, q = {}, A = {
           class: "title"
         }, a(t.$t("select-conversation.select-response-title", { username: s.username })), 9, ne),
         e("div", ie, [
-          (i(!0), n(p, null, M(d.value, (c, x) => (i(), n("button", {
+          (i(!0), n(u, null, M(d.value, (r, x) => (i(), n("button", {
             key: x,
             type: "button",
             class: "response-select__choice",
-            "aria-disabled": c.selected,
-            onClick: (pe) => b(c)
-          }, a(c.content), 9, le))), 128))
+            "aria-disabled": r.selected,
+            onClick: (ue) => b(r)
+          }, a(r.content), 9, le))), 128))
         ]),
-        e("div", re, [
+        e("div", ce, [
           o.value ? (i(), n("p", {
             key: 0,
             class: "response-select__feedback",
             innerHTML: o.value.feedback
-          }, null, 8, ce)) : T("", !0)
+          }, null, 8, re)) : T("", !0)
         ])
       ])
     ], 64));

package/dist/components/template-mail.ce.js.js

@@ -1,41 +1,12 @@
-import { b as v, a as _, u as b } from "../normalize-props-DtfVI0Xg.js";
-import { c as p, o as m, a as e, d as x, j as C, v as w, k as o, t as i, B as y, E as k, H as M, F as L, _ as j, f as T } from "../_plugin-vue_export-helper-BPDEgOal.js";
-import { u as H, i as r } from "../i18n-lite-DBVKHY8J.js";
-import { r as D, t as B } from "../temporal.utils-CotrC6ao.js";
-const S = {}, z = {}, E = {}, V = {}, N = {}, A = {
-  "template-mail": { send: "Répondre", forward: "Transférer", menu: "menu", toMe: "À moi", details: "Afficher les détails", previousHeader: "Le {{ date }} à {{time}}, {{ name }}" }
-}, Z = {}, q = {}, F = "data:image/svg+xml,%3csvg%20width='17'%20height='17'%20viewBox='0%200%2017%2017'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M2.125%204.25H14.875M2.125%208.5H14.875M2.125%2012.75H14.875'%20stroke='black'%20stroke-width='1.77083'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e", O = "data:image/svg+xml,%3csvg%20width='18'%20height='16'%20viewBox='0%200%2018%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0.75%206.28086H11.95C18.35%206.28086%2018.35%2014.9722%2011.95%2014.9722M0.75%206.28086L6.35%200.75M0.75%206.28086L6.35%2011.8117'%20stroke='%23122647'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e", P = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_2744_7877)'%3e%3cpath%20d='M8.57141%202.85714L5.14284%206.28571L8.57141%209.71429'%20stroke='%23122647'%20stroke-width='1.14286'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M15.4286%2013.1429V10.8571C15.4286%209.64472%2014.9469%208.48196%2014.0896%207.62465C13.2323%206.76735%2012.0696%206.28571%2010.8571%206.28571H5.14285M4%202.85714L0.571426%206.28571L4%209.71429'%20stroke='%23122647'%20stroke-width='1.14286'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_2744_7877'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e", R = "data:image/svg+xml,%3csvg%20width='8'%20height='4'%20viewBox='0%200%208%204'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%200L3.53%203.38803L7.06%200H0Z'%20fill='black'/%3e%3c/svg%3e", $ = {
-  width: "41",
-  height: "41",
-  viewBox: "0 0 41 41",
-  xmlns: "http://www.w3.org/2000/svg"
-}, G = ["fill"], I = {
-  __name: "UserSVG.ce",
-  props: {
-    color: {
-      type: String,
-      default: "#2F80ED"
-    }
-  },
-  setup(t) {
-    return (a, l) => (m(), p("svg", $, [
-      l[0] || (l[0] = e("path", {
-        d: "M9 33.5484C9.02496 31.6445 9.79268 29.8271 11.1371 28.4893C12.4815 27.1515 14.2944 26.4009 16.1837 26.3999H24.8163C26.7056 26.4009 28.5185 27.1515 29.8629 28.4893C31.2073 29.8271 31.975 31.6445 32 33.5484C28.8446 36.4141 24.7476 38 20.5 38C16.2524 38 12.1554 36.4141 9 33.5484ZM26.9744 15.525C26.9744 16.8155 26.5947 18.077 25.8833 19.1501C25.1719 20.2231 24.1607 21.0594 22.9776 21.5533C21.7946 22.0471 20.4928 22.1763 19.2369 21.9246C17.981 21.6728 16.8274 21.0514 15.9219 20.1388C15.0164 19.2263 14.3998 18.0637 14.15 16.7979C13.9002 15.5322 14.0284 14.2203 14.5184 13.028C15.0085 11.8357 15.8383 10.8166 16.903 10.0997C17.9677 9.38268 19.2195 9 20.5 9C22.2171 9 23.8639 9.68745 25.0781 10.9111C26.2923 12.1348 26.9744 13.7944 26.9744 15.525Z",
-        fill: "white"
-      }, null, -1)),
-      e("path", {
-        d: "M36.2655 33.5758C38.3699 31.0459 39.8335 28.0469 40.5326 24.8323C41.2316 21.6177 41.1455 18.2822 40.2815 15.1079C39.4175 11.9336 37.8011 9.0139 35.569 6.59581C33.3368 4.17772 30.5547 2.33238 27.4578 1.21587C24.3609 0.0993725 21.0405 -0.255438 17.7774 0.181459C14.5142 0.618355 11.4044 1.83411 8.71099 3.72586C6.01756 5.61762 3.81975 8.12973 2.30349 11.0497C0.787232 13.9696 -0.00287585 17.2115 7.86538e-06 20.5011C0.00111445 25.2832 1.6877 29.9122 4.7638 33.5758L4.7345 33.6007C4.83707 33.7237 4.9543 33.8291 5.0598 33.9506C5.19168 34.1014 5.33382 34.2435 5.47009 34.3899C5.88039 34.835 6.3024 35.2625 6.74493 35.6637C6.87974 35.7866 7.01895 35.9008 7.15522 36.018C7.62413 36.4221 8.10623 36.8057 8.6059 37.1629C8.67038 37.2068 8.72899 37.264 8.79347 37.3093V37.2918C12.2254 39.7049 16.3196 41 20.5161 41C24.7127 41 28.8068 39.7049 32.2388 37.2918V37.3093C32.3033 37.264 32.3604 37.2068 32.4263 37.1629C32.9246 36.8042 33.4081 36.4221 33.877 36.018C34.0133 35.9008 34.1525 35.7852 34.2873 35.6637C34.7298 35.261 35.1519 34.835 35.5622 34.3899C35.6984 34.2435 35.8391 34.1014 35.9725 33.9506C36.0765 33.8291 36.1952 33.7237 36.2978 33.5992L36.2655 33.5758ZM20.5147 8.78808C21.8188 8.78808 23.0937 9.1745 24.1781 9.89846C25.2625 10.6224 26.1076 11.6514 26.6067 12.8553C27.1058 14.0592 27.2364 15.384 26.982 16.662C26.7275 17.9401 26.0995 19.1141 25.1773 20.0355C24.2551 20.9569 23.0802 21.5844 21.8011 21.8387C20.522 22.0929 19.1961 21.9624 17.9912 21.4637C16.7864 20.9651 15.7565 20.1206 15.032 19.0371C14.3074 17.9536 13.9207 16.6798 13.9207 15.3767C13.9207 13.6293 14.6154 11.9534 15.852 10.7178C17.0886 9.48224 18.7658 8.78808 20.5147 8.78808ZM8.80226 33.5758C8.82768 31.6534 9.60958 29.8182 10.9788 28.4674C12.348 27.1165 14.1945 26.3586 16.1187 26.3576H24.9107C26.8349 26.3586 28.6813 27.1165 30.0505 28.4674C31.4197 29.8182 32.2016 31.6534 32.2271 33.5758C29.0134 36.4694 24.8407 38.0708 20.5147 38.0708C16.1886 38.0708 12.016 36.4694 8.80226 33.5758Z",
-        fill: t.color
-      }, null, 8, G)
-    ]));
-  }
-}, U = { class: "nav" }, X = { "aria-disabled": "true" }, J = ["src"], K = { class: "sr-only-mobile" }, Q = { "aria-disabled": "true" }, W = ["src"], Y = { class: "sr-only-mobile" }, ee = { "aria-disabled": "true" }, te = ["src"], oe = { class: "sr-only" }, ie = { class: "main" }, ae = { class: "header" }, se = ["aria-level"], ne = { class: "date" }, le = { class: "expeditor" }, re = ["aria-level"], de = { class: "expeditor-mail" }, ce = { class: "recipient" }, pe = ["aria-label"], me = ["src"], ue = ["innerHTML"], ge = {
-  key: 0,
-  class: "previous-message"
-}, he = { class: "previous-message__header" }, fe = ["innerHTML"], ve = /* @__PURE__ */ x({
+import { _ as r, a as m, b as _, c as p, d as c, e as u, f as d, g } from "../nl-Bonww6Q2.js";
+import { u as v, a as b, b as f } from "../normalize-props-DH0oPBss.js";
+import { b as j, g as s, f as M, o as x, d as y } from "../_plugin-vue_export-helper-D0N_62VD.js";
+import { i as t } from "../i18n-lite-t2jNOu0C.js";
+import { P as C } from "../PixMailMessage.ce-XPDbJiyC.js";
+const S = /* @__PURE__ */ j({
   __name: "TemplateMail.ce",
   props: {
-    titleLevel: { default: 2, type: Number },
+    titleLevel: { type: Number },
     subject: { type: String },
     mailAddress: { type: String },
     avatarColor: { type: String },
@@ -44,122 +15,49 @@ const S = {}, z = {}, E = {}, V = {}, N = {}, A = {
     content: { type: String },
     previousMail: { type: Object }
   },
-  setup(t) {
-    const { t: a } = H(), l = C("content");
-    w(() => {
-      l.value.querySelectorAll("a").forEach((s) => {
-        s.addEventListener("click", (c) => {
-          c.preventDefault();
-        });
-      });
-    });
-    function d(n, s) {
-      const c = D(n), f = B(c);
-      return new Intl.DateTimeFormat(r.language, s).format(f);
-    }
-    const g = d(t.time, {
-      weekday: "short",
-      day: "numeric",
-      month: "numeric",
-      year: "2-digit",
-      hour: "2-digit",
-      minute: "2-digit"
-    });
-    function h() {
-      const n = d(t.previousMail.time, {
-        weekday: "short",
-        day: "numeric",
-        month: "numeric",
-        year: "2-digit"
-      }), s = d(t.previousMail.time, {
-        hour: "2-digit",
-        minute: "2-digit"
-      });
-      return a("template-mail.previousHeader", { name: t.previousMail.name, time: s, date: n, interpolation: { escapeValue: !1 } });
-    }
-    return (n, s) => (m(), p(L, null, [
-      e("div", U, [
-        e("button", X, [
-          e("img", {
-            src: o(O),
-            alt: ""
-          }, null, 8, J),
-          e("span", K, i(o(a)("template-mail.send")), 1)
-        ]),
-        e("button", Q, [
-          e("img", {
-            class: "forward",
-            src: o(P),
-            alt: ""
-          }, null, 8, W),
-          e("span", Y, i(o(a)("template-mail.forward")), 1)
-        ]),
-        e("button", ee, [
-          e("img", {
-            src: o(F),
-            alt: ""
-          }, null, 8, te),
-          e("span", oe, i(o(a)("template-mail.menu")), 1)
-        ])
-      ]),
-      e("div", ie, [
-        e("div", ae, [
-          e("div", {
-            role: "heading",
-            "aria-level": t.titleLevel
-          }, i(t.subject), 9, se),
-          e("p", ne, i(o(g)), 1)
-        ]),
-        e("div", le, [
-          k(I, {
-            class: "avatar",
-            color: t.avatarColor
-          }, null, 8, ["color"]),
-          e("div", {
-            role: "heading",
-            "aria-level": t.titleLevel + 1
-          }, [
-            M(i(t.expeditor) + " ", 1),
-            e("span", de, " <" + i(t.mailAddress) + ">", 1)
-          ], 8, re),
-          e("div", ce, [
-            e("p", null, i(o(a)("template-mail.toMe")), 1),
-            e("button", {
-              "aria-disabled": "true",
-              "aria-label": o(a)("template-mail.details")
-            }, [
-              e("img", {
-                src: o(R),
-                alt: ""
-              }, null, 8, me)
-            ], 8, pe)
-          ])
-        ]),
-        e("p", {
-          ref: "content",
-          class: "content",
-          innerHTML: t.content
-        }, null, 8, ue),
-        t.previousMail ? (m(), p("div", ge, [
-          e("p", he, i(h()), 1),
-          e("blockquote", {
-            innerHTML: t.previousMail.content
-          }, null, 8, fe)
-        ])) : y("", !0)
-      ])
-    ], 64));
+  setup(a) {
+    const e = a, l = s(() => {
+      if (e.previousMail)
+        return {
+          sender: {
+            name: e.previousMail.name
+          },
+          time: e.previousMail.time,
+          body: e.previousMail.content
+        };
+    }), o = s(() => ({
+      subject: e.subject,
+      sender: {
+        name: e.expeditor,
+        address: e.mailAddress,
+        avatarColor: e.avatarColor
+      },
+      time: e.time,
+      body: e.content,
+      previousMail: l.value
+    })), n = {
+      reply: "disabled",
+      forward: "disabled",
+      menu: "disabled",
+      return: "hidden"
+    };
+    return (L, A) => (x(), M(C, {
+      "title-level": a.titleLevel,
+      mail: o.value,
+      actions: n
+    }, null, 8, ["title-level", "mail"]));
   }
-}), _e = "html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}button,p,div[role=heading]{font-family:Roboto,sans-serif;color:#253858}.nav{border-radius:8px 8px 0 0;padding:12px 16px;display:flex;gap:8px;background:#fff;border-right:1px solid #cdd1d9;border-top:1px solid #cdd1d9;border-left:1px solid #cdd1d9}.nav button{display:flex;gap:8px;align-items:center;cursor:not-allowed;padding:4px 16px;border:1px solid #cdd1d9;background:#fff;border-radius:8px;color:#122647;font-size:.875rem;font-weight:700}.nav button:last-child{margin-left:auto}.nav .forward{transform:scaleX(-1)}.main{border-radius:0 0 8px 8px;border-right:1px solid #cdd1d9;border-bottom:1px solid #cdd1d9;border-left:1px solid #cdd1d9;background:#f4f5f7;padding:24px 16px}.header{display:flex;justify-content:space-between}.header div[role]{font-family:open-sans,sans-serif;font-size:1.125rem}.header .date{color:#5e6c84;font-size:.75rem}.expeditor{display:grid;column-gap:4px;width:fit-content;margin:12px 0;grid-template-columns:repeat(2,auto);grid-template-rows:repeat(2,auto)}.expeditor div[role]{font-weight:700}.expeditor-mail,.expeditor .recipient p{align-self:end;font-size:.75rem;color:#5e6c84;font-weight:400;word-break:break-word}.expeditor .recipient{display:flex}.expeditor .recipient button{border:none;background:transparent;display:flex;align-items:center;cursor:not-allowed}.expeditor .avatar{grid-row:1/span 2;margin-right:12px}.content{color:#122647;font-size:.875rem}.previous-message{font-size:.875rem;margin-top:24px}.previous-message__header{font-style:italic;font-size:.875rem;color:#5e6c84;margin-bottom:8px}.previous-message blockquote{border-left:1px solid #cdd1d9;margin-left:8px;padding-left:8px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);border:0}@media screen and (max-width:576px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);border:0}.date{display:none}}", be = /* @__PURE__ */ j(ve, [["styles", [_e]]]);
-r.addTranslationsFromGlobResults(/* @__PURE__ */ Object.assign({ "./locales/de-AT.json": S, "./locales/en.json": z, "./locales/es-419.json": E, "./locales/es.json": V, "./locales/fr-BE.json": N, "./locales/fr.json": A, "./locales/it.json": Z, "./locales/nl.json": q }));
-const u = T(be, {
-  configureApp(t) {
-    r.changeLanguage(document?.documentElement?.lang || navigator.language), t.use(r);
+});
+t.addTranslationsFromGlobResults(/* @__PURE__ */ Object.assign({ "../pix-mail-message/locales/de-AT.json": g, "../pix-mail-message/locales/en.json": d, "../pix-mail-message/locales/es-419.json": u, "../pix-mail-message/locales/es.json": c, "../pix-mail-message/locales/fr-BE.json": p, "../pix-mail-message/locales/fr.json": _, "../pix-mail-message/locales/it.json": m, "../pix-mail-message/locales/nl.json": r }));
+const i = y(S, {
+  configureApp(a) {
+    t.changeLanguage(document?.documentElement?.lang || navigator.language), a.use(t);
   }
 });
-u.prototype.normalizeProps = (t) => ({
-  ...t,
-  titleLevel: b(t.titleLevel),
-  avatarColor: _(t.avatarColor),
-  previousMail: v(t.previousMail)
+i.prototype.normalizeProps = (a) => ({
+  ...a,
+  titleLevel: f(a.titleLevel),
+  avatarColor: b(a.avatarColor),
+  previousMail: v(a.previousMail)
 });
-window.customElements.define("template-mail", u);
+window.customElements.define("template-mail", i);