@dialpad/dialtone 9.130.0 → 9.131.1

package/dist/vue3/lib/avatar/avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.cjs","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"$attrs.style\"\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  compatConfig: { MODE: 3 },\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        this.$attrs.class,\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"],"names":["_sfc_main","DtPresence","getUniqueString","size","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","state","group","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","hasSlotContent","newSrc","el","initials","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","e","_hoisted_1","_hoisted_2","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_normalizeStyle","_ctx","_withCtx","_createElementVNode","$data","_createElementBlock","_renderSlot","_hoisted_3","_toDisplayString","_createCommentVNode","_hoisted_4","_openBlock","_component_dt_presence","_mergeProps"],"mappings":"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"}
+{"version":3,"file":"avatar.cjs","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"$attrs.style\"\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  compatConfig: { MODE: 3 },\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        this.$attrs.class,\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"],"names":["_sfc_main","DtPresence","getUniqueString","size","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","state","group","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","hasSlotContent","newSrc","el","initials","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","e","_hoisted_1","_hoisted_2","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_normalizeStyle","_ctx","_withCtx","_createElementVNode","$data","_createElementBlock","_renderSlot","_hoisted_3","_toDisplayString","_createCommentVNode","_hoisted_4","_openBlock","_component_dt_presence","_mergeProps"],"mappings":"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"}

package/dist/vue3/lib/avatar/avatar.js

@@ -1,8 +1,8 @@
-import { getUniqueString as y, hasSlotContent as d, getRandomElement as g } from "../../common/utils/index.js";
-import { AVATAR_SIZE_MODIFIERS as o, AVATAR_PRESENCE_STATES as u, AVATAR_GROUP_VALIDATOR as m, AVATAR_KIND_MODIFIERS as _, AVATAR_PRESENCE_SIZE_MODIFIERS as S, AVATAR_ICON_SIZES as I, AVATAR_RANDOM_COLORS as A } from "./avatar-constants.js";
+import { getRandomElement as y, hasSlotContent as d, getUniqueString as g } from "../../common/utils/index.js";
+import { AVATAR_GROUP_VALIDATOR as u, AVATAR_PRESENCE_STATES as m, AVATAR_SIZE_MODIFIERS as o, AVATAR_ICON_SIZES as _, AVATAR_PRESENCE_SIZE_MODIFIERS as S, AVATAR_KIND_MODIFIERS as I, AVATAR_RANDOM_COLORS as A } from "./avatar-constants.js";
 import { ICON_SIZE_MODIFIERS as E } from "../icon/icon-constants.js";
 import { extractInitialsFromName as C } from "./utils.js";
