npm - @dialpad/dialtone - Versions diffs - 9.76.0 → 9.76.2 - Mend

@dialpad/dialtone 9.76.0 → 9.76.2

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 (936) hide show

package/dist/vue2/types/recipes/leftbar/unread_pill/unread_pill.vue.d.ts CHANGED Viewed

@@ -1,36 +1,20 @@
-declare const _default: import("vue").DefineComponent<{
-    /**
-     * The kind of unread pill which determines the styling
-     * @values 'mentions', 'messages'
-     **/
+declare const _default: import('vue').DefineComponent<{
     kind: {
         type: StringConstructor;
         required: true;
         validator: (kind: unknown) => boolean;
     };
-    /**
-     * The direction of the arrow icon
-     * @values 'up', 'down'
-     **/
     direction: {
         type: StringConstructor;
         required: true;
         validator: (dir: unknown) => boolean;
     };
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], string, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * The kind of unread pill which determines the styling
-     * @values 'mentions', 'messages'
-     **/
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "click"[], string, Readonly<import('vue').ExtractPropTypes<{
     kind: {
         type: StringConstructor;
         required: true;
         validator: (kind: unknown) => boolean;
     };
-    /**
-     * The direction of the arrow icon
-     * @values 'up', 'down'
-     **/
     direction: {
         type: StringConstructor;
         required: true;

package/dist/vue2/types/recipes/leftbar/unread_pill/unread_pill.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"unread_pill.vue.d.ts","sourceRoot":"","sources":["../../../../../recipes/leftbar/unread_pill/unread_pill.vue~~.js~~"],"names":[],"mappings":";~~IAYI;;;QAGI;;;;;;IAOJ;;;QAGI;;;;;;;IAbJ;;;QAGI;;;;;;IAOJ;;;QAGI~~"}
1	+ {"version":3,"file":"unread_pill.vue.d.ts","sourceRoot":"","sources":["../../../../../recipes/leftbar/unread_pill/unread_pill.vue"],"names":[],"mappings":"AAgBA;"}

package/dist/vue2/types/recipes/notices/top_banner_info/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
-export { default as DtRecipeTopBannerInfo } from "./top_banner_info.vue";
-export { COLOR_CODES } from "./top_banner_info_constants";
+export { default as DtRecipeTopBannerInfo } from './top_banner_info.vue';
+export { COLOR_CODES } from './top_banner_info_constants';
 //# sourceMappingURL=index.d.ts.map

package/dist/vue2/types/recipes/notices/top_banner_info/top_banner_info.vue.d.ts CHANGED Viewed

@@ -1,7 +1,4 @@
-declare const _default: import("vue").DefineComponent<{
-    /**
-     * color of the banner background
-     */
+declare const _default: import('vue').DefineComponent<{
     colorCode: {
         type: StringConstructor;
         default: string;
@@ -9,10 +6,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {}, {}, {
     bannerInfoClass(): any[];
-}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * color of the banner background
-     */
+}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, Readonly<import('vue').ExtractPropTypes<{
     colorCode: {
         type: StringConstructor;
         default: string;

package/dist/vue2/types/recipes/notices/top_banner_info/top_banner_info.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"top_banner_info.vue.d.ts","sourceRoot":"","sources":["../../../../../recipes/notices/top_banner_info/top_banner_info.vue~~.js~~"],"names":[],"mappings":";~~IAQI;;OAEG;;;;;;;;;IAFH;;OAEG~~"}
1	+ {"version":3,"file":"top_banner_info.vue.d.ts","sourceRoot":"","sources":["../../../../../recipes/notices/top_banner_info/top_banner_info.vue"],"names":[],"mappings":"AAsBA;"}

package/dist/vue3/common/sr_only_close_button.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sr_only_close_button.vue.cjs","sources":["../../common/sr_only_close_button.vue"],"sourcesContent":["<template>\n <dt-button\n id=\"sr-only-close-button\"\n data-qa=\"dt-sr-only-close-button\"\n class=\"d-vi-visible-sr\"\n :aria-label=\"visuallyHiddenCloseLabel\"\n @click=\"close\"\n @keydown.space.prevent.stop=\"close\"\n >\n <dt-icon name=\"close\" />\n </dt-button>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'SrOnlyCloseButton',\n components: {\n DtIcon,\n DtButton,\n },\n\n props: {\n /*\n Label for the visually hidden close button\n * Required if visuallyHiddenClose is set to `true`\n */\n visuallyHiddenCloseLabel: {\n type: String,\n default: null,\n },\n },\n\n emits: ['close'],\n\n methods: {\n close () {\n this.$emit('close');\n },\n },\n};\n</script>\n"],"names":["DtIcon","DtButton","_createBlock","_createVNode"],"mappings":";;;;;AAiBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,IACV,QAAAA;AAAAA,IACA,UAAAC;AAAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,0BAA0B;AAAA,MACxB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO,CAAC,OAAO;AAAA,EAEf,SAAS;AAAA,IACP,QAAS;AACP,WAAK,MAAM,OAAO;AAAA,IACnB;AAAA,EACF;AACH;;;;0BAzCEC,IASY,YAAA,sBAAA;AAAA,IARV,IAAG;AAAA,IACH,WAAQ;AAAA,IACR,OAAM;AAAA,IACL,cAAY,OAAwB;AAAA,IACpC,SAAO,SAAK;AAAA,IACZ,~~0CAA4B~~,SAAK,OAAA,CAAA,WAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;~~yBAElC~~,MAAwB;AAAA,MAAxBC,IAAAA,YAAwB,oBAAA,EAAf,MAAK,QAAO,CAAA;AAAA~~;;;;;;~~"}
1	+ {"version":3,"file":"sr_only_close_button.vue.cjs","sources":["../../common/sr_only_close_button.vue"],"sourcesContent":["<template>\n <dt-button\n id=\"sr-only-close-button\"\n data-qa=\"dt-sr-only-close-button\"\n class=\"d-vi-visible-sr\"\n :aria-label=\"visuallyHiddenCloseLabel\"\n @click=\"close\"\n @keydown.space.prevent.stop=\"close\"\n >\n <dt-icon name=\"close\" />\n </dt-button>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'SrOnlyCloseButton',\n components: {\n DtIcon,\n DtButton,\n },\n\n props: {\n /*\n Label for the visually hidden close button\n * Required if visuallyHiddenClose is set to `true`\n */\n visuallyHiddenCloseLabel: {\n type: String,\n default: null,\n },\n },\n\n emits: ['close'],\n\n methods: {\n close () {\n this.$emit('close');\n },\n },\n};\n</script>\n"],"names":["DtIcon","DtButton","_createBlock","_withKeys","_withModifiers","_withCtx","_createVNode"],"mappings":";;;;;AAiBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,IACV,QAAAA;AAAAA,IACA,UAAAC;AAAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,0BAA0B;AAAA,MACxB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO,CAAC,OAAO;AAAA,EAEf,SAAS;AAAA,IACP,QAAS;AACP,WAAK,MAAM,OAAO;AAAA,IACnB;AAAA,EACF;AACH;;;;0BAzCEC,IASY,YAAA,sBAAA;AAAA,IARV,IAAG;AAAA,IACH,WAAQ;AAAA,IACR,OAAM;AAAA,IACL,cAAY,OAAwB;AAAA,IACpC,SAAO,SAAK;AAAA,IACZ,WAPLC,IAAA,SAAAC,kBAOiC,SAAK,OAAA,CAAA,WAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;IAPtC,SAAAC,IAAA,QASI,MAAwB;AAAA,MAAxBC,IAAAA,YAAwB,oBAAA,EAAf,MAAK,QAAO,CAAA;AAAA;IATzB,GAAA;AAAA;;;;"}

package/dist/vue3/common/sr_only_close_button.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sr_only_close_button.vue.js","sources":["../../common/sr_only_close_button.vue"],"sourcesContent":["<template>\n <dt-button\n id=\"sr-only-close-button\"\n data-qa=\"dt-sr-only-close-button\"\n class=\"d-vi-visible-sr\"\n :aria-label=\"visuallyHiddenCloseLabel\"\n @click=\"close\"\n @keydown.space.prevent.stop=\"close\"\n >\n <dt-icon name=\"close\" />\n </dt-button>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'SrOnlyCloseButton',\n components: {\n DtIcon,\n DtButton,\n },\n\n props: {\n /*\n Label for the visually hidden close button\n * Required if visuallyHiddenClose is set to `true`\n */\n visuallyHiddenCloseLabel: {\n type: String,\n default: null,\n },\n },\n\n emits: ['close'],\n\n methods: {\n close () {\n this.$emit('close');\n },\n },\n};\n</script>\n"],"names":["_createBlock","_createVNode"],"mappings":";;;;AAiBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,0BAA0B;AAAA,MACxB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO,CAAC,OAAO;AAAA,EAEf,SAAS;AAAA,IACP,QAAS;AACP,WAAK,MAAM,OAAO;AAAA,IACnB;AAAA,EACF;AACH;;;;sBAzCEA,YASY,sBAAA;AAAA,IARV,IAAG;AAAA,IACH,WAAQ;AAAA,IACR,OAAM;AAAA,IACL,cAAY,OAAwB;AAAA,IACpC,SAAO,SAAK;AAAA,IACZ,~~kCAA4B~~,SAAK,OAAA,CAAA,WAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;~~qBAElC~~,MAAwB;AAAA,MAAxBC,YAAwB,oBAAA,EAAf,MAAK,QAAO,CAAA;AAAA~~;;;;;~~"}
1	+ {"version":3,"file":"sr_only_close_button.vue.js","sources":["../../common/sr_only_close_button.vue"],"sourcesContent":["<template>\n <dt-button\n id=\"sr-only-close-button\"\n data-qa=\"dt-sr-only-close-button\"\n class=\"d-vi-visible-sr\"\n :aria-label=\"visuallyHiddenCloseLabel\"\n @click=\"close\"\n @keydown.space.prevent.stop=\"close\"\n >\n <dt-icon name=\"close\" />\n </dt-button>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'SrOnlyCloseButton',\n components: {\n DtIcon,\n DtButton,\n },\n\n props: {\n /*\n Label for the visually hidden close button\n * Required if visuallyHiddenClose is set to `true`\n */\n visuallyHiddenCloseLabel: {\n type: String,\n default: null,\n },\n },\n\n emits: ['close'],\n\n methods: {\n close () {\n this.$emit('close');\n },\n },\n};\n</script>\n"],"names":["_createBlock","_withKeys","_withModifiers","_withCtx","_createVNode"],"mappings":";;;;AAiBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,0BAA0B;AAAA,MACxB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO,CAAC,OAAO;AAAA,EAEf,SAAS;AAAA,IACP,QAAS;AACP,WAAK,MAAM,OAAO;AAAA,IACnB;AAAA,EACF;AACH;;;;sBAzCEA,YASY,sBAAA;AAAA,IARV,IAAG;AAAA,IACH,WAAQ;AAAA,IACR,OAAM;AAAA,IACL,cAAY,OAAwB;AAAA,IACpC,SAAO,SAAK;AAAA,IACZ,WAPLC,SAAAC,cAOiC,SAAK,OAAA,CAAA,WAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;IAPtC,SAAAC,QASI,MAAwB;AAAA,MAAxBC,YAAwB,oBAAA,EAAf,MAAK,QAAO,CAAA;AAAA;IATzB,GAAA;AAAA;;;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.vue.cjs","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n <component\n :is=\"clickable ? 'button' : 'div'\"\n :id=\"id\"\n :class=\"avatarClasses\"\n data-qa=\"dt-avatar\"\n @click=\"handleClick\"\n >\n <div\n ref=\"canvas\"\n :class=\"[\n canvasClass,\n 'd-avatar__canvas',\n { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n ]\"\n >\n <img\n v-if=\"showImage\"\n ref=\"avatarImage\"\n class=\"d-avatar__image\"\n data-qa=\"dt-avatar-image\"\n :src=\"imageSrc\"\n :alt=\"imageAlt\"\n >\n <dt-icon\n v-else-if=\"iconName\"\n :name=\"iconName\"\n :aria-label=\"iconAriaLabel\"\n :size=\"iconSize \|\| AVATAR_ICON_SIZES[size]\"\n :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n data-qa=\"dt-avatar-icon\"\n />\n <span\n v-else\n :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n >\n {{ formattedInitials }}\n </span>\n </div>\n <div\n v-if=\"overlayIcon \|\| overlayText\"\n :class=\"overlayClasses\"\n >\n <dt-icon\n v-if=\"overlayIcon\"\n class=\"d-avatar__overlay-icon\"\n :name=\"overlayIcon\"\n />\n <p\n v-else-if=\"overlayText\"\n class=\"d-avatar__overlay-text\"\n >\n {{ overlayText }}\n </p>\n </div>\n <span\n v-if=\"showGroup\"\n class=\"d-avatar__count\"\n data-qa=\"dt-avatar-count\"\n >{{ formattedGroup }}</span>\n <dt-presence\n v-if=\"presence && !showGroup\"\n :presence=\"presence\"\n :class=\"[\n 'd-avatar__presence',\n AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n ]\"\n v-bind=\"presenceProps\"\n data-qa=\"dt-presence\"\n />\n </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport { DtIcon } from '@/components/icon';\nimport {\n AVATAR_KIND_MODIFIERS,\n AVATAR_SIZE_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_PRESENCE_STATES,\n AVATAR_RANDOM_COLORS,\n AVATAR_GROUP_VALIDATOR,\n AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { getIconNames } from '@/common/storybook_utils.js';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\nconst ICONS_LIST = getIconNames();\n\n/*\n An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n /\nexport default {\n name: 'DtAvatar',\n components: { DtPresence, DtIcon },\n\n inheritAttrs: false,\n\n props: {\n /\n Id of the avatar content wrapper element\n /\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /\n Pass in a seed to get the random color generation based on that string. For example if you pass in a\n * user ID as the string it will return the same randomly generated colors every time for that user.\n /\n seed: {\n type: String,\n default: undefined,\n },\n\n /\n Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n * if the seed prop is set.\n /\n color: {\n type: String,\n default: undefined,\n },\n\n /\n The size of the avatar\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Used to customize the avatar container\n /\n avatarClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Set classes on the avatar canvas. Wrapper around the core avatar image.\n /\n canvasClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Pass through classes. Used to customize the avatar icon\n /\n iconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Determines whether to show the presence indicator for\n * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n * or 'active'. By default, it's null and nothing is shown.\n * @values null, busy, away, offline, active\n /\n presence: {\n type: String,\n default: AVATAR_PRESENCE_STATES.NONE,\n validator: (state) => {\n return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n },\n },\n\n /\n A set of props to be passed into the presence component.\n /\n presenceProps: {\n type: Object,\n default: () => ({}),\n },\n\n /\n Determines whether to show a group avatar.\n * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n /\n group: {\n type: Number,\n default: undefined,\n validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n },\n\n /\n The icon that overlays the avatar\n /\n overlayIcon: {\n type: String,\n default: '',\n },\n\n /\n The text that overlays the avatar\n /\n overlayText: {\n type: String,\n default: '',\n },\n\n /\n Used to customize the avatar overlay\n /\n overlayClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Source of the image\n /\n imageSrc: {\n type: String,\n default: '',\n },\n\n /\n Alt attribute of the image, required if imageSrc is provided.\n * Can be set to '' (empty string) if the image is described\n * in text nearby\n /\n imageAlt: {\n type: String,\n default: undefined,\n },\n\n /\n Icon name to be displayed on the avatar\n /\n iconName: {\n type: String,\n default: undefined,\n validator: (name) => ICONS_LIST.includes(name),\n },\n\n /\n Icon size to be displayed on the avatar\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n iconSize: {\n type: String,\n default: '',\n validator: (size) => !size \|\| Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Full name used to extract initials.\n /\n fullName: {\n type: String,\n default: '',\n },\n\n /\n Makes the avatar focusable and clickable,\n * emits a click event when clicked.\n /\n clickable: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the icon.\n * To avoid a11y issues, set this prop if clickable and iconName are set.\n /\n iconAriaLabel: {\n type: String,\n default: undefined,\n },\n },\n\n emits: [\n /\n Avatar click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click',\n ],\n\n data () {\n return {\n AVATAR_SIZE_MODIFIERS,\n AVATAR_KIND_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_ICON_SIZES,\n imageLoadedSuccessfully: null,\n formattedInitials: '',\n initializing: false,\n };\n },\n\n computed: {\n isNotIconType () {\n return !this.iconName;\n },\n\n avatarClasses () {\n return [\n 'd-avatar',\n AVATAR_SIZE_MODIFIERS[this.validatedSize],\n this.avatarClass,\n {\n 'd-avatar--group': this.showGroup,\n [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,\n 'd-avatar--clickable': this.clickable,\n },\n ];\n },\n\n overlayClasses () {\n return [\n 'd-avatar__overlay',\n this.overlayClass,\n ];\n },\n\n showGroup () {\n return AVATAR_GROUP_VALIDATOR(this.group);\n },\n\n formattedGroup () {\n return this.group > 99 ? '99+' : this.group;\n },\n\n validatedSize () {\n // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n return this.group ? 'xs' : this.size;\n },\n\n showImage () {\n return this.imageLoadedSuccessfully !== false && this.imageSrc;\n },\n },\n\n watch: {\n fullName: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n size: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n group: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n imageSrc (newSrc) {\n this.imageLoadedSuccessfully = null;\n if (!newSrc) return;\n\n this.validateProps();\n this.setImageListeners();\n },\n },\n\n mounted () {\n this.validateProps();\n this.setImageListeners();\n },\n\n methods: {\n async setImageListeners () {\n await this.$nextTick();\n const el = this.$refs.avatarImage;\n if (!el) return;\n\n el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n },\n\n formatInitials () {\n const initials = extractInitialsFromName(this.fullName);\n\n if (this.validatedSize === 'xs') {\n this.formattedInitials = '';\n } else if (this.validatedSize === 'sm') {\n this.formattedInitials = initials[0];\n } else {\n this.formattedInitials = initials;\n }\n },\n\n getColor () {\n return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n },\n\n _loadedImageEventHandler (el) {\n this.imageLoadedSuccessfully = true;\n el.classList.remove('d-d-none');\n },\n\n _erroredImageEventHandler (el) {\n this.imageLoadedSuccessfully = false;\n el.classList.add('d-d-none');\n },\n\n validateProps () {\n if (this.imageSrc && this.imageAlt === undefined) {\n console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n }\n },\n\n handleClick (e) {\n if (!this.clickable) return;\n this.$emit('click', e);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n//TODO: Move these classes to dialtone and document.\n.d-avatar--image-loaded {\n background-color: transparent;\n background-image: unset;\n}\n\n.d-avatar__count {\n z-index: var(--zi-base);\n}\n\n.d-avatar__presence {\n z-index: var(--zi-base);\n}\n\n.d-avatar__overlay {\n background-color: var(--dt-color-surface-contrast-opaque);\n opacity: var(--dt-opacity-900);\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--dt-size-radius-circle);\n z-index: var(--zi-base);\n}\n\n.d-avatar__overlay-icon {\n color: var(--dt-color-foreground-primary-inverted);\n width: 100%;\n}\n\n.d-avatar__overlay-text {\n color: var(--dt-color-foreground-primary-inverted);\n font-weight: var(--dt-font-weight-bold);\n font-size: var(--dt-font-size-200);\n width: 100%;\n text-align: center;\n}\n\n.d-avatar--clickable {\n --avatar-color-border: transparent;\n\n cursor: pointer;\n padding: 0;\n background-color: transparent;\n\n border-radius: var(--dt-size-radius-circle);\n border: var(--dt-size-border-100) solid var(--avatar-color-border);\n\n &:focus-visible {\n outline: none;\n box-shadow: var(--dt-shadow-focus);\n }\n\n &:hover {\n --avatar-color-border: var(--dt-color-border-default);\n }\n\n &:active {\n --avatar-color-border: var(--dt-color-border-moderate);\n\n transform: scale(0.98);\n }\n}\n</style>\n"],"names":["getIconNames","DtPresence","DtIcon","getUniqueString","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","_openBlock","_createBlock","_resolveDynamicComponent","_createElementVNode","_normalizeClass","_createElementBlock","_toDisplayString","_mergeProps"],"mappings":"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"}
1	+ {"version":3,"file":"avatar.vue.cjs","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n <component\n :is=\"clickable ? 'button' : 'div'\"\n :id=\"id\"\n :class=\"avatarClasses\"\n data-qa=\"dt-avatar\"\n @click=\"handleClick\"\n >\n <div\n ref=\"canvas\"\n :class=\"[\n canvasClass,\n 'd-avatar__canvas',\n { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n ]\"\n >\n <img\n v-if=\"showImage\"\n ref=\"avatarImage\"\n class=\"d-avatar__image\"\n data-qa=\"dt-avatar-image\"\n :src=\"imageSrc\"\n :alt=\"imageAlt\"\n >\n <dt-icon\n v-else-if=\"iconName\"\n :name=\"iconName\"\n :aria-label=\"iconAriaLabel\"\n :size=\"iconSize \|\| AVATAR_ICON_SIZES[size]\"\n :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n data-qa=\"dt-avatar-icon\"\n />\n <span\n v-else\n :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n >\n {{ formattedInitials }}\n </span>\n </div>\n <div\n v-if=\"overlayIcon \|\| overlayText\"\n :class=\"overlayClasses\"\n >\n <dt-icon\n v-if=\"overlayIcon\"\n class=\"d-avatar__overlay-icon\"\n :name=\"overlayIcon\"\n />\n <p\n v-else-if=\"overlayText\"\n class=\"d-avatar__overlay-text\"\n >\n {{ overlayText }}\n </p>\n </div>\n <span\n v-if=\"showGroup\"\n class=\"d-avatar__count\"\n data-qa=\"dt-avatar-count\"\n >{{ formattedGroup }}</span>\n <dt-presence\n v-if=\"presence && !showGroup\"\n :presence=\"presence\"\n :class=\"[\n 'd-avatar__presence',\n AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n ]\"\n v-bind=\"presenceProps\"\n data-qa=\"dt-presence\"\n />\n </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport { DtIcon } from '@/components/icon';\nimport {\n AVATAR_KIND_MODIFIERS,\n AVATAR_SIZE_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_PRESENCE_STATES,\n AVATAR_RANDOM_COLORS,\n AVATAR_GROUP_VALIDATOR,\n AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { getIconNames } from '@/common/storybook_utils.js';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\nconst ICONS_LIST = getIconNames();\n\n/*\n An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n /\nexport default {\n name: 'DtAvatar',\n components: { DtPresence, DtIcon },\n\n inheritAttrs: false,\n\n props: {\n /\n Id of the avatar content wrapper element\n /\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /\n Pass in a seed to get the random color generation based on that string. For example if you pass in a\n * user ID as the string it will return the same randomly generated colors every time for that user.\n /\n seed: {\n type: String,\n default: undefined,\n },\n\n /\n Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n * if the seed prop is set.\n /\n color: {\n type: String,\n default: undefined,\n },\n\n /\n The size of the avatar\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Used to customize the avatar container\n /\n avatarClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Set classes on the avatar canvas. Wrapper around the core avatar image.\n /\n canvasClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Pass through classes. Used to customize the avatar icon\n /\n iconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Determines whether to show the presence indicator for\n * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n * or 'active'. By default, it's null and nothing is shown.\n * @values null, busy, away, offline, active\n /\n presence: {\n type: String,\n default: AVATAR_PRESENCE_STATES.NONE,\n validator: (state) => {\n return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n },\n },\n\n /\n A set of props to be passed into the presence component.\n /\n presenceProps: {\n type: Object,\n default: () => ({}),\n },\n\n /\n Determines whether to show a group avatar.\n * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n /\n group: {\n type: Number,\n default: undefined,\n validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n },\n\n /\n The icon that overlays the avatar\n /\n overlayIcon: {\n type: String,\n default: '',\n },\n\n /\n The text that overlays the avatar\n /\n overlayText: {\n type: String,\n default: '',\n },\n\n /\n Used to customize the avatar overlay\n /\n overlayClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Source of the image\n /\n imageSrc: {\n type: String,\n default: '',\n },\n\n /\n Alt attribute of the image, required if imageSrc is provided.\n * Can be set to '' (empty string) if the image is described\n * in text nearby\n /\n imageAlt: {\n type: String,\n default: undefined,\n },\n\n /\n Icon name to be displayed on the avatar\n /\n iconName: {\n type: String,\n default: undefined,\n validator: (name) => ICONS_LIST.includes(name),\n },\n\n /\n Icon size to be displayed on the avatar\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n iconSize: {\n type: String,\n default: '',\n validator: (size) => !size \|\| Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Full name used to extract initials.\n /\n fullName: {\n type: String,\n default: '',\n },\n\n /\n Makes the avatar focusable and clickable,\n * emits a click event when clicked.\n /\n clickable: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the icon.\n * To avoid a11y issues, set this prop if clickable and iconName are set.\n /\n iconAriaLabel: {\n type: String,\n default: undefined,\n },\n },\n\n emits: [\n /\n Avatar click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click',\n ],\n\n data () {\n return {\n AVATAR_SIZE_MODIFIERS,\n AVATAR_KIND_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_ICON_SIZES,\n imageLoadedSuccessfully: null,\n formattedInitials: '',\n initializing: false,\n };\n },\n\n computed: {\n isNotIconType () {\n return !this.iconName;\n },\n\n avatarClasses () {\n return [\n 'd-avatar',\n AVATAR_SIZE_MODIFIERS[this.validatedSize],\n this.avatarClass,\n {\n 'd-avatar--group': this.showGroup,\n [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,\n 'd-avatar--clickable': this.clickable,\n },\n ];\n },\n\n overlayClasses () {\n return [\n 'd-avatar__overlay',\n this.overlayClass,\n ];\n },\n\n showGroup () {\n return AVATAR_GROUP_VALIDATOR(this.group);\n },\n\n formattedGroup () {\n return this.group > 99 ? '99+' : this.group;\n },\n\n validatedSize () {\n // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n return this.group ? 'xs' : this.size;\n },\n\n showImage () {\n return this.imageLoadedSuccessfully !== false && this.imageSrc;\n },\n },\n\n watch: {\n fullName: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n size: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n group: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n imageSrc (newSrc) {\n this.imageLoadedSuccessfully = null;\n if (!newSrc) return;\n\n this.validateProps();\n this.setImageListeners();\n },\n },\n\n mounted () {\n this.validateProps();\n this.setImageListeners();\n },\n\n methods: {\n async setImageListeners () {\n await this.$nextTick();\n const el = this.$refs.avatarImage;\n if (!el) return;\n\n el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n },\n\n formatInitials () {\n const initials = extractInitialsFromName(this.fullName);\n\n if (this.validatedSize === 'xs') {\n this.formattedInitials = '';\n } else if (this.validatedSize === 'sm') {\n this.formattedInitials = initials[0];\n } else {\n this.formattedInitials = initials;\n }\n },\n\n getColor () {\n return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n },\n\n _loadedImageEventHandler (el) {\n this.imageLoadedSuccessfully = true;\n el.classList.remove('d-d-none');\n },\n\n _erroredImageEventHandler (el) {\n this.imageLoadedSuccessfully = false;\n el.classList.add('d-d-none');\n },\n\n validateProps () {\n if (this.imageSrc && this.imageAlt === undefined) {\n console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n }\n },\n\n handleClick (e) {\n if (!this.clickable) return;\n this.$emit('click', e);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n//TODO: Move these classes to dialtone and document.\n.d-avatar--image-loaded {\n background-color: transparent;\n background-image: unset;\n}\n\n.d-avatar__count {\n z-index: var(--zi-base);\n}\n\n.d-avatar__presence {\n z-index: var(--zi-base);\n}\n\n.d-avatar__overlay {\n background-color: var(--dt-color-surface-contrast-opaque);\n opacity: var(--dt-opacity-900);\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--dt-size-radius-circle);\n z-index: var(--zi-base);\n}\n\n.d-avatar__overlay-icon {\n color: var(--dt-color-foreground-primary-inverted);\n width: 100%;\n}\n\n.d-avatar__overlay-text {\n color: var(--dt-color-foreground-primary-inverted);\n font-weight: var(--dt-font-weight-bold);\n font-size: var(--dt-font-size-200);\n width: 100%;\n text-align: center;\n}\n\n.d-avatar--clickable {\n --avatar-color-border: transparent;\n\n cursor: pointer;\n padding: 0;\n background-color: transparent;\n\n border-radius: var(--dt-size-radius-circle);\n border: var(--dt-size-border-100) solid var(--avatar-color-border);\n\n &:focus-visible {\n outline: none;\n box-shadow: var(--dt-shadow-focus);\n }\n\n &:hover {\n --avatar-color-border: var(--dt-color-border-default);\n }\n\n &:active {\n --avatar-color-border: var(--dt-color-border-moderate);\n\n transform: scale(0.98);\n }\n}\n</style>\n"],"names":["getIconNames","DtPresence","DtIcon","getUniqueString","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_createElementVNode","_createElementBlock","_toDisplayString","_createCommentVNode","_openBlock","_mergeProps"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.vue.js","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n <component\n :is=\"clickable ? 'button' : 'div'\"\n :id=\"id\"\n :class=\"avatarClasses\"\n data-qa=\"dt-avatar\"\n @click=\"handleClick\"\n >\n <div\n ref=\"canvas\"\n :class=\"[\n canvasClass,\n 'd-avatar__canvas',\n { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n ]\"\n >\n <img\n v-if=\"showImage\"\n ref=\"avatarImage\"\n class=\"d-avatar__image\"\n data-qa=\"dt-avatar-image\"\n :src=\"imageSrc\"\n :alt=\"imageAlt\"\n >\n <dt-icon\n v-else-if=\"iconName\"\n :name=\"iconName\"\n :aria-label=\"iconAriaLabel\"\n :size=\"iconSize \|\| AVATAR_ICON_SIZES[size]\"\n :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n data-qa=\"dt-avatar-icon\"\n />\n <span\n v-else\n :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n >\n {{ formattedInitials }}\n </span>\n </div>\n <div\n v-if=\"overlayIcon \|\| overlayText\"\n :class=\"overlayClasses\"\n >\n <dt-icon\n v-if=\"overlayIcon\"\n class=\"d-avatar__overlay-icon\"\n :name=\"overlayIcon\"\n />\n <p\n v-else-if=\"overlayText\"\n class=\"d-avatar__overlay-text\"\n >\n {{ overlayText }}\n </p>\n </div>\n <span\n v-if=\"showGroup\"\n class=\"d-avatar__count\"\n data-qa=\"dt-avatar-count\"\n >{{ formattedGroup }}</span>\n <dt-presence\n v-if=\"presence && !showGroup\"\n :presence=\"presence\"\n :class=\"[\n 'd-avatar__presence',\n AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n ]\"\n v-bind=\"presenceProps\"\n data-qa=\"dt-presence\"\n />\n </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport { DtIcon } from '@/components/icon';\nimport {\n AVATAR_KIND_MODIFIERS,\n AVATAR_SIZE_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_PRESENCE_STATES,\n AVATAR_RANDOM_COLORS,\n AVATAR_GROUP_VALIDATOR,\n AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { getIconNames } from '@/common/storybook_utils.js';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\nconst ICONS_LIST = getIconNames();\n\n/*\n An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n /\nexport default {\n name: 'DtAvatar',\n components: { DtPresence, DtIcon },\n\n inheritAttrs: false,\n\n props: {\n /\n Id of the avatar content wrapper element\n /\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /\n Pass in a seed to get the random color generation based on that string. For example if you pass in a\n * user ID as the string it will return the same randomly generated colors every time for that user.\n /\n seed: {\n type: String,\n default: undefined,\n },\n\n /\n Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n * if the seed prop is set.\n /\n color: {\n type: String,\n default: undefined,\n },\n\n /\n The size of the avatar\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Used to customize the avatar container\n /\n avatarClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Set classes on the avatar canvas. Wrapper around the core avatar image.\n /\n canvasClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Pass through classes. Used to customize the avatar icon\n /\n iconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Determines whether to show the presence indicator for\n * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n * or 'active'. By default, it's null and nothing is shown.\n * @values null, busy, away, offline, active\n /\n presence: {\n type: String,\n default: AVATAR_PRESENCE_STATES.NONE,\n validator: (state) => {\n return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n },\n },\n\n /\n A set of props to be passed into the presence component.\n /\n presenceProps: {\n type: Object,\n default: () => ({}),\n },\n\n /\n Determines whether to show a group avatar.\n * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n /\n group: {\n type: Number,\n default: undefined,\n validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n },\n\n /\n The icon that overlays the avatar\n /\n overlayIcon: {\n type: String,\n default: '',\n },\n\n /\n The text that overlays the avatar\n /\n overlayText: {\n type: String,\n default: '',\n },\n\n /\n Used to customize the avatar overlay\n /\n overlayClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Source of the image\n /\n imageSrc: {\n type: String,\n default: '',\n },\n\n /\n Alt attribute of the image, required if imageSrc is provided.\n * Can be set to '' (empty string) if the image is described\n * in text nearby\n /\n imageAlt: {\n type: String,\n default: undefined,\n },\n\n /\n Icon name to be displayed on the avatar\n /\n iconName: {\n type: String,\n default: undefined,\n validator: (name) => ICONS_LIST.includes(name),\n },\n\n /\n Icon size to be displayed on the avatar\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n iconSize: {\n type: String,\n default: '',\n validator: (size) => !size \|\| Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Full name used to extract initials.\n /\n fullName: {\n type: String,\n default: '',\n },\n\n /\n Makes the avatar focusable and clickable,\n * emits a click event when clicked.\n /\n clickable: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the icon.\n * To avoid a11y issues, set this prop if clickable and iconName are set.\n /\n iconAriaLabel: {\n type: String,\n default: undefined,\n },\n },\n\n emits: [\n /\n Avatar click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click',\n ],\n\n data () {\n return {\n AVATAR_SIZE_MODIFIERS,\n AVATAR_KIND_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_ICON_SIZES,\n imageLoadedSuccessfully: null,\n formattedInitials: '',\n initializing: false,\n };\n },\n\n computed: {\n isNotIconType () {\n return !this.iconName;\n },\n\n avatarClasses () {\n return [\n 'd-avatar',\n AVATAR_SIZE_MODIFIERS[this.validatedSize],\n this.avatarClass,\n {\n 'd-avatar--group': this.showGroup,\n [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,\n 'd-avatar--clickable': this.clickable,\n },\n ];\n },\n\n overlayClasses () {\n return [\n 'd-avatar__overlay',\n this.overlayClass,\n ];\n },\n\n showGroup () {\n return AVATAR_GROUP_VALIDATOR(this.group);\n },\n\n formattedGroup () {\n return this.group > 99 ? '99+' : this.group;\n },\n\n validatedSize () {\n // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n return this.group ? 'xs' : this.size;\n },\n\n showImage () {\n return this.imageLoadedSuccessfully !== false && this.imageSrc;\n },\n },\n\n watch: {\n fullName: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n size: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n group: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n imageSrc (newSrc) {\n this.imageLoadedSuccessfully = null;\n if (!newSrc) return;\n\n this.validateProps();\n this.setImageListeners();\n },\n },\n\n mounted () {\n this.validateProps();\n this.setImageListeners();\n },\n\n methods: {\n async setImageListeners () {\n await this.$nextTick();\n const el = this.$refs.avatarImage;\n if (!el) return;\n\n el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n },\n\n formatInitials () {\n const initials = extractInitialsFromName(this.fullName);\n\n if (this.validatedSize === 'xs') {\n this.formattedInitials = '';\n } else if (this.validatedSize === 'sm') {\n this.formattedInitials = initials[0];\n } else {\n this.formattedInitials = initials;\n }\n },\n\n getColor () {\n return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n },\n\n _loadedImageEventHandler (el) {\n this.imageLoadedSuccessfully = true;\n el.classList.remove('d-d-none');\n },\n\n _erroredImageEventHandler (el) {\n this.imageLoadedSuccessfully = false;\n el.classList.add('d-d-none');\n },\n\n validateProps () {\n if (this.imageSrc && this.imageAlt === undefined) {\n console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n }\n },\n\n handleClick (e) {\n if (!this.clickable) return;\n this.$emit('click', e);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n//TODO: Move these classes to dialtone and document.\n.d-avatar--image-loaded {\n background-color: transparent;\n background-image: unset;\n}\n\n.d-avatar__count {\n z-index: var(--zi-base);\n}\n\n.d-avatar__presence {\n z-index: var(--zi-base);\n}\n\n.d-avatar__overlay {\n background-color: var(--dt-color-surface-contrast-opaque);\n opacity: var(--dt-opacity-900);\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--dt-size-radius-circle);\n z-index: var(--zi-base);\n}\n\n.d-avatar__overlay-icon {\n color: var(--dt-color-foreground-primary-inverted);\n width: 100%;\n}\n\n.d-avatar__overlay-text {\n color: var(--dt-color-foreground-primary-inverted);\n font-weight: var(--dt-font-weight-bold);\n font-size: var(--dt-font-size-200);\n width: 100%;\n text-align: center;\n}\n\n.d-avatar--clickable {\n --avatar-color-border: transparent;\n\n cursor: pointer;\n padding: 0;\n background-color: transparent;\n\n border-radius: var(--dt-size-radius-circle);\n border: var(--dt-size-border-100) solid var(--avatar-color-border);\n\n &:focus-visible {\n outline: none;\n box-shadow: var(--dt-shadow-focus);\n }\n\n &:hover {\n --avatar-color-border: var(--dt-color-border-default);\n }\n\n &:active {\n --avatar-color-border: var(--dt-color-border-moderate);\n\n transform: scale(0.98);\n }\n}\n</style>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementVNode","_normalizeClass","_createElementBlock","_toDisplayString","_mergeProps"],"mappings":"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"}
1	+ {"version":3,"file":"avatar.vue.js","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n <component\n :is=\"clickable ? 'button' : 'div'\"\n :id=\"id\"\n :class=\"avatarClasses\"\n data-qa=\"dt-avatar\"\n @click=\"handleClick\"\n >\n <div\n ref=\"canvas\"\n :class=\"[\n canvasClass,\n 'd-avatar__canvas',\n { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n ]\"\n >\n <img\n v-if=\"showImage\"\n ref=\"avatarImage\"\n class=\"d-avatar__image\"\n data-qa=\"dt-avatar-image\"\n :src=\"imageSrc\"\n :alt=\"imageAlt\"\n >\n <dt-icon\n v-else-if=\"iconName\"\n :name=\"iconName\"\n :aria-label=\"iconAriaLabel\"\n :size=\"iconSize \|\| AVATAR_ICON_SIZES[size]\"\n :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n data-qa=\"dt-avatar-icon\"\n />\n <span\n v-else\n :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n >\n {{ formattedInitials }}\n </span>\n </div>\n <div\n v-if=\"overlayIcon \|\| overlayText\"\n :class=\"overlayClasses\"\n >\n <dt-icon\n v-if=\"overlayIcon\"\n class=\"d-avatar__overlay-icon\"\n :name=\"overlayIcon\"\n />\n <p\n v-else-if=\"overlayText\"\n class=\"d-avatar__overlay-text\"\n >\n {{ overlayText }}\n </p>\n </div>\n <span\n v-if=\"showGroup\"\n class=\"d-avatar__count\"\n data-qa=\"dt-avatar-count\"\n >{{ formattedGroup }}</span>\n <dt-presence\n v-if=\"presence && !showGroup\"\n :presence=\"presence\"\n :class=\"[\n 'd-avatar__presence',\n AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n ]\"\n v-bind=\"presenceProps\"\n data-qa=\"dt-presence\"\n />\n </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport { DtIcon } from '@/components/icon';\nimport {\n AVATAR_KIND_MODIFIERS,\n AVATAR_SIZE_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_PRESENCE_STATES,\n AVATAR_RANDOM_COLORS,\n AVATAR_GROUP_VALIDATOR,\n AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { getIconNames } from '@/common/storybook_utils.js';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\nconst ICONS_LIST = getIconNames();\n\n/*\n An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n /\nexport default {\n name: 'DtAvatar',\n components: { DtPresence, DtIcon },\n\n inheritAttrs: false,\n\n props: {\n /\n Id of the avatar content wrapper element\n /\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /\n Pass in a seed to get the random color generation based on that string. For example if you pass in a\n * user ID as the string it will return the same randomly generated colors every time for that user.\n /\n seed: {\n type: String,\n default: undefined,\n },\n\n /\n Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n * if the seed prop is set.\n /\n color: {\n type: String,\n default: undefined,\n },\n\n /\n The size of the avatar\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Used to customize the avatar container\n /\n avatarClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Set classes on the avatar canvas. Wrapper around the core avatar image.\n /\n canvasClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Pass through classes. Used to customize the avatar icon\n /\n iconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Determines whether to show the presence indicator for\n * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n * or 'active'. By default, it's null and nothing is shown.\n * @values null, busy, away, offline, active\n /\n presence: {\n type: String,\n default: AVATAR_PRESENCE_STATES.NONE,\n validator: (state) => {\n return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n },\n },\n\n /\n A set of props to be passed into the presence component.\n /\n presenceProps: {\n type: Object,\n default: () => ({}),\n },\n\n /\n Determines whether to show a group avatar.\n * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n /\n group: {\n type: Number,\n default: undefined,\n validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n },\n\n /\n The icon that overlays the avatar\n /\n overlayIcon: {\n type: String,\n default: '',\n },\n\n /\n The text that overlays the avatar\n /\n overlayText: {\n type: String,\n default: '',\n },\n\n /\n Used to customize the avatar overlay\n /\n overlayClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Source of the image\n /\n imageSrc: {\n type: String,\n default: '',\n },\n\n /\n Alt attribute of the image, required if imageSrc is provided.\n * Can be set to '' (empty string) if the image is described\n * in text nearby\n /\n imageAlt: {\n type: String,\n default: undefined,\n },\n\n /\n Icon name to be displayed on the avatar\n /\n iconName: {\n type: String,\n default: undefined,\n validator: (name) => ICONS_LIST.includes(name),\n },\n\n /\n Icon size to be displayed on the avatar\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n iconSize: {\n type: String,\n default: '',\n validator: (size) => !size \|\| Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Full name used to extract initials.\n /\n fullName: {\n type: String,\n default: '',\n },\n\n /\n Makes the avatar focusable and clickable,\n * emits a click event when clicked.\n /\n clickable: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the icon.\n * To avoid a11y issues, set this prop if clickable and iconName are set.\n /\n iconAriaLabel: {\n type: String,\n default: undefined,\n },\n },\n\n emits: [\n /\n Avatar click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click',\n ],\n\n data () {\n return {\n AVATAR_SIZE_MODIFIERS,\n AVATAR_KIND_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_ICON_SIZES,\n imageLoadedSuccessfully: null,\n formattedInitials: '',\n initializing: false,\n };\n },\n\n computed: {\n isNotIconType () {\n return !this.iconName;\n },\n\n avatarClasses () {\n return [\n 'd-avatar',\n AVATAR_SIZE_MODIFIERS[this.validatedSize],\n this.avatarClass,\n {\n 'd-avatar--group': this.showGroup,\n [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,\n 'd-avatar--clickable': this.clickable,\n },\n ];\n },\n\n overlayClasses () {\n return [\n 'd-avatar__overlay',\n this.overlayClass,\n ];\n },\n\n showGroup () {\n return AVATAR_GROUP_VALIDATOR(this.group);\n },\n\n formattedGroup () {\n return this.group > 99 ? '99+' : this.group;\n },\n\n validatedSize () {\n // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n return this.group ? 'xs' : this.size;\n },\n\n showImage () {\n return this.imageLoadedSuccessfully !== false && this.imageSrc;\n },\n },\n\n watch: {\n fullName: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n size: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n group: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n imageSrc (newSrc) {\n this.imageLoadedSuccessfully = null;\n if (!newSrc) return;\n\n this.validateProps();\n this.setImageListeners();\n },\n },\n\n mounted () {\n this.validateProps();\n this.setImageListeners();\n },\n\n methods: {\n async setImageListeners () {\n await this.$nextTick();\n const el = this.$refs.avatarImage;\n if (!el) return;\n\n el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n },\n\n formatInitials () {\n const initials = extractInitialsFromName(this.fullName);\n\n if (this.validatedSize === 'xs') {\n this.formattedInitials = '';\n } else if (this.validatedSize === 'sm') {\n this.formattedInitials = initials[0];\n } else {\n this.formattedInitials = initials;\n }\n },\n\n getColor () {\n return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n },\n\n _loadedImageEventHandler (el) {\n this.imageLoadedSuccessfully = true;\n el.classList.remove('d-d-none');\n },\n\n _erroredImageEventHandler (el) {\n this.imageLoadedSuccessfully = false;\n el.classList.add('d-d-none');\n },\n\n validateProps () {\n if (this.imageSrc && this.imageAlt === undefined) {\n console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n }\n },\n\n handleClick (e) {\n if (!this.clickable) return;\n this.$emit('click', e);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n//TODO: Move these classes to dialtone and document.\n.d-avatar--image-loaded {\n background-color: transparent;\n background-image: unset;\n}\n\n.d-avatar__count {\n z-index: var(--zi-base);\n}\n\n.d-avatar__presence {\n z-index: var(--zi-base);\n}\n\n.d-avatar__overlay {\n background-color: var(--dt-color-surface-contrast-opaque);\n opacity: var(--dt-opacity-900);\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--dt-size-radius-circle);\n z-index: var(--zi-base);\n}\n\n.d-avatar__overlay-icon {\n color: var(--dt-color-foreground-primary-inverted);\n width: 100%;\n}\n\n.d-avatar__overlay-text {\n color: var(--dt-color-foreground-primary-inverted);\n font-weight: var(--dt-font-weight-bold);\n font-size: var(--dt-font-size-200);\n width: 100%;\n text-align: center;\n}\n\n.d-avatar--clickable {\n --avatar-color-border: transparent;\n\n cursor: pointer;\n padding: 0;\n background-color: transparent;\n\n border-radius: var(--dt-size-radius-circle);\n border: var(--dt-size-border-100) solid var(--avatar-color-border);\n\n &:focus-visible {\n outline: none;\n box-shadow: var(--dt-shadow-focus);\n }\n\n &:hover {\n --avatar-color-border: var(--dt-color-border-default);\n }\n\n &:active {\n --avatar-color-border: var(--dt-color-border-moderate);\n\n transform: scale(0.98);\n }\n}\n</style>\n"],"names":["_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_createElementVNode","_createElementBlock","_toDisplayString","_createCommentVNode","_openBlock","_mergeProps"],"mappings":"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"}

