npm - @dialpad/dialtone - Versions diffs - 9.86.1 → 9.87.0 - Mend

@dialpad/dialtone 9.86.1 → 9.87.0

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

Files changed (618) hide show

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

@@ -306,10 +306,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const DtAvatar = __component__.exports;
 exports.default = DtAvatar;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.vue.cjs","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n <component\n :is=\"clickable ? 'button' : 'div'\"\n :id=\"id\"\n :class=\"avatarClasses\"\n data-qa=\"dt-avatar\"\n @click=\"handleClick\"\n >\n <div\n ref=\"canvas\"\n :class=\"[\n canvasClass,\n 'd-avatar__canvas',\n { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n ]\"\n >\n <img\n v-if=\"showImage\"\n ref=\"avatarImage\"\n class=\"d-avatar__image\"\n data-qa=\"dt-avatar-image\"\n :src=\"imageSrc\"\n :alt=\"imageAlt\"\n >\n <div\n v-else-if=\"isIconType()\"\n :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n :aria-label=\"clickable ? iconAriaLabel : ''\"\n :data-qa=\"iconDataQa\"\n :role=\"clickable ? 'button' : ''\"\n >\n <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n <slot\n name=\"icon\"\n :icon-size=\"iconSize \|\| AVATAR_ICON_SIZES[size]\"\n />\n </div>\n <span\n v-else\n :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n >\n {{ formattedInitials }}\n </span>\n </div>\n <div\n v-if=\"hasOverlayIcon \|\| overlayText\"\n :class=\"overlayClasses\"\n >\n <!-- @slot Slot for overlay icon. -->\n <slot\n v-if=\"hasOverlayIcon\"\n name=\"overlayIcon\"\n />\n <p\n v-else-if=\"overlayText\"\n class=\"d-avatar__overlay-text\"\n >\n {{ overlayText }}\n </p>\n </div>\n <span\n v-if=\"showGroup\"\n class=\"d-avatar__count\"\n data-qa=\"dt-avatar-count\"\n >{{ formattedGroup }}</span>\n <dt-presence\n v-if=\"presence && !showGroup\"\n :presence=\"presence\"\n :class=\"[\n 'd-avatar__presence',\n AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n ]\"\n v-bind=\"presenceProps\"\n data-qa=\"dt-presence\"\n />\n </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n AVATAR_KIND_MODIFIERS,\n AVATAR_SIZE_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_PRESENCE_STATES,\n AVATAR_RANDOM_COLORS,\n AVATAR_GROUP_VALIDATOR,\n AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\n/*\n An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n /\nexport default {\n name: 'DtAvatar',\n components: { DtPresence },\n\n inheritAttrs: false,\n\n props: {\n /\n Id of the avatar content wrapper element\n /\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /\n Pass in a seed to get the random color generation based on that string. For example if you pass in a\n * user ID as the string it will return the same randomly generated colors every time for that user.\n /\n seed: {\n type: String,\n default: undefined,\n },\n\n /\n Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n * if the seed prop is set.\n /\n color: {\n type: String,\n default: undefined,\n },\n\n /\n The size of the avatar\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Used to customize the avatar container\n /\n avatarClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Set classes on the avatar canvas. Wrapper around the core avatar image.\n /\n canvasClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Pass through classes. Used to customize the avatar icon\n /\n iconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Determines whether to show the presence indicator for\n * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n * or 'active'. By default, it's null and nothing is shown.\n * @values null, busy, away, offline, active\n /\n presence: {\n type: String,\n default: AVATAR_PRESENCE_STATES.NONE,\n validator: (state) => {\n return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n },\n },\n\n /\n A set of props to be passed into the presence component.\n /\n presenceProps: {\n type: Object,\n default: () => ({}),\n },\n\n /\n Determines whether to show a group avatar.\n * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n /\n group: {\n type: Number,\n default: undefined,\n validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n },\n\n /\n The text that overlays the avatar\n /\n overlayText: {\n type: String,\n default: '',\n },\n\n /\n Used to customize the avatar overlay\n /\n overlayClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Source of the image\n /\n imageSrc: {\n type: String,\n default: '',\n },\n\n /\n Alt attribute of the image, required if imageSrc is provided.\n * Can be set to '' (empty string) if the image is described\n * in text nearby\n /\n imageAlt: {\n type: String,\n default: undefined,\n },\n\n /\n Icon size to be displayed on the avatar\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n iconSize: {\n type: String,\n default: '',\n validator: (size) => !size \|\| Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Full name used to extract initials.\n /\n fullName: {\n type: String,\n default: '',\n },\n\n /\n Makes the avatar focusable and clickable,\n * emits a click event when clicked.\n /\n clickable: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the icon.\n * To avoid a11y issues, set this prop if clickable and iconName are set.\n /\n iconAriaLabel: {\n type: String,\n default: undefined,\n },\n },\n\n emits: [\n /\n Avatar click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click',\n ],\n\n data () {\n return {\n AVATAR_SIZE_MODIFIERS,\n AVATAR_KIND_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_ICON_SIZES,\n imageLoadedSuccessfully: null,\n formattedInitials: '',\n initializing: false,\n };\n },\n\n computed: {\n hasOverlayIcon () {\n return !!this.$slots.overlayIcon;\n },\n\n iconDataQa () {\n return 'dt-avatar-icon';\n },\n\n avatarClasses () {\n return [\n 'd-avatar',\n AVATAR_SIZE_MODIFIERS[this.validatedSize],\n this.avatarClass,\n {\n 'd-avatar--group': this.showGroup,\n [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),\n 'd-avatar--clickable': this.clickable,\n },\n ];\n },\n\n overlayClasses () {\n return [\n 'd-avatar__overlay',\n this.overlayClass,\n { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n ];\n },\n\n showGroup () {\n return AVATAR_GROUP_VALIDATOR(this.group);\n },\n\n formattedGroup () {\n return this.group > 99 ? '99+' : this.group;\n },\n\n validatedSize () {\n // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n return this.group ? 'xs' : this.size;\n },\n\n showImage () {\n return this.imageLoadedSuccessfully !== false && this.imageSrc;\n },\n },\n\n watch: {\n fullName: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n size: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n group: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n imageSrc (newSrc) {\n this.imageLoadedSuccessfully = null;\n if (!newSrc) return;\n\n this.validateProps();\n this.setImageListeners();\n },\n },\n\n mounted () {\n this.validateProps();\n this.setImageListeners();\n },\n\n methods: {\n isIconType () {\n return this.$scopedSlots.icon && this.$scopedSlots.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":["DtPresence","getUniqueString","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS"],"mappings":"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"}
