@dialpad/dialtone-vue 3.218.3 → 3.219.0-next.2

package/dist/lib/link/link.js

@@ -1,5 +1,5 @@
-import { resolveComponent as r, openBlock as n, createBlock as o, resolveDynamicComponent as a, mergeProps as i, withCtx as s, renderSlot as l } from "vue";
-import { getLinkKindModifier as d, LINK_KIND_MODIFIERS as p, LINK_VARIANTS as u } from "./link-constants.js";
+import { resolveComponent as r, openBlock as n, createBlock as o, resolveDynamicComponent as a, mergeProps as i, withCtx as l, renderSlot as s } from "vue";
+import { getLinkKindModifier as d, LINK_KIND_MODIFIERS as u, LINK_VARIANTS as p } from "./link-constants.js";
 import { _ as c } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const f = {
   compatConfig: { MODE: 3 },
@@ -12,14 +12,15 @@ const f = {
     kind: {
       type: String,
       default: "",
-      validator(t) {
-        return u.includes(t);
+      validator(e) {
+        return p.includes(e);
       }
     },
     /**
      * Determines whether the link should have inverted styling
      * default is false.
      * @values true, false
+     * @deprecated Use v-dt-mode directive instead.
      */
     inverted: {
       type: Boolean,
@@ -49,11 +50,19 @@ const f = {
     replace: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * Determines whether the link should display an underline.
+     * @values true, false
+     */
+    underline: {
+      type: Boolean,
+      default: !0
     }
   },
   data() {
     return {
-      LINK_KIND_MODIFIERS: p
+      LINK_KIND_MODIFIERS: u
     };
   },
   computed: {
@@ -73,18 +82,19 @@ const f = {
     getLinkClasses() {
       return [
         "d-link",
-        d(this.kind, this.inverted)
+        d(this.kind, this.inverted),
+        { "d-link--no-underline": !this.underline }
       ];
     }
   }
 };
-function m(t, h, k, _, g, e) {
-  return n(), o(a(e.computedTag), i({
-    class: e.getLinkClasses(),
+function m(e, h, k, _, g, t) {
+  return n(), o(a(t.computedTag), i({
+    class: t.getLinkClasses(),
     "data-qa": "dt-link"
-  }, e.computedAttrs), {
-    default: s(() => [
-      l(t.$slots, "default")
+  }, t.computedAttrs), {
+    default: l(() => [
+      s(e.$slots, "default")
     ]),
     _: 3
   }, 16, ["class"]);

package/dist/lib/link/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","sources":["../../../components/link/link.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"computedTag\"\n    :class=\"getLinkClasses()\"\n    data-qa=\"dt-link\"\n    v-bind=\"computedAttrs\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { resolveComponent } from 'vue';\nimport { LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier } from './link_constants';\n\n/**\n * A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtLink',\n\n  props: {\n    /**\n     * Applies the link variant styles\n     * @values null, danger, warning, success, muted, mention\n     */\n    kind: {\n      type: String,\n      default: '',\n      validator (kind) {\n        return LINK_VARIANTS.includes(kind);\n      },\n    },\n\n    /**\n     * Determines whether the link should have inverted styling\n     * default is false.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * URL for anchor link navigation. Renders as a native <a> element.\n     */\n    href: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Vue Router destination. Renders as a <router-link>.\n     * Takes precedence over href when both are provided.\n     * @see https://router.vuejs.org/api/interfaces/RouterLinkProps.html#to\n     */\n    to: {\n      type: [String, Object],\n      default: null,\n    },\n\n    /**\n     * When true, navigation replaces the current history entry instead of pushing.\n     * Only applies when `to` is provided.\n     * @values true, false\n     */\n    replace: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      LINK_KIND_MODIFIERS,\n    };\n  },\n\n  computed: {\n    computedTag () {\n      if (this.to) {\n        return resolveComponent('RouterLink');\n      }\n      return 'a';\n    },\n\n    computedAttrs () {\n      if (this.to) {\n        return {\n          to: this.to,\n          replace: this.replace,\n        };\n      }\n      return {\n        href: this.href || 'javascript:void(0)',\n      };\n    },\n  },\n\n  methods: {\n    getLinkClasses () {\n      return [\n        'd-link',\n        getLinkKindModifier(this.kind, this.inverted),\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","kind","LINK_VARIANTS","LINK_KIND_MODIFIERS","resolveComponent","getLinkKindModifier","_createBlock","_resolveDynamicComponent","$options","_mergeProps","_renderSlot","_ctx"],"mappings":";;;AAqBA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAWC,GAAM;AACf,eAAOC,EAAc,SAASD,CAAI;AAAA,MACpC;AAAA;;;;;;IAQF,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;IAQX,IAAI;AAAA,MACF,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA;;;;;;IAQX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,qBAAAE;AAAA;EAEJ;AAAA,EAEA,UAAU;AAAA,IACR,cAAe;AACb,aAAI,KAAK,KACAC,EAAiB,YAAY,IAE/B;AAAA,IACT;AAAA,IAEA,gBAAiB;AACf,aAAI,KAAK,KACA;AAAA,QACL,IAAI,KAAK;AAAA,QACT,SAAS,KAAK;AAAA,UAGX;AAAA,QACL,MAAM,KAAK,QAAQ;AAAA;IAEvB;AAAA;EAGF,SAAS;AAAA,IACP,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACAC,EAAoB,KAAK,MAAM,KAAK,QAAQ;AAAA;IAEhD;AAAA;AAEJ;;cA/GEC,EAQYC,EAPLC,EAAA,WAAW,GADlBC,EAQY;AAAA,IANT,OAAOD,EAAA,eAAc;AAAA,IACtB,WAAQ;AAAA,KACAA,EAAA,aAAa,GAAA;AAAA,eAGrB,MAAQ;AAAA,MAARE,EAAQC,EAAA,QAAA,SAAA;AAAA;;;;;"}
+{"version":3,"file":"link.js","sources":["../../../components/link/link.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"computedTag\"\n    :class=\"getLinkClasses()\"\n    data-qa=\"dt-link\"\n    v-bind=\"computedAttrs\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { resolveComponent } from 'vue';\nimport { LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier } from './link_constants';\n\n/**\n * A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtLink',\n\n  props: {\n    /**\n     * Applies the link variant styles\n     * @values null, danger, warning, success, muted, mention\n     */\n    kind: {\n      type: String,\n      default: '',\n      validator (kind) {\n        return LINK_VARIANTS.includes(kind);\n      },\n    },\n\n    /**\n     * Determines whether the link should have inverted styling\n     * default is false.\n     * @values true, false\n     * @deprecated Use v-dt-mode directive instead.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * URL for anchor link navigation. Renders as a native <a> element.\n     */\n    href: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Vue Router destination. Renders as a <router-link>.\n     * Takes precedence over href when both are provided.\n     * @see https://router.vuejs.org/api/interfaces/RouterLinkProps.html#to\n     */\n    to: {\n      type: [String, Object],\n      default: null,\n    },\n\n    /**\n     * When true, navigation replaces the current history entry instead of pushing.\n     * Only applies when `to` is provided.\n     * @values true, false\n     */\n    replace: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the link should display an underline.\n     * @values true, false\n     */\n    underline: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  data () {\n    return {\n      LINK_KIND_MODIFIERS,\n    };\n  },\n\n  computed: {\n    computedTag () {\n      if (this.to) {\n        return resolveComponent('RouterLink');\n      }\n      return 'a';\n    },\n\n    computedAttrs () {\n      if (this.to) {\n        return {\n          to: this.to,\n          replace: this.replace,\n        };\n      }\n      return {\n        href: this.href || 'javascript:void(0)',\n      };\n    },\n  },\n\n  methods: {\n    getLinkClasses () {\n      return [\n        'd-link',\n        getLinkKindModifier(this.kind, this.inverted),\n        { 'd-link--no-underline': !this.underline },\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","kind","LINK_VARIANTS","LINK_KIND_MODIFIERS","resolveComponent","getLinkKindModifier","_createBlock","_resolveDynamicComponent","$options","_mergeProps","_renderSlot","_ctx"],"mappings":";;;AAqBA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAWC,GAAM;AACf,eAAOC,EAAc,SAASD,CAAI;AAAA,MACpC;AAAA;;;;;;;IASF,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;IAQX,IAAI;AAAA,MACF,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA;;;;;;IAQX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,qBAAAE;AAAA;EAEJ;AAAA,EAEA,UAAU;AAAA,IACR,cAAe;AACb,aAAI,KAAK,KACAC,EAAiB,YAAY,IAE/B;AAAA,IACT;AAAA,IAEA,gBAAiB;AACf,aAAI,KAAK,KACA;AAAA,QACL,IAAI,KAAK;AAAA,QACT,SAAS,KAAK;AAAA,UAGX;AAAA,QACL,MAAM,KAAK,QAAQ;AAAA;IAEvB;AAAA;EAGF,SAAS;AAAA,IACP,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACAC,EAAoB,KAAK,MAAM,KAAK,QAAQ;AAAA,QAC5C,EAAE,wBAAwB,CAAC,KAAK;;IAEpC;AAAA;AAEJ;;cA1HEC,EAQYC,EAPLC,EAAA,WAAW,GADlBC,EAQY;AAAA,IANT,OAAOD,EAAA,eAAc;AAAA,IACtB,WAAQ;AAAA,KACAA,EAAA,aAAa,GAAA;AAAA,eAGrB,MAAQ;AAAA,MAARE,EAAQC,EAAA,QAAA,SAAA;AAAA;;;;;"}

package/dist/lib/list-item/list-item.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./list-item-constants.cjs"),r=require("../../common/utils/index.cjs"),d=require("@dialpad/dialtone-icons/vue3"),t=require("vue"),u=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),c=require("../item-layout/item-layout.cjs"),m=["listitem","menuitem","option"],_={compatConfig:{MODE:3},name:"DtListItem",components:{DtItemLayout:c.default,DtIconCheck:d.DtIconCheck},inject:{highlightId:{default:null}},props:{id:{type:String,default(){return r.default.getUniqueString()}},role:{type:String,default:"listitem",validator:e=>m.includes(e)},elementType:{type:String,default:"li"},type:{type:String,default:s.LIST_ITEM_TYPES.DEFAULT,validator:e=>Object.values(s.LIST_ITEM_TYPES).includes(e)},navigationType:{type:String,default:s.LIST_ITEM_NAVIGATION_TYPES.NONE,validator:e=>Object.values(s.LIST_ITEM_NAVIGATION_TYPES).includes(e)},selected:{type:Boolean,default:!1},wrapperClass:{type:[String,Object,Array],default:""}},emits:["keydown","mousemove","mouseleave"],data(){return{injected:!1,mouseHighlighted:!1}},computed:{isDefaultType(){return this.type===s.LIST_ITEM_TYPES.DEFAULT},listItemListeners(){return{keydown:e=>{["enter","space"].includes(e.code.toLowerCase())&&this.onClick(e),this.$emit("keydown",e)},mousemove:e=>{this.onMouseHover(e),this.$emit("mousemove",e)},mouseleave:e=>{this.onMouseLeave(e),this.$emit("mouseleave",e)}}},isHighlighted(){return this.isHoverable?this.highlightId&&this.highlightId()?this.id===this.highlightId():this.mouseHighlighted:!1},isFocusable(){return this.navigationType===s.LIST_ITEM_NAVIGATION_TYPES.TAB},isHoverable(){return this.navigationType!==s.LIST_ITEM_NAVIGATION_TYPES.NONE}},methods:{onClick(e){this.$emit("click",e)},onMouseHover(){this.mouseHighlighted=!0},onMouseLeave(){this.mouseHighlighted=!1}}};function h(e,T,l,I,f,i){const a=t.resolveComponent("dt-icon-check"),n=t.resolveComponent("dt-item-layout");return t.openBlock(),t.createBlock(t.resolveDynamicComponent(l.elementType),t.mergeProps({id:l.id,class:["d-list-item",{"d-list-item--focusable":i.isFocusable,"d-list-item--highlighted":i.isHighlighted,"d-list-item--static":!i.isHoverable}],tabindex:i.isFocusable?0:-1,role:l.role,"aria-selected":l.role==="listitem"?void 0:i.isHighlighted},t.toHandlers(i.listItemListeners)),{default:t.withCtx(()=>[i.isDefaultType?(t.openBlock(),t.createBlock(n,{key:0,unstyled:"",class:t.normalizeClass(["d-list-item__wrapper",l.wrapperClass]),"left-class":"d-list-item__left","content-class":"d-list-item__content","title-class":"d-list-item__title","subtitle-class":"d-list-item__subtitle","bottom-class":"d-list-item__bottom","right-class":"d-list-item__right","selected-class":"d-list-item__selected","data-qa":"dt-list-item-wrapper"},t.createSlots({_:2},[t.renderList(e.$slots,(y,o)=>({name:o,fn:t.withCtx(()=>[t.renderSlot(e.$slots,o)])})),l.selected?{name:"selected",fn:t.withCtx(()=>[t.createVNode(a,{size:"400"})]),key:"0"}:void 0]),1032,["class"])):t.renderSlot(e.$slots,"default",{key:1})]),_:3},16,["id","class","tabindex","role","aria-selected"])}const g=u._(_,[["render",h]]);exports.default=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./list-item-constants.cjs"),r=require("../../common/utils/index.cjs"),d=require("@dialpad/dialtone-icons/vue"),t=require("vue"),c=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),u=require("../item-layout/item-layout.cjs"),m=["listitem","menuitem","option"],_={compatConfig:{MODE:3},name:"DtListItem",components:{DtItemLayout:u.default,DtIconCheck:d.DtIconCheck},inject:{highlightId:{default:null}},props:{id:{type:String,default(){return r.default.getUniqueString()}},role:{type:String,default:"listitem",validator:e=>m.includes(e)},elementType:{type:String,default:"li"},type:{type:String,default:s.LIST_ITEM_TYPES.DEFAULT,validator:e=>Object.values(s.LIST_ITEM_TYPES).includes(e)},navigationType:{type:String,default:s.LIST_ITEM_NAVIGATION_TYPES.NONE,validator:e=>Object.values(s.LIST_ITEM_NAVIGATION_TYPES).includes(e)},selected:{type:Boolean,default:!1},wrapperClass:{type:[String,Object,Array],default:""}},emits:["click","keydown","mousemove","mouseleave"],data(){return{injected:!1,mouseHighlighted:!1}},computed:{isDefaultType(){return this.type===s.LIST_ITEM_TYPES.DEFAULT},listItemListeners(){return{click:e=>{this.onClick(e)},keydown:e=>{["enter","space"].includes(e.code.toLowerCase())&&this.onClick(e),this.$emit("keydown",e)},mousemove:e=>{this.onMouseHover(e),this.$emit("mousemove",e)},mouseleave:e=>{this.onMouseLeave(e),this.$emit("mouseleave",e)}}},isHighlighted(){return this.isHoverable?this.highlightId&&this.highlightId()?this.id===this.highlightId():this.mouseHighlighted:!1},isFocusable(){return this.navigationType===s.LIST_ITEM_NAVIGATION_TYPES.TAB},isHoverable(){return this.navigationType!==s.LIST_ITEM_NAVIGATION_TYPES.NONE}},methods:{onClick(e){this.$emit("click",e)},onMouseHover(){this.mouseHighlighted=!0},onMouseLeave(){this.mouseHighlighted=!1}}};function h(e,T,l,I,f,i){const n=t.resolveComponent("dt-icon-check"),a=t.resolveComponent("dt-item-layout");return t.openBlock(),t.createBlock(t.resolveDynamicComponent(l.elementType),t.mergeProps({id:l.id,class:["d-list-item",{"d-list-item--focusable":i.isFocusable,"d-list-item--highlighted":i.isHighlighted,"d-list-item--static":!i.isHoverable}],tabindex:i.isFocusable?0:-1,role:l.role,"aria-selected":l.role==="listitem"?void 0:i.isHighlighted},t.toHandlers(i.listItemListeners)),{default:t.withCtx(()=>[i.isDefaultType?(t.openBlock(),t.createBlock(a,{key:0,unstyled:"",class:t.normalizeClass(["d-list-item__wrapper",l.wrapperClass]),"start-class":"d-list-item__left","content-class":"d-list-item__content","title-class":"d-list-item__title","subtitle-class":"d-list-item__subtitle","block-end-class":"d-list-item__bottom","end-class":"d-list-item__right","selected-class":"d-list-item__selected","data-qa":"dt-list-item-wrapper"},t.createSlots({_:2},[t.renderList(e.$slots,(y,o)=>({name:o,fn:t.withCtx(()=>[t.renderSlot(e.$slots,o)])})),l.selected?{name:"selected",fn:t.withCtx(()=>[t.createVNode(n,{size:"200"})]),key:"0"}:void 0]),1032,["class"])):t.renderSlot(e.$slots,"default",{key:1})]),_:3},16,["id","class","tabindex","role","aria-selected"])}const g=c._(_,[["render",h]]);exports.default=g;
 //# sourceMappingURL=list-item.cjs.map

package/dist/lib/list-item/list-item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.cjs","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"[\n      'd-list-item',\n      {\n        'd-list-item--focusable': isFocusable,\n        'd-list-item--highlighted': isHighlighted,\n        'd-list-item--static': !isHoverable,\n      }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <dt-item-layout\n      v-if=\"isDefaultType\"\n      unstyled\n      :class=\"['d-list-item__wrapper', wrapperClass]\"\n      left-class=\"d-list-item__left\"\n      content-class=\"d-list-item__content\"\n      title-class=\"d-list-item__title\"\n      subtitle-class=\"d-list-item__subtitle\"\n      bottom-class=\"d-list-item__bottom\"\n      right-class=\"d-list-item__right\"\n      selected-class=\"d-list-item__selected\"\n      data-qa=\"dt-list-item-wrapper\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon-check size=\"400\" />\n      </template>\n    </dt-item-layout>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue3';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Additional Classes to apply to the wrapper element,\n     * note: it only applies on \"default\" type\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    wrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    isDefaultType () {\n      return this.type === LIST_ITEM_TYPES.DEFAULT;\n    },\n\n    listItemListeners () {\n      return {\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      // disabled as we do not want to override native click\n      // eslint-disable-next-line vue/require-explicit-emits\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n"],"names":["ROLES","_sfc_main","DtItemLayout","DtIconCheck","utils","role","LIST_ITEM_TYPES","t","LIST_ITEM_NAVIGATION_TYPES","event","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","_component_dt_item_layout","_ctx","_","slotName","_renderSlot","_createVNode","_component_dt_icon_check"],"mappings":"oWAyDMA,EAAQ,CAAC,WAAY,WAAY,QAAQ,EAM1CC,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,aAEN,WAAY,cACVC,EAAAA,oBACAC,EAAAA,aAMF,OAAQ,CACN,YAAa,CAAE,QAAS,IAAG,GAG7B,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAW,CAAE,OAAOC,EAAAA,QAAM,gBAAe,CAAI,GAM/C,KAAM,CACJ,KAAM,OACN,QAAS,WACT,UAAYC,GAAUL,EAAO,SAASK,CAAI,GAM5C,YAAa,CACX,KAAM,OACN,QAAS,MAOX,KAAM,CACJ,KAAM,OACN,QAASC,EAAAA,gBAAgB,QACzB,UAAYC,GAAM,OAAO,OAAOD,iBAAe,EAAE,SAASC,CAAC,GAU7D,eAAgB,CACd,KAAM,OACN,QAASC,EAAAA,2BAA2B,KACpC,UAAYD,GAAM,OAAO,OAAOC,4BAA0B,EAAE,SAASD,CAAC,GAMxE,SAAU,CACR,KAAM,QACN,QAAS,IASX,aAAc,CACZ,KAAM,CAAC,OAAQ,OAAQ,KAAK,EAC5B,QAAS,KAIb,MAAO,CAOL,UAQA,YAQA,cAGF,MAAQ,CACN,MAAO,CACL,SAAU,GACV,iBAAkB,GAEtB,EAEA,SAAU,CACR,eAAiB,CACf,OAAO,KAAK,OAASD,EAAAA,gBAAgB,OACvC,EAEA,mBAAqB,CACnB,MAAO,CACL,QAASG,GAAS,CACZ,CAAC,QAAS,OAAO,EAAE,SAASA,EAAM,KAAK,YAAW,CAAE,GACtD,KAAK,QAAQA,CAAK,EAEpB,KAAK,MAAM,UAAWA,CAAK,CAC7B,EAEA,UAAWA,GAAS,CAClB,KAAK,aAAaA,CAAK,EACvB,KAAK,MAAM,YAAaA,CAAK,CAC/B,EAEA,WAAYA,GAAS,CACnB,KAAK,aAAaA,CAAK,EACvB,KAAK,MAAM,aAAcA,CAAK,CAChC,EAEJ,EAMA,eAAiB,CACf,OAAI,KAAK,YACA,KAAK,aAAe,KAAK,YAAW,EAAK,KAAK,KAAO,KAAK,YAAW,EAAK,KAAK,iBAEjF,EACT,EAEA,aAAe,CAEb,OAAO,KAAK,iBAAmBD,EAAAA,2BAA2B,GAC5D,EAKA,aAAe,CACb,OAAO,KAAK,iBAAmBA,EAAAA,2BAA2B,IAC5D,GAGF,QAAS,CACP,QAAS,EAAG,CAGV,KAAK,MAAM,QAAS,CAAC,CACvB,EAEA,cAAgB,CACd,KAAK,iBAAmB,EAC1B,EAEA,cAAgB,CACd,KAAK,iBAAmB,EAC1B,EAEJ,kIArPEE,cA4CYC,EAAAA,wBA3CLC,EAAA,WAAW,EADlBC,aA4CY,CA1CT,GAAID,EAAA,GACJ,MAAK,yCAAmEE,EAAA,uCAAiDA,EAAA,qCAA+CA,EAAA,cAOxK,SAAUA,EAAA,YAAW,EAAA,GACrB,KAAMF,EAAA,KACN,gBAAeA,EAAA,OAAI,WAAkB,OAAYE,EAAA,aAClD,EAAAC,aAAwBD,EAAlB,iBAAiB,CAAA,EAAA,mBAEvB,IA0BiB,CAzBTA,EAAA,6BADRJ,EAAAA,YA0BiBM,EAAA,OAxBf,SAAA,GACC,+CAAgCJ,EAAA,YAAY,CAAA,EAC7C,aAAW,oBACX,gBAAc,uBACd,cAAY,qBACZ,iBAAe,wBACf,eAAa,sBACb,cAAY,qBACZ,iBAAe,wBACf,UAAQ,0DAGkBK,EAAA,OAAM,CAAtBC,EAAGC,WACVA,eAGD,IAAyB,CAAzBC,aAAyBH,SAAZE,CAAQ,OAGfP,EAAA,eACL,wBAED,IAA4B,CAA5BS,EAAAA,YAA4BC,EAAA,CAAb,KAAK,KAAK,CAAA,uCAI7BF,EAAAA,WAAeH,EAAA,OAAA,UAAA,CAAA,IAAA,CAAA,CAAA"}
+{"version":3,"file":"list-item.cjs","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"[\n      'd-list-item',\n      {\n        'd-list-item--focusable': isFocusable,\n        'd-list-item--highlighted': isHighlighted,\n        'd-list-item--static': !isHoverable,\n      }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <dt-item-layout\n      v-if=\"isDefaultType\"\n      unstyled\n      :class=\"['d-list-item__wrapper', wrapperClass]\"\n      start-class=\"d-list-item__left\"\n      content-class=\"d-list-item__content\"\n      title-class=\"d-list-item__title\"\n      subtitle-class=\"d-list-item__subtitle\"\n      block-end-class=\"d-list-item__bottom\"\n      end-class=\"d-list-item__right\"\n      selected-class=\"d-list-item__selected\"\n      data-qa=\"dt-list-item-wrapper\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon-check size=\"200\" />\n      </template>\n    </dt-item-layout>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     * @values listitem, menuitem, option\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Additional Classes to apply to the wrapper element,\n     * note: it only applies on \"default\" type\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    wrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    isDefaultType () {\n      return this.type === LIST_ITEM_TYPES.DEFAULT;\n    },\n\n    listItemListeners () {\n      return {\n        click: event => {\n          this.onClick(event);\n        },\n\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      // disabled as we do not want to override native click\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n"],"names":["ROLES","_sfc_main","DtItemLayout","DtIconCheck","utils","role","LIST_ITEM_TYPES","t","LIST_ITEM_NAVIGATION_TYPES","event","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","_component_dt_item_layout","_ctx","_","slotName","_renderSlot","_createVNode","_component_dt_icon_check"],"mappings":"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"}

package/dist/lib/list-item/list-item.js

@@ -1,14 +1,14 @@
 import { LIST_ITEM_NAVIGATION_TYPES as s, LIST_ITEM_TYPES as l } from "./list-item-constants.js";
 import h from "../../common/utils/index.js";
-import { DtIconCheck as g } from "@dialpad/dialtone-icons/vue3";
-import { resolveComponent as r, openBlock as n, createBlock as d, resolveDynamicComponent as f, mergeProps as _, toHandlers as p, withCtx as a, normalizeClass as y, createSlots as v, renderList as T, renderSlot as m, createVNode as b } from "vue";
-import { _ as I } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import k from "../item-layout/item-layout.js";
+import { DtIconCheck as g } from "@dialpad/dialtone-icons/vue";
+import { resolveComponent as n, openBlock as r, createBlock as d, resolveDynamicComponent as _, mergeProps as f, toHandlers as p, withCtx as a, normalizeClass as y, createSlots as v, renderList as k, renderSlot as c, createVNode as T } from "vue";
+import { _ as b } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import I from "../item-layout/item-layout.js";
 const L = ["listitem", "menuitem", "option"], S = {
   compatConfig: { MODE: 3 },
   name: "DtListItem",
   components: {
-    DtItemLayout: k,
+    DtItemLayout: I,
     DtIconCheck: g
   },
   /**
@@ -29,6 +29,7 @@ const L = ["listitem", "menuitem", "option"], S = {
     },
     /**
      * String to use for the item's role.
+     * @values listitem, menuitem, option
      */
     role: {
       type: String,
@@ -82,6 +83,13 @@ const L = ["listitem", "menuitem", "option"], S = {
     }
   },
   emits: [
+    /**
+     * Native click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click",
     /**
      * Key down event
      *
@@ -116,6 +124,9 @@ const L = ["listitem", "menuitem", "option"], S = {
     },
     listItemListeners() {
       return {
+        click: (e) => {
+          this.onClick(e);
+        },
         keydown: (e) => {
           ["enter", "space"].includes(e.code.toLowerCase()) && this.onClick(e), this.$emit("keydown", e);
         },
@@ -157,8 +168,8 @@ const L = ["listitem", "menuitem", "option"], S = {
   }
 };
 function H(e, C, i, D, E, t) {
-  const c = r("dt-icon-check"), u = r("dt-item-layout");
-  return n(), d(f(i.elementType), _({
+  const m = n("dt-icon-check"), u = n("dt-item-layout");
+  return r(), d(_(i.elementType), f({
     id: i.id,
     class: [
       "d-list-item",
@@ -173,38 +184,38 @@ function H(e, C, i, D, E, t) {
     "aria-selected": i.role === "listitem" ? void 0 : t.isHighlighted
   }, p(t.listItemListeners)), {
     default: a(() => [
-      t.isDefaultType ? (n(), d(u, {
+      t.isDefaultType ? (r(), d(u, {
         key: 0,
         unstyled: "",
         class: y(["d-list-item__wrapper", i.wrapperClass]),
-        "left-class": "d-list-item__left",
+        "start-class": "d-list-item__left",
         "content-class": "d-list-item__content",
         "title-class": "d-list-item__title",
         "subtitle-class": "d-list-item__subtitle",
-        "bottom-class": "d-list-item__bottom",
-        "right-class": "d-list-item__right",
+        "block-end-class": "d-list-item__bottom",
+        "end-class": "d-list-item__right",
         "selected-class": "d-list-item__selected",
         "data-qa": "dt-list-item-wrapper"
       }, v({ _: 2 }, [
-        T(e.$slots, (w, o) => ({
+        k(e.$slots, (w, o) => ({
           name: o,
           fn: a(() => [
-            m(e.$slots, o)
+            c(e.$slots, o)
           ])
         })),
         i.selected ? {
           name: "selected",
           fn: a(() => [
-            b(c, { size: "400" })
+            T(m, { size: "200" })
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["class"])) : m(e.$slots, "default", { key: 1 })
+      ]), 1032, ["class"])) : c(e.$slots, "default", { key: 1 })
     ]),
     _: 3
   }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
 }
-const B = /* @__PURE__ */ I(S, [["render", H]]);
+const B = /* @__PURE__ */ b(S, [["render", H]]);
 export {
   B as default
 };

package/dist/lib/list-item/list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.js","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"[\n      'd-list-item',\n      {\n        'd-list-item--focusable': isFocusable,\n        'd-list-item--highlighted': isHighlighted,\n        'd-list-item--static': !isHoverable,\n      }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <dt-item-layout\n      v-if=\"isDefaultType\"\n      unstyled\n      :class=\"['d-list-item__wrapper', wrapperClass]\"\n      left-class=\"d-list-item__left\"\n      content-class=\"d-list-item__content\"\n      title-class=\"d-list-item__title\"\n      subtitle-class=\"d-list-item__subtitle\"\n      bottom-class=\"d-list-item__bottom\"\n      right-class=\"d-list-item__right\"\n      selected-class=\"d-list-item__selected\"\n      data-qa=\"dt-list-item-wrapper\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon-check size=\"400\" />\n      </template>\n    </dt-item-layout>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue3';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Additional Classes to apply to the wrapper element,\n     * note: it only applies on \"default\" type\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    wrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    isDefaultType () {\n      return this.type === LIST_ITEM_TYPES.DEFAULT;\n    },\n\n    listItemListeners () {\n      return {\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      // disabled as we do not want to override native click\n      // eslint-disable-next-line vue/require-explicit-emits\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n"],"names":["ROLES","_sfc_main","DtItemLayout","DtIconCheck","utils","role","LIST_ITEM_TYPES","t","LIST_ITEM_NAVIGATION_TYPES","event","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","_component_dt_item_layout","_ctx","_","slotName","_renderSlot","_createVNode","_component_dt_icon_check"],"mappings":"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"}
+{"version":3,"file":"list-item.js","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"[\n      'd-list-item',\n      {\n        'd-list-item--focusable': isFocusable,\n        'd-list-item--highlighted': isHighlighted,\n        'd-list-item--static': !isHoverable,\n      }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <dt-item-layout\n      v-if=\"isDefaultType\"\n      unstyled\n      :class=\"['d-list-item__wrapper', wrapperClass]\"\n      start-class=\"d-list-item__left\"\n      content-class=\"d-list-item__content\"\n      title-class=\"d-list-item__title\"\n      subtitle-class=\"d-list-item__subtitle\"\n      block-end-class=\"d-list-item__bottom\"\n      end-class=\"d-list-item__right\"\n      selected-class=\"d-list-item__selected\"\n      data-qa=\"dt-list-item-wrapper\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon-check size=\"200\" />\n      </template>\n    </dt-item-layout>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     * @values listitem, menuitem, option\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Additional Classes to apply to the wrapper element,\n     * note: it only applies on \"default\" type\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    wrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    isDefaultType () {\n      return this.type === LIST_ITEM_TYPES.DEFAULT;\n    },\n\n    listItemListeners () {\n      return {\n        click: event => {\n          this.onClick(event);\n        },\n\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      // disabled as we do not want to override native click\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n"],"names":["ROLES","_sfc_main","DtItemLayout","DtIconCheck","utils","role","LIST_ITEM_TYPES","t","LIST_ITEM_NAVIGATION_TYPES","event","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","_component_dt_item_layout","_ctx","_","slotName","_renderSlot","_createVNode","_component_dt_icon_check"],"mappings":"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"}

package/dist/lib/message-input/message-input-button.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),u=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),d=require("../keyboard-shortcut/keyboard-shortcut.cjs"),s=require("../stack/stack.cjs"),_=require("../tooltip/tooltip.cjs"),p=require("../button/button.cjs"),b={compatConfig:{MODE:3},name:"DtRecipeMessageInputButton",components:{DtButton:p.default,DtTooltip:_.default,DtStack:s.default,DtKeyboardShortcut:d.default},props:{ariaLabel:{type:String,required:!0},tooltipText:{type:String,required:!0},keyboardShortcutText:{type:String,default:""},isActive:{type:Boolean,default:!1},dataQa:{type:String,required:!0}},emits:["click"]};function k(o,r,e,y,f,S){const n=t.resolveComponent("dt-button"),a=t.resolveComponent("dt-keyboard-shortcut"),i=t.resolveComponent("dt-stack"),c=t.resolveComponent("dt-tooltip");return t.openBlock(),t.createBlock(c,null,{anchor:t.withCtx(()=>[t.createVNode(n,{"data-qa":e.dataQa,importance:"clear",kind:"muted","aria-label":e.ariaLabel,size:"xs",active:e.isActive,onClick:r[0]||(r[0]=l=>o.$emit("click",l))},{icon:t.withCtx(()=>[t.renderSlot(o.$slots,"icon")]),_:3},8,["data-qa","aria-label","active"])]),default:t.withCtx(()=>[t.createVNode(i,{gap:"200"},{default:t.withCtx(()=>[t.createElementVNode("p",null,t.toDisplayString(e.tooltipText),1),e.keyboardShortcutText?(t.openBlock(),t.createBlock(a,{key:0,inverted:"",shortcut:e.keyboardShortcutText},null,8,["shortcut"])):t.createCommentVNode("",!0)]),_:1})]),_:3})}const m=u._(b,[["render",k]]);exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),u=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),d=require("../keyboard-shortcut/keyboard-shortcut.cjs"),s=require("../stack/stack.cjs"),_=require("../tooltip/tooltip.cjs"),p=require("../button/button.cjs"),b={compatConfig:{MODE:3},name:"DtRecipeMessageInputButton",components:{DtButton:p.default,DtTooltip:_.default,DtStack:s.default,DtKeyboardShortcut:d.default},props:{ariaLabel:{type:String,required:!0},tooltipText:{type:String,required:!0},keyboardShortcutText:{type:String,default:""},isActive:{type:Boolean,default:!1},dataQa:{type:String,required:!0}},emits:["click"]};function k(o,r,e,y,f,S){const n=t.resolveComponent("dt-button"),a=t.resolveComponent("dt-keyboard-shortcut"),i=t.resolveComponent("dt-stack"),c=t.resolveComponent("dt-tooltip");return t.openBlock(),t.createBlock(c,null,{anchor:t.withCtx(()=>[t.createVNode(n,{"data-qa":e.dataQa,importance:"clear",kind:"muted","aria-label":e.ariaLabel,size:100,active:e.isActive,onClick:r[0]||(r[0]=l=>o.$emit("click",l))},{icon:t.withCtx(()=>[t.renderSlot(o.$slots,"icon")]),_:3},8,["data-qa","aria-label","active"])]),default:t.withCtx(()=>[t.createVNode(i,{gap:"200"},{default:t.withCtx(()=>[t.createElementVNode("p",null,t.toDisplayString(e.tooltipText),1),e.keyboardShortcutText?(t.openBlock(),t.createBlock(a,{key:0,inverted:"",shortcut:e.keyboardShortcutText},null,8,["shortcut"])):t.createCommentVNode("",!0)]),_:1})]),_:3})}const m=u._(b,[["render",k]]);exports.default=m;
 //# sourceMappingURL=message-input-button.cjs.map

