@dialpad/dialtone-vue 3.209.0 → 3.210.0-next.2

package/dist/lib/contact-centers-row/contact-centers-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"contact-centers-row.js","sources":["../../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-recipe-leftbar-row__container',\n      { 'd-recipe-leftbar-row__container--off-duty': $slots.timer },\n    ]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <div\n      :class=\"leftbarContactCentersRowClasses\"\n      data-qa=\"dt-recipe-contact-centers-row\"\n    >\n      <a\n        class=\"d-recipe-leftbar-row__primary\"\n        :data-qa=\"$attrs['data-qa'] ?? 'd-recipe-leftbar-row-link'\"\n        :aria-label=\"getAriaLabel\"\n        :title=\"description\"\n        :href=\"$attrs.href ?? 'javascript:void(0)'\"\n        v-bind=\"removeClassStyleAttrs($attrs)\"\n        v-on=\"contactRowListeners\"\n        @click=\"$emit('click', $event)\"\n      >\n        <div class=\"d-recipe-leftbar-row__alpha\">\n          <dt-icon-headphones\n            size=\"300\"\n            data-qa=\"dt-recipe-leftbar-row-icon\"\n          />\n        </div>\n        <div\n          class=\"d-recipe-leftbar-row__label\"\n          :style=\"`flex-basis: ${labelWidth}`\"\n        >\n          <dt-emoji-text-wrapper\n            class=\"d-recipe-leftbar-row__description\"\n            data-qa=\"dt-recipe-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </div>\n      </a>\n      <div\n        v-if=\"!hideActions\"\n        class=\"d-recipe-leftbar-row__omega\"\n      >\n        <slot name=\"right\" />\n        <div class=\"d-recipe-leftbar-row__action-container\">\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            class=\"d-recipe-leftbar-row__unread-badge\"\n            data-qa=\"dt-recipe-leftbar-row-unread-badge\"\n            kind=\"count\"\n            type=\"bulletin\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-button\n            class=\"d-recipe-leftbar-row__action\"\n            data-qa=\"dt-recipe-leftbar-row-action-button\"\n            :aria-label=\"menuButtonLabel\"\n            :title=\"menuButtonLabel\"\n            importance=\"clear\"\n            size=\"xs\"\n            circle\n            @click.stop=\"$emit('click-menu', $event)\"\n          >\n            <template #icon>\n              <dt-icon-chevron-down size=\"100\" />\n            </template>\n          </dt-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"d-recipe-leftbar-row__bottom\">\n      <slot name=\"timer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { extractVueListeners, safeConcatStrings, removeClassStyleAttrs, returnFirstEl, addClassStyleAttrs } from '@/common/utils';\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport { DtEmojiTextWrapper } from '@/components/emoji_text_wrapper';\nimport { DtIconChevronDown, DtIconHeadphones } from '@dialpad/dialtone-icons/vue3';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeContactCentersRow',\n\n  components: {\n    DtButton,\n    DtBadge,\n    DtEmojiTextWrapper,\n    DtIconHeadphones,\n    DtIconChevronDown,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text displayed next to the icon. Required.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Making this true will hide the unread count badge, the chevron button, and the right slot\n     */\n    hideActions: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages, could be a string to support '99+'\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n      validator (value) {\n        if (!value) return true;\n        return /^\\d+\\+?$/.test(value);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event on the row itself\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Menu button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click-menu',\n  ],\n\n  data () {\n    return {\n      labelWidth: 'auto',\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    leftbarContactCentersRowClasses () {\n      return [\n        'd-recipe-leftbar-row',\n        'd-recipe-leftbar-row--contact-centers',\n        {\n          'd-recipe-leftbar-row__unread-count': this.showUnreadCount,\n          'd-recipe-leftbar-row--selected': this.selected,\n        },\n      ];\n    },\n\n    getAriaLabel () {\n      const count = isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([\n          this.description,\n          this.i18n.$t('DIALTONE_UNREAD_MESSAGE_COUNT_TEXT', { unreadCount: count }),\n        ]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount;\n    },\n\n    menuButtonLabel () {\n      return this.i18n.$t('DIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL');\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      async handler () {\n        await this.$nextTick();\n        this.adjustLabelWidth();\n      },\n    },\n  },\n\n  mounted () {\n    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n    this.resizeObserver.observe(returnFirstEl(this.$el));\n    this.adjustLabelWidth();\n  },\n\n  beforeUnmount: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n\n    adjustLabelWidth () {\n      const labelWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 12;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtBadge","DtEmojiTextWrapper","DtIconHeadphones","DtIconChevronDown","value","DialtoneLocalization","count","safeConcatStrings","extractVueListeners","returnFirstEl","removeClassStyleAttrs","addClassStyleAttrs","labelWidth","_b","_a","omegaWidth","_d","_c","alphaWidth","_f","_e","paddings","_hoisted_2","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_mergeProps","_ctx","$options","_createElementVNode","$props","_toHandlers","_cache","$event","_createVNode","_component_dt_icon_headphones","$data","_component_dt_emoji_text_wrapper","_hoisted_3","_renderSlot","_createBlock","_component_dt_badge","_component_dt_button","_withModifiers","_component_dt_icon_chevron_down"],"mappings":"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"}
+{"version":3,"file":"contact-centers-row.js","sources":["../../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-recipe-leftbar-row__container',\n      { 'd-recipe-leftbar-row__container--off-duty': $slots.timer },\n    ]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <div\n      :class=\"leftbarContactCentersRowClasses\"\n      data-qa=\"dt-recipe-contact-centers-row\"\n    >\n      <a\n        class=\"d-recipe-leftbar-row__primary\"\n        :data-qa=\"$attrs['data-qa'] ?? 'd-recipe-leftbar-row-link'\"\n        :aria-label=\"getAriaLabel\"\n        :title=\"description\"\n        :href=\"$attrs.href ?? 'javascript:void(0)'\"\n        v-bind=\"removeClassStyleAttrs($attrs)\"\n        v-on=\"contactRowListeners\"\n        @click=\"$emit('click', $event)\"\n      >\n        <div class=\"d-recipe-leftbar-row__alpha\">\n          <dt-icon-headphones\n            size=\"300\"\n            data-qa=\"dt-recipe-leftbar-row-icon\"\n          />\n        </div>\n        <div\n          class=\"d-recipe-leftbar-row__label\"\n          :style=\"`flex-basis: ${labelWidth}`\"\n        >\n          <dt-emoji-text-wrapper\n            class=\"d-recipe-leftbar-row__description\"\n            data-qa=\"dt-recipe-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </div>\n      </a>\n      <div\n        v-if=\"!hideActions\"\n        class=\"d-recipe-leftbar-row__omega\"\n      >\n        <!-- @slot Slot for end content -->\n        <slot\n          v-if=\"$slots.end\"\n          name=\"end\"\n        />\n        <!-- @slot @deprecated Use end -->\n        <slot\n          v-else\n          name=\"right\"\n        />\n        <div class=\"d-recipe-leftbar-row__action-container\">\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            class=\"d-recipe-leftbar-row__unread-badge\"\n            data-qa=\"dt-recipe-leftbar-row-unread-badge\"\n            kind=\"count\"\n            type=\"bulletin\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-button\n            class=\"d-recipe-leftbar-row__action\"\n            data-qa=\"dt-recipe-leftbar-row-action-button\"\n            :aria-label=\"menuButtonLabel\"\n            :title=\"menuButtonLabel\"\n            importance=\"clear\"\n            size=\"xs\"\n            circle\n            @click.stop=\"$emit('click-menu', $event)\"\n          >\n            <template #icon>\n              <dt-icon-chevron-down size=\"100\" />\n            </template>\n          </dt-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"d-recipe-leftbar-row__bottom\">\n      <slot name=\"timer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { extractVueListeners, safeConcatStrings, removeClassStyleAttrs, returnFirstEl, addClassStyleAttrs } from '@/common/utils';\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport { DtEmojiTextWrapper } from '@/components/emoji_text_wrapper';\nimport { DtIconChevronDown, DtIconHeadphones } from '@dialpad/dialtone-icons/vue3';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeContactCentersRow',\n\n  components: {\n    DtButton,\n    DtBadge,\n    DtEmojiTextWrapper,\n    DtIconHeadphones,\n    DtIconChevronDown,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text displayed next to the icon. Required.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Making this true will hide the unread count badge, the chevron button, and the right slot\n     */\n    hideActions: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages, could be a string to support '99+'\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n      validator (value) {\n        if (!value) return true;\n        return /^\\d+\\+?$/.test(value);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event on the row itself\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Menu button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click-menu',\n  ],\n\n  data () {\n    return {\n      labelWidth: 'auto',\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    leftbarContactCentersRowClasses () {\n      return [\n        'd-recipe-leftbar-row',\n        'd-recipe-leftbar-row--contact-centers',\n        {\n          'd-recipe-leftbar-row__unread-count': this.showUnreadCount,\n          'd-recipe-leftbar-row--selected': this.selected,\n        },\n      ];\n    },\n\n    getAriaLabel () {\n      const count = isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([\n          this.description,\n          this.i18n.$t('DIALTONE_UNREAD_MESSAGE_COUNT_TEXT', { unreadCount: count }),\n        ]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount;\n    },\n\n    menuButtonLabel () {\n      return this.i18n.$t('DIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL');\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      async handler () {\n        await this.$nextTick();\n        this.adjustLabelWidth();\n      },\n    },\n  },\n\n  mounted () {\n    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n    this.resizeObserver.observe(returnFirstEl(this.$el));\n    this.adjustLabelWidth();\n  },\n\n  beforeUnmount: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n\n    adjustLabelWidth () {\n      const labelWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 12;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtBadge","DtEmojiTextWrapper","DtIconHeadphones","DtIconChevronDown","value","DialtoneLocalization","count","safeConcatStrings","extractVueListeners","returnFirstEl","removeClassStyleAttrs","addClassStyleAttrs","labelWidth","_b","_a","omegaWidth","_d","_c","alphaWidth","_f","_e","paddings","_hoisted_2","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_mergeProps","_ctx","$options","_createElementVNode","$props","_toHandlers","_cache","$event","_createVNode","_component_dt_icon_headphones","$data","_component_dt_emoji_text_wrapper","_hoisted_3","_renderSlot","_createBlock","_component_dt_badge","_component_dt_button","_withModifiers","_component_dt_icon_chevron_down"],"mappings":"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"}

