ablok-components 0.3.86 → 0.3.87

package/dist/components/molecules/base-camera/base-camera.vue.js

@@ -1,29 +1,29 @@
-import { defineComponent as at, ref as u, computed as h, watch as Ie, onMounted as it, nextTick as nt, onBeforeUnmount as ot, openBlock as y, createElementBlock as b, normalizeClass as ve, createElementVNode as w, createVNode as ae, withCtx as lt, createCommentVNode as z, withDirectives as xe, normalizeStyle as he, vShow as Re, toDisplayString as me, withModifiers as rt } from "vue";
-import { debounce as st } from "lodash";
-import ut from "../../atoms/loading-spinner/loading-spinner.vue.js";
+import { defineComponent as at, ref as u, computed as h, watch as Ie, onMounted as it, nextTick as nt, onBeforeUnmount as ot, openBlock as y, createElementBlock as b, normalizeClass as de, createElementVNode as p, createVNode as ve, withCtx as lt, createCommentVNode as R, withDirectives as xe, normalizeStyle as he, vShow as Re, toDisplayString as me, createBlock as rt, withModifiers as st } from "vue";
+import { debounce as ut } from "lodash";
+import ct from "../../atoms/loading-spinner/loading-spinner.vue.js";
 /* empty css                                               */
-import ct from "../../atoms/svg-icon/svg-icon.vue.js";
+import dt from "../../atoms/svg-icon/svg-icon.vue.js";
 /* empty css                                 */
-import dt from "../input-dropdown/input-dropdown.vue.js";
+import vt from "../input-dropdown/input-dropdown.vue.js";
 /* empty css                                    */
-import { dataURItoBlob as vt } from "../../../utilities/helpers.js";
-import { useCameraFilter as ht } from "../../../composables/useCameraFilter.js";
-import mt from "../../atoms/zoom-slider/zoom-slider.vue.js";
+import { dataURItoBlob as ht } from "../../../utilities/helpers.js";
+import { useCameraFilter as mt } from "../../../composables/useCameraFilter.js";
+import ft from "../../atoms/zoom-slider/zoom-slider.vue.js";
 /* empty css                                       */