package/dist/lib/message-input/message-input-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"message-input-button.cjs","sources":["../../../recipes/conversation_view/message_input/message_input_button.vue"],"sourcesContent":["<template>\n  <dt-tooltip>\n    <template #anchor>\n      <dt-button\n        :data-qa=\"dataQa\"\n        importance=\"clear\"\n        kind=\"muted\"\n        :aria-label=\"ariaLabel\"\n        size=\"xs\"\n        :active=\"isActive\"\n        @click=\"$emit('click', $event)\"\n      >\n        <template #icon>\n          <slot name=\"icon\" />\n        </template>\n      </dt-button>\n    </template>\n    <dt-stack gap=\"200\">\n      <p>{{ tooltipText }}</p>\n      <dt-keyboard-shortcut\n        v-if=\"keyboardShortcutText\"\n        inverted\n        :shortcut=\"keyboardShortcutText\"\n      />\n    </dt-stack>\n  </dt-tooltip>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport { DtStack } from '@/components/stack';\nimport { DtKeyboardShortcut } from '@/components/keyboard_shortcut';\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeMessageInputButton',\n  components: {\n    DtButton,\n    DtTooltip,\n    DtStack,\n    DtKeyboardShortcut,\n  },\n\n  props: {\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    tooltipText: {\n      type: String,\n      required: true,\n    },\n\n    keyboardShortcutText: {\n      type: String,\n      default: '',\n    },\n\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    dataQa: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: ['click'],\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtTooltip","DtStack","DtKeyboardShortcut","_createBlock","_component_dt_tooltip","_createVNode","_component_dt_button","$props","_cache","$event","_ctx","_renderSlot","_component_dt_stack","_createElementVNode","_component_dt_keyboard_shortcut"],"mappings":"2VAiCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,6BACN,WAAY,CACV,SAAAC,EAAAA,QACA,UAAAC,EAAAA,QACA,QAAAC,EAAAA,QACA,mBAAAC,EAAAA,SAGF,MAAO,CACL,UAAW,CACT,KAAM,OACN,SAAU,IAGZ,YAAa,CACX,KAAM,OACN,SAAU,IAGZ,qBAAsB,CACpB,KAAM,OACN,QAAS,IAGX,SAAU,CACR,KAAM,QACN,QAAS,IAGX,OAAQ,CACN,KAAM,OACN,SAAU,KAId,MAAO,CAAC,OAAO,CACjB,wMAtEEC,cAwBaC,EAAA,KAAA,CAvBA,iBACT,IAYY,CAZZC,EAAAA,YAYYC,EAAA,CAXT,UAASC,EAAA,OACV,WAAW,QACX,KAAK,QACJ,aAAYA,EAAA,UACb,KAAK,KACJ,OAAQA,EAAA,SACR,QAAKC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEC,EAAA,MAAK,QAAUD,CAAM,KAElB,eACT,IAAoB,CAApBE,aAAoBD,EAAA,OAAA,MAAA,kEAI1B,IAOW,CAPXL,EAAAA,YAOWO,EAAA,CAPD,IAAI,KAAK,EAAA,mBACjB,IAAwB,CAAxBC,EAAAA,mBAAwB,2BAAlBN,EAAA,WAAW,EAAA,CAAA,EAETA,EAAA,oCADRJ,EAAAA,YAIEW,EAAA,OAFA,SAAA,GACC,SAAUP,EAAA"}
+{"version":3,"file":"message-input-button.cjs","sources":["../../../recipes/conversation_view/message_input/message_input_button.vue"],"sourcesContent":["<template>\n  <dt-tooltip>\n    <template #anchor>\n      <dt-button\n        :data-qa=\"dataQa\"\n        importance=\"clear\"\n        kind=\"muted\"\n        :aria-label=\"ariaLabel\"\n        :size=\"100\"\n        :active=\"isActive\"\n        @click=\"$emit('click', $event)\"\n      >\n        <template #icon>\n          <slot name=\"icon\" />\n        </template>\n      </dt-button>\n    </template>\n    <dt-stack gap=\"200\">\n      <p>{{ tooltipText }}</p>\n      <dt-keyboard-shortcut\n        v-if=\"keyboardShortcutText\"\n        inverted\n        :shortcut=\"keyboardShortcutText\"\n      />\n    </dt-stack>\n  </dt-tooltip>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport { DtStack } from '@/components/stack';\nimport { DtKeyboardShortcut } from '@/components/keyboard_shortcut';\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeMessageInputButton',\n  components: {\n    DtButton,\n    DtTooltip,\n    DtStack,\n    DtKeyboardShortcut,\n  },\n\n  props: {\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    tooltipText: {\n      type: String,\n      required: true,\n    },\n\n    keyboardShortcutText: {\n      type: String,\n      default: '',\n    },\n\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    dataQa: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: ['click'],\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtTooltip","DtStack","DtKeyboardShortcut","_createBlock","_component_dt_tooltip","_createVNode","_component_dt_button","$props","_cache","$event","_ctx","_renderSlot","_component_dt_stack","_createElementVNode","_component_dt_keyboard_shortcut"],"mappings":"2VAiCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,6BACN,WAAY,CACV,SAAAC,EAAAA,QACA,UAAAC,EAAAA,QACA,QAAAC,EAAAA,QACA,mBAAAC,EAAAA,SAGF,MAAO,CACL,UAAW,CACT,KAAM,OACN,SAAU,IAGZ,YAAa,CACX,KAAM,OACN,SAAU,IAGZ,qBAAsB,CACpB,KAAM,OACN,QAAS,IAGX,SAAU,CACR,KAAM,QACN,QAAS,IAGX,OAAQ,CACN,KAAM,OACN,SAAU,KAId,MAAO,CAAC,OAAO,CACjB,wMAtEEC,cAwBaC,EAAA,KAAA,CAvBA,iBACT,IAYY,CAZZC,EAAAA,YAYYC,EAAA,CAXT,UAASC,EAAA,OACV,WAAW,QACX,KAAK,QACJ,aAAYA,EAAA,UACZ,KAAM,IACN,OAAQA,EAAA,SACR,QAAKC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEC,EAAA,MAAK,QAAUD,CAAM,KAElB,eACT,IAAoB,CAApBE,aAAoBD,EAAA,OAAA,MAAA,kEAI1B,IAOW,CAPXL,EAAAA,YAOWO,EAAA,CAPD,IAAI,KAAK,EAAA,mBACjB,IAAwB,CAAxBC,EAAAA,mBAAwB,2BAAlBN,EAAA,WAAW,EAAA,CAAA,EAETA,EAAA,oCADRJ,EAAAA,YAIEW,EAAA,OAFA,SAAA,GACC,SAAUP,EAAA"}