package/dist/lib/contact-info/contact-info.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("../item-layout/item-layout.cjs"),u=require("../avatar/avatar.cjs"),e=require("vue"),f=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),m={compatConfig:{MODE:3},name:"DtRecipeContactInfo",components:{DtAvatar:u.default,DtItemLayout:d.default},props:{role:{type:String,default:""},showAvatar:{type:Boolean,default:!0},avatarSrc:{type:String,default:""},avatarSeed:{type:String,default:null},avatarFullName:{type:String,default:""},avatarSize:{type:String,default:"lg"},avatarLabelledBy:{type:String,default:""},avatarColor:{type:String,default:null},presence:{type:String,default:null},avatarList:{type:Array,default:null}},emits:["avatar-click"],methods:{avatarClick(){this.$emit("avatar-click")}}},_=["aria-labelledby"],v={key:0,class:"d-recipe-contact-info__avatars"},y={class:"d-recipe-contact-info__header","data-qa":"contact-info-header"},h={class:"d-recipe-contact-info__subtitle","data-qa":"contact-info-subtitle"},S={class:"d-recipe-contact-info__bottom","data-qa":"contact-info-bottom"},g={"data-qa":"contact-info-right"};function k(o,n,t,b,C,l){const c=e.resolveComponent("dt-avatar"),i=e.resolveComponent("dt-item-layout");return e.openBlock(),e.createBlock(i,{role:t.role,"data-qa":"contact-info",class:"d-recipe-contact-info","content-class":"d-recipe-contact-info__content","right-class":"d-recipe-contact-info__right",unstyled:""},e.createSlots({default:e.withCtx(()=>[e.createElementVNode("div",y,[e.renderSlot(o.$slots,"header")])]),subtitle:e.withCtx(()=>[e.createElementVNode("div",h,[e.renderSlot(o.$slots,"subtitle")])]),_:2},[t.showAvatar?{name:"left",fn:e.withCtx(()=>[e.createElementVNode("button",{class:"d-recipe-contact-info__left","data-qa":"contact-info-left","aria-labelledby":t.avatarLabelledBy,onClick:n[0]||(n[0]=(...a)=>l.avatarClick&&l.avatarClick(...a))},[t.avatarList?(e.openBlock(),e.createElementBlock("span",v,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.avatarList,(a,r)=>(e.openBlock(),e.createBlock(c,{key:r,size:t.avatarSize,seed:a.seed,"full-name":a.fullName,"image-src":a.src,"image-alt":"","overlay-text":a.text,"avatar-class":[{"d-recipe-contact-info__avatar-stacked":r>0,"d-recipe-contact-info__avatar-halo":!!a.halo}]},e.createSlots({icon:e.withCtx(({iconSize:s})=>[e.renderSlot(o.$slots,"avatarIcon",{iconSize:s})]),_:2},[a.icon?{name:"overlayIcon",fn:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.icon)))]),key:"0"}:void 0]),1032,["size","seed","full-name","image-src","overlay-text","avatar-class"]))),128))])):(e.openBlock(),e.createBlock(c,{key:1,size:t.avatarSize,"full-name":t.avatarFullName,"image-src":t.avatarSrc,"image-alt":"",seed:t.avatarSeed,color:t.avatarColor,presence:t.presence},{icon:e.withCtx(({iconSize:a})=>[e.renderSlot(o.$slots,"avatarIcon",{iconSize:a})]),_:3},8,["size","full-name","image-src","seed","color","presence"]))],8,_)]),key:"0"}:void 0,o.$slots.bottom?{name:"bottom",fn:e.withCtx(()=>[e.createElementVNode("div",S,[e.renderSlot(o.$slots,"bottom")])]),key:"1"}:void 0,o.$slots.right?{name:"right",fn:e.withCtx(()=>[e.createElementVNode("div",g,[e.renderSlot(o.$slots,"right")])]),key:"2"}:void 0]),1032,["role"])}const p=f._(m,[["render",k]]);exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("../item-layout/item-layout.cjs"),u=require("../avatar/avatar.cjs"),e=require("vue"),f=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),m={compatConfig:{MODE:3},name:"DtRecipeContactInfo",components:{DtAvatar:u.default,DtItemLayout:d.default},props:{role:{type:String,default:""},showAvatar:{type:Boolean,default:!0},avatarSrc:{type:String,default:""},avatarSeed:{type:String,default:null},avatarFullName:{type:String,default:""},avatarSize:{type:String,default:"lg"},avatarLabelledBy:{type:String,default:""},avatarColor:{type:String,default:null},presence:{type:String,default:null},avatarList:{type:Array,default:null}},emits:["avatar-click"],methods:{avatarClick(){this.$emit("avatar-click")}}},v=["aria-labelledby"],_={key:0,class:"d-recipe-contact-info__avatars"},y={class:"d-recipe-contact-info__header","data-qa":"contact-info-header"},k={class:"d-recipe-contact-info__subtitle","data-qa":"contact-info-subtitle"},S={class:"d-recipe-contact-info__bottom","data-qa":"contact-info-bottom"},h={"data-qa":"contact-info-right"};function g(t,n,a,p,C,l){const r=e.resolveComponent("dt-avatar"),i=e.resolveComponent("dt-item-layout");return e.openBlock(),e.createBlock(i,{role:a.role,"data-qa":"contact-info",class:"d-recipe-contact-info","content-class":"d-recipe-contact-info__content","end-class":"d-recipe-contact-info__right",unstyled:""},e.createSlots({default:e.withCtx(()=>[e.createElementVNode("div",y,[e.renderSlot(t.$slots,"header")])]),subtitle:e.withCtx(()=>[e.createElementVNode("div",k,[e.renderSlot(t.$slots,"subtitle")])]),_:2},[a.showAvatar?{name:"start",fn:e.withCtx(()=>[e.createElementVNode("button",{class:"d-recipe-contact-info__left","data-qa":"contact-info-left","aria-labelledby":a.avatarLabelledBy,onClick:n[0]||(n[0]=(...o)=>l.avatarClick&&l.avatarClick(...o))},[a.avatarList?(e.openBlock(),e.createElementBlock("span",_,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.avatarList,(o,c)=>(e.openBlock(),e.createBlock(r,{key:c,size:a.avatarSize,seed:o.seed,"full-name":o.fullName,"image-src":o.src,"image-alt":"","overlay-text":o.text,"avatar-class":[{"d-recipe-contact-info__avatar-stacked":c>0,"d-recipe-contact-info__avatar-halo":!!o.halo}]},e.createSlots({icon:e.withCtx(({iconSize:s})=>[e.renderSlot(t.$slots,"avatarIcon",{iconSize:s})]),_:2},[o.icon?{name:"overlayIcon",fn:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.icon)))]),key:"0"}:void 0]),1032,["size","seed","full-name","image-src","overlay-text","avatar-class"]))),128))])):(e.openBlock(),e.createBlock(r,{key:1,size:a.avatarSize,"full-name":a.avatarFullName,"image-src":a.avatarSrc,"image-alt":"",seed:a.avatarSeed,color:a.avatarColor,presence:a.presence},{icon:e.withCtx(({iconSize:o})=>[e.renderSlot(t.$slots,"avatarIcon",{iconSize:o})]),_:3},8,["size","full-name","image-src","seed","color","presence"]))],8,v)]),key:"0"}:void 0,t.$slots.blockEnd||t.$slots.bottom?{name:"blockEnd",fn:e.withCtx(()=>[e.createElementVNode("div",S,[t.$slots.blockEnd?e.renderSlot(t.$slots,"blockEnd",{key:0}):e.renderSlot(t.$slots,"bottom",{key:1})])]),key:"1"}:void 0,t.$slots.end||t.$slots.right?{name:"end",fn:e.withCtx(()=>[e.createElementVNode("div",h,[t.$slots.end?e.renderSlot(t.$slots,"end",{key:0}):e.renderSlot(t.$slots,"right",{key:1})])]),key:"2"}:void 0]),1032,["role"])}const b=f._(m,[["render",g]]);exports.default=b;
 //# sourceMappingURL=contact-info.cjs.map

package/dist/lib/contact-info/contact-info.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"contact-info.cjs","sources":["../../../recipes/item_layout/contact_info/contact_info.vue"],"sourcesContent":["<template>\n  <dt-item-layout\n    :role=\"role\"\n    data-qa=\"contact-info\"\n    class=\"d-recipe-contact-info\"\n    content-class=\"d-recipe-contact-info__content\"\n    right-class=\"d-recipe-contact-info__right\"\n    unstyled\n  >\n    <template\n      v-if=\"showAvatar\"\n      #left\n    >\n      <button\n        class=\"d-recipe-contact-info__left\"\n        data-qa=\"contact-info-left\"\n        :aria-labelledby=\"avatarLabelledBy\"\n        @click=\"avatarClick\"\n      >\n        <span\n          v-if=\"avatarList\"\n          class=\"d-recipe-contact-info__avatars\"\n        >\n          <dt-avatar\n            v-for=\"(avatar, index) in avatarList\"\n            :key=\"index\"\n            :size=\"avatarSize\"\n            :seed=\"avatar.seed\"\n            :full-name=\"avatar.fullName\"\n            :image-src=\"avatar.src\"\n            image-alt=\"\"\n            :overlay-text=\"avatar.text\"\n            :avatar-class=\"[\n              {\n                'd-recipe-contact-info__avatar-stacked': index > 0,\n                'd-recipe-contact-info__avatar-halo': !!avatar.halo,\n              },\n            ]\"\n          >\n            <template #icon=\"{ iconSize }\">\n              <!-- @slot Slot for avatar icon in a list -->\n              <slot\n                name=\"avatarIcon\"\n                :icon-size=\"iconSize\"\n              />\n            </template>\n            <template\n              v-if=\"avatar.icon\"\n              #overlayIcon\n            >\n              <component :is=\"avatar.icon\" />\n            </template>\n          </dt-avatar>\n        </span>\n        <dt-avatar\n          v-else\n          :size=\"avatarSize\"\n          :full-name=\"avatarFullName\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :seed=\"avatarSeed\"\n          :color=\"avatarColor\"\n          :presence=\"presence\"\n        >\n          <template #icon=\"{ iconSize }\">\n            <!-- @slot Slot for avatar icon in a list -->\n            <slot\n              name=\"avatarIcon\"\n              :icon-size=\"iconSize\"\n            />\n          </template>\n        </dt-avatar>\n      </button>\n    </template>\n    <template #default>\n      <div\n        class=\"d-recipe-contact-info__header\"\n        data-qa=\"contact-info-header\"\n      >\n        <!-- @slot Slot for header information -->\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <template #subtitle>\n      <div\n        class=\"d-recipe-contact-info__subtitle\"\n        data-qa=\"contact-info-subtitle\"\n      >\n        <!-- @slot Slot for subtitle information -->\n        <slot name=\"subtitle\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.bottom\"\n      #bottom\n    >\n      <div\n        class=\"d-recipe-contact-info__bottom\"\n        data-qa=\"contact-info-bottom\"\n      >\n        <!-- @slot Slot for information at the bottom -->\n        <slot name=\"bottom\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.right\"\n      #right\n    >\n      <div data-qa=\"contact-info-right\">\n        <!-- @slot Slot for the right content -->\n        <slot name=\"right\" />\n      </div>\n    </template>\n  </dt-item-layout>\n</template>\n\n<script>\nimport DtItemLayout from '@/components/item_layout/item_layout.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeContactInfo',\n\n  components: {\n    DtAvatar,\n    DtItemLayout,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Display avatar if `showAvatar` property is true.\n     */\n    showAvatar: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Optional avatar image url.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display in avatar if `avatarSrc` and `avatarIcon` are empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    avatarSize: {\n      type: String,\n      default: 'lg',\n    },\n\n    /**\n     * The aria-labelledby of the button containing avatars\n     */\n    avatarLabelledBy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar color to display if `avatarSrc` is empty.\n     */\n    avatarColor: {\n      type: String,\n      default: null,\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: null,\n    },\n\n    /**\n     * Showing multiple avatars in contact info.\n     * The props of array items are: <br>\n     * `src` - avatar image url (optional) <br>\n     * `fullName` - full name, used to extract initials to display in avatar<br>\n     *  if `avatarSrc` and `avatarIcon` are empty<br>\n     * `seed` - determines uniqueness of avatar background <br>\n     * `text` - text that overlays the avatar (optional) <br>\n     * `icon` - icon that overlays the avatar (optional) <br>\n     * `halo` - halo highlight around the avatar. boolean true/false\n     */\n    avatarList: {\n      type: Array,\n      default: null,\n    },\n  },\n\n  emits: ['avatar-click'],\n\n  methods: {\n    avatarClick () {\n      this.$emit('avatar-click');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtItemLayout","_hoisted_6","_createBlock","_component_dt_item_layout","$props","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$options","args","_openBlock","_createElementBlock","_hoisted_2","_Fragment","_renderList","avatar","index","_component_dt_avatar","_withCtx","iconSize","_resolveDynamicComponent","_hoisted_5"],"mappings":"2QA2HKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,sBAEN,WAAY,CACV,SAAAC,EAAAA,qBACAC,EAAAA,SASF,MAAO,CAIL,KAAM,CACJ,KAAM,OACN,QAAS,IAMX,WAAY,CACV,KAAM,QACN,QAAS,IAMX,UAAW,CACT,KAAM,OACN,QAAS,IAMX,WAAY,CACV,KAAM,OACN,QAAS,MAOX,eAAgB,CACd,KAAM,OACN,QAAS,IAOX,WAAY,CACV,KAAM,OACN,QAAS,MAMX,iBAAkB,CAChB,KAAM,OACN,QAAS,IAMX,YAAa,CACX,KAAM,OACN,QAAS,MASX,SAAU,CACR,KAAM,OACN,QAAS,MAcX,WAAY,CACV,KAAM,MACN,QAAS,OAIb,MAAO,CAAC,cAAc,EAEtB,QAAS,CACP,aAAe,CACb,KAAK,MAAM,cAAc,CAC3B,EAEJ,iCA3NU,MAAM,qCAuDR,MAAM,gCACN,UAAQ,0BASR,MAAM,kCACN,UAAQ,4BAYR,MAAM,gCACN,UAAQ,uBAWLC,EAAA,CAAA,UAAQ,oBAAoB,8HA9GrCC,EAAAA,YAmHiBC,EAAA,CAlHd,KAAMC,EAAA,KACP,UAAQ,eACR,MAAM,wBACN,gBAAc,iCACd,cAAY,+BACZ,SAAA,mBAmEW,kBACT,IAMM,CANNC,EAAAA,mBAMM,MANNC,EAMM,CADJC,aAAsBC,EAAA,OAAA,QAAA,MAIf,mBACT,IAMM,CANNH,EAAAA,mBAMM,MANNI,EAMM,CADJF,aAAwBC,EAAA,OAAA,UAAA,YAhFpBJ,EAAA,iBACL,oBAED,IA2DS,CA3DTC,EAAAA,mBA2DS,SAAA,CA1DP,MAAM,8BACN,UAAQ,oBACP,kBAAiBD,EAAA,iBACjB,4BAAOM,EAAA,aAAAA,EAAA,YAAA,GAAAC,CAAA,KAGAP,EAAA,YADRQ,EAAAA,YAAAC,EAAAA,mBAkCO,OAlCPC,EAkCO,EA9BLF,EAAAA,UAAA,EAAA,EAAAC,EAAAA,mBA6BYE,WAAA,KAAAC,EAAAA,WA5BgBZ,EAAA,WAAU,CAA5Ba,EAAQC,mBADlBhB,EAAAA,YA6BYiB,EAAA,CA3BT,IAAKD,EACL,KAAMd,EAAA,WACN,KAAMa,EAAO,KACb,YAAWA,EAAO,SAClB,YAAWA,EAAO,IACnB,YAAU,GACT,eAAcA,EAAO,KACrB,eAAY,0CAA6EC,EAAK,EAA8D,qCAAA,CAAA,CAAAD,EAAO,uBAOzJ,KAAIG,EAAAA,QAEb,CAGE,CALe,SAAAC,KAAQ,CAEzBd,EAAAA,WAGEC,EAAA,OAAA,aAAA,CADC,SAAWa,CAAQ,CAAA,UAIhBJ,EAAO,WACZ,2BAED,IAA+B,gBAA/Bf,EAAAA,YAA+BoB,EAAAA,wBAAfL,EAAO,IAAI,CAAA,6HAIjCf,EAAAA,YAiBYiB,EAAA,OAfT,KAAMf,EAAA,WACN,YAAWA,EAAA,eACX,YAAWA,EAAA,UACZ,YAAU,GACT,KAAMA,EAAA,WACN,MAAOA,EAAA,YACP,SAAUA,EAAA,WAEA,KAAIgB,EAAAA,QAEb,CAGE,CALe,SAAAC,KAAQ,CAEzBd,EAAAA,WAGEC,EAAA,OAAA,aAAA,CADC,SAAWa,CAAQ,CAAA,gGA2BtBb,EAAA,OAAO,aACZ,sBAED,IAMM,CANNH,EAAAA,mBAMM,MANNkB,EAMM,CADJhB,aAAsBC,EAAA,OAAA,QAAA,sBAKlBA,EAAA,OAAO,YACZ,qBAED,IAGM,CAHNH,EAAAA,mBAGM,MAHNJ,EAGM,CADJM,aAAqBC,EAAA,OAAA,OAAA"}
+{"version":3,"file":"contact-info.cjs","sources":["../../../recipes/item_layout/contact_info/contact_info.vue"],"sourcesContent":["<template>\n  <dt-item-layout\n    :role=\"role\"\n    data-qa=\"contact-info\"\n    class=\"d-recipe-contact-info\"\n    content-class=\"d-recipe-contact-info__content\"\n    end-class=\"d-recipe-contact-info__right\"\n    unstyled\n  >\n    <template\n      v-if=\"showAvatar\"\n      #start\n    >\n      <button\n        class=\"d-recipe-contact-info__left\"\n        data-qa=\"contact-info-left\"\n        :aria-labelledby=\"avatarLabelledBy\"\n        @click=\"avatarClick\"\n      >\n        <span\n          v-if=\"avatarList\"\n          class=\"d-recipe-contact-info__avatars\"\n        >\n          <dt-avatar\n            v-for=\"(avatar, index) in avatarList\"\n            :key=\"index\"\n            :size=\"avatarSize\"\n            :seed=\"avatar.seed\"\n            :full-name=\"avatar.fullName\"\n            :image-src=\"avatar.src\"\n            image-alt=\"\"\n            :overlay-text=\"avatar.text\"\n            :avatar-class=\"[\n              {\n                'd-recipe-contact-info__avatar-stacked': index > 0,\n                'd-recipe-contact-info__avatar-halo': !!avatar.halo,\n              },\n            ]\"\n          >\n            <template #icon=\"{ iconSize }\">\n              <!-- @slot Slot for avatar icon in a list -->\n              <slot\n                name=\"avatarIcon\"\n                :icon-size=\"iconSize\"\n              />\n            </template>\n            <template\n              v-if=\"avatar.icon\"\n              #overlayIcon\n            >\n              <component :is=\"avatar.icon\" />\n            </template>\n          </dt-avatar>\n        </span>\n        <dt-avatar\n          v-else\n          :size=\"avatarSize\"\n          :full-name=\"avatarFullName\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :seed=\"avatarSeed\"\n          :color=\"avatarColor\"\n          :presence=\"presence\"\n        >\n          <template #icon=\"{ iconSize }\">\n            <!-- @slot Slot for avatar icon in a list -->\n            <slot\n              name=\"avatarIcon\"\n              :icon-size=\"iconSize\"\n            />\n          </template>\n        </dt-avatar>\n      </button>\n    </template>\n    <template #default>\n      <div\n        class=\"d-recipe-contact-info__header\"\n        data-qa=\"contact-info-header\"\n      >\n        <!-- @slot Slot for header information -->\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <template #subtitle>\n      <div\n        class=\"d-recipe-contact-info__subtitle\"\n        data-qa=\"contact-info-subtitle\"\n      >\n        <!-- @slot Slot for subtitle information -->\n        <slot name=\"subtitle\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.blockEnd || $slots.bottom\"\n      #blockEnd\n    >\n      <div\n        class=\"d-recipe-contact-info__bottom\"\n        data-qa=\"contact-info-bottom\"\n      >\n        <!-- @slot Slot for block-end content -->\n        <slot\n          v-if=\"$slots.blockEnd\"\n          name=\"blockEnd\"\n        />\n        <!-- @slot @deprecated Use blockEnd -->\n        <slot\n          v-else\n          name=\"bottom\"\n        />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.end || $slots.right\"\n      #end\n    >\n      <div data-qa=\"contact-info-right\">\n        <!-- @slot Slot for the end content -->\n        <slot\n          v-if=\"$slots.end\"\n          name=\"end\"\n        />\n        <!-- @slot @deprecated Use end -->\n        <slot\n          v-else\n          name=\"right\"\n        />\n      </div>\n    </template>\n  </dt-item-layout>\n</template>\n\n<script>\nimport DtItemLayout from '@/components/item_layout/item_layout.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeContactInfo',\n\n  components: {\n    DtAvatar,\n    DtItemLayout,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Display avatar if `showAvatar` property is true.\n     */\n    showAvatar: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Optional avatar image url.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display in avatar if `avatarSrc` and `avatarIcon` are empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    avatarSize: {\n      type: String,\n      default: 'lg',\n    },\n\n    /**\n     * The aria-labelledby of the button containing avatars\n     */\n    avatarLabelledBy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar color to display if `avatarSrc` is empty.\n     */\n    avatarColor: {\n      type: String,\n      default: null,\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: null,\n    },\n\n    /**\n     * Showing multiple avatars in contact info.\n     * The props of array items are: <br>\n     * `src` - avatar image url (optional) <br>\n     * `fullName` - full name, used to extract initials to display in avatar<br>\n     *  if `avatarSrc` and `avatarIcon` are empty<br>\n     * `seed` - determines uniqueness of avatar background <br>\n     * `text` - text that overlays the avatar (optional) <br>\n     * `icon` - icon that overlays the avatar (optional) <br>\n     * `halo` - halo highlight around the avatar. boolean true/false\n     */\n    avatarList: {\n      type: Array,\n      default: null,\n    },\n  },\n\n  emits: ['avatar-click'],\n\n  methods: {\n    avatarClick () {\n      this.$emit('avatar-click');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtItemLayout","_hoisted_6","_createBlock","_component_dt_item_layout","$props","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$options","args","_openBlock","_createElementBlock","_hoisted_2","_Fragment","_renderList","avatar","index","_component_dt_avatar","_withCtx","iconSize","_resolveDynamicComponent","_hoisted_5"],"mappings":"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"}