1	+ {"version":3,"file":"avatar.vue.cjs","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n <component\n :is=\"clickable ? 'button' : 'div'\"\n :id=\"id\"\n :class=\"avatarClasses\"\n data-qa=\"dt-avatar\"\n @click=\"handleClick\"\n >\n <div\n ref=\"canvas\"\n :class=\"[\n canvasClass,\n 'd-avatar__canvas',\n { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n ]\"\n >\n <img\n v-if=\"showImage\"\n ref=\"avatarImage\"\n class=\"d-avatar__image\"\n data-qa=\"dt-avatar-image\"\n :src=\"imageSrc\"\n :alt=\"imageAlt\"\n >\n <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 } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n AVATAR_KIND_MODIFIERS,\n AVATAR_SIZE_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_PRESENCE_STATES,\n AVATAR_RANDOM_COLORS,\n AVATAR_GROUP_VALIDATOR,\n AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\n/*\n An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n /\nexport default {\n name: 'DtAvatar',\n components: { DtPresence },\n\n inheritAttrs: false,\n\n props: {\n /\n Id of the avatar content wrapper element\n /\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /\n Pass in a seed to get the random color generation based on that string. For example if you pass in a\n * user ID as the string it will return the same randomly generated colors every time for that user.\n /\n seed: {\n type: String,\n default: undefined,\n },\n\n /\n Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n * if the seed prop is set.\n /\n color: {\n type: String,\n default: undefined,\n },\n\n /\n The size of the avatar\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Used to customize the avatar container\n /\n avatarClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Set classes on the avatar canvas. Wrapper around the core avatar image.\n /\n canvasClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Pass through classes. Used to customize the avatar icon\n /\n iconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Determines whether to show the presence indicator for\n * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n * or 'active'. By default, it's null and nothing is shown.\n * @values null, busy, away, offline, active\n /\n presence: {\n type: String,\n default: AVATAR_PRESENCE_STATES.NONE,\n validator: (state) => {\n return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n },\n },\n\n /\n A set of props to be passed into the presence component.\n /\n presenceProps: {\n type: Object,\n default: () => ({}),\n },\n\n /\n Determines whether to show a group avatar.\n * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n /\n group: {\n type: Number,\n default: undefined,\n validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n },\n\n /\n The text that overlays the avatar\n /\n overlayText: {\n type: String,\n default: '',\n },\n\n /\n Used to customize the avatar overlay\n /\n overlayClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Source of the image\n /\n imageSrc: {\n type: String,\n default: '',\n },\n\n /\n Alt attribute of the image, required if imageSrc is provided.\n * Can be set to '' (empty string) if the image is described\n * in text nearby\n /\n imageAlt: {\n type: String,\n default: undefined,\n },\n\n /\n Icon size to be displayed on the avatar\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n iconSize: {\n type: String,\n default: '',\n validator: (size) => !size \|\| Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Full name used to extract initials.\n /\n fullName: {\n type: String,\n default: '',\n },\n\n /\n Makes the avatar focusable and clickable,\n * emits a click event when clicked.\n /\n clickable: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the icon.\n * To avoid a11y issues, set this prop if clickable and iconName are set.\n /\n iconAriaLabel: {\n type: String,\n default: undefined,\n },\n },\n\n emits: [\n /\n Avatar click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click',\n ],\n\n data () {\n return {\n AVATAR_SIZE_MODIFIERS,\n AVATAR_KIND_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_ICON_SIZES,\n imageLoadedSuccessfully: null,\n formattedInitials: '',\n initializing: false,\n };\n },\n\n computed: {\n hasOverlayIcon () {\n return !!this.$slots.overlayIcon;\n },\n\n iconDataQa () {\n return 'dt-avatar-icon';\n },\n\n avatarClasses () {\n return [\n 'd-avatar',\n AVATAR_SIZE_MODIFIERS[this.validatedSize],\n this.avatarClass,\n {\n 'd-avatar--group': this.showGroup,\n [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),\n 'd-avatar--clickable': this.clickable,\n },\n ];\n },\n\n overlayClasses () {\n return [\n 'd-avatar__overlay',\n this.overlayClass,\n { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n ];\n },\n\n showGroup () {\n return AVATAR_GROUP_VALIDATOR(this.group);\n },\n\n formattedGroup () {\n return this.group > 99 ? '99+' : this.group;\n },\n\n validatedSize () {\n // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n return this.group ? 'xs' : this.size;\n },\n\n showImage () {\n return this.imageLoadedSuccessfully !== false && this.imageSrc;\n },\n },\n\n watch: {\n fullName: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n size: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n group: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n imageSrc (newSrc) {\n this.imageLoadedSuccessfully = null;\n if (!newSrc) return;\n\n this.validateProps();\n this.setImageListeners();\n },\n },\n\n mounted () {\n this.validateProps();\n this.setImageListeners();\n },\n\n methods: {\n isIconType () {\n return this.$scopedSlots.icon && this.$scopedSlots.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":["DtPresence","getUniqueString","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS"],"mappings":"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"}

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

