import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
import { DialtoneLocalization as t } from "./localization/index.js";
import n from "./lib/button/button.js";
import r from "./lib/image-viewer/image-viewer.js";
import i from "./lib/progress-circle/progress-circle.js";
import { Fragment as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, openBlock as d, renderList as f, resolveComponent as p, resolveDynamicComponent as m, vShow as h, withCtx as g, withDirectives as _ } from "vue";
import { DtIconArrowLeft as v, DtIconArrowRight as y, DtIconClose as b } from "@dialpad/dialtone-icons/vue3";
//#region recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue
var x = {
	compatConfig: { MODE: 3 },
	name: "DtImageCarousel",
	components: {
		DtImageViewer: r,
		DtButton: n,
		DtIconClose: b,
		DtProgressCircle: i
	},
	props: {
		mediaItem: {
			type: Object,
			required: !0
		},
		index: {
			type: Number,
			required: !0
		}
	},
	emits: ["remove-media"],
	data() {
		return { i18n: new t() };
	},
	computed: { closeButtonTitle() {
		return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
	} },
	methods: { removeMediaItem(e) {
		this.$emit("remove-media", e);
	} }
}, S = { class: "d-recipe-attachment-carousel__image" }, C = { class: "d-recipe-attachment-carousel__image-top-right" }, w = { class: "d-recipe-attachment-carousel__image-progress-bar" };
function T(e, t, n, r, i, a) {
	let f = p("dt-image-viewer"), m = p("dt-progress-circle"), h = p("dt-icon-close"), _ = p("dt-button");
	return d(), c("li", S, [u(f, {
		"image-button-class": "d-recipe-attachment-carousel__image-viewer",
		"image-src": n.mediaItem.path,
		"image-alt": n.mediaItem.altText,
		"aria-label": i.i18n.$t("DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL")
	}, null, 8, [
		"image-src",
		"image-alt",
		"aria-label"
	]), l("div", C, [l("span", w, [n.mediaItem.isUploading ? (d(), o(m, {
		key: 0,
		kind: "brand",
		size: "400",
		progress: n.mediaItem.progress,
		"aria-label": i.i18n.$t("DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL")
	}, null, 8, ["progress", "aria-label"])) : s("", !0)]), u(_, {
		id: `closeButton-${n.index}`,
		tabindex: "0",
		class: "d-recipe-attachment-carousel__image-close-button",
		circle: "",
		size: "xs",
		importance: "clear",
		"aria-label": a.closeButtonTitle,
		title: a.closeButtonTitle,
		onClick: t[0] || (t[0] = (e) => a.removeMediaItem(n.index))
	}, {
		icon: g(() => [u(h, { size: "200" })]),
		_: 1
	}, 8, [
		"id",
		"aria-label",
		"title"
	])])]);
}
var E = /* @__PURE__ */ e(x, [["render", T]]), D = 64, O = {
	compatConfig: { MODE: 3 },
	name: "DtRecipeAttachmentCarousel",
	components: {
		DtButton: n,
		DtIconArrowRight: y,
		DtIconArrowLeft: v,
		DtImageCarousel: E
	},
	props: { mediaList: {
		type: Array,
		default: () => []
	} },
	emits: ["remove-media"],
	data() {
		return {
			showCloseButton: {},
			showRightArrow: !0,
			showLeftArrow: !1,
			isMounted: !1,
			i18n: new t()
		};
	},
	computed: { filteredMediaList() {
		return this.mediaList.filter((e) => e.type === "image" || e.type === "video");
	} },
	mounted: function() {
		this.showLeftArrow = this.$refs.carousel.scrollLeft > 0, this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;
	},
	methods: {
		onItemFocus(e) {
			e.currentTarget.scrollIntoView({ behavior: "smooth" });
		},
		mediaComponent(e) {
			switch (e) {
				case "image": return "dt-image-carousel";
				default: return null;
			}
		},
		removeMediaItem(e) {
			this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth + D, this.$emit("remove-media", e);
		},
		closeButton(e, t) {
			this.showCloseButton[t] = e;
		},
		handleScroll() {
			let e = this.$refs.carousel;
			this.showLeftArrow = e.scrollLeft > 0, this.showRightArrow = e.scrollLeft + e.clientWidth !== e.scrollWidth;
		},
		leftScroll() {
			this.$refs.carousel.scrollTo({
				left: this.$refs.carousel.scrollLeft - 100,
				behavior: "smooth"
			});
		},
		rightScroll() {
			this.$refs.carousel.scrollTo({
				left: this.$refs.carousel.scrollLeft + 100,
				behavior: "smooth"
			});
		}
	}
}, k = {
	class: "d-recipe-attachment-carousel",
	role: "presentation"
};
function A(e, t, n, r, i, l) {
	let v = p("dt-icon-arrow-left"), y = p("dt-button"), b = p("dt-icon-arrow-right");
	return d(), c("div", k, [
		n.mediaList.length > 0 ? (d(), c("ul", {
			key: 0,
			ref: "carousel",
			class: "d-recipe-attachment-carousel__media-list",
			onScroll: t[0] || (t[0] = (...e) => l.handleScroll && l.handleScroll(...e))
		}, [(d(!0), c(a, null, f(l.filteredMediaList, (e, t) => (d(), o(m(l.mediaComponent(e.type)), {
			key: `media-${t}`,
			index: t,
			"media-item": e,
			onRemoveMedia: (e) => l.removeMediaItem(t),
			onFocusin: l.onItemFocus
		}, null, 40, [
			"index",
			"media-item",
			"onRemoveMedia",
			"onFocusin"
		]))), 128))], 544)) : s("", !0),
		_(u(y, {
			tabindex: "-1",
			"aria-label": i.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL"),
			class: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left",
			circle: "",
			size: "xs",
			importance: "clear",
			onClick: l.leftScroll
		}, {
			icon: g(() => [u(v, { size: "100" })]),
			_: 1
		}, 8, ["aria-label", "onClick"]), [[h, i.showLeftArrow]]),
		_(u(y, {
			tabindex: "-1",
			"aria-label": i.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL"),
			class: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right",
			circle: "",
			size: "xs",
			importance: "clear",
			onClick: l.rightScroll
		}, {
			icon: g(() => [u(b, { size: "100" })]),
			_: 1
		}, 8, ["aria-label", "onClick"]), [[h, i.showRightArrow]])
	]);
}
var j = /* @__PURE__ */ e(O, [["render", A]]);
//#endregion
export { j as t };

//# sourceMappingURL=attachment_carousel-CouFqFMw.js.map