package/dist/lib/contact-info/contact-info.js

@@ -1,13 +1,13 @@
-import g from "../item-layout/item-layout.js";
-import h from "../avatar/avatar.js";
-import { resolveComponent as m, openBlock as n, createBlock as i, createSlots as u, withCtx as o, createElementVNode as l, renderSlot as c, createElementBlock as _, Fragment as p, renderList as S, resolveDynamicComponent as k } from "vue";
-import { _ as b } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import k from "../item-layout/item-layout.js";
+import g from "../avatar/avatar.js";
+import { resolveComponent as m, openBlock as l, createBlock as i, createSlots as u, withCtx as o, createElementVNode as c, renderSlot as n, createElementBlock as v, Fragment as b, renderList as h, resolveDynamicComponent as p } from "vue";
+import { _ as S } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const C = {
   compatConfig: { MODE: 3 },
   name: "DtRecipeContactInfo",
   components: {
-    DtAvatar: h,
-    DtItemLayout: g
+    DtAvatar: g,
+    DtItemLayout: k
   },
   /* inheritAttrs: false is generally an option we want to set on library
     components. This allows any attributes passed in that are not recognized
@@ -105,91 +105,91 @@ const C = {
       this.$emit("avatar-click");
     }
   }
-}, z = ["aria-labelledby"], L = {
+}, z = ["aria-labelledby"], E = {
   key: 0,
   class: "d-recipe-contact-info__avatars"
-}, q = {
+}, L = {
   class: "d-recipe-contact-info__header",
   "data-qa": "contact-info-header"
-}, B = {
+}, q = {
   class: "d-recipe-contact-info__subtitle",
   "data-qa": "contact-info-subtitle"
-}, D = {
+}, B = {
   class: "d-recipe-contact-info__bottom",
   "data-qa": "contact-info-bottom"
-}, I = { "data-qa": "contact-info-right" };
-function A(a, r, t, N, w, s) {
-  const d = m("dt-avatar"), v = m("dt-item-layout");
-  return n(), i(v, {
-    role: t.role,
+}, D = { "data-qa": "contact-info-right" };
+function I(t, r, e, $, A, s) {
+  const d = m("dt-avatar"), y = m("dt-item-layout");
+  return l(), i(y, {
+    role: e.role,
     "data-qa": "contact-info",
     class: "d-recipe-contact-info",
     "content-class": "d-recipe-contact-info__content",
-    "right-class": "d-recipe-contact-info__right",
+    "end-class": "d-recipe-contact-info__right",
     unstyled: ""
   }, u({
     default: o(() => [
-      l("div", q, [
-        c(a.$slots, "header")
+      c("div", L, [
+        n(t.$slots, "header")
       ])
     ]),
     subtitle: o(() => [
-      l("div", B, [
-        c(a.$slots, "subtitle")
+      c("div", q, [
+        n(t.$slots, "subtitle")
       ])
     ]),
     _: 2
   }, [
-    t.showAvatar ? {
-      name: "left",
+    e.showAvatar ? {
+      name: "start",
       fn: o(() => [
-        l("button", {
+        c("button", {
           class: "d-recipe-contact-info__left",
           "data-qa": "contact-info-left",
-          "aria-labelledby": t.avatarLabelledBy,
-          onClick: r[0] || (r[0] = (...e) => s.avatarClick && s.avatarClick(...e))
+          "aria-labelledby": e.avatarLabelledBy,
+          onClick: r[0] || (r[0] = (...a) => s.avatarClick && s.avatarClick(...a))
         }, [
-          t.avatarList ? (n(), _("span", L, [
-            (n(!0), _(p, null, S(t.avatarList, (e, f) => (n(), i(d, {
+          e.avatarList ? (l(), v("span", E, [
+            (l(!0), v(b, null, h(e.avatarList, (a, f) => (l(), i(d, {
               key: f,
-              size: t.avatarSize,
-              seed: e.seed,
-              "full-name": e.fullName,
-              "image-src": e.src,
+              size: e.avatarSize,
+              seed: a.seed,
+              "full-name": a.fullName,
+              "image-src": a.src,
               "image-alt": "",
-              "overlay-text": e.text,
+              "overlay-text": a.text,
               "avatar-class": [
                 {
                   "d-recipe-contact-info__avatar-stacked": f > 0,
-                  "d-recipe-contact-info__avatar-halo": !!e.halo
+                  "d-recipe-contact-info__avatar-halo": !!a.halo
                 }
               ]
             }, u({
-              icon: o(({ iconSize: y }) => [
-                c(a.$slots, "avatarIcon", { iconSize: y })
+              icon: o(({ iconSize: _ }) => [
+                n(t.$slots, "avatarIcon", { iconSize: _ })
               ]),
               _: 2
             }, [
-              e.icon ? {
+              a.icon ? {
                 name: "overlayIcon",
                 fn: o(() => [
-                  (n(), i(k(e.icon)))
+                  (l(), i(p(a.icon)))
                 ]),
                 key: "0"
               } : void 0
             ]), 1032, ["size", "seed", "full-name", "image-src", "overlay-text", "avatar-class"]))), 128))
-          ])) : (n(), i(d, {
+          ])) : (l(), i(d, {
             key: 1,
-            size: t.avatarSize,
-            "full-name": t.avatarFullName,
-            "image-src": t.avatarSrc,
+            size: e.avatarSize,
+            "full-name": e.avatarFullName,
+            "image-src": e.avatarSrc,
             "image-alt": "",
-            seed: t.avatarSeed,
-            color: t.avatarColor,
-            presence: t.presence
+            seed: e.avatarSeed,
+            color: e.avatarColor,
+            presence: e.presence
           }, {
-            icon: o(({ iconSize: e }) => [
-              c(a.$slots, "avatarIcon", { iconSize: e })
+            icon: o(({ iconSize: a }) => [
+              n(t.$slots, "avatarIcon", { iconSize: a })
             ]),
             _: 3
           }, 8, ["size", "full-name", "image-src", "seed", "color", "presence"]))
@@ -197,28 +197,28 @@ function A(a, r, t, N, w, s) {
       ]),
       key: "0"
     } : void 0,
-    a.$slots.bottom ? {
-      name: "bottom",
+    t.$slots.blockEnd || t.$slots.bottom ? {
+      name: "blockEnd",
       fn: o(() => [
-        l("div", D, [
-          c(a.$slots, "bottom")
+        c("div", B, [
+          t.$slots.blockEnd ? n(t.$slots, "blockEnd", { key: 0 }) : n(t.$slots, "bottom", { key: 1 })
         ])
       ]),
       key: "1"
     } : void 0,
-    a.$slots.right ? {
-      name: "right",
+    t.$slots.end || t.$slots.right ? {
+      name: "end",
       fn: o(() => [
-        l("div", I, [
-          c(a.$slots, "right")
+        c("div", D, [
+          t.$slots.end ? n(t.$slots, "end", { key: 0 }) : n(t.$slots, "right", { key: 1 })
         ])
       ]),
       key: "2"
     } : void 0
   ]), 1032, ["role"]);
 }
-const R = /* @__PURE__ */ b(C, [["render", A]]);
+const O = /* @__PURE__ */ S(C, [["render", I]]);
 export {
-  R as default
+  O as default
 };
 //# sourceMappingURL=contact-info.js.map

package/dist/lib/contact-info/contact-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"contact-info.js","sources":["../../../recipes/item_layout/contact_info/contact_info.vue"],"sourcesContent":["<template>\n  <dt-item-layout\n    :role=\"role\"\n    data-qa=\"contact-info\"\n    class=\"d-recipe-contact-info\"\n    content-class=\"d-recipe-contact-info__content\"\n    right-class=\"d-recipe-contact-info__right\"\n    unstyled\n  >\n    <template\n      v-if=\"showAvatar\"\n      #left\n    >\n      <button\n        class=\"d-recipe-contact-info__left\"\n        data-qa=\"contact-info-left\"\n        :aria-labelledby=\"avatarLabelledBy\"\n        @click=\"avatarClick\"\n      >\n        <span\n          v-if=\"avatarList\"\n          class=\"d-recipe-contact-info__avatars\"\n        >\n          <dt-avatar\n            v-for=\"(avatar, index) in avatarList\"\n            :key=\"index\"\n            :size=\"avatarSize\"\n            :seed=\"avatar.seed\"\n            :full-name=\"avatar.fullName\"\n            :image-src=\"avatar.src\"\n            image-alt=\"\"\n            :overlay-text=\"avatar.text\"\n            :avatar-class=\"[\n              {\n                'd-recipe-contact-info__avatar-stacked': index > 0,\n                'd-recipe-contact-info__avatar-halo': !!avatar.halo,\n              },\n            ]\"\n          >\n            <template #icon=\"{ iconSize }\">\n              <!-- @slot Slot for avatar icon in a list -->\n              <slot\n                name=\"avatarIcon\"\n                :icon-size=\"iconSize\"\n              />\n            </template>\n            <template\n              v-if=\"avatar.icon\"\n              #overlayIcon\n            >\n              <component :is=\"avatar.icon\" />\n            </template>\n          </dt-avatar>\n        </span>\n        <dt-avatar\n          v-else\n          :size=\"avatarSize\"\n          :full-name=\"avatarFullName\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :seed=\"avatarSeed\"\n          :color=\"avatarColor\"\n          :presence=\"presence\"\n        >\n          <template #icon=\"{ iconSize }\">\n            <!-- @slot Slot for avatar icon in a list -->\n            <slot\n              name=\"avatarIcon\"\n              :icon-size=\"iconSize\"\n            />\n          </template>\n        </dt-avatar>\n      </button>\n    </template>\n    <template #default>\n      <div\n        class=\"d-recipe-contact-info__header\"\n        data-qa=\"contact-info-header\"\n      >\n        <!-- @slot Slot for header information -->\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <template #subtitle>\n      <div\n        class=\"d-recipe-contact-info__subtitle\"\n        data-qa=\"contact-info-subtitle\"\n      >\n        <!-- @slot Slot for subtitle information -->\n        <slot name=\"subtitle\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.bottom\"\n      #bottom\n    >\n      <div\n        class=\"d-recipe-contact-info__bottom\"\n        data-qa=\"contact-info-bottom\"\n      >\n        <!-- @slot Slot for information at the bottom -->\n        <slot name=\"bottom\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.right\"\n      #right\n    >\n      <div data-qa=\"contact-info-right\">\n        <!-- @slot Slot for the right content -->\n        <slot name=\"right\" />\n      </div>\n    </template>\n  </dt-item-layout>\n</template>\n\n<script>\nimport DtItemLayout from '@/components/item_layout/item_layout.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeContactInfo',\n\n  components: {\n    DtAvatar,\n    DtItemLayout,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Display avatar if `showAvatar` property is true.\n     */\n    showAvatar: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Optional avatar image url.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display in avatar if `avatarSrc` and `avatarIcon` are empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    avatarSize: {\n      type: String,\n      default: 'lg',\n    },\n\n    /**\n     * The aria-labelledby of the button containing avatars\n     */\n    avatarLabelledBy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar color to display if `avatarSrc` is empty.\n     */\n    avatarColor: {\n      type: String,\n      default: null,\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: null,\n    },\n\n    /**\n     * Showing multiple avatars in contact info.\n     * The props of array items are: <br>\n     * `src` - avatar image url (optional) <br>\n     * `fullName` - full name, used to extract initials to display in avatar<br>\n     *  if `avatarSrc` and `avatarIcon` are empty<br>\n     * `seed` - determines uniqueness of avatar background <br>\n     * `text` - text that overlays the avatar (optional) <br>\n     * `icon` - icon that overlays the avatar (optional) <br>\n     * `halo` - halo highlight around the avatar. boolean true/false\n     */\n    avatarList: {\n      type: Array,\n      default: null,\n    },\n  },\n\n  emits: ['avatar-click'],\n\n  methods: {\n    avatarClick () {\n      this.$emit('avatar-click');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtItemLayout","_hoisted_6","_createBlock","_component_dt_item_layout","$props","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$options","args","_openBlock","_createElementBlock","_hoisted_2","_Fragment","_renderList","avatar","index","_component_dt_avatar","_withCtx","iconSize","_resolveDynamicComponent","_hoisted_5"],"mappings":"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"}
+{"version":3,"file":"contact-info.js","sources":["../../../recipes/item_layout/contact_info/contact_info.vue"],"sourcesContent":["<template>\n  <dt-item-layout\n    :role=\"role\"\n    data-qa=\"contact-info\"\n    class=\"d-recipe-contact-info\"\n    content-class=\"d-recipe-contact-info__content\"\n    end-class=\"d-recipe-contact-info__right\"\n    unstyled\n  >\n    <template\n      v-if=\"showAvatar\"\n      #start\n    >\n      <button\n        class=\"d-recipe-contact-info__left\"\n        data-qa=\"contact-info-left\"\n        :aria-labelledby=\"avatarLabelledBy\"\n        @click=\"avatarClick\"\n      >\n        <span\n          v-if=\"avatarList\"\n          class=\"d-recipe-contact-info__avatars\"\n        >\n          <dt-avatar\n            v-for=\"(avatar, index) in avatarList\"\n            :key=\"index\"\n            :size=\"avatarSize\"\n            :seed=\"avatar.seed\"\n            :full-name=\"avatar.fullName\"\n            :image-src=\"avatar.src\"\n            image-alt=\"\"\n            :overlay-text=\"avatar.text\"\n            :avatar-class=\"[\n              {\n                'd-recipe-contact-info__avatar-stacked': index > 0,\n                'd-recipe-contact-info__avatar-halo': !!avatar.halo,\n              },\n            ]\"\n          >\n            <template #icon=\"{ iconSize }\">\n              <!-- @slot Slot for avatar icon in a list -->\n              <slot\n                name=\"avatarIcon\"\n                :icon-size=\"iconSize\"\n              />\n            </template>\n            <template\n              v-if=\"avatar.icon\"\n              #overlayIcon\n            >\n              <component :is=\"avatar.icon\" />\n            </template>\n          </dt-avatar>\n        </span>\n        <dt-avatar\n          v-else\n          :size=\"avatarSize\"\n          :full-name=\"avatarFullName\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :seed=\"avatarSeed\"\n          :color=\"avatarColor\"\n          :presence=\"presence\"\n        >\n          <template #icon=\"{ iconSize }\">\n            <!-- @slot Slot for avatar icon in a list -->\n            <slot\n              name=\"avatarIcon\"\n              :icon-size=\"iconSize\"\n            />\n          </template>\n        </dt-avatar>\n      </button>\n    </template>\n    <template #default>\n      <div\n        class=\"d-recipe-contact-info__header\"\n        data-qa=\"contact-info-header\"\n      >\n        <!-- @slot Slot for header information -->\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <template #subtitle>\n      <div\n        class=\"d-recipe-contact-info__subtitle\"\n        data-qa=\"contact-info-subtitle\"\n      >\n        <!-- @slot Slot for subtitle information -->\n        <slot name=\"subtitle\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.blockEnd || $slots.bottom\"\n      #blockEnd\n    >\n      <div\n        class=\"d-recipe-contact-info__bottom\"\n        data-qa=\"contact-info-bottom\"\n      >\n        <!-- @slot Slot for block-end content -->\n        <slot\n          v-if=\"$slots.blockEnd\"\n          name=\"blockEnd\"\n        />\n        <!-- @slot @deprecated Use blockEnd -->\n        <slot\n          v-else\n          name=\"bottom\"\n        />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.end || $slots.right\"\n      #end\n    >\n      <div data-qa=\"contact-info-right\">\n        <!-- @slot Slot for the end content -->\n        <slot\n          v-if=\"$slots.end\"\n          name=\"end\"\n        />\n        <!-- @slot @deprecated Use end -->\n        <slot\n          v-else\n          name=\"right\"\n        />\n      </div>\n    </template>\n  </dt-item-layout>\n</template>\n\n<script>\nimport DtItemLayout from '@/components/item_layout/item_layout.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeContactInfo',\n\n  components: {\n    DtAvatar,\n    DtItemLayout,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Display avatar if `showAvatar` property is true.\n     */\n    showAvatar: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Optional avatar image url.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display in avatar if `avatarSrc` and `avatarIcon` are empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    avatarSize: {\n      type: String,\n      default: 'lg',\n    },\n\n    /**\n     * The aria-labelledby of the button containing avatars\n     */\n    avatarLabelledBy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar color to display if `avatarSrc` is empty.\n     */\n    avatarColor: {\n      type: String,\n      default: null,\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: null,\n    },\n\n    /**\n     * Showing multiple avatars in contact info.\n     * The props of array items are: <br>\n     * `src` - avatar image url (optional) <br>\n     * `fullName` - full name, used to extract initials to display in avatar<br>\n     *  if `avatarSrc` and `avatarIcon` are empty<br>\n     * `seed` - determines uniqueness of avatar background <br>\n     * `text` - text that overlays the avatar (optional) <br>\n     * `icon` - icon that overlays the avatar (optional) <br>\n     * `halo` - halo highlight around the avatar. boolean true/false\n     */\n    avatarList: {\n      type: Array,\n      default: null,\n    },\n  },\n\n  emits: ['avatar-click'],\n\n  methods: {\n    avatarClick () {\n      this.$emit('avatar-click');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtItemLayout","_hoisted_6","_createBlock","_component_dt_item_layout","$props","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$options","args","_openBlock","_createElementBlock","_hoisted_2","_Fragment","_renderList","avatar","index","_component_dt_avatar","_withCtx","iconSize","_resolveDynamicComponent","_hoisted_5"],"mappings":"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"}