-import { resolveComponent as p, openBlock as r, createBlock as f, resolveDynamicComponent as O, normalizeClass as l, normalizeStyle as k, withCtx as R, createElementVNode as b, createElementBlock as s, renderSlot as v, toDisplayString as c, createCommentVNode as n, mergeProps as T } from "vue";
+import { resolveComponent as p, createBlock as f, openBlock as r, resolveDynamicComponent as O, normalizeStyle as k, normalizeClass as l, withCtx as R, createElementVNode as b, createElementBlock as s, createCommentVNode as n, renderSlot as v, toDisplayString as c, mergeProps as T } from "vue";
 import { _ as D } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import N from "../presence/presence.js";
 const L = {
@@ -17,7 +17,7 @@ const L = {
     id: {
       type: String,
       default() {
-        return y();
+        return g();
       }
     },
     /**
@@ -74,8 +74,8 @@ const L = {
      */
     presence: {
       type: String,
-      default: u.NONE,
-      validator: (e) => Object.values(u).includes(e)
+      default: m.NONE,
+      validator: (e) => Object.values(m).includes(e)
     },
     /**
      * A set of props to be passed into the presence component.
@@ -92,7 +92,7 @@ const L = {
     group: {
       type: Number,
       default: void 0,
-      validator: (e) => m(e)
+      validator: (e) => u(e)
     },
     /**
      * The text that overlays the avatar
@@ -169,9 +169,9 @@ const L = {
   data() {
     return {
       AVATAR_SIZE_MODIFIERS: o,
-      AVATAR_KIND_MODIFIERS: _,
+      AVATAR_KIND_MODIFIERS: I,
       AVATAR_PRESENCE_SIZE_MODIFIERS: S,
-      AVATAR_ICON_SIZES: I,
+      AVATAR_ICON_SIZES: _,
       imageLoadedSuccessfully: null,
       formattedInitials: "",
       initializing: !1,
@@ -206,7 +206,7 @@ const L = {
       ];
     },
     showGroup() {
-      return m(this.group);
+      return u(this.group);
     },
     formattedGroup() {
       return this.group > 99 ? "99+" : this.group;
@@ -258,7 +258,7 @@ const L = {
       this.validatedSize === "xs" ? this.formattedInitials = "" : this.validatedSize === "sm" ? this.formattedInitials = e[0] : this.formattedInitials = e;
     },
     getColor() {
-      return this.color ?? g(A, this.seed);
+      return this.color ?? y(A, this.seed);
     },
     _loadedImageEventHandler(e) {
       this.imageLoadedSuccessfully = !0, e.classList.remove("d-d-none");

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"$attrs.style\"\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  compatConfig: { MODE: 3 },\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        this.$attrs.class,\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"],"names":["_sfc_main","DtPresence","getUniqueString","size","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","state","group","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","hasSlotContent","newSrc","el","initials","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","_hoisted_1","_hoisted_2","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_normalizeStyle","_ctx","_withCtx","_createElementVNode","$data","_createElementBlock","_renderSlot","_hoisted_3","_toDisplayString","_createCommentVNode","_hoisted_4","_openBlock","_component_dt_presence","_mergeProps"],"mappings":";;;;;;;AAkGA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EACN,YAAY,EAAE,YAAAC,EAAY;AAAA,EAE1B,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AAAE,eAAOC,EAAe;AAAA,MAAK;AAAA,IACzC;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACC,MAAS,OAAO,KAAKC,CAAqB,EAAE,SAASD,CAAI;AAAA,IACtE;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAASE,EAAuB;AAAA,MAChC,WAAW,CAACC,MACH,OAAO,OAAOD,CAAsB,EAAE,SAASC,CAAK;AAAA,IAE9D;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IACjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACC,MAAUC,EAAuBD,CAAK;AAAA,IACnD;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,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,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACJ,MAAS,CAACA,KAAQ,OAAO,KAAKM,CAAmB,EAAE,SAASN,CAAI;AAAA,IAC7E;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,uBAAAC;AAAA,MACA,uBAAAM;AAAA,MACA,gCAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,yBAAyB;AAAA,MACzB,mBAAmB;AAAA,MACnB,cAAc;AAAA,MACd,gBAAAC;AAAA;EAEH;AAAA,EAED,UAAU;AAAA,IACR,iBAAkB;AAChB,aAAOA,EAAe,KAAK,OAAO,WAAW;AAAA,IAC9C;AAAA,IAED,aAAc;AACZ,aAAO;AAAA,IACR;AAAA,IAED,gBAAiB;AACf,aAAO;AAAA,QACL;AAAA,QACA,KAAK,OAAO;AAAA,QACZT,EAAsB,KAAK,aAAa;AAAA,QACxC,KAAK;AAAA,QACL;AAAA,UACE,mBAAmB,KAAK;AAAA,UACxB,CAAC,mBAAmB,KAAK,SAAU,CAAA,EAAE,GAAG,CAAC,KAAK,WAAY;AAAA,UAC1D,uBAAuB,KAAK;AAAA,QAC7B;AAAA;IAEJ;AAAA,IAED,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACA,KAAK;AAAA,QACL,EAAE,0BAA0B,KAAK,eAAgB;AAAA;IAEpD;AAAA,IAED,YAAa;AACX,aAAOI,EAAuB,KAAK,KAAK;AAAA,IACzC;AAAA,IAED,iBAAkB;AAChB,aAAO,KAAK,QAAQ,KAAK,QAAQ,KAAK;AAAA,IACvC;AAAA,IAED,gBAAiB;AAEf,aAAO,KAAK,QAAQ,OAAO,KAAK;AAAA,IACjC;AAAA,IAED,YAAa;AACX,aAAO,KAAK,4BAA4B,MAAS,KAAK;AAAA,IACvD;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,UAAU;AAAA,MACR,WAAW;AAAA,MACX,UAAW;AACT,aAAK,eAAc;AAAA,MACpB;AAAA,IACF;AAAA,IAED,MAAM;AAAA,MACJ,WAAW;AAAA,MACX,UAAW;AACT,aAAK,eAAc;AAAA,MACpB;AAAA,IACF;AAAA,IAED,OAAO;AAAA,MACL,WAAW;AAAA,MACX,UAAW;AACT,aAAK,eAAc;AAAA,MACpB;AAAA,IACF;AAAA,IAED,SAAUM,GAAQ;AAEhB,MADA,KAAK,0BAA0B,MAC1BA,MAEL,KAAK,cAAa,GAClB,KAAK,kBAAiB;AAAA,IACvB;AAAA,EACF;AAAA,EAED,UAAW;AACT,SAAK,cAAa,GAClB,KAAK,kBAAiB;AAAA,EACvB;AAAA,EAED,SAAS;AAAA,IACP,aAAc;AACZ,aAAOD,EAAe,KAAK,OAAO,IAAI;AAAA,IACvC;AAAA,IAED,MAAM,oBAAqB;AACzB,YAAM,KAAK;AACX,YAAME,IAAK,KAAK,MAAM;AACtB,MAAKA,MAELA,EAAG,iBAAiB,QAAQ,MAAM,KAAK,yBAAyBA,CAAE,GAAG,EAAE,MAAM,GAAG,CAAG,GACnFA,EAAG,iBAAiB,SAAS,MAAM,KAAK,0BAA0BA,CAAE,GAAG,EAAE,MAAM,GAAG,CAAG;AAAA,IACtF;AAAA,IAED,iBAAkB;AAChB,YAAMC,IAAWC,EAAwB,KAAK,QAAQ;AAEtD,MAAI,KAAK,kBAAkB,OACzB,KAAK,oBAAoB,KAChB,KAAK,kBAAkB,OAChC,KAAK,oBAAoBD,EAAS,CAAC,IAEnC,KAAK,oBAAoBA;AAAA,IAE5B;AAAA,IAED,WAAY;AACV,aAAO,KAAK,SAASE,EAAiBC,GAAsB,KAAK,IAAI;AAAA,IACtE;AAAA,IAED,yBAA0BJ,GAAI;AAC5B,WAAK,0BAA0B,IAC/BA,EAAG,UAAU,OAAO,UAAU;AAAA,IAC/B;AAAA,IAED,0BAA2BA,GAAI;AAC7B,WAAK,0BAA0B,IAC/BA,EAAG,UAAU,IAAI,UAAU;AAAA,IAC5B;AAAA,IAED,gBAAiB;AACf,MAAI,KAAK,YAAY,KAAK,aAAa,UACrC,QAAQ,MAAM,uHAAuH;AAAA,IAExI;AAAA,IAED,YAAa,GAAG;AACd,MAAK,KAAK,aACV,KAAK,MAAM,SAAS,CAAC;AAAA,IACtB;AAAA,EACF;AACH,GA7aAK,IAAA,CAAA,OAAA,KAAA,GAAAC,IAAA,CAAA,cAAA,WAAA,MAAA;EAAA,KAAA;AAAA,EAwDQ,OAAM;;EAxDd,KAAA;AAAA,EA+DM,OAAM;AAAA,EACN,WAAQ;;;;cA/DZC,EADFC,EAESC,EAAS,YAAA,WAAA,KAAA,GAAA;AAAA,IACb,IAAIA,EAAE;AAAA,IACN,OAJLC,EAIYC,EAAa,aAAA;AAAA,IACpB,OALLC,EAKYC,EAAM,OAAC,KAAK;AAAA,IACpB,WAAQ;AAAA,IACP,SAAOF,EAAW;AAAA;IAPvB,SAAAG,EASI,MAmCM;AAAA,MAnCNC,EAmCM,OAAA;AAAA,QAlCJ,KAAI;AAAA,QACH,OAXPL,EAAA;AAAA,UAWwBD,EAAW;AAAA;sCAAkEO,EAAuB,wBAAA;AAAA;;QAO9GL,EAAS,kBADjBM,EAOC,OAAA;AAAA,UAxBP,KAAA;AAAA,UAmBQ,KAAI;AAAA,UACJ,OAAM;AAAA,UACN,WAAQ;AAAA,UACP,KAAKR,EAAQ;AAAA,UACb,KAAKA,EAAQ;AAAA,QAvBtB,GAAA,MAAA,GAAAJ,CAAA,KA0BmBM,EAAU,WAAA,UADvBM,EAYM,OAAA;AAAA,UArCZ,KAAA;AAAA,UA2BS,OA3BTP,EA2BiB,CAAAD,EAAA,WAAWO,EAAA,sBAAsB,IAAI,CAAA;AAAA,UAC7C,cAAYP,EAAS,YAAGA,EAAa,gBAAA;AAAA,UACrC,WAASE,EAAU;AAAA,UACnB,MAAMF,EAAS,YAAA,WAAA;AAAA;UAGhBS,EAGEL,EAAA,QAAA,QAAA;AAAA,YADC,UAAWJ,EAAA,YAAYO,EAAA,kBAAkBP,EAAI,IAAA;AAAA;QAnCxD,GAAA,IAAAH,CAAA,WAsCMW,EAKO,QAAA;AAAA,UA3Cb,KAAA;AAAA,UAwCS,OAxCTP,EAAA,CAwCiBM,EAAqB,sBAAC,QAAQ,CAAA;AAAA,aAEpCA,EAAiB,iBAAA,GAAA,CAAA;AAAA;MAIhBL,EAAA,kBAAkBF,EAAW,oBADrCQ,EAeM,OAAA;AAAA,QA5DV,KAAA;AAAA,QA+CO,OA/CPP,EA+CcC,EAAc,cAAA;AAAA;QAIdA,EAAc,iBADtBO,EAGEL,2BArDR,KAAA,GAAA,IAuDmBJ,EAAW,oBADxBQ,EAKI,KALJE,GAKIC,EADCX,EAAW,WAAA,GAAA,CAAA,KA1DtBY,EAAA,IAAA,EAAA;AAAA,eAAAA,EAAA,IAAA,EAAA;AAAA,MA8DYV,EAAS,kBADjBM,EAI4B,QAJ5BK,GAI4BF,EAAxBT,EAAc,cAAA,GAAA,CAAA,KAjEtBU,EAAA,IAAA,EAAA;AAAA,MAmEYZ,EAAA,aAAaE,EAAS,aAD9BY,KAAAhB,EASEiB,GATFC,EASE;AAAA,QA3EN,KAAA;AAAA,QAoEO,UAAUhB,EAAQ;AAAA,QAClB,OAAK;AAAA;UAA0CO,EAAA,+BAA+BP,EAAI,IAAA;AAAA;SAI3EA,EAAa,eAAA,EACrB,WAAQ,cAAa,CAAA,GAAA,MAAA,IAAA,CAAA,YAAA,OAAA,CAAA,KA1E3BY,EAAA,IAAA,EAAA;AAAA;IAAA,GAAA;AAAA;;;"}
+{"version":3,"file":"avatar.js","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"$attrs.style\"\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  compatConfig: { MODE: 3 },\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        this.$attrs.class,\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"],"names":["_sfc_main","DtPresence","getUniqueString","size","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","state","group","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","hasSlotContent","newSrc","el","initials","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","_hoisted_1","_hoisted_2","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_normalizeStyle","_ctx","_withCtx","_createElementVNode","$data","_createElementBlock","_renderSlot","_hoisted_3","_toDisplayString","_createCommentVNode","_hoisted_4","_openBlock","_component_dt_presence","_mergeProps"],"mappings":"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"}

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

@@ -1 +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":["extractInitialsFromName","fullName","names","_","index","name"],"mappings":"gFAAY,MAACA,EAA2BC,GAAa,CACnD,GAAI,OAAOA,GAAa,UAAY,CAACA,EAAS,KAAI,EAAI,MAAO,GAE7D,MAAMC,EAAQD,EAAS,KAAM,EAAC,MAAM,MAAM,EAE1C,OAAOC,EAAM,SAAW,EACpBA,EAAM,KAAK,EAAE,EAAE,UAAU,EAAG,CAAC,EAC7BA,EAAM,OAAO,CAACC,EAAGC,IAAWA,IAAU,GAAKA,IAAUF,EAAM,OAAS,CAAE,EACrE,IAAIG,GAAQA,EAAK,MAAM,EAAG,CAAC,EAAE,aAAa,EAC1C,KAAK,EAAE,CACd"}
+{"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":["extractInitialsFromName","fullName","names","_","index","name"],"mappings":"gFAAY,MAACA,EAA2BC,GAAa,CACnD,GAAI,OAAOA,GAAa,UAAY,CAACA,EAAS,KAAI,EAAI,MAAO,GAE7D,MAAMC,EAAQD,EAAS,KAAI,EAAG,MAAM,MAAM,EAE1C,OAAOC,EAAM,SAAW,EACpBA,EAAM,KAAK,EAAE,EAAE,UAAU,EAAG,CAAC,EAC7BA,EAAM,OAAO,CAACC,EAAGC,IAAWA,IAAU,GAAKA,IAAUF,EAAM,OAAS,CAAE,EACrE,IAAIG,GAAQA,EAAK,MAAM,EAAG,CAAC,EAAE,YAAW,CAAE,EAC1C,KAAK,EAAE,CACd"}

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

@@ -1 +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":["extractInitialsFromName","fullName","names","_","index","name"],"mappings":"AAAY,MAACA,IAA0B,CAACC,MAAa;AACnD,MAAI,OAAOA,KAAa,YAAY,CAACA,EAAS,KAAI,EAAI,QAAO;AAE7D,QAAMC,IAAQD,EAAS,KAAM,EAAC,MAAM,MAAM;AAE1C,SAAOC,EAAM,WAAW,IACpBA,EAAM,KAAK,EAAE,EAAE,UAAU,GAAG,CAAC,IAC7BA,EAAM,OAAO,CAACC,GAAGC,MAAWA,MAAU,KAAKA,MAAUF,EAAM,SAAS,CAAE,EACrE,IAAI,CAAAG,MAAQA,EAAK,MAAM,GAAG,CAAC,EAAE,aAAa,EAC1C,KAAK,EAAE;AACd;"}
+{"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":["extractInitialsFromName","fullName","names","_","index","name"],"mappings":"AAAY,MAACA,IAA0B,CAACC,MAAa;AACnD,MAAI,OAAOA,KAAa,YAAY,CAACA,EAAS,KAAI,EAAI,QAAO;AAE7D,QAAMC,IAAQD,EAAS,KAAI,EAAG,MAAM,MAAM;AAE1C,SAAOC,EAAM,WAAW,IACpBA,EAAM,KAAK,EAAE,EAAE,UAAU,GAAG,CAAC,IAC7BA,EAAM,OAAO,CAACC,GAAGC,MAAWA,MAAU,KAAKA,MAAUF,EAAM,SAAS,CAAE,EACrE,IAAI,CAAAG,MAAQA,EAAK,MAAM,GAAG,CAAC,EAAE,YAAW,CAAE,EAC1C,KAAK,EAAE;AACd;"}

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

@@ -1 +1 @@
-{"version":3,"file":"badge.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  compatConfig: { MODE: 3 },\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":["_sfc_main","s","ICON_SIZE_MODIFIERS","kind","BADGE_KIND_MODIFIERS","type","BADGE_TYPE_MODIFIERS","BADGE_DECORATION_MODIFIERS","hasSlotContent","_createElementBlock","_normalizeClass","$data","$props","_openBlock","_hoisted_1","_createCommentVNode","$options","_hoisted_2","_renderSlot","_ctx","_createElementVNode","_createTextVNode","_toDisplayString","_hoisted_3"],"mappings":"kTAuDKA,EAAU,CACb,aAAc,CAAE,KAAM,CAAG,EACzB,KAAM,UAEN,MAAO,CAKL,SAAU,CACR,KAAM,OACN,QAAS,MACT,UAAYC,GAAM,OAAO,KAAKC,qBAAmB,EAAE,SAASD,CAAC,CAC9D,EAKD,KAAM,CACJ,KAAM,OACN,QAAS,EACV,EAMD,KAAM,CACJ,KAAM,OACN,QAAS,QACT,UAAYE,GAAS,OAAO,KAAKC,sBAAoB,EAAE,SAASD,CAAI,CACrE,EAMD,KAAM,CACJ,KAAM,OACN,QAAS,UACT,UAAYE,GAAS,OAAO,KAAKC,sBAAoB,EAAE,SAASD,CAAI,CACrE,EASD,WAAY,CACV,KAAM,OACN,QAAS,OACT,UAAYA,GAAS,OAAO,KAAKE,4BAA0B,EAAE,SAASF,CAAI,CAC3E,EAKD,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,EAMD,OAAQ,CACN,KAAM,QACN,QAAS,EACV,EAKD,SAAU,CACR,KAAM,QACN,QAAS,EACV,CACF,EAED,MAAQ,CACN,MAAO,CACL,qBAAAC,EAAoB,qBACpB,qBAAAF,EAAoB,gDACpBG,EAA0B,2BAE7B,EAED,SAAU,CACR,aAAe,CACb,OAAOC,iBAAe,KAAK,OAAO,QAAQ,CAC3C,EAED,cAAgB,CACd,OAAOA,iBAAe,KAAK,OAAO,SAAS,CAC5C,EAED,UAAY,CACV,OAAO,KAAK,aAAe,KAAK,YACjC,CACF,EAED,SAAW,CACT,KAAK,cAAa,CACnB,EAED,QAAS,CACP,eAAiB,CACf,KAAK,4BAA2B,EAChC,KAAK,kCAAiC,CACvC,EAED,6BAA+B,CACzB,KAAK,OAAS,MAAQ,KAAK,OAAS,SACtC,QAAQ,MAAM,yEAA6E,EAEzF,KAAK,OAAS,YAAc,KAAK,QACnC,QAAQ,MAAM,6DAA+D,CAEhF,EAED,mCAAqC,CAC9B,KAAK,cAEN,KAAK,OAAS,SAAW,KAAK,OAAS,YACzC,QAAQ,MAAM,yFAA6F,EAGzG,KAAK,UACP,QAAQ,MAAM,2EAA2E,EAE5F,CACF,CACH,KA9LA,IAAA,EAcM,MAAM,0BAdZ,IAAA,EAkBM,MAAM,yBAlBZ,IAAA,EAkCM,MAAM,oEAjCVC,EAyCO,mBAAA,OAAA,CAxCJ,MAFLC,EAAAA,eAAA,WAEqCC,EAAA,qBAAqBC,EAAI,IAAA,EAASD,EAAA,qBAAqBC,EAAI,IAAA,EAASD,EAAA,2BAA2BC,EAAU,UAAA,qBAA8BA,EAAM,MAAA,uBAAiCA,EAAQ,QAAA,IAQvN,UAAQ,aAGAA,EAAU,YADlBC,EAAAA,YAAAJ,EAAAA,mBAGE,OAHFK,CAGE,GAfNC,EAAA,mBAAA,GAAA,EAAA,EAiBYC,EAAW,aADnBH,EAAAA,YAAAJ,EAAAA,mBASO,OATPQ,EASO,CAJLC,EAGE,WAAAC,EAAA,OAAA,WAAA,CADC,SAAWP,EAAQ,SAAA,KAvB5BG,EAAA,mBAAA,GAAA,EAAA,EA0BIK,EAAAA,mBAKO,OAAA,CALA,MA1BXV,EAAAA,iCA0BqCE,EAAU,UAAA,CAAA,IAEzCM,EAAAA,WAEOC,sBAFP,IAEO,CA9BbE,EAAAA,gBAAAC,EAAAA,gBA6BWV,EAAI,IAAA,EAAA,CAAA,QAIHI,EAAY,cADpBH,EAAAA,YAAAJ,EAAAA,mBASO,OATPc,EASO,CAJLL,EAGE,WAAAC,EAAA,OAAA,YAAA,CADC,SAAWP,EAAQ,SAAA,KAvC5BG,EAAA,mBAAA,GAAA,EAAA"}
+{"version":3,"file":"badge.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  compatConfig: { MODE: 3 },\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":["_sfc_main","s","ICON_SIZE_MODIFIERS","kind","BADGE_KIND_MODIFIERS","type","BADGE_TYPE_MODIFIERS","BADGE_DECORATION_MODIFIERS","hasSlotContent","_createElementBlock","_normalizeClass","$data","$props","_openBlock","_hoisted_1","_createCommentVNode","$options","_hoisted_2","_renderSlot","_ctx","_createElementVNode","_createTextVNode","_toDisplayString","_hoisted_3"],"mappings":"kTAuDKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,UAEN,MAAO,CAKL,SAAU,CACR,KAAM,OACN,QAAS,MACT,UAAYC,GAAM,OAAO,KAAKC,qBAAmB,EAAE,SAASD,CAAC,GAM/D,KAAM,CACJ,KAAM,OACN,QAAS,IAOX,KAAM,CACJ,KAAM,OACN,QAAS,QACT,UAAYE,GAAS,OAAO,KAAKC,sBAAoB,EAAE,SAASD,CAAI,GAOtE,KAAM,CACJ,KAAM,OACN,QAAS,UACT,UAAYE,GAAS,OAAO,KAAKC,sBAAoB,EAAE,SAASD,CAAI,GAUtE,WAAY,CACV,KAAM,OACN,QAAS,OACT,UAAYA,GAAS,OAAO,KAAKE,4BAA0B,EAAE,SAASF,CAAI,GAM5E,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAOX,OAAQ,CACN,KAAM,QACN,QAAS,IAMX,SAAU,CACR,KAAM,QACN,QAAS,KAIb,MAAQ,CACN,MAAO,CACL,qBAAAC,EAAAA,qBACA,qBAAAF,EAAAA,gDACAG,EAAAA,2BAEJ,EAEA,SAAU,CACR,aAAe,CACb,OAAOC,iBAAe,KAAK,OAAO,QAAQ,CAC5C,EAEA,cAAgB,CACd,OAAOA,iBAAe,KAAK,OAAO,SAAS,CAC7C,EAEA,UAAY,CACV,OAAO,KAAK,aAAe,KAAK,YAClC,GAGF,SAAW,CACT,KAAK,cAAa,CACpB,EAEA,QAAS,CACP,eAAiB,CACf,KAAK,4BAA2B,EAChC,KAAK,kCAAiC,CACxC,EAEA,6BAA+B,CACzB,KAAK,OAAS,MAAQ,KAAK,OAAS,SACtC,QAAQ,MAAM,yEAA6E,EAEzF,KAAK,OAAS,YAAc,KAAK,QACnC,QAAQ,MAAM,6DAA+D,CAEjF,EAEA,mCAAqC,CAC9B,KAAK,cAEN,KAAK,OAAS,SAAW,KAAK,OAAS,YACzC,QAAQ,MAAM,yFAA6F,EAGzG,KAAK,UACP,QAAQ,MAAM,2EAA2E,EAE7F,EAEJ,KA9LA,IAAA,EAcM,MAAM,0BAdZ,IAAA,EAkBM,MAAM,yBAlBZ,IAAA,EAkCM,MAAM,oEAjCVC,EAAAA,mBAyCO,OAAA,CAxCJ,MAFLC,EAAAA,eAAA,WAEqCC,EAAA,qBAAqBC,EAAA,IAAI,EAASD,EAAA,qBAAqBC,EAAA,IAAI,EAASD,EAAA,2BAA2BC,EAAA,UAAU,qBAA8BA,EAAA,MAAM,uBAAiCA,EAAA,QAAQ,IAQvN,UAAQ,aAGAA,EAAA,YADRC,EAAAA,YAAAJ,EAAAA,mBAGE,OAHFK,CAGE,GAfNC,EAAAA,mBAAA,GAAA,EAAA,EAiBYC,EAAA,aADRH,EAAAA,YAAAJ,EAAAA,mBASO,OATPQ,EASO,CAJLC,EAAAA,WAGEC,EAAA,OAAA,WAAA,CADC,SAAWP,EAAA,QAAQ,CAAA,KAvB5BG,EAAAA,mBAAA,GAAA,EAAA,EA0BIK,EAAAA,mBAKO,OAAA,CALA,MA1BXV,EAAAA,iCA0BqCE,EAAA,UAAU,CAAA,IAEzCM,EAAAA,WAEOC,sBAFP,IAEO,CA9BbE,EAAAA,gBAAAC,EAAAA,gBA6BWV,EAAA,IAAI,EAAA,CAAA,QAIHI,EAAA,cADRH,EAAAA,YAAAJ,EAAAA,mBASO,OATPc,EASO,CAJLL,EAAAA,WAGEC,EAAA,OAAA,YAAA,CADC,SAAWP,EAAA,QAAQ,CAAA,KAvC5BG,EAAAA,mBAAA,GAAA,EAAA"}

package/dist/vue3/lib/badge/badge.js

@@ -1,6 +1,6 @@
-import { BADGE_KIND_MODIFIERS as l, BADGE_TYPE_MODIFIERS as d, BADGE_DECORATION_MODIFIERS as c } from "./badge-constants.js";
+import { BADGE_DECORATION_MODIFIERS as l, BADGE_KIND_MODIFIERS as d, BADGE_TYPE_MODIFIERS as c } from "./badge-constants.js";
 import { hasSlotContent as u } from "../../common/utils/index.js";
-import { openBlock as o, createElementBlock as a, normalizeClass as h, createCommentVNode as n, renderSlot as r, createElementVNode as f, createTextVNode as b, toDisplayString as I } from "vue";
+import { createElementBlock as o, openBlock as a, normalizeClass as h, createCommentVNode as n, createElementVNode as f, renderSlot as r, createTextVNode as b, toDisplayString as I } from "vue";
 import { _ } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import { ICON_SIZE_MODIFIERS as g } from "../icon/icon-constants.js";
 const p = {
@@ -30,7 +30,7 @@ const p = {
     kind: {
       type: String,
       default: "label",
-      validator: (e) => Object.keys(l).includes(e)
+      validator: (e) => Object.keys(d).includes(e)
     },
     /**
      * Color for the badge background
@@ -39,7 +39,7 @@ const p = {
     type: {
       type: String,
       default: "default",
-      validator: (e) => Object.keys(d).includes(e)
+      validator: (e) => Object.keys(c).includes(e)
     },
     /**
      * Decoration for the badge. This can be only used with kind: label and type: default
@@ -51,7 +51,7 @@ const p = {
     decoration: {
       type: String,
       default: void 0,
-      validator: (e) => Object.keys(c).includes(e)
+      validator: (e) => Object.keys(l).includes(e)
     },
     /**
      * Used to customize the label container
@@ -78,9 +78,9 @@ const p = {
   },
   data() {
     return {
-      BADGE_TYPE_MODIFIERS: d,
-      BADGE_KIND_MODIFIERS: l,
-      BADGE_DECORATION_MODIFIERS: c
+      BADGE_TYPE_MODIFIERS: c,
+      BADGE_KIND_MODIFIERS: d,
+      BADGE_DECORATION_MODIFIERS: l
     };
   },
   computed: {
@@ -119,7 +119,7 @@ const p = {
   class: "d-badge__icon-right"
 };
 function S(e, E, t, O, i, s) {
-  return o(), a("span", {
+  return a(), o("span", {
     class: h([
       "d-badge",
       i.BADGE_TYPE_MODIFIERS[t.type],
@@ -130,8 +130,8 @@ function S(e, E, t, O, i, s) {
     ]),
     "data-qa": "dt-badge"
   }, [
-    t.decoration ? (o(), a("span", y)) : n("", !0),
-    s.hasLeftIcon ? (o(), a("span", D, [
+    t.decoration ? (a(), o("span", y)) : n("", !0),
+    s.hasLeftIcon ? (a(), o("span", D, [
       r(e.$slots, "leftIcon", { iconSize: t.iconSize })
     ])) : n("", !0),
     f("span", {
@@ -141,7 +141,7 @@ function S(e, E, t, O, i, s) {
         b(I(t.text), 1)
       ])
     ], 2),
-    s.hasRightIcon ? (o(), a("span", m, [
+    s.hasRightIcon ? (a(), o("span", m, [
       r(e.$slots, "rightIcon", { iconSize: t.iconSize })
     ])) : n("", !0)
   ], 2);

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

@@ -1 +1 @@
-{"version":3,"file":"badge.js","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  compatConfig: { MODE: 3 },\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":["_sfc_main","s","ICON_SIZE_MODIFIERS","kind","BADGE_KIND_MODIFIERS","type","BADGE_TYPE_MODIFIERS","BADGE_DECORATION_MODIFIERS","hasSlotContent","_createElementBlock","_normalizeClass","$data","$props","_openBlock","_hoisted_1","_createCommentVNode","$options","_hoisted_2","_renderSlot","_ctx","_createElementVNode","_createTextVNode","_toDisplayString","_hoisted_3"],"mappings":";;;;;AAuDA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACC,MAAM,OAAO,KAAKC,CAAmB,EAAE,SAASD,CAAC;AAAA,IAC9D;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACE,MAAS,OAAO,KAAKC,CAAoB,EAAE,SAASD,CAAI;AAAA,IACrE;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACE,MAAS,OAAO,KAAKC,CAAoB,EAAE,SAASD,CAAI;AAAA,IACrE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACA,MAAS,OAAO,KAAKE,CAA0B,EAAE,SAASF,CAAI;AAAA,IAC3E;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,sBAAAC;AAAA,MACA,sBAAAF;AAAA,MACA,4BAAAG;AAAA;EAEH;AAAA,EAED,UAAU;AAAA,IACR,cAAe;AACb,aAAOC,EAAe,KAAK,OAAO,QAAQ;AAAA,IAC3C;AAAA,IAED,eAAgB;AACd,aAAOA,EAAe,KAAK,OAAO,SAAS;AAAA,IAC5C;AAAA,IAED,WAAY;AACV,aAAO,KAAK,eAAe,KAAK;AAAA,IACjC;AAAA,EACF;AAAA,EAED,UAAW;AACT,SAAK,cAAa;AAAA,EACnB;AAAA,EAED,SAAS;AAAA,IACP,gBAAiB;AACf,WAAK,4BAA2B,GAChC,KAAK,kCAAiC;AAAA,IACvC;AAAA,IAED,8BAA+B;AAC7B,MAAI,KAAK,SAAS,QAAQ,KAAK,SAAS,WACtC,QAAQ,MAAM,yEAA6E,GAEzF,KAAK,SAAS,cAAc,KAAK,UACnC,QAAQ,MAAM,6DAA+D;AAAA,IAEhF;AAAA,IAED,oCAAqC;AACnC,MAAK,KAAK,gBAEN,KAAK,SAAS,WAAW,KAAK,SAAS,cACzC,QAAQ,MAAM,yFAA6F,GAGzG,KAAK,YACP,QAAQ,MAAM,2EAA2E;AAAA,IAE5F;AAAA,EACF;AACH;EA9LA,KAAA;AAAA,EAcM,OAAM;;EAdZ,KAAA;AAAA,EAkBM,OAAM;;EAlBZ,KAAA;AAAA,EAkCM,OAAM;;;cAjCVC,EAyCO,QAAA;AAAA,IAxCJ,OAFLC,EAAA;AAAA;MAEqCC,EAAA,qBAAqBC,EAAI,IAAA;AAAA,MAASD,EAAA,qBAAqBC,EAAI,IAAA;AAAA,MAASD,EAAA,2BAA2BC,EAAU,UAAA;AAAA,2BAA8BA,EAAM,OAAA;AAAA,6BAAiCA,EAAQ,SAAA;AAAA;IAQvN,WAAQ;AAAA;IAGAA,EAAU,cADlBC,KAAAJ,EAGE,QAHFK,CAGE,KAfNC,EAAA,IAAA,EAAA;AAAA,IAiBYC,EAAW,eADnBH,KAAAJ,EASO,QATPQ,GASO;AAAA,MAJLC,EAGEC,EAAA,QAAA,YAAA,EADC,UAAWP,EAAQ,UAAA;AAAA,UAvB5BG,EAAA,IAAA,EAAA;AAAA,IA0BIK,EAKO,QAAA;AAAA,MALA,OA1BXV,qBA0BqCE,EAAU,UAAA,CAAA;AAAA;MAEzCM,EAEOC,yBAFP,MAEO;AAAA,QA9BbE,EAAAC,EA6BWV,EAAI,IAAA,GAAA,CAAA;AAAA;;IAIHI,EAAY,gBADpBH,KAAAJ,EASO,QATPc,GASO;AAAA,MAJLL,EAGEC,EAAA,QAAA,aAAA,EADC,UAAWP,EAAQ,UAAA;AAAA,UAvC5BG,EAAA,IAAA,EAAA;AAAA;;;"}
+{"version":3,"file":"badge.js","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  compatConfig: { MODE: 3 },\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":["_sfc_main","s","ICON_SIZE_MODIFIERS","kind","BADGE_KIND_MODIFIERS","type","BADGE_TYPE_MODIFIERS","BADGE_DECORATION_MODIFIERS","hasSlotContent","_createElementBlock","_normalizeClass","$data","$props","_openBlock","_hoisted_1","_createCommentVNode","$options","_hoisted_2","_renderSlot","_ctx","_createElementVNode","_createTextVNode","_toDisplayString","_hoisted_3"],"mappings":"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"}

package/dist/vue3/lib/banner/banner.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("../../common/mixins/modal.cjs"),r=require("../../common/utils/index.cjs"),e=require("vue"),u=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),m=require("../notice/notice-icon.cjs"),b=require("../notice/notice-content.cjs"),f=require("../notice/notice-action.cjs"),g=require("../notice/notice-constants.cjs"),_={compatConfig:{MODE:3},name:"DtBanner",components:{DtNoticeIcon:m.default,DtNoticeContent:b.default,DtNoticeAction:f.default},mixins:[c.default],props:{titleId:{type:String,default(){return r.default.getUniqueString()}},contentId:{type:String,default(){return r.default.getUniqueString()}},title:{type:String,default:""},important:{type:Boolean,default:!1},pinned:{type:Boolean,default:!1},kind:{type:String,default:"base",validate(t){return g.NOTICE_KINDS.includes(t)}},hideClose:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1},dialogClass:{type:String,default:""},backgroundImage:{type:String,default:""},backgroundSize:{type:String,default:"cover"}},emits:["close"],computed:{role(){return this.important?"alertdialog":"status"},bannerClass(){return["d-banner",{error:"d-banner--error",info:"d-banner--info",success:"d-banner--success",warning:"d-banner--warning",base:"d-banner--base"}[this.kind],{"d-banner--important":this.important,"d-banner--pinned":this.pinned}]},bannerBackgroundImage(){return this.backgroundImage===""?null:`background-image: url(${this.backgroundImage});
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("../../common/mixins/modal.cjs"),r=require("../../common/utils/index.cjs"),e=require("vue"),u=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),m=require("../notice/notice-action.cjs"),b=require("../notice/notice-content.cjs"),f=require("../notice/notice-icon.cjs"),g=require("../notice/notice-constants.cjs"),_={compatConfig:{MODE:3},name:"DtBanner",components:{DtNoticeIcon:f.default,DtNoticeContent:b.default,DtNoticeAction:m.default},mixins:[c.default],props:{titleId:{type:String,default(){return r.default.getUniqueString()}},contentId:{type:String,default(){return r.default.getUniqueString()}},title:{type:String,default:""},important:{type:Boolean,default:!1},pinned:{type:Boolean,default:!1},kind:{type:String,default:"base",validate(t){return g.NOTICE_KINDS.includes(t)}},hideClose:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1},dialogClass:{type:String,default:""},backgroundImage:{type:String,default:""},backgroundSize:{type:String,default:"cover"}},emits:["close"],computed:{role(){return this.important?"alertdialog":"status"},bannerClass(){return["d-banner",{error:"d-banner--error",info:"d-banner--info",success:"d-banner--success",warning:"d-banner--warning",base:"d-banner--base"}[this.kind],{"d-banner--important":this.important,"d-banner--pinned":this.pinned}]},bannerBackgroundImage(){return this.backgroundImage===""?null:`background-image: url(${this.backgroundImage});
               background-size: ${this.backgroundSize};`}},mounted(){this.important&&this.focusFirstElement()},methods:{trapFocus(t){this.important&&this.focusTrappedTabPress(t)}}},h=["role","aria-labelledby","aria-describedby"];function C(t,o,n,y,k,i){const l=e.resolveComponent("dt-notice-icon"),d=e.resolveComponent("dt-notice-content"),s=e.resolveComponent("dt-notice-action");return e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(i.bannerClass),style:e.normalizeStyle(i.bannerBackgroundImage),onKeydown:o[1]||(o[1]=e.withKeys((...a)=>i.trapFocus&&i.trapFocus(...a),["tab"]))},[e.createElementVNode("div",{class:e.normalizeClass(["d-banner__dialog",n.dialogClass]),role:i.role,"aria-labelledby":n.titleId,"aria-describedby":n.contentId},[n.hideIcon?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(l,{key:0,kind:n.kind},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"icon")]),_:3},8,["kind"])),e.createVNode(d,{"title-id":n.titleId,"content-id":n.contentId,title:n.title},{titleOverride:e.withCtx(()=>[e.renderSlot(t.$slots,"titleOverride")]),default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["title-id","content-id","title"]),e.createVNode(s,{"hide-action":n.hideAction,"hide-close":n.hideClose,onClose:o[0]||(o[0]=a=>t.$emit("close"))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"action")]),_:3},8,["hide-action","hide-close"])],10,h)],38)}const p=u._(_,[["render",C]]);exports.default=p;
 //# sourceMappingURL=banner.cjs.map

package/dist/vue3/lib/banner/banner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"banner.cjs","sources":["../../../components/banner/banner.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <aside\n    :class=\"bannerClass\"\n    :style=\"bannerBackgroundImage\"\n    @keydown.tab=\"trapFocus\"\n  >\n    <div\n      class=\"d-banner__dialog\"\n      :class=\"dialogClass\"\n      :role=\"role\"\n      :aria-labelledby=\"titleId\"\n      :aria-describedby=\"contentId\"\n    >\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n      >\n        <template #titleOverride>\n          <!-- eslint-disable-next-line max-len -->\n          <!-- @slot Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the banner -->\n        <slot />\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        @close=\"$emit('close')\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport Modal from '@/common/mixins/modal';\nimport utils from '@/common/utils';\n\n/**\n * Banners are a type of notice, delivering system and engagement messaging.\n * These are highly intrusive notices and should be used sparingly and appropriately.\n * @see https://dialtone.dialpad.com/components/banner.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBanner',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [Modal],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alertdialog.\n     * and will modally trap the keyboard focus in the dialog as soon as it displays.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Pins the banner to the top of the window and pushes all app content down.\n     * @values true, false\n     */\n    pinned: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Inner dialog class\n     */\n    dialogClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Banner background image\n     */\n    backgroundImage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Background image size, follows the background-size CSS property values\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" target=\"_blank\">\n     *   CSS background-sizes\n     * </a>\n     */\n    backgroundSize: {\n      type: String,\n      default: 'cover',\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    role () {\n      return this.important ? 'alertdialog' : 'status';\n    },\n\n    bannerClass () {\n      const kindClasses = {\n        error: 'd-banner--error',\n        info: 'd-banner--info',\n        success: 'd-banner--success',\n        warning: 'd-banner--warning',\n        base: 'd-banner--base',\n      };\n\n      return [\n        'd-banner',\n        kindClasses[this.kind],\n        {\n          'd-banner--important': this.important,\n          'd-banner--pinned': this.pinned,\n        },\n      ];\n    },\n\n    bannerBackgroundImage () {\n      if (this.backgroundImage === '') return null;\n\n      return `background-image: url(${this.backgroundImage});\n              background-size: ${this.backgroundSize};`;\n    },\n  },\n\n  mounted () {\n    if (this.important) {\n      this.focusFirstElement();\n    }\n  },\n\n  methods: {\n    trapFocus (e) {\n      if (this.important) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","Modal","utils","kind","NOTICE_KINDS","e","_hoisted_1","_createElementBlock","_normalizeClass","$options","_normalizeStyle","_cache","_withKeys","args","_createElementVNode","$props","_createCommentVNode","_createBlock","_component_dt_notice_icon","_withCtx","_renderSlot","_ctx","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":"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"}
+{"version":3,"file":"banner.cjs","sources":["../../../components/banner/banner.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <aside\n    :class=\"bannerClass\"\n    :style=\"bannerBackgroundImage\"\n    @keydown.tab=\"trapFocus\"\n  >\n    <div\n      class=\"d-banner__dialog\"\n      :class=\"dialogClass\"\n      :role=\"role\"\n      :aria-labelledby=\"titleId\"\n      :aria-describedby=\"contentId\"\n    >\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n      >\n        <template #titleOverride>\n          <!-- eslint-disable-next-line max-len -->\n          <!-- @slot Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the banner -->\n        <slot />\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        @close=\"$emit('close')\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport Modal from '@/common/mixins/modal';\nimport utils from '@/common/utils';\n\n/**\n * Banners are a type of notice, delivering system and engagement messaging.\n * These are highly intrusive notices and should be used sparingly and appropriately.\n * @see https://dialtone.dialpad.com/components/banner.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBanner',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [Modal],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alertdialog.\n     * and will modally trap the keyboard focus in the dialog as soon as it displays.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Pins the banner to the top of the window and pushes all app content down.\n     * @values true, false\n     */\n    pinned: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Inner dialog class\n     */\n    dialogClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Banner background image\n     */\n    backgroundImage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Background image size, follows the background-size CSS property values\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" target=\"_blank\">\n     *   CSS background-sizes\n     * </a>\n     */\n    backgroundSize: {\n      type: String,\n      default: 'cover',\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    role () {\n      return this.important ? 'alertdialog' : 'status';\n    },\n\n    bannerClass () {\n      const kindClasses = {\n        error: 'd-banner--error',\n        info: 'd-banner--info',\n        success: 'd-banner--success',\n        warning: 'd-banner--warning',\n        base: 'd-banner--base',\n      };\n\n      return [\n        'd-banner',\n        kindClasses[this.kind],\n        {\n          'd-banner--important': this.important,\n          'd-banner--pinned': this.pinned,\n        },\n      ];\n    },\n\n    bannerBackgroundImage () {\n      if (this.backgroundImage === '') return null;\n\n      return `background-image: url(${this.backgroundImage});\n              background-size: ${this.backgroundSize};`;\n    },\n  },\n\n  mounted () {\n    if (this.important) {\n      this.focusFirstElement();\n    }\n  },\n\n  methods: {\n    trapFocus (e) {\n      if (this.important) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","Modal","utils","kind","NOTICE_KINDS","e","_hoisted_1","_createElementBlock","_normalizeClass","$options","_normalizeStyle","_cache","_withKeys","args","_createElementVNode","$props","_createCommentVNode","_createBlock","_component_dt_notice_icon","_withCtx","_renderSlot","_ctx","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":"wbAwDKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,WAEN,WAAY,cACVC,EAAAA,QACA,gBAAAC,EAAAA,QACA,eAAAC,EAAAA,SAGF,OAAQ,CAACC,EAAAA,OAAK,EAEd,MAAO,CAKL,QAAS,CACP,KAAM,OACN,SAAW,CAAE,OAAOC,EAAAA,QAAM,gBAAe,CAAI,GAO/C,UAAW,CACT,KAAM,OACN,SAAW,CAAE,OAAOA,EAAAA,QAAM,gBAAe,CAAI,GAM/C,MAAO,CACL,KAAM,OACN,QAAS,IASX,UAAW,CACT,KAAM,QACN,QAAS,IAOX,OAAQ,CACN,KAAM,QACN,QAAS,IAOX,KAAM,CACJ,KAAM,OACN,QAAS,OACT,SAAUC,EAAM,CACd,OAAOC,EAAAA,aAAa,SAASD,CAAI,CACnC,GAOF,UAAW,CACT,KAAM,QACN,QAAS,IAOX,SAAU,CACR,KAAM,QACN,QAAS,IAOX,WAAY,CACV,KAAM,QACN,QAAS,IAMX,YAAa,CACX,KAAM,OACN,QAAS,IAMX,gBAAiB,CACf,KAAM,OACN,QAAS,IASX,eAAgB,CACd,KAAM,OACN,QAAS,UAIb,MAAO,CAML,SAGF,SAAU,CACR,MAAQ,CACN,OAAO,KAAK,UAAY,cAAgB,QAC1C,EAEA,aAAe,CASb,MAAO,CACL,WATkB,CAClB,MAAO,kBACP,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,kBAKM,KAAK,IAAI,EACrB,CACE,sBAAuB,KAAK,UAC5B,mBAAoB,KAAK,QAG/B,EAEA,uBAAyB,CACvB,OAAI,KAAK,kBAAoB,GAAW,KAEjC,yBAAyB,KAAK,eAAe;AAAA,iCACzB,KAAK,cAAc,GAChD,GAGF,SAAW,CACL,KAAK,WACP,KAAK,kBAAiB,CAE1B,EAEA,QAAS,CACP,UAAWE,EAAG,CACR,KAAK,WACP,KAAK,qBAAqBA,CAAC,CAE/B,EAEJ,EA5OAC,EAAA,CAAA,OAAA,kBAAA,kBAAA,+KAEEC,EAAAA,mBAyCQ,QAAA,CAxCL,MAHLC,EAAAA,eAGYC,EAAA,WAAW,EAClB,MAJLC,EAAAA,eAIYD,EAAA,qBAAqB,EAC5B,UAAOE,EAAA,CAAA,IAAAA,EAAA,CAAA,EALZC,EAAAA,iBAKkBH,EAAA,WAAAA,EAAA,UAAA,GAAAI,CAAA,EAAS,CAAA,KAAA,CAAA,KAEvBC,EAAAA,mBAmCM,MAAA,CAlCJ,MARNN,EAAAA,eAAA,CAQY,mBACEO,EAAA,WAAW,CAAA,EAClB,KAAMN,EAAA,KACN,kBAAiBM,EAAA,QACjB,mBAAkBA,EAAA,YAGVA,EAAA,SAffC,EAAAA,mBAAA,GAAA,EAAA,iBAcMC,EAAAA,YAMiBC,EAAA,CApBvB,IAAA,EAgBS,KAAMH,EAAA,OAhBf,QAAAI,EAAAA,QAmBQ,IAAoB,CAApBC,aAAoBC,EAAA,OAAA,MAAA,IAnB5B,EAAA,gBAqBMC,EAAAA,YAYoBC,EAAA,CAXjB,WAAUR,EAAA,QACV,aAAYA,EAAA,UACZ,MAAOA,EAAA,QAEG,wBAGT,IAA6B,CAA7BK,aAA6BC,EAAA,OAAA,eAAA,IA7BvC,QAAAF,EAAAA,QAgCQ,IAAQ,CAARC,aAAQC,EAAA,OAAA,SAAA,IAhChB,EAAA,wCAkCMC,EAAAA,YAOmBE,EAAA,CANhB,cAAaT,EAAA,WACb,aAAYA,EAAA,UACZ,uBAAOM,EAAA,MAAK,OAAA,KArCrB,QAAAF,EAAAA,QAwCQ,IAAsB,CAAtBC,aAAsBC,EAAA,OAAA,QAAA,IAxC9B,EAAA,kCAAA,EAAA,GAAAf,CAAA"}

package/dist/vue3/lib/banner/banner.js

@@ -1,18 +1,18 @@
 import g from "../../common/mixins/modal.js";
 import l from "../../common/utils/index.js";
-import { resolveComponent as r, openBlock as s, createElementBlock as p, normalizeClass as c, normalizeStyle as h, withKeys as y, createElementVNode as k, createBlock as _, withCtx as o, renderSlot as a, createCommentVNode as C, createVNode as u } from "vue";
+import { resolveComponent as r, createElementBlock as p, openBlock as s, withKeys as h, normalizeStyle as y, normalizeClass as c, createElementVNode as k, createBlock as _, createCommentVNode as C, createVNode as u, withCtx as o, renderSlot as a } from "vue";
 import { _ as I } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import S from "../notice/notice-icon.js";
+import S from "../notice/notice-action.js";
 import B from "../notice/notice-content.js";
-import N from "../notice/notice-action.js";
+import N from "../notice/notice-icon.js";
 import { NOTICE_KINDS as v } from "../notice/notice-constants.js";
 const D = {
   compatConfig: { MODE: 3 },
   name: "DtBanner",
   components: {
-    DtNoticeIcon: S,
+    DtNoticeIcon: N,
     DtNoticeContent: B,
-    DtNoticeAction: N
+    DtNoticeAction: S
   },
   mixins: [g],
   props: {
@@ -167,8 +167,8 @@ function z(e, i, t, E, F, n) {
   const m = r("dt-notice-icon"), f = r("dt-notice-content"), b = r("dt-notice-action");
   return s(), p("aside", {
     class: c(n.bannerClass),
-    style: h(n.bannerBackgroundImage),
-    onKeydown: i[1] || (i[1] = y((...d) => n.trapFocus && n.trapFocus(...d), ["tab"]))
+    style: y(n.bannerBackgroundImage),
+    onKeydown: i[1] || (i[1] = h((...d) => n.trapFocus && n.trapFocus(...d), ["tab"]))
   }, [
     k("div", {
       class: c(["d-banner__dialog", t.dialogClass]),

package/dist/vue3/lib/banner/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sources":["../../../components/banner/banner.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <aside\n    :class=\"bannerClass\"\n    :style=\"bannerBackgroundImage\"\n    @keydown.tab=\"trapFocus\"\n  >\n    <div\n      class=\"d-banner__dialog\"\n      :class=\"dialogClass\"\n      :role=\"role\"\n      :aria-labelledby=\"titleId\"\n      :aria-describedby=\"contentId\"\n    >\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n      >\n        <template #titleOverride>\n          <!-- eslint-disable-next-line max-len -->\n          <!-- @slot Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the banner -->\n        <slot />\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        @close=\"$emit('close')\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport Modal from '@/common/mixins/modal';\nimport utils from '@/common/utils';\n\n/**\n * Banners are a type of notice, delivering system and engagement messaging.\n * These are highly intrusive notices and should be used sparingly and appropriately.\n * @see https://dialtone.dialpad.com/components/banner.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBanner',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [Modal],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alertdialog.\n     * and will modally trap the keyboard focus in the dialog as soon as it displays.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Pins the banner to the top of the window and pushes all app content down.\n     * @values true, false\n     */\n    pinned: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Inner dialog class\n     */\n    dialogClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Banner background image\n     */\n    backgroundImage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Background image size, follows the background-size CSS property values\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" target=\"_blank\">\n     *   CSS background-sizes\n     * </a>\n     */\n    backgroundSize: {\n      type: String,\n      default: 'cover',\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    role () {\n      return this.important ? 'alertdialog' : 'status';\n    },\n\n    bannerClass () {\n      const kindClasses = {\n        error: 'd-banner--error',\n        info: 'd-banner--info',\n        success: 'd-banner--success',\n        warning: 'd-banner--warning',\n        base: 'd-banner--base',\n      };\n\n      return [\n        'd-banner',\n        kindClasses[this.kind],\n        {\n          'd-banner--important': this.important,\n          'd-banner--pinned': this.pinned,\n        },\n      ];\n    },\n\n    bannerBackgroundImage () {\n      if (this.backgroundImage === '') return null;\n\n      return `background-image: url(${this.backgroundImage});\n              background-size: ${this.backgroundSize};`;\n    },\n  },\n\n  mounted () {\n    if (this.important) {\n      this.focusFirstElement();\n    }\n  },\n\n  methods: {\n    trapFocus (e) {\n      if (this.important) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","Modal","utils","kind","NOTICE_KINDS","_hoisted_1","_createElementBlock","_normalizeClass","$options","_normalizeStyle","_cache","_withKeys","args","_createElementVNode","$props","_createCommentVNode","_createBlock","_component_dt_notice_icon","_withCtx","_renderSlot","_ctx","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":"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"}
+{"version":3,"file":"banner.js","sources":["../../../components/banner/banner.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <aside\n    :class=\"bannerClass\"\n    :style=\"bannerBackgroundImage\"\n    @keydown.tab=\"trapFocus\"\n  >\n    <div\n      class=\"d-banner__dialog\"\n      :class=\"dialogClass\"\n      :role=\"role\"\n      :aria-labelledby=\"titleId\"\n      :aria-describedby=\"contentId\"\n    >\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n      >\n        <template #titleOverride>\n          <!-- eslint-disable-next-line max-len -->\n          <!-- @slot Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the banner -->\n        <slot />\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        @close=\"$emit('close')\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport Modal from '@/common/mixins/modal';\nimport utils from '@/common/utils';\n\n/**\n * Banners are a type of notice, delivering system and engagement messaging.\n * These are highly intrusive notices and should be used sparingly and appropriately.\n * @see https://dialtone.dialpad.com/components/banner.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBanner',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [Modal],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alertdialog.\n     * and will modally trap the keyboard focus in the dialog as soon as it displays.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Pins the banner to the top of the window and pushes all app content down.\n     * @values true, false\n     */\n    pinned: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Inner dialog class\n     */\n    dialogClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Banner background image\n     */\n    backgroundImage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Background image size, follows the background-size CSS property values\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" target=\"_blank\">\n     *   CSS background-sizes\n     * </a>\n     */\n    backgroundSize: {\n      type: String,\n      default: 'cover',\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    role () {\n      return this.important ? 'alertdialog' : 'status';\n    },\n\n    bannerClass () {\n      const kindClasses = {\n        error: 'd-banner--error',\n        info: 'd-banner--info',\n        success: 'd-banner--success',\n        warning: 'd-banner--warning',\n        base: 'd-banner--base',\n      };\n\n      return [\n        'd-banner',\n        kindClasses[this.kind],\n        {\n          'd-banner--important': this.important,\n          'd-banner--pinned': this.pinned,\n        },\n      ];\n    },\n\n    bannerBackgroundImage () {\n      if (this.backgroundImage === '') return null;\n\n      return `background-image: url(${this.backgroundImage});\n              background-size: ${this.backgroundSize};`;\n    },\n  },\n\n  mounted () {\n    if (this.important) {\n      this.focusFirstElement();\n    }\n  },\n\n  methods: {\n    trapFocus (e) {\n      if (this.important) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","Modal","utils","kind","NOTICE_KINDS","_hoisted_1","_createElementBlock","_normalizeClass","$options","_normalizeStyle","_cache","_withKeys","args","_createElementVNode","$props","_createCommentVNode","_createBlock","_component_dt_notice_icon","_withCtx","_renderSlot","_ctx","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":"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"}