import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { codeToEmojiData as t, emojiFileExtensionLarge as n, emojiFileExtensionSmall as r, emojiImageUrlLarge as i, emojiImageUrlSmall as a, stringToUnicode as o } from "../../common/emoji/index.js";
import { ICON_SIZE_MODIFIERS as s } from "../icon/icon-constants.js";
import c from "../skeleton/skeleton.js";
import { createElementBlock as l, createElementVNode as u, createVNode as d, normalizeClass as f, openBlock as p, resolveComponent as m, vShow as h, withDirectives as g } from "vue";
//#region components/emoji/emoji.vue
var _ = {
	compatConfig: { MODE: 3 },
	name: "DtEmoji",
	components: { DtSkeleton: c },
	props: {
		code: {
			type: String,
			required: !0
		},
		size: {
			type: String,
			default: "500",
			validator: (e) => Object.keys(s).includes(e)
		},
		imgClass: {
			type: [
				String,
				Object,
				Array
			],
			default: ""
		},
		ariaLabel: {
			type: String,
			default: null
		},
		showSkeleton: {
			type: Boolean,
			default: !0
		}
	},
	data() {
		return {
			emojiData: null,
			imgLoading: !1
		};
	},
	computed: {
		emojiDataValid() {
			return !!this.emojiData;
		},
		emojiSrc() {
			return this.emojiDataValid ? this.emojiData?.custom ? this.emojiData.image : ["100", "200"].includes(this.size) ? a + this.emojiData.key + r : i + this.emojiData.key + n : "invalid";
		},
		emojiAlt() {
			if (this.emojiDataValid) return this.emojiData.unicode_output ? o(this.emojiData.unicode_output) : this.emojiData.name;
		},
		emojiLabel() {
			return this.emojiDataValid ? this.ariaLabel ? this.ariaLabel : this.emojiData.name : "Invalid Emoji";
		},
		emojiSize() {
			return s[this.size];
		}
	},
	watch: {
		code: {
			handler: function() {
				this.getEmojiData();
			},
			immediate: !0
		},
		emojiSrc: {
			handler: async function() {
				this.imgLoading = !0;
			},
			immediate: !0
		}
	},
	methods: {
		getEmojiData() {
			this.emojiData = t(this.code);
		},
		imageLoaded() {
			this.imgLoading = !1;
		},
		imageErrored() {
			this.imgLoading = !1;
		}
	}
}, v = [
	"aria-label",
	"alt",
	"title",
	"src"
];
function y(e, t, n, r, i, a) {
	let o = m("dt-skeleton");
	return p(), l("span", { class: f(["d-emoji d-icon", a.emojiSize]) }, [g(d(o, {
		offset: 0,
		class: f(["d-icon", a.emojiSize]),
		"shape-option": {
			shape: "circle",
			size: "100%"
		}
	}, null, 8, ["class"]), [[h, i.imgLoading && n.showSkeleton]]), g(u("img", {
		ref: "emojiImg",
		class: f([
			"d-icon",
			a.emojiSize,
			n.imgClass
		]),
		"aria-label": a.emojiLabel,
		alt: a.emojiAlt,
		title: a.emojiLabel,
		src: a.emojiSrc,
		onLoad: t[0] || (t[0] = (...e) => a.imageLoaded && a.imageLoaded(...e)),
		onError: t[1] || (t[1] = (...e) => a.imageErrored && a.imageErrored(...e))
	}, null, 42, v), [[h, !i.imgLoading]])], 2);
}
var b = /* @__PURE__ */ e(_, [["render", y]]);
//#endregion
export { b as default };

//# sourceMappingURL=emoji.js.map