package/dist/lib/contact-row/contact-row.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../../common/utils/index.cjs"),d=require("@dialpad/dialtone-icons/vue3"),e=require("vue"),p=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),m=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),_=require("../general-row/general-row.cjs"),f=require("../avatar/avatar.cjs"),y={compatConfig:{MODE:3},name:"DtRecipeContactRow",components:{DtAvatar:f.default,DtRecipeGeneralRow:_.default,DtEmojiTextWrapper:m.default,DtIconUser:d.DtIconUser},inheritAttrs:!1,props:{avatarSrc:{type:String,default:""},avatarPresence:{type:String,default:null},avatarSeed:{type:String,default:null},avatarColor:{type:String,default:null},presenceText:{type:String,default:""},name:{type:String,required:!0},userStatus:{type:String,default:""},muted:{type:Boolean,default:!1},unreadCount:{type:String,default:null},hasUnreads:{type:Boolean,default:!1},selected:{type:Boolean,default:!1},noInitials:{type:Boolean,default:!1},isTyping:{type:Boolean,default:!1},hasCallButton:{type:Boolean,default:!0}},emits:["call"],computed:{presenceFontColorClass(){return{active:"d-recipe-contact-row--active",busy:"d-recipe-contact-row--busy",away:"d-recipe-contact-row--away"}[this.avatarPresence]},contactRowListeners(){return s.extractVueListeners(this.$attrs)},contactDescription(){return s.safeConcatStrings([this.name,this.presenceText,this.userStatus])}}},w={class:"d-recipe-leftbar-row__status"};function g(a,n,t,v,S,r){const c=e.resolveComponent("dt-icon-user"),l=e.resolveComponent("dt-avatar"),o=e.resolveComponent("dt-emoji-text-wrapper"),i=e.resolveComponent("dt-recipe-general-row");return e.openBlock(),e.createBlock(i,e.mergeProps({"unread-count":t.unreadCount,description:r.contactDescription,"has-unreads":t.hasUnreads,selected:t.selected,"has-call-button":t.hasCallButton,muted:t.muted,"is-typing":t.isTyping},a.$attrs,{"data-qa":"contact-row"},e.toHandlers(r.contactRowListeners),{onCall:n[0]||(n[0]=u=>a.$emit("call",u))}),{left:e.withCtx(()=>[e.createVNode(l,{"full-name":t.name,"image-src":t.avatarSrc,color:t.avatarColor,"image-alt":"",size:"sm",seed:t.avatarSeed,presence:t.avatarPresence},e.createSlots({_:2},[t.noInitials?{name:"icon",fn:e.withCtx(()=>[e.createVNode(c,{size:"200"})]),key:"0"}:void 0]),1032,["full-name","image-src","color","seed","presence"])]),label:e.withCtx(()=>[e.createVNode(o,{class:"d-recipe-leftbar-row__description","data-qa":"dt-recipe-leftbar-row-description",size:"200"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.name),1)]),_:1}),e.createElementVNode("div",w,[t.presenceText?(e.openBlock(),e.createElementBlock("span",{key:0,"data-qa":"dt-recipe-leftbar-row-presence-text",class:e.normalizeClass(["d-recipe-leftbar-row__meta-context",r.presenceFontColorClass])},e.toDisplayString(t.presenceText),3)):e.createCommentVNode("",!0),t.userStatus?(e.openBlock(),e.createBlock(o,{key:1,size:"100","element-type":"span","data-qa":"dt-recipe-leftbar-row-user-status",class:"d-recipe-leftbar-row__meta-custom"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.userStatus),1)]),_:1})):e.createCommentVNode("",!0)])]),_:1},16,["unread-count","description","has-unreads","selected","has-call-button","muted","is-typing"])}const C=p._(y,[["render",g]]);exports.default=C;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../../common/utils/index.cjs"),d=require("@dialpad/dialtone-icons/vue3"),e=require("vue"),p=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),m=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),_=require("../general-row/general-row.cjs"),f=require("../avatar/avatar.cjs"),y={compatConfig:{MODE:3},name:"DtRecipeContactRow",components:{DtAvatar:f.default,DtRecipeGeneralRow:_.default,DtEmojiTextWrapper:m.default,DtIconUser:d.DtIconUser},inheritAttrs:!1,props:{avatarSrc:{type:String,default:""},avatarPresence:{type:String,default:null},avatarSeed:{type:String,default:null},avatarColor:{type:String,default:null},presenceText:{type:String,default:""},name:{type:String,required:!0},userStatus:{type:String,default:""},muted:{type:Boolean,default:!1},unreadCount:{type:String,default:null},hasUnreads:{type:Boolean,default:!1},selected:{type:Boolean,default:!1},noInitials:{type:Boolean,default:!1},isTyping:{type:Boolean,default:!1},hasCallButton:{type:Boolean,default:!0}},emits:["call"],computed:{presenceFontColorClass(){return{active:"d-recipe-contact-row--active",busy:"d-recipe-contact-row--busy",away:"d-recipe-contact-row--away"}[this.avatarPresence]},contactRowListeners(){return s.extractVueListeners(this.$attrs)},contactDescription(){return s.safeConcatStrings([this.name,this.presenceText,this.userStatus])}}},w={class:"d-recipe-leftbar-row__status"};function g(a,n,t,v,S,r){const c=e.resolveComponent("dt-icon-user"),l=e.resolveComponent("dt-avatar"),o=e.resolveComponent("dt-emoji-text-wrapper"),i=e.resolveComponent("dt-recipe-general-row");return e.openBlock(),e.createBlock(i,e.mergeProps({"unread-count":t.unreadCount,description:r.contactDescription,"has-unreads":t.hasUnreads,selected:t.selected,"has-call-button":t.hasCallButton,muted:t.muted,"is-typing":t.isTyping},a.$attrs,{"data-qa":"contact-row"},e.toHandlers(r.contactRowListeners),{onCall:n[0]||(n[0]=u=>a.$emit("call",u))}),{start:e.withCtx(()=>[e.createVNode(l,{"full-name":t.name,"image-src":t.avatarSrc,color:t.avatarColor,"image-alt":"",size:"sm",seed:t.avatarSeed,presence:t.avatarPresence},e.createSlots({_:2},[t.noInitials?{name:"icon",fn:e.withCtx(()=>[e.createVNode(c,{size:"200"})]),key:"0"}:void 0]),1032,["full-name","image-src","color","seed","presence"])]),label:e.withCtx(()=>[e.createVNode(o,{class:"d-recipe-leftbar-row__description","data-qa":"dt-recipe-leftbar-row-description",size:"200"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.name),1)]),_:1}),e.createElementVNode("div",w,[t.presenceText?(e.openBlock(),e.createElementBlock("span",{key:0,"data-qa":"dt-recipe-leftbar-row-presence-text",class:e.normalizeClass(["d-recipe-leftbar-row__meta-context",r.presenceFontColorClass])},e.toDisplayString(t.presenceText),3)):e.createCommentVNode("",!0),t.userStatus?(e.openBlock(),e.createBlock(o,{key:1,size:"100","element-type":"span","data-qa":"dt-recipe-leftbar-row-user-status",class:"d-recipe-leftbar-row__meta-custom"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.userStatus),1)]),_:1})):e.createCommentVNode("",!0)])]),_:1},16,["unread-count","description","has-unreads","selected","has-call-button","muted","is-typing"])}const C=p._(y,[["render",g]]);exports.default=C;
 //# sourceMappingURL=contact-row.cjs.map

