import { getRandomElement as e, getUniqueString as t, hasSlotContent as n } from "../../common/utils/index.js";
import { t as r } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import i from "../presence/presence.js";
import { AVATAR_GROUP_VALIDATOR as a, AVATAR_ICON_SIZES as o, AVATAR_KIND_MODIFIERS as s, AVATAR_PRESENCE_SIZE_MODIFIERS as c, AVATAR_PRESENCE_STATES as l, AVATAR_RANDOM_COLORS as u, AVATAR_SIZE_MODIFIERS as d } from "./avatar-constants.js";
import { ICON_SIZE_MODIFIERS as f } from "../icon/icon-constants.js";
import { extractInitialsFromName as p } from "./utils.js";
import { createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, mergeProps as v, normalizeClass as y, normalizeStyle as b, openBlock as x, renderSlot as S, resolveComponent as C, resolveDynamicComponent as w, toDisplayString as T, withCtx as E } from "vue";
//#region components/avatar/avatar.vue
var D = {
	compatConfig: { MODE: 3 },
	name: "DtAvatar",
	components: { DtPresence: i },
	inheritAttrs: !1,
	props: {
		id: {
			type: String,
			default() {
				return t();
			}
		},
		seed: {
			type: String,
			default: void 0
		},
		color: {
			type: String,
			default: void 0
		},
		size: {
			type: String,
			default: "md",
			validator: (e) => Object.keys(d).includes(e)
		},
		avatarClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		canvasClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		iconClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		presence: {
			type: String,
			default: l.NONE,
			validator: (e) => Object.values(l).includes(e)
		},
		presenceProps: {
			type: Object,
			default: () => ({})
		},
		group: {
			type: Number,
			default: void 0,
			validator: (e) => a(e)
		},
		overlayText: {
			type: String,
			default: ""
		},
		overlayClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		imageSrc: {
			type: String,
			default: ""
		},
		imageAlt: {
			type: String,
			default: void 0
		},
		iconSize: {
			type: String,
			default: "",
			validator: (e) => !e || Object.keys(f).includes(e)
		},
		fullName: {
			type: String,
			default: ""
		},
		clickable: {
			type: Boolean,
			default: !1
		},
		iconAriaLabel: {
			type: String,
			default: void 0
		}
	},
	emits: ["click"],
	data() {
		return {
			AVATAR_SIZE_MODIFIERS: d,
			AVATAR_KIND_MODIFIERS: s,
			AVATAR_PRESENCE_SIZE_MODIFIERS: c,
			AVATAR_ICON_SIZES: o,
			imageLoadedSuccessfully: null,
			formattedInitials: "",
			initializing: !1,
			hasSlotContent: n
		};
	},
	computed: {
		hasOverlayIcon() {
			return n(this.$slots.overlayIcon);
		},
		iconDataQa() {
			return "dt-avatar-icon";
		},
		avatarClasses() {
			return [
				"d-avatar",
				this.$attrs.class,
				d[this.validatedSize],
				this.avatarClass,
				{
					"d-avatar--group": this.showGroup,
					"d-avatar--group-digits-2": this.showGroup && this.group > 9 && this.group < 100,
					"d-avatar--group-digits-3": this.showGroup && this.group > 99,
					[`d-avatar--color-${this.getColor()}`]: !this.isIconType(),
					"d-avatar--clickable": this.clickable,
					"d-avatar--presence": this.presence && !this.showGroup
				}
			];
		},
		overlayClasses() {
			return [
				"d-avatar__overlay",
				this.overlayClass,
				{ "d-avatar__overlay-icon": this.hasOverlayIcon }
			];
		},
		showGroup() {
			return a(this.group);
		},
		formattedGroup() {
			return this.group > 99 ? "99+" : this.group;
		},
		validatedSize() {
			return this.group ? "xs" : this.size;
		},
		showImage() {
			return this.imageLoadedSuccessfully !== !1 && this.imageSrc;
		}
	},
	watch: {
		fullName: {
			immediate: !0,
			handler() {
				this.formatInitials();
			}
		},
		size: {
			immediate: !0,
			handler() {
				this.formatInitials();
			}
		},
		group: {
			immediate: !0,
			handler() {
				this.formatInitials();
			}
		},
		imageSrc(e) {
			this.imageLoadedSuccessfully = null, e && (this.validateProps(), this.setImageListeners());
		}
	},
	mounted() {
		this.validateProps(), this.setImageListeners();
	},
	methods: {
		isIconType() {
			return n(this.$slots.icon);
		},
		async setImageListeners() {
			await this.$nextTick();
			let e = this.$refs.avatarImage;
			e && (e.addEventListener("load", () => this._loadedImageEventHandler(e), { once: !0 }), e.addEventListener("error", () => this._erroredImageEventHandler(e), { once: !0 }));
		},
		formatInitials() {
			let e = p(this.fullName);
			this.validatedSize === "xs" ? this.formattedInitials = "" : this.validatedSize === "sm" ? this.formattedInitials = e[0] : this.formattedInitials = e;
		},
		getColor() {
			return this.color ?? e(u, this.seed);
		},
		_loadedImageEventHandler(e) {
			this.imageLoadedSuccessfully = !0, e.classList.remove("d-d-none");
		},
		_erroredImageEventHandler(e) {
			this.imageLoadedSuccessfully = !1, e.classList.add("d-d-none");
		},
		validateProps() {
			this.imageSrc && this.imageAlt === void 0 && console.error("image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby");
		},
		handleClick(e) {
			this.clickable && this.$emit("click", e);
		}
	}
}, O = ["src", "alt"], k = [
	"aria-label",
	"data-qa",
	"role"
], A = {
	key: 1,
	class: "d-avatar__overlay-text"
}, j = {
	key: 1,
	class: "d-avatar__count",
	"data-qa": "dt-avatar-count"
};
function M(e, t, n, r, i, a) {
	let o = C("dt-presence");
	return x(), m(w(n.clickable ? "button" : "div"), {
		id: n.id,
		class: y(a.avatarClasses),
		style: b(e.$attrs.style),
		"data-qa": "dt-avatar",
		onClick: a.handleClick
	}, {
		default: E(() => [
			_("div", {
				ref: "canvas",
				class: y([
					n.canvasClass,
					"d-avatar__canvas",
					{ "d-avatar--image-loaded": i.imageLoadedSuccessfully }
				])
			}, [a.showImage ? (x(), g("img", {
				key: 0,
				ref: "avatarImage",
				class: "d-avatar__image",
				"data-qa": "dt-avatar-image",
				src: n.imageSrc,
				alt: n.imageAlt
			}, null, 8, O)) : a.isIconType() ? (x(), g("div", {
				key: 1,
				class: y([n.iconClass, i.AVATAR_KIND_MODIFIERS.icon]),
				"aria-label": n.clickable ? n.iconAriaLabel : "",
				"data-qa": a.iconDataQa,
				role: n.clickable ? "button" : ""
			}, [S(e.$slots, "icon", { iconSize: n.iconSize || i.AVATAR_ICON_SIZES[n.size] })], 10, k)) : (x(), g("span", {
				key: 2,
				class: y([i.AVATAR_KIND_MODIFIERS.initials])
			}, T(i.formattedInitials), 3))], 2),
			a.hasOverlayIcon || n.overlayText ? (x(), g("div", {
				key: 0,
				class: y(a.overlayClasses)
			}, [a.hasOverlayIcon ? S(e.$slots, "overlayIcon", { key: 0 }) : n.overlayText ? (x(), g("p", A, T(n.overlayText), 1)) : h("", !0)], 2)) : h("", !0),
			a.showGroup ? (x(), g("span", j, T(a.formattedGroup), 1)) : h("", !0),
			n.presence && !a.showGroup ? (x(), m(o, v({
				key: 2,
				presence: n.presence,
				class: ["d-avatar__presence", i.AVATAR_PRESENCE_SIZE_MODIFIERS[n.size]]
			}, n.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : h("", !0)
		]),
		_: 3
	}, 8, [
		"id",
		"class",
		"style",
		"onClick"
	]);
}
var N = /* @__PURE__ */ r(D, [["render", M]]);
//#endregion
export { N as default };

//# sourceMappingURL=avatar.js.map