@dialpad/dialtone 9.133.0-next.2 → 9.133.0

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":"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"}
+{"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":"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"}
+{"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":";;;;;;;;AAwDA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,EACD;AAAA,EAED,QAAQ,CAACC,CAAK;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,SAAS;AAAA,MACP,MAAM;AAAA,MACN,UAAW;AAAE,eAAOC,EAAM,gBAAiB;AAAA,MAAG;AAAA,IAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAW;AAAE,eAAOA,EAAM,gBAAiB;AAAA,MAAG;AAAA,IAC/C;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAUC,GAAM;AACd,eAAOC,EAAa,SAASD,CAAI;AAAA,MAClC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,OAAQ;AACN,aAAO,KAAK,YAAY,gBAAgB;AAAA,IACzC;AAAA,IAED,cAAe;AASb,aAAO;AAAA,QACL;AAAA,QATkB;AAAA,UAClB,OAAO;AAAA,UACP,MAAM;AAAA,UACN,SAAS;AAAA,UACT,SAAS;AAAA,UACT,MAAM;AAAA,UAKM,KAAK,IAAI;AAAA,QACrB;AAAA,UACE,uBAAuB,KAAK;AAAA,UAC5B,oBAAoB,KAAK;AAAA,QAC1B;AAAA;IAEJ;AAAA,IAED,wBAAyB;AACvB,aAAI,KAAK,oBAAoB,KAAW,OAEjC,yBAAyB,KAAK,eAAe;AAAA,iCACzB,KAAK,cAAc;AAAA,IAC/C;AAAA,EACF;AAAA,EAED,UAAW;AACT,IAAI,KAAK,aACP,KAAK,kBAAiB;AAAA,EAEzB;AAAA,EAED,SAAS;AAAA,IACP,UAAW,GAAG;AACZ,MAAI,KAAK,aACP,KAAK,qBAAqB,CAAC;AAAA,IAE9B;AAAA,EACF;AACH,GA5OAE,IAAA,CAAA,QAAA,mBAAA,kBAAA;;;cAEEC,EAyCQ,SAAA;AAAA,IAxCL,OAHLC,EAGYC,EAAW,WAAA;AAAA,IAClB,OAJLC,EAIYD,EAAqB,qBAAA;AAAA,IAC5B,WAAOE,EAAA,CAAA,MAAAA,EAAA,CAAA,IALZC,YAKkBH,EAAS,aAAAA,EAAA,UAAA,GAAAI,CAAA,GAAA,CAAA,KAAA,CAAA;AAAA;IAEvBC,EAmCM,OAAA;AAAA,MAlCJ,OARNN,EAAA,CAQY,oBACEO,EAAW,WAAA,CAAA;AAAA,MAClB,MAAMN,EAAI;AAAA,MACV,mBAAiBM,EAAO;AAAA,MACxB,oBAAkBA,EAAS;AAAA;MAGnBA,EAAQ,WAfvBC,EAAA,IAAA,EAAA,UAcMC,EAMiBC,GAAA;AAAA,QApBvB,KAAA;AAAA,QAgBS,MAAMH,EAAI;AAAA;QAhBnB,SAAAI,EAmBQ,MAAoB;AAAA,UAApBC,EAAoBC,EAAA,QAAA,MAAA;AAAA;QAnB5B,GAAA;AAAA;MAqBMC,EAYoBC,GAAA;AAAA,QAXjB,YAAUR,EAAO;AAAA,QACjB,cAAYA,EAAS;AAAA,QACrB,OAAOA,EAAK;AAAA;QAEF,iBAGT,MAA6B;AAAA,UAA7BK,EAA6BC,EAAA,QAAA,eAAA;AAAA;QA7BvC,SAAAF,EAgCQ,MAAQ;AAAA,UAARC,EAAQC,EAAA,QAAA,SAAA;AAAA;QAhChB,GAAA;AAAA;MAkCMC,EAOmBE,GAAA;AAAA,QANhB,eAAaT,EAAU;AAAA,QACvB,cAAYA,EAAS;AAAA,QACrB,gCAAOM,EAAK,MAAA,OAAA;AAAA;QArCrB,SAAAF,EAwCQ,MAAsB;AAAA,UAAtBC,EAAsBC,EAAA,QAAA,QAAA;AAAA;QAxC9B,GAAA;AAAA;IAAA,GAAA,IAAAf,CAAA;AAAA;;;"}
+{"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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"}