-import ft from "../../../assets/img/guide.png.js";
-const gt = { class: "camera__preview" }, wt = {
+import gt from "../../../assets/img/guide.png.js";
+const wt = { class: "camera__preview" }, pt = {
   key: 0,
   class: "camera__bg-notification"
-}, pt = ["innerHTML"], yt = ["width", "height"], bt = {
+}, yt = ["innerHTML"], bt = ["width", "height"], _t = {
   key: 1,
   class: "camera__countdown-overlay"
-}, _t = ["innerHTML", "data-countdown"], Et = ["src"], Ct = {
+}, Et = ["innerHTML", "data-countdown"], Ct = ["src"], St = {
   key: 3,
   class: "camera__zoom-slider"
-}, St = { class: "camera__controls" }, kt = { class: "container" }, Dt = { class: "row" }, Mt = { class: "col" }, It = { class: "btn-group" }, xt = { key: 0 }, Rt = { key: 1 }, Ot = {
+}, kt = { class: "camera__controls" }, Dt = { class: "container" }, Mt = { class: "row" }, It = { class: "col" }, xt = { class: "btn-group" }, Rt = { key: 0 }, Ot = { key: 1 }, Lt = {
   key: 0,
   class: "camera__select-device"
-}, Lt = { class: "col" }, Tt = { class: "" }, At = {
+}, Tt = { class: "col" }, At = { class: "" }, zt = {
   name: "BaseCamera",
   inheritAttrs: !1
 }, Oe = {
@@ -36,8 +36,8 @@ const gt = { class: "camera__preview" }, wt = {
   "5x4": { width: 1200, height: 960 },
   "16x9": { width: 1280, height: 720 },
   "9x16": { width: 720, height: 1280 }
-}, Kt = /* @__PURE__ */ at({
-  ...At,
+}, Xt = /* @__PURE__ */ at({
+  ...zt,
   props: {
     modelValue: {
       type: null
@@ -60,7 +60,7 @@ const gt = { class: "camera__preview" }, wt = {
     },
     guideSrc: {
       type: String,
-      default: () => ft
+      default: () => gt
     },
     countdown: {
       type: Number,
@@ -73,7 +73,7 @@ const gt = { class: "camera__preview" }, wt = {
     filter: {
       type: String,
       default: "none",
-      validator: (p) => ["none", "grayscale", "sepia"].includes(p)
+      validator: (m) => ["none", "grayscale", "sepia"].includes(m)
     },
     tintColor: {
       type: String,
@@ -113,34 +113,34 @@ const gt = { class: "camera__preview" }, wt = {
     }
   },
   emits: ["update:modelValue"],
-  setup(p, { expose: Le, emit: Te }) {
-    const r = p, Ae = Te, n = u(), o = u(), fe = u(!1), W = u([]), c = u(), R = u(), j = u(), O = u(!1), K = u(!1), X = u(0), J = u(0), k = u(), d = u(r.zoom || 1), ge = u(!1), V = u(!1), ie = u(null), ne = u(!1);
+  setup(m, { expose: Le, emit: Te }) {
+    const r = m, Ae = Te, n = u(), o = u(), fe = u(!1), W = u([]), c = u(), O = u(), j = u(), L = u(!1), K = u(!1), X = u(0), J = u(0), k = u(), d = u(r.zoom || 1), ge = u(!1), V = u(!1), ae = u(null), ie = u(!1);
     let $, D;
-    const ze = typeof window < "u" && "DeviceMotionEvent" in window && (window.matchMedia?.("(pointer: coarse)")?.matches || "ontouchstart" in window), we = h(() => r.correctOrientation && ze), oe = h(() => fe.value && (!we.value || ne.value));
-    function le() {
+    const ze = typeof window < "u" && "DeviceMotionEvent" in window && (window.matchMedia?.("(pointer: coarse)")?.matches || "ontouchstart" in window), we = h(() => r.correctOrientation && ze), ne = h(() => fe.value && (!we.value || ie.value));
+    function oe() {
       D && (window.removeEventListener("pointerdown", D, !0), window.removeEventListener("touchend", D, !0), D = void 0);
     }
     function Q() {
-      ne.value = !0, $ && (clearTimeout($), $ = void 0), le();
+      ie.value = !0, $ && (clearTimeout($), $ = void 0), oe();
     }
     function Ve() {
       D || (D = () => {
-        re();
+        le();
       }, window.addEventListener("pointerdown", D, !0), window.addEventListener("touchend", D, !0));
     }
     function pe(e) {
       const t = e.accelerationIncludingGravity;
       if (!t || t.x == null || t.y == null) return;
       const a = Math.round(Math.atan2(t.x, t.y) * 180 / Math.PI);
-      if (ie.value = a, !(typeof screen < "u" && screen.orientation && screen.orientation.type || "portrait-primary").startsWith("portrait"))
+      if (ae.value = a, !(typeof screen < "u" && screen.orientation && screen.orientation.type || "portrait-primary").startsWith("portrait"))
         V.value = !1;
       else {
-        const f = Math.abs(Math.abs(a) - 90);
-        !V.value && f < 40 ? V.value = !0 : V.value && f > 50 && (V.value = !1);
+        const g = Math.abs(Math.abs(a) - 90);
+        !V.value && g < 40 ? V.value = !0 : V.value && g > 50 && (V.value = !1);
       }
-      ne.value || Q();
+      ie.value || Q();
     }
-    async function re() {
+    async function le() {
       if (!(!r.correctOrientation || ge.value))
         try {
           const e = window.DeviceOrientationEvent, t = window.DeviceMotionEvent;
@@ -149,25 +149,25 @@ const gt = { class: "camera__preview" }, wt = {
             return;
           }
           t && typeof t.requestPermission == "function" && await t.requestPermission().catch(() => {
-          }), window.addEventListener("devicemotion", pe, !0), ge.value = !0, le();
+          }), window.addEventListener("devicemotion", pe, !0), ge.value = !0, oe();
         } catch (e) {
           console.error(e, "enableMotion: failed"), Q();
         }
     }
     const G = h(() => ({ ...Oe, ...r.resolutions })), $e = h(() => Object.values(G.value)[0]);
-    function He(e) {
+    function Be(e) {
       return String(e || "").trim().toLowerCase().replace(/\s+/g, "").replace(/[:/]/g, "x");
     }
     const M = h(() => {
       if (G.value[r.ratio])
         return r.ratio;
-      const e = He(r.ratio);
+      const e = Be(r.ratio);
       if (G.value[e])
         return e;
-    }), L = h(() => M.value ? G.value[M.value] : $e.value), Be = h(() => {
+    }), T = h(() => M.value ? G.value[M.value] : $e.value), He = h(() => {
       const e = M.value ? G.value[M.value] : void 0;
       return e ? `${e.width} / ${e.height}` : void 0;
-    }), I = h(() => W.value.filter((e) => e.kind === "videoinput")), ye = h(() => W.value.filter((e) => e.kind === "audioinput")), N = u([]), se = h(() => I.value.filter((e) => !N.value.includes(e.deviceId)));
+    }), I = h(() => W.value.filter((e) => e.kind === "videoinput")), ye = h(() => W.value.filter((e) => e.kind === "audioinput")), N = u([]), re = h(() => I.value.filter((e) => !N.value.includes(e.deviceId)));
     function Ue(e) {
       e && !N.value.includes(e) && (N.value = [...N.value, e]);
     }
@@ -176,12 +176,12 @@ const gt = { class: "camera__preview" }, wt = {
       if (!t.length) return;
       const a = t.findIndex((l) => l.deviceId === e);
       for (let l = 1; l <= t.length; l++) {
-        const m = t[(Math.max(a, 0) + l) % t.length];
-        if (m && !N.value.includes(m.deviceId))
-          return m;
+        const f = t[(Math.max(a, 0) + l) % t.length];
+        if (f && !N.value.includes(f.deviceId))
+          return f;
       }
     }
-    const We = h(() => se.value.map((e, t) => ({
+    const We = h(() => re.value.map((e, t) => ({
       text: e.label.slice(0, e.label.indexOf("(")) || `Camera ${t + 1}`,
       value: e.deviceId
     }))), _e = h({
@@ -194,46 +194,46 @@ const gt = { class: "camera__preview" }, wt = {
     });
     h({
       get() {
-        return R.value && R.value.deviceId;
+        return O.value && O.value.deviceId;
       },
       set(e) {
-        R.value = ye.value.find((t) => t.deviceId === e);
+        O.value = ye.value.find((t) => t.deviceId === e);
       }
     });
-    const H = h(() => {
+    const B = h(() => {
       const e = c.value && I.value.findIndex((t) => t.deviceId === c.value?.deviceId);
       return r.enableMirrorCamera && e === 0 ? "mirror-cam" : "";
     }), je = h(() => {
       const e = c.value && W.value.findIndex((t) => t.deviceId === c.value?.deviceId);
-      return H.value ? `${H.value} mirror-device-${e}` : "";
-    }), { tintRgb: zt, applyFilterToCanvas: Ee } = ht(r);
+      return B.value ? `${B.value} mirror-device-${e}` : "";
+    }), { tintRgb: Vt, applyFilterToCanvas: Ee } = mt(r);
     function Ce() {
-      if (M.value && L.value) {
-        X.value = L.value.width, J.value = L.value.height;
+      if (M.value && T.value) {
+        X.value = T.value.width, J.value = T.value.height;
         return;
       }
       X.value = n.value.parentElement && n.value.parentElement.clientWidth, J.value = n.value.parentElement && n.value.parentElement.clientHeight;
     }
-    const Se = st(() => {
+    const Se = ut(() => {
       Ce();
     }, 300, { trailing: !0, leading: !1 });
-    function ue(e) {
+    function se(e) {
       return new Promise((t) => setTimeout(t, e));
     }
     async function Ge() {
-      const e = L.value ? { width: L.value.width, height: L.value.height } : void 0, t = e ? Math.max(e.width, e.height) : void 0, a = e ? Math.min(e.width, e.height) : void 0, l = r.enableAudio && {
-        ...R.value ? { deviceId: R.value.deviceId } : {}
+      const e = T.value ? { width: T.value.width, height: T.value.height } : void 0, t = e ? Math.max(e.width, e.height) : void 0, a = e ? Math.min(e.width, e.height) : void 0, l = r.enableAudio && {
+        ...O.value ? { deviceId: O.value.deviceId } : {}
         // deviceId: activeAudioDevice.value ? { exact: activeAudioDevice.value } : undefined
-      }, m = c.value && c.value.deviceId, f = j.value, i = [];
-      m ? (t && a && i.push({ deviceId: { exact: m }, width: { ideal: t }, height: { ideal: a } }), i.push({ deviceId: { exact: m } })) : f ? (t && a && i.push({ facingMode: { exact: f }, width: { ideal: t }, height: { ideal: a } }), i.push({ facingMode: { exact: f } }), t && a && i.push({ width: { ideal: t }, height: { ideal: a } }), i.push({})) : (t && a && i.push({ width: { ideal: t }, height: { ideal: a } }), i.push({}));
+      }, f = c.value && c.value.deviceId, g = j.value, i = [];
+      f ? (t && a && i.push({ deviceId: { exact: f }, width: { ideal: t }, height: { ideal: a } }), i.push({ deviceId: { exact: f } })) : g ? (t && a && i.push({ facingMode: { exact: g }, width: { ideal: t }, height: { ideal: a } }), i.push({ facingMode: { exact: g } }), t && a && i.push({ width: { ideal: t }, height: { ideal: a } }), i.push({})) : (t && a && i.push({ width: { ideal: t }, height: { ideal: a } }), i.push({}));
       for (const s of i)
         for (let v = 0; v < 5; v++)
           try {
             return await navigator.mediaDevices.getUserMedia({ audio: l, video: s });
-          } catch (A) {
-            const C = A && A.name;
+          } catch (z) {
+            const C = z && z.name;
             if (C === "NotReadableError" || C === "AbortError") {
-              await ue(500);
+              await se(500);
               continue;
             }
             break;
@@ -244,10 +244,10 @@ const gt = { class: "camera__preview" }, wt = {
         t.stop();
       }), n.value.srcObject = null);
     }
-    let T = 0;
+    let A = 0;
     const Ne = 350, Pe = 8e3;
     let P, ee;
-    function B() {
+    function H() {
       P && (clearTimeout(P), P = void 0), ee && (ee(), ee = void 0);
     }
     function Fe(e) {
@@ -256,54 +256,54 @@ const gt = { class: "camera__preview" }, wt = {
       t && t.deviceId !== e && (c.value = t);
     }
     function qe(e) {
-      B();
+      H();
       const t = c.value && c.value.deviceId, a = n.value;
       if (!t || !a) return;
       const l = a.srcObject && a.srcObject.getVideoTracks?.()[0];
       if (!l || !(typeof l.addEventListener == "function") || a.videoWidth > 0) return;
-      const f = () => {
-        if (B(), e !== T || !n.value) return;
+      const g = () => {
+        if (H(), e !== A || !n.value) return;
         const v = be(t);
         v && v.deviceId !== t && (Y(), Fe(t));
       }, i = () => {
-        e === T && n.value && n.value.videoWidth > 0 && B();
+        e === A && n.value && n.value.videoWidth > 0 && H();
       }, s = () => {
-        f();
+        g();
       };
       l.addEventListener("unmute", i), l.addEventListener("ended", s), ee = () => {
         l.removeEventListener("unmute", i), l.removeEventListener("ended", s);
       }, P = setTimeout(() => {
-        P = void 0, !(e !== T || !n.value) && (n.value.videoWidth === 0 ? f() : B());
+        P = void 0, !(e !== A || !n.value) && (n.value.videoWidth === 0 ? g() : H());
       }, Pe);
     }
     const Ze = 2;
-    let ce = 0;
+    let ue = 0;
     async function U() {
-      const e = ++T;
-      B();
+      const e = ++A;
+      H();
       const t = !!(n.value && n.value.srcObject);
-      if (Y(), t && (await ue(Ne), e !== T))
+      if (Y(), t && (await se(Ne), e !== A))
         return;
       const a = await Ge();
-      if (e !== T) {
+      if (e !== A) {
         a?.getTracks?.().forEach((l) => l.stop());
         return;
       }
       if (a && n.value) {
-        ce = 0, n.value.srcObject = a, n.value.muted = !0;
+        ue = 0, n.value.srcObject = a, n.value.muted = !0;
         try {
           await n.value.play?.();
         } catch {
         }
         qe(e);
       } else if (!a && c.value) {
-        ce < Ze && (ce++, await ue(600), e === T && await U());
+        ue < Ze && (ue++, await se(600), e === A && await U());
         return;
       }
       return W.value = await navigator.mediaDevices.enumerateDevices(), { stream: n.value && n.value.srcObject, devices: W.value };
     }
     function Ke() {
-      O.value ? (O.value = !1, K.value = !1, Y()) : (O.value = !0, U());
+      L.value ? (L.value = !1, K.value = !1, Y()) : (L.value = !0, U());
     }
     function Xe() {
       c.value = void 0, j.value = j.value === "user" ? "environment" : "user", U();
@@ -311,25 +311,25 @@ const gt = { class: "camera__preview" }, wt = {
     async function ke(e, t) {
       e && (!t || e.deviceId !== t.deviceId) && await U();
     }
-    Ie(() => c.value, ke), Ie(() => R.value, ke);
-    function de() {
-      r.countdown ? (k.value = k.value ? k.value - 1 : r.countdown, k.value ? setTimeout(de, 1e3) : De()) : De();
+    Ie(() => c.value, ke), Ie(() => O.value, ke);
+    function ce() {
+      r.countdown ? (k.value = k.value ? k.value - 1 : r.countdown, k.value ? setTimeout(ce, 1e3) : De()) : De();
     }
-    Le({ onCapture: de, enableMotion: re, camera: n.value, zoom: d });
+    Le({ onCapture: ce, enableMotion: le, camera: n.value, zoom: d });
     function Je() {
-      if (!r.correctOrientation || ie.value == null) return 0;
-      const e = ((ie.value - 180) % 360 + 360) % 360;
+      if (!r.correctOrientation || ae.value == null) return 0;
+      const e = ((ae.value - 180) % 360 + 360) % 360;
       return (-1 * (Math.round(e / 90) * 90 % 360) % 360 + 360) % 360;
     }
-    function Qe(e, t, a, l, m) {
-      const f = o.value.width, i = o.value.height;
-      e.translate(f / 2, i / 2), H.value && e.scale(-1, 1), e.rotate(a * Math.PI / 180);
-      const s = i, v = f, C = Math.max(s / l, v / m) * (d.value && d.value > 0 ? d.value : 1), F = l * C, S = m * C;
+    function Qe(e, t, a, l, f) {
+      const g = o.value.width, i = o.value.height;
+      e.translate(g / 2, i / 2), B.value && e.scale(-1, 1), e.rotate(a * Math.PI / 180);
+      const s = i, v = g, C = Math.max(s / l, v / f) * (d.value && d.value > 0 ? d.value : 1), F = l * C, S = f * C;
       e.drawImage(t, -F / 2, -S / 2, F, S);
     }
     function De() {
       K.value = !0;
-      const e = o.value.getContext("2d"), t = n.value, a = t && t.srcObject && t.srcObject.getTracks(), { aspectRatio: l, width: m, height: f } = a.length && a[0].getSettings(), i = t?.videoWidth || m || X.value, s = t?.videoHeight || f || J.value, v = i && s ? i / s : l, A = L.value || { width: i, height: s }, C = A?.width || i, F = M.value ? A?.height || s : Math.round(C / v), S = C / F;
+      const e = o.value.getContext("2d"), t = n.value, a = t && t.srcObject && t.srcObject.getTracks(), { aspectRatio: l, width: f, height: g } = a.length && a[0].getSettings(), i = t?.videoWidth || f || X.value, s = t?.videoHeight || g || J.value, v = i && s ? i / s : l, z = T.value || { width: i, height: s }, C = z?.width || i, F = M.value ? z?.height || s : Math.round(C / v), S = C / F;
       if (o.value.width = C, o.value.height = F, !i || !s || !v)
         return;
       const te = Je();
@@ -337,17 +337,17 @@ const gt = { class: "camera__preview" }, wt = {
         Qe(e, t, te, i, s), e.restore(), Ee(e, o.value.width, o.value.height), Me(o.value.toDataURL("image/png"));
         return;
       }
-      if (te === 180 && (e.translate(o.value.width, o.value.height), e.scale(-1, -1)), H.value && (e.translate(o.value.width, 0), e.scale(-1, 1)), r.enableCropImage) {
-        let _ = 0, x = 0, g = i, E = s;
-        if (v > S ? (g = s * S, _ = (i - g) / 2) : v < S && (E = i / S, x = (s - E) / 2), d.value && d.value !== 1) {
-          const q = g / d.value, Z = E / d.value;
-          _ += (g - q) / 2, x += (E - Z) / 2, g = q, E = Z;
+      if (te === 180 && (e.translate(o.value.width, o.value.height), e.scale(-1, -1)), B.value && (e.translate(o.value.width, 0), e.scale(-1, 1)), r.enableCropImage) {
+        let _ = 0, x = 0, w = i, E = s;
+        if (v > S ? (w = s * S, _ = (i - w) / 2) : v < S && (E = i / S, x = (s - E) / 2), d.value && d.value !== 1) {
+          const q = w / d.value, Z = E / d.value;
+          _ += (w - q) / 2, x += (E - Z) / 2, w = q, E = Z;
         }
         e.drawImage(
           t,
           _,
           x,
-          g,
+          w,
           E,
           0,
           0,
@@ -355,28 +355,28 @@ const gt = { class: "camera__preview" }, wt = {
           o.value.height
         );
       } else {
-        let _ = o.value.width, x = o.value.height, g = 0, E = 0;
-        if (v > S ? (x = o.value.width / v, E = (o.value.height - x) / 2) : v < S && (_ = o.value.height * v, g = (o.value.width - _) / 2), d.value && d.value !== 1) {
+        let _ = o.value.width, x = o.value.height, w = 0, E = 0;
+        if (v > S ? (x = o.value.width / v, E = (o.value.height - x) / 2) : v < S && (_ = o.value.height * v, w = (o.value.width - _) / 2), d.value && d.value !== 1) {
           const q = i / d.value, Z = s / d.value, et = (i - q) / 2, tt = (s - Z) / 2;
-          H.value && (g = o.value.width - g - _), e.drawImage(
+          B.value && (w = o.value.width - w - _), e.drawImage(
             t,
             et,
             tt,
             q,
             Z,
-            g,
+            w,
             E,
             _,
             x
           );
         } else
-          H.value && (g = o.value.width - g - _), e.drawImage(
+          B.value && (w = o.value.width - w - _), e.drawImage(
             t,
             0,
             0,
             i,
             s,
-            g,
+            w,
             E,
             _,
             x
@@ -387,7 +387,7 @@ const gt = { class: "camera__preview" }, wt = {
       Me(Ye);
     }
     function Me(e) {
-      const t = vt(e);
+      const t = ht(e);
       Ae("update:modelValue", {
         name: `cam-pic-${(/* @__PURE__ */ new Date()).toISOString()}`,
         id: `cam-pic-${(/* @__PURE__ */ new Date()).toISOString()}`,
@@ -396,134 +396,135 @@ const gt = { class: "camera__preview" }, wt = {
       });
     }
     return it(async () => {
-      await U(), O.value = !0, j.value = r.defaultRearCamera ? "environment" : "user";
+      await U(), L.value = !0, j.value = r.defaultRearCamera ? "environment" : "user";
       const e = r.defaultRearCamera && I.value.length > 1 ? I.value[I.value.length - 1] : I.value[0];
-      if (c.value = e, r.enableAudio && (R.value = ye.value[0]), navigator.mediaDevices.addEventListener("devicechange", async (t) => {
+      if (c.value = e, r.enableAudio && (O.value = ye.value[0]), navigator.mediaDevices.addEventListener("devicechange", async (t) => {
         await U();
       }), window.addEventListener("resize", Se), Ce(), we.value) {
         $ = setTimeout(Q, 3e3);
         const t = window.DeviceOrientationEvent;
-        t && typeof t.requestPermission == "function" ? Ve() : re();
+        t && typeof t.requestPermission == "function" ? Ve() : le();
       }
       await nt(), fe.value = !0;
     }), ot(() => {
-      O.value = !1, K.value = !1, B(), Y(), window.removeEventListener("resize", Se), window.removeEventListener("devicemotion", pe, !0), $ && clearTimeout($), le();
+      L.value = !1, K.value = !1, H(), Y(), window.removeEventListener("resize", Se), window.removeEventListener("devicemotion", pe, !0), $ && clearTimeout($), oe();
     }), (e, t) => (y(), b("div", {
-      class: ve(["camera", je.value])
+      class: de(["camera", je.value])
     }, [
-      w("div", gt, [
-        oe.value ? z("", !0) : (y(), b("div", wt, [
-          ae(ut, { color: "#000" }, {
+      p("div", wt, [
+        ne.value ? R("", !0) : (y(), b("div", pt, [
+          ve(ct, { color: "#000" }, {
             default: lt(() => [
-              w("span", {
-                class: ve("d-block text-center"),
+              p("span", {
+                class: de("d-block text-center"),
                 innerHTML: e.$t("camera.waitForCameraNotification")
-              }, null, 8, pt)
+              }, null, 8, yt)
             ]),
             _: 1
           })
         ])),
-        xe(w("div", {
-          class: ve(["camera__video-wrapper", M.value ? `aspect-ratio--${M.value}` : ""]),
-          style: he({ aspectRatio: Be.value || void 0, transform: d.value !== 1 ? `scale(${d.value})` : void 0 })
+        xe(p("div", {
+          class: de(["camera__video-wrapper", M.value ? `aspect-ratio--${M.value}` : ""]),
+          style: he({ aspectRatio: He.value || void 0, transform: d.value !== 1 ? `scale(${d.value})` : void 0 })
         }, [
-          w("video", {
+          p("video", {
             ref_key: "camera",
             ref: n,
             class: "camera__video",
             style: he({
               filter: r.filter === "grayscale" ? "grayscale(100%)" : r.filter === "sepia" ? "sepia(100%)" : "none",
-              transform: p.correctOrientation && V.value ? "rotate(180deg)" : void 0
+              transform: m.correctOrientation && V.value ? "rotate(180deg)" : void 0
             }),
             autoplay: "",
             muted: "",
             playsinline: ""
           }, null, 4),
-          p.tintColor ? (y(), b("div", {
+          m.tintColor ? (y(), b("div", {
             key: 0,
             class: "camera__tint-overlay",
             style: he({
-              backgroundColor: p.tintColor,
-              opacity: p.tintIntensity,
+              backgroundColor: m.tintColor,
+              opacity: m.tintIntensity,
               mixBlendMode: "multiply"
             })
-          }, null, 4)) : z("", !0)
+          }, null, 4)) : R("", !0)
         ], 6), [
-          [Re, oe.value]
+          [Re, ne.value]
         ]),
-        xe(w("canvas", {
+        xe(p("canvas", {
           ref_key: "canvas",
           ref: o,
           class: "camera__canvas",
           width: X.value,
           height: J.value
-        }, null, 8, yt), [
+        }, null, 8, bt), [
           [Re, K.value]
         ]),
-        k.value ? (y(), b("div", bt, [
+        k.value ? (y(), b("div", _t, [
           (y(), b("p", {
             class: "countdown",
             key: k.value,
             innerHTML: k.value,
             "data-countdown": k.value
-          }, null, 8, _t))
-        ])) : z("", !0),
-        p.enableGuide && O.value && oe.value ? (y(), b("img", {
+          }, null, 8, Et))
+        ])) : R("", !0),
+        m.enableGuide && L.value && ne.value ? (y(), b("img", {
           key: 2,
           class: "camera__guide",
-          src: p.guideSrc
-        }, null, 8, Et)) : z("", !0),
-        p.enableZoomSlider ? (y(), b("div", Ct, [
-          ae(mt, {
+          src: m.guideSrc
+        }, null, 8, Ct)) : R("", !0),
+        m.enableZoomSlider ? (y(), b("div", St, [
+          ve(ft, {
             modelValue: d.value,
             "onUpdate:modelValue": t[0] || (t[0] = (a) => d.value = a)
           }, null, 8, ["modelValue"])
-        ])) : z("", !0)
+        ])) : R("", !0)
       ]),
-      w("div", St, [
-        w("div", kt, [
-          w("div", Dt, [
-            w("div", Mt, [
-              w("div", It, [
-                w("button", {
+      p("div", kt, [
+        p("div", Dt, [
+          p("div", Mt, [
+            p("div", It, [
+              p("div", xt, [
+                p("button", {
                   type: "button",
                   class: "camera__toggle btn btn-primary",
                   onClick: Ke
                 }, [
-                  O.value ? (y(), b("span", Rt, me(e.$t("common.pause")), 1)) : (y(), b("span", xt, me(e.$t("common.play")), 1))
+                  L.value ? (y(), b("span", Ot, me(e.$t("common.pause")), 1)) : (y(), b("span", Rt, me(e.$t("common.play")), 1))
                 ]),
-                w("button", {
+                p("button", {
                   type: "button",
                   class: "camera__capture btn btn-primary",
-                  onClick: de
+                  onClick: ce
                 }, me(e.$t("camera.capture")), 1)
               ])
             ])
           ])
         ])
       ]),
-      (p.enableSwitchCamera || p.enableSelectDevice) && se.value && se.value.length > 1 ? (y(), b("div", Ot, [
-        w("div", Lt, [
-          ae(dt, {
+      (m.enableSwitchCamera || m.enableSelectDevice) && re.value && re.value.length > 1 ? (y(), b("div", Lt, [
+        p("div", Tt, [
+          m.enableSelectDevice ? (y(), rt(vt, {
+            key: 0,
             modelValue: _e.value,
             "onUpdate:modelValue": t[1] || (t[1] = (a) => _e.value = a),
             options: We.value,
             class: "w-100"
-          }, null, 8, ["modelValue", "options"])
+          }, null, 8, ["modelValue", "options"])) : R("", !0)
         ]),
-        w("div", Tt, [
-          p.enableSwitchCamera ? (y(), b("button", {
+        p("div", At, [
+          m.enableSwitchCamera ? (y(), b("button", {
             key: 0,
             class: "btn",
-            onClick: rt(Xe, ["prevent"])
+            onClick: st(Xe, ["prevent"])
           }, [
-            ae(ct, { symbol: "switch-camera" })
-          ])) : z("", !0)
+            ve(dt, { symbol: "switch-camera" })
+          ])) : R("", !0)
         ])
-      ])) : z("", !0)
+      ])) : R("", !0)
     ], 2));
   }
 });
 export {
-  Kt as default
+  Xt as default
 };