package/dist/vue3/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=\"iconLeft\"\n class=\"d-badge__icon-left\"\n >\n <dt-icon\n :name=\"iconLeft\"\n 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=\"iconRight\"\n class=\"d-badge__icon-right\"\n >\n <dt-icon\n :name=\"iconRight\"\n 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';\nimport { DtIcon } from '@/components/icon';\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 components: {\n DtIcon,\n },\n\n props: {\n /\n Icon on the left side of the badge. Supports any valid icon name from the icon catalog at\n * https://dialtone.dialpad.com/components/icon.html#icon-catalog. If type:'ai' is set, the ai icon\n * will automatically be shown here, but this can be overridden by setting this prop.\n /\n iconLeft: {\n type: String,\n default: '',\n },\n\n /\n Icon on the right side of the badge. Supports any valid icon name from the icon catalog at\n * https://dialtone.dialpad.com/components/icon.html#icon-catalog\n /\n iconRight: {\n type: String,\n default: '',\n },\n\n /\n Text for the badge content\n /\n text: {\n type: String,\n default: '',\n },\n\n /\n The kind of badge which determines the styling\n * @values label, count\n /\n kind: {\n type: String,\n default: 'label',\n validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n },\n\n /\n Color for the badge background\n * @values default, info, success, warning, critical, bulletin, ai\n /\n type: {\n type: String,\n default: 'default',\n validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n },\n\n /\n Decoration for the badge. This can be only used with kind: label and type: default\n * with no iconLeft and iconRight\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 hasIcons () {\n return this.iconLeft !== '' \|\| this.iconRight !== '';\n },\n },\n\n watch: {\n $props: {\n immediate: true,\n deep: true,\n handler () {\n this.validateProps();\n },\n },\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 iconLeft or iconRight.');\n }\n },\n },\n};\n</script>\n"],"names":["DtIcon","BADGE_KIND_MODIFIERS","BADGE_TYPE_MODIFIERS","BADGE_DECORATION_MODIFIERS","_createElementBlock","_normalizeClass","_openBlock","_createVNode","_createElementVNode","_renderSlot"],"mappings":";;;;;AAoDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAA;AAAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS,OAAO,KAAKC,oCAAoB,EAAE,SAAS,IAAI;AAAA,IACrE;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS,OAAO,KAAKC,oCAAoB,EAAE,SAAS,IAAI;AAAA,IACrE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS,OAAO,KAAKC,0CAA0B,EAAE,SAAS,IAAI;AAAA,IAC3E;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,sBAAAD,gBAAoB;AAAA,MACpB,sBAAAD,gBAAoB;AAAA,kCACpBE,gBAA0B;AAAA;EAE7B;AAAA,EAED,UAAU;AAAA,IACR,WAAY;AACV,aAAO,KAAK,aAAa,MAAM,KAAK,cAAc;AAAA,IACnD;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,MAAM;AAAA,MACN,UAAW;AACT,aAAK,cAAa;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,gBAAiB;AACf,WAAK,4BAA2B;AAChC,WAAK,kCAAiC;AAAA,IACvC;AAAA,IAED,8BAA+B;AAC7B,UAAI,KAAK,SAAS,QAAQ,KAAK,SAAS,SAAS;AAC/C,gBAAQ,MAAM,yEAA6E;AAAA,MAC7F;AACA,UAAI,KAAK,SAAS,cAAc,KAAK,QAAQ;AAC3C,gBAAQ,MAAM,6DAA+D;AAAA,MAC/E;AAAA,IACD;AAAA,IAED,oCAAqC;AACnC,UAAI,CAAC,KAAK,WAAY;AAEtB,UAAI,KAAK,SAAS,WAAW,KAAK,SAAS,WAAW;AACpD,gBAAQ,MAAM,yFAA6F;AAAA,MAC7G;AAEA,UAAI,KAAK,UAAU;AACjB,gBAAQ,MAAM,2EAA2E;AAAA,MAC3F;AAAA,IACD;AAAA,EACF;AACH~~;;;EAvLM~~,OAAM~~;;;;EAIN~~,OAAM~~;;;;EAeN~~,OAAM;;;;0BAhCVC,IAuCO,mBAAA,QAAA;AAAA,IAtCJ,~~OAAKC~~,IAAAA,eAAA;AAAA;~~MAA2B~~,MAAA,qBAAqB,OAAI,IAAA;AAAA,MAAS,MAAA,qBAAqB,OAAI,IAAA;AAAA,MAAS,MAAA,2BAA2B,OAAU,UAAA;AAAA,2BAA8B,OAAM,OAAA;AAAA,6BAAiC,OAAQ,SAAA;AAAA;IAQvN,WAAQ;AAAA;IAGA,OAAU,cADlBC,IAAAA,aAAAF,IAAAA,mBAGE,QAHF,UAGE;~~IAEM~~,OAAQ,~~YADhBE~~,IAAAA,aAAAF,IAAAA,mBAQO,QARP,YAQO;AAAA,~~MAJLG~~,IAAAA,YAGE,oBAAA;AAAA,QAFC,MAAM,OAAQ;AAAA,QACf,MAAK;AAAA~~;;IAGTC~~,IAAAA,mBAKO,QAAA;AAAA,MALA,~~6CAA0B~~,OAAU,UAAA,CAAA;AAAA;~~MAEzCC~~,IAAAA,WAEO,4BAFP,MAEO;AAAA,~~gDADF~~,OAAI,IAAA,GAAA,CAAA;AAAA;;IAIH,OAAS,~~aADjBH~~,IAAAA,aAAAF,IAAAA,mBAQO,QARP,YAQO;AAAA,~~MAJLG~~,IAAAA,YAGE,oBAAA;AAAA,QAFC,MAAM,OAAS;AAAA,QAChB,MAAK;AAAA~~;;;;;;~~"}
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=\"iconLeft\"\n class=\"d-badge__icon-left\"\n >\n <dt-icon\n :name=\"iconLeft\"\n 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=\"iconRight\"\n class=\"d-badge__icon-right\"\n >\n <dt-icon\n :name=\"iconRight\"\n 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';\nimport { DtIcon } from '@/components/icon';\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 components: {\n DtIcon,\n },\n\n props: {\n /\n Icon on the left side of the badge. Supports any valid icon name from the icon catalog at\n * https://dialtone.dialpad.com/components/icon.html#icon-catalog. If type:'ai' is set, the ai icon\n * will automatically be shown here, but this can be overridden by setting this prop.\n /\n iconLeft: {\n type: String,\n default: '',\n },\n\n /\n Icon on the right side of the badge. Supports any valid icon name from the icon catalog at\n * https://dialtone.dialpad.com/components/icon.html#icon-catalog\n /\n iconRight: {\n type: String,\n default: '',\n },\n\n /\n Text for the badge content\n /\n text: {\n type: String,\n default: '',\n },\n\n /\n The kind of badge which determines the styling\n * @values label, count\n /\n kind: {\n type: String,\n default: 'label',\n validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n },\n\n /\n Color for the badge background\n * @values default, info, success, warning, critical, bulletin, ai\n /\n type: {\n type: String,\n default: 'default',\n validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n },\n\n /\n Decoration for the badge. This can be only used with kind: label and type: default\n * with no iconLeft and iconRight\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 hasIcons () {\n return this.iconLeft !== '' \|\| this.iconRight !== '';\n },\n },\n\n watch: {\n $props: {\n immediate: true,\n deep: true,\n handler () {\n this.validateProps();\n },\n },\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 iconLeft or iconRight.');\n }\n },\n },\n};\n</script>\n"],"names":["DtIcon","BADGE_KIND_MODIFIERS","BADGE_TYPE_MODIFIERS","BADGE_DECORATION_MODIFIERS","_createElementBlock","_normalizeClass","_openBlock","_createCommentVNode","_createVNode","_createElementVNode","_renderSlot","_createTextVNode","_toDisplayString"],"mappings":"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"}