package/dist/vue3/lib/breadcrumbs/breadcrumb-item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.cjs","sources":["../../../components/breadcrumbs/breadcrumb_item.vue"],"sourcesContent":["<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n    ]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <dt-link\n      :kind=\"linkKind\"\n      :inverted=\"linkInverted\"\n      :aria-current=\"ariaCurrent\"\n      data-qa=\"breadcrumb-item\"\n      v-bind=\"removeClassStyleAttrs($attrs)\"\n    >\n      <!-- @slot default slot for breadcrumb item's label -->\n      <slot>\n        {{ label }}\n      </slot>\n    </dt-link>\n  </li>\n</template>\n\n<script>\nimport { BREADCRUMB_ITEM_SELECTED_MODIFIER } from './breadcrumbs_constants';\nimport { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { DtLink, MUTED } from '@/components/link';\n\nexport default {\n  name: 'DtBreadcrumbItem',\n\n  components: {\n    DtLink,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Applies selected styles to the breadcrumb\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Describes the breadcrumb. Overridden by default slot\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMB_ITEM_SELECTED_MODIFIER,\n\n    };\n  },\n\n  computed: {\n    linkKind () {\n      return this.inverted ? '' : MUTED;\n    },\n\n    linkInverted () {\n      return !!this.inverted;\n    },\n\n    ariaCurrent () {\n      return this.selected ? 'location' : undefined;\n    },\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n  },\n};\n</script>\n"],"names":["_sfc_main","DtLink","BREADCRUMB_ITEM_SELECTED_MODIFIER","MUTED","removeClassStyleAttrs","addClassStyleAttrs","_openBlock","_createElementBlock","_mergeProps","$data","$props","$options","_ctx","_createVNode","_component_dt_link","_withCtx","_renderSlot","_createTextVNode","_toDisplayString"],"mappings":"sVA6BKA,EAAU,CACb,KAAM,mBAEN,WAAY,CACV,OAAAC,EAAM,OACP,EAED,aAAc,GAEd,MAAO,CAIL,SAAU,CACR,KAAM,QACN,QAAS,EACV,EAKD,SAAU,CACR,KAAM,QACN,QAAS,EACV,EAKD,MAAO,CACL,KAAM,OACN,QAAS,EACV,CACF,EAED,MAAQ,CACN,MAAO,CACL,kCAAAC,EAAiC,kCAGpC,EAED,SAAU,CACR,UAAY,CACV,OAAO,KAAK,SAAW,GAAKC,OAC7B,EAED,cAAgB,CACd,MAAO,CAAC,CAAC,KAAK,QACf,EAED,aAAe,CACb,OAAO,KAAK,SAAW,WAAa,MACrC,CACF,EAED,QAAS,CACP,sBAAAC,EAAqB,sBACrB,mBAAAC,EAAkB,kBACnB,CACH,gEAxFE,OAAAC,YAAA,EAAAC,qBAoBK,KApBLC,EAAAA,WAoBK,CAnBH,UAAQ,qBACP,MAAK,uBAA0C,CAAA,CAAAC,EAAA,iCAAiC,EAAGC,EAAQ,QAAA,EAIpF,EAAAC,EAAA,mBAAmBC,EAAM,MAAA,CAAA,EAAA,CAEjCC,EAAA,YAWUC,EAXVN,aAWU,CAVP,KAAMG,EAAQ,SACd,SAAUA,EAAY,aACtB,eAAcA,EAAW,YAC1B,UAAQ,iBACA,EAAAA,EAAA,sBAAsBC,EAAM,MAAA,CAAA,EAAA,CAd1C,QAAAG,EAAA,QAiBM,IAEO,CAFPC,EAAAA,WAEOJ,sBAFP,IAEO,CAnBbK,EAAAA,gBAAAC,EAAAA,gBAkBWR,EAAK,KAAA,EAAA,CAAA,MAlBhB,EAAA"}
+{"version":3,"file":"breadcrumb-item.cjs","sources":["../../../components/breadcrumbs/breadcrumb_item.vue"],"sourcesContent":["<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n    ]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <dt-link\n      :kind=\"linkKind\"\n      :inverted=\"linkInverted\"\n      :aria-current=\"ariaCurrent\"\n      data-qa=\"breadcrumb-item\"\n      v-bind=\"removeClassStyleAttrs($attrs)\"\n    >\n      <!-- @slot default slot for breadcrumb item's label -->\n      <slot>\n        {{ label }}\n      </slot>\n    </dt-link>\n  </li>\n</template>\n\n<script>\nimport { BREADCRUMB_ITEM_SELECTED_MODIFIER } from './breadcrumbs_constants';\nimport { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { DtLink, MUTED } from '@/components/link';\n\nexport default {\n  name: 'DtBreadcrumbItem',\n\n  components: {\n    DtLink,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Applies selected styles to the breadcrumb\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Describes the breadcrumb. Overridden by default slot\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMB_ITEM_SELECTED_MODIFIER,\n\n    };\n  },\n\n  computed: {\n    linkKind () {\n      return this.inverted ? '' : MUTED;\n    },\n\n    linkInverted () {\n      return !!this.inverted;\n    },\n\n    ariaCurrent () {\n      return this.selected ? 'location' : undefined;\n    },\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n  },\n};\n</script>\n"],"names":["_sfc_main","DtLink","BREADCRUMB_ITEM_SELECTED_MODIFIER","MUTED","removeClassStyleAttrs","addClassStyleAttrs","_openBlock","_createElementBlock","_mergeProps","$data","$props","$options","_ctx","_createVNode","_component_dt_link","_withCtx","_renderSlot","_createTextVNode","_toDisplayString"],"mappings":"sVA6BKA,EAAU,CACb,KAAM,mBAEN,WAAY,CACV,OAAAC,EAAAA,SAGF,aAAc,GAEd,MAAO,CAIL,SAAU,CACR,KAAM,QACN,QAAS,IAMX,SAAU,CACR,KAAM,QACN,QAAS,IAMX,MAAO,CACL,KAAM,OACN,QAAS,KAIb,MAAQ,CACN,MAAO,CACL,kCAAAC,EAAAA,kCAGJ,EAEA,SAAU,CACR,UAAY,CACV,OAAO,KAAK,SAAW,GAAKC,EAAAA,KAC9B,EAEA,cAAgB,CACd,MAAO,CAAC,CAAC,KAAK,QAChB,EAEA,aAAe,CACb,OAAO,KAAK,SAAW,WAAa,MACtC,GAGF,QAAS,CACP,sBAAAC,EAAAA,sBACA,mBAAAC,EAAAA,mBAEJ,gEAxFE,OAAAC,YAAA,EAAAC,qBAoBK,KApBLC,EAAAA,WAoBK,CAnBH,UAAQ,qBACP,MAAK,uBAA0C,CAAA,CAAAC,EAAA,iCAAiC,EAAGC,EAAA,QAAQ,EAIpF,EAAAC,EAAA,mBAAmBC,EAAA,MAAM,CAAA,EAAA,CAEjCC,EAAAA,YAWUC,EAXVN,aAWU,CAVP,KAAMG,EAAA,SACN,SAAUA,EAAA,aACV,eAAcA,EAAA,YACf,UAAQ,iBACA,EAAAA,EAAA,sBAAsBC,EAAA,MAAM,CAAA,EAAA,CAd1C,QAAAG,EAAAA,QAiBM,IAEO,CAFPC,EAAAA,WAEOJ,sBAFP,IAEO,CAnBbK,EAAAA,gBAAAC,EAAAA,gBAkBWR,EAAA,KAAK,EAAA,CAAA,MAlBhB,EAAA"}

