npm - @dialpad/dialtone - Versions diffs - 9.71.0-beta.2 → 9.72.0 - Mend

@dialpad/dialtone 9.71.0-beta.2 → 9.72.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (209) hide show

package/dist/vue3/components/avatar/avatar.vue.cjs CHANGED Viewed

@@ -1,15 +1,18 @@
 "use strict";
 const common_utils = require("../../common/utils.cjs");
 const avatar_constants = require("./avatar_constants.cjs");
+const storybook_utils = require("../../common/storybook_utils.cjs");
 const icon_constants = require("../icon/icon_constants.cjs");
 const utils = require("./utils.cjs");
 const vue = require("vue");
 ;/* empty css              */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const presence = require("../presence/presence.vue.cjs");
+const icon = require("../icon/icon.vue.cjs");
+const ICONS_LIST = storybook_utils.getIconNames();
 const _sfc_main = {
   name: "DtAvatar",
-  components: { DtPresence: presence },
+  components: { DtPresence: presence, DtIcon: icon },
   inheritAttrs: false,
   props: {
     /**
@@ -97,6 +100,13 @@ const _sfc_main = {
       default: void 0,
       validator: (group) => avatar_constants.AVATAR_GROUP_VALIDATOR(group)
     },
+    /**
+     * The icon that overlays the avatar
+     */
+    overlayIcon: {
+      type: String,
+      default: ""
+    },
     /**
      * The text that overlays the avatar
      */
@@ -127,6 +137,14 @@ const _sfc_main = {
       type: String,
       default: void 0
     },
+    /**
+     * Icon name to be displayed on the avatar
+     */
+    iconName: {
+      type: String,
+      default: void 0,
+      validator: (name) => ICONS_LIST.includes(name)
+    },
     /**
      * Icon size to be displayed on the avatar
      * @values 100, 200, 300, 400, 500, 600, 700, 800
@@ -177,19 +195,12 @@ const _sfc_main = {
       AVATAR_ICON_SIZES: avatar_constants.AVATAR_ICON_SIZES,
       imageLoadedSuccessfully: null,
       formattedInitials: "",
-      initializing: false,
-      hasSlotContent: common_utils.hasSlotContent
+      initializing: false
     };
   },
   computed: {
-    isIconType() {
-      return common_utils.hasSlotContent(this.$slots.icon);
-    },
-    hasOverlayIcon() {
-      return common_utils.hasSlotContent(this.$slots.overlayIcon);
-    },
-    iconDataQa() {
-      return "dt-avatar-icon";
+    isNotIconType() {
+      return !this.iconName;
     },
     avatarClasses() {
       return [
@@ -198,7 +209,7 @@ const _sfc_main = {
         this.avatarClass,
         {
           "d-avatar--group": this.showGroup,
-          [`d-avatar--color-${this.getColor()}`]: !this.isIconType,
+          [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,
           "d-avatar--clickable": this.clickable
         }
       ];
@@ -206,8 +217,7 @@ const _sfc_main = {
     overlayClasses() {
       return [
         "d-avatar__overlay",
-        this.overlayClass,
-        { "d-avatar__overlay-icon": this.hasOverlayIcon }
+        this.overlayClass
       ];
     },
     showGroup() {
@@ -294,17 +304,17 @@ const _sfc_main = {
   }
 };
 const _hoisted_1 = ["src", "alt"];
-const _hoisted_2 = ["aria-label", "data-qa", "role"];
-const _hoisted_3 = {
+const _hoisted_2 = {
   key: 1,
   class: "d-avatar__overlay-text"
 };
-const _hoisted_4 = {
+const _hoisted_3 = {
   key: 1,
   class: "d-avatar__count",
   "data-qa": "dt-avatar-count"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
   const _component_dt_presence = vue.resolveComponent("dt-presence");
   return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.clickable ? "button" : "div"), {
     id: $props.id,
@@ -328,28 +338,29 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           "data-qa": "dt-avatar-image",
           src: $props.imageSrc,
           alt: $props.imageAlt
-        }, null, 8, _hoisted_1)) : $options.isIconType ? (vue.openBlock(), vue.createElementBlock("div", {
+        }, null, 8, _hoisted_1)) : $props.iconName ? (vue.openBlock(), vue.createBlock(_component_dt_icon, {
           key: 1,
+          name: $props.iconName,
+          "aria-label": $props.iconAriaLabel,
+          size: $props.iconSize || $data.AVATAR_ICON_SIZES[$props.size],
           class: vue.normalizeClass([$props.iconClass, $data.AVATAR_KIND_MODIFIERS.icon]),
-          "aria-label": $props.clickable ? $props.iconAriaLabel : "",
-          "data-qa": $options.iconDataQa,
-          role: $props.clickable ? "button" : ""
-        }, [
-          vue.renderSlot(_ctx.$slots, "icon", {
-            iconSize: $props.iconSize || $data.AVATAR_ICON_SIZES[$props.size]
-          })
-        ], 10, _hoisted_2)) : (vue.openBlock(), vue.createElementBlock("span", {
+          "data-qa": "dt-avatar-icon"
+        }, null, 8, ["name", "aria-label", "size", "class"])) : (vue.openBlock(), vue.createElementBlock("span", {
           key: 2,
           class: vue.normalizeClass([$data.AVATAR_KIND_MODIFIERS.initials])
         }, vue.toDisplayString($data.formattedInitials), 3))
       ], 2),
-      $options.hasOverlayIcon || $props.overlayText ? (vue.openBlock(), vue.createElementBlock("div", {
+      $props.overlayIcon || $props.overlayText ? (vue.openBlock(), vue.createElementBlock("div", {
         key: 0,
         class: vue.normalizeClass($options.overlayClasses)
       }, [
-        $options.hasOverlayIcon ? vue.renderSlot(_ctx.$slots, "overlayIcon", { key: 0 }) : $props.overlayText ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_3, vue.toDisplayString($props.overlayText), 1)) : vue.createCommentVNode("", true)
+        $props.overlayIcon ? (vue.openBlock(), vue.createBlock(_component_dt_icon, {
+          key: 0,
+          class: "d-avatar__overlay-icon",
+          name: $props.overlayIcon
+        }, null, 8, ["name"])) : $props.overlayText ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2, vue.toDisplayString($props.overlayText), 1)) : vue.createCommentVNode("", true)
       ], 2)) : vue.createCommentVNode("", true),
-      $options.showGroup ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, vue.toDisplayString($options.formattedGroup), 1)) : vue.createCommentVNode("", true),
+      $options.showGroup ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, vue.toDisplayString($options.formattedGroup), 1)) : vue.createCommentVNode("", true),
       $props.presence && !$options.showGroup ? (vue.openBlock(), vue.createBlock(_component_dt_presence, vue.mergeProps({
         key: 2,
         presence: $props.presence,
@@ -359,7 +370,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ]
       }, $props.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : vue.createCommentVNode("", true)
     ]),
-    _: 3
+    _: 1
   }, 8, ["id", "class", "onClick"]);
 }
 const DtAvatar = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);

package/dist/vue3/components/avatar/avatar.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.vue.cjs","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 isIconType () {\n return hasSlotContent(this.$slots.icon);\n },\n\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 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":["DtPresence","getUniqueString","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","hasSlotContent","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","_openBlock","_createBlock","_resolveDynamicComponent","_createElementVNode","_normalizeClass","_createElementBlock","_renderSlot","_toDisplayString","_mergeProps"],"mappings":"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"}
1	+ {"version":3,"file":"avatar.vue.cjs","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 <dt-icon\n v-else-if=\"iconName\"\n :name=\"iconName\"\n :aria-label=\"iconAriaLabel\"\n :size=\"iconSize \|\| AVATAR_ICON_SIZES[size]\"\n :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n data-qa=\"dt-avatar-icon\"\n />\n <span\n v-else\n :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n >\n {{ formattedInitials }}\n </span>\n </div>\n <div\n v-if=\"overlayIcon \|\| overlayText\"\n :class=\"overlayClasses\"\n >\n <dt-icon\n v-if=\"overlayIcon\"\n class=\"d-avatar__overlay-icon\"\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 } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport { DtIcon } from '@/components/icon';\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 { getIconNames } from '@/common/storybook_utils.js';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\nconst ICONS_LIST = getIconNames();\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, DtIcon },\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 icon that overlays the avatar\n /\n overlayIcon: {\n type: String,\n default: '',\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 name to be displayed on the avatar\n /\n iconName: {\n type: String,\n default: undefined,\n validator: (name) => ICONS_LIST.includes(name),\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 };\n },\n\n computed: {\n isNotIconType () {\n return !this.iconName;\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.isNotIconType,\n 'd-avatar--clickable': this.clickable,\n },\n ];\n },\n\n overlayClasses () {\n return [\n 'd-avatar__overlay',\n this.overlayClass,\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 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":["getIconNames","DtPresence","DtIcon","getUniqueString","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","_openBlock","_createBlock","_resolveDynamicComponent","_createElementVNode","_normalizeClass","_createElementBlock","_toDisplayString","_mergeProps"],"mappings":"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"}

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

@@ -1,14 +1,17 @@
-import { getUniqueString, hasSlotContent, getRandomElement } from "../../common/utils.js";
+import { getUniqueString, 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 { getIconNames } from "../../common/storybook_utils.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";
+import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementVNode, createElementBlock, toDisplayString, createCommentVNode, mergeProps } from "vue";
 /* empty css            */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 import DtPresence from "../presence/presence.vue.js";
+import DtIcon from "../icon/icon.vue.js";
+const ICONS_LIST = getIconNames();
 const _sfc_main = {
   name: "DtAvatar",
-  components: { DtPresence },
+  components: { DtPresence, DtIcon },
   inheritAttrs: false,
   props: {
     /**
@@ -96,6 +99,13 @@ const _sfc_main = {
       default: void 0,
       validator: (group) => AVATAR_GROUP_VALIDATOR(group)
     },
+    /**
+     * The icon that overlays the avatar
+     */
+    overlayIcon: {
+      type: String,
+      default: ""
+    },
     /**
      * The text that overlays the avatar
      */
@@ -126,6 +136,14 @@ const _sfc_main = {
       type: String,
       default: void 0
     },
+    /**
+     * Icon name to be displayed on the avatar
+     */
+    iconName: {
+      type: String,
+      default: void 0,
+      validator: (name) => ICONS_LIST.includes(name)
+    },
     /**
      * Icon size to be displayed on the avatar
      * @values 100, 200, 300, 400, 500, 600, 700, 800
@@ -176,19 +194,12 @@ const _sfc_main = {
       AVATAR_ICON_SIZES,
       imageLoadedSuccessfully: null,
       formattedInitials: "",
-      initializing: false,
-      hasSlotContent
+      initializing: false
     };
   },
   computed: {
-    isIconType() {
-      return hasSlotContent(this.$slots.icon);
-    },
-    hasOverlayIcon() {
-      return hasSlotContent(this.$slots.overlayIcon);
-    },
-    iconDataQa() {
-      return "dt-avatar-icon";
+    isNotIconType() {
+      return !this.iconName;
     },
     avatarClasses() {
       return [
@@ -197,7 +208,7 @@ const _sfc_main = {
         this.avatarClass,
         {
           "d-avatar--group": this.showGroup,
-          [`d-avatar--color-${this.getColor()}`]: !this.isIconType,
+          [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,
           "d-avatar--clickable": this.clickable
         }
       ];
@@ -205,8 +216,7 @@ const _sfc_main = {
     overlayClasses() {
       return [
         "d-avatar__overlay",
-        this.overlayClass,
-        { "d-avatar__overlay-icon": this.hasOverlayIcon }
+        this.overlayClass
       ];
     },
     showGroup() {
@@ -293,17 +303,17 @@ const _sfc_main = {
   }
 };
 const _hoisted_1 = ["src", "alt"];
-const _hoisted_2 = ["aria-label", "data-qa", "role"];
-const _hoisted_3 = {
+const _hoisted_2 = {
   key: 1,
   class: "d-avatar__overlay-text"
 };
-const _hoisted_4 = {
+const _hoisted_3 = {
   key: 1,
   class: "d-avatar__count",
   "data-qa": "dt-avatar-count"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = resolveComponent("dt-icon");
   const _component_dt_presence = resolveComponent("dt-presence");
   return openBlock(), createBlock(resolveDynamicComponent($props.clickable ? "button" : "div"), {
     id: $props.id,
@@ -327,28 +337,29 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           "data-qa": "dt-avatar-image",
           src: $props.imageSrc,
           alt: $props.imageAlt
-        }, null, 8, _hoisted_1)) : $options.isIconType ? (openBlock(), createElementBlock("div", {
+        }, null, 8, _hoisted_1)) : $props.iconName ? (openBlock(), createBlock(_component_dt_icon, {
           key: 1,
+          name: $props.iconName,
+          "aria-label": $props.iconAriaLabel,
+          size: $props.iconSize || $data.AVATAR_ICON_SIZES[$props.size],
           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", {
+          "data-qa": "dt-avatar-icon"
+        }, null, 8, ["name", "aria-label", "size", "class"])) : (openBlock(), createElementBlock("span", {
           key: 2,
           class: normalizeClass([$data.AVATAR_KIND_MODIFIERS.initials])
         }, toDisplayString($data.formattedInitials), 3))
       ], 2),
-      $options.hasOverlayIcon || $props.overlayText ? (openBlock(), createElementBlock("div", {
+      $props.overlayIcon || $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)
+        $props.overlayIcon ? (openBlock(), createBlock(_component_dt_icon, {
+          key: 0,
+          class: "d-avatar__overlay-icon",
+          name: $props.overlayIcon
+        }, null, 8, ["name"])) : $props.overlayText ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString($props.overlayText), 1)) : createCommentVNode("", true)
       ], 2)) : createCommentVNode("", true),
-      $options.showGroup ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString($options.formattedGroup), 1)) : createCommentVNode("", true),
+      $options.showGroup ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString($options.formattedGroup), 1)) : createCommentVNode("", true),
       $props.presence && !$options.showGroup ? (openBlock(), createBlock(_component_dt_presence, mergeProps({
         key: 2,
         presence: $props.presence,
@@ -358,7 +369,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ]
       }, $props.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : createCommentVNode("", true)
     ]),
-    _: 3
+    _: 1
   }, 8, ["id", "class", "onClick"]);
 }
 const DtAvatar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

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

	@@ -1 +1 @@
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 isIconType () {\n return hasSlotContent(this.$slots.icon);\n },\n\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 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":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementVNode","_normalizeClass","_createElementBlock","_renderSlot","_toDisplayString","_mergeProps"],"mappings":"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"}
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 <dt-icon\n v-else-if=\"iconName\"\n :name=\"iconName\"\n :aria-label=\"iconAriaLabel\"\n :size=\"iconSize \|\| AVATAR_ICON_SIZES[size]\"\n :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n data-qa=\"dt-avatar-icon\"\n />\n <span\n v-else\n :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n >\n {{ formattedInitials }}\n </span>\n </div>\n <div\n v-if=\"overlayIcon \|\| overlayText\"\n :class=\"overlayClasses\"\n >\n <dt-icon\n v-if=\"overlayIcon\"\n class=\"d-avatar__overlay-icon\"\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 } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport { DtIcon } from '@/components/icon';\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 { getIconNames } from '@/common/storybook_utils.js';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\nconst ICONS_LIST = getIconNames();\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, DtIcon },\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 icon that overlays the avatar\n /\n overlayIcon: {\n type: String,\n default: '',\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 name to be displayed on the avatar\n /\n iconName: {\n type: String,\n default: undefined,\n validator: (name) => ICONS_LIST.includes(name),\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 };\n },\n\n computed: {\n isNotIconType () {\n return !this.iconName;\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.isNotIconType,\n 'd-avatar--clickable': this.clickable,\n },\n ];\n },\n\n overlayClasses () {\n return [\n 'd-avatar__overlay',\n this.overlayClass,\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 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":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementVNode","_normalizeClass","_createElementBlock","_toDisplayString","_mergeProps"],"mappings":"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"}

package/dist/vue3/components/chip/chip.vue.cjs CHANGED Viewed

@@ -1,15 +1,15 @@
 "use strict";
-const vue3 = require("@dialpad/dialtone-icons/vue3");
 const chip_constants = require("./chip_constants.cjs");
 const common_utils = require("../../common/utils.cjs");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const button = require("../button/button.vue.cjs");
+const icon = require("../icon/icon.vue.cjs");
 const _sfc_main = {
   name: "DtChip",
   components: {
     DtButton: button,
-    DtIconClose: vue3.DtIconClose
+    DtIcon: icon
   },
   props: {
     /**
@@ -163,7 +163,7 @@ const _hoisted_3 = {
 };
 const _hoisted_4 = ["id"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon_close = vue.resolveComponent("dt-icon-close");
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
   const _component_dt_button = vue.resolveComponent("dt-button");
   return vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
     (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.interactive ? "button" : "span"), vue.mergeProps({
@@ -198,7 +198,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
     }), {
       icon: vue.withCtx(() => [
-        vue.createVNode(_component_dt_icon_close, { size: $options.closeButtonIconSize }, null, 8, ["size"])
+        vue.createVNode(_component_dt_icon, {
+          name: "close",
+          size: $options.closeButtonIconSize
+        }, null, 8, ["size"])
       ]),
       _: 1
     }, 16, ["class", "aria-label"])) : vue.createCommentVNode("", true)

package/dist/vue3/components/chip/chip.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chip.vue.cjs","sources":["../../../components/chip/chip.vue"],"sourcesContent":["<template>\n <span class=\"d-chip\">\n <component\n :is=\"interactive ? 'button' : 'span'\"\n :id=\"id\"\n :type=\"interactive && 'button'\"\n :class=\"chipClasses()\"\n data-qa=\"dt-chip\"\n :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n :aria-label=\"ariaLabel\"\n v-on=\"chipListeners\"\n >\n <span\n v-if=\"hasSlotContent($slots.icon)\"\n data-qa=\"dt-chip-icon\"\n class=\"d-chip__icon\"\n >\n <!-- @slot slot for Chip icon -->\n <slot name=\"icon\" />\n </span>\n <span\n v-else-if=\"hasSlotContent($slots.avatar)\"\n data-qa=\"dt-chip-avatar\"\n >\n <!-- @slot slot for Chip avatar -->\n <slot name=\"avatar\" />\n </span>\n <span\n v-if=\"hasSlotContent($slots.default)\"\n :id=\"`${id}-content`\"\n data-qa=\"dt-chip-label\"\n :class=\"['d-chip__text', contentClass]\"\n >\n <!-- @slot slot for Content within chip -->\n <slot />\n </span>\n </component>\n <dt-button\n v-if=\"!hideClose\"\n v-bind=\"closeButtonProps\"\n :class=\"chipCloseButtonClasses()\"\n data-qa=\"dt-chip-close\"\n :aria-label=\"closeButtonProps.ariaLabel\"\n @click=\"$emit('close')\"\n >\n <template #icon>\n <dt-icon-close\n :size=\"closeButtonIconSize\"\n />\n </template>\n </dt-button>\n </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { ~~DtIconClose~~ } from '~~@dialpad~~/~~dialtone-icons/vue3~~';\nimport {\n CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n CHIP_SIZE_MODIFIERS,\n CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\n\n/*\n A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n /\nexport default {\n name: 'DtChip',\n\n components: {\n DtButton,\n ~~DtIconClose~~,\n },\n\n props: {\n /\n A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.\n /\n closeButtonProps: {\n type: Object,\n default: function () { return { ariaLabel: 'close' }; },\n validator: (props) => {\n return !!props.ariaLabel;\n },\n },\n\n /\n Hides the close button on the chip\n * @values true, false\n /\n hideClose: {\n type: Boolean,\n default: false,\n },\n\n /\n The size of the chip.\n * @values xs, sm, md\n /\n size: {\n type: String,\n default: 'md',\n validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s),\n },\n\n /\n The interactivity of the chip.\n * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n * @values true, false\n /\n interactive: {\n type: Boolean,\n default: true,\n },\n\n /\n Id to use for the dialog's aria-labelledby.\n /\n id: {\n type: String,\n default: function () { return getUniqueString(); },\n },\n\n /\n Descriptive label for the chip content.\n * If this prop is unset the content in the default slot will be used as an aria-label.\n /\n ariaLabel: {\n type: String,\n default: '',\n },\n\n /\n Additional class name for the chip element.\n /\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the span element.\n /\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n },\n\n emits: [\n /\n Native chip click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Close button click event\n \n @event close\n /\n 'close',\n\n /\n Native chip key up event\n \n @event keyup\n * @type {KeyboardEvent}\n */\n 'keyup',\n ],\n\n data () {\n return {\n isActive: false,\n hasSlotContent,\n };\n },\n\n computed: {\n chipListeners () {\n return {\n click: event => {\n if (this.interactive) this.$emit('click', event);\n },\n\n keyup: event => {\n if (event.code?.toLowerCase() === 'delete') {\n this.onClose();\n } else {\n this.$emit('keyup', event);\n }\n },\n };\n },\n\n closeButtonIconSize () {\n return CHIP_ICON_SIZES[this.size];\n },\n },\n\n methods: {\n chipClasses () {\n return [\n this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n CHIP_SIZE_MODIFIERS[this.size],\n this.labelClass,\n ];\n },\n\n chipCloseButtonClasses () {\n return [\n 'd-chip__close',\n CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size],\n ];\n },\n\n onClose () {\n if (!this.hideClose) {\n this.$emit('close');\n }\n },\n },\n};\n</script>\n"],"names":["DtButton","~~DtIconClose~~","CHIP_SIZE_MODIFIERS","getUniqueString","hasSlotContent","CHIP_ICON_SIZES","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_renderSlot","_createVNode"],"mappings":";;;;;;;~~AAsEA~~,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAA;AAAAA,~~iBACAC~~,~~KAAW~~;~~AAAA~~,~~EACZ~~;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,WAAY;AAAE,eAAO,EAAE,WAAW,QAAS;AAAA,MAAG;AAAA,MACvD,WAAW,CAAC,UAAU;AACpB,eAAO,CAAC,CAAC,MAAM;AAAA,MAChB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAKC,kCAAmB,EAAE,SAAS,CAAC;AAAA,IAC9D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS,WAAY;AAAE,eAAOC,aAAe,gBAAA;AAAA,MAAK;AAAA,IACnD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,UAAU;AAAA,MACV,gBAAAC,aAAc;AAAA;EAEjB;AAAA,EAED,UAAU;AAAA,IACR,gBAAiB;AACf,aAAO;AAAA,QACL,OAAO,WAAS;AACd,cAAI,KAAK,YAAa,MAAK,MAAM,SAAS,KAAK;AAAA,QAChD;AAAA,QAED,OAAO,WAAS;;AACd,gBAAI,WAAM,SAAN,mBAAY,mBAAkB,UAAU;AAC1C,iBAAK,QAAO;AAAA,iBACP;AACL,iBAAK,MAAM,SAAS,KAAK;AAAA,UAC3B;AAAA,QACD;AAAA;IAEJ;AAAA,IAED,sBAAuB;AACrB,aAAOC,eAAe,gBAAC,KAAK,IAAI;AAAA,IACjC;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,cAAe;AACb,aAAO;AAAA,QACL,KAAK,OAAO,cAAc,IAAI,WAAW;AAAA,QACzCH,eAAmB,oBAAC,KAAK,IAAI;AAAA,QAC7B,KAAK;AAAA;IAER;AAAA,IAED,yBAA0B;AACxB,aAAO;AAAA,QACL;AAAA,QACAI,eAAgC,iCAAC,KAAK,IAAI;AAAA;IAE7C;AAAA,IAED,UAAW;AACT,UAAI,CAAC,KAAK,WAAW;AACnB,aAAK,MAAM,OAAO;AAAA,MACpB;AAAA,IACD;AAAA,EACF;AACH;~~AApOQ~~,MAAA,aAAA,EAAA,OAAM,SAAQ;;;EAad,WAAQ;AAAA,EACR,OAAM;;;;EAON,WAAQ;;;;;;AArBd,SAAAC,cAAA,GAAAC,~~uBAkDO~~,~~QAlDP~~,~~YAkDO~~;AAAA,~~sBAjDLC~~,IAkCY,YAAAC,4BAjCL,OAAW,cAAA,WAAA,MAAA,GADlBC,eAkCY;AAAA,MAhCT,IAAI,OAAE;AAAA,MACN,MAAM,OAAW,eAAA;AAAA,MACjB,OAAO,SAAW,YAAA;AAAA,MACnB,WAAQ;AAAA,MACP,mBAAiB,OAAA,YAAY,YAAe,OAAE,EAAA;AAAA,MAC9C,cAAY,OAAS;AAAA,IACtB,GAAAC,eAAM,SAAa,aAAA,CAAA,GAAA;AAAA,2BAEnB,MAOO;AAAA,QANC,MAAc,eAAC,KAAM,OAAC,IAAI,KADlCL,IAAAA,aAAAC,IAAAA,mBAOO,QAPP,YAOO;AAAA,UADLK,eAAoB,KAAA,QAAA,MAAA;AAAA,cAGT,MAAc,eAAC,KAAM,OAAC,MAAM,KADzCN,IAAAA,aAAAC,IAAAA,mBAMO,QANP,YAMO;AAAA,UADLK,eAAsB,KAAA,QAAA,QAAA;AAAA;QAGhB,MAAc,eAAC,KAAM,OAAC,OAAO,sBADrCL,IAQO,mBAAA,QAAA;AAAA;UANJ,OAAO,OAAE,EAAA;AAAA,UACV,WAAQ;AAAA,UACP,2CAAwB,OAAY,YAAA,CAAA;AAAA;UAGrCK,eAAQ,KAAA,QAAA,SAAA;AAAA;;;;KAIH,OAAS,8BADlBJ,~~gBAaY~~,~~sBAbZE~~,~~IAaY~~,WAAA,EAAA,KAAA,EAAA,~~GAXF~~,OAAgB,kBAAA;AAAA,MACvB,OAAO,SAAsB,uBAAA;AAAA,MAC9B,WAAQ;AAAA,MACP,cAAY,OAAgB,iBAAC;AAAA,MAC7B,+CAAO,KAAK,MAAA,OAAA;AAAA;MAEF,kBACT,~~MAEE~~;AAAA,~~QAFFG~~,~~gBAEE~~,~~0BAAA~~,~~EADC,MAAM,SAAmB,~~oBAAA,~~GAAA~~,~~MAAA~~,~~GAAA~~,~~CAAA~~,~~MAAA,CAAA~~;AAAA~~;;;;;;;~~"}
1	+ {"version":3,"file":"chip.vue.cjs","sources":["../../../components/chip/chip.vue"],"sourcesContent":["<template>\n <span class=\"d-chip\">\n <component\n :is=\"interactive ? 'button' : 'span'\"\n :id=\"id\"\n :type=\"interactive && 'button'\"\n :class=\"chipClasses()\"\n data-qa=\"dt-chip\"\n :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n :aria-label=\"ariaLabel\"\n v-on=\"chipListeners\"\n >\n <span\n v-if=\"hasSlotContent($slots.icon)\"\n data-qa=\"dt-chip-icon\"\n class=\"d-chip__icon\"\n >\n <!-- @slot slot for Chip icon -->\n <slot name=\"icon\" />\n </span>\n <span\n v-else-if=\"hasSlotContent($slots.avatar)\"\n data-qa=\"dt-chip-avatar\"\n >\n <!-- @slot slot for Chip avatar -->\n <slot name=\"avatar\" />\n </span>\n <span\n v-if=\"hasSlotContent($slots.default)\"\n :id=\"`${id}-content`\"\n data-qa=\"dt-chip-label\"\n :class=\"['d-chip__text', contentClass]\"\n >\n <!-- @slot slot for Content within chip -->\n <slot />\n </span>\n </component>\n <dt-button\n v-if=\"!hideClose\"\n v-bind=\"closeButtonProps\"\n :class=\"chipCloseButtonClasses()\"\n data-qa=\"dt-chip-close\"\n :aria-label=\"closeButtonProps.ariaLabel\"\n @click=\"$emit('close')\"\n >\n <template #icon>\n <dt-icon\n name=\"close\"\n :size=\"closeButtonIconSize\"\n />\n </template>\n </dt-button>\n </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport {\n CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n CHIP_SIZE_MODIFIERS,\n CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\n\n/*\n A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n /\nexport default {\n name: 'DtChip',\n\n components: {\n DtButton,\n DtIcon,\n },\n\n props: {\n /\n A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.\n /\n closeButtonProps: {\n type: Object,\n default: function () { return { ariaLabel: 'close' }; },\n validator: (props) => {\n return !!props.ariaLabel;\n },\n },\n\n /\n Hides the close button on the chip\n * @values true, false\n /\n hideClose: {\n type: Boolean,\n default: false,\n },\n\n /\n The size of the chip.\n * @values xs, sm, md\n /\n size: {\n type: String,\n default: 'md',\n validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s),\n },\n\n /\n The interactivity of the chip.\n * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n * @values true, false\n /\n interactive: {\n type: Boolean,\n default: true,\n },\n\n /\n Id to use for the dialog's aria-labelledby.\n /\n id: {\n type: String,\n default: function () { return getUniqueString(); },\n },\n\n /\n Descriptive label for the chip content.\n * If this prop is unset the content in the default slot will be used as an aria-label.\n /\n ariaLabel: {\n type: String,\n default: '',\n },\n\n /\n Additional class name for the chip element.\n /\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the span element.\n /\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n },\n\n emits: [\n /\n Native chip click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Close button click event\n \n @event close\n /\n 'close',\n\n /\n Native chip key up event\n \n @event keyup\n * @type {KeyboardEvent}\n */\n 'keyup',\n ],\n\n data () {\n return {\n isActive: false,\n hasSlotContent,\n };\n },\n\n computed: {\n chipListeners () {\n return {\n click: event => {\n if (this.interactive) this.$emit('click', event);\n },\n\n keyup: event => {\n if (event.code?.toLowerCase() === 'delete') {\n this.onClose();\n } else {\n this.$emit('keyup', event);\n }\n },\n };\n },\n\n closeButtonIconSize () {\n return CHIP_ICON_SIZES[this.size];\n },\n },\n\n methods: {\n chipClasses () {\n return [\n this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n CHIP_SIZE_MODIFIERS[this.size],\n this.labelClass,\n ];\n },\n\n chipCloseButtonClasses () {\n return [\n 'd-chip__close',\n CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size],\n ];\n },\n\n onClose () {\n if (!this.hideClose) {\n this.$emit('close');\n }\n },\n },\n};\n</script>\n"],"names":["DtButton","DtIcon","CHIP_SIZE_MODIFIERS","getUniqueString","hasSlotContent","CHIP_ICON_SIZES","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_renderSlot","_createVNode"],"mappings":"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"}

package/dist/vue3/components/chip/chip.vue.js CHANGED Viewed

@@ -1,14 +1,14 @@
-import { DtIconClose } from "@dialpad/dialtone-icons/vue3";
 import { CHIP_SIZE_MODIFIERS, CHIP_ICON_SIZES, CHIP_CLOSE_BUTTON_SIZE_MODIFIERS } from "./chip_constants.js";
 import { getUniqueString, hasSlotContent } from "../../common/utils.js";
 import { resolveComponent, openBlock, createElementBlock, createBlock, resolveDynamicComponent, mergeProps, toHandlers, withCtx, renderSlot, createCommentVNode, normalizeClass, createVNode } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 import DtButton from "../button/button.vue.js";
+import DtIcon from "../icon/icon.vue.js";
 const _sfc_main = {
   name: "DtChip",
   components: {
     DtButton,
-    DtIconClose
+    DtIcon
   },
   props: {
     /**
@@ -162,7 +162,7 @@ const _hoisted_3 = {
 };
 const _hoisted_4 = ["id"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon_close = resolveComponent("dt-icon-close");
+  const _component_dt_icon = resolveComponent("dt-icon");
   const _component_dt_button = resolveComponent("dt-button");
   return openBlock(), createElementBlock("span", _hoisted_1, [
     (openBlock(), createBlock(resolveDynamicComponent($props.interactive ? "button" : "span"), mergeProps({
@@ -197,7 +197,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
     }), {
       icon: withCtx(() => [
-        createVNode(_component_dt_icon_close, { size: $options.closeButtonIconSize }, null, 8, ["size"])
+        createVNode(_component_dt_icon, {
+          name: "close",
+          size: $options.closeButtonIconSize
+        }, null, 8, ["size"])
       ]),
       _: 1
     }, 16, ["class", "aria-label"])) : createCommentVNode("", true)