package/dist/vue3/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=\"iconLeft\"\n class=\"d-badge__icon-left\"\n >\n <dt-icon\n :name=\"iconLeft\"\n 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=\"iconRight\"\n class=\"d-badge__icon-right\"\n >\n <dt-icon\n :name=\"iconRight\"\n 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';\nimport { DtIcon } from '@/components/icon';\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 components: {\n DtIcon,\n },\n\n props: {\n /\n Icon on the left side of the badge. Supports any valid icon name from the icon catalog at\n * https://dialtone.dialpad.com/components/icon.html#icon-catalog. If type:'ai' is set, the ai icon\n * will automatically be shown here, but this can be overridden by setting this prop.\n /\n iconLeft: {\n type: String,\n default: '',\n },\n\n /\n Icon on the right side of the badge. Supports any valid icon name from the icon catalog at\n * https://dialtone.dialpad.com/components/icon.html#icon-catalog\n /\n iconRight: {\n type: String,\n default: '',\n },\n\n /\n Text for the badge content\n /\n text: {\n type: String,\n default: '',\n },\n\n /\n The kind of badge which determines the styling\n * @values label, count\n /\n kind: {\n type: String,\n default: 'label',\n validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n },\n\n /\n Color for the badge background\n * @values default, info, success, warning, critical, bulletin, ai\n /\n type: {\n type: String,\n default: 'default',\n validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n },\n\n /\n Decoration for the badge. This can be only used with kind: label and type: default\n * with no iconLeft and iconRight\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 hasIcons () {\n return this.iconLeft !== '' \|\| this.iconRight !== '';\n },\n },\n\n watch: {\n $props: {\n immediate: true,\n deep: true,\n handler () {\n this.validateProps();\n },\n },\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 iconLeft or iconRight.');\n }\n },\n },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_openBlock","_createVNode","_createElementVNode","_renderSlot"],"mappings":";;;;AAoDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS,OAAO,KAAK,oBAAoB,EAAE,SAAS,IAAI;AAAA,IACrE;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS,OAAO,KAAK,oBAAoB,EAAE,SAAS,IAAI;AAAA,IACrE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS,OAAO,KAAK,0BAA0B,EAAE,SAAS,IAAI;AAAA,IAC3E;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;EAEH;AAAA,EAED,UAAU;AAAA,IACR,WAAY;AACV,aAAO,KAAK,aAAa,MAAM,KAAK,cAAc;AAAA,IACnD;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,MAAM;AAAA,MACN,UAAW;AACT,aAAK,cAAa;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,gBAAiB;AACf,WAAK,4BAA2B;AAChC,WAAK,kCAAiC;AAAA,IACvC;AAAA,IAED,8BAA+B;AAC7B,UAAI,KAAK,SAAS,QAAQ,KAAK,SAAS,SAAS;AAC/C,gBAAQ,MAAM,yEAA6E;AAAA,MAC7F;AACA,UAAI,KAAK,SAAS,cAAc,KAAK,QAAQ;AAC3C,gBAAQ,MAAM,6DAA+D;AAAA,MAC/E;AAAA,IACD;AAAA,IAED,oCAAqC;AACnC,UAAI,CAAC,KAAK,WAAY;AAEtB,UAAI,KAAK,SAAS,WAAW,KAAK,SAAS,WAAW;AACpD,gBAAQ,MAAM,yFAA6F;AAAA,MAC7G;AAEA,UAAI,KAAK,UAAU;AACjB,gBAAQ,MAAM,2EAA2E;AAAA,MAC3F;AAAA,IACD;AAAA,EACF;AACH~~;;;EAvLM~~,OAAM~~;;;;EAIN~~,OAAM~~;;;;EAeN~~,OAAM;;;;sBAhCVA,mBAuCO,QAAA;AAAA,IAtCJ,~~OAAKC~~,eAAA;AAAA;~~MAA2B~~,MAAA,qBAAqB,OAAI,IAAA;AAAA,MAAS,MAAA,qBAAqB,OAAI,IAAA;AAAA,MAAS,MAAA,2BAA2B,OAAU,UAAA;AAAA,2BAA8B,OAAM,OAAA;AAAA,6BAAiC,OAAQ,SAAA;AAAA;IAQvN,WAAQ;AAAA;IAGA,OAAU,cADlBC,aAAAF,mBAGE,QAHF,UAGE;~~IAEM~~,OAAQ,~~YADhBE~~,aAAAF,mBAQO,QARP,YAQO;AAAA,~~MAJLG~~,YAGE,oBAAA;AAAA,QAFC,MAAM,OAAQ;AAAA,QACf,MAAK;AAAA~~;;IAGTC~~,mBAKO,QAAA;AAAA,MALA,~~yCAA0B~~,OAAU,UAAA,CAAA;AAAA;~~MAEzCC~~,WAEO,4BAFP,MAEO;AAAA,~~wCADF~~,OAAI,IAAA,GAAA,CAAA;AAAA;;IAIH,OAAS,~~aADjBH~~,aAAAF,mBAQO,QARP,YAQO;AAAA,~~MAJLG~~,YAGE,oBAAA;AAAA,QAFC,MAAM,OAAS;AAAA,QAChB,MAAK;AAAA~~;;;;;~~"}
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=\"iconLeft\"\n class=\"d-badge__icon-left\"\n >\n <dt-icon\n :name=\"iconLeft\"\n 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=\"iconRight\"\n class=\"d-badge__icon-right\"\n >\n <dt-icon\n :name=\"iconRight\"\n 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';\nimport { DtIcon } from '@/components/icon';\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 components: {\n DtIcon,\n },\n\n props: {\n /\n Icon on the left side of the badge. Supports any valid icon name from the icon catalog at\n * https://dialtone.dialpad.com/components/icon.html#icon-catalog. If type:'ai' is set, the ai icon\n * will automatically be shown here, but this can be overridden by setting this prop.\n /\n iconLeft: {\n type: String,\n default: '',\n },\n\n /\n Icon on the right side of the badge. Supports any valid icon name from the icon catalog at\n * https://dialtone.dialpad.com/components/icon.html#icon-catalog\n /\n iconRight: {\n type: String,\n default: '',\n },\n\n /\n Text for the badge content\n /\n text: {\n type: String,\n default: '',\n },\n\n /\n The kind of badge which determines the styling\n * @values label, count\n /\n kind: {\n type: String,\n default: 'label',\n validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n },\n\n /\n Color for the badge background\n * @values default, info, success, warning, critical, bulletin, ai\n /\n type: {\n type: String,\n default: 'default',\n validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n },\n\n /\n Decoration for the badge. This can be only used with kind: label and type: default\n * with no iconLeft and iconRight\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 hasIcons () {\n return this.iconLeft !== '' \|\| this.iconRight !== '';\n },\n },\n\n watch: {\n $props: {\n immediate: true,\n deep: true,\n handler () {\n this.validateProps();\n },\n },\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 iconLeft or iconRight.');\n }\n },\n },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_openBlock","_createCommentVNode","_createVNode","_createElementVNode","_renderSlot","_createTextVNode","_toDisplayString"],"mappings":"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"}

