@dialpad/dialtone-vue 4.5.0 → 4.6.1

package/dist/lib/avatar/avatar.js

@@ -139,35 +139,12 @@ var D = typeof CSS < "u" && CSS.supports?.("background", "oklch(0.5 0.1 0)"), O
 		resolvedInteractive() {
 			return this.clickable ?? this.interactive;
 		},
-		hasOverlayIcon() {
-			return n(this.$slots.overlayIcon);
-		},
-		isIconType() {
-			return n(this.$slots.icon);
+		randomFamilyVariant() {
+			return f(this.seed);
 		},
 		iconDataQa() {
 			return "dt-avatar-icon";
 		},
-		computedFamily() {
-			if (!this.isIconType) {
-				if (this.family !== void 0) return this.family;
-				if (this.color !== void 0) {
-					let e = u(this.color);
-					if (e) return e.family;
-				}
-				return f(this.seed).family;
-			}
-		},
-		computedVariant() {
-			if (!this.isIconType) {
-				if (this.variant !== void 0) return this.variant;
-				if (this.color !== void 0) {
-					let e = u(this.color);
-					if (e) return e.variant;
-				}
-				return f(this.seed).variant;
-			}
-		},
 		avatarClasses() {
 			return [
 				"d-avatar",
@@ -184,21 +161,6 @@ var D = typeof CSS < "u" && CSS.supports?.("background", "oklch(0.5 0.1 0)"), O
 				}
 			];
 		},
-		avatarStyles() {
-			let e = [];
-			if (!D && !this.isIconType && this.computedFamily && this.computedVariant !== void 0) {
-				let t = d(this.computedFamily, this.computedVariant, this.anchorHue);
-				e.push({ "--avatar-color-background": t });
-			}
-			return e.length > 0 ? e : void 0;
-		},
-		overlayClasses() {
-			return [
-				"d-avatar__overlay",
-				this.overlayClass,
-				{ "d-avatar__overlay-icon": this.hasOverlayIcon }
-			];
-		},
 		showGroup() {
 			return a(this.group);
 		},
@@ -246,6 +208,47 @@ var D = typeof CSS < "u" && CSS.supports?.("background", "oklch(0.5 0.1 0)"), O
 		this.validateProps(), this.setImageListeners(), D || this.readAnchorHue();
 	},
 	methods: {
+		hasOverlayIcon() {
+			return n(this.$slots.overlayIcon);
+		},
+		isIconType() {
+			return n(this.$slots.icon);
+		},
+		getFamily() {
+			if (!this.isIconType()) {
+				if (this.family !== void 0) return this.family;
+				if (this.color !== void 0) {
+					let e = u(this.color);
+					if (e) return e.family;
+				}
+				return this.randomFamilyVariant.family;
+			}
+		},
+		getVariant() {
+			if (!this.isIconType()) {
+				if (this.variant !== void 0) return this.variant;
+				if (this.color !== void 0) {
+					let e = u(this.color);
+					if (e) return e.variant;
+				}
+				return this.randomFamilyVariant.variant;
+			}
+		},
+		avatarStyles() {
+			let e = [];
+			if (!D && !this.isIconType() && this.getFamily() && this.getVariant() !== void 0) {
+				let t = d(this.getFamily(), this.getVariant(), this.anchorHue);
+				e.push({ "--avatar-color-background": t });
+			}
+			return e.length > 0 ? e : void 0;
+		},
+		overlayClasses() {
+			return [
+				"d-avatar__overlay",
+				this.overlayClass,
+				{ "d-avatar__overlay-icon": this.hasOverlayIcon() }
+			];
+		},
 		async setImageListeners() {
 			await this.$nextTick();
 			let e = this.$refs.avatarImage;
@@ -285,9 +288,9 @@ function P(e, t, n, r, i, a) {
 	return x(), m(w(a.resolvedInteractive ? "button" : "div"), {
 		id: n.id,
 		class: y(a.avatarClasses),
-		style: b(a.avatarStyles),
-		"data-avatar-family": n.iconOnly ? void 0 : a.computedFamily,
-		"data-avatar-variant": n.iconOnly ? void 0 : a.computedVariant,
+		style: b(a.avatarStyles()),
+		"data-avatar-family": n.iconOnly ? void 0 : a.getFamily(),
+		"data-avatar-variant": n.iconOnly ? void 0 : a.getVariant(),
 		"data-qa": "dt-avatar",
 		type: a.resolvedInteractive ? "button" : void 0,
 		onClick: a.handleClick
@@ -307,7 +310,7 @@ function P(e, t, n, r, i, a) {
 				"data-qa": "dt-avatar-image",
 				src: n.imageSrc,
 				alt: n.imageAlt
-			}, null, 8, A)) : a.isIconType ? (x(), g("div", {
+			}, null, 8, A)) : a.isIconType() ? (x(), g("div", {
 				key: 1,
 				class: y([n.iconClass, i.AVATAR_KIND_MODIFIERS.icon]),
 				"aria-label": a.resolvedInteractive ? n.iconAriaLabel : "",
@@ -316,10 +319,10 @@ function P(e, t, n, r, i, a) {
 				key: 2,
 				class: y([i.AVATAR_KIND_MODIFIERS.initials])
 			}, T(i.formattedInitials), 3))])], 2),
