@dialpad/dialtone-vue 3.219.0-next.2 → 3.219.0

package/dist/lib/avatar/avatar.js

@@ -1,436 +1,290 @@
-import { hasSlotContent as o, getUniqueString as A } from "../../common/utils/index.js";
-import { AVATAR_PRESENCE_STATES as m, AVATAR_GROUP_VALIDATOR as h, computeAvatarHex as E, AVATAR_SIZE_MODIFIERS as c, getRandomFamilyVariant as f, AVATAR_PRESENCE_SIZE_MODIFIERS as b, AVATAR_KIND_MODIFIERS as C, AVATAR_VARIANT_COUNT as k, AVATAR_FAMILY_COUNT as O, colorToFamilyVariant as y } from "./avatar-constants.js";
-import { extractInitialsFromName as T } from "./utils.js";
-import { resolveComponent as R, openBlock as r, createBlock as v, resolveDynamicComponent as V, normalizeStyle as N, normalizeClass as l, withCtx as D, createElementVNode as g, createElementBlock as n, renderSlot as S, toDisplayString as u, createCommentVNode as d, mergeProps as L } from "vue";
-import { _ as x } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import z from "../presence/presence.js";
-var p;
-const _ = typeof CSS < "u" && ((p = CSS.supports) == null ? void 0 : p.call(CSS, "background", "oklch(0.5 0.1 0)")), F = {
-  compatConfig: { MODE: 3 },
-  name: "DtAvatar",
-  components: { DtPresence: z },
-  inheritAttrs: !1,
-  props: {
-    /**
-     * Id of the avatar content wrapper element
-     */
-    id: {
-      type: String,
-      default() {
-        return A();
-      }
-    },
-    /**
-     * **Recommended.** Pass a unique identifier (e.g., user ID) to generate consistent,
-     * deterministic colors for this avatar. The same seed always produces the same color.
-     * This is the preferred approach for most use cases.
-     */
-    seed: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * **Advanced.** Avatar color family (1-12). Each family represents a different hue
-     * offset from the theme's anchor. Only use this if you need explicit control over
-     * the color. For most cases, use `seed` instead.
-     * Families: 1=Red, 2=Orange, 3=Amber, 4=Yellow-Green, 5=Green, 6=Teal, 7=Cyan,
-     * 8=Blue, 9=Indigo, 10=Purple, 11=Magenta, 12=Pink
-     * @values 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
-     */
-    family: {
-      type: Number,
-      default: void 0,
-      validator: (e) => e >= 1 && e <= O
-    },
-    /**
-     * **Advanced.** Avatar color variant (0-9). Controls lightness/chroma within the family.
-     * Only use this if you need explicit control over the color. For most cases, use `seed` instead.
-     * 0 = darkest, 9 = lightest. Variants 0-5 have light text, 6-9 have dark text.
-     * @values 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
-     */
-    variant: {
-      type: Number,
-      default: void 0,
-      validator: (e) => e >= 0 && e < k
-    },
-    /**
-     * Avatar color code for backward compatibility. Converted internally
-     * to family/variant. For new code, use `seed` (recommended) or `family`/`variant`.
-     * Format: family (1-12) * 100 + variant (0-9) * 10, e.g., '540' = family 5, variant 4.
-     * @deprecated Use seed or family/variant instead.
-     */
-    color: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * The size of the avatar.
-     * T-shirt sizes (xs, sm, md, lg, xl) are deprecated and will be removed in the next major version.
-     * Please use the numeric scale instead.
-     * @values 100, 150, 200, 250, 300, 400, 500, 600, 700, 800, 900
-     */
-    size: {
-      type: [String, Number],
-      default: 300,
-      validator: (e) => Object.keys(c).includes(String(e))
-    },
-    /**
-     * Used to customize the avatar container
-     */
-    avatarClass: {
-      type: [String, Array, Object],
-      default: ""
-    },
-    /**
-     * Set classes on the avatar canvas. Wrapper around the core avatar image.
-     */
-    canvasClass: {
-      type: [String, Array, Object],
-      default: ""
-    },
-    /**
-     * Pass through classes. Used to customize the avatar icon
-     */
-    iconClass: {
-      type: [String, Array, Object],
-      default: ""
-    },
-    /**
-     * Determines whether to show the presence indicator for
-     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
-     * or 'active'. By default, it's null and nothing is shown.
-     * @values null, busy, away, offline, active
-     */
-    presence: {
-      type: String,
-      default: m.NONE,
-      validator: (e) => Object.values(m).includes(e)
-    },
-    /**
-     * A set of props to be passed into the presence component.
-     */
-    presenceProps: {
-      type: Object,
-      default: () => ({})
-    },
-    /**
-     * Determines whether to show a group avatar.
-     * Limit to 2 digits max, more than 99 will be rendered as "99+".
-     * if the number is 1 or less it would just show the regular avatar as if group had not been set.
-     */
-    group: {
-      type: Number,
-      default: void 0,
-      validator: (e) => h(e)
-    },
-    /**
-     * The text that overlays the avatar
-     */
-    overlayText: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Used to customize the avatar overlay
-     */
-    overlayClass: {
-      type: [String, Array, Object],
-      default: ""
-    },
-    /**
-     * Source of the image
-     */
-    imageSrc: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Alt attribute of the image, required if imageSrc is provided.
-     * Can be set to '' (empty string) if the image is described
-     * in text nearby
-     */
-    imageAlt: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Full name used to extract initials.
-     */
-    fullName: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Makes the avatar focusable and clickable,
-     * emits a click event when clicked.
-     */
-    clickable: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Descriptive label for the icon.
-     * To avoid a11y issues, set this prop if clickable and iconName are set.
-     */
-    iconAriaLabel: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * When true, renders the avatar with a transparent background and no color.
-     * Useful for displaying icons that should not have a colored background,
-     * such as channel or navigation icons.
-     */
-    iconOnly: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * When true, renders the avatar in a desaturated/washed-out state.
-     * Use this to indicate that a user is deactivated or inactive.
-     */
-    deactivated: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [
-    /**
-     * Avatar click event
-     *
-     * @event click
-     * @type {PointerEvent | KeyboardEvent}
-     */
-    "click"
-  ],
-  data() {
-    return {
-      AVATAR_SIZE_MODIFIERS: c,
-      AVATAR_KIND_MODIFIERS: C,
-      AVATAR_PRESENCE_SIZE_MODIFIERS: b,
-      imageLoadedSuccessfully: null,
-      formattedInitials: "",
-      initializing: !1,
-      hasSlotContent: o,
-      anchorHue: 0
-    };
-  },
-  computed: {
-    hasOverlayIcon() {
-      return o(this.$slots.overlayIcon);
-    },
-    isIconType() {
-      return o(this.$slots.icon);
-    },
-    iconDataQa() {
-      return "dt-avatar-icon";
-    },
-    /**
-     * Compute family from props, color prop, or random
-     */
-    computedFamily() {
-      if (this.isIconType) return;
-      if (this.family !== void 0) return this.family;
-      if (this.color !== void 0) {
-        const t = y(this.color);
-        if (t) return t.family;
-      }
-      return f(this.seed).family;
-    },
-    /**
-     * Compute variant from props, color prop, or random
-     */
-    computedVariant() {
-      if (this.isIconType) return;
-      if (this.variant !== void 0) return this.variant;
-      if (this.color !== void 0) {
-        const t = y(this.color);
-        if (t) return t.variant;
-      }
-      return f(this.seed).variant;
-    },
-    avatarClasses() {
-      return [
-        "d-avatar",
-        this.$attrs.class,
-        c[this.validatedSize],
-        this.avatarClass,
-        {
-          "d-avatar--group": this.showGroup,
-          "d-avatar--group-digits-2": this.showGroup && String(this.formattedGroup).length === 2,
-          "d-avatar--group-digits-3": this.showGroup && String(this.formattedGroup).length >= 3,
-          "d-avatar--clickable": this.clickable,
-          "d-avatar--presence": this.presence && !this.showGroup,
-          "d-avatar--icon-only": this.iconOnly,
-          "d-avatar--deactivated": this.deactivated
-        }
-      ];
-    },
-    /**
-     * Compute inline styles for fallback color in browsers that don't support oklch()
-     */
-    avatarStyles() {
-      const e = this.$attrs.style, t = e != null ? [].concat(e) : [];
-      if (!_ && !this.isIconType && this.computedFamily && this.computedVariant !== void 0) {
-        const a = E(this.computedFamily, this.computedVariant, this.anchorHue);
-        t.push({ "--avatar-color-background": a });
-      }
-      return t.length > 0 ? t : void 0;
-    },
-    overlayClasses() {
-      return [
-        "d-avatar__overlay",
-        this.overlayClass,
-        { "d-avatar__overlay-icon": this.hasOverlayIcon }
-      ];
-    },
-    showGroup() {
-      return h(this.group);
-    },
-    formattedGroup() {
-      const e = String(this.validatedSize);
-      return (["xs", "100", "150", "200", "250"].includes(e) ? 2 : 3) === 2 ? this.group > 9 ? "9+" : this.group : this.group > 99 ? "99+" : this.group;
-    },
-    validatedSize() {
-      return 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(), _ || this.readAnchorHue();
-  },
-  methods: {
-    async setImageListeners() {
-      await this.$nextTick();
-      const e = this.$refs.avatarImage;
-      e && (e.addEventListener("load", () => this._loadedImageEventHandler(e), { once: !0 }), e.addEventListener("error", () => this._erroredImageEventHandler(e), { once: !0 }));
-    },
-    formatInitials() {
-      const e = T(this.fullName), t = String(this.validatedSize);
-      t === "xs" || t === "100" ? this.formattedInitials = "" : t === "sm" || t === "150" || t === "200" ? this.formattedInitials = e[0] : this.formattedInitials = e;
-    },
-    /**
-     * Read the anchor hue from CSS custom property for fallback computation
-     */
-    readAnchorHue() {
-      try {
-        const e = getComputedStyle(document.documentElement).getPropertyValue("--dt-avatar-anchor-hue").trim();
-        this.anchorHue = parseFloat(e) || 0;
-      } catch {
-        this.anchorHue = 0;
-      }
-    },
-    _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);
-    }
-  }
-}, P = { class: "d-avatar__canvas-inner" }, w = ["src", "alt"], G = ["aria-label", "data-qa"], H = {
-  key: 1,
-  class: "d-avatar__overlay-text"
-}, M = ["aria-label"];
-function q(e, t, a, j, s, i) {
-  const I = R("dt-presence");
-  return r(), v(V(a.clickable ? "button" : "div"), {
-    id: a.id,
-    class: l(i.avatarClasses),
-    style: N(i.avatarStyles),
-    "data-avatar-family": a.iconOnly ? void 0 : i.computedFamily,
-    "data-avatar-variant": a.iconOnly ? void 0 : i.computedVariant,
-    "data-qa": "dt-avatar",
-    type: a.clickable ? "button" : void 0,
-    onClick: i.handleClick
-  }, {
-    default: D(() => [
-      g("div", {
-        ref: "canvas",
-        class: l([
-          a.canvasClass,
-          "d-avatar__canvas",
-          { "d-avatar--image-loaded": s.imageLoadedSuccessfully }
-        ])
-      }, [
-        g("div", P, [
-          i.showImage ? (r(), n("img", {
-            key: 0,
-            ref: "avatarImage",
-            class: "d-avatar__image",
-            "data-qa": "dt-avatar-image",
-            src: a.imageSrc,
-            alt: a.imageAlt
-          }, null, 8, w)) : i.isIconType ? (r(), n("div", {
-            key: 1,
-            class: l([a.iconClass, s.AVATAR_KIND_MODIFIERS.icon]),
-            "aria-label": a.clickable ? a.iconAriaLabel : "",
-            "data-qa": i.iconDataQa
-          }, [
-            S(e.$slots, "icon")
-          ], 10, G)) : (r(), n("span", {
-            key: 2,
-            class: l([s.AVATAR_KIND_MODIFIERS.initials])
-          }, u(s.formattedInitials), 3))
-        ])
-      ], 2),
-      i.hasOverlayIcon || a.overlayText ? (r(), n("div", {
-        key: 0,
-        class: l(i.overlayClasses)
-      }, [
-        i.hasOverlayIcon ? S(e.$slots, "overlayIcon", { key: 0 }) : a.overlayText ? (r(), n("p", H, u(a.overlayText), 1)) : d("", !0)
-      ], 2)) : d("", !0),
-      i.showGroup ? (r(), n("span", {
-        key: 1,
-        class: "d-avatar__count",
-        "data-qa": "dt-avatar-count",
-        role: "img",
-        "aria-label": `${a.group} participants`
-      }, u(i.formattedGroup), 9, M)) : d("", !0),
-      a.presence && !i.showGroup && s.AVATAR_PRESENCE_SIZE_MODIFIERS[a.size] ? (r(), v(I, L({
-        key: 2,
-        presence: a.presence,
-        class: [
-          "d-avatar__presence",
-          s.AVATAR_PRESENCE_SIZE_MODIFIERS[a.size]
-        ]
-      }, a.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : d("", !0)
-    ]),
-    _: 3
-  }, 8, ["id", "class", "style", "data-avatar-family", "data-avatar-variant", "type", "onClick"]);
-}
-const J = /* @__PURE__ */ x(F, [["render", q]]);
-export {
-  J as default
+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"
 };
-//# sourceMappingURL=avatar.js.map
+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