import { n as __exportAll, r as __toESM } from "./chunk-B-1-B7_t.js";
import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, onMounted, openBlock, ref, toDisplayString, useTemplateRef, watch } from "vue";
//#region src/components/compositions/elements/display/QrCodeDisplay.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["aria-label"];
var _hoisted_2 = {
	key: 0,
	class: "mt-1 text-xs text-destructive",
	"data-testid": "qrcode-error"
};
var QrCodeDisplay_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "QrCodeDisplay",
	props: {
		value: {},
		classList: {}
	},
	setup(__props) {
		/**
		* Props-driven QR code display.
		*
		* Generates a QR code into a `<canvas>` via the `qrcode` library,
		* lazy-imported on mount.
		*
		* When the host environment can't paint to a canvas (jsdom, SSR, or
		* hardened browsers), `renderQr` short-circuits — keeping consumer
		* tests in jsdom-based environments quiet and crash-free.
		*/
		const CANVAS_SUPPORTED = typeof document !== "undefined" && !(typeof navigator !== "undefined" && /jsdom/i.test(navigator.userAgent));
		const props = __props;
		const content = computed(() => {
			if (props.value === void 0 || props.value === null) return "";
			return String(props.value);
		});
		const rootClass = computed(() => {
			const cl = props.classList;
			if (!cl) return "";
			return Array.isArray(cl) ? cl.join(" ") : cl;
		});
		const canvasRef = useTemplateRef("canvasRef");
		const error = ref("");
		async function renderQr() {
			if (!CANVAS_SUPPORTED || !canvasRef.value || !content.value) return;
			try {
				await (await import("./browser-YqwN4geW.js").then((m) => /* @__PURE__ */ __toESM(m.default, 1))).default.toCanvas(canvasRef.value, content.value, {
					margin: 1,
					width: 160
				});
				error.value = "";
			} catch (e) {
				error.value = e instanceof Error ? e.message : "Failed to render QR code";
			}
		}
		onMounted(() => {
			renderQr();
		});
		watch(content, () => {
			renderQr();
		});
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock("div", {
				class: normalizeClass(["inline-block", rootClass.value]),
				"data-testid": "qrcode-display"
			}, [createElementVNode("canvas", {
				ref_key: "canvasRef",
				ref: canvasRef,
				"aria-label": `QR code: ${content.value}`,
				role: "img"
			}, null, 8, _hoisted_1), error.value ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(error.value), 1)) : createCommentVNode("", true)], 2);
		};
	}
});
//#endregion
//#region src/components/compositions/elements/display/QrCodeDisplay.vue
var QrCodeDisplay_exports = /* @__PURE__ */ __exportAll({ default: () => QrCodeDisplay_default });
var QrCodeDisplay_default = QrCodeDisplay_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { QrCodeDisplay_exports as n, QrCodeDisplay_default as t };

//# sourceMappingURL=QrCodeDisplay-Cqp1pYUD.js.map