package/dist/vue3/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 >\n <!-- @slot Slot for custom icon -->\n <slot name=\"icon\" />\n </dt-notice-icon>\n <dt-notice-content\n :title-id=\"titleId\"\n :content-id=\"contentId\"\n :title=\"title\"\n >\n <template #titleOverride>\n <!-- eslint-disable-next-line max-len -->\n <!-- @slot Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the \"title\" prop. -->\n <slot name=\"titleOverride\" />\n </template>\n <!-- @slot the main textual content of the banner -->\n <slot />\n </dt-notice-content>\n <dt-notice-action\n :hide-action=\"hideAction\"\n :hide-close=\"hideClose\"\n :close-button-props=\"closeButtonProps\"\n :visually-hidden-close=\"visuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n @close=\"$emit('close')\"\n >\n <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n <slot name=\"action\" />\n </dt-notice-action>\n </div>\n </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport Modal from '@/common/mixins/modal';\nimport utils from '@/common/utils';\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","_createElementBlock","~~_createElementVNode~~","~~_normalizeClass~~","_createBlock","_renderSlot","_createVNode"],"mappings":";;;;;;;;;;AA4DA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,kBACVA;AAAAA,IACA,iBAAAC;AAAAA,IACA,gBAAAC;AAAAA,EACD;AAAA,EAED,QAAQ,CAACC,OAAOC,oBAAsB;AAAA,EAEtC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,SAAS;AAAA,MACP,MAAM;AAAA,MACN,UAAW;AAAE,eAAOC,qBAAM,gBAAiB;AAAA,MAAG;AAAA,IAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAW;AAAE,eAAOA,qBAAM,gBAAiB;AAAA,MAAG;AAAA,IAC/C;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAU,MAAM;AACd,eAAOC,iBAAY,aAAC,SAAS,IAAI;AAAA,MAClC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IACjB;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,OAAQ;AACN,aAAO,KAAK,YAAY,gBAAgB;AAAA,IACzC;AAAA,IAED,cAAe;AACb,YAAM,cAAc;AAAA,QAClB,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,QACT,MAAM;AAAA;AAGR,aAAO;AAAA,QACL;AAAA,QACA,YAAY,KAAK,IAAI;AAAA,QACrB;AAAA,UACE,uBAAuB,KAAK;AAAA,UAC5B,oBAAoB,KAAK;AAAA,QAC1B;AAAA;IAEJ;AAAA,IAED,wBAAyB;AACvB,UAAI,KAAK,oBAAoB,GAAI,QAAO;AAExC,aAAO,yBAAyB,KAAK,eAAe;AAAA,iCACzB,KAAK,cAAc;AAAA,IAC/C;AAAA,EACF;AAAA,EAED,UAAW;AACT,QAAI,KAAK,WAAW;AAClB,WAAK,kBAAiB;AAAA,IACxB;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACP,UAAW,GAAG;AACZ,UAAI,KAAK,WAAW;AAClB,aAAK,qBAAqB,CAAC;AAAA,MAC7B;AAAA,IACD;AAAA,EACF;AACH~~;;;;;;0BArPEC~~,IA4CQ,mBAAA,SAAA;AAAA,IA3CL,~~0BAAO~~,SAAW,WAAA;AAAA,IAClB,~~0BAAO~~,SAAqB,qBAAA;AAAA,IAC5B~~,+DAAa~~,SAAS,aAAA,SAAA,UAAA,GAAA,IAAA,GAAA,CAAA,KAAA,CAAA;AAAA;IAEvBC,IAAAA,mBAsCM,OAAA;AAAA,MArCJ,~~OAAKC~~,IAAAA,eAAA,~~CAAC~~,oBACE,OAAW,WAAA,CAAA;AAAA,MAClB,MAAM,SAAI;AAAA,MACV,mBAAiB,OAAO;AAAA,MACxB,oBAAkB,OAAS;AAAA;OAGnB,OAAQ,~~6BADjBC~~,IAMiB,YAAA,2BAAA;AAAA;~~QAJd~~,MAAM,OAAI;AAAA;~~6BAGX~~,MAAoB;AAAA,UAApBC,eAAoB,KAAA,QAAA,MAAA;AAAA~~;;;MAEtBC~~,IAAAA,YAYoB,8BAAA;AAAA,QAXjB,YAAU,OAAO;AAAA,QACjB,cAAY,OAAS;AAAA,QACrB,OAAO,OAAK;AAAA;QAEF,2BAGT,MAA6B;AAAA,~~UAA7BD~~,eAA6B,KAAA,QAAA,eAAA;AAAA;~~6BAG/B~~,MAAQ;AAAA,~~UAARA~~,eAAQ,KAAA,QAAA,SAAA;AAAA~~;;;MAEVC~~,IAAAA,YAUmB,6BAAA;AAAA,QAThB,eAAa,OAAU;AAAA,QACvB,cAAY,OAAS;AAAA,QACrB,sBAAoB,OAAgB;AAAA,QACpC,yBAAuB,KAAmB;AAAA,QAC1C,+BAA6B,KAAwB;AAAA,QACrD,+CAAO,KAAK,MAAA,OAAA;AAAA;~~6BAGb~~,MAAsB;AAAA,~~UAAtBD~~,eAAsB,KAAA,QAAA,QAAA;AAAA~~;;;;;;;;~~"}
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 >\n <!-- @slot Slot for custom icon -->\n <slot name=\"icon\" />\n </dt-notice-icon>\n <dt-notice-content\n :title-id=\"titleId\"\n :content-id=\"contentId\"\n :title=\"title\"\n >\n <template #titleOverride>\n <!-- eslint-disable-next-line max-len -->\n <!-- @slot Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the \"title\" prop. -->\n <slot name=\"titleOverride\" />\n </template>\n <!-- @slot the main textual content of the banner -->\n <slot />\n </dt-notice-content>\n <dt-notice-action\n :hide-action=\"hideAction\"\n :hide-close=\"hideClose\"\n :close-button-props=\"closeButtonProps\"\n :visually-hidden-close=\"visuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n @close=\"$emit('close')\"\n >\n <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n <slot name=\"action\" />\n </dt-notice-action>\n </div>\n </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport Modal from '@/common/mixins/modal';\nimport utils from '@/common/utils';\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","_createElementBlock","_normalizeClass","_normalizeStyle","_withKeys","_createElementVNode","_createBlock","_withCtx","_renderSlot","_createCommentVNode","_createVNode"],"mappings":"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"}