package/dist/lib/message-input/message-input-button.js

@@ -4,7 +4,7 @@ import b from "../keyboard-shortcut/keyboard-shortcut.js";
 import S from "../stack/stack.js";
 import g from "../tooltip/tooltip.js";
 import h from "../button/button.js";
-const x = {
+const D = {
   compatConfig: { MODE: 3 },
   name: "DtRecipeMessageInputButton",
   components: {
@@ -37,7 +37,7 @@ const x = {
   },
   emits: ["click"]
 };
-function D(r, a, t, v, B, T) {
+function x(r, a, t, v, B, T) {
   const d = e("dt-button"), l = e("dt-keyboard-shortcut"), u = e("dt-stack"), s = e("dt-tooltip");
   return n(), i(s, null, {
     anchor: o(() => [
@@ -46,7 +46,7 @@ function D(r, a, t, v, B, T) {
         importance: "clear",
         kind: "muted",
         "aria-label": t.ariaLabel,
-        size: "xs",
+        size: 100,
         active: t.isActive,
         onClick: a[0] || (a[0] = (m) => r.$emit("click", m))
       }, {
@@ -72,7 +72,7 @@ function D(r, a, t, v, B, T) {
     _: 3
   });
 }
-const E = /* @__PURE__ */ y(x, [["render", D]]);
+const E = /* @__PURE__ */ y(D, [["render", x]]);
 export {
   E as default
 };

package/dist/lib/message-input/message-input-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-input-button.js","sources":["../../../recipes/conversation_view/message_input/message_input_button.vue"],"sourcesContent":["<template>\n  <dt-tooltip>\n    <template #anchor>\n      <dt-button\n        :data-qa=\"dataQa\"\n        importance=\"clear\"\n        kind=\"muted\"\n        :aria-label=\"ariaLabel\"\n        size=\"xs\"\n        :active=\"isActive\"\n        @click=\"$emit('click', $event)\"\n      >\n        <template #icon>\n          <slot name=\"icon\" />\n        </template>\n      </dt-button>\n    </template>\n    <dt-stack gap=\"200\">\n      <p>{{ tooltipText }}</p>\n      <dt-keyboard-shortcut\n        v-if=\"keyboardShortcutText\"\n        inverted\n        :shortcut=\"keyboardShortcutText\"\n      />\n    </dt-stack>\n  </dt-tooltip>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport { DtStack } from '@/components/stack';\nimport { DtKeyboardShortcut } from '@/components/keyboard_shortcut';\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeMessageInputButton',\n  components: {\n    DtButton,\n    DtTooltip,\n    DtStack,\n    DtKeyboardShortcut,\n  },\n\n  props: {\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    tooltipText: {\n      type: String,\n      required: true,\n    },\n\n    keyboardShortcutText: {\n      type: String,\n      default: '',\n    },\n\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    dataQa: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: ['click'],\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtTooltip","DtStack","DtKeyboardShortcut","_createBlock","_component_dt_tooltip","_createVNode","_component_dt_button","$props","_cache","$event","_ctx","_renderSlot","_component_dt_stack","_createElementVNode","_component_dt_keyboard_shortcut"],"mappings":";;;;;;AAiCA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,oBAAAC;AAAA;EAGF,OAAO;AAAA,IACL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA;IAGZ,aAAa;AAAA,MACX,MAAM;AAAA,MACN,UAAU;AAAA;IAGZ,sBAAsB;AAAA,MACpB,MAAM;AAAA,MACN,SAAS;AAAA;IAGX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;IAGX,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA;;EAId,OAAO,CAAC,OAAO;AACjB;;;cAtEEC,EAwBaC,GAAA,MAAA;AAAA,IAvBA,UACT,MAYY;AAAA,MAZZC,EAYYC,GAAA;AAAA,QAXT,WAASC,EAAA;AAAA,QACV,YAAW;AAAA,QACX,MAAK;AAAA,QACJ,cAAYA,EAAA;AAAA,QACb,MAAK;AAAA,QACJ,QAAQA,EAAA;AAAA,QACR,SAAKC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEC,EAAA,MAAK,SAAUD,CAAM;AAAA;QAElB,QACT,MAAoB;AAAA,UAApBE,EAAoBD,EAAA,QAAA,MAAA;AAAA;;;;eAI1B,MAOW;AAAA,MAPXL,EAOWO,GAAA,EAPD,KAAI,MAAK,GAAA;AAAA,mBACjB,MAAwB;AAAA,UAAxBC,EAAwB,aAAlBN,EAAA,WAAW,GAAA,CAAA;AAAA,UAETA,EAAA,6BADRJ,EAIEW,GAAA;AAAA;YAFA,UAAA;AAAA,YACC,UAAUP,EAAA;AAAA;;;;;;;;;"}
+{"version":3,"file":"message-input-button.js","sources":["../../../recipes/conversation_view/message_input/message_input_button.vue"],"sourcesContent":["<template>\n  <dt-tooltip>\n    <template #anchor>\n      <dt-button\n        :data-qa=\"dataQa\"\n        importance=\"clear\"\n        kind=\"muted\"\n        :aria-label=\"ariaLabel\"\n        :size=\"100\"\n        :active=\"isActive\"\n        @click=\"$emit('click', $event)\"\n      >\n        <template #icon>\n          <slot name=\"icon\" />\n        </template>\n      </dt-button>\n    </template>\n    <dt-stack gap=\"200\">\n      <p>{{ tooltipText }}</p>\n      <dt-keyboard-shortcut\n        v-if=\"keyboardShortcutText\"\n        inverted\n        :shortcut=\"keyboardShortcutText\"\n      />\n    </dt-stack>\n  </dt-tooltip>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport { DtStack } from '@/components/stack';\nimport { DtKeyboardShortcut } from '@/components/keyboard_shortcut';\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeMessageInputButton',\n  components: {\n    DtButton,\n    DtTooltip,\n    DtStack,\n    DtKeyboardShortcut,\n  },\n\n  props: {\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    tooltipText: {\n      type: String,\n      required: true,\n    },\n\n    keyboardShortcutText: {\n      type: String,\n      default: '',\n    },\n\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    dataQa: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: ['click'],\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtTooltip","DtStack","DtKeyboardShortcut","_createBlock","_component_dt_tooltip","_createVNode","_component_dt_button","$props","_cache","$event","_ctx","_renderSlot","_component_dt_stack","_createElementVNode","_component_dt_keyboard_shortcut"],"mappings":";;;;;;AAiCA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,oBAAAC;AAAA;EAGF,OAAO;AAAA,IACL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA;IAGZ,aAAa;AAAA,MACX,MAAM;AAAA,MACN,UAAU;AAAA;IAGZ,sBAAsB;AAAA,MACpB,MAAM;AAAA,MACN,SAAS;AAAA;IAGX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;IAGX,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA;;EAId,OAAO,CAAC,OAAO;AACjB;;;cAtEEC,EAwBaC,GAAA,MAAA;AAAA,IAvBA,UACT,MAYY;AAAA,MAZZC,EAYYC,GAAA;AAAA,QAXT,WAASC,EAAA;AAAA,QACV,YAAW;AAAA,QACX,MAAK;AAAA,QACJ,cAAYA,EAAA;AAAA,QACZ,MAAM;AAAA,QACN,QAAQA,EAAA;AAAA,QACR,SAAKC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEC,EAAA,MAAK,SAAUD,CAAM;AAAA;QAElB,QACT,MAAoB;AAAA,UAApBE,EAAoBD,EAAA,QAAA,MAAA;AAAA;;;;eAI1B,MAOW;AAAA,MAPXL,EAOWO,GAAA,EAPD,KAAI,MAAK,GAAA;AAAA,mBACjB,MAAwB;AAAA,UAAxBC,EAAwB,aAAlBN,EAAA,WAAW,GAAA,CAAA;AAAA,UAETA,EAAA,6BADRJ,EAIEW,GAAA;AAAA;YAFA,UAAA;AAAA,YACC,UAAUP,EAAA;AAAA;;;;;;;;;"}

package/dist/lib/message-input/message-input-link.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("@dialpad/dialtone-icons/vue3"),m=require("./message-input-button.cjs"),k=require("../../localization/index.cjs"),e=require("vue"),b=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),L=require("../stack/stack.cjs"),I=require("../button/button.cjs"),N=require("../input/input.cjs"),E=require("../popover/popover.cjs"),v={compatConfig:{MODE:3},name:"MessageInputLink",components:{DtPopover:E.default,DtInput:N.default,DtButton:I.default,DtStack:L.default,DtIconLink2:_.DtIconLink2,DtRecipeMessageInputButton:m.default},props:{open:{type:Boolean,default:!1},linkButtonOptions:{type:Object,required:!0},isSelectionActive:{type:Function,default:()=>{}}},emits:["set-link","remove-link","opened"],data(){return{linkText:"",linkInput:"",isOpen:!1,i18n:new k.DialtoneLocalization}},computed:{anchorButtonLabel(){return this.i18n.$ta("DIALTONE_MESSAGE_INPUT_LINK_BUTTON_LABEL")},textInputLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_TEXT_LABEL")},linkInputLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_LINK_LABEL")},linkInputPlaceHolder(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_LINK_PLACEHOLDER")},removeButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_REMOVE_LABEL")},cancelButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_CANCEL_LABEL")},confirmButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_CONFIRM_LABEL")}},watch:{open:{immediate:!0,handler(o){this.isOpen=o}}},methods:{setInitialValues(o,t){this.linkText=o,this.linkInput=t}}},T={class:"d-recipe-message-input__link-dialog-title"};function g(o,t,u,x,n,i){const p=e.resolveComponent("dt-icon-link2"),d=e.resolveComponent("dt-recipe-message-input-button"),s=e.resolveComponent("dt-input"),a=e.resolveComponent("dt-button"),r=e.resolveComponent("dt-stack"),c=e.resolveComponent("dt-popover");return e.openBlock(),e.createBlock(c,{open:n.isOpen,placement:"bottom-start","content-class":"d-recipe-message-input__link-popover","data-qa":"dt-message-input-link-popover","show-close-button":!1,onOpened:t[12]||(t[12]=l=>o.$emit("opened",l))},{anchor:e.withCtx(()=>[e.createVNode(d,{"aria-label":i.anchorButtonLabel["aria-label"],"tooltip-text":i.anchorButtonLabel["tooltip-text"],"keyboard-shortcut-text":u.linkButtonOptions.keyboardShortcutText,"data-qa":"message-input-link-btn","is-active":u.isSelectionActive("link"),onClick:t[0]||(t[0]=l=>n.isOpen=!0)},{icon:e.withCtx(()=>[e.createVNode(p,{class:"d-recipe-message-input__button-stack-icon",size:"200"})]),_:1},8,["aria-label","tooltip-text","keyboard-shortcut-text","is-active"])]),content:e.withCtx(()=>[e.createVNode(r,{gap:"500"},{default:e.withCtx(()=>[e.createElementVNode("div",T,e.toDisplayString(n.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_DIALOG_TITLE")),1),e.createVNode(s,{modelValue:n.linkText,"onUpdate:modelValue":t[1]||(t[1]=l=>n.linkText=l),"input-aria-label":i.textInputLabel,size:"xs","data-qa":"dt-message-input-link-text-input",label:i.textInputLabel,"input-wrapper-class":"d-recipe-message-input__link-input",onClick:t[2]||(t[2]=e.withModifiers(()=>{},["stop"])),onFocus:t[3]||(t[3]=e.withModifiers(()=>{},["stop"])),onKeydown:t[4]||(t[4]=e.withKeys(l=>o.$emit("set-link",n.linkText,n.linkInput),["enter"]))},null,8,["modelValue","input-aria-label","label"]),e.createVNode(s,{modelValue:n.linkInput,"onUpdate:modelValue":t[5]||(t[5]=l=>n.linkInput=l),"input-aria-label":i.linkInputLabel,size:"xs","data-qa":"dt-message-input-link-input",placeholder:i.linkInputPlaceHolder,label:i.linkInputLabel,"input-wrapper-class":"d-recipe-message-input__link-input",onClick:t[6]||(t[6]=e.withModifiers(()=>{},["stop"])),onFocus:t[7]||(t[7]=e.withModifiers(()=>{},["stop"])),onKeydown:t[8]||(t[8]=e.withKeys(l=>o.$emit("set-link",n.linkText,n.linkInput),["enter"]))},null,8,["modelValue","input-aria-label","placeholder","label"]),e.createVNode(r,{direction:"row",class:"d-recipe-message-input__link-dialog-buttons"},{default:e.withCtx(()=>[e.createVNode(a,{"aria-label":i.removeButtonLabel,title:i.removeButtonLabel,importance:"clear",kind:"danger",size:"md","data-qa":"dt-message-input-link-remove-btn",onClick:t[9]||(t[9]=l=>o.$emit("remove-link",n.linkText,n.linkInput))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.removeButtonLabel),1)]),_:1},8,["aria-label","title"]),e.createVNode(r,{direction:"row",gap:"400"},{default:e.withCtx(()=>[e.createVNode(a,{"aria-label":i.cancelButtonLabel,title:i.cancelButtonLabel,importance:"clear",kind:"muted",size:"md","data-qa":"dt-message-input-link-cancel-btn",onClick:t[10]||(t[10]=l=>n.isOpen=!1)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.cancelButtonLabel),1)]),_:1},8,["aria-label","title"]),e.createVNode(a,{size:"md","aria-label":i.confirmButtonLabel,title:i.confirmButtonLabel,"data-qa":"dt-message-input-link-confirm-btn",onClick:t[11]||(t[11]=l=>o.$emit("set-link",n.linkText,n.linkInput))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.confirmButtonLabel),1)]),_:1},8,["aria-label","title"])]),_:1})]),_:1})]),_:1})]),_:1},8,["open"])}const f=b._(v,[["render",g]]);exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("@dialpad/dialtone-icons/vue"),m=require("./message-input-button.cjs"),k=require("../../localization/index.cjs"),e=require("vue"),b=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),L=require("../stack/stack.cjs"),I=require("../button/button.cjs"),N=require("../input/input.cjs"),E=require("../popover/popover.cjs"),v={compatConfig:{MODE:3},name:"MessageInputLink",components:{DtPopover:E.default,DtInput:N.default,DtButton:I.default,DtStack:L.default,DtIconLink2:_.DtIconLink2,DtRecipeMessageInputButton:m.default},props:{open:{type:Boolean,default:!1},linkButtonOptions:{type:Object,required:!0},isSelectionActive:{type:Function,default:()=>{}}},emits:["set-link","remove-link","opened"],data(){return{linkText:"",linkInput:"",isOpen:!1,i18n:new k.DialtoneLocalization}},computed:{anchorButtonLabel(){return this.i18n.$ta("DIALTONE_MESSAGE_INPUT_LINK_BUTTON_LABEL")},textInputLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_TEXT_LABEL")},linkInputLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_LINK_LABEL")},linkInputPlaceHolder(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_LINK_PLACEHOLDER")},removeButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_REMOVE_LABEL")},cancelButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_CANCEL_LABEL")},confirmButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_CONFIRM_LABEL")}},watch:{open:{immediate:!0,handler(o){this.isOpen=o}}},methods:{setInitialValues(o,t){this.linkText=o,this.linkInput=t}}},T={class:"d-recipe-message-input__link-dialog-title"};function g(o,t,u,B,n,i){const p=e.resolveComponent("dt-icon-link2"),d=e.resolveComponent("dt-recipe-message-input-button"),s=e.resolveComponent("dt-input"),a=e.resolveComponent("dt-button"),r=e.resolveComponent("dt-stack"),c=e.resolveComponent("dt-popover");return e.openBlock(),e.createBlock(c,{open:n.isOpen,placement:"bottom-start","content-class":"d-recipe-message-input__link-popover","data-qa":"dt-message-input-link-popover","show-close-button":!1,onOpened:t[12]||(t[12]=l=>o.$emit("opened",l))},{anchor:e.withCtx(()=>[e.createVNode(d,{"aria-label":i.anchorButtonLabel["aria-label"],"tooltip-text":i.anchorButtonLabel["tooltip-text"],"keyboard-shortcut-text":u.linkButtonOptions.keyboardShortcutText,"data-qa":"message-input-link-btn","is-active":u.isSelectionActive("link"),onClick:t[0]||(t[0]=l=>n.isOpen=!0)},{icon:e.withCtx(()=>[e.createVNode(p,{class:"d-recipe-message-input__button-stack-icon",size:"200"})]),_:1},8,["aria-label","tooltip-text","keyboard-shortcut-text","is-active"])]),content:e.withCtx(()=>[e.createVNode(r,{gap:"200"},{default:e.withCtx(()=>[e.createElementVNode("div",T,e.toDisplayString(n.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_DIALOG_TITLE")),1),e.createVNode(s,{modelValue:n.linkText,"onUpdate:modelValue":t[1]||(t[1]=l=>n.linkText=l),"input-aria-label":i.textInputLabel,size:100,"data-qa":"dt-message-input-link-text-input",label:i.textInputLabel,"input-wrapper-class":"d-recipe-message-input__link-input",onClick:t[2]||(t[2]=e.withModifiers(()=>{},["stop"])),onFocus:t[3]||(t[3]=e.withModifiers(()=>{},["stop"])),onKeydown:t[4]||(t[4]=e.withKeys(l=>o.$emit("set-link",n.linkText,n.linkInput),["enter"]))},null,8,["modelValue","input-aria-label","label"]),e.createVNode(s,{modelValue:n.linkInput,"onUpdate:modelValue":t[5]||(t[5]=l=>n.linkInput=l),"input-aria-label":i.linkInputLabel,size:100,"data-qa":"dt-message-input-link-input",placeholder:i.linkInputPlaceHolder,label:i.linkInputLabel,"input-wrapper-class":"d-recipe-message-input__link-input",onClick:t[6]||(t[6]=e.withModifiers(()=>{},["stop"])),onFocus:t[7]||(t[7]=e.withModifiers(()=>{},["stop"])),onKeydown:t[8]||(t[8]=e.withKeys(l=>o.$emit("set-link",n.linkText,n.linkInput),["enter"]))},null,8,["modelValue","input-aria-label","placeholder","label"]),e.createVNode(r,{direction:"row",class:"d-recipe-message-input__link-dialog-buttons"},{default:e.withCtx(()=>[e.createVNode(a,{"aria-label":i.removeButtonLabel,title:i.removeButtonLabel,importance:"clear",kind:"danger",size:300,"data-qa":"dt-message-input-link-remove-btn",onClick:t[9]||(t[9]=l=>o.$emit("remove-link",n.linkText,n.linkInput))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.removeButtonLabel),1)]),_:1},8,["aria-label","title"]),e.createVNode(r,{direction:"row",gap:"100"},{default:e.withCtx(()=>[e.createVNode(a,{"aria-label":i.cancelButtonLabel,title:i.cancelButtonLabel,importance:"clear",kind:"muted",size:300,"data-qa":"dt-message-input-link-cancel-btn",onClick:t[10]||(t[10]=l=>n.isOpen=!1)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.cancelButtonLabel),1)]),_:1},8,["aria-label","title"]),e.createVNode(a,{size:300,"aria-label":i.confirmButtonLabel,title:i.confirmButtonLabel,"data-qa":"dt-message-input-link-confirm-btn",onClick:t[11]||(t[11]=l=>o.$emit("set-link",n.linkText,n.linkInput))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.confirmButtonLabel),1)]),_:1},8,["aria-label","title"])]),_:1})]),_:1})]),_:1})]),_:1},8,["open"])}const f=b._(v,[["render",g]]);exports.default=f;
 //# sourceMappingURL=message-input-link.cjs.map