@@ -304,10 +304,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const DtAvatar = __component__.exports;
 export {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.vue.js","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n <component\n :is=\"clickable ? 'button' : 'div'\"\n :id=\"id\"\n :class=\"avatarClasses\"\n data-qa=\"dt-avatar\"\n @click=\"handleClick\"\n >\n <div\n ref=\"canvas\"\n :class=\"[\n canvasClass,\n 'd-avatar__canvas',\n { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n ]\"\n >\n <img\n v-if=\"showImage\"\n ref=\"avatarImage\"\n class=\"d-avatar__image\"\n data-qa=\"dt-avatar-image\"\n :src=\"imageSrc\"\n :alt=\"imageAlt\"\n >\n <div\n v-else-if=\"isIconType()\"\n :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n :aria-label=\"clickable ? iconAriaLabel : ''\"\n :data-qa=\"iconDataQa\"\n :role=\"clickable ? 'button' : ''\"\n >\n <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n <slot\n name=\"icon\"\n :icon-size=\"iconSize \|\| AVATAR_ICON_SIZES[size]\"\n />\n </div>\n <span\n v-else\n :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n >\n {{ formattedInitials }}\n </span>\n </div>\n <div\n v-if=\"hasOverlayIcon \|\| overlayText\"\n :class=\"overlayClasses\"\n >\n <!-- @slot Slot for overlay icon. -->\n <slot\n v-if=\"hasOverlayIcon\"\n name=\"overlayIcon\"\n />\n <p\n v-else-if=\"overlayText\"\n class=\"d-avatar__overlay-text\"\n >\n {{ overlayText }}\n </p>\n </div>\n <span\n v-if=\"showGroup\"\n class=\"d-avatar__count\"\n data-qa=\"dt-avatar-count\"\n >{{ formattedGroup }}</span>\n <dt-presence\n v-if=\"presence && !showGroup\"\n :presence=\"presence\"\n :class=\"[\n 'd-avatar__presence',\n AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n ]\"\n v-bind=\"presenceProps\"\n data-qa=\"dt-presence\"\n />\n </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n AVATAR_KIND_MODIFIERS,\n AVATAR_SIZE_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_PRESENCE_STATES,\n AVATAR_RANDOM_COLORS,\n AVATAR_GROUP_VALIDATOR,\n AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\n/*\n An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n /\nexport default {\n name: 'DtAvatar',\n components: { DtPresence },\n\n inheritAttrs: false,\n\n props: {\n /\n Id of the avatar content wrapper element\n /\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /\n Pass in a seed to get the random color generation based on that string. For example if you pass in a\n * user ID as the string it will return the same randomly generated colors every time for that user.\n /\n seed: {\n type: String,\n default: undefined,\n },\n\n /\n Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n * if the seed prop is set.\n /\n color: {\n type: String,\n default: undefined,\n },\n\n /\n The size of the avatar\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Used to customize the avatar container\n /\n avatarClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Set classes on the avatar canvas. Wrapper around the core avatar image.\n /\n canvasClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Pass through classes. Used to customize the avatar icon\n /\n iconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Determines whether to show the presence indicator for\n * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n * or 'active'. By default, it's null and nothing is shown.\n * @values null, busy, away, offline, active\n /\n presence: {\n type: String,\n default: AVATAR_PRESENCE_STATES.NONE,\n validator: (state) => {\n return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n },\n },\n\n /\n A set of props to be passed into the presence component.\n /\n presenceProps: {\n type: Object,\n default: () => ({}),\n },\n\n /\n Determines whether to show a group avatar.\n * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n /\n group: {\n type: Number,\n default: undefined,\n validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n },\n\n /\n The text that overlays the avatar\n /\n overlayText: {\n type: String,\n default: '',\n },\n\n /\n Used to customize the avatar overlay\n /\n overlayClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Source of the image\n /\n imageSrc: {\n type: String,\n default: '',\n },\n\n /\n Alt attribute of the image, required if imageSrc is provided.\n * Can be set to '' (empty string) if the image is described\n * in text nearby\n /\n imageAlt: {\n type: String,\n default: undefined,\n },\n\n /\n Icon size to be displayed on the avatar\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n iconSize: {\n type: String,\n default: '',\n validator: (size) => !size \|\| Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Full name used to extract initials.\n /\n fullName: {\n type: String,\n default: '',\n },\n\n /\n Makes the avatar focusable and clickable,\n * emits a click event when clicked.\n /\n clickable: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the icon.\n * To avoid a11y issues, set this prop if clickable and iconName are set.\n /\n iconAriaLabel: {\n type: String,\n default: undefined,\n },\n },\n\n emits: [\n /\n Avatar click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click',\n ],\n\n data () {\n return {\n AVATAR_SIZE_MODIFIERS,\n AVATAR_KIND_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_ICON_SIZES,\n imageLoadedSuccessfully: null,\n formattedInitials: '',\n initializing: false,\n };\n },\n\n computed: {\n hasOverlayIcon () {\n return !!this.$slots.overlayIcon;\n },\n\n iconDataQa () {\n return 'dt-avatar-icon';\n },\n\n avatarClasses () {\n return [\n 'd-avatar',\n AVATAR_SIZE_MODIFIERS[this.validatedSize],\n this.avatarClass,\n {\n 'd-avatar--group': this.showGroup,\n [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),\n 'd-avatar--clickable': this.clickable,\n },\n ];\n },\n\n overlayClasses () {\n return [\n 'd-avatar__overlay',\n this.overlayClass,\n { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n ];\n },\n\n showGroup () {\n return AVATAR_GROUP_VALIDATOR(this.group);\n },\n\n formattedGroup () {\n return this.group > 99 ? '99+' : this.group;\n },\n\n validatedSize () {\n // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n return this.group ? 'xs' : this.size;\n },\n\n showImage () {\n return this.imageLoadedSuccessfully !== false && this.imageSrc;\n },\n },\n\n watch: {\n fullName: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n size: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n group: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n imageSrc (newSrc) {\n this.imageLoadedSuccessfully = null;\n if (!newSrc) return;\n\n this.validateProps();\n this.setImageListeners();\n },\n },\n\n mounted () {\n this.validateProps();\n this.setImageListeners();\n },\n\n methods: {\n isIconType () {\n return this.$scopedSlots.icon && this.$scopedSlots.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":[],"mappings":"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"}
1	+ {"version":3,"file":"avatar.vue.js","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n <component\n :is=\"clickable ? 'button' : 'div'\"\n :id=\"id\"\n :class=\"avatarClasses\"\n data-qa=\"dt-avatar\"\n @click=\"handleClick\"\n >\n <div\n ref=\"canvas\"\n :class=\"[\n canvasClass,\n 'd-avatar__canvas',\n { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n ]\"\n >\n <img\n v-if=\"showImage\"\n ref=\"avatarImage\"\n class=\"d-avatar__image\"\n data-qa=\"dt-avatar-image\"\n :src=\"imageSrc\"\n :alt=\"imageAlt\"\n >\n <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 } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n AVATAR_KIND_MODIFIERS,\n AVATAR_SIZE_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_PRESENCE_STATES,\n AVATAR_RANDOM_COLORS,\n AVATAR_GROUP_VALIDATOR,\n AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\n/*\n An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n /\nexport default {\n name: 'DtAvatar',\n components: { DtPresence },\n\n inheritAttrs: false,\n\n props: {\n /\n Id of the avatar content wrapper element\n /\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /\n Pass in a seed to get the random color generation based on that string. For example if you pass in a\n * user ID as the string it will return the same randomly generated colors every time for that user.\n /\n seed: {\n type: String,\n default: undefined,\n },\n\n /\n Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n * if the seed prop is set.\n /\n color: {\n type: String,\n default: undefined,\n },\n\n /\n The size of the avatar\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Used to customize the avatar container\n /\n avatarClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Set classes on the avatar canvas. Wrapper around the core avatar image.\n /\n canvasClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Pass through classes. Used to customize the avatar icon\n /\n iconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Determines whether to show the presence indicator for\n * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n * or 'active'. By default, it's null and nothing is shown.\n * @values null, busy, away, offline, active\n /\n presence: {\n type: String,\n default: AVATAR_PRESENCE_STATES.NONE,\n validator: (state) => {\n return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n },\n },\n\n /\n A set of props to be passed into the presence component.\n /\n presenceProps: {\n type: Object,\n default: () => ({}),\n },\n\n /\n Determines whether to show a group avatar.\n * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n /\n group: {\n type: Number,\n default: undefined,\n validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n },\n\n /\n The text that overlays the avatar\n /\n overlayText: {\n type: String,\n default: '',\n },\n\n /\n Used to customize the avatar overlay\n /\n overlayClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Source of the image\n /\n imageSrc: {\n type: String,\n default: '',\n },\n\n /\n Alt attribute of the image, required if imageSrc is provided.\n * Can be set to '' (empty string) if the image is described\n * in text nearby\n /\n imageAlt: {\n type: String,\n default: undefined,\n },\n\n /\n Icon size to be displayed on the avatar\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n iconSize: {\n type: String,\n default: '',\n validator: (size) => !size \|\| Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Full name used to extract initials.\n /\n fullName: {\n type: String,\n default: '',\n },\n\n /\n Makes the avatar focusable and clickable,\n * emits a click event when clicked.\n /\n clickable: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the icon.\n * To avoid a11y issues, set this prop if clickable and iconName are set.\n /\n iconAriaLabel: {\n type: String,\n default: undefined,\n },\n },\n\n emits: [\n /\n Avatar click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click',\n ],\n\n data () {\n return {\n AVATAR_SIZE_MODIFIERS,\n AVATAR_KIND_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_ICON_SIZES,\n imageLoadedSuccessfully: null,\n formattedInitials: '',\n initializing: false,\n };\n },\n\n computed: {\n hasOverlayIcon () {\n return !!this.$slots.overlayIcon;\n },\n\n iconDataQa () {\n return 'dt-avatar-icon';\n },\n\n avatarClasses () {\n return [\n 'd-avatar',\n AVATAR_SIZE_MODIFIERS[this.validatedSize],\n this.avatarClass,\n {\n 'd-avatar--group': this.showGroup,\n [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),\n 'd-avatar--clickable': this.clickable,\n },\n ];\n },\n\n overlayClasses () {\n return [\n 'd-avatar__overlay',\n this.overlayClass,\n { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n ];\n },\n\n showGroup () {\n return AVATAR_GROUP_VALIDATOR(this.group);\n },\n\n formattedGroup () {\n return this.group > 99 ? '99+' : this.group;\n },\n\n validatedSize () {\n // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n return this.group ? 'xs' : this.size;\n },\n\n showImage () {\n return this.imageLoadedSuccessfully !== false && this.imageSrc;\n },\n },\n\n watch: {\n fullName: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n size: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n group: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n imageSrc (newSrc) {\n this.imageLoadedSuccessfully = null;\n if (!newSrc) return;\n\n this.validateProps();\n this.setImageListeners();\n },\n },\n\n mounted () {\n this.validateProps();\n this.setImageListeners();\n },\n\n methods: {\n isIconType () {\n return this.$scopedSlots.icon && this.$scopedSlots.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":[],"mappings":"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"}