package/dist/vue3/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 >\n <!-- @slot Slot for custom icon -->\n <slot name=\"icon\" />\n </dt-notice-icon>\n <dt-notice-content\n :title-id=\"titleId\"\n :content-id=\"contentId\"\n :title=\"title\"\n >\n <template #titleOverride>\n <!-- eslint-disable-next-line max-len -->\n <!-- @slot Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the \"title\" prop. -->\n <slot name=\"titleOverride\" />\n </template>\n <!-- @slot the main textual content of the banner -->\n <slot />\n </dt-notice-content>\n <dt-notice-action\n :hide-action=\"hideAction\"\n :hide-close=\"hideClose\"\n :close-button-props=\"closeButtonProps\"\n :visually-hidden-close=\"visuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n @close=\"$emit('close')\"\n >\n <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n <slot name=\"action\" />\n </dt-notice-action>\n </div>\n </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport Modal from '@/common/mixins/modal';\nimport utils from '@/common/utils';\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":["_createElementBlock","~~_createElementVNode~~","~~_normalizeClass~~","_createBlock","_renderSlot","_createVNode"],"mappings":";;;;;;;;;AA4DA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,QAAQ,CAAC,OAAO,sBAAsB;AAAA,EAEtC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,SAAS;AAAA,MACP,MAAM;AAAA,MACN,UAAW;AAAE,eAAO,MAAM,gBAAiB;AAAA,MAAG;AAAA,IAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAW;AAAE,eAAO,MAAM,gBAAiB;AAAA,MAAG;AAAA,IAC/C;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAU,MAAM;AACd,eAAO,aAAa,SAAS,IAAI;AAAA,MAClC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IACjB;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,OAAQ;AACN,aAAO,KAAK,YAAY,gBAAgB;AAAA,IACzC;AAAA,IAED,cAAe;AACb,YAAM,cAAc;AAAA,QAClB,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,QACT,MAAM;AAAA;AAGR,aAAO;AAAA,QACL;AAAA,QACA,YAAY,KAAK,IAAI;AAAA,QACrB;AAAA,UACE,uBAAuB,KAAK;AAAA,UAC5B,oBAAoB,KAAK;AAAA,QAC1B;AAAA;IAEJ;AAAA,IAED,wBAAyB;AACvB,UAAI,KAAK,oBAAoB,GAAI,QAAO;AAExC,aAAO,yBAAyB,KAAK,eAAe;AAAA,iCACzB,KAAK,cAAc;AAAA,IAC/C;AAAA,EACF;AAAA,EAED,UAAW;AACT,QAAI,KAAK,WAAW;AAClB,WAAK,kBAAiB;AAAA,IACxB;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACP,UAAW,GAAG;AACZ,UAAI,KAAK,WAAW;AAClB,aAAK,qBAAqB,CAAC;AAAA,MAC7B;AAAA,IACD;AAAA,EACF;AACH~~;;;;;;sBArPEA~~,mBA4CQ,SAAA;AAAA,IA3CL,~~sBAAO~~,SAAW,WAAA;AAAA,IAClB,~~sBAAO~~,SAAqB,qBAAA;AAAA,IAC5B,~~2DAAa~~,SAAS,aAAA,SAAA,UAAA,GAAA,IAAA,GAAA,CAAA,KAAA,CAAA;AAAA;IAEvBC,mBAsCM,OAAA;AAAA,MArCJ,~~OAAKC~~,eAAA,~~CAAC~~,oBACE,OAAW,WAAA,CAAA;AAAA,MAClB,MAAM,SAAI;AAAA,MACV,mBAAiB,OAAO;AAAA,MACxB,oBAAkB,OAAS;AAAA;OAGnB,OAAQ,~~yBADjBC~~,YAMiB,2BAAA;AAAA;~~QAJd~~,MAAM,OAAI;AAAA;~~yBAGX~~,MAAoB;AAAA,UAApBC,WAAoB,KAAA,QAAA,MAAA;AAAA~~;;;MAEtBC~~,YAYoB,8BAAA;AAAA,QAXjB,YAAU,OAAO;AAAA,QACjB,cAAY,OAAS;AAAA,QACrB,OAAO,OAAK;AAAA;QAEF,uBAGT,MAA6B;AAAA,~~UAA7BD~~,WAA6B,KAAA,QAAA,eAAA;AAAA;~~yBAG/B~~,MAAQ;AAAA,~~UAARA~~,WAAQ,KAAA,QAAA,SAAA;AAAA~~;;;MAEVC~~,YAUmB,6BAAA;AAAA,QAThB,eAAa,OAAU;AAAA,QACvB,cAAY,OAAS;AAAA,QACrB,sBAAoB,OAAgB;AAAA,QACpC,yBAAuB,KAAmB;AAAA,QAC1C,+BAA6B,KAAwB;AAAA,QACrD,+CAAO,KAAK,MAAA,OAAA;AAAA;~~yBAGb~~,MAAsB;AAAA,~~UAAtBD~~,WAAsB,KAAA,QAAA,QAAA;AAAA~~;;;;;;;~~"}
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 >\n <!-- @slot Slot for custom icon -->\n <slot name=\"icon\" />\n </dt-notice-icon>\n <dt-notice-content\n :title-id=\"titleId\"\n :content-id=\"contentId\"\n :title=\"title\"\n >\n <template #titleOverride>\n <!-- eslint-disable-next-line max-len -->\n <!-- @slot Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the \"title\" prop. -->\n <slot name=\"titleOverride\" />\n </template>\n <!-- @slot the main textual content of the banner -->\n <slot />\n </dt-notice-content>\n <dt-notice-action\n :hide-action=\"hideAction\"\n :hide-close=\"hideClose\"\n :close-button-props=\"closeButtonProps\"\n :visually-hidden-close=\"visuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n @close=\"$emit('close')\"\n >\n <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n <slot name=\"action\" />\n </dt-notice-action>\n </div>\n </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport Modal from '@/common/mixins/modal';\nimport utils from '@/common/utils';\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":["_createElementBlock","_normalizeClass","_normalizeStyle","_withKeys","_createElementVNode","_createBlock","_withCtx","_renderSlot","_createCommentVNode","_createVNode"],"mappings":"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"}