package/dist/lib/message-input/message-input-link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"message-input-link.cjs","sources":["../../../recipes/conversation_view/message_input/message_input_link.vue"],"sourcesContent":["<template>\n  <dt-popover\n    :open=\"isOpen\"\n    placement=\"bottom-start\"\n    content-class=\"d-recipe-message-input__link-popover\"\n    data-qa=\"dt-message-input-link-popover\"\n    :show-close-button=\"false\"\n    @opened=\"$emit('opened', $event)\"\n  >\n    <template #anchor>\n      <dt-recipe-message-input-button\n        :aria-label=\"anchorButtonLabel['aria-label']\"\n        :tooltip-text=\"anchorButtonLabel['tooltip-text']\"\n        :keyboard-shortcut-text=\"linkButtonOptions.keyboardShortcutText\"\n        data-qa=\"message-input-link-btn\"\n        :is-active=\"isSelectionActive('link')\"\n        @click=\"isOpen = true\"\n      >\n        <template #icon>\n          <dt-icon-link2\n            class=\"d-recipe-message-input__button-stack-icon\"\n            size=\"200\"\n          />\n        </template>\n      </dt-recipe-message-input-button>\n    </template>\n\n    <template #content>\n      <dt-stack gap=\"500\">\n        <div\n          class=\"d-recipe-message-input__link-dialog-title\"\n        >\n          {{ i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_DIALOG_TITLE') }}\n        </div>\n        <dt-input\n          v-model=\"linkText\"\n          :input-aria-label=\"textInputLabel\"\n          size=\"xs\"\n          data-qa=\"dt-message-input-link-text-input\"\n          :label=\"textInputLabel\"\n          input-wrapper-class=\"d-recipe-message-input__link-input\"\n          @click.stop\n          @focus.stop\n          @keydown.enter=\"$emit('set-link', linkText, linkInput)\"\n        />\n        <dt-input\n          v-model=\"linkInput\"\n          :input-aria-label=\"linkInputLabel\"\n          size=\"xs\"\n          data-qa=\"dt-message-input-link-input\"\n          :placeholder=\"linkInputPlaceHolder\"\n          :label=\"linkInputLabel\"\n          input-wrapper-class=\"d-recipe-message-input__link-input\"\n          @click.stop\n          @focus.stop\n          @keydown.enter=\"$emit('set-link', linkText, linkInput)\"\n        />\n        <dt-stack\n          direction=\"row\"\n          class=\"d-recipe-message-input__link-dialog-buttons\"\n        >\n          <dt-button\n            :aria-label=\"removeButtonLabel\"\n            :title=\"removeButtonLabel\"\n            importance=\"clear\"\n            kind=\"danger\"\n            size=\"md\"\n            data-qa=\"dt-message-input-link-remove-btn\"\n            @click=\"$emit('remove-link', linkText, linkInput)\"\n          >\n            {{ removeButtonLabel }}\n          </dt-button>\n          <dt-stack\n            direction=\"row\"\n            gap=\"400\"\n          >\n            <dt-button\n              :aria-label=\"cancelButtonLabel\"\n              :title=\"cancelButtonLabel\"\n              importance=\"clear\"\n              kind=\"muted\"\n              size=\"md\"\n              data-qa=\"dt-message-input-link-cancel-btn\"\n              @click=\"isOpen = false\"\n            >\n              {{ cancelButtonLabel }}\n            </dt-button>\n            <dt-button\n              size=\"md\"\n              :aria-label=\"confirmButtonLabel\"\n              :title=\"confirmButtonLabel\"\n              data-qa=\"dt-message-input-link-confirm-btn\"\n              @click=\"$emit('set-link', linkText, linkInput)\"\n            >\n              {{ confirmButtonLabel }}\n            </dt-button>\n          </dt-stack>\n        </dt-stack>\n      </dt-stack>\n    </template>\n  </dt-popover>\n</template>\n\n<script>\nimport { DtPopover } from '@/components/popover';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\nimport { DtStack } from '@/components/stack';\nimport { DtIconLink2 } from '@dialpad/dialtone-icons/vue3';\nimport DtRecipeMessageInputButton from './message_input_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'MessageInputLink',\n\n  components: {\n    DtPopover,\n    DtInput,\n    DtButton,\n    DtStack,\n    DtIconLink2,\n    DtRecipeMessageInputButton,\n  },\n\n  props: {\n    open: {\n      type: Boolean,\n      default: false,\n    },\n\n    linkButtonOptions: {\n      type: Object,\n      required: true,\n    },\n\n    isSelectionActive: {\n      type: Function,\n      default: () => {},\n    },\n  },\n\n  emits: ['set-link', 'remove-link', 'opened'],\n\n  data () {\n    return {\n      linkText: '',\n      linkInput: '',\n      isOpen: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    anchorButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_LINK_BUTTON_LABEL'); },\n    textInputLabel () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_TEXT_LABEL'); },\n    linkInputLabel () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_LINK_LABEL'); },\n    linkInputPlaceHolder () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_LINK_PLACEHOLDER'); },\n    removeButtonLabel () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_REMOVE_LABEL'); },\n    cancelButtonLabel () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_CANCEL_LABEL'); },\n    confirmButtonLabel () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_CONFIRM_LABEL'); },\n  },\n\n  watch: {\n    open: {\n      immediate: true,\n      handler (value) {\n        this.isOpen = value;\n      },\n    },\n  },\n\n  methods: {\n    setInitialValues (linkText, linkInput) {\n      this.linkText = linkText;\n      this.linkInput = linkInput;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtPopover","DtInput","DtButton","DtStack","DtIconLink2","DtRecipeMessageInputButton","DialtoneLocalization","value","linkText","linkInput","_hoisted_1","_createBlock","_component_dt_popover","$data","_cache","$event","_ctx","_createVNode","_component_dt_recipe_message_input_button","$options","$props","_component_dt_icon_link2","_component_dt_stack","_createElementVNode","_toDisplayString","_component_dt_input","_withKeys","_component_dt_button"],"mappings":"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"}
+{"version":3,"file":"message-input-link.cjs","sources":["../../../recipes/conversation_view/message_input/message_input_link.vue"],"sourcesContent":["<template>\n  <dt-popover\n    :open=\"isOpen\"\n    placement=\"bottom-start\"\n    content-class=\"d-recipe-message-input__link-popover\"\n    data-qa=\"dt-message-input-link-popover\"\n    :show-close-button=\"false\"\n    @opened=\"$emit('opened', $event)\"\n  >\n    <template #anchor>\n      <dt-recipe-message-input-button\n        :aria-label=\"anchorButtonLabel['aria-label']\"\n        :tooltip-text=\"anchorButtonLabel['tooltip-text']\"\n        :keyboard-shortcut-text=\"linkButtonOptions.keyboardShortcutText\"\n        data-qa=\"message-input-link-btn\"\n        :is-active=\"isSelectionActive('link')\"\n        @click=\"isOpen = true\"\n      >\n        <template #icon>\n          <dt-icon-link2\n            class=\"d-recipe-message-input__button-stack-icon\"\n            size=\"200\"\n          />\n        </template>\n      </dt-recipe-message-input-button>\n    </template>\n\n    <template #content>\n      <dt-stack gap=\"200\">\n        <div\n          class=\"d-recipe-message-input__link-dialog-title\"\n        >\n          {{ i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_DIALOG_TITLE') }}\n        </div>\n        <dt-input\n          v-model=\"linkText\"\n          :input-aria-label=\"textInputLabel\"\n          :size=\"100\"\n          data-qa=\"dt-message-input-link-text-input\"\n          :label=\"textInputLabel\"\n          input-wrapper-class=\"d-recipe-message-input__link-input\"\n          @click.stop\n          @focus.stop\n          @keydown.enter=\"$emit('set-link', linkText, linkInput)\"\n        />\n        <dt-input\n          v-model=\"linkInput\"\n          :input-aria-label=\"linkInputLabel\"\n          :size=\"100\"\n          data-qa=\"dt-message-input-link-input\"\n          :placeholder=\"linkInputPlaceHolder\"\n          :label=\"linkInputLabel\"\n          input-wrapper-class=\"d-recipe-message-input__link-input\"\n          @click.stop\n          @focus.stop\n          @keydown.enter=\"$emit('set-link', linkText, linkInput)\"\n        />\n        <dt-stack\n          direction=\"row\"\n          class=\"d-recipe-message-input__link-dialog-buttons\"\n        >\n          <dt-button\n            :aria-label=\"removeButtonLabel\"\n            :title=\"removeButtonLabel\"\n            importance=\"clear\"\n            kind=\"danger\"\n            :size=\"300\"\n            data-qa=\"dt-message-input-link-remove-btn\"\n            @click=\"$emit('remove-link', linkText, linkInput)\"\n          >\n            {{ removeButtonLabel }}\n          </dt-button>\n          <dt-stack\n            direction=\"row\"\n            gap=\"100\"\n          >\n            <dt-button\n              :aria-label=\"cancelButtonLabel\"\n              :title=\"cancelButtonLabel\"\n              importance=\"clear\"\n              kind=\"muted\"\n              :size=\"300\"\n              data-qa=\"dt-message-input-link-cancel-btn\"\n              @click=\"isOpen = false\"\n            >\n              {{ cancelButtonLabel }}\n            </dt-button>\n            <dt-button\n              :size=\"300\"\n              :aria-label=\"confirmButtonLabel\"\n              :title=\"confirmButtonLabel\"\n              data-qa=\"dt-message-input-link-confirm-btn\"\n              @click=\"$emit('set-link', linkText, linkInput)\"\n            >\n              {{ confirmButtonLabel }}\n            </dt-button>\n          </dt-stack>\n        </dt-stack>\n      </dt-stack>\n    </template>\n  </dt-popover>\n</template>\n\n<script>\nimport { DtPopover } from '@/components/popover';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\nimport { DtStack } from '@/components/stack';\nimport { DtIconLink2 } from '@dialpad/dialtone-icons/vue';\nimport DtRecipeMessageInputButton from './message_input_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'MessageInputLink',\n\n  components: {\n    DtPopover,\n    DtInput,\n    DtButton,\n    DtStack,\n    DtIconLink2,\n    DtRecipeMessageInputButton,\n  },\n\n  props: {\n    open: {\n      type: Boolean,\n      default: false,\n    },\n\n    linkButtonOptions: {\n      type: Object,\n      required: true,\n    },\n\n    isSelectionActive: {\n      type: Function,\n      default: () => {},\n    },\n  },\n\n  emits: ['set-link', 'remove-link', 'opened'],\n\n  data () {\n    return {\n      linkText: '',\n      linkInput: '',\n      isOpen: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    anchorButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_LINK_BUTTON_LABEL'); },\n    textInputLabel () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_TEXT_LABEL'); },\n    linkInputLabel () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_LINK_LABEL'); },\n    linkInputPlaceHolder () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_LINK_PLACEHOLDER'); },\n    removeButtonLabel () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_REMOVE_LABEL'); },\n    cancelButtonLabel () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_CANCEL_LABEL'); },\n    confirmButtonLabel () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_CONFIRM_LABEL'); },\n  },\n\n  watch: {\n    open: {\n      immediate: true,\n      handler (value) {\n        this.isOpen = value;\n      },\n    },\n  },\n\n  methods: {\n    setInitialValues (linkText, linkInput) {\n      this.linkText = linkText;\n      this.linkInput = linkInput;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtPopover","DtInput","DtButton","DtStack","DtIconLink2","DtRecipeMessageInputButton","DialtoneLocalization","value","linkText","linkInput","_hoisted_1","_createBlock","_component_dt_popover","$data","_cache","$event","_ctx","_createVNode","_component_dt_recipe_message_input_button","$options","$props","_component_dt_icon_link2","_component_dt_stack","_createElementVNode","_toDisplayString","_component_dt_input","_withKeys","_component_dt_button"],"mappings":"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"}

