ablok-components 0.3.120 → 0.3.121

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ablok-components",
   "private": false,
-  "version": "0.3.120",
+  "version": "0.3.121",
   "type": "module",
   "dependencies": {
     "@tiptap/core": "^3.30.0",