package/dist/vue2/components/badge/badge.vue.cjs CHANGED Viewed

@@ -127,10 +127,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const DtBadge = __component__.exports;
 exports.default = DtBadge;

package/dist/vue2/components/badge/badge.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge.vue.cjs","sources":["../../../components/badge/badge.vue"],"sourcesContent":["<template>\n <span\n :class=\"[\n 'd-badge',\n BADGE_TYPE_MODIFIERS[type],\n BADGE_KIND_MODIFIERS[kind],\n BADGE_DECORATION_MODIFIERS[decoration],\n { 'd-badge--subtle': subtle },\n { 'd-badge--outlined': outlined },\n ]\"\n data-qa=\"dt-badge\"\n >\n <span\n v-if=\"decoration\"\n class=\"d-badge__decorative\"\n />\n <span\n v-if=\"hasLeftIcon\"\n class=\"d-badge__icon-left\"\n >\n <!-- @slot Slot for left icon, icon-size slot prop defaults to '200' -->\n <slot\n name=\"leftIcon\"\n :icon-size=\"'200'\"\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=\"'200'\"\n />\n </span>\n </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\n\n/*\n A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n /\nexport default {\n name: 'DtBadge',\n\n props: {\n /\n 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 this.$scopedSlots.leftIcon && this.$scopedSlots.leftIcon();\n },\n\n hasRightIcon () {\n return this.$scopedSlots.rightIcon && this.$scopedSlots.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":["BADGE_KIND_MODIFIERS","BADGE_TYPE_MODIFIERS","BADGE_DECORATION_MODIFIERS"],"mappings":";;;;AAqDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAAA,oCAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAAC,oCAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAAC,0CAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,sBAAAD,gBAAA;AAAA,MACA,sBAAAD,gBAAA;AAAA,MACA,4BAAAE,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,KAAA,aAAA,YAAA,KAAA,aAAA;IACA;AAAA,IAEA,eAAA;AACA,aAAA,KAAA,aAAA,aAAA,KAAA,aAAA;IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,eAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,cAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,gBAAA;AACA,WAAA,4BAAA;AACA,WAAA,kCAAA;AAAA,IACA;AAAA,IAEA,8BAAA;AACA,UAAA,KAAA,SAAA,QAAA,KAAA,SAAA,SAAA;AACA,gBAAA,MAAA,yEAAA;AAAA,MACA;AACA,UAAA,KAAA,SAAA,cAAA,KAAA,QAAA;AACA,gBAAA,MAAA,6DAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,oCAAA;AACA,UAAA,CAAA,KAAA,WAAA;AAEA,UAAA,KAAA,SAAA,WAAA,KAAA,SAAA,WAAA;AACA,gBAAA,MAAA,yFAAA;AAAA,MACA;AAEA,UAAA,KAAA,UAAA;AACA,gBAAA,MAAA,2EAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA~~;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"badge.vue.cjs","sources":["../../../components/badge/badge.vue"],"sourcesContent":["<template>\n <span\n :class=\"[\n 'd-badge',\n BADGE_TYPE_MODIFIERS[type],\n BADGE_KIND_MODIFIERS[kind],\n BADGE_DECORATION_MODIFIERS[decoration],\n { 'd-badge--subtle': subtle },\n { 'd-badge--outlined': outlined },\n ]\"\n data-qa=\"dt-badge\"\n >\n <span\n v-if=\"decoration\"\n class=\"d-badge__decorative\"\n />\n <span\n v-if=\"hasLeftIcon\"\n class=\"d-badge__icon-left\"\n >\n <!-- @slot Slot for left icon, icon-size slot prop defaults to '200' -->\n <slot\n name=\"leftIcon\"\n :icon-size=\"'200'\"\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=\"'200'\"\n />\n </span>\n </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\n\n/*\n A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n /\nexport default {\n name: 'DtBadge',\n\n props: {\n /\n 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 this.$scopedSlots.leftIcon && this.$scopedSlots.leftIcon();\n },\n\n hasRightIcon () {\n return this.$scopedSlots.rightIcon && this.$scopedSlots.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":["BADGE_KIND_MODIFIERS","BADGE_TYPE_MODIFIERS","BADGE_DECORATION_MODIFIERS"],"mappings":";;;;AAqDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAAA,oCAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAAC,oCAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAAC,0CAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,sBAAAD,gBAAA;AAAA,MACA,sBAAAD,gBAAA;AAAA,MACA,4BAAAE,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,KAAA,aAAA,YAAA,KAAA,aAAA;IACA;AAAA,IAEA,eAAA;AACA,aAAA,KAAA,aAAA,aAAA,KAAA,aAAA;IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,eAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,cAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,gBAAA;AACA,WAAA,4BAAA;AACA,WAAA,kCAAA;AAAA,IACA;AAAA,IAEA,8BAAA;AACA,UAAA,KAAA,SAAA,QAAA,KAAA,SAAA,SAAA;AACA,gBAAA,MAAA,yEAAA;AAAA,MACA;AACA,UAAA,KAAA,SAAA,cAAA,KAAA,QAAA;AACA,gBAAA,MAAA,6DAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,oCAAA;AACA,UAAA,CAAA,KAAA,WAAA;AAEA,UAAA,KAAA,SAAA,WAAA,KAAA,SAAA,WAAA;AACA,gBAAA,MAAA,yFAAA;AAAA,MACA;AAEA,UAAA,KAAA,UAAA;AACA,gBAAA,MAAA,2EAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/badge/badge.vue.js CHANGED Viewed

