@dialpad/dialtone-vue/dist/lib/image-viewer/image-viewer.js

Vue component library for Dialpad's design system Dialtone

import { EVENT_KEYNAMES as e } from "../../common/constants/index.js";
import { returnFirstEl as t } from "../../common/utils/index.js";
import { t as n } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import r from "../../common/mixins/modal.js";
import { DialtoneLocalization as i } from "../../localization/index.js";
import a from "../button/button.js";
import o from "../../shared/sr_only_close_button.js";
import { Teleport as s, Transition as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, mergeProps as m, normalizeClass as h, openBlock as g, resolveComponent as _, toHandlers as v, withCtx as y } from "vue";
import { DtIconClose as b } from "@dialpad/dialtone-icons/vue3";
//#region components/image_viewer/image_viewer.vue
var x = {
	compatConfig: { MODE: 3 },
	name: "DtImageViewer",
	components: {
		SrOnlyCloseButton: o,
		DtButton: a,
		DtIconClose: b
	},
	mixins: [r],
	props: {
		appendTo: {
			type: String,
			default: "body"
		},
		open: {
			type: Boolean,
			default: null
		},
		imageSrc: {
			type: String,
			required: !0
		},
		imageAlt: {
			type: String,
			required: !0
		},
		imageButtonClass: {
			type: String,
			required: !1,
			default: ""
		},
		ariaLabel: {
			type: String,
			required: !0
		}
	},
	emits: ["opened", "update:open"],
	data() {
		return {
			showCloseButton: !0,
			isOpen: !1,
			i18n: new i()
		};
	},
	computed: {
		modalListeners() {
			return {
				click: (e) => {
					e.target === e.currentTarget && this.close();
				},
				keydown: (t) => {
					switch (t.code) {
						case e.esc:
						case e.escape:
							this.close();
							break;
						case e.tab:
							this.trapFocus(t);
							break;
					}
				}
			};
		},
		closeButtonTitle() {
			return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
		}
	},
	watch: {
		isOpen: {
			immediate: !0,
			handler(e) {
				e ? this.previousActiveElement = document.activeElement : (this.previousActiveElement?.focus(), this.previousActiveElement = null);
			}
		},
		open: {
			handler: function(e) {
				e !== null && (this.isOpen = e);
			},
			immediate: !0
		}
	},
	methods: {
		openModal() {
			this.open === null && (this.isOpen = !0, this.showCloseButton = !0, this.$emit("opened", !0), setTimeout(() => {
				this.focusAfterOpen();
			}));
		},
		close() {
			this.isOpen = !1, this.$emit("opened", !1), this.open !== null && this.$emit("update:open", !1);
		},
		focusAfterOpen() {
			t(this.$refs.closeImage?.$el)?.focus();
		},
		trapFocus(e) {
			this.isOpen && this.focusTrappedTabPress(e);
		}
	}
}, S = ["src", "alt"], C = ["aria-hidden"], w = {
	"data-qa": "dt-image-viewer-full",
	class: "d-image-viewer__full",
	role: "dialog",
	"aria-modal": "true"
}, T = ["src", "alt"];
function E(e, t, n, r, i, a) {
	let o = _("dt-button"), b = _("dt-icon-close"), x = _("sr-only-close-button");
	return g(), d("div", null, [p(o, {
		"data-qa": "dt-image-viewer-preview",
		class: "d-image-viewer__preview-button",
		"aria-label": n.ariaLabel,
		importance: "clear",
		onClick: a.openModal
	}, {
		default: y(() => [f("img", {
			class: h(n.imageButtonClass),
			src: n.imageSrc,
			alt: n.imageAlt
		}, null, 10, S)]),
		_: 1
	}, 8, ["aria-label", "onClick"]), i.isOpen ? (g(), l(s, {
		key: 0,
		to: n.appendTo
	}, [f("div", m({
		"aria-hidden": i.isOpen ? "false" : "true",
		class: "d-modal",
		"data-qa": "dt-modal"
	}, v(a.modalListeners, !0), {
		onMouseover: t[0] || (t[0] = (e) => i.showCloseButton = !0),
		onMouseleave: t[1] || (t[1] = (e) => i.showCloseButton = !1),
		onFocusin: t[2] || (t[2] = (e) => i.showCloseButton = !0),
		onFocusout: t[3] || (t[3] = (e) => i.showCloseButton = !1)
	}), [f("div", w, [f("img", {
		class: "d-image-viewer__full__image",
		src: n.imageSrc,
		alt: n.imageAlt
	}, null, 8, T)]), p(c, { name: "fade" }, {
		default: y(() => [i.showCloseButton ? (g(), l(o, {
			key: 0,
			ref: "closeImage",
			"data-qa": "dt-image-viewer-close-btn",
			class: "d-modal__close",
			circle: "",
			size: "lg",
			importance: "clear",
			kind: "inverted",
			"aria-label": a.closeButtonTitle,
			title: a.closeButtonTitle,
			onClick: a.close
		}, {
			icon: y(() => [p(b, {
				class: "d-image-viewer__close-button",
				size: "400"
			})]),
			_: 1
		}, 8, [
			"aria-label",
			"title",
			"onClick"
		])) : (g(), l(x, {
			key: 1,
			onClose: a.close
		}, null, 8, ["onClose"]))]),
		_: 1
	})], 16, C)], 8, ["to"])) : u("", !0)]);
}
var D = /* @__PURE__ */ n(x, [["render", E]]);
//#endregion
export { D as default };

//# sourceMappingURL=image-viewer.js.map