package/dist/lib/contact-row/contact-row.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"contact-row.cjs","sources":["../../../recipes/leftbar/contact_row/contact_row.vue"],"sourcesContent":["<template>\n  <dt-recipe-general-row\n    :unread-count=\"unreadCount\"\n    :description=\"contactDescription\"\n    :has-unreads=\"hasUnreads\"\n    :selected=\"selected\"\n    :has-call-button=\"hasCallButton\"\n    :muted=\"muted\"\n    :is-typing=\"isTyping\"\n    v-bind=\"$attrs\"\n    data-qa=\"contact-row\"\n    v-on=\"contactRowListeners\"\n    @call=\"$emit('call', $event)\"\n  >\n    <template #left>\n      <dt-avatar\n        :full-name=\"name\"\n        :image-src=\"avatarSrc\"\n        :color=\"avatarColor\"\n        image-alt=\"\"\n        size=\"sm\"\n        :seed=\"avatarSeed\"\n        :presence=\"avatarPresence\"\n      >\n        <template\n          v-if=\"noInitials\"\n          #icon\n        >\n          <dt-icon-user\n            size=\"200\"\n          />\n        </template>\n      </dt-avatar>\n    </template>\n    <template #label>\n      <dt-emoji-text-wrapper\n        class=\"d-recipe-leftbar-row__description\"\n        data-qa=\"dt-recipe-leftbar-row-description\"\n        size=\"200\"\n      >\n        {{ name }}\n      </dt-emoji-text-wrapper>\n      <div class=\"d-recipe-leftbar-row__status\">\n        <span\n          v-if=\"presenceText\"\n          data-qa=\"dt-recipe-leftbar-row-presence-text\"\n          :class=\"['d-recipe-leftbar-row__meta-context', presenceFontColorClass]\"\n        >\n          {{ presenceText }}\n        </span>\n        <dt-emoji-text-wrapper\n          v-if=\"userStatus\"\n          size=\"100\"\n          element-type=\"span\"\n          data-qa=\"dt-recipe-leftbar-row-user-status\"\n          class=\"d-recipe-leftbar-row__meta-custom\"\n        >\n          {{ userStatus }}\n        </dt-emoji-text-wrapper>\n      </div>\n    </template>\n  </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport { DtEmojiTextWrapper } from '@/components/emoji_text_wrapper';\nimport { DtAvatar } from '@/components/avatar';\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeContactRow',\n\n  components: {\n    DtAvatar,\n    DtRecipeGeneralRow,\n    DtEmojiTextWrapper,\n    DtIconUser,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\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     * defer validation to avatar component.\n     * @values null, busy, away, offline, active\n     */\n    avatarPresence: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Avatar color to display if `avatarSrc` is empty.\n     */\n    avatarColor: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Text describing the user's presence, such as \"in a meeting\"\n     */\n    presenceText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Name of the contact\n     */\n    name: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Status as set by the user.\n     */\n    userStatus: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Gives a faded style to be used when muted\n     */\n    muted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Initials will never be shown. Instead it will show a \"User\" icon.\n     */\n    noInitials: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the contact row should display a call button when hovered.\n     */\n    hasCallButton: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  computed: {\n    presenceFontColorClass () {\n      const presenceFontColors = {\n        active: 'd-recipe-contact-row--active',\n        busy: 'd-recipe-contact-row--busy',\n        away: 'd-recipe-contact-row--away',\n      };\n\n      return presenceFontColors[this.avatarPresence];\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    contactDescription () {\n      return safeConcatStrings([this.name, this.presenceText, this.userStatus]);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtRecipeGeneralRow","DtEmojiTextWrapper","DtIconUser","extractVueListeners","safeConcatStrings","_hoisted_1","_openBlock","_createBlock","_component_dt_recipe_general_row","_mergeProps","$props","$options","_ctx","_toHandlers","_cache","$event","_createVNode","_component_dt_avatar","_component_dt_icon_user","_component_dt_emoji_text_wrapper","_createElementVNode","_createElementBlock"],"mappings":"yZAuEKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,qBAEN,WAAY,CACV,SAAAC,EAAAA,QACA,mBAAAC,EAAAA,QACA,mBAAAC,EAAAA,mBACAC,EAAAA,YAGF,aAAc,GAEd,MAAO,CAKL,UAAW,CACT,KAAM,OACN,QAAS,IAUX,eAAgB,CACd,KAAM,OACN,QAAS,MAMX,WAAY,CACV,KAAM,OACN,QAAS,MAMX,YAAa,CACX,KAAM,OACN,QAAS,MAMX,aAAc,CACZ,KAAM,OACN,QAAS,IAMX,KAAM,CACJ,KAAM,OACN,SAAU,IAMZ,WAAY,CACV,KAAM,OACN,QAAS,IAMX,MAAO,CACL,KAAM,QACN,QAAS,IAMX,YAAa,CACX,KAAM,OACN,QAAS,MAOX,WAAY,CACV,KAAM,QACN,QAAS,IAMX,SAAU,CACR,KAAM,QACN,QAAS,IAMX,WAAY,CACV,KAAM,QACN,QAAS,IAMX,SAAU,CACR,KAAM,QACN,QAAS,IAMX,cAAe,CACb,KAAM,QACN,QAAS,KAIb,MAAO,CAOL,QAGF,SAAU,CACR,wBAA0B,CAOxB,MAN2B,CACzB,OAAQ,+BACR,KAAM,6BACN,KAAM,8BAGkB,KAAK,cAAc,CAC/C,EAEA,qBAAuB,CACrB,OAAOC,EAAAA,oBAAoB,KAAK,MAAM,CACxC,EAEA,oBAAsB,CACpB,OAAOC,EAAAA,kBAAkB,CAAC,KAAK,KAAM,KAAK,aAAc,KAAK,UAAU,CAAC,CAC1E,EAEJ,EA/LWC,EAAA,CAAA,MAAM,8BAA8B,mMAzC7C,OAAAC,YAAA,EAAAC,cA4DwBC,EA5DxBC,EAAAA,WA4DwB,CA3DrB,eAAcC,EAAA,YACd,YAAaC,EAAA,mBACb,cAAaD,EAAA,WACb,SAAUA,EAAA,SACV,kBAAiBA,EAAA,cACjB,MAAOA,EAAA,MACP,YAAWA,EAAA,QACJ,EAAAE,EAAA,QACR,UAAQ,aAAa,EACrBC,EAAAA,WAA0BF,EAApB,mBAAmB,EAAA,CACxB,OAAIG,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEH,EAAA,MAAK,OAASG,CAAM,MAEhB,eACT,IAiBY,CAjBZC,EAAAA,YAiBYC,EAAA,CAhBT,YAAWP,EAAA,KACX,YAAWA,EAAA,UACX,MAAOA,EAAA,YACR,YAAU,GACV,KAAK,KACJ,KAAMA,EAAA,WACN,SAAUA,EAAA,qCAGHA,EAAA,iBACL,oBAED,IAEE,CAFFM,EAAAA,YAEEE,EAAA,CADA,KAAK,KAAK,CAAA,kFAKP,gBACT,IAMwB,CANxBF,EAAAA,YAMwBG,EAAA,CALtB,MAAM,oCACN,UAAQ,oCACR,KAAK,0BAEL,IAAU,qCAAPT,EAAA,IAAI,EAAA,CAAA,UAETU,EAAAA,mBAiBM,MAjBNf,EAiBM,CAfIK,EAAA,4BADRW,EAAAA,mBAMO,OAAA,OAJL,UAAQ,sCACP,6DAA8CV,EAAA,sBAAsB,CAAA,qBAElED,EAAA,YAAY,EAAA,CAAA,+BAGTA,EAAA,0BADRH,EAAAA,YAQwBY,EAAA,OANtB,KAAK,MACL,eAAa,OACb,UAAQ,oCACR,MAAM,wDAEN,IAAgB,qCAAbT,EAAA,UAAU,EAAA,CAAA"}
+{"version":3,"file":"contact-row.cjs","sources":["../../../recipes/leftbar/contact_row/contact_row.vue"],"sourcesContent":["<template>\n  <dt-recipe-general-row\n    :unread-count=\"unreadCount\"\n    :description=\"contactDescription\"\n    :has-unreads=\"hasUnreads\"\n    :selected=\"selected\"\n    :has-call-button=\"hasCallButton\"\n    :muted=\"muted\"\n    :is-typing=\"isTyping\"\n    v-bind=\"$attrs\"\n    data-qa=\"contact-row\"\n    v-on=\"contactRowListeners\"\n    @call=\"$emit('call', $event)\"\n  >\n    <template #start>\n      <dt-avatar\n        :full-name=\"name\"\n        :image-src=\"avatarSrc\"\n        :color=\"avatarColor\"\n        image-alt=\"\"\n        size=\"sm\"\n        :seed=\"avatarSeed\"\n        :presence=\"avatarPresence\"\n      >\n        <template\n          v-if=\"noInitials\"\n          #icon\n        >\n          <dt-icon-user\n            size=\"200\"\n          />\n        </template>\n      </dt-avatar>\n    </template>\n    <template #label>\n      <dt-emoji-text-wrapper\n        class=\"d-recipe-leftbar-row__description\"\n        data-qa=\"dt-recipe-leftbar-row-description\"\n        size=\"200\"\n      >\n        {{ name }}\n      </dt-emoji-text-wrapper>\n      <div class=\"d-recipe-leftbar-row__status\">\n        <span\n          v-if=\"presenceText\"\n          data-qa=\"dt-recipe-leftbar-row-presence-text\"\n          :class=\"['d-recipe-leftbar-row__meta-context', presenceFontColorClass]\"\n        >\n          {{ presenceText }}\n        </span>\n        <dt-emoji-text-wrapper\n          v-if=\"userStatus\"\n          size=\"100\"\n          element-type=\"span\"\n          data-qa=\"dt-recipe-leftbar-row-user-status\"\n          class=\"d-recipe-leftbar-row__meta-custom\"\n        >\n          {{ userStatus }}\n        </dt-emoji-text-wrapper>\n      </div>\n    </template>\n  </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport { DtEmojiTextWrapper } from '@/components/emoji_text_wrapper';\nimport { DtAvatar } from '@/components/avatar';\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeContactRow',\n\n  components: {\n    DtAvatar,\n    DtRecipeGeneralRow,\n    DtEmojiTextWrapper,\n    DtIconUser,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\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     * defer validation to avatar component.\n     * @values null, busy, away, offline, active\n     */\n    avatarPresence: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Avatar color to display if `avatarSrc` is empty.\n     */\n    avatarColor: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Text describing the user's presence, such as \"in a meeting\"\n     */\n    presenceText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Name of the contact\n     */\n    name: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Status as set by the user.\n     */\n    userStatus: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Gives a faded style to be used when muted\n     */\n    muted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Initials will never be shown. Instead it will show a \"User\" icon.\n     */\n    noInitials: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the contact row should display a call button when hovered.\n     */\n    hasCallButton: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  computed: {\n    presenceFontColorClass () {\n      const presenceFontColors = {\n        active: 'd-recipe-contact-row--active',\n        busy: 'd-recipe-contact-row--busy',\n        away: 'd-recipe-contact-row--away',\n      };\n\n      return presenceFontColors[this.avatarPresence];\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    contactDescription () {\n      return safeConcatStrings([this.name, this.presenceText, this.userStatus]);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtRecipeGeneralRow","DtEmojiTextWrapper","DtIconUser","extractVueListeners","safeConcatStrings","_hoisted_1","_openBlock","_createBlock","_component_dt_recipe_general_row","_mergeProps","$props","$options","_ctx","_toHandlers","_cache","$event","_createVNode","_component_dt_avatar","_component_dt_icon_user","_component_dt_emoji_text_wrapper","_createElementVNode","_createElementBlock"],"mappings":"yZAuEKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,qBAEN,WAAY,CACV,SAAAC,EAAAA,QACA,mBAAAC,EAAAA,QACA,mBAAAC,EAAAA,mBACAC,EAAAA,YAGF,aAAc,GAEd,MAAO,CAKL,UAAW,CACT,KAAM,OACN,QAAS,IAUX,eAAgB,CACd,KAAM,OACN,QAAS,MAMX,WAAY,CACV,KAAM,OACN,QAAS,MAMX,YAAa,CACX,KAAM,OACN,QAAS,MAMX,aAAc,CACZ,KAAM,OACN,QAAS,IAMX,KAAM,CACJ,KAAM,OACN,SAAU,IAMZ,WAAY,CACV,KAAM,OACN,QAAS,IAMX,MAAO,CACL,KAAM,QACN,QAAS,IAMX,YAAa,CACX,KAAM,OACN,QAAS,MAOX,WAAY,CACV,KAAM,QACN,QAAS,IAMX,SAAU,CACR,KAAM,QACN,QAAS,IAMX,WAAY,CACV,KAAM,QACN,QAAS,IAMX,SAAU,CACR,KAAM,QACN,QAAS,IAMX,cAAe,CACb,KAAM,QACN,QAAS,KAIb,MAAO,CAOL,QAGF,SAAU,CACR,wBAA0B,CAOxB,MAN2B,CACzB,OAAQ,+BACR,KAAM,6BACN,KAAM,8BAGkB,KAAK,cAAc,CAC/C,EAEA,qBAAuB,CACrB,OAAOC,EAAAA,oBAAoB,KAAK,MAAM,CACxC,EAEA,oBAAsB,CACpB,OAAOC,EAAAA,kBAAkB,CAAC,KAAK,KAAM,KAAK,aAAc,KAAK,UAAU,CAAC,CAC1E,EAEJ,EA/LWC,EAAA,CAAA,MAAM,8BAA8B,mMAzC7C,OAAAC,YAAA,EAAAC,cA4DwBC,EA5DxBC,EAAAA,WA4DwB,CA3DrB,eAAcC,EAAA,YACd,YAAaC,EAAA,mBACb,cAAaD,EAAA,WACb,SAAUA,EAAA,SACV,kBAAiBA,EAAA,cACjB,MAAOA,EAAA,MACP,YAAWA,EAAA,QACJ,EAAAE,EAAA,QACR,UAAQ,aAAa,EACrBC,EAAAA,WAA0BF,EAApB,mBAAmB,EAAA,CACxB,OAAIG,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEH,EAAA,MAAK,OAASG,CAAM,MAEhB,gBACT,IAiBY,CAjBZC,EAAAA,YAiBYC,EAAA,CAhBT,YAAWP,EAAA,KACX,YAAWA,EAAA,UACX,MAAOA,EAAA,YACR,YAAU,GACV,KAAK,KACJ,KAAMA,EAAA,WACN,SAAUA,EAAA,qCAGHA,EAAA,iBACL,oBAED,IAEE,CAFFM,EAAAA,YAEEE,EAAA,CADA,KAAK,KAAK,CAAA,kFAKP,gBACT,IAMwB,CANxBF,EAAAA,YAMwBG,EAAA,CALtB,MAAM,oCACN,UAAQ,oCACR,KAAK,0BAEL,IAAU,qCAAPT,EAAA,IAAI,EAAA,CAAA,UAETU,EAAAA,mBAiBM,MAjBNf,EAiBM,CAfIK,EAAA,4BADRW,EAAAA,mBAMO,OAAA,OAJL,UAAQ,sCACP,6DAA8CV,EAAA,sBAAsB,CAAA,qBAElED,EAAA,YAAY,EAAA,CAAA,+BAGTA,EAAA,0BADRH,EAAAA,YAQwBY,EAAA,OANtB,KAAK,MACL,eAAa,OACb,UAAQ,oCACR,MAAM,wDAEN,IAAgB,qCAAbT,EAAA,UAAU,EAAA,CAAA"}