@@ -125,10 +125,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const DtBadge = __component__.exports;
 export {

package/dist/vue2/components/badge/badge.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge.vue.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=\"'200'\"\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=\"'200'\"\n />\n </span>\n </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\n\n/*\n A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n /\nexport default {\n name: 'DtBadge',\n\n props: {\n /\n 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 this.$scopedSlots.leftIcon && this.$scopedSlots.leftIcon();\n },\n\n hasRightIcon () {\n return this.$scopedSlots.rightIcon && this.$scopedSlots.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":[],"mappings":";;AAqDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAA,oBAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAA,oBAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAA,0BAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,KAAA,aAAA,YAAA,KAAA,aAAA;IACA;AAAA,IAEA,eAAA;AACA,aAAA,KAAA,aAAA,aAAA,KAAA,aAAA;IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,eAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,cAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,gBAAA;AACA,WAAA,4BAAA;AACA,WAAA,kCAAA;AAAA,IACA;AAAA,IAEA,8BAAA;AACA,UAAA,KAAA,SAAA,QAAA,KAAA,SAAA,SAAA;AACA,gBAAA,MAAA,yEAAA;AAAA,MACA;AACA,UAAA,KAAA,SAAA,cAAA,KAAA,QAAA;AACA,gBAAA,MAAA,6DAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,oCAAA;AACA,UAAA,CAAA,KAAA,WAAA;AAEA,UAAA,KAAA,SAAA,WAAA,KAAA,SAAA,WAAA;AACA,gBAAA,MAAA,yFAAA;AAAA,MACA;AAEA,UAAA,KAAA,UAAA;AACA,gBAAA,MAAA,2EAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA~~;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"badge.vue.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=\"'200'\"\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=\"'200'\"\n />\n </span>\n </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\n\n/*\n A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n /\nexport default {\n name: 'DtBadge',\n\n props: {\n /\n 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 this.$scopedSlots.leftIcon && this.$scopedSlots.leftIcon();\n },\n\n hasRightIcon () {\n return this.$scopedSlots.rightIcon && this.$scopedSlots.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":[],"mappings":";;AAqDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAA,oBAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAA,oBAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,OAAA,KAAA,0BAAA,EAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,KAAA,aAAA,YAAA,KAAA,aAAA;IACA;AAAA,IAEA,eAAA;AACA,aAAA,KAAA,aAAA,aAAA,KAAA,aAAA;IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,eAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,cAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,gBAAA;AACA,WAAA,4BAAA;AACA,WAAA,kCAAA;AAAA,IACA;AAAA,IAEA,8BAAA;AACA,UAAA,KAAA,SAAA,QAAA,KAAA,SAAA,SAAA;AACA,gBAAA,MAAA,yEAAA;AAAA,MACA;AACA,UAAA,KAAA,SAAA,cAAA,KAAA,QAAA;AACA,gBAAA,MAAA,6DAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,oCAAA;AACA,UAAA,CAAA,KAAA,WAAA;AAEA,UAAA,KAAA,SAAA,WAAA,KAAA,SAAA,WAAA;AACA,gBAAA,MAAA,yFAAA;AAAA,MACA;AAEA,UAAA,KAAA,UAAA;AACA,gBAAA,MAAA,2EAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/banner/banner.vue.cjs CHANGED Viewed

@@ -190,10 +190,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const banner = __component__.exports;
 exports.default = banner;

package/dist/vue2/components/banner/banner.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"banner.vue.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 v-on=\"$listeners\"\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 v-on=\"$listeners\"\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-button-props=\"closeButtonProps\"\n :visually-hidden-close=\"visuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n v-on=\"$listeners\"\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';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\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 name: 'DtBanner',\n\n components: {\n DtNoticeIcon,\n DtNoticeContent,\n DtNoticeAction,\n },\n\n mixins: [Modal, SrOnlyCloseButtonMixin],\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 Props for the notice close button.\n /\n closeButtonProps: {\n type: Object,\n default: () => ({}),\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":["DtNoticeIcon","DtNoticeContent","DtNoticeAction","Modal","SrOnlyCloseButtonMixin","utils","NOTICE_KINDS"],"mappings":";;;;;;;;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAA,YAAA;AAAA,IACA,iBAAAC,eAAA;AAAA,IACA,gBAAAC,cAAA;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,MAAA,SAAAC,4BAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAC,qBAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAA,qBAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA,MAAA;AACA,eAAAC,iBAAA,aAAA,SAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA,KAAA,YAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,YAAA,cAAA;AAAA,QACA,OAAA;AAAA,QACA,MAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,MAAA;AAAA,MACA;AAEA,aAAA;AAAA,QACA;AAAA,QACA,YAAA,KAAA,IAAA;AAAA,QACA;AAAA,UACA,uBAAA,KAAA;AAAA,UACA,oBAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,UAAA,KAAA,oBAAA,GAAA,QAAA;AAEA,aAAA,yBAAA,KAAA,eAAA;AAAA,iCACA,KAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,QAAA,KAAA,WAAA;AACA,WAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA,GAAA;AACA,UAAA,KAAA,WAAA;AACA,aAAA,qBAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA~~;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"banner.vue.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 v-on=\"$listeners\"\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 v-on=\"$listeners\"\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-button-props=\"closeButtonProps\"\n :visually-hidden-close=\"visuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n v-on=\"$listeners\"\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';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\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 name: 'DtBanner',\n\n components: {\n DtNoticeIcon,\n DtNoticeContent,\n DtNoticeAction,\n },\n\n mixins: [Modal, SrOnlyCloseButtonMixin],\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 Props for the notice close button.\n /\n closeButtonProps: {\n type: Object,\n default: () => ({}),\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":["DtNoticeIcon","DtNoticeContent","DtNoticeAction","Modal","SrOnlyCloseButtonMixin","utils","NOTICE_KINDS"],"mappings":";;;;;;;;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAA,YAAA;AAAA,IACA,iBAAAC,eAAA;AAAA,IACA,gBAAAC,cAAA;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,MAAA,SAAAC,4BAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAC,qBAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAA,qBAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA,MAAA;AACA,eAAAC,iBAAA,aAAA,SAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA,KAAA,YAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,YAAA,cAAA;AAAA,QACA,OAAA;AAAA,QACA,MAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,MAAA;AAAA,MACA;AAEA,aAAA;AAAA,QACA;AAAA,QACA,YAAA,KAAA,IAAA;AAAA,QACA;AAAA,UACA,uBAAA,KAAA;AAAA,UACA,oBAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,UAAA,KAAA,oBAAA,GAAA,QAAA;AAEA,aAAA,yBAAA,KAAA,eAAA;AAAA,iCACA,KAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,QAAA,KAAA,WAAA;AACA,WAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA,GAAA;AACA,UAAA,KAAA,WAAA;AACA,aAAA,qBAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/banner/banner.vue.js CHANGED Viewed

@@ -188,10 +188,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const banner = __component__.exports;
 export {

package/dist/vue2/components/banner/banner.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"banner.vue.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 v-on=\"$listeners\"\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 v-on=\"$listeners\"\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-button-props=\"closeButtonProps\"\n :visually-hidden-close=\"visuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n v-on=\"$listeners\"\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';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\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 name: 'DtBanner',\n\n components: {\n DtNoticeIcon,\n DtNoticeContent,\n DtNoticeAction,\n },\n\n mixins: [Modal, SrOnlyCloseButtonMixin],\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 Props for the notice close button.\n /\n closeButtonProps: {\n type: Object,\n default: () => ({}),\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":[],"mappings":";;;;;;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA,CAAA,OAAA,sBAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAA,MAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAA,MAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA,MAAA;AACA,eAAA,aAAA,SAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA,KAAA,YAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,YAAA,cAAA;AAAA,QACA,OAAA;AAAA,QACA,MAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,MAAA;AAAA,MACA;AAEA,aAAA;AAAA,QACA;AAAA,QACA,YAAA,KAAA,IAAA;AAAA,QACA;AAAA,UACA,uBAAA,KAAA;AAAA,UACA,oBAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,UAAA,KAAA,oBAAA,GAAA,QAAA;AAEA,aAAA,yBAAA,KAAA,eAAA;AAAA,iCACA,KAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,QAAA,KAAA,WAAA;AACA,WAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA,GAAA;AACA,UAAA,KAAA,WAAA;AACA,aAAA,qBAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA~~;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"banner.vue.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 v-on=\"$listeners\"\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 v-on=\"$listeners\"\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-button-props=\"closeButtonProps\"\n :visually-hidden-close=\"visuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n v-on=\"$listeners\"\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';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\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 name: 'DtBanner',\n\n components: {\n DtNoticeIcon,\n DtNoticeContent,\n DtNoticeAction,\n },\n\n mixins: [Modal, SrOnlyCloseButtonMixin],\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 Props for the notice close button.\n /\n closeButtonProps: {\n type: Object,\n default: () => ({}),\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":[],"mappings":";;;;;;;;AA8DA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA,CAAA,OAAA,sBAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAA,MAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAA,MAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA,MAAA;AACA,eAAA,aAAA,SAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA,KAAA,YAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,YAAA,cAAA;AAAA,QACA,OAAA;AAAA,QACA,MAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,MAAA;AAAA,MACA;AAEA,aAAA;AAAA,QACA;AAAA,QACA,YAAA,KAAA,IAAA;AAAA,QACA;AAAA,UACA,uBAAA,KAAA;AAAA,UACA,oBAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,UAAA,KAAA,oBAAA,GAAA,QAAA;AAEA,aAAA,yBAAA,KAAA,eAAA;AAAA,iCACA,KAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,QAAA,KAAA,WAAA;AACA,WAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA,GAAA;AACA,UAAA,KAAA,WAAA;AACA,aAAA,qBAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/breadcrumbs/breadcrumb_item.vue.cjs CHANGED Viewed

@@ -63,10 +63,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const DtBreadcrumbItem = __component__.exports;
 exports.default = DtBreadcrumbItem;

package/dist/vue2/components/breadcrumbs/breadcrumb_item.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb_item.vue.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 >\n <dt-link\n :kind=\"linkKind\"\n :inverted=\"linkInverted\"\n :aria-current=\"ariaCurrent\"\n data-qa=\"breadcrumb-item\"\n v-bind=\"$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 { DtLink } from '../link';\nimport { MUTED } from '../link/link_constants';\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 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</script>\n"],"names":["DtLink","BREADCRUMB_ITEM_SELECTED_MODIFIER","MUTED"],"mappings":";;;;;;AA4BA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAA,KAAA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,mCAAAC,sBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAA,KAAA,WAAA,KAAAC;IACA;AAAA,IAEA,eAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,KAAA,WAAA,aAAA;AAAA,IACA;AAAA,EACA;AACA~~;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"breadcrumb_item.vue.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 >\n <dt-link\n :kind=\"linkKind\"\n :inverted=\"linkInverted\"\n :aria-current=\"ariaCurrent\"\n data-qa=\"breadcrumb-item\"\n v-bind=\"$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 { DtLink } from '../link';\nimport { MUTED } from '../link/link_constants';\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 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</script>\n"],"names":["DtLink","BREADCRUMB_ITEM_SELECTED_MODIFIER","MUTED"],"mappings":";;;;;;AA4BA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAA,KAAA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,mCAAAC,sBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAA,KAAA,WAAA,KAAAC;IACA;AAAA,IAEA,eAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,KAAA,WAAA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/breadcrumbs/breadcrumb_item.vue.js CHANGED Viewed

