@dialpad/dialtone 9.83.1 → 9.84.0

package/dist/vue3/components/avatar/avatar.vue.js

@@ -0,0 +1,368 @@
+import { getUniqueString, hasSlotContent, getRandomElement } from "../../common/utils.js";
+import { AVATAR_SIZE_MODIFIERS, AVATAR_PRESENCE_STATES, AVATAR_GROUP_VALIDATOR, AVATAR_KIND_MODIFIERS, AVATAR_PRESENCE_SIZE_MODIFIERS, AVATAR_ICON_SIZES, AVATAR_RANDOM_COLORS } from "./avatar_constants.js";
+import { ICON_SIZE_MODIFIERS } from "../icon/icon_constants.js";
+import { extractInitialsFromName } from "./utils.js";
+import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementVNode, createElementBlock, renderSlot, toDisplayString, createCommentVNode, mergeProps } from "vue";
+/* empty css            */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+import DtPresence from "../presence/presence.vue.js";
+const _sfc_main = {
+  name: "DtAvatar",
+  components: { DtPresence },
+  inheritAttrs: false,
+  props: {
+    /**
+     * Id of the avatar content wrapper element
+     */
+    id: {
+      type: String,
+      default() {
+        return getUniqueString();
+      }
+    },
+    /**
+     * Pass in a seed to get the random color generation based on that string. For example if you pass in a
+     * user ID as the string it will return the same randomly generated colors every time for that user.
+     */
+    seed: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic
+     * if the seed prop is set.
+     */
+    color: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The size of the avatar
+     * @values xs, sm, md, lg, xl
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size)
+    },
+    /**
+     * Used to customize the avatar container
+     */
+    avatarClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Set classes on the avatar canvas. Wrapper around the core avatar image.
+     */
+    canvasClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Pass through classes. Used to customize the avatar icon
+     */
+    iconClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Determines whether to show the presence indicator for
+     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
+     * or 'active'. By default, it's null and nothing is shown.
+     * @values null, busy, away, offline, active
+     */
+    presence: {
+      type: String,
+      default: AVATAR_PRESENCE_STATES.NONE,
+      validator: (state) => {
+        return Object.values(AVATAR_PRESENCE_STATES).includes(state);
+      }
+    },
+    /**
+     * A set of props to be passed into the presence component.
+     */
+    presenceProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Determines whether to show a group avatar.
+     * Limit to 2 digits max, more than 99 will be rendered as “99+”.
+     * if the number is 1 or less it would just show the regular avatar as if group had not been set.
+     */
+    group: {
+      type: Number,
+      default: void 0,
+      validator: (group) => AVATAR_GROUP_VALIDATOR(group)
+    },
+    /**
+     * The text that overlays the avatar
+     */
+    overlayText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Used to customize the avatar overlay
+     */
+    overlayClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Source of the image
+     */
+    imageSrc: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Alt attribute of the image, required if imageSrc is provided.
+     * Can be set to '' (empty string) if the image is described
+     * in text nearby
+     */
+    imageAlt: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Icon size to be displayed on the avatar
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    iconSize: {
+      type: String,
+      default: "",
+      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size)
+    },
+    /**
+     * Full name used to extract initials.
+     */
+    fullName: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Makes the avatar focusable and clickable,
+     * emits a click event when clicked.
+     */
+    clickable: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Descriptive label for the icon.
+     * To avoid a11y issues, set this prop if clickable and iconName are set.
+     */
+    iconAriaLabel: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: [
+    /**
+     * Avatar click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click"
+  ],
+  data() {
+    return {
+      AVATAR_SIZE_MODIFIERS,
+      AVATAR_KIND_MODIFIERS,
+      AVATAR_PRESENCE_SIZE_MODIFIERS,
+      AVATAR_ICON_SIZES,
+      imageLoadedSuccessfully: null,
+      formattedInitials: "",
+      initializing: false,
+      hasSlotContent
+    };
+  },
+  computed: {
+    hasOverlayIcon() {
+      return hasSlotContent(this.$slots.overlayIcon);
+    },
+    iconDataQa() {
+      return "dt-avatar-icon";
+    },
+    avatarClasses() {
+      return [
+        "d-avatar",
+        AVATAR_SIZE_MODIFIERS[this.validatedSize],
+        this.avatarClass,
+        {
+          "d-avatar--group": this.showGroup,
+          [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),
+          "d-avatar--clickable": this.clickable
+        }
+      ];
+    },
+    overlayClasses() {
+      return [
+        "d-avatar__overlay",
+        this.overlayClass,
+        { "d-avatar__overlay-icon": this.hasOverlayIcon }
+      ];
+    },
+    showGroup() {
+      return AVATAR_GROUP_VALIDATOR(this.group);
+    },
+    formattedGroup() {
+      return this.group > 99 ? "99+" : this.group;
+    },
+    validatedSize() {
+      return this.group ? "xs" : this.size;
+    },
+    showImage() {
+      return this.imageLoadedSuccessfully !== false && this.imageSrc;
+    }
+  },
+  watch: {
+    fullName: {
+      immediate: true,
+      handler() {
+        this.formatInitials();
+      }
+    },
+    size: {
+      immediate: true,
+      handler() {
+        this.formatInitials();
+      }
+    },
+    group: {
+      immediate: true,
+      handler() {
+        this.formatInitials();
+      }
+    },
+    imageSrc(newSrc) {
+      this.imageLoadedSuccessfully = null;
+      if (!newSrc) return;
+      this.validateProps();
+      this.setImageListeners();
+    }
+  },
+  mounted() {
+    this.validateProps();
+    this.setImageListeners();
+  },
+  methods: {
+    isIconType() {
+      return hasSlotContent(this.$slots.icon);
+    },
+    async setImageListeners() {
+      await this.$nextTick();
+      const el = this.$refs.avatarImage;
+      if (!el) return;
+      el.addEventListener("load", () => this._loadedImageEventHandler(el), { once: true });
+      el.addEventListener("error", () => this._erroredImageEventHandler(el), { once: true });
+    },
+    formatInitials() {
+      const initials = extractInitialsFromName(this.fullName);
+      if (this.validatedSize === "xs") {
+        this.formattedInitials = "";
+      } else if (this.validatedSize === "sm") {
+        this.formattedInitials = initials[0];
+      } else {
+        this.formattedInitials = initials;
+      }
+    },
+    getColor() {
+      return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);
+    },
+    _loadedImageEventHandler(el) {
+      this.imageLoadedSuccessfully = true;
+      el.classList.remove("d-d-none");
+    },
+    _erroredImageEventHandler(el) {
+      this.imageLoadedSuccessfully = false;
+      el.classList.add("d-d-none");
+    },
+    validateProps() {
+      if (this.imageSrc && this.imageAlt === void 0) {
+        console.error('image-alt required if image-src is provided. Can be set to "" (empty string) if the image is described in text nearby');
+      }
+    },
+    handleClick(e) {
+      if (!this.clickable) return;
+      this.$emit("click", e);
+    }
+  }
+};
+const _hoisted_1 = ["src", "alt"];
+const _hoisted_2 = ["aria-label", "data-qa", "role"];
+const _hoisted_3 = {
+  key: 1,
+  class: "d-avatar__overlay-text"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "d-avatar__count",
+  "data-qa": "dt-avatar-count"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_presence = resolveComponent("dt-presence");
+  return openBlock(), createBlock(resolveDynamicComponent($props.clickable ? "button" : "div"), {
+    id: $props.id,
+    class: normalizeClass($options.avatarClasses),
+    "data-qa": "dt-avatar",
+    onClick: $options.handleClick
+  }, {
+    default: withCtx(() => [
+      createElementVNode("div", {
+        ref: "canvas",
+        class: normalizeClass([
+          $props.canvasClass,
+          "d-avatar__canvas",
+          { "d-avatar--image-loaded": $data.imageLoadedSuccessfully }
+        ])
+      }, [
+        $options.showImage ? (openBlock(), createElementBlock("img", {
+          key: 0,
+          ref: "avatarImage",
+          class: "d-avatar__image",
+          "data-qa": "dt-avatar-image",
+          src: $props.imageSrc,
+          alt: $props.imageAlt
+        }, null, 8, _hoisted_1)) : $options.isIconType() ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: normalizeClass([$props.iconClass, $data.AVATAR_KIND_MODIFIERS.icon]),
+          "aria-label": $props.clickable ? $props.iconAriaLabel : "",
+          "data-qa": $options.iconDataQa,
+          role: $props.clickable ? "button" : ""
+        }, [
+          renderSlot(_ctx.$slots, "icon", {
+            iconSize: $props.iconSize || $data.AVATAR_ICON_SIZES[$props.size]
+          })
+        ], 10, _hoisted_2)) : (openBlock(), createElementBlock("span", {
+          key: 2,
+          class: normalizeClass([$data.AVATAR_KIND_MODIFIERS.initials])
+        }, toDisplayString($data.formattedInitials), 3))
+      ], 2),
+      $options.hasOverlayIcon || $props.overlayText ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass($options.overlayClasses)
+      }, [
+        $options.hasOverlayIcon ? renderSlot(_ctx.$slots, "overlayIcon", { key: 0 }) : $props.overlayText ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString($props.overlayText), 1)) : createCommentVNode("", true)
+      ], 2)) : createCommentVNode("", true),
+      $options.showGroup ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString($options.formattedGroup), 1)) : createCommentVNode("", true),
+      $props.presence && !$options.showGroup ? (openBlock(), createBlock(_component_dt_presence, mergeProps({
+        key: 2,
+        presence: $props.presence,
+        class: [
+          "d-avatar__presence",
+          $data.AVATAR_PRESENCE_SIZE_MODIFIERS[$props.size]
+        ]
+      }, $props.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : createCommentVNode("", true)
+    ]),
+    _: 3
+  }, 8, ["id", "class", "onClick"]);
+}
+const DtAvatar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  DtAvatar as default
+};
+//# sourceMappingURL=avatar.vue.js.map

package/dist/vue3/components/avatar/avatar.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.vue.js","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    data-qa=\"dt-avatar\"\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      <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=\"clickable ? iconAriaLabel : ''\"\n        :data-qa=\"iconDataQa\"\n        :role=\"clickable ? 'button' : ''\"\n      >\n        <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n        <slot\n          name=\"icon\"\n          :icon-size=\"iconSize || AVATAR_ICON_SIZES[size]\"\n        />\n      </div>\n      <span\n        v-else\n        :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n      >\n        {{ formattedInitials }}\n      </span>\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    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup\"\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, getRandomElement, hasSlotContent } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\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  inheritAttrs: false,\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     * Pass in a seed to get the random color generation based on that string. For example if you pass in a\n     * user ID as the string it will return the same randomly generated colors every time for that user.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n     * if the seed prop is set.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\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     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\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     * Icon size to be displayed on the avatar\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '',\n      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size),\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 clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\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  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      AVATAR_ICON_SIZES,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\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--color-${this.getColor()}`]: !this.isIconType(),\n          'd-avatar--clickable': this.clickable,\n        },\n      ];\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      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n      return this.group ? 'xs' : 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  },\n\n  methods: {\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\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\n      if (this.validatedSize === 'xs') {\n        this.formattedInitials = '';\n      } else if (this.validatedSize === 'sm') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    getColor () {\n      return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\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.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n//TODO: Move these classes to dialtone and document.\n.d-avatar--image-loaded {\n  background-color: transparent;\n  background-image: unset;\n}\n\n.d-avatar__count {\n  z-index: var(--zi-base);\n}\n\n.d-avatar__presence {\n  z-index: var(--zi-base);\n}\n\n.d-avatar__overlay {\n  background-color: var(--dt-color-surface-contrast-opaque);\n  opacity: var(--dt-opacity-900);\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--dt-size-radius-circle);\n  z-index: var(--zi-base);\n}\n\n.d-avatar__overlay-icon {\n  color: var(--dt-color-foreground-primary-inverted);\n  width: 100%;\n}\n\n.d-avatar__overlay-text {\n  color: var(--dt-color-foreground-primary-inverted);\n  font-weight: var(--dt-font-weight-bold);\n  font-size: var(--dt-font-size-200);\n  width: 100%;\n  text-align: center;\n}\n\n.d-avatar--clickable {\n  --avatar-color-border: transparent;\n\n  cursor: pointer;\n  padding: 0;\n  background-color: transparent;\n\n  border-radius: var(--dt-size-radius-circle);\n  border: var(--dt-size-border-100) solid var(--avatar-color-border);\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: var(--dt-shadow-focus);\n  }\n\n  &:hover {\n    --avatar-color-border: var(--dt-color-border-default);\n  }\n\n  &:active {\n    --avatar-color-border: var(--dt-color-border-moderate);\n\n    transform: scale(0.98);\n  }\n}\n</style>\n"],"names":["_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_createElementVNode","_createElementBlock","_renderSlot","_toDisplayString","_createCommentVNode","_openBlock","_mergeProps"],"mappings":"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"}

package/dist/vue3/components/avatar/avatar_constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar_constants.cjs","sources":["../../../components/avatar/avatar_constants.js"],"sourcesContent":["export const AVATAR_SIZE_MODIFIERS = {\n  xs: 'd-avatar--xs',\n  sm: 'd-avatar--sm',\n  md: 'd-avatar--md',\n  lg: 'd-avatar--lg',\n  xl: 'd-avatar--xl',\n};\n\nexport const AVATAR_KIND_MODIFIERS = {\n  default: '',\n  icon: 'd-avatar__icon',\n  initials: 'd-avatar__initials',\n};\n\nexport const AVATAR_PRESENCE_SIZE_MODIFIERS = {\n  md: 'd-avatar__presence--md',\n  lg: 'd-avatar__presence--lg',\n};\n\nexport const AVATAR_PRESENCE_STATES = {\n  NONE: '',\n  BUSY: 'busy',\n  AWAY: 'away',\n  OFFLINE: 'offline',\n  ACTIVE: 'active',\n};\n\nexport const AVATAR_ICON_SIZES = {\n  xs: '100',\n  sm: '200',\n  md: '300',\n  lg: '500',\n  xl: '600',\n};\n\nexport const AVATAR_COLORS = [\n  '000',\n  '100',\n  '200',\n  '300',\n  '400',\n  '500',\n  '600',\n  '700',\n  '800',\n  '900',\n  '1000',\n  '1100',\n  '1200',\n  '1300',\n  '1400',\n  '1500',\n  '1600',\n  '1700',\n  '1800',\n];\n\n// We do not use the color '000' (grey) in the randomized avatar colors, but it can still be set manually.\nexport const AVATAR_RANDOM_COLORS = AVATAR_COLORS.slice(1);\n\nexport const AVATAR_GROUP_VALIDATOR = (group) => group > 1;\n\nexport default {\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_ICON_SIZES,\n  AVATAR_COLORS,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,wBAAwB;AAAA,EACnC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,wBAAwB;AAAA,EACnC,SAAS;AAAA,EACT,MAAM;AAAA,EACN,UAAU;AACZ;AAEY,MAAC,iCAAiC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,QAAQ;AACV;AAEY,MAAC,oBAAoB;AAAA,EAC/B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,gBAAgB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGY,MAAC,uBAAuB,cAAc,MAAM,CAAC;AAE7C,MAAC,yBAAyB,CAAC,UAAU,QAAQ;;;;;;;;;"}

package/dist/vue3/components/avatar/avatar_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar_constants.js","sources":["../../../components/avatar/avatar_constants.js"],"sourcesContent":["export const AVATAR_SIZE_MODIFIERS = {\n  xs: 'd-avatar--xs',\n  sm: 'd-avatar--sm',\n  md: 'd-avatar--md',\n  lg: 'd-avatar--lg',\n  xl: 'd-avatar--xl',\n};\n\nexport const AVATAR_KIND_MODIFIERS = {\n  default: '',\n  icon: 'd-avatar__icon',\n  initials: 'd-avatar__initials',\n};\n\nexport const AVATAR_PRESENCE_SIZE_MODIFIERS = {\n  md: 'd-avatar__presence--md',\n  lg: 'd-avatar__presence--lg',\n};\n\nexport const AVATAR_PRESENCE_STATES = {\n  NONE: '',\n  BUSY: 'busy',\n  AWAY: 'away',\n  OFFLINE: 'offline',\n  ACTIVE: 'active',\n};\n\nexport const AVATAR_ICON_SIZES = {\n  xs: '100',\n  sm: '200',\n  md: '300',\n  lg: '500',\n  xl: '600',\n};\n\nexport const AVATAR_COLORS = [\n  '000',\n  '100',\n  '200',\n  '300',\n  '400',\n  '500',\n  '600',\n  '700',\n  '800',\n  '900',\n  '1000',\n  '1100',\n  '1200',\n  '1300',\n  '1400',\n  '1500',\n  '1600',\n  '1700',\n  '1800',\n];\n\n// We do not use the color '000' (grey) in the randomized avatar colors, but it can still be set manually.\nexport const AVATAR_RANDOM_COLORS = AVATAR_COLORS.slice(1);\n\nexport const AVATAR_GROUP_VALIDATOR = (group) => group > 1;\n\nexport default {\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_ICON_SIZES,\n  AVATAR_COLORS,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n};\n"],"names":[],"mappings":"AAAY,MAAC,wBAAwB;AAAA,EACnC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,wBAAwB;AAAA,EACnC,SAAS;AAAA,EACT,MAAM;AAAA,EACN,UAAU;AACZ;AAEY,MAAC,iCAAiC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,QAAQ;AACV;AAEY,MAAC,oBAAoB;AAAA,EAC/B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,gBAAgB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGY,MAAC,uBAAuB,cAAc,MAAM,CAAC;AAE7C,MAAC,yBAAyB,CAAC,UAAU,QAAQ;"}

package/dist/vue3/components/avatar/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../../../components/avatar/utils.js"],"sourcesContent":["export const extractInitialsFromName = (fullName) => {\n  if (typeof fullName !== 'string' || !fullName.trim()) return '';\n\n  const names = fullName.trim().split(/\\s+/g);\n\n  return names.length === 1\n    ? names.join('').substring(0, 2)\n    : names.filter((_, index) => (index === 0 || index === names.length - 1))\n      .map(name => name.slice(0, 1).toUpperCase())\n      .join('');\n};\n"],"names":[],"mappings":";;AAAY,MAAC,0BAA0B,CAAC,aAAa;AACnD,MAAI,OAAO,aAAa,YAAY,CAAC,SAAS,KAAI,EAAI,QAAO;AAE7D,QAAM,QAAQ,SAAS,KAAM,EAAC,MAAM,MAAM;AAE1C,SAAO,MAAM,WAAW,IACpB,MAAM,KAAK,EAAE,EAAE,UAAU,GAAG,CAAC,IAC7B,MAAM,OAAO,CAAC,GAAG,UAAW,UAAU,KAAK,UAAU,MAAM,SAAS,CAAE,EACrE,IAAI,UAAQ,KAAK,MAAM,GAAG,CAAC,EAAE,aAAa,EAC1C,KAAK,EAAE;AACd;;"}

package/dist/vue3/components/avatar/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../components/avatar/utils.js"],"sourcesContent":["export const extractInitialsFromName = (fullName) => {\n  if (typeof fullName !== 'string' || !fullName.trim()) return '';\n\n  const names = fullName.trim().split(/\\s+/g);\n\n  return names.length === 1\n    ? names.join('').substring(0, 2)\n    : names.filter((_, index) => (index === 0 || index === names.length - 1))\n      .map(name => name.slice(0, 1).toUpperCase())\n      .join('');\n};\n"],"names":[],"mappings":"AAAY,MAAC,0BAA0B,CAAC,aAAa;AACnD,MAAI,OAAO,aAAa,YAAY,CAAC,SAAS,KAAI,EAAI,QAAO;AAE7D,QAAM,QAAQ,SAAS,KAAM,EAAC,MAAM,MAAM;AAE1C,SAAO,MAAM,WAAW,IACpB,MAAM,KAAK,EAAE,EAAE,UAAU,GAAG,CAAC,IAC7B,MAAM,OAAO,CAAC,GAAG,UAAW,UAAU,KAAK,UAAU,MAAM,SAAS,CAAE,EACrE,IAAI,UAAQ,KAAK,MAAM,GAAG,CAAC,EAAE,aAAa,EAC1C,KAAK,EAAE;AACd;"}

package/dist/vue3/components/badge/badge.vue.cjs

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const badge_constants = require("./badge_constants.cjs");
+const common_utils = require("../../common/utils.cjs");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
+const icon_constants = require("../icon/icon_constants.cjs");
+const _sfc_main = {
+  name: "DtBadge",
+  props: {
+    /**
+     * The size of the left and right icons.
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    iconSize: {
+      type: String,
+      default: "200",
+      validator: (s) => Object.keys(icon_constants.ICON_SIZE_MODIFIERS).includes(s)
+    },
+    /**
+     * Text for the badge content
+     */
+    text: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The kind of badge which determines the styling
+     * @values label, count
+     */
+    kind: {
+      type: String,
+      default: "label",
+      validator: (kind) => Object.keys(badge_constants.BADGE_KIND_MODIFIERS).includes(kind)
+    },
+    /**
+     * Color for the badge background
+     * @values default, info, success, warning, critical, bulletin, ai
+     */
+    type: {
+      type: String,
+      default: "default",
+      validator: (type) => Object.keys(badge_constants.BADGE_TYPE_MODIFIERS).includes(type)
+    },
+    /**
+     * Decoration for the badge. This can be only used with kind: label and type: default
+     * with no left and right icons
+     * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,
+     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,
+     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400
+     */
+    decoration: {
+      type: String,
+      default: void 0,
+      validator: (type) => Object.keys(badge_constants.BADGE_DECORATION_MODIFIERS).includes(type)
+    },
+    /**
+     * Used to customize the label container
+     */
+    labelClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Shows a subtle appearance for the badge
+     * Currently only affects the badge when type is bulletin.
+     */
+    subtle: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Outlines the badge with a border
+     */
+    outlined: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      BADGE_TYPE_MODIFIERS: badge_constants.BADGE_TYPE_MODIFIERS,
+      BADGE_KIND_MODIFIERS: badge_constants.BADGE_KIND_MODIFIERS,
+      BADGE_DECORATION_MODIFIERS: badge_constants.BADGE_DECORATION_MODIFIERS
+    };
+  },
+  computed: {
+    hasLeftIcon() {
+      return common_utils.hasSlotContent(this.$slots.leftIcon);
+    },
+    hasRightIcon() {
+      return common_utils.hasSlotContent(this.$slots.rightIcon);
+    },
+    hasIcons() {
+      return this.hasLeftIcon || this.hasRightIcon;
+    }
+  },
+  updated() {
+    this.validateProps();
+  },
+  methods: {
+    validateProps() {
+      this.validateTypePropCombination();
+      this.validateDecorationPropCombination();
+    },
+    validateTypePropCombination() {
+      if (this.type === "ai" && this.kind === "count") {
+        console.error("DtBadge error: type: 'ai' with kind: 'count' is an invalid combination.");
+      }
+      if (this.type !== "bulletin" && this.subtle) {
+        console.error("DtBadge error: subtle can only be used with type 'bulletin'");
+      }
+    },
+    validateDecorationPropCombination() {
+      if (!this.decoration) return;
+      if (this.kind !== "label" || this.type !== "default") {
+        console.error("DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'.");
+      }
+      if (this.hasIcons) {
+        console.error("DtBadge error: decoration prop cannot be used with leftIcon or rightIcon.");
+      }
+    }
+  }
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "d-badge__decorative"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "d-badge__icon-left"
+};
+const _hoisted_3 = {
+  key: 2,
+  class: "d-badge__icon-right"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("span", {
+    class: vue.normalizeClass([
+      "d-badge",
+      $data.BADGE_TYPE_MODIFIERS[$props.type],
+      $data.BADGE_KIND_MODIFIERS[$props.kind],
+      $data.BADGE_DECORATION_MODIFIERS[$props.decoration],
+      { "d-badge--subtle": $props.subtle },
+      { "d-badge--outlined": $props.outlined }
+    ]),
+    "data-qa": "dt-badge"
+  }, [
+    $props.decoration ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1)) : vue.createCommentVNode("", true),
+    $options.hasLeftIcon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
+      vue.renderSlot(_ctx.$slots, "leftIcon", { iconSize: $props.iconSize })
+    ])) : vue.createCommentVNode("", true),
+    vue.createElementVNode("span", {
+      class: vue.normalizeClass(["d-badge__label", $props.labelClass])
+    }, [
+      vue.renderSlot(_ctx.$slots, "default", {}, () => [
+        vue.createTextVNode(vue.toDisplayString($props.text), 1)
+      ])
+    ], 2),
+    $options.hasRightIcon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, [
+      vue.renderSlot(_ctx.$slots, "rightIcon", { iconSize: $props.iconSize })
+    ])) : vue.createCommentVNode("", true)
+  ], 2);
+}
+const DtBadge = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
+exports.default = DtBadge;
+//# sourceMappingURL=badge.vue.cjs.map

package/dist/vue3/components/badge/badge.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.vue.cjs","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\"\n    >\n      <!-- @slot Slot for left icon, icon-size slot prop defaults to '200' -->\n      <slot\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\"\n    >\n      <!-- @slot Slot for right icon, icon-size slot prop defaults to '200' -->\n      <slot\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 './badge_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\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,\n      default: '200',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\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, success, 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 default, 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     * 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.leftIcon);\n    },\n\n    hasRightIcon () {\n      return hasSlotContent(this.$slots.rightIcon);\n    },\n\n    hasIcons () {\n      return this.hasLeftIcon || this.hasRightIcon;\n    },\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 leftIcon or rightIcon.');\n      }\n    },\n  },\n};\n</script>\n"],"names":["ICON_SIZE_MODIFIERS","BADGE_KIND_MODIFIERS","BADGE_TYPE_MODIFIERS","BADGE_DECORATION_MODIFIERS","hasSlotContent","_createElementBlock","_normalizeClass","_openBlock","_createCommentVNode","_renderSlot","_createElementVNode","_createTextVNode","_toDisplayString"],"mappings":"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"}