package/dist/lib/message-input/message-input-link.js

@@ -1,4 +1,4 @@
-import { DtIconLink2 as E } from "@dialpad/dialtone-icons/vue3";
+import { DtIconLink2 as E } from "@dialpad/dialtone-icons/vue";
 import f from "./message-input-button.js";
 import { DialtoneLocalization as N } from "../../localization/index.js";
 import { resolveComponent as r, openBlock as T, createBlock as B, withCtx as a, createVNode as l, createElementVNode as A, toDisplayString as u, withKeys as L, withModifiers as p, createTextVNode as d } from "vue";
@@ -6,12 +6,12 @@ import { _ as g } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import v from "../stack/stack.js";
 import O from "../button/button.js";
 import S from "../input/input.js";
-import x from "../popover/popover.js";
-const D = {
+import D from "../popover/popover.js";
+const x = {
   compatConfig: { MODE: 3 },
   name: "MessageInputLink",
   components: {
-    DtPopover: x,
+    DtPopover: D,
     DtInput: S,
     DtButton: O,
     DtStack: v,
@@ -108,14 +108,14 @@ function C(o, t, k, K, e, n) {
       }, 8, ["aria-label", "tooltip-text", "keyboard-shortcut-text", "is-active"])
     ]),
     content: a(() => [
-      l(m, { gap: "500" }, {
+      l(m, { gap: "200" }, {
         default: a(() => [
           A("div", M, u(e.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_DIALOG_TITLE")), 1),
           l(_, {
             modelValue: e.linkText,
             "onUpdate:modelValue": t[1] || (t[1] = (i) => e.linkText = i),
             "input-aria-label": n.textInputLabel,
-            size: "xs",
+            size: 100,
             "data-qa": "dt-message-input-link-text-input",
             label: n.textInputLabel,
             "input-wrapper-class": "d-recipe-message-input__link-input",
@@ -129,7 +129,7 @@ function C(o, t, k, K, e, n) {
             modelValue: e.linkInput,
             "onUpdate:modelValue": t[5] || (t[5] = (i) => e.linkInput = i),
             "input-aria-label": n.linkInputLabel,
-            size: "xs",
+            size: 100,
             "data-qa": "dt-message-input-link-input",
             placeholder: n.linkInputPlaceHolder,
             label: n.linkInputLabel,
@@ -150,7 +150,7 @@ function C(o, t, k, K, e, n) {
                 title: n.removeButtonLabel,
                 importance: "clear",
                 kind: "danger",
-                size: "md",
+                size: 300,
                 "data-qa": "dt-message-input-link-remove-btn",
                 onClick: t[9] || (t[9] = (i) => o.$emit("remove-link", e.linkText, e.linkInput))
               }, {
@@ -161,7 +161,7 @@ function C(o, t, k, K, e, n) {
               }, 8, ["aria-label", "title"]),
               l(m, {
                 direction: "row",
-                gap: "400"
+                gap: "100"
               }, {
                 default: a(() => [
                   l(s, {
@@ -169,7 +169,7 @@ function C(o, t, k, K, e, n) {
                     title: n.cancelButtonLabel,
                     importance: "clear",
                     kind: "muted",
-                    size: "md",
+                    size: 300,
                     "data-qa": "dt-message-input-link-cancel-btn",
                     onClick: t[10] || (t[10] = (i) => e.isOpen = !1)
                   }, {
@@ -179,7 +179,7 @@ function C(o, t, k, K, e, n) {
                     _: 1
                   }, 8, ["aria-label", "title"]),
                   l(s, {
-                    size: "md",
+                    size: 300,
                     "aria-label": n.confirmButtonLabel,
                     title: n.confirmButtonLabel,
                     "data-qa": "dt-message-input-link-confirm-btn",
@@ -203,7 +203,7 @@ function C(o, t, k, K, e, n) {
     _: 1
   }, 8, ["open"]);
 }
-const F = /* @__PURE__ */ g(D, [["render", C]]);
+const F = /* @__PURE__ */ g(x, [["render", C]]);
 export {
   F as default
 };