@@ -61,10 +61,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const DtBreadcrumbItem = __component__.exports;
 export {

package/dist/vue2/components/breadcrumbs/breadcrumb_item.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb_item.vue.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 >\n <dt-link\n :kind=\"linkKind\"\n :inverted=\"linkInverted\"\n :aria-current=\"ariaCurrent\"\n data-qa=\"breadcrumb-item\"\n v-bind=\"$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 { DtLink } from '../link';\nimport { MUTED } from '../link/link_constants';\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 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</script>\n"],"names":[],"mappings":";;;;AA4BA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAA,KAAA,WAAA,KAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,KAAA,WAAA,aAAA;AAAA,IACA;AAAA,EACA;AACA~~;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"breadcrumb_item.vue.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 >\n <dt-link\n :kind=\"linkKind\"\n :inverted=\"linkInverted\"\n :aria-current=\"ariaCurrent\"\n data-qa=\"breadcrumb-item\"\n v-bind=\"$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 { DtLink } from '../link';\nimport { MUTED } from '../link/link_constants';\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 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</script>\n"],"names":[],"mappings":";;;;AA4BA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAA,KAAA,WAAA,KAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,KAAA,WAAA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/breadcrumbs/breadcrumbs.vue.cjs CHANGED Viewed

@@ -64,10 +64,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const breadcrumbs = __component__.exports;
 exports.default = breadcrumbs;

package/dist/vue2/components/breadcrumbs/breadcrumbs.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumbs.vue.cjs","sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n <nav\n :aria-label=\"ariaLabel\"\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 v-on=\"$listeners\"\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';\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 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: 'breadcrumb',\n },\n },\n\n data () {\n return {\n BREADCRUMBS_INVERTED_MODIFIER,\n };\n },\n\n methods: {\n getBreadcrumbItemKey (index) {\n return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n },\n },\n};\n</script>\n"],"names":["DtBreadcrumbItem","breadcrumbs","BREADCRUMBS_INVERTED_MODIFIER","utils"],"mappings":";;;;;;AAkCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAA,gBAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,SAAAC,cAAA;AACA,eAAAA,aAAA,MAAA,CAAA,EAAA,MAAA,MAAA,MAAA;AACA,iBAAA,SAAA,UAAA,UAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,+BAAAC,sBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,qBAAA,OAAA;AACA,aAAA,oBAAA,KAAA,IAAAC,aAAAA,QAAA,gBAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA~~;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"breadcrumbs.vue.cjs","sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n <nav\n :aria-label=\"ariaLabel\"\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 v-on=\"$listeners\"\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';\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 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: 'breadcrumb',\n },\n },\n\n data () {\n return {\n BREADCRUMBS_INVERTED_MODIFIER,\n };\n },\n\n methods: {\n getBreadcrumbItemKey (index) {\n return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n },\n },\n};\n</script>\n"],"names":["DtBreadcrumbItem","breadcrumbs","BREADCRUMBS_INVERTED_MODIFIER","utils"],"mappings":";;;;;;AAkCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAA,gBAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,SAAAC,cAAA;AACA,eAAAA,aAAA,MAAA,CAAA,EAAA,MAAA,MAAA,MAAA;AACA,iBAAA,SAAA,UAAA,UAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,+BAAAC,sBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,qBAAA,OAAA;AACA,aAAA,oBAAA,KAAA,IAAAC,aAAAA,QAAA,gBAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/breadcrumbs/breadcrumbs.vue.js CHANGED Viewed