-			a.hasOverlayIcon || n.overlayText ? (x(), g("div", {
+			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", M, T(n.overlayText), 1)) : h("", !0)], 2)) : h("", !0),
+				class: y(a.overlayClasses())
+			}, [a.hasOverlayIcon() ? S(e.$slots, "overlayIcon", { key: 0 }) : n.overlayText ? (x(), g("p", M, T(n.overlayText), 1)) : h("", !0)], 2)) : h("", !0),
 			a.showGroup ? (x(), g("span", {
 				key: 1,
 				class: "d-avatar__count",

package/dist/lib/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":[],"sources":["../../../components/Avatar/Avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"resolvedInteractive ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"avatarStyles\"\n    :data-avatar-family=\"!iconOnly ? computedFamily : undefined\"\n    :data-avatar-variant=\"!iconOnly ? computedVariant : undefined\"\n    data-qa=\"dt-avatar\"\n    :type=\"resolvedInteractive ? 'button' : undefined\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <div class=\"d-avatar__canvas-inner\">\n        <img\n          v-if=\"showImage\"\n          ref=\"avatarImage\"\n          class=\"d-avatar__image\"\n          data-qa=\"dt-avatar-image\"\n          :src=\"imageSrc\"\n          :alt=\"imageAlt\"\n        >\n        <div\n          v-else-if=\"isIconType\"\n          :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n          :aria-label=\"resolvedInteractive ? iconAriaLabel : ''\"\n          :data-qa=\"iconDataQa\"\n        >\n          <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n          <slot name=\"icon\" />\n        </div>\n        <span\n          v-else\n          :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n        >\n          {{ formattedInitials }}\n        </span>\n      </div>\n    </div>\n    <div\n      v-if=\"hasOverlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <!-- @slot Slot for overlay icon. -->\n      <slot\n        v-if=\"hasOverlayIcon\"\n        name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n      role=\"img\"\n      :aria-label=\"`${group} participants`\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup && AVATAR_PRESENCE_SIZE_MODIFIERS[size]\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport { DtPresence } from '../Presence';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_FAMILY_COUNT,\n  AVATAR_VARIANT_COUNT,\n  colorToFamilyVariant,\n  getRandomFamilyVariant,\n  computeAvatarHex,\n} from './AvatarConstants';\nimport { extractInitialsFromName } from './Utils';\n\n// Check if browser supports oklch() - only compute hex fallback if not\nconst supportsOklch = typeof CSS !== 'undefined' && CSS.supports?.('background', 'oklch(0.5 0.1 0)');\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  name: 'DtAvatar',\n  components: { DtPresence },\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * **Recommended.** Pass a unique identifier (e.g., user ID) to generate consistent,\n     * deterministic colors for this avatar. The same seed always produces the same color.\n     * This is the preferred approach for most use cases.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * **Advanced.** Avatar color family (1-12). Each family represents a different hue\n     * offset from the theme's anchor. Only use this if you need explicit control over\n     * the color. For most cases, use `seed` instead.\n     * Families: 1=Red, 2=Orange, 3=Amber, 4=Yellow-Green, 5=Green, 6=Teal, 7=Cyan,\n     * 8=Blue, 9=Indigo, 10=Purple, 11=Magenta, 12=Pink\n     * @values 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12\n     */\n    family: {\n      type: Number,\n      default: undefined,\n      validator: (val) => val >= 1 && val <= AVATAR_FAMILY_COUNT,\n    },\n\n    /**\n     * **Advanced.** Avatar color variant (0-9). Controls lightness/chroma within the family.\n     * Only use this if you need explicit control over the color. For most cases, use `seed` instead.\n     * 0 = darkest, 9 = lightest. Variants 0-5 have light text, 6-9 have dark text.\n     * @values 0, 1, 2, 3, 4, 5, 6, 7, 8, 9\n     */\n    variant: {\n      type: Number,\n      default: undefined,\n      validator: (val) => val >= 0 && val < AVATAR_VARIANT_COUNT,\n    },\n\n    /**\n     * Avatar color code for backward compatibility. Converted internally\n     * to family/variant. For new code, use `seed` (recommended) or `family`/`variant`.\n     * Format: family (1-12) * 100 + variant (0-9) * 10, e.g., '540' = family 5, variant 4.\n     * @deprecated Use seed or family/variant instead.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar.\n     * T-shirt sizes (xs, sm, md, lg, xl) are deprecated and will be removed in the next major version.\n     * Please use the numeric scale instead.\n     * @values 100, 150, 200, 250, 300, 400, 500, 600, 700, 800, 900\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: ordinalSizeValidator(AVATAR_SIZE_MODIFIERS),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * 'active', or 'dnd'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active, dnd\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as \"99+\".\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and interactive,\n     * emits a click event when clicked.\n     */\n    interactive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * @deprecated Use interactive instead.\n     */\n    clickable: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * When true, renders the avatar with a transparent background and no color.\n     * Useful for displaying icons that should not have a colored background,\n     * such as channel or navigation icons.\n     */\n    iconOnly: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * When true, renders the avatar in a desaturated/washed-out state.\n     * Use this to indicate that a user is deactivated or inactive.\n     */\n    deactivated: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n      hasSlotContent,\n      anchorHue: 0,\n    };\n  },\n\n  computed: {\n    resolvedInteractive () {\n      return this.clickable ?? this.interactive;\n    },\n\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\n    },\n\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\n    },\n\n    /**\n     * Compute family from props, color prop, or random\n     */\n    computedFamily () {\n      // Icon-type avatars don't use color\n      if (this.isIconType) return undefined;\n\n      // Explicit family prop takes precedence\n      if (this.family !== undefined) return this.family;\n\n      // Color prop (converted to family/variant)\n      if (this.color !== undefined) {\n        const parsed = colorToFamilyVariant(this.color);\n        if (parsed) return parsed.family;\n      }\n\n      // Random based on seed\n      const random = getRandomFamilyVariant(this.seed);\n      return random.family;\n    },\n\n    /**\n     * Compute variant from props, color prop, or random\n     */\n    computedVariant () {\n      // Icon-type avatars don't use color\n      if (this.isIconType) return undefined;\n\n      // Explicit variant prop takes precedence\n      if (this.variant !== undefined) return this.variant;\n\n      // Color prop (converted to family/variant)\n      if (this.color !== undefined) {\n        const parsed = colorToFamilyVariant(this.color);\n        if (parsed) return parsed.variant;\n      }\n\n      // Random based on seed\n      const random = getRandomFamilyVariant(this.seed);\n      return random.variant;\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          'd-avatar--group-digits-2': this.showGroup && String(this.formattedGroup).length === 2,\n          'd-avatar--group-digits-3': this.showGroup && String(this.formattedGroup).length >= 3,\n          'd-avatar--clickable': this.resolvedInteractive,\n          'd-avatar--presence': this.presence && !this.showGroup,\n          'd-avatar--icon-only': this.iconOnly,\n          'd-avatar--deactivated': this.deactivated,\n        },\n      ];\n    },\n\n    /**\n     * Compute inline styles for fallback color in browsers that don't support oklch()\n     */\n    avatarStyles () {\n      const baseStyles = [];\n\n      // Only compute hex fallback for browsers that don't support oklch()\n      if (!supportsOklch && !this.isIconType && this.computedFamily && this.computedVariant !== undefined) {\n        const fallbackHex = computeAvatarHex(this.computedFamily, this.computedVariant, this.anchorHue);\n        baseStyles.push({ '--avatar-color-background': fallbackHex });\n      }\n\n      return baseStyles.length > 0 ? baseStyles : undefined;\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n        { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      const size = String(this.validatedSize);\n      // Sizes 100-250 cap at 2 digits — too small for 3\n      const smallSizes = ['xs', '100', '150', '200', '250'];\n      const maxDigits = smallSizes.includes(size) ? 2 : 3;\n      if (maxDigits === 2) {\n        return this.group > 9 ? '9+' : this.group;\n      }\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      return this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n    // Only read anchor hue for fallback computation in browsers without oklch() support\n    if (!supportsOklch) {\n      this.readAnchorHue();\n    }\n  },\n\n  methods: {\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n      const size = String(this.validatedSize);\n\n      // xs/100 are too small for initials\n      if (size === 'xs' || size === '100') {\n        this.formattedInitials = '';\n      // sm/150/200 show single initial\n      } else if (size === 'sm' || size === '150' || size === '200') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    /**\n     * Read the anchor hue from CSS custom property for fallback computation\n     */\n    readAnchorHue () {\n      try {\n        const hueValue = getComputedStyle(document.documentElement)\n          .getPropertyValue('--dt-avatar-anchor-hue')\n          .trim();\n        this.anchorHue = parseFloat(hueValue) || 0;\n      } catch {\n        this.anchorHue = 0;\n      }\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.resolvedInteractive) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"avatar.js","names":[],"sources":["../../../components/Avatar/Avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"resolvedInteractive ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"avatarStyles()\"\n    :data-avatar-family=\"!iconOnly ? getFamily() : undefined\"\n    :data-avatar-variant=\"!iconOnly ? getVariant() : undefined\"\n    data-qa=\"dt-avatar\"\n    :type=\"resolvedInteractive ? 'button' : undefined\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <div class=\"d-avatar__canvas-inner\">\n        <img\n          v-if=\"showImage\"\n          ref=\"avatarImage\"\n          class=\"d-avatar__image\"\n          data-qa=\"dt-avatar-image\"\n          :src=\"imageSrc\"\n          :alt=\"imageAlt\"\n        >\n        <div\n          v-else-if=\"isIconType()\"\n          :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n          :aria-label=\"resolvedInteractive ? iconAriaLabel : ''\"\n          :data-qa=\"iconDataQa\"\n        >\n          <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n          <slot name=\"icon\" />\n        </div>\n        <span\n          v-else\n          :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n        >\n          {{ formattedInitials }}\n        </span>\n      </div>\n    </div>\n    <div\n      v-if=\"hasOverlayIcon() || overlayText\"\n      :class=\"overlayClasses()\"\n    >\n      <!-- @slot Slot for overlay icon. -->\n      <slot\n        v-if=\"hasOverlayIcon()\"\n        name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n      role=\"img\"\n      :aria-label=\"`${group} participants`\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup && AVATAR_PRESENCE_SIZE_MODIFIERS[size]\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport { DtPresence } from '../Presence';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_FAMILY_COUNT,\n  AVATAR_VARIANT_COUNT,\n  colorToFamilyVariant,\n  getRandomFamilyVariant,\n  computeAvatarHex,\n} from './AvatarConstants';\nimport { extractInitialsFromName } from './Utils';\n\n// Check if browser supports oklch() - only compute hex fallback if not\nconst supportsOklch = typeof CSS !== 'undefined' && CSS.supports?.('background', 'oklch(0.5 0.1 0)');\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  name: 'DtAvatar',\n  components: { DtPresence },\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * **Recommended.** Pass a unique identifier (e.g., user ID) to generate consistent,\n     * deterministic colors for this avatar. The same seed always produces the same color.\n     * This is the preferred approach for most use cases.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * **Advanced.** Avatar color family (1-12). Each family represents a different hue\n     * offset from the theme's anchor. Only use this if you need explicit control over\n     * the color. For most cases, use `seed` instead.\n     * Families: 1=Red, 2=Orange, 3=Amber, 4=Yellow-Green, 5=Green, 6=Teal, 7=Cyan,\n     * 8=Blue, 9=Indigo, 10=Purple, 11=Magenta, 12=Pink\n     * @values 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12\n     */\n    family: {\n      type: Number,\n      default: undefined,\n      validator: (val) => val >= 1 && val <= AVATAR_FAMILY_COUNT,\n    },\n\n    /**\n     * **Advanced.** Avatar color variant (0-9). Controls lightness/chroma within the family.\n     * Only use this if you need explicit control over the color. For most cases, use `seed` instead.\n     * 0 = darkest, 9 = lightest. Variants 0-5 have light text, 6-9 have dark text.\n     * @values 0, 1, 2, 3, 4, 5, 6, 7, 8, 9\n     */\n    variant: {\n      type: Number,\n      default: undefined,\n      validator: (val) => val >= 0 && val < AVATAR_VARIANT_COUNT,\n    },\n\n    /**\n     * Avatar color code for backward compatibility. Converted internally\n     * to family/variant. For new code, use `seed` (recommended) or `family`/`variant`.\n     * Format: family (1-12) * 100 + variant (0-9) * 10, e.g., '540' = family 5, variant 4.\n     * @deprecated Use seed or family/variant instead.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar.\n     * T-shirt sizes (xs, sm, md, lg, xl) are deprecated and will be removed in the next major version.\n     * Please use the numeric scale instead.\n     * @values 100, 150, 200, 250, 300, 400, 500, 600, 700, 800, 900\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: ordinalSizeValidator(AVATAR_SIZE_MODIFIERS),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * 'active', or 'dnd'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active, dnd\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as \"99+\".\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and interactive,\n     * emits a click event when clicked.\n     */\n    interactive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * @deprecated Use interactive instead.\n     */\n    clickable: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * When true, renders the avatar with a transparent background and no color.\n     * Useful for displaying icons that should not have a colored background,\n     * such as channel or navigation icons.\n     */\n    iconOnly: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * When true, renders the avatar in a desaturated/washed-out state.\n     * Use this to indicate that a user is deactivated or inactive.\n     */\n    deactivated: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n      hasSlotContent,\n      anchorHue: 0,\n    };\n  },\n\n  computed: {\n    resolvedInteractive () {\n      return this.clickable ?? this.interactive;\n    },\n\n    /**\n     * Random family/variant, cached so unseeded avatars keep one color\n     * instead of re-rolling on every render. Recomputes only when seed changes.\n     */\n    randomFamilyVariant () {\n      return getRandomFamilyVariant(this.seed);\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          'd-avatar--group-digits-2': this.showGroup && String(this.formattedGroup).length === 2,\n          'd-avatar--group-digits-3': this.showGroup && String(this.formattedGroup).length >= 3,\n          'd-avatar--clickable': this.resolvedInteractive,\n          'd-avatar--presence': this.presence && !this.showGroup,\n          'd-avatar--icon-only': this.iconOnly,\n          'd-avatar--deactivated': this.deactivated,\n        },\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      const size = String(this.validatedSize);\n      // Sizes 100-250 cap at 2 digits — too small for 3\n      const smallSizes = ['xs', '100', '150', '200', '250'];\n      const maxDigits = smallSizes.includes(size) ? 2 : 3;\n      if (maxDigits === 2) {\n        return this.group > 9 ? '9+' : this.group;\n      }\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      return this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n    // Only read anchor hue for fallback computation in browsers without oklch() support\n    if (!supportsOklch) {\n      this.readAnchorHue();\n    }\n  },\n\n  methods: {\n    // These read $slots, which is not reactive, so they must not be cached as computeds.\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\n    },\n\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\n    /**\n     * Compute family from props, color prop, or random\n     */\n    getFamily () {\n      // Icon-type avatars don't use color\n      if (this.isIconType()) return undefined;\n\n      // Explicit family prop takes precedence\n      if (this.family !== undefined) return this.family;\n\n      // Color prop (converted to family/variant)\n      if (this.color !== undefined) {\n        const parsed = colorToFamilyVariant(this.color);\n        if (parsed) return parsed.family;\n      }\n\n      // Random based on seed\n      const random = this.randomFamilyVariant;\n      return random.family;\n    },\n\n    /**\n     * Compute variant from props, color prop, or random\n     */\n    getVariant () {\n      // Icon-type avatars don't use color\n      if (this.isIconType()) return undefined;\n\n      // Explicit variant prop takes precedence\n      if (this.variant !== undefined) return this.variant;\n\n      // Color prop (converted to family/variant)\n      if (this.color !== undefined) {\n        const parsed = colorToFamilyVariant(this.color);\n        if (parsed) return parsed.variant;\n      }\n\n      // Random based on seed\n      const random = this.randomFamilyVariant;\n      return random.variant;\n    },\n\n    /**\n     * Compute inline styles for fallback color in browsers that don't support oklch()\n     */\n    avatarStyles () {\n      const baseStyles = [];\n\n      // Only compute hex fallback for browsers that don't support oklch()\n      if (!supportsOklch && !this.isIconType() && this.getFamily() && this.getVariant() !== undefined) {\n        const fallbackHex = computeAvatarHex(this.getFamily(), this.getVariant(), this.anchorHue);\n        baseStyles.push({ '--avatar-color-background': fallbackHex });\n      }\n\n      return baseStyles.length > 0 ? baseStyles : undefined;\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n        { 'd-avatar__overlay-icon': this.hasOverlayIcon() },\n      ];\n    },\n\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n      const size = String(this.validatedSize);\n\n      // xs/100 are too small for initials\n      if (size === 'xs' || size === '100') {\n        this.formattedInitials = '';\n      // sm/150/200 show single initial\n      } else if (size === 'sm' || size === '150' || size === '200') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    /**\n     * Read the anchor hue from CSS custom property for fallback computation\n     */\n    readAnchorHue () {\n      try {\n        const hueValue = getComputedStyle(document.documentElement)\n          .getPropertyValue('--dt-avatar-anchor-hue')\n          .trim();\n        this.anchorHue = parseFloat(hueValue) || 0;\n      } catch {\n        this.anchorHue = 0;\n      }\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.resolvedInteractive) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/badge/badge.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`./badge-constants.cjs`),i=require(`../icon/icon-constants.cjs`);let a=require(`vue`);var o={name:`DtBadge`,props:{iconSize:{type:[String,Number],default:200,validator:e.ordinalSizeValidator(i.ICON_SIZE_MODIFIERS)},text:{type:String,default:``},kind:{type:String,default:`label`,validator:e=>Object.keys(r.BADGE_KIND_MODIFIERS).includes(e)},type:{type:String,default:`default`,validator:e=>Object.keys(r.BADGE_TYPE_MODIFIERS).includes(e)},decoration:{type:String,default:void 0,validator:e=>Object.keys(r.BADGE_DECORATION_MODIFIERS).includes(e)},labelClass:{type:[String,Array,Object],default:``},startIconClass:{type:[String,Array,Object],default:``},endIconClass:{type:[String,Array,Object],default:``},subtle:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1}},data(){return{BADGE_TYPE_MODIFIERS:r.BADGE_TYPE_MODIFIERS,BADGE_KIND_MODIFIERS:r.BADGE_KIND_MODIFIERS,BADGE_DECORATION_MODIFIERS:r.BADGE_DECORATION_MODIFIERS}},computed:{hasLeftIcon(){return t.hasSlotContent(this.$slots.startIcon)||t.hasSlotContent(this.$slots.leftIcon)},hasRightIcon(){return t.hasSlotContent(this.$slots.endIcon)||t.hasSlotContent(this.$slots.rightIcon)},hasIcons(){return this.hasLeftIcon||this.hasRightIcon}},mounted(){this.validateProps()},updated(){this.validateProps()},methods:{validateProps(){this.validateTypePropCombination(),this.validateDecorationPropCombination()},validateTypePropCombination(){this.type===`ai`&&this.kind===`count`&&console.error(`DtBadge error: type: 'ai' with kind: 'count' is an invalid combination.`),this.type!==`bulletin`&&this.subtle&&console.error(`DtBadge error: subtle can only be used with type 'bulletin'`)},validateDecorationPropCombination(){this.decoration&&((this.kind!==`label`||this.type!==`default`)&&console.error(`DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'.`),this.hasIcons&&console.error(`DtBadge error: decoration prop cannot be used with startIcon or endIcon.`))}}},s={key:0,class:`d-badge__decorative`};function c(e,t,n,r,i,o){return(0,a.openBlock)(),(0,a.createElementBlock)(`span`,{class:(0,a.normalizeClass)([`d-badge`,i.BADGE_TYPE_MODIFIERS[n.type],i.BADGE_KIND_MODIFIERS[n.kind],i.BADGE_DECORATION_MODIFIERS[n.decoration],{"d-badge--subtle":n.subtle},{"d-badge--outlined":n.outlined}]),"data-qa":`dt-badge`},[n.decoration?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,s)):(0,a.createCommentVNode)(``,!0),o.hasLeftIcon?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:1,class:(0,a.normalizeClass)([`d-badge__icon-left`,n.startIconClass])},[e.$slots.startIcon?(0,a.renderSlot)(e.$slots,`startIcon`,{key:0,iconSize:n.iconSize}):(0,a.renderSlot)(e.$slots,`leftIcon`,{key:1,iconSize:n.iconSize})],2)):(0,a.createCommentVNode)(``,!0),(0,a.createElementVNode)(`span`,{class:(0,a.normalizeClass)([`d-badge__label`,n.labelClass])},[(0,a.renderSlot)(e.$slots,`default`,{},()=>[(0,a.createTextVNode)((0,a.toDisplayString)(n.text),1)])],2),o.hasRightIcon?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:2,class:(0,a.normalizeClass)([`d-badge__icon-right`,n.endIconClass])},[e.$slots.endIcon?(0,a.renderSlot)(e.$slots,`endIcon`,{key:0,iconSize:n.iconSize}):(0,a.renderSlot)(e.$slots,`rightIcon`,{key:1,iconSize:n.iconSize})],2)):(0,a.createCommentVNode)(``,!0)],2)}var l=n.t(o,[[`render`,c]]);exports.default=l;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`./badge-constants.cjs`),i=require(`../icon/icon-constants.cjs`);let a=require(`vue`);var o={name:`DtBadge`,props:{iconSize:{type:[String,Number],default:200,validator:e.ordinalSizeValidator(i.ICON_SIZE_MODIFIERS)},text:{type:String,default:``},kind:{type:String,default:`label`,validator:e=>Object.keys(r.BADGE_KIND_MODIFIERS).includes(e)},type:{type:String,default:`default`,validator:e=>Object.keys(r.BADGE_TYPE_MODIFIERS).includes(e)},decoration:{type:String,default:void 0,validator:e=>Object.keys(r.BADGE_DECORATION_MODIFIERS).includes(e)},labelClass:{type:[String,Array,Object],default:``},startIconClass:{type:[String,Array,Object],default:``},endIconClass:{type:[String,Array,Object],default:``},subtle:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1}},data(){return{BADGE_TYPE_MODIFIERS:r.BADGE_TYPE_MODIFIERS,BADGE_KIND_MODIFIERS:r.BADGE_KIND_MODIFIERS,BADGE_DECORATION_MODIFIERS:r.BADGE_DECORATION_MODIFIERS}},mounted(){this.validateProps()},updated(){this.validateProps()},methods:{hasLeftIcon(){return t.hasSlotContent(this.$slots.startIcon)||t.hasSlotContent(this.$slots.leftIcon)},hasRightIcon(){return t.hasSlotContent(this.$slots.endIcon)||t.hasSlotContent(this.$slots.rightIcon)},hasIcons(){return this.hasLeftIcon()||this.hasRightIcon()},validateProps(){this.validateTypePropCombination(),this.validateDecorationPropCombination()},validateTypePropCombination(){this.type===`ai`&&this.kind===`count`&&console.error(`DtBadge error: type: 'ai' with kind: 'count' is an invalid combination.`),this.type!==`bulletin`&&this.subtle&&console.error(`DtBadge error: subtle can only be used with type 'bulletin'`)},validateDecorationPropCombination(){this.decoration&&((this.kind!==`label`||this.type!==`default`)&&console.error(`DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'.`),this.hasIcons()&&console.error(`DtBadge error: decoration prop cannot be used with startIcon or endIcon.`))}}},s={key:0,class:`d-badge__decorative`};function c(e,t,n,r,i,o){return(0,a.openBlock)(),(0,a.createElementBlock)(`span`,{class:(0,a.normalizeClass)([`d-badge`,i.BADGE_TYPE_MODIFIERS[n.type],i.BADGE_KIND_MODIFIERS[n.kind],i.BADGE_DECORATION_MODIFIERS[n.decoration],{"d-badge--subtle":n.subtle},{"d-badge--outlined":n.outlined}]),"data-qa":`dt-badge`},[n.decoration?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,s)):(0,a.createCommentVNode)(``,!0),o.hasLeftIcon()?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:1,class:(0,a.normalizeClass)([`d-badge__icon-left`,n.startIconClass])},[e.$slots.startIcon?(0,a.renderSlot)(e.$slots,`startIcon`,{key:0,iconSize:n.iconSize}):(0,a.renderSlot)(e.$slots,`leftIcon`,{key:1,iconSize:n.iconSize})],2)):(0,a.createCommentVNode)(``,!0),(0,a.createElementVNode)(`span`,{class:(0,a.normalizeClass)([`d-badge__label`,n.labelClass])},[(0,a.renderSlot)(e.$slots,`default`,{},()=>[(0,a.createTextVNode)((0,a.toDisplayString)(n.text),1)])],2),o.hasRightIcon()?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:2,class:(0,a.normalizeClass)([`d-badge__icon-right`,n.endIconClass])},[e.$slots.endIcon?(0,a.renderSlot)(e.$slots,`endIcon`,{key:0,iconSize:n.iconSize}):(0,a.renderSlot)(e.$slots,`rightIcon`,{key:1,iconSize:n.iconSize})],2)):(0,a.createCommentVNode)(``,!0)],2)}var l=n.t(o,[[`render`,c]]);exports.default=l;
 //# sourceMappingURL=badge.cjs.map

package/dist/lib/badge/badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"badge.cjs","names":[],"sources":["../../../components/Badge/Badge.vue"],"sourcesContent":["<template>\n  <span\n    :class=\"[\n      'd-badge',\n      BADGE_TYPE_MODIFIERS[type],\n      BADGE_KIND_MODIFIERS[kind],\n      BADGE_DECORATION_MODIFIERS[decoration],\n      { 'd-badge--subtle': subtle },\n      { 'd-badge--outlined': outlined },\n    ]\"\n    data-qa=\"dt-badge\"\n  >\n    <span\n      v-if=\"decoration\"\n      class=\"d-badge__decorative\"\n    />\n    <span\n      v-if=\"hasLeftIcon\"\n      :class=\"['d-badge__icon-left', startIconClass]\"\n    >\n      <!-- @slot Slot for start icon, icon-size slot prop defaults to '200' -->\n      <slot\n        v-if=\"$slots.startIcon\"\n        name=\"startIcon\"\n        :icon-size=\"iconSize\"\n      />\n      <!-- @slot @deprecated Use startIcon -->\n      <slot\n        v-else\n        name=\"leftIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span :class=\"['d-badge__label', labelClass]\">\n      <!-- @slot Slot for badge content, defaults to text prop -->\n      <slot>\n        {{ text }}\n      </slot>\n    </span>\n    <span\n      v-if=\"hasRightIcon\"\n      :class=\"['d-badge__icon-right', endIconClass]\"\n    >\n      <!-- @slot Slot for end icon, icon-size slot prop defaults to '200' -->\n      <slot\n        v-if=\"$slots.endIcon\"\n        name=\"endIcon\"\n        :icon-size=\"iconSize\"\n      />\n      <!-- @slot @deprecated Use endIcon -->\n      <slot\n        v-else\n        name=\"rightIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './BadgeConstants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\nimport { ordinalSizeValidator } from '@/common/validators';\n\n/**\n * A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n */\nexport default {\n  name: 'DtBadge',\n\n  props: {\n    /**\n     * The size of the left and right icons.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: [String, Number],\n      default: 200,\n      validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\n    },\n\n    /**\n     * Text for the badge content\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The kind of badge which determines the styling\n     * @values label, count\n     */\n    kind: {\n      type: String,\n      default: 'label',\n      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * Color for the badge background\n     * @values default, info, positive, warning, critical, bulletin, ai\n     */\n    type: {\n      type: String,\n      default: 'default',\n      validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Decoration for the badge. This can be only used with kind: label and type: default\n     * with no left and right icons\n     * @values black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n     */\n    decoration: {\n      type: String,\n      default: undefined,\n      validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the start icon container\n     */\n    startIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the end icon container\n     */\n    endIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Shows a subtle appearance for the badge\n     * Currently only affects the badge when type is bulletin.\n     */\n    subtle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Outlines the badge with a border\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      BADGE_TYPE_MODIFIERS,\n      BADGE_KIND_MODIFIERS,\n      BADGE_DECORATION_MODIFIERS,\n    };\n  },\n\n  computed: {\n    hasLeftIcon () {\n      return hasSlotContent(this.$slots.startIcon) || hasSlotContent(this.$slots.leftIcon);\n    },\n\n    hasRightIcon () {\n      return hasSlotContent(this.$slots.endIcon) || hasSlotContent(this.$slots.rightIcon);\n    },\n\n    hasIcons () {\n      return this.hasLeftIcon || this.hasRightIcon;\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  methods: {\n    validateProps () {\n      this.validateTypePropCombination();\n      this.validateDecorationPropCombination();\n    },\n\n    validateTypePropCombination () {\n      if (this.type === 'ai' && this.kind === 'count') {\n        console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n      }\n      if (this.type !== 'bulletin' && this.subtle) {\n        console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n      }\n    },\n\n    validateDecorationPropCombination () {\n      if (!this.decoration) return;\n\n      if (this.kind !== 'label' || this.type !== 'default') {\n        console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n      }\n\n      if (this.hasIcons) {\n        console.error('DtBadge error: decoration prop cannot be used with startIcon or endIcon.');\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"badge.cjs","names":[],"sources":["../../../components/Badge/Badge.vue"],"sourcesContent":["<template>\n  <span\n    :class=\"[\n      'd-badge',\n      BADGE_TYPE_MODIFIERS[type],\n      BADGE_KIND_MODIFIERS[kind],\n      BADGE_DECORATION_MODIFIERS[decoration],\n      { 'd-badge--subtle': subtle },\n      { 'd-badge--outlined': outlined },\n    ]\"\n    data-qa=\"dt-badge\"\n  >\n    <span\n      v-if=\"decoration\"\n      class=\"d-badge__decorative\"\n    />\n    <span\n      v-if=\"hasLeftIcon()\"\n      :class=\"['d-badge__icon-left', startIconClass]\"\n    >\n      <!-- @slot Slot for start icon, icon-size slot prop defaults to '200' -->\n      <slot\n        v-if=\"$slots.startIcon\"\n        name=\"startIcon\"\n        :icon-size=\"iconSize\"\n      />\n      <!-- @slot @deprecated Use startIcon -->\n      <slot\n        v-else\n        name=\"leftIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span :class=\"['d-badge__label', labelClass]\">\n      <!-- @slot Slot for badge content, defaults to text prop -->\n      <slot>\n        {{ text }}\n      </slot>\n    </span>\n    <span\n      v-if=\"hasRightIcon()\"\n      :class=\"['d-badge__icon-right', endIconClass]\"\n    >\n      <!-- @slot Slot for end icon, icon-size slot prop defaults to '200' -->\n      <slot\n        v-if=\"$slots.endIcon\"\n        name=\"endIcon\"\n        :icon-size=\"iconSize\"\n      />\n      <!-- @slot @deprecated Use endIcon -->\n      <slot\n        v-else\n        name=\"rightIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './BadgeConstants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\nimport { ordinalSizeValidator } from '@/common/validators';\n\n/**\n * A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n */\nexport default {\n  name: 'DtBadge',\n\n  props: {\n    /**\n     * The size of the left and right icons.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: [String, Number],\n      default: 200,\n      validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\n    },\n\n    /**\n     * Text for the badge content\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The kind of badge which determines the styling\n     * @values label, count\n     */\n    kind: {\n      type: String,\n      default: 'label',\n      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * Color for the badge background\n     * @values default, info, positive, warning, critical, bulletin, ai\n     */\n    type: {\n      type: String,\n      default: 'default',\n      validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Decoration for the badge. This can be only used with kind: label and type: default\n     * with no left and right icons\n     * @values black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n     */\n    decoration: {\n      type: String,\n      default: undefined,\n      validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the start icon container\n     */\n    startIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the end icon container\n     */\n    endIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Shows a subtle appearance for the badge\n     * Currently only affects the badge when type is bulletin.\n     */\n    subtle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Outlines the badge with a border\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      BADGE_TYPE_MODIFIERS,\n      BADGE_KIND_MODIFIERS,\n      BADGE_DECORATION_MODIFIERS,\n    };\n  },\n\n  mounted () {\n    this.validateProps();\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  methods: {\n    // These read $slots, which is not reactive, so they must not be cached as computeds.\n    hasLeftIcon () {\n      return hasSlotContent(this.$slots.startIcon) || hasSlotContent(this.$slots.leftIcon);\n    },\n\n    hasRightIcon () {\n      return hasSlotContent(this.$slots.endIcon) || hasSlotContent(this.$slots.rightIcon);\n    },\n\n    hasIcons () {\n      return this.hasLeftIcon() || this.hasRightIcon();\n    },\n\n    validateProps () {\n      this.validateTypePropCombination();\n      this.validateDecorationPropCombination();\n    },\n\n    validateTypePropCombination () {\n      if (this.type === 'ai' && this.kind === 'count') {\n        console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n      }\n      if (this.type !== 'bulletin' && this.subtle) {\n        console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n      }\n    },\n\n    validateDecorationPropCombination () {\n      if (!this.decoration) return;\n\n      if (this.kind !== 'label' || this.type !== 'default') {\n        console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n      }\n\n      if (this.hasIcons()) {\n        console.error('DtBadge error: decoration prop cannot be used with startIcon or endIcon.');\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/badge/badge.js

@@ -72,17 +72,6 @@ var h = {
 			BADGE_DECORATION_MODIFIERS: r
 		};
 	},
-	computed: {
-		hasLeftIcon() {
-			return t(this.$slots.startIcon) || t(this.$slots.leftIcon);
-		},
-		hasRightIcon() {
-			return t(this.$slots.endIcon) || t(this.$slots.rightIcon);
-		},
-		hasIcons() {
-			return this.hasLeftIcon || this.hasRightIcon;
-		}
-	},
 	mounted() {
 		this.validateProps();
 	},
@@ -90,6 +79,15 @@ var h = {
 		this.validateProps();
 	},
 	methods: {
+		hasLeftIcon() {
+			return t(this.$slots.startIcon) || t(this.$slots.leftIcon);
+		},
+		hasRightIcon() {
+			return t(this.$slots.endIcon) || t(this.$slots.rightIcon);
+		},
+		hasIcons() {
+			return this.hasLeftIcon() || this.hasRightIcon();
+		},
 		validateProps() {
 			this.validateTypePropCombination(), this.validateDecorationPropCombination();
 		},
@@ -97,7 +95,7 @@ var h = {
 			this.type === "ai" && this.kind === "count" && console.error("DtBadge error: type: 'ai' with kind: 'count' is an invalid combination."), this.type !== "bulletin" && this.subtle && console.error("DtBadge error: subtle can only be used with type 'bulletin'");
 		},
 		validateDecorationPropCombination() {
-			this.decoration && ((this.kind !== "label" || this.type !== "default") && console.error("DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'."), this.hasIcons && console.error("DtBadge error: decoration prop cannot be used with startIcon or endIcon."));
+			this.decoration && ((this.kind !== "label" || this.type !== "default") && console.error("DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'."), this.hasIcons() && console.error("DtBadge error: decoration prop cannot be used with startIcon or endIcon."));
 		}
 	}
 }, g = {
@@ -117,7 +115,7 @@ function _(e, t, n, r, i, a) {
 		"data-qa": "dt-badge"
 	}, [
 		n.decoration ? (f(), c("span", g)) : s("", !0),
-		a.hasLeftIcon ? (f(), c("span", {
+		a.hasLeftIcon() ? (f(), c("span", {
 			key: 1,
 			class: d(["d-badge__icon-left", n.startIconClass])
 		}, [e.$slots.startIcon ? p(e.$slots, "startIcon", {
@@ -128,7 +126,7 @@ function _(e, t, n, r, i, a) {
 			iconSize: n.iconSize
 		})], 2)) : s("", !0),
 		l("span", { class: d(["d-badge__label", n.labelClass]) }, [p(e.$slots, "default", {}, () => [u(m(n.text), 1)])], 2),
-		a.hasRightIcon ? (f(), c("span", {
+		a.hasRightIcon() ? (f(), c("span", {
 			key: 2,
 			class: d(["d-badge__icon-right", n.endIconClass])
 		}, [e.$slots.endIcon ? p(e.$slots, "endIcon", {

package/dist/lib/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":[],"sources":["../../../components/Badge/Badge.vue"],"sourcesContent":["<template>\n  <span\n    :class=\"[\n      'd-badge',\n      BADGE_TYPE_MODIFIERS[type],\n      BADGE_KIND_MODIFIERS[kind],\n      BADGE_DECORATION_MODIFIERS[decoration],\n      { 'd-badge--subtle': subtle },\n      { 'd-badge--outlined': outlined },\n    ]\"\n    data-qa=\"dt-badge\"\n  >\n    <span\n      v-if=\"decoration\"\n      class=\"d-badge__decorative\"\n    />\n    <span\n      v-if=\"hasLeftIcon\"\n      :class=\"['d-badge__icon-left', startIconClass]\"\n    >\n      <!-- @slot Slot for start icon, icon-size slot prop defaults to '200' -->\n      <slot\n        v-if=\"$slots.startIcon\"\n        name=\"startIcon\"\n        :icon-size=\"iconSize\"\n      />\n      <!-- @slot @deprecated Use startIcon -->\n      <slot\n        v-else\n        name=\"leftIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span :class=\"['d-badge__label', labelClass]\">\n      <!-- @slot Slot for badge content, defaults to text prop -->\n      <slot>\n        {{ text }}\n      </slot>\n    </span>\n    <span\n      v-if=\"hasRightIcon\"\n      :class=\"['d-badge__icon-right', endIconClass]\"\n    >\n      <!-- @slot Slot for end icon, icon-size slot prop defaults to '200' -->\n      <slot\n        v-if=\"$slots.endIcon\"\n        name=\"endIcon\"\n        :icon-size=\"iconSize\"\n      />\n      <!-- @slot @deprecated Use endIcon -->\n      <slot\n        v-else\n        name=\"rightIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './BadgeConstants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\nimport { ordinalSizeValidator } from '@/common/validators';\n\n/**\n * A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n */\nexport default {\n  name: 'DtBadge',\n\n  props: {\n    /**\n     * The size of the left and right icons.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: [String, Number],\n      default: 200,\n      validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\n    },\n\n    /**\n     * Text for the badge content\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The kind of badge which determines the styling\n     * @values label, count\n     */\n    kind: {\n      type: String,\n      default: 'label',\n      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * Color for the badge background\n     * @values default, info, positive, warning, critical, bulletin, ai\n     */\n    type: {\n      type: String,\n      default: 'default',\n      validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Decoration for the badge. This can be only used with kind: label and type: default\n     * with no left and right icons\n     * @values black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n     */\n    decoration: {\n      type: String,\n      default: undefined,\n      validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the start icon container\n     */\n    startIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the end icon container\n     */\n    endIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Shows a subtle appearance for the badge\n     * Currently only affects the badge when type is bulletin.\n     */\n    subtle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Outlines the badge with a border\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      BADGE_TYPE_MODIFIERS,\n      BADGE_KIND_MODIFIERS,\n      BADGE_DECORATION_MODIFIERS,\n    };\n  },\n\n  computed: {\n    hasLeftIcon () {\n      return hasSlotContent(this.$slots.startIcon) || hasSlotContent(this.$slots.leftIcon);\n    },\n\n    hasRightIcon () {\n      return hasSlotContent(this.$slots.endIcon) || hasSlotContent(this.$slots.rightIcon);\n    },\n\n    hasIcons () {\n      return this.hasLeftIcon || this.hasRightIcon;\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  methods: {\n    validateProps () {\n      this.validateTypePropCombination();\n      this.validateDecorationPropCombination();\n    },\n\n    validateTypePropCombination () {\n      if (this.type === 'ai' && this.kind === 'count') {\n        console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n      }\n      if (this.type !== 'bulletin' && this.subtle) {\n        console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n      }\n    },\n\n    validateDecorationPropCombination () {\n      if (!this.decoration) return;\n\n      if (this.kind !== 'label' || this.type !== 'default') {\n        console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n      }\n\n      if (this.hasIcons) {\n        console.error('DtBadge error: decoration prop cannot be used with startIcon or endIcon.');\n      }\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;;AAsEA,IAAK,IAAU;CACb,MAAM;CAEN,OAAO;EAKL,UAAU;GACR,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,WAAW,EAAqB,EAAoB;GACrD;EAKD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAS,OAAO,KAAK,EAAqB,CAAC,SAAS,EAAK;GACtE;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAS,OAAO,KAAK,EAAqB,CAAC,SAAS,EAAK;GACtE;EASD,YAAY;GACV,MAAM;GACN,SAAS,KAAA;GACT,YAAY,MAAS,OAAO,KAAK,EAA2B,CAAC,SAAS,EAAK;GAC5E;EAKD,YAAY;GACV,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,gBAAgB;GACd,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO;GACL;GACA;GACA;GACD;;CAGH,UAAU;EACR,cAAe;AACb,UAAO,EAAe,KAAK,OAAO,UAAS,IAAK,EAAe,KAAK,OAAO,SAAS;;EAGtF,eAAgB;AACd,UAAO,EAAe,KAAK,OAAO,QAAO,IAAK,EAAe,KAAK,OAAO,UAAU;;EAGrF,WAAY;AACV,UAAO,KAAK,eAAe,KAAK;;EAEnC;CAED,UAAW;AACT,OAAK,eAAe;;CAGtB,UAAW;AACT,OAAK,eAAe;;CAGtB,SAAS;EACP,gBAAiB;AAEf,GADA,KAAK,6BAA6B,EAClC,KAAK,mCAAmC;;EAG1C,8BAA+B;AAI7B,GAHI,KAAK,SAAS,QAAQ,KAAK,SAAS,WACtC,QAAQ,MAAM,0EAA8E,EAE1F,KAAK,SAAS,cAAc,KAAK,UACnC,QAAQ,MAAM,8DAAgE;;EAIlF,oCAAqC;AAC9B,QAAK,gBAEN,KAAK,SAAS,WAAW,KAAK,SAAS,cACzC,QAAQ,MAAM,0FAA8F,EAG1G,KAAK,YACP,QAAQ,MAAM,2EAA2E;;EAG9F;CACF;;CAlNK,OAAM;;;aAbV,EAuDO,QAAA;EAtDJ,OAAK,EAAA;;GAA2B,EAAA,qBAAqB,EAAA;GAAa,EAAA,qBAAqB,EAAA;GAAa,EAAA,2BAA2B,EAAA;wBAAwC,EAAA,QAAM;0BAAiC,EAAA,UAAQ;;EAQvN,WAAQ;;EAGA,EAAA,cAAA,GAAA,EADR,EAGE,QAHF,EAGE,IAAA,EAAA,IAAA,GAAA;EAEM,EAAA,eAAA,GAAA,EADR,EAgBO,QAAA;;GAdJ,OAAK,EAAA,CAAA,sBAAyB,EAAA,eAAc,CAAA;MAIrC,EAAA,OAAO,YADf,EAIE,EAAA,QAAA,aAAA;;GADC,UAAW,EAAA;OAGd,EAIE,EAAA,QAAA,YAAA;;GADC,UAAW,EAAA;;EAGhB,EAKO,QAAA,EALA,OAAK,EAAA,CAAA,kBAAqB,EAAA,WAAU,CAAA,EAAA,EAAA,CAEzC,EAEO,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,KAAI,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA;EAIH,EAAA,gBAAA,GAAA,EADR,EAgBO,QAAA;;GAdJ,OAAK,EAAA,CAAA,uBAA0B,EAAA,aAAY,CAAA;MAIpC,EAAA,OAAO,UADf,EAIE,EAAA,QAAA,WAAA;;GADC,UAAW,EAAA;OAGd,EAIE,EAAA,QAAA,aAAA;;GADC,UAAW,EAAA"}
+{"version":3,"file":"badge.js","names":[],"sources":["../../../components/Badge/Badge.vue"],"sourcesContent":["<template>\n  <span\n    :class=\"[\n      'd-badge',\n      BADGE_TYPE_MODIFIERS[type],\n      BADGE_KIND_MODIFIERS[kind],\n      BADGE_DECORATION_MODIFIERS[decoration],\n      { 'd-badge--subtle': subtle },\n      { 'd-badge--outlined': outlined },\n    ]\"\n    data-qa=\"dt-badge\"\n  >\n    <span\n      v-if=\"decoration\"\n      class=\"d-badge__decorative\"\n    />\n    <span\n      v-if=\"hasLeftIcon()\"\n      :class=\"['d-badge__icon-left', startIconClass]\"\n    >\n      <!-- @slot Slot for start icon, icon-size slot prop defaults to '200' -->\n      <slot\n        v-if=\"$slots.startIcon\"\n        name=\"startIcon\"\n        :icon-size=\"iconSize\"\n      />\n      <!-- @slot @deprecated Use startIcon -->\n      <slot\n        v-else\n        name=\"leftIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span :class=\"['d-badge__label', labelClass]\">\n      <!-- @slot Slot for badge content, defaults to text prop -->\n      <slot>\n        {{ text }}\n      </slot>\n    </span>\n    <span\n      v-if=\"hasRightIcon()\"\n      :class=\"['d-badge__icon-right', endIconClass]\"\n    >\n      <!-- @slot Slot for end icon, icon-size slot prop defaults to '200' -->\n      <slot\n        v-if=\"$slots.endIcon\"\n        name=\"endIcon\"\n        :icon-size=\"iconSize\"\n      />\n      <!-- @slot @deprecated Use endIcon -->\n      <slot\n        v-else\n        name=\"rightIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './BadgeConstants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\nimport { ordinalSizeValidator } from '@/common/validators';\n\n/**\n * A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n */\nexport default {\n  name: 'DtBadge',\n\n  props: {\n    /**\n     * The size of the left and right icons.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: [String, Number],\n      default: 200,\n      validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\n    },\n\n    /**\n     * Text for the badge content\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The kind of badge which determines the styling\n     * @values label, count\n     */\n    kind: {\n      type: String,\n      default: 'label',\n      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * Color for the badge background\n     * @values default, info, positive, warning, critical, bulletin, ai\n     */\n    type: {\n      type: String,\n      default: 'default',\n      validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Decoration for the badge. This can be only used with kind: label and type: default\n     * with no left and right icons\n     * @values black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n     */\n    decoration: {\n      type: String,\n      default: undefined,\n      validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the start icon container\n     */\n    startIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the end icon container\n     */\n    endIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Shows a subtle appearance for the badge\n     * Currently only affects the badge when type is bulletin.\n     */\n    subtle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Outlines the badge with a border\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      BADGE_TYPE_MODIFIERS,\n      BADGE_KIND_MODIFIERS,\n      BADGE_DECORATION_MODIFIERS,\n    };\n  },\n\n  mounted () {\n    this.validateProps();\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  methods: {\n    // These read $slots, which is not reactive, so they must not be cached as computeds.\n    hasLeftIcon () {\n      return hasSlotContent(this.$slots.startIcon) || hasSlotContent(this.$slots.leftIcon);\n    },\n\n    hasRightIcon () {\n      return hasSlotContent(this.$slots.endIcon) || hasSlotContent(this.$slots.rightIcon);\n    },\n\n    hasIcons () {\n      return this.hasLeftIcon() || this.hasRightIcon();\n    },\n\n    validateProps () {\n      this.validateTypePropCombination();\n      this.validateDecorationPropCombination();\n    },\n\n    validateTypePropCombination () {\n      if (this.type === 'ai' && this.kind === 'count') {\n        console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n      }\n      if (this.type !== 'bulletin' && this.subtle) {\n        console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n      }\n    },\n\n    validateDecorationPropCombination () {\n      if (!this.decoration) return;\n\n      if (this.kind !== 'label' || this.type !== 'default') {\n        console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n      }\n\n      if (this.hasIcons()) {\n        console.error('DtBadge error: decoration prop cannot be used with startIcon or endIcon.');\n      }\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;;AAsEA,IAAK,IAAU;CACb,MAAM;CAEN,OAAO;EAKL,UAAU;GACR,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,WAAW,EAAqB,EAAoB;GACrD;EAKD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAS,OAAO,KAAK,EAAqB,CAAC,SAAS,EAAK;GACtE;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAS,OAAO,KAAK,EAAqB,CAAC,SAAS,EAAK;GACtE;EASD,YAAY;GACV,MAAM;GACN,SAAS,KAAA;GACT,YAAY,MAAS,OAAO,KAAK,EAA2B,CAAC,SAAS,EAAK;GAC5E;EAKD,YAAY;GACV,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,gBAAgB;GACd,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO;GACL;GACA;GACA;GACD;;CAGH,UAAW;AACT,OAAK,eAAe;;CAGtB,UAAW;AACT,OAAK,eAAe;;CAGtB,SAAS;EAEP,cAAe;AACb,UAAO,EAAe,KAAK,OAAO,UAAS,IAAK,EAAe,KAAK,OAAO,SAAS;;EAGtF,eAAgB;AACd,UAAO,EAAe,KAAK,OAAO,QAAO,IAAK,EAAe,KAAK,OAAO,UAAU;;EAGrF,WAAY;AACV,UAAO,KAAK,aAAY,IAAK,KAAK,cAAc;;EAGlD,gBAAiB;AAEf,GADA,KAAK,6BAA6B,EAClC,KAAK,mCAAmC;;EAG1C,8BAA+B;AAI7B,GAHI,KAAK,SAAS,QAAQ,KAAK,SAAS,WACtC,QAAQ,MAAM,0EAA8E,EAE1F,KAAK,SAAS,cAAc,KAAK,UACnC,QAAQ,MAAM,8DAAgE;;EAIlF,oCAAqC;AAC9B,QAAK,gBAEN,KAAK,SAAS,WAAW,KAAK,SAAS,cACzC,QAAQ,MAAM,0FAA8F,EAG1G,KAAK,UAAU,IACjB,QAAQ,MAAM,2EAA2E;;EAG9F;CACF;;CAjNK,OAAM;;;aAbV,EAuDO,QAAA;EAtDJ,OAAK,EAAA;;GAA2B,EAAA,qBAAqB,EAAA;GAAa,EAAA,qBAAqB,EAAA;GAAa,EAAA,2BAA2B,EAAA;wBAAwC,EAAA,QAAM;0BAAiC,EAAA,UAAQ;;EAQvN,WAAQ;;EAGA,EAAA,cAAA,GAAA,EADR,EAGE,QAHF,EAGE,IAAA,EAAA,IAAA,GAAA;EAEM,EAAA,aAAW,IAAA,GAAA,EADnB,EAgBO,QAAA;;GAdJ,OAAK,EAAA,CAAA,sBAAyB,EAAA,eAAc,CAAA;MAIrC,EAAA,OAAO,YADf,EAIE,EAAA,QAAA,aAAA;;GADC,UAAW,EAAA;OAGd,EAIE,EAAA,QAAA,YAAA;;GADC,UAAW,EAAA;;EAGhB,EAKO,QAAA,EALA,OAAK,EAAA,CAAA,kBAAqB,EAAA,WAAU,CAAA,EAAA,EAAA,CAEzC,EAEO,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,KAAI,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA;EAIH,EAAA,cAAY,IAAA,GAAA,EADpB,EAgBO,QAAA;;GAdJ,OAAK,EAAA,CAAA,uBAA0B,EAAA,aAAY,CAAA;MAIpC,EAAA,OAAO,UADf,EAIE,EAAA,QAAA,WAAA;;GADC,UAAW,EAAA;OAGd,EAIE,EAAA,QAAA,aAAA;;GADC,UAAW,EAAA"}

package/dist/lib/button/button.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../loader/loader.cjs`),i=require(`./button-constants.cjs`),a=require(`../link/link-constants.cjs`),o=require(`../../localization/index.cjs`);let s=require(`vue`);var c={name:`DtButton`,components:{DtLoader:r.default},props:{circle:{type:Boolean,default:!1},iconPosition:{type:String,default:`start`,validator:e=>Object.keys(i.ICON_POSITION_MODIFIERS).includes(e)},importance:{type:String,default:`primary`,validator:e=>Object.keys(i.BUTTON_IMPORTANCE_MODIFIERS).includes(e)},link:{type:Boolean,default:!1},linkKind:{type:String,default:`default`,validator:e=>Object.keys(a.LINK_KIND_MODIFIERS).includes(e)},linkInverted:{type:Boolean,default:!1},linkUnderline:{type:Boolean,default:!0},underline:{type:Boolean,default:null},disabled:{type:Boolean,default:!1},type:{type:String,default:`button`,validator:e=>i.BUTTON_TYPES.includes(e)},width:{type:String,default:null},size:{type:[String,Number],default:300,validator:e.ordinalSizeValidator(i.BUTTON_SIZE_MODIFIERS)},labelClass:{type:[String,Array,Object],default:``},leadingClass:{type:[String,Array,Object],default:``},trailingClass:{type:[String,Array,Object],default:``},startIconClass:{type:[String,Array,Object],default:``},endIconClass:{type:[String,Array,Object],default:``},blockStartIconClass:{type:[String,Array,Object],default:``},blockEndIconClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},loading:{type:Boolean,default:!1},kind:{type:String,default:`default`,validator:e=>Object.keys(i.BUTTON_KIND_MODIFIERS).includes(e)},assertiveOnFocus:{type:Boolean,default:!1},active:{type:Boolean,default:!1},to:{type:[String,Object],default:null},href:{type:String,default:null},target:{type:String,default:null},rel:{type:String,default:null},replace:{type:Boolean,default:!1}},emits:[`focusin`,`focusout`],data(){return{ICON_POSITION_MODIFIERS:i.ICON_POSITION_MODIFIERS,isInFocus:!1,hasSlotContent:t.hasSlotContent,i18n:new o.DialtoneLocalization}},computed:{resolvedUnderline(){return this.underline??this.linkUnderline},computedTag(){return this.to?this.resolveRouterLink():this.href?`a`:`button`},isNativeButton(){return!this.to&&!this.href},computedAttrs(){return this.to?{to:this.to,replace:this.replace,...this.disabled&&{"aria-disabled":`true`,tabindex:`-1`}}:this.href?{href:this.disabled?null:this.href,target:this.target,rel:this.rel,...this.disabled&&{"aria-disabled":`true`,tabindex:`-1`}}:{type:this.type,disabled:this.disabled}},computedListeners(){let e={focusin:e=>{this.isInFocus=this.assertiveOnFocus,this.$emit(`focusin`,e)},focusout:e=>{this.isInFocus=!1,this.$emit(`focusout`,e)}};return this.isNativeButton||(this.disabled&&(e.click=e=>{e.preventDefault(),e.stopImmediatePropagation()}),e.keydown=e=>{(e.key===` `||e.code===`Space`)&&(e.preventDefault(),this.disabled||e.target.click())}),e},computedAriaLive(){return this.assertiveOnFocus&&this.isInFocus?`assertive`:this.$attrs.ariaLive},iconSize(){return i.BUTTON_ICON_SIZES[String(this.size)]},loaderSize(){return i.BUTTON_ICON_SIZES[String(this.size)]},propCombination(){return[this.circle,this.kind,this.importance,this.link]}},watch:{propCombination:{handler:`validatePropCombination`,immediate:!0}},methods:{validatePropCombination(){process.env.NODE_ENV!==`production`&&(this.circle&&this.link&&(0,s.warn)(`You cannot enable circle and link at the same time`,this),this.isInvalidPropCombination(this.circle,this.kind,this.importance))},resolveRouterLink(){try{return(0,s.resolveComponent)(`RouterLink`)}catch{return(0,s.warn)(`DtButton: "to" prop requires vue-router. Falling back to <a>.`),`a`}},buttonClasses(){return this.link?[`d-link`,a.getLinkKindModifier(this.linkKind,this.linkInverted),i.BUTTON_SIZE_MODIFIERS[String(this.size)],{"d-link--no-underline":!this.resolvedUnderline}]:this.kind===`unstyled`?[`d-btn--unstyled`]:[`d-btn`,i.BUTTON_IMPORTANCE_MODIFIERS[this.importance],i.BUTTON_KIND_MODIFIERS[this.kind],i.BUTTON_SIZE_MODIFIERS[String(this.size)],{"d-btn--circle":this.circle,"d-btn--loading":this.loading,"d-btn--icon-only":this.isIconOnly(),"d-btn--vertical":this.isVerticalIconLayout(),"d-btn--active":this.active}]},isInvalidPropCombination(e,t,n){if(this.kind===`unstyled`)return!0;for(let r of i.INVALID_COMBINATION)if(e===r.circle&&t===r.kind&&n===r.importance)return(0,s.warn)(r.message),!1;return!0},hasStartIcon(){return t.hasSlotContent(this.$slots.startIcon)},hasEndIcon(){return t.hasSlotContent(this.$slots.endIcon)},hasBlockStartIcon(){return t.hasSlotContent(this.$slots.blockStartIcon)},hasBlockEndIcon(){return t.hasSlotContent(this.$slots.blockEndIcon)},hasNewIconSlots(){return this.hasStartIcon()||this.hasEndIcon()||this.hasBlockStartIcon()||this.hasBlockEndIcon()},shouldRenderLegacyIcon(){return t.hasSlotContent(this.$slots.icon)&&!this.hasNewIconSlots()&&!this.link},isIconOnly(){return(this.hasNewIconSlots()||this.shouldRenderLegacyIcon())&&!t.hasSlotContent(this.$slots.default)},isVerticalIconLayout(){return this.isIconOnly()?!1:this.hasBlockStartIcon()||this.hasBlockEndIcon()?!0:!this.hasNewIconSlots()&&[`top`,`bottom`].includes(this.iconPosition)}}};function l(e,t,n,r,i,a){let o=(0,s.resolveComponent)(`dt-loader`);return(0,s.openBlock)(),(0,s.createBlock)((0,s.resolveDynamicComponent)(a.computedTag),(0,s.mergeProps)({class:[`base-button__button`,a.buttonClasses()],"data-qa":`dt-button`,style:{width:n.width},"aria-live":a.computedAriaLive,"aria-label":n.loading?i.i18n.$t(`DIALTONE_LOADING`):e.$attrs[`aria-label`]},a.computedAttrs,(0,s.toHandlers)(a.computedListeners)),{default:(0,s.withCtx)(()=>[n.loading&&n.kind!==`unstyled`?((0,s.openBlock)(),(0,s.createBlock)(o,{key:0,class:`d-btn__loader`,size:a.loaderSize,"aria-hidden":`true`},null,8,[`size`])):(0,s.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.leading)?((0,s.openBlock)(),(0,s.createElementBlock)(`span`,{key:1,class:(0,s.normalizeClass)([`d-btn__leading`,n.leadingClass])},[(0,s.renderSlot)(e.$slots,`leading`)],2)):(0,s.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.blockStartIcon)?((0,s.openBlock)(),(0,s.createElementBlock)(`span`,{key:2,"data-qa":`dt-button-block-start-icon`,class:(0,s.normalizeClass)([`base-button__icon`,{"d-btn__icon":n.kind!==`unstyled`,"d-btn__icon--top":n.kind!==`unstyled`},n.blockStartIconClass])},[(0,s.renderSlot)(e.$slots,`blockStartIcon`,{iconSize:a.iconSize})],2)):(0,s.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.startIcon)?((0,s.openBlock)(),(0,s.createElementBlock)(`span`,{key:3,"data-qa":`dt-button-start-icon`,class:(0,s.normalizeClass)([`base-button__icon`,{"d-btn__icon":n.kind!==`unstyled`,"d-btn__icon--left":n.kind!==`unstyled`},n.startIconClass])},[(0,s.renderSlot)(e.$slots,`startIcon`,{iconSize:a.iconSize})],2)):(0,s.createCommentVNode)(``,!0),a.shouldRenderLegacyIcon()?((0,s.openBlock)(),(0,s.createElementBlock)(`span`,{key:4,"data-qa":`dt-button-icon`,class:(0,s.normalizeClass)([`base-button__icon`,{"d-btn__icon":n.kind!==`unstyled`,[i.ICON_POSITION_MODIFIERS[n.iconPosition]]:n.kind!==`unstyled`},n.iconClass])},[(0,s.renderSlot)(e.$slots,`icon`,{iconSize:a.iconSize})],2)):(0,s.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.default)?((0,s.openBlock)(),(0,s.createElementBlock)(`span`,{key:5,"data-qa":`dt-button-label`,class:(0,s.normalizeClass)([`base-button__label`,{"d-btn__label":n.kind!==`unstyled`},n.labelClass])},[(0,s.renderSlot)(e.$slots,`default`)],2)):(0,s.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.endIcon)?((0,s.openBlock)(),(0,s.createElementBlock)(`span`,{key:6,"data-qa":`dt-button-end-icon`,class:(0,s.normalizeClass)([`base-button__icon`,{"d-btn__icon":n.kind!==`unstyled`,"d-btn__icon--right":n.kind!==`unstyled`},n.endIconClass])},[(0,s.renderSlot)(e.$slots,`endIcon`,{iconSize:a.iconSize})],2)):(0,s.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.blockEndIcon)?((0,s.openBlock)(),(0,s.createElementBlock)(`span`,{key:7,"data-qa":`dt-button-block-end-icon`,class:(0,s.normalizeClass)([`base-button__icon`,{"d-btn__icon":n.kind!==`unstyled`,"d-btn__icon--bottom":n.kind!==`unstyled`},n.blockEndIconClass])},[(0,s.renderSlot)(e.$slots,`blockEndIcon`,{iconSize:a.iconSize})],2)):(0,s.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.trailing)?((0,s.openBlock)(),(0,s.createElementBlock)(`span`,{key:8,class:(0,s.normalizeClass)([`d-btn__trailing`,n.trailingClass])},[(0,s.renderSlot)(e.$slots,`trailing`)],2)):(0,s.createCommentVNode)(``,!0)]),_:3},16,[`class`,`style`,`aria-live`,`aria-label`])}var u=n.t(c,[[`render`,l]]);exports.default=u;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../../localization/index.cjs`),i=require(`../loader/loader.cjs`),a=require(`./button-constants.cjs`),o=require(`../link/link-constants.cjs`);let s=require(`vue`);var c={name:`DtButton`,components:{DtLoader:i.default},props:{circle:{type:Boolean,default:!1},iconPosition:{type:String,default:`start`,validator:e=>Object.keys(a.ICON_POSITION_MODIFIERS).includes(e)},importance:{type:String,default:`primary`,validator:e=>Object.keys(a.BUTTON_IMPORTANCE_MODIFIERS).includes(e)},link:{type:Boolean,default:!1},linkKind:{type:String,default:`default`,validator:e=>Object.keys(o.LINK_KIND_MODIFIERS).includes(e)},linkInverted:{type:Boolean,default:!1},linkUnderline:{type:Boolean,default:!0},underline:{type:Boolean,default:null},disabled:{type:Boolean,default:!1},type:{type:String,default:`button`,validator:e=>a.BUTTON_TYPES.includes(e)},width:{type:String,default:null},size:{type:[String,Number],default:300,validator:e.ordinalSizeValidator(a.BUTTON_SIZE_MODIFIERS)},labelClass:{type:[String,Array,Object],default:``},leadingClass:{type:[String,Array,Object],default:``},trailingClass:{type:[String,Array,Object],default:``},startIconClass:{type:[String,Array,Object],default:``},endIconClass:{type:[String,Array,Object],default:``},blockStartIconClass:{type:[String,Array,Object],default:``},blockEndIconClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},loading:{type:Boolean,default:!1},kind:{type:String,default:`default`,validator:e=>Object.keys(a.BUTTON_KIND_MODIFIERS).includes(e)},assertiveOnFocus:{type:Boolean,default:!1},active:{type:Boolean,default:!1},to:{type:[String,Object],default:null},href:{type:String,default:null},target:{type:String,default:null},rel:{type:String,default:null},replace:{type:Boolean,default:!1}},emits:[`focusin`,`focusout`],data(){return{ICON_POSITION_MODIFIERS:a.ICON_POSITION_MODIFIERS,isInFocus:!1,hasSlotContent:t.hasSlotContent,i18n:new r.DialtoneLocalization}},computed:{resolvedUnderline(){return this.underline??this.linkUnderline},computedTag(){return this.to?this.resolveRouterLink():this.href?`a`:`button`},isNativeButton(){return!this.to&&!this.href},computedAttrs(){return this.to?{to:this.to,replace:this.replace,...this.disabled&&{"aria-disabled":`true`,tabindex:`-1`}}:this.href?{href:this.disabled?null:this.href,target:this.target,rel:this.rel,...this.disabled&&{"aria-disabled":`true`,tabindex:`-1`}}:{type:this.type,disabled:this.disabled}},computedListeners(){let e={focusin:e=>{this.isInFocus=this.assertiveOnFocus,this.$emit(`focusin`,e)},focusout:e=>{this.isInFocus=!1,this.$emit(`focusout`,e)}};return this.isNativeButton||(this.disabled&&(e.click=e=>{e.preventDefault(),e.stopImmediatePropagation()}),e.keydown=e=>{(e.key===` `||e.code===`Space`)&&(e.preventDefault(),this.disabled||e.target.click())}),e},computedAriaLive(){return this.assertiveOnFocus&&this.isInFocus?`assertive`:this.$attrs.ariaLive},iconSize(){return a.BUTTON_ICON_SIZES[String(this.size)]},loaderSize(){return a.BUTTON_ICON_SIZES[String(this.size)]},propCombination(){return[this.circle,this.kind,this.importance,this.link]}},watch:{propCombination:{handler:`validatePropCombination`,immediate:!0}},methods:{validatePropCombination(){process.env.NODE_ENV!==`production`&&(this.circle&&this.link&&(0,s.warn)(`You cannot enable circle and link at the same time`,this),this.isInvalidPropCombination(this.circle,this.kind,this.importance))},resolveRouterLink(){try{return(0,s.resolveComponent)(`RouterLink`)}catch{return(0,s.warn)(`DtButton: "to" prop requires vue-router. Falling back to <a>.`),`a`}},buttonClasses(){return this.link?[`d-link`,o.getLinkKindModifier(this.linkKind,this.linkInverted),a.BUTTON_SIZE_MODIFIERS[String(this.size)],{"d-link--no-underline":!this.resolvedUnderline}]:this.kind===`unstyled`?[`d-btn--unstyled`]:[`d-btn`,a.BUTTON_IMPORTANCE_MODIFIERS[this.importance],a.BUTTON_KIND_MODIFIERS[this.kind],a.BUTTON_SIZE_MODIFIERS[String(this.size)],{"d-btn--circle":this.circle,"d-btn--loading":this.loading,"d-btn--icon-only":this.isIconOnly(),"d-btn--vertical":this.isVerticalIconLayout(),"d-btn--active":this.active}]},isInvalidPropCombination(e,t,n){if(this.kind===`unstyled`)return!0;for(let r of a.INVALID_COMBINATION)if(e===r.circle&&t===r.kind&&n===r.importance)return(0,s.warn)(r.message),!1;return!0},hasStartIcon(){return t.hasSlotContent(this.$slots.startIcon)},hasEndIcon(){return t.hasSlotContent(this.$slots.endIcon)},hasBlockStartIcon(){return t.hasSlotContent(this.$slots.blockStartIcon)},hasBlockEndIcon(){return t.hasSlotContent(this.$slots.blockEndIcon)},hasNewIconSlots(){return this.hasStartIcon()||this.hasEndIcon()||this.hasBlockStartIcon()||this.hasBlockEndIcon()},shouldRenderLegacyIcon(){return t.hasSlotContent(this.$slots.icon)&&!this.hasNewIconSlots()&&!this.link},isIconOnly(){return(this.hasNewIconSlots()||this.shouldRenderLegacyIcon())&&!t.hasSlotContent(this.$slots.default)},isVerticalIconLayout(){return this.isIconOnly()?!1:this.hasBlockStartIcon()||this.hasBlockEndIcon()?!0:!this.hasNewIconSlots()&&[`top`,`bottom`].includes(this.iconPosition)}}};function l(e,t,n,r,i,a){let o=(0,s.resolveComponent)(`dt-loader`);return(0,s.openBlock)(),(0,s.createBlock)((0,s.resolveDynamicComponent)(a.computedTag),(0,s.mergeProps)({class:[`base-button__button`,a.buttonClasses()],"data-qa":`dt-button`,style:{width:n.width},"aria-live":a.computedAriaLive,"aria-label":n.loading?i.i18n.$t(`DIALTONE_LOADING`):e.$attrs[`aria-label`]},a.computedAttrs,(0,s.toHandlers)(a.computedListeners)),{default:(0,s.withCtx)(()=>[n.loading&&n.kind!==`unstyled`?((0,s.openBlock)(),(0,s.createBlock)(o,{key:0,class:`d-btn__loader`,size:a.loaderSize,"aria-hidden":`true`},null,8,[`size`])):(0,s.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.leading)?((0,s.openBlock)(),(0,s.createElementBlock)(`span`,{key:1,class:(0,s.normalizeClass)([`d-btn__leading`,n.leadingClass])},[(0,s.renderSlot)(e.$slots,`leading`)],2)):(0,s.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.blockStartIcon)?((0,s.openBlock)(),(0,s.createElementBlock)(`span`,{key:2,"data-qa":`dt-button-block-start-icon`,class:(0,s.normalizeClass)([`base-button__icon`,{"d-btn__icon":n.kind!==`unstyled`,"d-btn__icon--top":n.kind!==`unstyled`},n.blockStartIconClass])},[(0,s.renderSlot)(e.$slots,`blockStartIcon`,{iconSize:a.iconSize})],2)):(0,s.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.startIcon)?((0,s.openBlock)(),(0,s.createElementBlock)(`span`,{key:3,"data-qa":`dt-button-start-icon`,class:(0,s.normalizeClass)([`base-button__icon`,{"d-btn__icon":n.kind!==`unstyled`,"d-btn__icon--left":n.kind!==`unstyled`},n.startIconClass])},[(0,s.renderSlot)(e.$slots,`startIcon`,{iconSize:a.iconSize})],2)):(0,s.createCommentVNode)(``,!0),a.shouldRenderLegacyIcon()?((0,s.openBlock)(),(0,s.createElementBlock)(`span`,{key:4,"data-qa":`dt-button-icon`,class:(0,s.normalizeClass)([`base-button__icon`,{"d-btn__icon":n.kind!==`unstyled`,[i.ICON_POSITION_MODIFIERS[n.iconPosition]]:n.kind!==`unstyled`},n.iconClass])},[(0,s.renderSlot)(e.$slots,`icon`,{iconSize:a.iconSize})],2)):(0,s.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.default)?((0,s.openBlock)(),(0,s.createElementBlock)(`span`,{key:5,"data-qa":`dt-button-label`,class:(0,s.normalizeClass)([`base-button__label`,{"d-btn__label":n.kind!==`unstyled`},n.labelClass])},[(0,s.renderSlot)(e.$slots,`default`)],2)):(0,s.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.endIcon)?((0,s.openBlock)(),(0,s.createElementBlock)(`span`,{key:6,"data-qa":`dt-button-end-icon`,class:(0,s.normalizeClass)([`base-button__icon`,{"d-btn__icon":n.kind!==`unstyled`,"d-btn__icon--right":n.kind!==`unstyled`},n.endIconClass])},[(0,s.renderSlot)(e.$slots,`endIcon`,{iconSize:a.iconSize})],2)):(0,s.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.blockEndIcon)?((0,s.openBlock)(),(0,s.createElementBlock)(`span`,{key:7,"data-qa":`dt-button-block-end-icon`,class:(0,s.normalizeClass)([`base-button__icon`,{"d-btn__icon":n.kind!==`unstyled`,"d-btn__icon--bottom":n.kind!==`unstyled`},n.blockEndIconClass])},[(0,s.renderSlot)(e.$slots,`blockEndIcon`,{iconSize:a.iconSize})],2)):(0,s.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.trailing)?((0,s.openBlock)(),(0,s.createElementBlock)(`span`,{key:8,class:(0,s.normalizeClass)([`d-btn__trailing`,n.trailingClass])},[(0,s.renderSlot)(e.$slots,`trailing`)],2)):(0,s.createCommentVNode)(``,!0)]),_:3},16,[`class`,`style`,`aria-live`,`aria-label`])}var u=n.t(c,[[`render`,l]]);exports.default=u;
 //# sourceMappingURL=button.cjs.map

package/dist/lib/button/button.js

@@ -1,15 +1,15 @@
 import { ordinalSizeValidator as e } from "../../common/validators/index.js";
 import { hasSlotContent as t } from "../../common/utils/index.js";
 import { t as n } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import r from "../loader/loader.js";
-import { BUTTON_ICON_SIZES as i, BUTTON_IMPORTANCE_MODIFIERS as a, BUTTON_KIND_MODIFIERS as o, BUTTON_SIZE_MODIFIERS as s, BUTTON_TYPES as c, ICON_POSITION_MODIFIERS as l, INVALID_COMBINATION as u } from "./button-constants.js";
-import { LINK_KIND_MODIFIERS as d, getLinkKindModifier as f } from "../link/link-constants.js";
-import { DialtoneLocalization as p } from "../../localization/index.js";
+import { DialtoneLocalization as r } from "../../localization/index.js";
+import i from "../loader/loader.js";
+import { BUTTON_ICON_SIZES as a, BUTTON_IMPORTANCE_MODIFIERS as o, BUTTON_KIND_MODIFIERS as s, BUTTON_SIZE_MODIFIERS as c, BUTTON_TYPES as l, ICON_POSITION_MODIFIERS as u, INVALID_COMBINATION as d } from "./button-constants.js";
+import { LINK_KIND_MODIFIERS as f, getLinkKindModifier as p } from "../link/link-constants.js";
 import { createBlock as m, createCommentVNode as h, createElementBlock as g, mergeProps as _, normalizeClass as v, openBlock as y, renderSlot as b, resolveComponent as x, resolveDynamicComponent as S, toHandlers as C, warn as w, withCtx as T } from "vue";
 //#region components/Button/Button.vue
 var E = {
 	name: "DtButton",
-	components: { DtLoader: r },
+	components: { DtLoader: i },
 	props: {
 		circle: {
 			type: Boolean,
@@ -18,12 +18,12 @@ var E = {
 		iconPosition: {
 			type: String,
 			default: "start",
-			validator: (e) => Object.keys(l).includes(e)
+			validator: (e) => Object.keys(u).includes(e)
 		},
 		importance: {
 			type: String,
 			default: "primary",
-			validator: (e) => Object.keys(a).includes(e)
+			validator: (e) => Object.keys(o).includes(e)
 		},
 		link: {
 			type: Boolean,
@@ -32,7 +32,7 @@ var E = {
 		linkKind: {
 			type: String,
 			default: "default",
-			validator: (e) => Object.keys(d).includes(e)
+			validator: (e) => Object.keys(f).includes(e)
 		},
 		linkInverted: {
 			type: Boolean,
@@ -53,7 +53,7 @@ var E = {
 		type: {
 			type: String,
 			default: "button",
-			validator: (e) => c.includes(e)
+			validator: (e) => l.includes(e)
 		},
 		width: {
 			type: String,
@@ -62,7 +62,7 @@ var E = {
 		size: {
 			type: [String, Number],
 			default: 300,
-			validator: e(s)
+			validator: e(c)
 		},
 		labelClass: {
 			type: [
@@ -135,7 +135,7 @@ var E = {
 		kind: {
 			type: String,
 			default: "default",
-			validator: (e) => Object.keys(o).includes(e)
+			validator: (e) => Object.keys(s).includes(e)
 		},
 		assertiveOnFocus: {
 			type: Boolean,
@@ -169,10 +169,10 @@ var E = {
 	emits: ["focusin", "focusout"],
 	data() {
 		return {
-			ICON_POSITION_MODIFIERS: l,
+			ICON_POSITION_MODIFIERS: u,
 			isInFocus: !1,
 			hasSlotContent: t,
-			i18n: new p()
+			i18n: new r()
 		};
 	},
 	computed: {
@@ -225,10 +225,10 @@ var E = {
 			return this.assertiveOnFocus && this.isInFocus ? "assertive" : this.$attrs.ariaLive;
 		},
 		iconSize() {
-			return i[String(this.size)];
+			return a[String(this.size)];
 		},
 		loaderSize() {
-			return i[String(this.size)];
+			return a[String(this.size)];
 		},
 		propCombination() {
 			return [
@@ -257,14 +257,14 @@ var E = {
 		buttonClasses() {
 			return this.link ? [
 				"d-link",
-				f(this.linkKind, this.linkInverted),
-				s[String(this.size)],
+				p(this.linkKind, this.linkInverted),
+				c[String(this.size)],
 				{ "d-link--no-underline": !this.resolvedUnderline }
 			] : this.kind === "unstyled" ? ["d-btn--unstyled"] : [
 				"d-btn",
-				a[this.importance],
-				o[this.kind],
-				s[String(this.size)],
+				o[this.importance],
+				s[this.kind],
+				c[String(this.size)],
 				{
 					"d-btn--circle": this.circle,
 					"d-btn--loading": this.loading,
@@ -276,7 +276,7 @@ var E = {
 		},
 		isInvalidPropCombination(e, t, n) {
 			if (this.kind === "unstyled") return !0;
-			for (let r of u) if (e === r.circle && t === r.kind && n === r.importance) return w(r.message), !1;
+			for (let r of d) if (e === r.circle && t === r.kind && n === r.importance) return w(r.message), !1;
 			return !0;
 		},
 		hasStartIcon() {