@1024pix/epreuves-components 4.1.0 → 4.3.0

package/dist/components/usages-donnees.ce.js.js

@@ -0,0 +1,183 @@
+import { _ as j, s as P, o as n, c as l, a as t, v, l as C, t as w, B as D, x as o, b as M, h as O, r as B, K as U, F as m, e as h, f as x, m as y, D as V, E as k, g as d, n as G, d as K } from "../_plugin-vue_export-helper-Dz58mCLm.js";
+import { u as Z, i as S } from "../i18n-lite-CzqISEWm.js";
+import { B as H } from "../Button.ce-Dvxeebpx.js";
+const J = {
+  "usages-donnees": { "instruction-step-1": "Parmi les éléments suivants, séléctionnez ceux qui correspondent à ce que vous avez sur votre appareil.", "instruction-step-2": "Parmi les éléments suivants, séléctionnez ceux qui correspondent à ce que vous faites en ligne.", "step-a11y": "Étape {{currentStep}} sur {{total}}", next: "Suivant", result: "Voir mon bilan", "locale-choice-title": "Ce que vous avez sur votre appareil", "cloud-choice-title": "Ce que vous faites en ligne", "last-step": { "title-1": "Données et usages avec plus de valeur", "title-2": "Données et usages avec moins de valeur", content: { "line-1": "Certaines données et certains usages ont beaucoup de valeur pour les pirates, d’autres ont moins de valeur.", "line-2": "Par exemple, en accédant à ces informations, les pirates peuvent : {{bold1}} à vos différents services en ligne ou vous demander {{bold2}} (une rançon) pour réparer les dégâts qu'ils ont causés.", "bold-1": "récupérer des données importantes, accéder", "bold-2": "de l'argent" } } }
+}, Q = "data:image/svg+xml,%3csvg%20width='11'%20height='8'%20viewBox='0%200%2011%208'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M3.61484%205.80617L9.19317%200.227833C9.34506%200.0759442%209.52317%200%209.7275%200C9.93184%200%2010.11%200.0759442%2010.262%200.227833C10.4139%200.379833%2010.4898%200.560111%2010.4898%200.768667C10.4898%200.977222%2010.4139%201.1575%2010.262%201.3095L4.14934%207.43483C3.99734%207.58672%203.81917%207.66267%203.61484%207.66267C3.41051%207.66267%203.23234%207.58672%203.08034%207.43483L0.221671%204.57617C0.0697825%204.42417%20-0.00405093%204.24389%200.000171293%204.03533C0.00439352%203.82678%200.0824491%203.6465%200.234338%203.4945C0.386338%203.34261%200.566616%203.26667%200.775171%203.26667C0.983727%203.26667%201.164%203.34261%201.316%203.4945L3.61484%205.80617Z'%20fill='%23212A37'/%3e%3c/svg%3e", W = "label[data-v-e33c94f6]{position:relative;display:flex;align-items:center;gap:6px;border-radius:8px}label[data-v-e33c94f6]:not(.readonly):hover{cursor:pointer}label .custom-input[data-v-e33c94f6]{display:flex;justify-content:center;align-items:center;min-width:16px;aspect-ratio:1;background-color:#fff;border:1px solid #000}label .custom-input img[data-v-e33c94f6]{width:10px}label input:focus~.custom-input[data-v-e33c94f6]{outline:2px solid black}.variant-a[data-v-e33c94f6]{background:#eaf1ff;padding:14px}.variant-a.is-checked[data-v-e33c94f6]{background:#2c75ff;color:#fff}.variant-b[data-v-e33c94f6],.variant-c[data-v-e33c94f6]{border-left:4px solid #c8cfd9;background:#f9f9f9;padding:8px 12px}.variant-b.is-checked[data-v-e33c94f6]{border-left:4px solid #ffdc76;background:#fffaeb}.variant-c.is-checked[data-v-e33c94f6]{border-left:4px solid #72a3ff;background:#eaf1ff}", X = ["for"], Y = ["id", "checked", "readonly"], ee = ["src"], te = {
+  __name: "CustomCheckbox.ce",
+  props: {
+    label: String,
+    isSelected: Boolean,
+    index: Number,
+    variant: {
+      type: String,
+      default: "a"
+    },
+    readonly: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["select"],
+  setup(a, { emit: b }) {
+    const c = P(), p = b;
+    function s(r) {
+      a.readonly || p("select", r.target.checked, a.index);
+    }
+    return (r, $) => (n(), l("label", {
+      for: v(c),
+      class: w({ "is-checked": a.isSelected, [`variant-${a.variant}`]: !0, readonly: a.readonly })
+    }, [
+      t("input", {
+        id: v(c),
+        checked: a.isSelected,
+        readonly: a.readonly,
+        type: "checkbox",
+        class: "sr-only",
+        onChange: s
+      }, null, 40, Y),
+      t("span", {
+        class: w(["custom-input", { "is-checked": a.isSelected }])
+      }, [
+        a.isSelected ? (n(), l("img", {
+          key: 0,
+          src: v(Q),
+          alt: ""
+        }, null, 8, ee)) : C("", !0)
+      ], 2),
+      D(" " + o(a.label), 1)
+    ], 10, X));
+  }
+}, _ = /* @__PURE__ */ j(te, [["styles", [W]], ["__scopeId", "data-v-e33c94f6"]]), ae = {
+  key: 0,
+  class: "instruction"
+}, se = { key: 1 }, ne = { class: "title" }, oe = { class: "stepper" }, le = { class: "sr-only" }, re = { "aria-hidden": "true" }, ce = { class: "checkbox-group" }, ie = {
+  key: 2,
+  class: "result"
+}, de = {
+  class: "legend",
+  style: { "--color": "#ffcb33" }
+}, ue = { class: "title" }, fe = { class: "checkbox-group" }, pe = {
+  class: "legend",
+  style: { "--color": "#2c75ff" }
+}, be = { class: "title" }, ge = { class: "checkbox-group" }, ve = {
+  key: 3,
+  class: "feedback"
+}, me = /* @__PURE__ */ M({
+  __name: "UsagesDonnees.ce",
+  props: {
+    localeChoices: { type: Array },
+    cloudChoices: { type: Array }
+  },
+  setup(a, { expose: b }) {
+    const { t: c } = Z(), p = O("wrapper"), s = B(1), r = B({
+      1: a.localeChoices.map((e) => ({ ...e, isSelected: !1 })),
+      2: a.cloudChoices.map((e) => ({ ...e, isSelected: !1 }))
+    }), $ = d(() => Object.values(r.value).flatMap((e) => e).filter((e) => e.hasValue).sort(z)), N = d(() => Object.values(r.value).flatMap((e) => e).filter((e) => !e.hasValue).sort(z)), q = d(() => s.value === 1 ? c("usages-donnees.locale-choice-title") : c("usages-donnees.cloud-choice-title")), R = d(() => s.value === 1 ? c("usages-donnees.next") : c("usages-donnees.result")), A = d(() => c(`usages-donnees.instruction-step-${s.value}`)), g = d(() => s.value === 3), L = d(() => !r.value[s.value]?.some(({ isSelected: e }) => e));
+    function z(e, u) {
+      return e.isSelected && u.isSelected ? 0 : e.isSelected ? -1 : u.isSelected ? 1 : 0;
+    }
+    function E() {
+      r.value = {
+        1: a.localeChoices.map((e) => ({ ...e, isSelected: !1 })),
+        2: a.cloudChoices.map((e) => ({ ...e, isSelected: !1 }))
+      }, s.value = 1;
+    }
+    function T(e, u) {
+      r.value[s.value][u].isSelected = e;
+    }
+    async function F() {
+      s.value++, await G(), p.value.focus();
+    }
+    return b({
+      reset: E
+    }), (e, u) => {
+      const I = U("i18n");
+      return n(), l("div", {
+        ref_key: "wrapper",
+        ref: p,
+        class: w(["wrapper", [`step-${s.value}`]]),
+        tabindex: "-1"
+      }, [
+        g.value ? C("", !0) : (n(), l("p", ae, o(A.value), 1)),
+        g.value ? (n(), l("form", ie, [
+          t("fieldset", null, [
+            t("legend", de, [
+              t("span", ue, o(e.$t("usages-donnees.last-step.title-1")), 1)
+            ]),
+            t("div", fe, [
+              (n(!0), l(m, null, h($.value, (i, f) => (n(), x(_, y({
+                key: i.label
+              }, { ref_for: !0 }, i, {
+                readonly: !0,
+                index: f,
+                variant: "b"
+              }), null, 16, ["index"]))), 128))
+            ])
+          ]),
+          t("fieldset", null, [
+            t("legend", pe, [
+              t("span", be, o(e.$t("usages-donnees.last-step.title-2")), 1)
+            ]),
+            t("div", ge, [
+              (n(!0), l(m, null, h(N.value, (i, f) => (n(), x(_, y({
+                key: i.label
+              }, { ref_for: !0 }, i, {
+                readonly: !0,
+                index: f,
+                variant: "c"
+              }), null, 16, ["index"]))), 128))
+            ])
+          ])
+        ])) : (n(), l("form", se, [
+          t("fieldset", null, [
+            t("legend", null, [
+              t("span", ne, o(q.value), 1),
+              t("span", oe, [
+                t("span", le, o(e.$t("usages-donnees.step-a11y", { currentStep: s.value, total: 2 })), 1),
+                t("span", re, o(s.value) + "/2", 1)
+              ])
+            ]),
+            t("div", ce, [
+              (n(!0), l(m, null, h(r.value[s.value], (i, f) => (n(), x(_, y({
+                key: i.label
+              }, { ref_for: !0 }, i, {
+                index: f,
+                onSelect: T
+              }), null, 16, ["index"]))), 128))
+            ])
+          ]),
+          V(H, {
+            class: "pix-button",
+            onClick: F,
+            "is-disabled": L.value
+          }, {
+            default: k(() => [
+              D(o(R.value), 1)
+            ]),
+            _: 1
+          }, 8, ["is-disabled"])
+        ])),
+        g.value ? (n(), l("p", ve, [
+          t("span", null, o(e.$t("usages-donnees.last-step.content.line-1")), 1),
+          V(I, { t: "usages-donnees.last-step.content.line-2" }, {
+            bold1: k(() => [
+              t("strong", null, o(e.$t("usages-donnees.last-step.content.bold-1")), 1)
+            ]),
+            bold2: k(() => [
+              t("strong", null, o(e.$t("usages-donnees.last-step.content.bold-2")), 1)
+            ]),
+            _: 1
+          })
+        ])) : C("", !0)
+      ], 2);
+    };
+  }
+}), he = "*{--text-blue: #122647;--background-blue: #253858;font-family:Nunito,Roboto,sans-serif;font-size:14px}h1,h2,h3,h4,h5,h6{color:var(--text-blue);font-family:Nunito,sans-serif}h2{color:var(--text-blue);font-size:20px}p,a,span,li{color:var(--text-blue);font-family:Roboto,sans-serif}button{border-radius:8px;background:var(--background-blue);font-weight:700;font-size:16px}button:disabled{background:#c8cfd9}input{border-radius:10px;border:#cdd1d9;background:#f4f5f7}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box;font-family:Nunito,Roboto,sans-serif;color:#122647}", xe = '.wrapper[data-v-aef3c1bd]{padding:0 24px 24px}.wrapper.step-3[data-v-aef3c1bd]{padding-top:24px}.instruction[data-v-aef3c1bd]{margin:0 0 24px}form[data-v-aef3c1bd]{padding:16px 24px;border-radius:16px;background-color:#fff;box-shadow:0 2px 5px #4a3aff40,0 -2px 5px #4a3aff26 inset,0 1px 1px #ffffff1a inset,0 3px 4px #dfeeff1a inset}fieldset[data-v-aef3c1bd]{border:none;padding:0}legend[data-v-aef3c1bd]{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}legend .title[data-v-aef3c1bd]{font-size:1.25rem;font-weight:800}legend .stepper[data-v-aef3c1bd]{display:flex;justify-content:center;align-items:center;align-self:center;border-radius:50%;background:#bde4ff;min-width:38px;aspect-ratio:1;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:700}.checkbox-group[data-v-aef3c1bd]{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px}.pix-button[data-v-aef3c1bd]{display:block;margin:0 auto}.result fieldset[data-v-aef3c1bd]:first-child{margin-bottom:24px}.result .legend[data-v-aef3c1bd]{justify-content:start;gap:8px}.result .legend[data-v-aef3c1bd]:before{content:"";position:relative;top:2px;background-color:var(--color);border-radius:50%;min-width:12px;aspect-ratio:1;align-self:center}.result .checkbox-group[data-v-aef3c1bd]{grid-template-columns:repeat(4,1fr)}.feedback[data-v-aef3c1bd]{border-radius:8px;background:#eaf1ff;padding:8px;margin:16px 0 0}.feedback[data-v-aef3c1bd],.feedback span[data-v-aef3c1bd]{font-family:Roboto,sans-serif;font-size:.75rem;line-height:1.125rem}.feedback span[data-v-aef3c1bd]{display:block;margin-bottom:.4rem}@media screen and (max-width:874px){.result .checkbox-group[data-v-aef3c1bd]{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width:576px){.checkbox-group[data-v-aef3c1bd]{grid-template-columns:1fr;gap:8px}.result .checkbox-group[data-v-aef3c1bd]{grid-template-columns:1fr}}', ye = /* @__PURE__ */ j(me, [["styles", [he, xe]], ["__scopeId", "data-v-aef3c1bd"]]);
+S.addTranslationsFromGlobResults(/* @__PURE__ */ Object.assign({ "./locales/fr.json": J }));
+const ke = K(ye, {
+  configureApp(a) {
+    S.changeLanguage(document?.documentElement?.lang || navigator.language), a.use(S);
+  }
+});
+window.customElements.define("usages-donnees", ke);

package/dist/{i18n-CsT7k7zW.js → i18n-H4HokXDX.js}

@@ -1,4 +1,4 @@
-import { n as Re, b as Ce, A as Pe, i as $e } from "./_plugin-vue_export-helper-B-lVMTio.js";
+import { n as Re, b as Ce, A as Pe, i as $e } from "./_plugin-vue_export-helper-Dz58mCLm.js";
 const d = (a) => typeof a == "string", K = () => {
   let a, e;
   const t = new Promise((i, s) => {

package/dist/{i18n-lite-BIJ2LVs6.js → i18n-lite-CzqISEWm.js}

@@ -1,4 +1,4 @@
-import { b as f, i as g } from "./_plugin-vue_export-helper-B-lVMTio.js";
+import { b as f, i as g } from "./_plugin-vue_export-helper-Dz58mCLm.js";
 const c = /* @__PURE__ */ Symbol("i18n-lite"), o = /* @__PURE__ */ Symbol("isPluralized"), a = /\{\{\s*(\w+)\s*}}/g;
 class l {
   static #s = "fr";

package/dist/{image-quiz.ce-BK6-8YF1.js → image-quiz.ce-C-iI27gD.js}

@@ -1,6 +1,6 @@
-import { b as j, s as P, o, c as m, N as x, y as v, v as s, t as z, a as b, m as F, x as C, r as k, _ as q, w as Q, h as D, l as M, F as H, e as K, f as R, g as c, d as N } from "./_plugin-vue_export-helper-B-lVMTio.js";
+import { b as P, s as k, o, c as m, N as x, y, v as s, t as z, a as v, m as F, x as C, r as q, _ as B, w as Q, h as D, l as M, F as H, e as K, f as R, g as c, d as N } from "./_plugin-vue_export-helper-Dz58mCLm.js";
 import { s as G } from "./shuffled-B8VGTceh.js";
-import { u as Z, i as g } from "./i18n-lite-BIJ2LVs6.js";
+import { u as Z, i as g } from "./i18n-lite-CzqISEWm.js";
 import { a as w, u as J, b as U } from "./normalize-props-DH0oPBss.js";
 const W = {}, X = {
   "image-quiz": { multipleInstruction: "Select several answers.", multipleValidity: "To validate, select at least two answers. Otherwise, skip.", validity: "To validate, select an answer. Otherwise, skip." }
@@ -8,13 +8,13 @@ const W = {}, X = {
   "image-quiz": { multipleInstruction: "Seleccione varias respuestas.", multipleValidity: "Para validar, seleccione al menos dos respuestas. Si no es así, sáltese.", validity: "Para confirmar, seleccione una respuesta. De lo contrario, salte." }
 }, ee = {
   "image-quiz": { multipleInstruction: "Seleccione varias respuestas.", multipleValidity: "Para validar, seleccione al menos dos respuestas. Si no es así, sáltese.", validity: "Para confirmar, seleccione una respuesta. De lo contrario, salte." }
-}, ie = {}, te = {
+}, ie = {}, ae = {
   "image-quiz": { multipleInstruction: "Sélectionnez plusieurs réponses.", multipleValidity: "Pour valider, sélectionnez au moins deux réponses. Sinon, passez.", validity: "Pour valider, sélectionnez une réponse. Sinon, passez." }
-}, ae = {
+}, te = {
   "image-quiz": { multipleInstruction: "Selezionare diverse risposte.", multipleValidity: "Per convalidare, selezionare almeno due risposte. In caso contrario, saltare.", validity: "Per confermare, selezionare una risposta. Altrimenti, saltare." }
 }, ne = {
   "image-quiz": { multipleInstruction: "Selecteer meerdere antwoorden.", multipleValidity: "Selecteer ten minste twee antwoorden om te bevestigen. Zo niet, sla dan over.", validity: "Selecteer een antwoord om te bevestigen. Sla anders over." }
-}, oe = ["aria-labelledby", "aria-selected", "tabindex"], se = { key: 0 }, le = ["id"], re = ["id"], ce = /* @__PURE__ */ j({
+}, oe = ["aria-labelledby", "aria-selected", "readonly", "aria-readonly", "tabindex"], se = { key: 0 }, le = ["id"], re = ["id"], ce = /* @__PURE__ */ P({
   __name: "ImageOption.ce",
   props: {
     choice: { type: Object },
@@ -22,37 +22,40 @@ const W = {}, X = {
     imageClass: { type: String },
     nameClass: { type: String },
     selected: { type: Boolean },
-    tabFocusable: { type: Boolean }
+    tabFocusable: { type: Boolean },
+    readonly: { type: Boolean }
   },
   emits: ["toggle", "next", "previous"],
   setup(e, { expose: n }) {
-    const y = e, p = k();
+    const b = e, p = q();
     function f() {
       p.value.focus();
     }
     n({ focus: f });
-    const u = P();
-    return (a, t) => (o(), m("div", {
+    const u = k();
+    return (t, a) => (o(), m("div", {
       ref_key: "el",
       ref: p,
       role: "option",
-      class: z(["image-option", `image-option--max${y.maxChoicesPerLine}`]),
+      class: z(["image-option", `image-option--max${b.maxChoicesPerLine}`]),
       "aria-labelledby": s(u),
       "aria-selected": e.selected,
+      readonly: e.readonly,
+      "aria-readonly": e.readonly,
       tabindex: e.tabFocusable ? 0 : -1,
-      onClick: t[0] || (t[0] = v((l) => a.$emit("toggle"), ["stop"])),
+      onClick: a[0] || (a[0] = y((l) => t.$emit("toggle"), ["stop"])),
       onKeydown: [
-        t[1] || (t[1] = x(v((l) => a.$emit("toggle"), ["stop", "prevent"]), ["space"])),
-        t[2] || (t[2] = x(v((l) => a.$emit("previous"), ["stop", "prevent"]), ["up", "left"])),
-        t[3] || (t[3] = x(v((l) => a.$emit("next"), ["stop", "prevent"]), ["down", "right"]))
+        a[1] || (a[1] = x(y((l) => t.$emit("toggle"), ["stop", "prevent"]), ["space"])),
+        a[2] || (a[2] = x(y((l) => t.$emit("previous"), ["stop", "prevent"]), ["up", "left"])),
+        a[3] || (a[3] = x(y((l) => t.$emit("next"), ["stop", "prevent"]), ["down", "right"]))
       ]
     }, [
       e.choice.image ? (o(), m("figure", se, [
-        b("img", F(e.choice.image, {
+        v("img", F(e.choice.image, {
           class: e.imageClass,
           alt: ""
         }), null, 16),
-        b("figcaption", {
+        v("figcaption", {
           class: z(e.nameClass),
           id: s(u)
         }, C(e.choice.name), 11, le)
@@ -62,7 +65,7 @@ const W = {}, X = {
       }, C(e.choice.name), 9, re))
     ], 42, oe));
   }
-}), me = '.image-option{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;margin:.5rem;border:solid 2px #c1c7d0;border-radius:10px;background:#fff;width:calc(20% - 2em);min-width:150px;padding:1rem}.image-option--max4{width:calc(25% - 2em);min-width:175px}.image-option--max3{width:calc(33% - 2em)}.image-option--max2{width:calc(50% - 2em);min-width:300px}.image-option--max1{width:calc(100% - 4em);min-width:300px}.image-option:hover{cursor:pointer;box-shadow:0 3px 10px #0000001a;transform:scale(1.04);transition:transform ease-in .1s}.image-option:focus{outline:none;box-shadow:5px 5px #ffbe00,-5px 5px #ffbe00,5px -5px #ffbe00,-5px -5px #ffbe00}.image-option[aria-selected=true]{border-color:#3d68ff}.image-option[aria-selected=true]:after{content:"";position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);background:#3d68ff4d;border-radius:10px;z-index:3}.image-option figure{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;margin:0;text-align:center;width:100%}.image-option figure img{max-width:100%;height:auto}.image-option figure img.icon{max-height:100px;width:auto}.image-option figure img.medium{max-width:50%;height:auto}.image-option figure figcaption{margin:1ex}', ue = /* @__PURE__ */ q(ce, [["styles", [me]]]), de = { class: "image-quiz-container" }, ge = ["id", "innerHTML"], pe = ["id"], fe = ["aria-multiselectable", "aria-labelledby", "aria-describedby"], he = /* @__PURE__ */ j({
+}), me = '.image-option{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;margin:.5rem;border:solid 2px #c1c7d0;border-radius:10px;background:#fff;width:calc(20% - 2em);min-width:150px;padding:1rem}.image-option--max4{width:calc(25% - 2em);min-width:175px}.image-option--max3{width:calc(33% - 2em)}.image-option--max2{width:calc(50% - 2em);min-width:300px}.image-option--max1{width:calc(100% - 4em);min-width:300px}.image-option:hover{cursor:pointer;box-shadow:0 3px 10px #0000001a;transform:scale(1.04);transition:transform ease-in .1s}.image-option:focus{outline:none;box-shadow:5px 5px #ffbe00,-5px 5px #ffbe00,5px -5px #ffbe00,-5px -5px #ffbe00}.image-option[aria-selected=true]{border-color:#3d68ff}.image-option[aria-selected=true]:after{content:"";position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);background:#3d68ff4d;border-radius:10px;z-index:3}.image-option figure{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;margin:0;text-align:center;width:100%}.image-option figure img{max-width:100%;height:auto}.image-option figure img.icon{max-height:100px;width:auto}.image-option figure img.medium{max-width:50%;height:auto}.image-option figure figcaption{margin:1ex}', ue = /* @__PURE__ */ B(ce, [["styles", [me]]]), de = { class: "image-quiz-container" }, ge = ["id", "innerHTML"], pe = ["id"], fe = ["aria-multiselectable", "aria-labelledby", "aria-describedby"], he = /* @__PURE__ */ P({
   __name: "ImageQuiz.ce",
   props: {
     multiple: { type: Boolean, default: !1 },
@@ -73,37 +76,38 @@ const W = {}, X = {
     orderChoices: { type: Boolean },
     imageChoicesSize: { default: "icon", type: String },
     showName: { type: Boolean, default: !1 },
-    context: { type: String }
+    context: { type: String },
+    readonly: { type: Boolean, default: !1 }
   },
   emits: ["answer"],
   setup(e, { emit: n }) {
-    const y = n, p = c(() => e.hideChoicesName ? "sr-only" : ""), f = c(() => e.orderChoices ? e.choices : G(e.choices)), u = c(() => e.multiple && e.context !== "pix-junior"), a = k(new Array(e.choices.length).fill(!1)), t = c(() => f.value.filter((i, d) => a.value[d])), { t: l } = Z(), E = c(() => {
+    const b = n, p = c(() => e.hideChoicesName ? "sr-only" : ""), f = c(() => e.orderChoices ? e.choices : G(e.choices)), u = c(() => e.multiple && e.context !== "pix-junior"), t = q(new Array(e.choices.length).fill(!1)), a = c(() => f.value.filter((i, d) => t.value[d])), { t: l } = Z(), E = c(() => {
       if (e.multiple)
-        return t.value.length < 2 ? { answer: "", validity: l("image-quiz.multipleValidity") } : {
-          answer: t.value.map((d) => d.response ?? d.name).sort().join(","),
+        return a.value.length < 2 ? { answer: "", validity: l("image-quiz.multipleValidity") } : {
+          answer: a.value.map((d) => d.response ?? d.name).sort().join(","),
           validity: ""
         };
-      const i = t.value[0];
+      const i = a.value[0];
       return i ? {
         answer: i?.response ?? i?.name ?? "",
         validity: ""
       } : { answer: "", validity: l("image-quiz.validity") };
-    }), h = P();
+    }), h = k();
     Q(() => {
-      y("answer", E.value);
+      b("answer", E.value);
     });
     const O = c(() => {
-      const i = a.value.indexOf(!0);
+      const i = t.value.indexOf(!0);
       return i === -1 ? 0 : i;
     }), S = D("options");
     function $(i) {
-      e.multiple || a.value.fill(!1), a.value[i] = !a.value[i];
+      e.readonly || (e.multiple || t.value.fill(!1), t.value[i] = !t.value[i]);
     }
     function I(i) {
       i = (i + e.choices.length) % e.choices.length, e.multiple || $(i), S.value[i].focus();
     }
     return (i, d) => (o(), m("div", de, [
-      b("label", {
+      v("label", {
         id: s(h),
         class: z(["image-quiz-label", { "sr-only": !e.showName }]),
         innerHTML: e.name
@@ -113,7 +117,7 @@ const W = {}, X = {
         class: "image-quiz-multiple-instruction",
         id: `${s(h)}-instruction`
       }, C(i.$t("image-quiz.multipleInstruction")), 9, pe)) : M("", !0),
-      b("div", {
+      v("div", {
         role: "listbox",
         class: "image-quiz",
         "aria-multiselectable": e.multiple,
@@ -130,18 +134,19 @@ const W = {}, X = {
           key: r,
           "name-class": p.value,
           "image-class": e.imageChoicesSize,
-          selected: a.value[r],
+          selected: t.value[r],
+          readonly: e.readonly,
           "tab-focusable": r === O.value,
-          onToggle: (_) => $(r),
-          onNext: (_) => I(r + 1),
-          onPrevious: (_) => I(r - 1)
-        }, null, 8, ["choice", "max-choices-per-line", "name-class", "image-class", "selected", "tab-focusable", "onToggle", "onNext", "onPrevious"]))), 128))
+          onToggle: (j) => $(r),
+          onNext: (j) => I(r + 1),
+          onPrevious: (j) => I(r - 1)
+        }, null, 8, ["choice", "max-choices-per-line", "name-class", "image-class", "selected", "readonly", "tab-focusable", "onToggle", "onNext", "onPrevious"]))), 128))
       ], 8, fe)
     ]));
   }
-}), ve = "*{box-sizing:border-box}.image-quiz-label{font-size:1.25rem;margin:1rem 0;display:inline-block}.image-quiz-multiple-instruction{font-size:14px;margin:0 16px 5px}.image-quiz-container{padding:10px 0}.image-quiz{display:flex;flex-wrap:wrap;justify-content:space-around}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);border:0}", B = /* @__PURE__ */ q(he, [["styles", [ve]]]);
-g.addTranslationsFromGlobResults(/* @__PURE__ */ Object.assign({ "./locales/de-AT.json": W, "./locales/en.json": X, "./locales/es-419.json": Y, "./locales/es.json": ee, "./locales/fr-BE.json": ie, "./locales/fr.json": te, "./locales/it.json": ae, "./locales/nl.json": ne }));
-function L(e) {
+}), ye = "*{box-sizing:border-box}.image-quiz-label{font-size:1.25rem;margin:1rem 0;display:inline-block}.image-quiz-multiple-instruction{font-size:14px;margin:0 16px 5px}.image-quiz-container{padding:10px 0}.image-quiz{display:flex;flex-wrap:wrap;justify-content:space-around}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);border:0}", L = /* @__PURE__ */ B(he, [["styles", [ye]]]);
+g.addTranslationsFromGlobResults(/* @__PURE__ */ Object.assign({ "./locales/de-AT.json": W, "./locales/en.json": X, "./locales/es-419.json": Y, "./locales/es.json": ee, "./locales/fr-BE.json": ie, "./locales/fr.json": ae, "./locales/it.json": te, "./locales/nl.json": ne }));
+function _(e) {
   return {
     ...e,
     maxChoicesPerLine: U(e.maxChoicesPerLine),
@@ -154,29 +159,29 @@ function L(e) {
     }))
   };
 }
-const T = N(B, {
+const T = N(L, {
   configureApp(e) {
     g.changeLanguage(document?.documentElement?.lang || navigator.language), e.use(g);
   }
 });
-T.prototype.normalizeProps = L;
+T.prototype.normalizeProps = _;
 window.customElements.define("image-quiz", T);
-const V = N(B, {
+const V = N(L, {
   configureApp(e) {
     g.changeLanguage(document?.documentElement?.lang || navigator.language), e.use(g);
   }
 });
-V.prototype.normalizeProps = L;
+V.prototype.normalizeProps = _;
 window.customElements.define("qcu-image", V);
 export {
-  B as I,
+  L as I,
   ne as _,
-  ae as a,
-  te as b,
+  te as a,
+  ae as b,
   ie as c,
   ee as d,
   Y as e,
   X as f,
   W as g,
-  L as n
+  _ as n
 };

package/dist/{index-BaI3Qosp.js → index-BUPiE5WR.js}

@@ -1,4 +1,4 @@
-import { i as o } from "./i18n-lite-BIJ2LVs6.js";
+import { i as o } from "./i18n-lite-CzqISEWm.js";
 const s = {}, _ = {}, t = {}, e = {}, l = {}, n = { step: "Étape {{step}} sur {{stepsCount}}" }, c = {
   stepper: n
 }, a = {}, i = {};

package/dist/index.js

@@ -4,7 +4,7 @@ import "./components/capacity-calculation.ce.js.js";
 import "./components/clickable-image.ce.js.js";
 import "./components/complete-phrase.ce.js.js";
 import "./components/flip-cards.ce.js.js";
-import "./image-quiz.ce-BK6-8YF1.js";
+import "./image-quiz.ce-C-iI27gD.js";
 import "./components/image-quizzes.ce.js.js";
 import "./components/message-conversation.ce.js.js";
 import "./components/mdp-classement.ce.js.js";
@@ -26,3 +26,4 @@ import "./components/select-conversation.ce.js.js";
 import "./components/template-mail.ce.js.js";
 import "./components/test-top-mdp.ce.js.js";
 import "./components/trouver-mdp-rs.ce.js.js";
+import "./components/usages-donnees.ce.js.js";

package/dist/metadata.js

@@ -15,10 +15,10 @@ const e = "usable", c = {
   accessibility: y,
   isInteractive: v,
   mobileUsability: $
-}, p = "accessible", I = !0, U = "not-recommended", g = {
+}, p = "accessible", I = !0, g = "not-recommended", U = {
   accessibility: p,
   isInteractive: I,
-  mobileUsability: U
+  mobileUsability: g
 }, d = "accessible", j = !0, h = "usable", f = {
   accessibility: d,
   isInteractive: j,
@@ -71,9 +71,9 @@ const e = "usable", c = {
   accessibility: $i,
   isInteractive: ui,
   mobileUsability: pi
-}, Ui = "accessible", gi = !1, di = "usable", ji = {
-  accessibility: Ui,
-  isInteractive: gi,
+}, gi = "accessible", Ui = !1, di = "usable", ji = {
+  accessibility: gi,
+  isInteractive: Ui,
   mobileUsability: di
 }, hi = "accessible", fi = !0, xi = "usable", qi = {
   accessibility: hi,
@@ -111,10 +111,14 @@ const e = "usable", c = {
   accessibility: ss,
   isInteractive: ts,
   mobileUsability: es
-}, as = /* @__PURE__ */ Object.assign({ "./analyse-mails-phishing/analyse-mails-phishing.metadata.json": c, "./calcul-impact/calcul-impact.metadata.json": b, "./capacity-calculation/capacity-calculation.metadata.json": r, "./clickable-image/clickable-image.metadata.json": u, "./complete-phrase/complete-phrase.metadata.json": g, "./flip-cards/flip-cards.metadata.json": f, "./image-quiz/image-quiz.metadata.json": z, "./image-quiz/image-quizzes.metadata.json": A, "./mdp-classement/mdp-classement.metadata.json": F, "./message-conversation/message-conversation.metadata.json": K, "./phishing-message/phishing-message.metadata.json": P, "./phishing-notification/phishing-notification.metadata.json": T, "./pix-anonymisation/pix-anonymisation.metadata.json": Y, "./pix-article/pix-article.metadata.json": ti, "./pix-carousel/pix-carousel.metadata.json": li, "./pix-combinaisons/pix-combinaisons.metadata.json": mi, "./pix-cursor/pix-cursor.metadata.json": vi, "./pix-llm/llm-compare-messages.metadata.json": Ii, "./pix-llm/llm-messages.metadata.json": ji, "./pix-llm/llm-prompt-select.metadata.json": qi, "./pix-mail-message/pix-mail-message.metadata.json": Ei, "./proteger-mail-spam/proteger-mail-spam.metadata.json": Ci, "./qcm-deepfake/qcm-deepfake.metadata.json": Hi, "./quiz-stepper/quiz-stepper.metadata.json": Mi, "./select-conversation/select-conversation.metadata.json": Ri, "./template-mail/template-mail.metadata.json": Wi, "./test-top-mdp/test-top-mdp.metadata.json": is, "./trouver-mdp-rs/trouver-mdp-rs.metadata.json": cs }), ls = Object.fromEntries(Object.entries(as).map(([i, s]) => [
+}, as = "accessible", ls = !0, os = "usable", bs = {
+  accessibility: as,
+  isInteractive: ls,
+  mobileUsability: os
+}, ns = /* @__PURE__ */ Object.assign({ "./analyse-mails-phishing/analyse-mails-phishing.metadata.json": c, "./calcul-impact/calcul-impact.metadata.json": b, "./capacity-calculation/capacity-calculation.metadata.json": r, "./clickable-image/clickable-image.metadata.json": u, "./complete-phrase/complete-phrase.metadata.json": U, "./flip-cards/flip-cards.metadata.json": f, "./image-quiz/image-quiz.metadata.json": z, "./image-quiz/image-quizzes.metadata.json": A, "./mdp-classement/mdp-classement.metadata.json": F, "./message-conversation/message-conversation.metadata.json": K, "./phishing-message/phishing-message.metadata.json": P, "./phishing-notification/phishing-notification.metadata.json": T, "./pix-anonymisation/pix-anonymisation.metadata.json": Y, "./pix-article/pix-article.metadata.json": ti, "./pix-carousel/pix-carousel.metadata.json": li, "./pix-combinaisons/pix-combinaisons.metadata.json": mi, "./pix-cursor/pix-cursor.metadata.json": vi, "./pix-llm/llm-compare-messages.metadata.json": Ii, "./pix-llm/llm-messages.metadata.json": ji, "./pix-llm/llm-prompt-select.metadata.json": qi, "./pix-mail-message/pix-mail-message.metadata.json": Ei, "./proteger-mail-spam/proteger-mail-spam.metadata.json": Ci, "./qcm-deepfake/qcm-deepfake.metadata.json": Hi, "./quiz-stepper/quiz-stepper.metadata.json": Mi, "./select-conversation/select-conversation.metadata.json": Ri, "./template-mail/template-mail.metadata.json": Wi, "./test-top-mdp/test-top-mdp.metadata.json": is, "./trouver-mdp-rs/trouver-mdp-rs.metadata.json": cs, "./usages-donnees/usages-donnees.metadata.json": bs }), ms = Object.fromEntries(Object.entries(ns).map(([i, s]) => [
   i.replace(/^.*\/([^/]+)\.metadata\.json$/, "$1"),
   s
 ]));
 export {
-  ls as metadata
+  ms as metadata
 };

package/dist/nl-euPrf5s3.js

@@ -0,0 +1,21 @@
+const e = {
+  "pix-mail-message": { actions: { blockSender: "Absender blockieren", delete: "Löschen", forward: "Transfer", markAsUnread: "Als ungelesen markieren", menu: "Menü", reply: "Antworten", reportSpam: "Als unerwünscht melden", return: "zurück" }, details: "Details anzeigen", previousHeader: "Die {{ date }} unter {{time}}, {{ name }}", toMe: "An mich" }
+}, r = {
+  "pix-mail-message": { actions: { blockSender: "Block sender", delete: "Delete", forward: "Forward", markAsUnread: "Mark as unread", menu: "Menu", reply: "Reply", reportSpam: "Report as unwanted", return: "back" }, details: "View details", previousHeader: "Visit {{ date }} at {{time}}, {{ name }}", toMe: "To me" }
+}, a = {}, n = {
+  "pix-mail-message": { actions: { blockSender: "Bloquear al remitente", delete: "Eliminar", forward: "Reenviar", markAsUnread: "Marcar como no leído", menu: "menú", reply: "Responder", reportSpam: "Informar como indeseable", return: "volver" }, details: "Mostrar detalles", previousHeader: "Visite {{ date }} en {{time}}, {{ name }}", toMe: "A mí" }
+}, t = {}, o = {
+  "pix-mail-message": { actions: { reply: "Répondre", forward: "Transférer", menu: "menu", delete: "Supprimer", blockSender: "Bloquer l’expéditeur", markAsUnread: "Marquer comme non lu", reportSpam: "Signaler comme indésirable", return: "Retour" }, toMe: "À moi", details: "Afficher les détails", previousHeader: "Le {{ date }} à {{time}}, {{ name }}" }
+}, i = {
+  "pix-mail-message": { actions: { blockSender: "Bloccare il mittente", delete: "Cancellare", forward: "Trasferimenti", markAsUnread: "Segna come non letto", menu: "menu", reply: "Rispondi a", reportSpam: "Segnalazione come indesiderabile", return: "ritorna" }, details: "Mostra i dettagli", previousHeader: "Visitate {{ date }} su {{time}}, {{ name }}", toMe: "Per me" }
+}, s = {};
+export {
+  s as _,
+  i as a,
+  o as b,
+  t as c,
+  n as d,
+  a as e,
+  r as f,
+  e as g
+};