@@ -62,10 +62,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const breadcrumbs = __component__.exports;
 export {

package/dist/vue2/components/breadcrumbs/breadcrumbs.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumbs.vue.js","sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n <nav\n :aria-label=\"ariaLabel\"\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 v-on=\"$listeners\"\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';\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 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: 'breadcrumb',\n },\n },\n\n data () {\n return {\n BREADCRUMBS_INVERTED_MODIFIER,\n };\n },\n\n methods: {\n getBreadcrumbItemKey (index) {\n return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n },\n },\n};\n</script>\n"],"names":["breadcrumbs"],"mappings":";;;;AAkCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,SAAAA,cAAA;AACA,eAAAA,aAAA,MAAA,CAAA,EAAA,MAAA,MAAA,MAAA;AACA,iBAAA,SAAA,UAAA,UAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,qBAAA,OAAA;AACA,aAAA,oBAAA,KAAA,IAAA,MAAA,gBAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA~~;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"breadcrumbs.vue.js","sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n <nav\n :aria-label=\"ariaLabel\"\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 v-on=\"$listeners\"\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';\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 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: 'breadcrumb',\n },\n },\n\n data () {\n return {\n BREADCRUMBS_INVERTED_MODIFIER,\n };\n },\n\n methods: {\n getBreadcrumbItemKey (index) {\n return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n },\n },\n};\n</script>\n"],"names":["breadcrumbs"],"mappings":";;;;AAkCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,SAAAA,cAAA;AACA,eAAAA,aAAA,MAAA,CAAA,EAAA,MAAA,MAAA,MAAA;AACA,iBAAA,SAAA,UAAA,UAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,qBAAA,OAAA;AACA,aAAA,oBAAA,KAAA,IAAA,MAAA,gBAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/button/button.vue.cjs CHANGED Viewed

@@ -273,10 +273,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const DtButton = __component__.exports;
 exports.default = DtButton;