package/dist/lib/contact-row/contact-row.js

@@ -159,7 +159,7 @@ function V(r, l, e, E, F, n) {
   }, r.$attrs, { "data-qa": "contact-row" }, v(n.contactRowListeners), {
     onCall: l[0] || (l[0] = (y) => r.$emit("call", y))
   }), {
-    left: t(() => [
+    start: t(() => [
       s(p, {
         "full-name": e.name,
         "image-src": e.avatarSrc,

package/dist/lib/contact-row/contact-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"contact-row.js","sources":["../../../recipes/leftbar/contact_row/contact_row.vue"],"sourcesContent":["<template>\n  <dt-recipe-general-row\n    :unread-count=\"unreadCount\"\n    :description=\"contactDescription\"\n    :has-unreads=\"hasUnreads\"\n    :selected=\"selected\"\n    :has-call-button=\"hasCallButton\"\n    :muted=\"muted\"\n    :is-typing=\"isTyping\"\n    v-bind=\"$attrs\"\n    data-qa=\"contact-row\"\n    v-on=\"contactRowListeners\"\n    @call=\"$emit('call', $event)\"\n  >\n    <template #left>\n      <dt-avatar\n        :full-name=\"name\"\n        :image-src=\"avatarSrc\"\n        :color=\"avatarColor\"\n        image-alt=\"\"\n        size=\"sm\"\n        :seed=\"avatarSeed\"\n        :presence=\"avatarPresence\"\n      >\n        <template\n          v-if=\"noInitials\"\n          #icon\n        >\n          <dt-icon-user\n            size=\"200\"\n          />\n        </template>\n      </dt-avatar>\n    </template>\n    <template #label>\n      <dt-emoji-text-wrapper\n        class=\"d-recipe-leftbar-row__description\"\n        data-qa=\"dt-recipe-leftbar-row-description\"\n        size=\"200\"\n      >\n        {{ name }}\n      </dt-emoji-text-wrapper>\n      <div class=\"d-recipe-leftbar-row__status\">\n        <span\n          v-if=\"presenceText\"\n          data-qa=\"dt-recipe-leftbar-row-presence-text\"\n          :class=\"['d-recipe-leftbar-row__meta-context', presenceFontColorClass]\"\n        >\n          {{ presenceText }}\n        </span>\n        <dt-emoji-text-wrapper\n          v-if=\"userStatus\"\n          size=\"100\"\n          element-type=\"span\"\n          data-qa=\"dt-recipe-leftbar-row-user-status\"\n          class=\"d-recipe-leftbar-row__meta-custom\"\n        >\n          {{ userStatus }}\n        </dt-emoji-text-wrapper>\n      </div>\n    </template>\n  </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport { DtEmojiTextWrapper } from '@/components/emoji_text_wrapper';\nimport { DtAvatar } from '@/components/avatar';\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeContactRow',\n\n  components: {\n    DtAvatar,\n    DtRecipeGeneralRow,\n    DtEmojiTextWrapper,\n    DtIconUser,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\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     * defer validation to avatar component.\n     * @values null, busy, away, offline, active\n     */\n    avatarPresence: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Avatar color to display if `avatarSrc` is empty.\n     */\n    avatarColor: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Text describing the user's presence, such as \"in a meeting\"\n     */\n    presenceText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Name of the contact\n     */\n    name: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Status as set by the user.\n     */\n    userStatus: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Gives a faded style to be used when muted\n     */\n    muted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Initials will never be shown. Instead it will show a \"User\" icon.\n     */\n    noInitials: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the contact row should display a call button when hovered.\n     */\n    hasCallButton: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  computed: {\n    presenceFontColorClass () {\n      const presenceFontColors = {\n        active: 'd-recipe-contact-row--active',\n        busy: 'd-recipe-contact-row--busy',\n        away: 'd-recipe-contact-row--away',\n      };\n\n      return presenceFontColors[this.avatarPresence];\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    contactDescription () {\n      return safeConcatStrings([this.name, this.presenceText, this.userStatus]);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtRecipeGeneralRow","DtEmojiTextWrapper","DtIconUser","extractVueListeners","safeConcatStrings","_hoisted_1","_openBlock","_createBlock","_component_dt_recipe_general_row","_mergeProps","$props","$options","_ctx","_toHandlers","_cache","$event","_createVNode","_component_dt_avatar","_component_dt_icon_user","_component_dt_emoji_text_wrapper","_createElementVNode","_createElementBlock"],"mappings":"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"}
+{"version":3,"file":"contact-row.js","sources":["../../../recipes/leftbar/contact_row/contact_row.vue"],"sourcesContent":["<template>\n  <dt-recipe-general-row\n    :unread-count=\"unreadCount\"\n    :description=\"contactDescription\"\n    :has-unreads=\"hasUnreads\"\n    :selected=\"selected\"\n    :has-call-button=\"hasCallButton\"\n    :muted=\"muted\"\n    :is-typing=\"isTyping\"\n    v-bind=\"$attrs\"\n    data-qa=\"contact-row\"\n    v-on=\"contactRowListeners\"\n    @call=\"$emit('call', $event)\"\n  >\n    <template #start>\n      <dt-avatar\n        :full-name=\"name\"\n        :image-src=\"avatarSrc\"\n        :color=\"avatarColor\"\n        image-alt=\"\"\n        size=\"sm\"\n        :seed=\"avatarSeed\"\n        :presence=\"avatarPresence\"\n      >\n        <template\n          v-if=\"noInitials\"\n          #icon\n        >\n          <dt-icon-user\n            size=\"200\"\n          />\n        </template>\n      </dt-avatar>\n    </template>\n    <template #label>\n      <dt-emoji-text-wrapper\n        class=\"d-recipe-leftbar-row__description\"\n        data-qa=\"dt-recipe-leftbar-row-description\"\n        size=\"200\"\n      >\n        {{ name }}\n      </dt-emoji-text-wrapper>\n      <div class=\"d-recipe-leftbar-row__status\">\n        <span\n          v-if=\"presenceText\"\n          data-qa=\"dt-recipe-leftbar-row-presence-text\"\n          :class=\"['d-recipe-leftbar-row__meta-context', presenceFontColorClass]\"\n        >\n          {{ presenceText }}\n        </span>\n        <dt-emoji-text-wrapper\n          v-if=\"userStatus\"\n          size=\"100\"\n          element-type=\"span\"\n          data-qa=\"dt-recipe-leftbar-row-user-status\"\n          class=\"d-recipe-leftbar-row__meta-custom\"\n        >\n          {{ userStatus }}\n        </dt-emoji-text-wrapper>\n      </div>\n    </template>\n  </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport { DtEmojiTextWrapper } from '@/components/emoji_text_wrapper';\nimport { DtAvatar } from '@/components/avatar';\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeContactRow',\n\n  components: {\n    DtAvatar,\n    DtRecipeGeneralRow,\n    DtEmojiTextWrapper,\n    DtIconUser,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\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     * defer validation to avatar component.\n     * @values null, busy, away, offline, active\n     */\n    avatarPresence: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Avatar color to display if `avatarSrc` is empty.\n     */\n    avatarColor: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Text describing the user's presence, such as \"in a meeting\"\n     */\n    presenceText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Name of the contact\n     */\n    name: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Status as set by the user.\n     */\n    userStatus: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Gives a faded style to be used when muted\n     */\n    muted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Initials will never be shown. Instead it will show a \"User\" icon.\n     */\n    noInitials: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the contact row should display a call button when hovered.\n     */\n    hasCallButton: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  computed: {\n    presenceFontColorClass () {\n      const presenceFontColors = {\n        active: 'd-recipe-contact-row--active',\n        busy: 'd-recipe-contact-row--busy',\n        away: 'd-recipe-contact-row--away',\n      };\n\n      return presenceFontColors[this.avatarPresence];\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    contactDescription () {\n      return safeConcatStrings([this.name, this.presenceText, this.userStatus]);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtRecipeGeneralRow","DtEmojiTextWrapper","DtIconUser","extractVueListeners","safeConcatStrings","_hoisted_1","_openBlock","_createBlock","_component_dt_recipe_general_row","_mergeProps","$props","$options","_ctx","_toHandlers","_cache","$event","_createVNode","_component_dt_avatar","_component_dt_icon_user","_component_dt_emoji_text_wrapper","_createElementVNode","_createElementBlock"],"mappings":"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"}

package/dist/lib/datepicker/datepicker.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),T=require("@dialpad/dialtone-icons/vue3"),c=require("date-fns"),w=require("./utils.cjs"),Y=require("./datepicker-constants.cjs"),v=require("../../common/utils/index.cjs"),P=require("../../localization/index.cjs"),M=require("../stack/stack.cjs"),x=require("../tooltip/tooltip.cjs"),$=require("../button/button.cjs");function V(n,o){const s=e.ref(c.getMonth(n.selectedDate)),a=e.ref(c.getYear(n.selectedDate)),r=e.ref(null),l=e.ref(0),m=e.ref([]),D=new P.DialtoneLocalization,p=e.computed(()=>w.getCalendarDays(s.value,a.value,r.value,n.minDate,n.maxDate,n.weekStartsOn)),k=e.computed(()=>{if(!n.minDate)return!1;const t=c.subMonths(new Date(a.value,s.value,1),1);return c.endOfMonth(t)<c.startOfDay(n.minDate)}),E=e.computed(()=>{if(!n.maxDate)return!1;const t=c.addMonths(new Date(a.value,s.value,1),1);return c.startOfMonth(t)>c.startOfDay(n.maxDate)}),b=e.computed(()=>{if(!n.minDate)return!1;const t=new Date(a.value-1,s.value,1);return c.endOfMonth(t)<c.startOfDay(n.minDate)}),y=e.computed(()=>{if(!n.maxDate)return!1;const t=new Date(a.value+1,s.value,1);return c.startOfMonth(t)>c.startOfDay(n.maxDate)});e.watch(s,()=>{N(),o("calendar-days",p.value)},{immediate:!0}),e.watch(a,()=>{N(),o("calendar-days",p.value)},{immediate:!0}),e.watch(()=>n.minDate,()=>{o("calendar-days",p.value)}),e.watch(()=>n.maxDate,()=>{o("calendar-days",p.value)});function u(t){return w.formatMonth(t,Y.INTL_MONTH_FORMAT,D.currentLocale)}function i(t){m.value.includes(t)||m.value.push(t)}function _(){v.returnFirstEl(m.value[0].$el).focus()}function f(t){switch(t.key){case"ArrowLeft":t.preventDefault(),l.value===0?(l.value=3,v.returnFirstEl(m.value[l.value].$el).focus()):(l.value--,v.returnFirstEl(m.value[l.value].$el).focus());break;case"ArrowRight":t.preventDefault(),l.value===3?(l.value=0,v.returnFirstEl(m.value[l.value].$el).focus()):(l.value++,v.returnFirstEl(m.value[l.value].$el).focus());break;case"ArrowDown":t.preventDefault(),o("focus-first-day");break;case"Tab":t.preventDefault(),o("focus-first-day");break;case"Escape":o("close-datepicker");break}}function N(){const t=c.getYear(n.selectedDate),g=c.getMonth(n.selectedDate);t!==a.value||g!==s.value?r.value=null:r.value=c.getDate(n.selectedDate)}function h(t){if(t===-1&&k.value||t===1&&E.value)return;(s.value===0&&t===-1||s.value===11&&t===1)&&(a.value+=t);const g=c.set(n.selectedDate,{month:s.value,year:a.value}),F=t===1?c.addMonths(g,1):c.subMonths(g,1);s.value=c.getMonth(F)}function A(t){t===-1&&b.value||t===1&&y.value||(a.value=a.value+t)}function C(){h(1)}function O(){h(-1)}function I(){return`${D.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${D.$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR")} ${a.value-1}`}function L(){return`${D.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${D.$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH")} ${u(s.value-1)}`}function R(){return`${D.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${D.$t("DIALTONE_DATEPICKER_NEXT_YEAR")} ${a.value+1}`}function d(){return`${D.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${D.$t("DIALTONE_DATEPICKER_NEXT_MONTH")} ${u(s.value+1)}`}return{selectMonth:s,selectYear:a,formattedMonth:u,setDayRef:i,focusMonthYearPicker:_,handleKeyDown:f,changeMonth:h,changeYear:A,goToNextMonth:C,goToPrevMonth:O,isPrevMonthDisabled:k,isNextMonthDisabled:E,isPrevYearDisabled:b,isNextYearDisabled:y,previousYearAriaLabel:I,previousMonthAriaLabel:L,nextYearAriaLabel:R,nextMonthAriaLabel:d}}const B={id:"calendar-heading",class:"d-datepicker__month-year-title"},K={__name:"month-year-picker",props:{selectedDate:{type:Date,required:!0},minDate:{type:Date,default:null},maxDate:{type:Date,default:null},weekStartsOn:{type:Number,default:0,validator:n=>Number.isInteger(n)&&n>=0&&n<=6}},emits:["calendar-days","focus-first-day","focus-last-day","close-datepicker"],setup(n,{expose:o,emit:s}){const a=n,r=s,l=new P.DialtoneLocalization,{selectMonth:m,selectYear:D,formattedMonth:p,setDayRef:k,focusMonthYearPicker:E,handleKeyDown:b,changeMonth:y,changeYear:u,goToNextMonth:i,goToPrevMonth:_,isPrevMonthDisabled:f,isNextMonthDisabled:N,isPrevYearDisabled:h,isNextYearDisabled:A,previousYearAriaLabel:C,previousMonthAriaLabel:O,nextMonthAriaLabel:I,nextYearAriaLabel:L}=V(a,r);return e.onMounted(()=>{E()}),o({focusMonthYearPicker:E,goToNextMonth:i,goToPrevMonth:_}),(R,d)=>(e.openBlock(),e.createBlock(e.unref(M.default),{class:"d-datepicker__month-year",direction:"row",gap:"300"},{default:e.withCtx(()=>[e.createVNode(e.unref(M.default),{as:"nav",class:"d-datepicker__nav",direction:"row",gap:"200"},{default:e.withCtx(()=>[e.createVNode(e.unref(x.default),{"fallback-placements":["top-start","auto"],message:e.unref(l).$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR"),placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(e.unref($.default),{id:"prevYearButton",ref:t=>{t&&e.unref(k)(t)},"aria-label":e.unref(C)(),circle:!0,disabled:e.unref(h),class:"d-datepicker__nav-btn",importance:"clear",kind:"muted",size:"xs",type:"button",onClick:d[0]||(d[0]=t=>e.unref(u)(-1)),onKeydown:d[1]||(d[1]=t=>e.unref(b)(t))},{default:e.withCtx(()=>[e.createVNode(e.unref(T.DtIconChevronsLeft),{size:"200"})]),_:1},8,["aria-label","disabled"])]),_:1},8,["message"]),e.createVNode(e.unref(x.default),{"fallback-placements":["top-start","auto"],message:e.unref(l).$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH"),placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(e.unref($.default),{id:"prevMonthButton",ref:t=>{t&&e.unref(k)(t)},"aria-label":e.unref(O)(),circle:!0,disabled:e.unref(f),class:"d-datepicker__nav-btn",importance:"clear",kind:"muted",size:"xs",type:"button",onClick:d[2]||(d[2]=t=>e.unref(y)(-1)),onKeydown:d[3]||(d[3]=t=>e.unref(b)(t))},{default:e.withCtx(()=>[e.createVNode(e.unref(T.DtIconChevronLeft),{size:"200"})]),_:1},8,["aria-label","disabled"])]),_:1},8,["message"])]),_:1}),e.createElementVNode("div",B,e.toDisplayString(e.unref(p)(e.unref(m)))+" "+e.toDisplayString(e.unref(D)),1),e.createVNode(e.unref(M.default),{as:"nav",class:"d-datepicker__nav",direction:"row",gap:"200"},{default:e.withCtx(()=>[e.createVNode(e.unref(x.default),{"fallback-placements":["top-end","auto"],message:e.unref(l).$t("DIALTONE_DATEPICKER_NEXT_MONTH"),placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(e.unref($.default),{id:"nextMonthButton",ref:t=>{t&&e.unref(k)(t)},"aria-label":e.unref(I)(),circle:!0,disabled:e.unref(N),class:"d-datepicker__nav-btn",importance:"clear",kind:"muted",size:"xs",type:"button",onClick:d[4]||(d[4]=t=>e.unref(y)(1)),onKeydown:d[5]||(d[5]=t=>e.unref(b)(t))},{default:e.withCtx(()=>[e.createVNode(e.unref(T.DtIconChevronRight),{size:"200"})]),_:1},8,["aria-label","disabled"])]),_:1},8,["message"]),e.createVNode(e.unref(x.default),{"fallback-placements":["top-end","auto"],message:e.unref(l).$t("DIALTONE_DATEPICKER_NEXT_YEAR"),placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(e.unref($.default),{id:"nextYearButton",ref:t=>{t&&e.unref(k)(t)},"aria-label":e.unref(L)(),circle:!0,disabled:e.unref(A),class:"d-datepicker__nav-btn",importance:"clear",kind:"muted",size:"xs",type:"button",onClick:d[6]||(d[6]=t=>e.unref(u)(1)),onKeydown:d[7]||(d[7]=t=>e.unref(b)(t))},{default:e.withCtx(()=>[e.createVNode(e.unref(T.DtIconChevronsRight),{size:"200"})]),_:1},8,["aria-label","disabled"])]),_:1},8,["message"])]),_:1})]),_:1}))}};function S(n,o){const s=e.ref(null),a=e.ref(0),r=e.ref([]),l=new P.DialtoneLocalization,m=e.computed(()=>w.getWeekDayNames(n.locale,n.weekStartsOn));e.watch(()=>n.calendarDays,()=>{a.value=0,r.value=[],s.value=null});function D(u){return l.$t("DIALTONE_DATEPICKER_SELECT_DAY")+` ${w.formatDate(u.value,Y.INTL_MONTH_FORMAT,l.currentLocale)}`}function p(u,i){!r.value.some(_=>_.el===u)&&!i.disabled&&r.value.push({el:u,day:i})}function k(u){switch(u.key){case"ArrowUp":u.preventDefault(),a.value-=7;try{v.returnFirstEl(r.value[a.value].el.$el).focus()}catch{const i=w.calculatePrevFocusDate(r.value[a.value+7].day.value);o("go-to-prev-month"),e.nextTick(()=>{v.returnFirstEl(r.value[i-1].el.$el).focus(),a.value+=i-1})}break;case"ArrowDown":u.preventDefault(),a.value+=7;try{v.returnFirstEl(r.value[a.value].el.$el).focus()}catch{const i=w.calculateNextFocusDate(r.value[a.value-7].day.value);o("go-to-next-month"),e.nextTick(()=>{v.returnFirstEl(r.value[i-1].el.$el).focus(),a.value+=i-1})}break;case"ArrowLeft":u.preventDefault(),a.value>0?(a.value-=1,v.returnFirstEl(r.value[a.value].el.$el).focus()):(o("go-to-prev-month"),b());break;case"ArrowRight":u.preventDefault(),a.value<r.value.length-1?(a.value+=1,v.returnFirstEl(r.value[a.value].el.$el).focus()):(o("go-to-next-month"),E());break;case"Tab":u.preventDefault(),o("focus-month-year-picker");break;case"Escape":o("close-datepicker");break}}function E(){a.value=0,e.nextTick(()=>{v.returnFirstEl(r.value[a.value].el.$el).focus()})}function b(){e.nextTick(()=>{a.value=r.value.length-1,v.returnFirstEl(r.value[a.value].el.$el).focus()})}function y(u){u.disabled||(s.value=u.text,o("select-date",u.value))}return{selectedDay:s,weekDays:m,dayAriaLabel:D,setDayRef:p,handleKeyDown:k,focusFirstDay:E,selectDay:y}}const z={class:"d-datepicker__calendar","aria-labelledby":"calendar-heading"},q=["title","aria-label"],H={__name:"calendar",props:{calendarDays:{type:Array,required:!0},weekStartsOn:{type:Number,default:0,validator:n=>Number.isInteger(n)&&n>=0&&n<=6}},emits:["select-date","focus-month-year-picker","close-datepicker","go-to-next-month","go-to-prev-month"],setup(n,{expose:o,emit:s}){const a=n,r=s,{selectedDay:l,weekDays:m,dayAriaLabel:D,setDayRef:p,handleKeyDown:k,focusFirstDay:E,selectDay:b}=S(a,r);return o({focusFirstDay:E}),(y,u)=>(e.openBlock(),e.createElementBlock("table",z,[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(m),i=>(e.openBlock(),e.createElementBlock("th",{key:i,scope:"col",class:"d-datepicker__cell d-datepicker__cell--header"},[e.createElementVNode("span",{class:"d-datepicker__weekday",title:i,"aria-label":i},e.toDisplayString(i),9,q)]))),128))])]),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.calendarDays,(i,_)=>(e.openBlock(),e.createElementBlock("tr",{key:_},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.days,(f,N)=>(e.openBlock(),e.createElementBlock("td",{key:_+N,class:"d-datepicker__cell",role:"listbox"},[e.createVNode(e.unref($.default),{ref_for:!0,ref:h=>{h&&e.unref(p)(h,f)},class:e.normalizeClass(["d-datepicker__day",{"d-datepicker__day--disabled":f.disabled,"d-datepicker__day--selected":e.unref(l)?f.text===e.unref(l)&&!f.disabled:f.selected}]),circle:!0,size:"sm",importance:"clear",disabled:f.disabled,type:"button","aria-selected":e.unref(l)?f.text===e.unref(l)&&!f.disabled:f.selected,"aria-label":e.unref(D)(f),role:"option",onClick:h=>e.unref(b)(f),onKeydown:u[0]||(u[0]=h=>e.unref(k)(h))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(f.text),1)]),_:2},1032,["disabled","class","aria-selected","aria-label","onClick"])]))),128))]))),128))])]))}},G={class:"d-datepicker__hd"},U={class:"d-datepicker__bd"},X={__name:"datepicker",props:{selectedDate:{type:Date,default:()=>new Date},minDate:{type:Date,default:null},maxDate:{type:Date,default:null,validator:(n,o)=>n&&o.minDate&&n<o.minDate?(console.warn("[DtDatepicker]: maxDate must be after or equal to minDate."),!1):!0},weekStartsOn:{type:Number,default:0,validator:n=>Number.isInteger(n)&&n>=0&&n<=6}},emits:["selected-date","close-datepicker"],setup(n){const o=e.ref([]);function s(a){o.value=a}return e.onMounted(()=>{const a=e.getCurrentInstance();v.warnIfUnmounted(v.returnFirstEl(a.proxy.$el),"datepicker")}),(a,r)=>(e.openBlock(),e.createBlock(e.unref(M.default),{class:"d-datepicker",gap:"400"},{default:e.withCtx(()=>[e.createElementVNode("div",G,[e.createVNode(K,{ref:"monthYearPicker","selected-date":n.selectedDate,"min-date":n.minDate,"max-date":n.maxDate,"week-starts-on":n.weekStartsOn,onCalendarDays:s,onFocusFirstDay:r[0]||(r[0]=l=>a.$refs.calendar.focusFirstDay()),onFocusLastDay:r[1]||(r[1]=l=>a.$refs.calendar.focusLastDay()),onCloseDatepicker:r[2]||(r[2]=l=>a.$emit("close-datepicker"))},null,8,["selected-date","min-date","max-date","week-starts-on"])]),e.createElementVNode("div",U,[e.createVNode(H,{ref:"calendar","calendar-days":o.value,"week-starts-on":n.weekStartsOn,onSelectDate:r[3]||(r[3]=l=>a.$emit("selected-date",l)),onFocusMonthYearPicker:r[4]||(r[4]=l=>a.$refs.monthYearPicker.focusMonthYearPicker()),onCloseDatepicker:r[5]||(r[5]=l=>a.$emit("close-datepicker")),onGoToNextMonth:r[6]||(r[6]=l=>a.$refs.monthYearPicker.goToNextMonth()),onGoToPrevMonth:r[7]||(r[7]=l=>a.$refs.monthYearPicker.goToPrevMonth())},null,8,["calendar-days","week-starts-on"])])]),_:1}))}};exports.default=X;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),T=require("@dialpad/dialtone-icons/vue3"),c=require("date-fns"),w=require("./utils.cjs"),Y=require("./datepicker-constants.cjs"),v=require("../../common/utils/index.cjs"),P=require("../../localization/index.cjs"),M=require("../stack/stack.cjs"),x=require("../tooltip/tooltip.cjs"),$=require("../button/button.cjs");function V(n,o){const s=e.ref(c.getMonth(n.selectedDate)),a=e.ref(c.getYear(n.selectedDate)),r=e.ref(null),l=e.ref(0),m=e.ref([]),D=new P.DialtoneLocalization,h=e.computed(()=>w.getCalendarDays(s.value,a.value,r.value,n.minDate,n.maxDate,n.weekStartsOn)),k=e.computed(()=>{if(!n.minDate)return!1;const t=c.subMonths(new Date(a.value,s.value,1),1);return c.endOfMonth(t)<c.startOfDay(n.minDate)}),E=e.computed(()=>{if(!n.maxDate)return!1;const t=c.addMonths(new Date(a.value,s.value,1),1);return c.startOfMonth(t)>c.startOfDay(n.maxDate)}),b=e.computed(()=>{if(!n.minDate)return!1;const t=new Date(a.value-1,s.value,1);return c.endOfMonth(t)<c.startOfDay(n.minDate)}),y=e.computed(()=>{if(!n.maxDate)return!1;const t=new Date(a.value+1,s.value,1);return c.startOfMonth(t)>c.startOfDay(n.maxDate)});e.watch(s,()=>{N(),o("calendar-days",h.value)},{immediate:!0}),e.watch(a,()=>{N(),o("calendar-days",h.value)},{immediate:!0}),e.watch(()=>n.minDate,()=>{o("calendar-days",h.value)}),e.watch(()=>n.maxDate,()=>{o("calendar-days",h.value)});function u(t){return w.formatMonth(t,Y.INTL_MONTH_FORMAT,D.currentLocale)}function i(t){m.value.includes(t)||m.value.push(t)}function _(){v.returnFirstEl(m.value[0].$el).focus()}function f(t){switch(t.key){case"ArrowLeft":t.preventDefault(),l.value===0?(l.value=3,v.returnFirstEl(m.value[l.value].$el).focus()):(l.value--,v.returnFirstEl(m.value[l.value].$el).focus());break;case"ArrowRight":t.preventDefault(),l.value===3?(l.value=0,v.returnFirstEl(m.value[l.value].$el).focus()):(l.value++,v.returnFirstEl(m.value[l.value].$el).focus());break;case"ArrowDown":t.preventDefault(),o("focus-first-day");break;case"Tab":t.preventDefault(),o("focus-first-day");break;case"Escape":o("close-datepicker");break}}function N(){const t=c.getYear(n.selectedDate),g=c.getMonth(n.selectedDate);t!==a.value||g!==s.value?r.value=null:r.value=c.getDate(n.selectedDate)}function p(t){if(t===-1&&k.value||t===1&&E.value)return;(s.value===0&&t===-1||s.value===11&&t===1)&&(a.value+=t);const g=c.set(n.selectedDate,{month:s.value,year:a.value}),F=t===1?c.addMonths(g,1):c.subMonths(g,1);s.value=c.getMonth(F)}function A(t){t===-1&&b.value||t===1&&y.value||(a.value=a.value+t)}function C(){p(1)}function O(){p(-1)}function L(){return`${D.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${D.$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR")} ${a.value-1}`}function I(){return`${D.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${D.$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH")} ${u(s.value-1)}`}function R(){return`${D.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${D.$t("DIALTONE_DATEPICKER_NEXT_YEAR")} ${a.value+1}`}function d(){return`${D.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${D.$t("DIALTONE_DATEPICKER_NEXT_MONTH")} ${u(s.value+1)}`}return{selectMonth:s,selectYear:a,formattedMonth:u,setDayRef:i,focusMonthYearPicker:_,handleKeyDown:f,changeMonth:p,changeYear:A,goToNextMonth:C,goToPrevMonth:O,isPrevMonthDisabled:k,isNextMonthDisabled:E,isPrevYearDisabled:b,isNextYearDisabled:y,previousYearAriaLabel:L,previousMonthAriaLabel:I,nextYearAriaLabel:R,nextMonthAriaLabel:d}}const B={id:"calendar-heading",class:"d-datepicker__month-year-title"},K={__name:"month-year-picker",props:{selectedDate:{type:Date,required:!0},minDate:{type:Date,default:null},maxDate:{type:Date,default:null},weekStartsOn:{type:Number,default:0,validator:n=>Number.isInteger(n)&&n>=0&&n<=6}},emits:["calendar-days","focus-first-day","focus-last-day","close-datepicker"],setup(n,{expose:o,emit:s}){const a=n,r=s,l=new P.DialtoneLocalization,{selectMonth:m,selectYear:D,formattedMonth:h,setDayRef:k,focusMonthYearPicker:E,handleKeyDown:b,changeMonth:y,changeYear:u,goToNextMonth:i,goToPrevMonth:_,isPrevMonthDisabled:f,isNextMonthDisabled:N,isPrevYearDisabled:p,isNextYearDisabled:A,previousYearAriaLabel:C,previousMonthAriaLabel:O,nextMonthAriaLabel:L,nextYearAriaLabel:I}=V(a,r);return e.onMounted(()=>{E()}),o({focusMonthYearPicker:E,goToNextMonth:i,goToPrevMonth:_}),(R,d)=>(e.openBlock(),e.createBlock(e.unref(M.default),{class:"d-datepicker__month-year",direction:"row",gap:"300"},{default:e.withCtx(()=>[e.createVNode(e.unref(M.default),{as:"nav",class:"d-datepicker__nav",direction:"row",gap:"200"},{default:e.withCtx(()=>[e.createVNode(e.unref(x.default),{"fallback-placements":["top-start","auto"],message:e.unref(l).$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR"),placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(e.unref($.default),{id:"prevYearButton",ref:t=>{t&&e.unref(k)(t)},"aria-label":e.unref(C)(),circle:!0,disabled:e.unref(p),class:"d-datepicker__nav-btn",importance:"clear",kind:"muted",size:"xs",type:"button",onClick:d[0]||(d[0]=t=>e.unref(u)(-1)),onKeydown:d[1]||(d[1]=t=>e.unref(b)(t))},{default:e.withCtx(()=>[e.createVNode(e.unref(T.DtIconChevronsLeft),{size:"200"})]),_:1},8,["aria-label","disabled"])]),_:1},8,["message"]),e.createVNode(e.unref(x.default),{"fallback-placements":["top-start","auto"],message:e.unref(l).$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH"),placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(e.unref($.default),{id:"prevMonthButton",ref:t=>{t&&e.unref(k)(t)},"aria-label":e.unref(O)(),circle:!0,disabled:e.unref(f),class:"d-datepicker__nav-btn",importance:"clear",kind:"muted",size:"xs",type:"button",onClick:d[2]||(d[2]=t=>e.unref(y)(-1)),onKeydown:d[3]||(d[3]=t=>e.unref(b)(t))},{default:e.withCtx(()=>[e.createVNode(e.unref(T.DtIconChevronLeft),{size:"200"})]),_:1},8,["aria-label","disabled"])]),_:1},8,["message"])]),_:1}),e.createElementVNode("div",B,e.toDisplayString(e.unref(h)(e.unref(m)))+" "+e.toDisplayString(e.unref(D)),1),e.createVNode(e.unref(M.default),{as:"nav",class:"d-datepicker__nav",direction:"row",gap:"200"},{default:e.withCtx(()=>[e.createVNode(e.unref(x.default),{"fallback-placements":["top-end","auto"],message:e.unref(l).$t("DIALTONE_DATEPICKER_NEXT_MONTH"),placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(e.unref($.default),{id:"nextMonthButton",ref:t=>{t&&e.unref(k)(t)},"aria-label":e.unref(L)(),circle:!0,disabled:e.unref(N),class:"d-datepicker__nav-btn",importance:"clear",kind:"muted",size:"xs",type:"button",onClick:d[4]||(d[4]=t=>e.unref(y)(1)),onKeydown:d[5]||(d[5]=t=>e.unref(b)(t))},{default:e.withCtx(()=>[e.createVNode(e.unref(T.DtIconChevronRight),{size:"200"})]),_:1},8,["aria-label","disabled"])]),_:1},8,["message"]),e.createVNode(e.unref(x.default),{"fallback-placements":["top-end","auto"],message:e.unref(l).$t("DIALTONE_DATEPICKER_NEXT_YEAR"),placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(e.unref($.default),{id:"nextYearButton",ref:t=>{t&&e.unref(k)(t)},"aria-label":e.unref(I)(),circle:!0,disabled:e.unref(A),class:"d-datepicker__nav-btn",importance:"clear",kind:"muted",size:"xs",type:"button",onClick:d[6]||(d[6]=t=>e.unref(u)(1)),onKeydown:d[7]||(d[7]=t=>e.unref(b)(t))},{default:e.withCtx(()=>[e.createVNode(e.unref(T.DtIconChevronsRight),{size:"200"})]),_:1},8,["aria-label","disabled"])]),_:1},8,["message"])]),_:1})]),_:1}))}};function S(n,o){const s=e.ref(null),a=e.ref(0),r=e.ref([]),l=new P.DialtoneLocalization,m=e.computed(()=>w.getWeekDayNames(l.currentLocale,n.weekStartsOn));e.watch(()=>n.calendarDays,()=>{a.value=0,r.value=[],s.value=null});function D(u){return l.$t("DIALTONE_DATEPICKER_SELECT_DAY")+` ${w.formatDate(u.value,Y.INTL_MONTH_FORMAT,l.currentLocale)}`}function h(u,i){!r.value.some(_=>_.el===u)&&!i.disabled&&r.value.push({el:u,day:i})}function k(u){switch(u.key){case"ArrowUp":u.preventDefault(),a.value-=7;try{v.returnFirstEl(r.value[a.value].el.$el).focus()}catch{const i=w.calculatePrevFocusDate(r.value[a.value+7].day.value);o("go-to-prev-month"),e.nextTick(()=>{v.returnFirstEl(r.value[i-1].el.$el).focus(),a.value+=i-1})}break;case"ArrowDown":u.preventDefault(),a.value+=7;try{v.returnFirstEl(r.value[a.value].el.$el).focus()}catch{const i=w.calculateNextFocusDate(r.value[a.value-7].day.value);o("go-to-next-month"),e.nextTick(()=>{v.returnFirstEl(r.value[i-1].el.$el).focus(),a.value+=i-1})}break;case"ArrowLeft":u.preventDefault(),a.value>0?(a.value-=1,v.returnFirstEl(r.value[a.value].el.$el).focus()):(o("go-to-prev-month"),b());break;case"ArrowRight":u.preventDefault(),a.value<r.value.length-1?(a.value+=1,v.returnFirstEl(r.value[a.value].el.$el).focus()):(o("go-to-next-month"),E());break;case"Tab":u.preventDefault(),o("focus-month-year-picker");break;case"Escape":o("close-datepicker");break}}function E(){a.value=0,e.nextTick(()=>{v.returnFirstEl(r.value[a.value].el.$el).focus()})}function b(){e.nextTick(()=>{a.value=r.value.length-1,v.returnFirstEl(r.value[a.value].el.$el).focus()})}function y(u){u.disabled||(s.value=u.text,o("select-date",u.value))}return{selectedDay:s,weekDays:m,dayAriaLabel:D,setDayRef:h,handleKeyDown:k,focusFirstDay:E,selectDay:y}}const z={class:"d-datepicker__calendar","aria-labelledby":"calendar-heading"},q=["title","aria-label"],H={__name:"calendar",props:{calendarDays:{type:Array,required:!0},weekStartsOn:{type:Number,default:0,validator:n=>Number.isInteger(n)&&n>=0&&n<=6}},emits:["select-date","focus-month-year-picker","close-datepicker","go-to-next-month","go-to-prev-month"],setup(n,{expose:o,emit:s}){const a=n,r=s,{selectedDay:l,weekDays:m,dayAriaLabel:D,setDayRef:h,handleKeyDown:k,focusFirstDay:E,selectDay:b}=S(a,r);return o({focusFirstDay:E}),(y,u)=>(e.openBlock(),e.createElementBlock("table",z,[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(m),i=>(e.openBlock(),e.createElementBlock("th",{key:i,scope:"col",class:"d-datepicker__cell d-datepicker__cell--header"},[e.createElementVNode("span",{class:"d-datepicker__weekday",title:i,"aria-label":i},e.toDisplayString(i),9,q)]))),128))])]),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.calendarDays,(i,_)=>(e.openBlock(),e.createElementBlock("tr",{key:_},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.days,(f,N)=>(e.openBlock(),e.createElementBlock("td",{key:_+N,class:"d-datepicker__cell",role:"listbox"},[e.createVNode(e.unref($.default),{ref_for:!0,ref:p=>{p&&e.unref(h)(p,f)},class:e.normalizeClass(["d-datepicker__day",{"d-datepicker__day--disabled":f.disabled,"d-datepicker__day--selected":e.unref(l)?f.text===e.unref(l)&&!f.disabled:f.selected}]),circle:!0,size:"sm",importance:"clear",disabled:f.disabled,type:"button","aria-selected":e.unref(l)?f.text===e.unref(l)&&!f.disabled:f.selected,"aria-label":e.unref(D)(f),role:"option",onClick:p=>e.unref(b)(f),onKeydown:u[0]||(u[0]=p=>e.unref(k)(p))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(f.text),1)]),_:2},1032,["disabled","class","aria-selected","aria-label","onClick"])]))),128))]))),128))])]))}},G={class:"d-datepicker__hd"},U={class:"d-datepicker__bd"},X={__name:"datepicker",props:{selectedDate:{type:Date,default:()=>new Date},minDate:{type:Date,default:null},maxDate:{type:Date,default:null,validator:(n,o)=>n&&o.minDate&&n<o.minDate?(console.warn("[DtDatepicker]: maxDate must be after or equal to minDate."),!1):!0},weekStartsOn:{type:Number,default:0,validator:n=>Number.isInteger(n)&&n>=0&&n<=6}},emits:["selected-date","close-datepicker"],setup(n){const o=e.ref([]);function s(a){o.value=a}return e.onMounted(()=>{const a=e.getCurrentInstance();v.warnIfUnmounted(v.returnFirstEl(a.proxy.$el),"datepicker")}),(a,r)=>(e.openBlock(),e.createBlock(e.unref(M.default),{class:"d-datepicker",gap:"400"},{default:e.withCtx(()=>[e.createElementVNode("div",G,[e.createVNode(K,{ref:"monthYearPicker","selected-date":n.selectedDate,"min-date":n.minDate,"max-date":n.maxDate,"week-starts-on":n.weekStartsOn,onCalendarDays:s,onFocusFirstDay:r[0]||(r[0]=l=>a.$refs.calendar.focusFirstDay()),onFocusLastDay:r[1]||(r[1]=l=>a.$refs.calendar.focusLastDay()),onCloseDatepicker:r[2]||(r[2]=l=>a.$emit("close-datepicker"))},null,8,["selected-date","min-date","max-date","week-starts-on"])]),e.createElementVNode("div",U,[e.createVNode(H,{ref:"calendar","calendar-days":o.value,"week-starts-on":n.weekStartsOn,onSelectDate:r[3]||(r[3]=l=>a.$emit("selected-date",l)),onFocusMonthYearPicker:r[4]||(r[4]=l=>a.$refs.monthYearPicker.focusMonthYearPicker()),onCloseDatepicker:r[5]||(r[5]=l=>a.$emit("close-datepicker")),onGoToNextMonth:r[6]||(r[6]=l=>a.$refs.monthYearPicker.goToNextMonth()),onGoToPrevMonth:r[7]||(r[7]=l=>a.$refs.monthYearPicker.goToPrevMonth())},null,8,["calendar-days","week-starts-on"])])]),_:1}))}};exports.default=X;
 //# sourceMappingURL=datepicker.cjs.map