package/dist/vue3/lib/breadcrumbs/breadcrumb-item.js

@@ -1,6 +1,6 @@
 import { BREADCRUMB_ITEM_SELECTED_MODIFIER as l } from "./breadcrumbs-constants.js";
-import { removeClassStyleAttrs as i, addClassStyleAttrs as s } from "../../common/utils/index.js";
-import { resolveComponent as o, openBlock as m, createElementBlock as c, mergeProps as a, createVNode as u, withCtx as f, renderSlot as _, createTextVNode as p, toDisplayString as E } from "vue";
+import { addClassStyleAttrs as i, removeClassStyleAttrs as s } from "../../common/utils/index.js";
+import { resolveComponent as o, createElementBlock as m, openBlock as c, mergeProps as a, createVNode as u, withCtx as f, renderSlot as _, createTextVNode as p, toDisplayString as E } from "vue";
 import { _ as C } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import k from "../link/link.js";
 import { MUTED as D } from "../link/link-constants.js";
@@ -50,13 +50,13 @@ const b = {
     }
   },
   methods: {
-    removeClassStyleAttrs: i,
-    addClassStyleAttrs: s
+    removeClassStyleAttrs: s,
+    addClassStyleAttrs: i
   }
 };
 function v(t, B, r, I, n, e) {
   const d = o("dt-link");
-  return m(), c("li", a({
+  return c(), m("li", a({
     "data-qa": "dt-breadcrumb-item",
     class: [
       "d-breadcrumbs__item",

package/dist/vue3/lib/breadcrumbs/breadcrumb-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.js","sources":["../../../components/breadcrumbs/breadcrumb_item.vue"],"sourcesContent":["<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n    ]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <dt-link\n      :kind=\"linkKind\"\n      :inverted=\"linkInverted\"\n      :aria-current=\"ariaCurrent\"\n      data-qa=\"breadcrumb-item\"\n      v-bind=\"removeClassStyleAttrs($attrs)\"\n    >\n      <!-- @slot default slot for breadcrumb item's label -->\n      <slot>\n        {{ label }}\n      </slot>\n    </dt-link>\n  </li>\n</template>\n\n<script>\nimport { BREADCRUMB_ITEM_SELECTED_MODIFIER } from './breadcrumbs_constants';\nimport { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { DtLink, MUTED } from '@/components/link';\n\nexport default {\n  name: 'DtBreadcrumbItem',\n\n  components: {\n    DtLink,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Applies selected styles to the breadcrumb\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Describes the breadcrumb. Overridden by default slot\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMB_ITEM_SELECTED_MODIFIER,\n\n    };\n  },\n\n  computed: {\n    linkKind () {\n      return this.inverted ? '' : MUTED;\n    },\n\n    linkInverted () {\n      return !!this.inverted;\n    },\n\n    ariaCurrent () {\n      return this.selected ? 'location' : undefined;\n    },\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n  },\n};\n</script>\n"],"names":["_sfc_main","DtLink","BREADCRUMB_ITEM_SELECTED_MODIFIER","MUTED","removeClassStyleAttrs","addClassStyleAttrs","_openBlock","_createElementBlock","_mergeProps","$data","$props","$options","_ctx","_createVNode","_component_dt_link","_withCtx","_renderSlot","_createTextVNode","_toDisplayString"],"mappings":";;;;;;AA6BA,MAAKA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAC;AAAA,EACD;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,mCAAAC;AAAA;EAGH;AAAA,EAED,UAAU;AAAA,IACR,WAAY;AACV,aAAO,KAAK,WAAW,KAAKC;AAAA,IAC7B;AAAA,IAED,eAAgB;AACd,aAAO,CAAC,CAAC,KAAK;AAAA,IACf;AAAA,IAED,cAAe;AACb,aAAO,KAAK,WAAW,aAAa;AAAA,IACrC;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,uBAAAC;AAAA,IACA,oBAAAC;AAAA,EACD;AACH;;;AAxFE,SAAAC,EAAA,GAAAC,EAoBK,MApBLC,EAoBK;AAAA,IAnBH,WAAQ;AAAA,IACP,OAAK;AAAA;MAA0C,EAAA,CAAAC,EAAA,iCAAiC,GAAGC,EAAQ,SAAA;AAAA;EAIpF,GAAAC,EAAA,mBAAmBC,EAAM,MAAA,CAAA,GAAA;AAAA,IAEjCC,EAWUC,GAXVN,EAWU;AAAA,MAVP,MAAMG,EAAQ;AAAA,MACd,UAAUA,EAAY;AAAA,MACtB,gBAAcA,EAAW;AAAA,MAC1B,WAAQ;AAAA,IACA,GAAAA,EAAA,sBAAsBC,EAAM,MAAA,CAAA,GAAA;AAAA,MAd1C,SAAAG,EAiBM,MAEO;AAAA,QAFPC,EAEOJ,yBAFP,MAEO;AAAA,UAnBbK,EAAAC,EAkBWR,EAAK,KAAA,GAAA,CAAA;AAAA;;MAlBhB,GAAA;AAAA;;;;"}
+{"version":3,"file":"breadcrumb-item.js","sources":["../../../components/breadcrumbs/breadcrumb_item.vue"],"sourcesContent":["<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n    ]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <dt-link\n      :kind=\"linkKind\"\n      :inverted=\"linkInverted\"\n      :aria-current=\"ariaCurrent\"\n      data-qa=\"breadcrumb-item\"\n      v-bind=\"removeClassStyleAttrs($attrs)\"\n    >\n      <!-- @slot default slot for breadcrumb item's label -->\n      <slot>\n        {{ label }}\n      </slot>\n    </dt-link>\n  </li>\n</template>\n\n<script>\nimport { BREADCRUMB_ITEM_SELECTED_MODIFIER } from './breadcrumbs_constants';\nimport { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { DtLink, MUTED } from '@/components/link';\n\nexport default {\n  name: 'DtBreadcrumbItem',\n\n  components: {\n    DtLink,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Applies selected styles to the breadcrumb\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Describes the breadcrumb. Overridden by default slot\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMB_ITEM_SELECTED_MODIFIER,\n\n    };\n  },\n\n  computed: {\n    linkKind () {\n      return this.inverted ? '' : MUTED;\n    },\n\n    linkInverted () {\n      return !!this.inverted;\n    },\n\n    ariaCurrent () {\n      return this.selected ? 'location' : undefined;\n    },\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n  },\n};\n</script>\n"],"names":["_sfc_main","DtLink","BREADCRUMB_ITEM_SELECTED_MODIFIER","MUTED","removeClassStyleAttrs","addClassStyleAttrs","_openBlock","_createElementBlock","_mergeProps","$data","$props","$options","_ctx","_createVNode","_component_dt_link","_withCtx","_renderSlot","_createTextVNode","_toDisplayString"],"mappings":";;;;;;AA6BA,MAAKA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAC;AAAA;EAGF,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,mCAAAC;AAAA;EAGJ;AAAA,EAEA,UAAU;AAAA,IACR,WAAY;AACV,aAAO,KAAK,WAAW,KAAKC;AAAA,IAC9B;AAAA,IAEA,eAAgB;AACd,aAAO,CAAC,CAAC,KAAK;AAAA,IAChB;AAAA,IAEA,cAAe;AACb,aAAO,KAAK,WAAW,aAAa;AAAA,IACtC;AAAA;EAGF,SAAS;AAAA,IACP,uBAAAC;AAAA,IACA,oBAAAC;AAAA;AAEJ;;;AAxFE,SAAAC,EAAA,GAAAC,EAoBK,MApBLC,EAoBK;AAAA,IAnBH,WAAQ;AAAA,IACP,OAAK;AAAA;MAA0C,EAAA,CAAAC,EAAA,iCAAiC,GAAGC,EAAA,SAAQ;AAAA;EAIpF,GAAAC,EAAA,mBAAmBC,EAAA,MAAM,CAAA,GAAA;AAAA,IAEjCC,EAWUC,GAXVN,EAWU;AAAA,MAVP,MAAMG,EAAA;AAAA,MACN,UAAUA,EAAA;AAAA,MACV,gBAAcA,EAAA;AAAA,MACf,WAAQ;AAAA,IACA,GAAAA,EAAA,sBAAsBC,EAAA,MAAM,CAAA,GAAA;AAAA,MAd1C,SAAAG,EAiBM,MAEO;AAAA,QAFPC,EAEOJ,yBAFP,MAEO;AAAA,UAnBbK,EAAAC,EAkBWR,EAAA,KAAK,GAAA,CAAA;AAAA;;MAlBhB,GAAA;AAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.cjs","sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel || i18n.$t('DIALTONE_BREADCRUMBS_ARIA_LABEL')\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol>\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtBreadcrumbItem","breadcrumbs","href","label","BREADCRUMBS_INVERTED_MODIFIER","DialtoneLocalization","index","utils","_hoisted_1","_createElementBlock","$props","$data","_normalizeClass","_createElementVNode","_renderSlot","_ctx","_openBlock","_Fragment","_renderList","item","_createBlock","_component_dt_breadcrumb_item","_mergeProps","$options"],"mappings":"6VAkCKA,EAAU,CACb,aAAc,CAAE,KAAM,CAAG,EACzB,KAAM,gBAEN,WAAY,CACV,iBAAAC,EAAgB,OACjB,EAED,MAAO,CAIL,YAAa,CACX,KAAM,MACN,QAAS,IAAM,CAAE,EACjB,SAAUC,EAAa,CACrB,OAAOA,EAAY,MAAM,CAAC,CAAE,KAAAC,EAAM,MAAAC,KACzBD,IAAS,QAAaC,IAAU,MACxC,CACF,CACF,EAMD,SAAU,CACR,KAAM,QACN,QAAS,EACV,EAKD,UAAW,CACT,KAAM,OACN,QAAS,EACV,CACF,EAED,MAAQ,CACN,MAAO,+BACLC,EAA6B,8BAC7B,KAAM,IAAIC,EAAAA,qBAEb,EAED,QAAS,CACP,qBAAsBC,EAAO,CAC3B,MAAO,oBAAoBA,CAAK,IAAIC,EAAAA,QAAM,gBAAiB,CAAA,EAC5D,CACF,CACH,EAtFAC,EAAA,CAAA,YAAA,gGACEC,EAmBM,mBAAA,MAAA,CAlBH,aAAYC,EAAA,WAAaC,EAAA,KAAK,GAAE,iCAAA,EACjC,UAAQ,iBACP,MAJLC,EAAAA,eAAA,iBAI8C,CAAA,CAAAD,EAAA,6BAA6B,EAAGD,EAAQ,QAAA,MAKlFG,EAUK,mBAAA,KAAA,KAAA,CARHC,EAAAA,WAOOC,sBAPP,IAOO,EANLC,EAAAA,UAAA,EAAA,EAAAP,EAAA,mBAKEQ,gBAjBVC,EAakC,WAAAR,EAAA,YAblC,CAakBS,EAAMb,KADhBU,YAAA,EAAAI,cAKEC,EALFC,EAAAA,WAKE,CAHC,IAAKC,EAAoB,qBAACjB,CAAK,EAC/B,SAAUI,EAAQ,UACXS,CAAI,EAAA,KAAA,GAAA,CAAA,UAAA,CAAA,aAhBtB,EAAA,GAAAX,CAAA"}
+{"version":3,"file":"breadcrumbs.cjs","sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel || i18n.$t('DIALTONE_BREADCRUMBS_ARIA_LABEL')\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol>\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtBreadcrumbItem","breadcrumbs","href","label","BREADCRUMBS_INVERTED_MODIFIER","DialtoneLocalization","index","utils","_hoisted_1","_createElementBlock","$props","$data","_normalizeClass","_createElementVNode","_renderSlot","_ctx","_openBlock","_Fragment","_renderList","item","_createBlock","_component_dt_breadcrumb_item","_mergeProps","$options"],"mappings":"6VAkCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,gBAEN,WAAY,CACV,iBAAAC,EAAAA,SAGF,MAAO,CAIL,YAAa,CACX,KAAM,MACN,QAAS,IAAM,CAAA,EACf,SAAUC,EAAa,CACrB,OAAOA,EAAY,MAAM,CAAC,CAAE,KAAAC,EAAM,MAAAC,KACzBD,IAAS,QAAaC,IAAU,MACxC,CACH,GAOF,SAAU,CACR,KAAM,QACN,QAAS,IAMX,UAAW,CACT,KAAM,OACN,QAAS,KAIb,MAAQ,CACN,MAAO,+BACLC,EAAAA,8BACA,KAAM,IAAIC,EAAAA,qBAEd,EAEA,QAAS,CACP,qBAAsBC,EAAO,CAC3B,MAAO,oBAAoBA,CAAK,IAAIC,EAAAA,QAAM,gBAAe,CAAE,EAC7D,EAEJ,EAtFAC,EAAA,CAAA,YAAA,gGACEC,EAAAA,mBAmBM,MAAA,CAlBH,aAAYC,EAAA,WAAaC,EAAA,KAAK,GAAE,iCAAA,EACjC,UAAQ,iBACP,MAJLC,EAAAA,eAAA,iBAI8C,CAAA,CAAAD,EAAA,6BAA6B,EAAGD,EAAA,QAAQ,MAKlFG,EAAAA,mBAUK,KAAA,KAAA,CARHC,EAAAA,WAOOC,sBAPP,IAOO,EANLC,EAAAA,UAAA,EAAA,EAAAP,EAAAA,mBAKEQ,gBAjBVC,EAAAA,WAakCR,EAAA,YAblC,CAakBS,EAAMb,KADhBU,YAAA,EAAAI,cAKEC,EALFC,EAAAA,WAKE,CAHC,IAAKC,EAAA,qBAAqBjB,CAAK,EAC/B,SAAUI,EAAA,UACHS,CAAI,EAAA,KAAA,GAAA,CAAA,UAAA,CAAA,aAhBtB,EAAA,GAAAX,CAAA"}

package/dist/vue3/lib/breadcrumbs/breadcrumbs.js

@@ -2,7 +2,7 @@ import { BREADCRUMBS_INVERTED_MODIFIER as c } from "./breadcrumbs-constants.js";
 import u from "./breadcrumb-item.js";
 import s from "../../common/utils/index.js";
 import { DialtoneLocalization as b } from "../../localization/index.js";
-import { resolveComponent as _, openBlock as t, createElementBlock as o, normalizeClass as f, createElementVNode as B, renderSlot as p, Fragment as E, renderList as D, createBlock as I, mergeProps as R } from "vue";
+import { resolveComponent as _, createElementBlock as o, openBlock as t, normalizeClass as f, createElementVNode as B, renderSlot as p, Fragment as E, renderList as D, createBlock as I, mergeProps as R } from "vue";
 import { _ as v } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const g = {
   compatConfig: { MODE: 3 },

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel || i18n.$t('DIALTONE_BREADCRUMBS_ARIA_LABEL')\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol>\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtBreadcrumbItem","breadcrumbs","href","label","BREADCRUMBS_INVERTED_MODIFIER","DialtoneLocalization","index","utils","_hoisted_1","_createElementBlock","$props","$data","_normalizeClass","_createElementVNode","_renderSlot","_ctx","_openBlock","_Fragment","_renderList","item","_createBlock","_component_dt_breadcrumb_item","_mergeProps","$options"],"mappings":";;;;;;AAkCA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,kBAAAC;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,SAAUC,GAAa;AACrB,eAAOA,EAAY,MAAM,CAAC,EAAE,MAAAC,GAAM,OAAAC,QACzBD,MAAS,UAAaC,MAAU,MACxC;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,+BAAAC;AAAA,MACA,MAAM,IAAIC,EAAsB;AAAA;EAEnC;AAAA,EAED,SAAS;AAAA,IACP,qBAAsBC,GAAO;AAC3B,aAAO,oBAAoBA,CAAK,IAAIC,EAAM,gBAAiB,CAAA;AAAA,IAC5D;AAAA,EACF;AACH,GAtFAC,IAAA,CAAA,YAAA;;;cACEC,EAmBM,OAAA;AAAA,IAlBH,cAAYC,EAAA,aAAaC,EAAA,KAAK,GAAE,iCAAA;AAAA,IACjC,WAAQ;AAAA,IACP,OAJLC,EAAA;AAAA;MAI8C,EAAA,CAAAD,EAAA,6BAA6B,GAAGD,EAAQ,SAAA;AAAA;;IAKlFG,EAUK,MAAA,MAAA;AAAA,MARHC,EAOOC,yBAPP,MAOO;AAAA,SANLC,EAAA,EAAA,GAAAP,EAKEQ,SAjBVC,EAakCR,EAAA,aAblC,CAakBS,GAAMb,OADhBU,EAAA,GAAAI,EAKEC,GALFC,EAKE;AAAA,UAHC,KAAKC,EAAoB,qBAACjB,CAAK;AAAA,UAC/B,UAAUI,EAAQ;AAAA,WACXS,CAAI,GAAA,MAAA,IAAA,CAAA,UAAA,CAAA;;;EAhBtB,GAAA,IAAAX,CAAA;;;"}
+{"version":3,"file":"breadcrumbs.js","sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel || i18n.$t('DIALTONE_BREADCRUMBS_ARIA_LABEL')\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol>\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtBreadcrumbItem","breadcrumbs","href","label","BREADCRUMBS_INVERTED_MODIFIER","DialtoneLocalization","index","utils","_hoisted_1","_createElementBlock","$props","$data","_normalizeClass","_createElementVNode","_renderSlot","_ctx","_openBlock","_Fragment","_renderList","item","_createBlock","_component_dt_breadcrumb_item","_mergeProps","$options"],"mappings":";;;;;;AAkCA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,kBAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,MAAM,CAAA;AAAA,MACf,SAAUC,GAAa;AACrB,eAAOA,EAAY,MAAM,CAAC,EAAE,MAAAC,GAAM,OAAAC,QACzBD,MAAS,UAAaC,MAAU,MACxC;AAAA,MACH;AAAA;;;;;IAOF,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,+BAAAC;AAAA,MACA,MAAM,IAAIC,EAAoB;AAAA;EAElC;AAAA,EAEA,SAAS;AAAA,IACP,qBAAsBC,GAAO;AAC3B,aAAO,oBAAoBA,CAAK,IAAIC,EAAM,gBAAe,CAAE;AAAA,IAC7D;AAAA;AAEJ,GAtFAC,IAAA,CAAA,YAAA;;;cACEC,EAmBM,OAAA;AAAA,IAlBH,cAAYC,EAAA,aAAaC,EAAA,KAAK,GAAE,iCAAA;AAAA,IACjC,WAAQ;AAAA,IACP,OAJLC,EAAA;AAAA;MAI8C,EAAA,CAAAD,EAAA,6BAA6B,GAAGD,EAAA,SAAQ;AAAA;;IAKlFG,EAUK,MAAA,MAAA;AAAA,MARHC,EAOOC,yBAPP,MAOO;AAAA,SANLC,EAAA,EAAA,GAAAP,EAKEQ,SAjBVC,EAakCR,EAAA,aAblC,CAakBS,GAAMb,OADhBU,EAAA,GAAAI,EAKEC,GALFC,EAKE;AAAA,UAHC,KAAKC,EAAA,qBAAqBjB,CAAK;AAAA,UAC/B,UAAUI,EAAA;AAAA,WACHS,CAAI,GAAA,MAAA,IAAA,CAAA,UAAA,CAAA;;;EAhBtB,GAAA,IAAAX,CAAA;;;"}

package/dist/vue3/lib/button/button-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button-constants.cjs","sources":["../../../components/button/button_constants.js"],"sourcesContent":["export const BUTTON_UNSTYLED_CLASS = 'd-btn--unstyled';\n\nexport const BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  danger: 'd-btn--danger',\n  positive: 'd-btn--positive',\n  inverted: 'd-btn--inverted',\n  unstyled: 'd-btn--unstyled',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  outlined: 'd-btn--outlined',\n  primary: 'd-btn--primary',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'danger',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  BUTTON_UNSTYLED_CLASS,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n"],"names":["BUTTON_UNSTYLED_CLASS","BUTTON_SIZE_MODIFIERS","BUTTON_KIND_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","BUTTON_TYPES","ICON_POSITION_MODIFIERS","INVALID_COMBINATION","_invalidCombinationMessage","BUTTON_ICON_SIZES","circle","kind","importance","button_constants"],"mappings":"4GAAY,MAACA,EAAwB,kBAExBC,EAAwB,CACnC,GAAI,YACJ,GAAI,YACJ,GAAI,GACJ,GAAI,YACJ,GAAI,WACN,EAEaC,EAAwB,CACnC,QAAS,GACT,MAAO,eACP,OAAQ,gBACR,SAAU,kBACV,SAAU,kBACV,SAAU,iBACZ,EAEaC,EAA8B,CACzC,MAAO,GACP,SAAU,kBACV,QAAS,gBACX,EAEaC,EAAe,CAAC,SAAU,QAAS,QAAQ,EAE3CC,EAA0B,CACrC,KAAM,oBACN,MAAO,qBACP,IAAK,mBACL,OAAQ,qBACV,EAEaC,EAAsB,CACjC,CACE,OAAQ,GACR,KAAM,UACN,WAAY,UACZ,QAASC,EAA2B,GAAM,UAAW,SAAS,CAC/D,EACD,CACE,OAAQ,GACR,KAAM,SACN,WAAY,WACZ,QAASA,EAA2B,GAAM,SAAU,UAAU,CAC/D,EACD,CACE,OAAQ,GACR,KAAM,QACN,WAAY,UACZ,QAASA,EAA2B,GAAM,QAAS,SAAS,CAC7D,EACD,CACE,OAAQ,GACR,KAAM,QACN,WAAY,UACZ,QAASA,EAA2B,GAAO,QAAS,SAAS,CAC9D,CACH,EAEaC,EAAoB,CAC/B,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,KACN,EAEA,SAASD,EAA4BE,EAAQC,EAAMC,EAAY,CAC7D,MAAO,qBAAqBF,EAAS,UAAY,EAAE,qBACxCC,CAAI,oBAAoBC,CAAU,2IAI/C,CAEA,MAAeC,EAAA,CACb,sBAAAX,EACA,sBAAAC,EACA,4BAAAC,EACA,aAAAC,EACA,sBAAAJ,EACA,wBAAAK,EACA,oBAAAC,EACA,kBAAAE,CACF"}
+{"version":3,"file":"button-constants.cjs","sources":["../../../components/button/button_constants.js"],"sourcesContent":["export const BUTTON_UNSTYLED_CLASS = 'd-btn--unstyled';\n\nexport const BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  danger: 'd-btn--danger',\n  positive: 'd-btn--positive',\n  inverted: 'd-btn--inverted',\n  unstyled: 'd-btn--unstyled',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  outlined: 'd-btn--outlined',\n  primary: 'd-btn--primary',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'danger',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  BUTTON_UNSTYLED_CLASS,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n"],"names":["BUTTON_UNSTYLED_CLASS","BUTTON_SIZE_MODIFIERS","BUTTON_KIND_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","BUTTON_TYPES","ICON_POSITION_MODIFIERS","INVALID_COMBINATION","_invalidCombinationMessage","BUTTON_ICON_SIZES","circle","kind","importance","button_constants"],"mappings":"4GAAY,MAACA,EAAwB,kBAExBC,EAAwB,CACnC,GAAI,YACJ,GAAI,YACJ,GAAI,GACJ,GAAI,YACJ,GAAI,WACN,EAEaC,EAAwB,CACnC,QAAS,GACT,MAAO,eACP,OAAQ,gBACR,SAAU,kBACV,SAAU,kBACV,SAAU,iBACZ,EAEaC,EAA8B,CACzC,MAAO,GACP,SAAU,kBACV,QAAS,gBACX,EAEaC,EAAe,CAAC,SAAU,QAAS,QAAQ,EAE3CC,EAA0B,CACrC,KAAM,oBACN,MAAO,qBACP,IAAK,mBACL,OAAQ,qBACV,EAEaC,EAAsB,CACjC,CACE,OAAQ,GACR,KAAM,UACN,WAAY,UACZ,QAASC,EAA2B,GAAM,UAAW,SAAS,CAClE,EACE,CACE,OAAQ,GACR,KAAM,SACN,WAAY,WACZ,QAASA,EAA2B,GAAM,SAAU,UAAU,CAClE,EACE,CACE,OAAQ,GACR,KAAM,QACN,WAAY,UACZ,QAASA,EAA2B,GAAM,QAAS,SAAS,CAChE,EACE,CACE,OAAQ,GACR,KAAM,QACN,WAAY,UACZ,QAASA,EAA2B,GAAO,QAAS,SAAS,CACjE,CACA,EAEaC,EAAoB,CAC/B,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,KACN,EAEA,SAASD,EAA4BE,EAAQC,EAAMC,EAAY,CAC7D,MAAO,qBAAqBF,EAAS,UAAY,EAAE,qBACxCC,CAAI,oBAAoBC,CAAU,2IAI/C,CAEA,MAAAC,EAAe,CACb,sBAAAX,EACA,sBAAAC,EACA,4BAAAC,EACA,aAAAC,EACA,sBAAAJ,EACA,wBAAAK,EACA,oBAAAC,EACA,kBAAAE,CACF"}