package/dist/vue2/components/button/button.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.vue.cjs","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n <button\n :class=\"[\n 'base-button__button',\n buttonClasses(),\n ]\"\n data-qa=\"dt-button\"\n :type=\"type\"\n :disabled=\"disabled\"\n :style=\"{ width: width }\"\n :aria-live=\"computedAriaLive\"\n :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n v-on=\"buttonListeners\"\n >\n <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n <span\n v-if=\"shouldRenderIcon()\"\n data-qa=\"dt-button-icon\"\n :class=\"[\n 'base-button__icon',\n 'd-btn__icon',\n ICON_POSITION_MODIFIERS[iconPosition],\n ]\"\n >\n <!-- @slot Button icon -->\n <slot\n name=\"icon\"\n :icon-size=\"iconSize\"\n />\n </span>\n <span\n v-if=\"$slots.default\"\n data-qa=\"dt-button-label\"\n :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n >\n <!-- @slot Content within button -->\n <slot />\n </span>\n </button>\n</template>\n\n<script>\nimport Vue from 'vue';\n\nimport {\n BUTTON_SIZE_MODIFIERS,\n BUTTON_KIND_MODIFIERS,\n BUTTON_IMPORTANCE_MODIFIERS,\n BUTTON_ICON_SIZES,\n BUTTON_TYPES,\n ICON_POSITION_MODIFIERS,\n INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/*\n A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n /\nexport default {\n name: 'DtButton',\n\n props: {\n /\n Whether the button is a circle or not.\n * @values true, false\n /\n circle: {\n type: Boolean,\n default: false,\n },\n\n /\n The position of the icon slot within the button.\n * @values left, right, top, bottom\n /\n iconPosition: {\n type: String,\n default: 'left',\n validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n },\n\n /\n The fill and outline of the button associated with its visual importance.\n * @values clear, outlined, primary\n /\n importance: {\n type: String,\n default: 'primary',\n validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n },\n\n /\n Whether the button should be styled as a link or not.\n * @values true, false\n * @see DtLink\n /\n link: {\n type: Boolean,\n default: false,\n },\n\n /\n The color of the link and button if the button is styled as a link.\n * @values default, warning, danger, success, muted\n * @see DtLink\n /\n linkKind: {\n type: String,\n default: 'default',\n validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n },\n\n /\n Determines whether the link should have inverted styling if the button is styled as a link.\n * @values true, false\n * @see DtLink\n /\n linkInverted: {\n type: Boolean,\n default: false,\n },\n\n /\n HTML button disabled attribute\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n HTML button type attribute\n * <a\n * class=\"d-link\"\n * href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n * target=\"_blank\"\n * >\n * (Reference)\n * </a>\n * @values button, submit, reset\n /\n type: {\n type: String,\n default: 'button',\n validator: (t) => BUTTON_TYPES.includes(t),\n },\n\n /\n Button width, accepts\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n * CSS width attribute\n * </a>\n * values\n /\n width: {\n type: String,\n default: null,\n },\n\n /\n The size of the button.\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n },\n\n /\n Used to customize the label container\n /\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Whether the button should display a loading animation or not.\n * @values true, false\n /\n loading: {\n type: Boolean,\n default: false,\n },\n\n /\n The color of the button.\n * @values default, muted, danger, inverted\n /\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n },\n\n /\n Determines whether a screenreader reads live updates of\n * the button content to the user while the button\n * is in focus. default is to not.\n * @values true, false\n /\n assertiveOnFocus: {\n type: Boolean,\n default: false,\n },\n\n /\n Determines whether the button should have active styling\n * default is false.\n * @values true, false\n /\n active: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /\n Native button click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Native button focus in event\n \n @event focusin\n * @type {FocusEvent}\n /\n 'focusin',\n\n /\n Native button focus out event\n \n @event focusout\n * @type {FocusEvent}\n */\n 'focusout',\n ],\n\n data () {\n return {\n ICON_POSITION_MODIFIERS,\n // whether the button is currently in focus\n isInFocus: false,\n };\n },\n\n computed: {\n\n buttonListeners () {\n if (!this.assertiveOnFocus) {\n return this.$listeners;\n }\n return {\n ...this.$listeners,\n focusin: (e) => {\n this.isInFocus = true;\n },\n\n focusout: (e) => {\n this.isInFocus = false;\n },\n };\n },\n\n computedAriaLive () {\n return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n },\n\n iconSize () {\n return BUTTON_ICON_SIZES[this.size];\n },\n },\n\n watch: {\n $props: {\n deep: true,\n immediate: true,\n handler () {\n if (process.env.NODE_ENV === 'production') return;\n\n if (this.circle && this.link) {\n Vue.util.warn('You cannot enable circle and link at the same time', this);\n }\n\n this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n },\n },\n },\n\n methods: {\n buttonClasses () {\n if (this.link) {\n return [\n 'd-link',\n getLinkKindModifier(this.linkKind, this.linkInverted),\n BUTTON_SIZE_MODIFIERS[this.size],\n ];\n }\n return [\n 'd-btn',\n BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n BUTTON_KIND_MODIFIERS[this.kind],\n BUTTON_SIZE_MODIFIERS[this.size],\n {\n 'd-btn--circle': this.circle,\n 'd-btn--loading': this.loading,\n 'd-btn--icon-only': this.isIconOnly(),\n 'd-btn--vertical': this.isVerticalIconLayout(),\n 'd-btn--active': this.active,\n },\n ];\n },\n\n isInvalidPropCombination (circle, kind, importance) {\n for (const row of INVALID_COMBINATION) {\n if (circle === row.circle && kind === row.kind && importance === row.importance) {\n console.warn(row.message);\n return false;\n }\n }\n return true;\n },\n\n shouldRenderIcon () {\n return this.$scopedSlots.icon && this.$scopedSlots.icon() && !this.link;\n },\n\n isIconOnly () {\n return this.shouldRenderIcon() && !this.$slots.default;\n },\n\n isVerticalIconLayout () {\n return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n },\n },\n};\n</script>\n"],"names":["ICON_POSITION_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","LINK_KIND_MODIFIERS","BUTTON_TYPES","BUTTON_SIZE_MODIFIERS","BUTTON_KIND_MODIFIERS","BUTTON_ICON_SIZES","getLinkKindModifier","INVALID_COMBINATION"],"mappings":"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"}
1	+ {"version":3,"file":"button.vue.cjs","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n <button\n :class=\"[\n 'base-button__button',\n buttonClasses(),\n ]\"\n data-qa=\"dt-button\"\n :type=\"type\"\n :disabled=\"disabled\"\n :style=\"{ width: width }\"\n :aria-live=\"computedAriaLive\"\n :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n v-on=\"buttonListeners\"\n >\n <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n <span\n v-if=\"shouldRenderIcon()\"\n data-qa=\"dt-button-icon\"\n :class=\"[\n 'base-button__icon',\n 'd-btn__icon',\n ICON_POSITION_MODIFIERS[iconPosition],\n ]\"\n >\n <!-- @slot Button icon -->\n <slot\n name=\"icon\"\n :icon-size=\"iconSize\"\n />\n </span>\n <span\n v-if=\"$slots.default\"\n data-qa=\"dt-button-label\"\n :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n >\n <!-- @slot Content within button -->\n <slot />\n </span>\n </button>\n</template>\n\n<script>\nimport Vue from 'vue';\n\nimport {\n BUTTON_SIZE_MODIFIERS,\n BUTTON_KIND_MODIFIERS,\n BUTTON_IMPORTANCE_MODIFIERS,\n BUTTON_ICON_SIZES,\n BUTTON_TYPES,\n ICON_POSITION_MODIFIERS,\n INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/*\n A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n /\nexport default {\n name: 'DtButton',\n\n props: {\n /\n Whether the button is a circle or not.\n * @values true, false\n /\n circle: {\n type: Boolean,\n default: false,\n },\n\n /\n The position of the icon slot within the button.\n * @values left, right, top, bottom\n /\n iconPosition: {\n type: String,\n default: 'left',\n validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n },\n\n /\n The fill and outline of the button associated with its visual importance.\n * @values clear, outlined, primary\n /\n importance: {\n type: String,\n default: 'primary',\n validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n },\n\n /\n Whether the button should be styled as a link or not.\n * @values true, false\n * @see DtLink\n /\n link: {\n type: Boolean,\n default: false,\n },\n\n /\n The color of the link and button if the button is styled as a link.\n * @values default, warning, danger, success, muted\n * @see DtLink\n /\n linkKind: {\n type: String,\n default: 'default',\n validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n },\n\n /\n Determines whether the link should have inverted styling if the button is styled as a link.\n * @values true, false\n * @see DtLink\n /\n linkInverted: {\n type: Boolean,\n default: false,\n },\n\n /\n HTML button disabled attribute\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n * @values true, false\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n HTML button type attribute\n * <a\n * class=\"d-link\"\n * href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n * target=\"_blank\"\n * >\n * (Reference)\n * </a>\n * @values button, submit, reset\n /\n type: {\n type: String,\n default: 'button',\n validator: (t) => BUTTON_TYPES.includes(t),\n },\n\n /\n Button width, accepts\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n * CSS width attribute\n * </a>\n * values\n /\n width: {\n type: String,\n default: null,\n },\n\n /\n The size of the button.\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n },\n\n /\n Used to customize the label container\n /\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Whether the button should display a loading animation or not.\n * @values true, false\n /\n loading: {\n type: Boolean,\n default: false,\n },\n\n /\n The color of the button.\n * @values default, muted, danger, inverted\n /\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n },\n\n /\n Determines whether a screenreader reads live updates of\n * the button content to the user while the button\n * is in focus. default is to not.\n * @values true, false\n /\n assertiveOnFocus: {\n type: Boolean,\n default: false,\n },\n\n /\n Determines whether the button should have active styling\n * default is false.\n * @values true, false\n /\n active: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /\n Native button click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Native button focus in event\n \n @event focusin\n * @type {FocusEvent}\n /\n 'focusin',\n\n /\n Native button focus out event\n \n @event focusout\n * @type {FocusEvent}\n */\n 'focusout',\n ],\n\n data () {\n return {\n ICON_POSITION_MODIFIERS,\n // whether the button is currently in focus\n isInFocus: false,\n };\n },\n\n computed: {\n\n buttonListeners () {\n if (!this.assertiveOnFocus) {\n return this.$listeners;\n }\n return {\n ...this.$listeners,\n focusin: (e) => {\n this.isInFocus = true;\n },\n\n focusout: (e) => {\n this.isInFocus = false;\n },\n };\n },\n\n computedAriaLive () {\n return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n },\n\n iconSize () {\n return BUTTON_ICON_SIZES[this.size];\n },\n },\n\n watch: {\n $props: {\n deep: true,\n immediate: true,\n handler () {\n if (process.env.NODE_ENV === 'production') return;\n\n if (this.circle && this.link) {\n Vue.util.warn('You cannot enable circle and link at the same time', this);\n }\n\n this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n },\n },\n },\n\n methods: {\n buttonClasses () {\n if (this.link) {\n return [\n 'd-link',\n getLinkKindModifier(this.linkKind, this.linkInverted),\n BUTTON_SIZE_MODIFIERS[this.size],\n ];\n }\n return [\n 'd-btn',\n BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n BUTTON_KIND_MODIFIERS[this.kind],\n BUTTON_SIZE_MODIFIERS[this.size],\n {\n 'd-btn--circle': this.circle,\n 'd-btn--loading': this.loading,\n 'd-btn--icon-only': this.isIconOnly(),\n 'd-btn--vertical': this.isVerticalIconLayout(),\n 'd-btn--active': this.active,\n },\n ];\n },\n\n isInvalidPropCombination (circle, kind, importance) {\n for (const row of INVALID_COMBINATION) {\n if (circle === row.circle && kind === row.kind && importance === row.importance) {\n console.warn(row.message);\n return false;\n }\n }\n return true;\n },\n\n shouldRenderIcon () {\n return this.$scopedSlots.icon && this.$scopedSlots.icon() && !this.link;\n },\n\n isIconOnly () {\n return this.shouldRenderIcon() && !this.$slots.default;\n },\n\n isVerticalIconLayout () {\n return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n },\n },\n};\n</script>\n"],"names":["ICON_POSITION_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","LINK_KIND_MODIFIERS","BUTTON_TYPES","BUTTON_SIZE_MODIFIERS","BUTTON_KIND_MODIFIERS","BUTTON_ICON_SIZES","getLinkKindModifier","INVALID_COMBINATION"],"mappings":"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"}