package/dist/vue3/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","_createElementBlock","_normalizeClass","_createVNode","_mergeProps","_renderSlot"],"mappings":";;;;;;AA4BA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAA;AAAAA,EACD;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,mCAAAC,sBAAiC;AAAA;EAEpC;AAAA,EAED,UAAU;AAAA,IACR,WAAY;AACV,aAAO,KAAK,WAAW,KAAKC;IAC7B;AAAA,IAED,eAAgB;AACd,aAAO,CAAC,CAAC,KAAK;AAAA,IACf;AAAA,IAED,cAAe;AACb,aAAO,KAAK,WAAW,aAAa;AAAA,IACrC;AAAA,EACF;AACH;;;0BAjFEC,IAmBK,mBAAA,MAAA;AAAA,IAlBH,WAAQ;AAAA,IACP,~~OAAKC~~,IAAAA,eAAA;AAAA;~~MAA0C~~,EAAA,CAAA,MAAA,iCAAiC,GAAG,OAAQ,SAAA;AAAA;;IAK5FC,IAAA,YAWU,oBAXVC,eAWU;AAAA,MAVP,MAAM,SAAQ;AAAA,MACd,UAAU,SAAY;AAAA,MACtB,gBAAc,SAAW;AAAA,MAC1B,WAAQ;AAAA,OACA,KAAM,MAAA,GAAA;AAAA,~~2BAGd~~,MAEO;AAAA,QAFPC,IAAAA,WAEO,4BAFP,MAEO;AAAA,~~kDADF~~,OAAK,KAAA,GAAA,CAAA;AAAA~~;;;;;;;;~~"}
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","_createElementBlock","_normalizeClass","_createVNode","_mergeProps","_withCtx","_renderSlot","_createTextVNode","_toDisplayString"],"mappings":";;;;;;AA4BA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAA;AAAAA,EACD;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,mCAAAC,sBAAiC;AAAA;EAEpC;AAAA,EAED,UAAU;AAAA,IACR,WAAY;AACV,aAAO,KAAK,WAAW,KAAKC;IAC7B;AAAA,IAED,eAAgB;AACd,aAAO,CAAC,CAAC,KAAK;AAAA,IACf;AAAA,IAED,cAAe;AACb,aAAO,KAAK,WAAW,aAAa;AAAA,IACrC;AAAA,EACF;AACH;;;0BAjFEC,IAmBK,mBAAA,MAAA;AAAA,IAlBH,WAAQ;AAAA,IACP,OAHLC,IAAAA,eAAA;AAAA;MAGoD,EAAA,CAAA,MAAA,iCAAiC,GAAG,OAAQ,SAAA;AAAA;;IAK5FC,IAAA,YAWU,oBAXVC,eAWU;AAAA,MAVP,MAAM,SAAQ;AAAA,MACd,UAAU,SAAY;AAAA,MACtB,gBAAc,SAAW;AAAA,MAC1B,WAAQ;AAAA,OACA,KAAM,MAAA,GAAA;AAAA,MAbpB,SAAAC,IAAA,QAgBM,MAEO;AAAA,QAFPC,IAAAA,WAEO,4BAFP,MAEO;AAAA,UAlBbC,IAAAA,gBAAAC,IAAAA,gBAiBW,OAAK,KAAA,GAAA,CAAA;AAAA;;MAjBhB,GAAA;AAAA;;;;;"}

package/dist/vue3/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":["_createElementBlock","_normalizeClass","_createVNode","_mergeProps","_renderSlot"],"mappings":";;;;;AA4BA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AAAA,EAED,UAAU;AAAA,IACR,WAAY;AACV,aAAO,KAAK,WAAW,KAAK;AAAA,IAC7B;AAAA,IAED,eAAgB;AACd,aAAO,CAAC,CAAC,KAAK;AAAA,IACf;AAAA,IAED,cAAe;AACb,aAAO,KAAK,WAAW,aAAa;AAAA,IACrC;AAAA,EACF;AACH;;;sBAjFEA,mBAmBK,MAAA;AAAA,IAlBH,WAAQ;AAAA,IACP,~~OAAKC~~,eAAA;AAAA;~~MAA0C~~,EAAA,CAAA,MAAA,iCAAiC,GAAG,OAAQ,SAAA;AAAA;;IAK5FC,YAWU,oBAXVC,WAWU;AAAA,MAVP,MAAM,SAAQ;AAAA,MACd,UAAU,SAAY;AAAA,MACtB,gBAAc,SAAW;AAAA,MAC1B,WAAQ;AAAA,OACA,KAAM,MAAA,GAAA;AAAA,~~uBAGd~~,MAEO;AAAA,QAFPC,WAEO,4BAFP,MAEO;AAAA,~~0CADF~~,OAAK,KAAA,GAAA,CAAA;AAAA~~;;;;;;;~~"}
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":["_createElementBlock","_normalizeClass","_createVNode","_mergeProps","_withCtx","_renderSlot","_createTextVNode","_toDisplayString"],"mappings":";;;;;AA4BA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AAAA,EAED,UAAU;AAAA,IACR,WAAY;AACV,aAAO,KAAK,WAAW,KAAK;AAAA,IAC7B;AAAA,IAED,eAAgB;AACd,aAAO,CAAC,CAAC,KAAK;AAAA,IACf;AAAA,IAED,cAAe;AACb,aAAO,KAAK,WAAW,aAAa;AAAA,IACrC;AAAA,EACF;AACH;;;sBAjFEA,mBAmBK,MAAA;AAAA,IAlBH,WAAQ;AAAA,IACP,OAHLC,eAAA;AAAA;MAGoD,EAAA,CAAA,MAAA,iCAAiC,GAAG,OAAQ,SAAA;AAAA;;IAK5FC,YAWU,oBAXVC,WAWU;AAAA,MAVP,MAAM,SAAQ;AAAA,MACd,UAAU,SAAY;AAAA,MACtB,gBAAc,SAAW;AAAA,MAC1B,WAAQ;AAAA,OACA,KAAM,MAAA,GAAA;AAAA,MAbpB,SAAAC,QAgBM,MAEO;AAAA,QAFPC,WAEO,4BAFP,MAEO;AAAA,UAlBbC,gBAAAC,gBAiBW,OAAK,KAAA,GAAA,CAAA;AAAA;;MAjBhB,GAAA;AAAA;;;;"}

package/dist/vue3/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 />\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","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_openBlock","_Fragment","_renderList","_createBlock","_mergeProps"],"mappings":";;;;;;AAiCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,kBAAAA;AAAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,SAAUC,cAAa;AACrB,eAAOA,aAAY,MAAM,CAAC,EAAE,MAAM,YAAY;AAC5C,iBAAO,SAAS,UAAa,UAAU;AAAA,QACzC,CAAC;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,qCACLC,sBAA6B;AAAA;EAEhC;AAAA,EAED,SAAS;AAAA,IACP,qBAAsB,OAAO;AAC3B,aAAO,oBAAoB,KAAK,IAAIC,aAAAA,QAAM,gBAAiB,CAAA;AAAA,IAC5D;AAAA,EACF;AACH~~;;;;0BAlFEC~~,IAmBM,mBAAA,OAAA;AAAA,IAlBH,cAAY,OAAS;AAAA,IACtB,WAAQ;AAAA,IACP,~~OAAKC~~,IAAAA,eAAA;AAAA;~~MAAoC~~,EAAA,CAAA,MAAA,6BAA6B,GAAG,OAAQ,SAAA;AAAA;;IAKlFC,IAUK,mBAAA,MAAA,MAAA;AAAA,MARHC,IAAAA,WAOO,4BAPP,MAOO;AAAA,SANLC,IAAAA,UAAA,IAAA,GAAAJ,IAAA,mBAKEK,~~cAJwB~~,~~MAAAC~~,~~IAAA,~~WAAA,OAAA,~~aAAhB~~,~~CAAA~~,MAAM,UAAK;AADrB,iBAAAF,cAAA,GAAAG,gBAKE,+BALFC,IAAAA,WAKE;AAAA,YAHC,KAAK,SAAoB,qBAAC,KAAK;AAAA,YAC/B,UAAU,OAAQ;AAAA,aACX,IAAI,GAAA,MAAA,IAAA,CAAA,UAAA,CAAA;AAAA~~;;;;;;;~~"}
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 />\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","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_openBlock","_Fragment","_renderList","_createBlock","_mergeProps"],"mappings":";;;;;;AAiCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,kBAAAA;AAAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,SAAUC,cAAa;AACrB,eAAOA,aAAY,MAAM,CAAC,EAAE,MAAM,YAAY;AAC5C,iBAAO,SAAS,UAAa,UAAU;AAAA,QACzC,CAAC;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,qCACLC,sBAA6B;AAAA;EAEhC;AAAA,EAED,SAAS;AAAA,IACP,qBAAsB,OAAO;AAC3B,aAAO,oBAAoB,KAAK,IAAIC,aAAAA,QAAM,gBAAiB,CAAA;AAAA,IAC5D;AAAA,EACF;AACH;AAnFA,MAAA,aAAA,CAAA,YAAA;;;0BACEC,IAmBM,mBAAA,OAAA;AAAA,IAlBH,cAAY,OAAS;AAAA,IACtB,WAAQ;AAAA,IACP,OAJLC,IAAAA,eAAA;AAAA;MAI8C,EAAA,CAAA,MAAA,6BAA6B,GAAG,OAAQ,SAAA;AAAA;;IAKlFC,IAUK,mBAAA,MAAA,MAAA;AAAA,MARHC,IAAAA,WAOO,4BAPP,MAOO;AAAA,SANLC,IAAAA,UAAA,IAAA,GAAAJ,IAAA,mBAKEK,oBAjBVC,IAakC,WAAA,OAAA,aAblC,CAakB,MAAM,UAAK;AADrB,iBAAAF,cAAA,GAAAG,gBAKE,+BALFC,IAAAA,WAKE;AAAA,YAHC,KAAK,SAAoB,qBAAC,KAAK;AAAA,YAC/B,UAAU,OAAQ;AAAA,aACX,IAAI,GAAA,MAAA,IAAA,CAAA,UAAA,CAAA;AAAA;;;EAhBtB,GAAA,IAAA,UAAA;;;;"}

package/dist/vue3/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 />\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","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_openBlock","_Fragment","_renderList","_createBlock","_mergeProps"],"mappings":";;;;;AAiCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,SAAUA,cAAa;AACrB,eAAOA,aAAY,MAAM,CAAC,EAAE,MAAM,YAAY;AAC5C,iBAAO,SAAS,UAAa,UAAU;AAAA,QACzC,CAAC;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AAAA,EAED,SAAS;AAAA,IACP,qBAAsB,OAAO;AAC3B,aAAO,oBAAoB,KAAK,IAAI,MAAM,gBAAiB,CAAA;AAAA,IAC5D;AAAA,EACF;AACH~~;;;;sBAlFEC~~,mBAmBM,OAAA;AAAA,IAlBH,cAAY,OAAS;AAAA,IACtB,WAAQ;AAAA,IACP,~~OAAKC~~,eAAA;AAAA;~~MAAoC~~,EAAA,CAAA,MAAA,6BAA6B,GAAG,OAAQ,SAAA;AAAA;;IAKlFC,mBAUK,MAAA,MAAA;AAAA,MARHC,WAOO,4BAPP,MAOO;AAAA,SANLC,UAAA,IAAA,GAAAJ,mBAKEK,~~UAJwB~~,~~MAAAC~~,~~WAAA,~~OAAA,~~aAAhB~~,~~CAAA~~,MAAM,UAAK;AADrB,iBAAAF,UAAA,GAAAG,YAKE,+BALFC,WAKE;AAAA,YAHC,KAAK,SAAoB,qBAAC,KAAK;AAAA,YAC/B,UAAU,OAAQ;AAAA,aACX,IAAI,GAAA,MAAA,IAAA,CAAA,UAAA,CAAA;AAAA~~;;;;;;~~"}
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 />\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","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_openBlock","_Fragment","_renderList","_createBlock","_mergeProps"],"mappings":";;;;;AAiCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,SAAUA,cAAa;AACrB,eAAOA,aAAY,MAAM,CAAC,EAAE,MAAM,YAAY;AAC5C,iBAAO,SAAS,UAAa,UAAU;AAAA,QACzC,CAAC;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AAAA,EAED,SAAS;AAAA,IACP,qBAAsB,OAAO;AAC3B,aAAO,oBAAoB,KAAK,IAAI,MAAM,gBAAiB,CAAA;AAAA,IAC5D;AAAA,EACF;AACH;AAnFA,MAAA,aAAA,CAAA,YAAA;;;sBACEC,mBAmBM,OAAA;AAAA,IAlBH,cAAY,OAAS;AAAA,IACtB,WAAQ;AAAA,IACP,OAJLC,eAAA;AAAA;MAI8C,EAAA,CAAA,MAAA,6BAA6B,GAAG,OAAQ,SAAA;AAAA;;IAKlFC,mBAUK,MAAA,MAAA;AAAA,MARHC,WAOO,4BAPP,MAOO;AAAA,SANLC,UAAA,IAAA,GAAAJ,mBAKEK,gBAjBVC,WAakC,OAAA,aAblC,CAakB,MAAM,UAAK;AADrB,iBAAAF,UAAA,GAAAG,YAKE,+BALFC,WAKE;AAAA,YAHC,KAAK,SAAoB,qBAAC,KAAK;AAAA,YAC/B,UAAU,OAAQ;AAAA,aACX,IAAI,GAAA,MAAA,IAAA,CAAA,UAAA,CAAA;AAAA;;;EAhBtB,GAAA,IAAA,UAAA;;;"}