@dialpad/dialtone 9.124.0 → 9.126.0

package/dist/vue3/dialtone-vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialtone-vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dialtone-vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue3/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"),d=require("../../common/utils/index.cjs"),r=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:r.DtIconCheck},inject:{highlightId:{default:null}},props:{id:{type:String,default(){return d.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}},emits:["keydown","mousemove","mouseleave","mousedown"],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 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:"d-list-item__wrapper","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"},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:"400"})]),key:"0"}:void 0]),1024)):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/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;
 //# sourceMappingURL=list-item.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"list-item.cjs","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<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\"\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    >\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  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     * Mouse down event\n     *\n     * @event mousedown\n     */\n    'mousedown',\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","_openBlock","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","_withCtx","_component_dt_item_layout","_createSlots","_renderList","_ctx","_","slotName","_renderSlot","_createVNode","_component_dt_icon_check"],"mappings":"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"}
+{"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","_openBlock","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","_withCtx","_component_dt_item_layout","_normalizeClass","_createSlots","_renderList","_ctx","_","slotName","_renderSlot","_createVNode","_component_dt_icon_check"],"mappings":"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"}

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

@@ -1,14 +1,14 @@
 import { LIST_ITEM_TYPES as l, LIST_ITEM_NAVIGATION_TYPES as s } from "./list-item-constants.js";
 import h from "../../common/utils/index.js";
 import { DtIconCheck as g } from "@dialpad/dialtone-icons/vue3";
-import { resolveComponent as n, openBlock as d, createBlock as r, resolveDynamicComponent as _, mergeProps as f, toHandlers as y, withCtx as o, createSlots as p, renderList as v, renderSlot as m, createVNode as T } from "vue";
+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 b from "../item-layout/item-layout.js";
-const k = ["listitem", "menuitem", "option"], L = {
+import k from "../item-layout/item-layout.js";
+const L = ["listitem", "menuitem", "option"], S = {
   compatConfig: { MODE: 3 },
   name: "DtListItem",
   components: {
-    DtItemLayout: b,
+    DtItemLayout: k,
     DtIconCheck: g
   },
   /**
@@ -33,7 +33,7 @@ const k = ["listitem", "menuitem", "option"], L = {
     role: {
       type: String,
       default: "listitem",
-      validator: (e) => k.includes(e)
+      validator: (e) => L.includes(e)
     },
     /**
      * HTML element type (tag name) of the content wrapper element.
@@ -69,6 +69,16 @@ const k = ["listitem", "menuitem", "option"], L = {
     selected: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * Additional Classes to apply to the wrapper element,
+     * note: it only applies on "default" type
+     * Can accept all of: String, Object, and Array, i.e. has the
+     * same api as Vue's built-in handling of the class attribute.
+     */
+    wrapperClass: {
+      type: [String, Object, Array],
+      default: ""
     }
   },
   emits: [
@@ -92,13 +102,7 @@ const k = ["listitem", "menuitem", "option"], L = {
      * @event mouseleave
      * @type {MouseEvent}
      */
-    "mouseleave",
-    /**
-     * Mouse down event
-     *
-     * @event mousedown
-     */
-    "mousedown"
+    "mouseleave"
   ],
   data() {
     return {
@@ -152,9 +156,9 @@ const k = ["listitem", "menuitem", "option"], L = {
     }
   }
 };
-function H(e, S, i, D, E, t) {
-  const c = n("dt-icon-check"), u = n("dt-item-layout");
-  return d(), r(_(i.elementType), f({
+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), _({
     id: i.id,
     class: [
       "d-list-item",
@@ -167,40 +171,41 @@ function H(e, S, i, D, E, t) {
     tabindex: t.isFocusable ? 0 : -1,
     role: i.role,
     "aria-selected": i.role === "listitem" ? void 0 : t.isHighlighted
-  }, y(t.listItemListeners)), {
-    default: o(() => [
-      t.isDefaultType ? (d(), r(u, {
+  }, p(t.listItemListeners)), {
+    default: a(() => [
+      t.isDefaultType ? (n(), d(u, {
         key: 0,
         unstyled: "",
-        class: "d-list-item__wrapper",
+        class: y(["d-list-item__wrapper", i.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"
-      }, p({ _: 2 }, [
-        v(e.$slots, (C, a) => ({
-          name: a,
-          fn: o(() => [
-            m(e.$slots, a)
+        "selected-class": "d-list-item__selected",
+        "data-qa": "dt-list-item-wrapper"
+      }, v({ _: 2 }, [
+        T(e.$slots, (w, o) => ({
+          name: o,
+          fn: a(() => [
+            m(e.$slots, o)
           ])
         })),
         i.selected ? {
           name: "selected",
-          fn: o(() => [
-            T(c, { size: "400" })
+          fn: a(() => [
+            b(c, { size: "400" })
           ]),
           key: "0"
         } : void 0
-      ]), 1024)) : m(e.$slots, "default", { key: 1 })
+      ]), 1032, ["class"])) : m(e.$slots, "default", { key: 1 })
     ]),
     _: 3
   }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
 }
-const j = /* @__PURE__ */ I(L, [["render", H]]);
+const B = /* @__PURE__ */ I(S, [["render", H]]);
 export {
-  j as default
+  B as default
 };
 //# sourceMappingURL=list-item.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"list-item.js","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<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\"\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    >\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  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     * Mouse down event\n     *\n     * @event mousedown\n     */\n    'mousedown',\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","_openBlock","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","_withCtx","_component_dt_item_layout","_createSlots","_renderList","_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      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","_openBlock","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","_withCtx","_component_dt_item_layout","_normalizeClass","_createSlots","_renderList","_ctx","_","slotName","_renderSlot","_createVNode","_component_dt_icon_check"],"mappings":"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"}

package/dist/vue3/lib/loader/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./loader.cjs");exports.DtLoader=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/vue3/lib/loader/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/vue3/lib/loader/index.js

@@ -0,0 +1,5 @@
+import { default as o } from "./loader.js";
+export {
+  o as DtLoader
+};
+//# sourceMappingURL=index.js.map

package/dist/vue3/lib/loader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/vue3/lib/loader/loader.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("@dialpad/dialtone-icons/vue3"),e=require("vue"),i=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),r=require("../icon/icon-constants.cjs"),l={name:"DtLoader",components:{DtIconLoading:n.DtIconLoading},props:{ariaLabel:{type:String,default:""},size:{type:String,default:"500",validator:o=>Object.keys(r.ICON_SIZE_MODIFIERS).includes(o)}}},c=["aria-label"];function d(o,u,t,_,p,g){const a=e.resolveComponent("dt-icon-loading");return e.openBlock(),e.createElementBlock("div",{class:"d-loader","aria-label":t.ariaLabel||"loading","data-qa":"dt-loader"},[e.createVNode(a,{class:"d-loader-icon","data-qa":"dt-loader-icon",size:t.size},null,8,["size"])],8,c)}const s=i._(l,[["render",d]]);exports.default=s;
+//# sourceMappingURL=loader.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loader.cjs","sources":["../../../components/loader/loader.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-loader\"\n    :aria-label=\"ariaLabel || 'loading'\"\n    data-qa=\"dt-loader\"\n  >\n    <!-- Localize the aria-label -->\n    <dt-icon-loading\n      class=\"d-loader-icon\"\n      data-qa=\"dt-loader-icon\"\n      :size=\"size\"\n    />\n  </div>\n</template>\n\n<script>\nimport { DtIconLoading } from '@dialpad/dialtone-icons/vue3';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\n\nexport default {\n  name: 'DtLoader',\n\n  components: {\n    DtIconLoading,\n  },\n\n  props: {\n    /**\n     * The label of the loader as read out by a screen reader.\n     * Default is \"loading\"\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtIconLoading","s","ICON_SIZE_MODIFIERS","_hoisted_1","_createElementBlock","$props","_createVNode","_component_dt_icon_loading"],"mappings":"+QAmBKA,EAAU,CACb,KAAM,WAEN,WAAY,eACVC,EAAa,aACd,EAED,MAAO,CAKL,UAAW,CACT,KAAM,OACN,QAAS,EACV,EAMD,KAAM,CACJ,KAAM,OACN,QAAS,MACT,UAAYC,GAAM,OAAO,KAAKC,qBAAmB,EAAE,SAASD,CAAC,CAC9D,CACF,CACH,EA9CAE,EAAA,CAAA,YAAA,6FACEC,EAWM,mBAAA,MAAA,CAVJ,MAAM,WACL,aAAYC,EAAS,WAAA,UACtB,UAAQ,cAGRC,EAAAA,YAIEC,EAAA,CAHA,MAAM,gBACN,UAAQ,iBACP,KAAMF,EAAI,sBAVjB,EAAA,EAAAF,CAAA"}

package/dist/vue3/lib/loader/loader.js

@@ -0,0 +1,48 @@
+import { DtIconLoading as t } from "@dialpad/dialtone-icons/vue3";
+import { resolveComponent as n, openBlock as r, createElementBlock as d, createVNode as i } from "vue";
+import { _ as l } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import { ICON_SIZE_MODIFIERS as c } from "../icon/icon-constants.js";
+const s = {
+  name: "DtLoader",
+  components: {
+    DtIconLoading: t
+  },
+  props: {
+    /**
+     * The label of the loader as read out by a screen reader.
+     * Default is "loading"
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The size of the icon.
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    size: {
+      type: String,
+      default: "500",
+      validator: (e) => Object.keys(c).includes(e)
+    }
+  }
+}, _ = ["aria-label"];
+function m(e, p, o, f, u, g) {
+  const a = n("dt-icon-loading");
+  return r(), d("div", {
+    class: "d-loader",
+    "aria-label": o.ariaLabel || "loading",
+    "data-qa": "dt-loader"
+  }, [
+    i(a, {
+      class: "d-loader-icon",
+      "data-qa": "dt-loader-icon",
+      size: o.size
+    }, null, 8, ["size"])
+  ], 8, _);
+}
+const S = /* @__PURE__ */ l(s, [["render", m]]);
+export {
+  S as default
+};
+//# sourceMappingURL=loader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loader.js","sources":["../../../components/loader/loader.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-loader\"\n    :aria-label=\"ariaLabel || 'loading'\"\n    data-qa=\"dt-loader\"\n  >\n    <!-- Localize the aria-label -->\n    <dt-icon-loading\n      class=\"d-loader-icon\"\n      data-qa=\"dt-loader-icon\"\n      :size=\"size\"\n    />\n  </div>\n</template>\n\n<script>\nimport { DtIconLoading } from '@dialpad/dialtone-icons/vue3';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\n\nexport default {\n  name: 'DtLoader',\n\n  components: {\n    DtIconLoading,\n  },\n\n  props: {\n    /**\n     * The label of the loader as read out by a screen reader.\n     * Default is \"loading\"\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtIconLoading","s","ICON_SIZE_MODIFIERS","_hoisted_1","_createElementBlock","$props","_createVNode","_component_dt_icon_loading"],"mappings":";;;;AAmBA,MAAKA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,eAAAC;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACC,MAAM,OAAO,KAAKC,CAAmB,EAAE,SAASD,CAAC;AAAA,IAC9D;AAAA,EACF;AACH,GA9CAE,IAAA,CAAA,YAAA;;;cACEC,EAWM,OAAA;AAAA,IAVJ,OAAM;AAAA,IACL,cAAYC,EAAS,aAAA;AAAA,IACtB,WAAQ;AAAA;IAGRC,EAIEC,GAAA;AAAA,MAHA,OAAM;AAAA,MACN,WAAQ;AAAA,MACP,MAAMF,EAAI;AAAA;EAVjB,GAAA,GAAAF,CAAA;;;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const P=require("./last-active-nodes.cjs"),k=require("../../common/utils/index.cjs"),C=require("@tiptap/core"),_=require("../../node_modules/@tiptap/vue-3.cjs"),d=require("@dialpad/dialtone-icons/vue3"),e=require("vue"),x=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),j=require("../item-layout/item-layout.cjs"),v=require("../button/button.cjs"),V=require("./message-input-topbar.cjs"),N=require("./message-input-link.cjs"),S=require("../editor/editor-constants.cjs"),M=require("../emoji-picker/emoji-picker.cjs"),q=require("../input/input.cjs"),A=require("../popover/popover.cjs"),F=require("../rich-text-editor/rich-text-editor.cjs"),R=require("../tooltip/tooltip.cjs"),z=require("../stack/stack.cjs"),T=require("../rich-text-editor/rich-text-editor-constants.cjs"),U={name:"MeetingPill",components:{NodeViewWrapper:_.NodeViewWrapper,DtItemLayout:j.default,DtIconClose:d.DtIconClose,DtButton:v.default,DtIconVideo:d.DtIconVideo},props:_.nodeViewProps,emits:["meeting-pill-close"],methods:{close(o){this.$parent.$emit("meeting-pill-close",o)}}},H={class:"d-recipe-message-input-meeting-pill__icon"},W={class:"d-recipe-message-input-meeting-pill__close"};function K(o,t,i,a,l,n){const m=e.resolveComponent("dt-icon-video"),p=e.resolveComponent("dt-icon-close"),h=e.resolveComponent("dt-button"),g=e.resolveComponent("dt-item-layout"),c=e.resolveComponent("node-view-wrapper");return e.openBlock(),e.createBlock(c,{class:"d-recipe-message-input-meeting-pill"},{default:e.withCtx(()=>[e.createVNode(g,{class:"d-recipe-message-input-meeting-pill__layout",unstyled:""},{left:e.withCtx(()=>[e.createElementVNode("div",H,[e.createVNode(m,{size:"400"})])]),right:e.withCtx(()=>[e.createElementVNode("div",W,[e.createVNode(h,{circle:"","aria-label":o.node.attrs["close-button-aria-label"],size:"xs",importance:"clear",onClick:n.close},{icon:e.withCtx(()=>[e.createVNode(p,{size:"300"})]),_:1},8,["aria-label","onClick"])])]),default:e.withCtx(()=>[e.createTextVNode(" "+e.toDisplayString(o.node.attrs.text)+" ",1)]),_:1})]),_:1})}const X=x._(U,[["render",K]]),Q=C.Node.create({atom:!0,group:"inline",inline:!0,addNodeView(){return _.VueNodeViewRenderer(X)},addAttributes(){return{text:{default:'Please pass in "text" attribute'},"close-button-aria-label":{}}},parseHTML(){return[{tag:"meeting-pill"}]},renderText({node:o}){return"/dpm"},renderHTML({HTMLAttributes:o}){return["meeting-pill",C.mergeAttributes(o)]}}),G={compatConfig:{MODE:3},name:"DtRecipeMessageInput",components:{DtButton:v.default,DtEmojiPicker:M.default,DtInput:q.default,DtPopover:A.default,DtRecipeMessageInputTopbar:V.default,DtRecipeMessageInputLink:N.default,DtRichTextEditor:F.default,DtTooltip:R.default,DtStack:z.default,DtIconImage:d.DtIconImage,DtIconVerySatisfied:d.DtIconVerySatisfied,DtIconSatisfied:d.DtIconSatisfied,DtIconSend:d.DtIconSend},mixins:[],inheritAttrs:!1,props:{richText:{type:Boolean,default:!0},modelValue:{type:[Object,String],default:""},editable:{type:Boolean,default:!0},inputAriaLabel:{type:String,required:!0,default:""},preventTyping:{type:Boolean,default:!1},inputClass:{type:String,default:""},autoFocus:{type:[Boolean,String,Number],default:!1,validator(o){return typeof o=="string"?T.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(o):!0}},outputFormat:{type:String,default:"json",validator(o){return T.RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(o)}},placeholder:{type:String,default:""},disableSend:{type:Boolean,default:!1},maxHeight:{type:String,default:"unset"},showEmojiPicker:{type:Boolean,default:!0},emojiPickerProps:{type:Object,default:()=>({}),validate(o){return["searchNoResultsLabel","searchResultsLabel","searchPlaceholderLabel","skinSelectorButtonTooltipLabel","tabSetLabels"].every(t=>o[t]!=null)}},emojiTooltipMessage:{type:String,default:"Emoji"},emojiButtonAriaLabel:{type:String,default:"emoji button"},showCharacterLimit:{type:[Boolean,Object],default:()=>({count:1500,warning:500,message:""})},showImagePicker:{type:[Boolean,Object],default:()=>({tooltipLabel:"Attach Image",ariaLabel:"image button"})},showSend:{type:[Boolean,Object],default:()=>({})},showCancel:{type:[Boolean,Object],default:()=>({text:"Cancel"})},mentionSuggestion:{type:Object,default:null},channelSuggestion:{type:Object,default:null},slashCommandSuggestion:{type:Object,default:null},boldButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle bold on selected text",tooltipText:"Bold",keyboardShortcutText:"Mod + B"})},italicButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle italic on selected text",tooltipText:"Italic",keyboardShortcutText:"Mod + I"})},strikeButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle strikethrough on selected text",tooltipText:"Strikethrough",keyboardShortcutText:"Mod + Shift + S"})},linkButtonOptions:{type:Object,default:()=>({ariaLabel:"Create or edit link on selected text",tooltipText:"Link",keyboardShortcutText:"Mod + K",dialogTitle:"Add a link",textLabel:"Text to display (optional)",linkLabel:"Link",linkPlaceholder:"e.g. https://www.dialpad.com",removeLabel:"Remove",cancelLabel:"Cancel",confirmLabel:"Done",visuallyHiddenCloseText:"Close link dialog"})},bulletListButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle bullet list on selected text",tooltipText:"Bullet list",keyboardShortcutText:"Mod + Shift + 8"})},orderedListButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle ordered list on selected text",tooltipText:"Ordered list",keyboardShortcutText:"Mod + Shift + 7"})},blockQuoteButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle Blockquote on selected text",tooltipText:"Blockquote",keyboardShortcutText:"Mod + Shift + B"})},codeButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle code tag on selected text",tooltipText:"Code",keyboardShortcutText:"Mod + E"})},codeBlockButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle code block on selected text",tooltipText:"Code block",keyboardShortcutText:"Mod + Alt + C"})}},emits:["submit","select-media","add-media","paste-media","cancel","skin-tone","selected-emoji","selected-command","meeting-pill-close","update:modelValue","text-input"],data(){return{lastActiveNodes:P.default,additionalExtensions:[Q],internalInputValue:this.modelValue,imagePickerFocus:!1,emojiPickerFocus:!1,emojiPickerOpened:!1,isFocused:!1,linkOptions:{class:"d-link d-c-text d-d-inline-block"},linkDialogOpen:!1,selectedText:"",text:"",hideLinkBubbleMenu:!1}},computed:{showSendIcon(){return!this.showSend.text},inputLength(){return this.text.length},displayCharacterLimitWarning(){return!!this.showCharacterLimit&&this.showCharacterLimit.count-this.inputLength<=this.showCharacterLimit.warning},characterLimitTooltipEnabled(){return this.showCharacterLimit.message&&this.showCharacterLimit.count-this.inputLength<0},isSendDisabled(){return this.disableSend||this.showCharacterLimit&&this.inputLength>this.showCharacterLimit.count},computedCloseButtonProps(){return{ariaLabel:"Close"}},emojiPickerHovered(){return this.emojiPickerFocus||this.emojiPickerOpened},sendIconSize(){return"300"}},watch:{modelValue(o){this.internalInputValue=o},emojiPickerOpened(o){var t;o||(t=this.$refs.richTextEditor)==null||t.focusEditor()}},created(){this.modelValue&&this.outputFormat==="text"?this.internalInputValue=this.modelValue.replace(/\n/g,"<br>"):this.internalInputValue=this.modelValue},methods:{removeClassStyleAttrs:k.removeClassStyleAttrs,addClassStyleAttrs:k.addClassStyleAttrs,linkDialogOpened(o){var t;this.linkDialogOpen=o,o===!0?this.initLinkDialog():(this.hideLinkBubbleMenu=!1,(t=this.$refs.richTextEditor)==null||t.focusEditor())},handleTopbarClick(o){var a;const t=(a=this.$refs.richTextEditor)==null?void 0:a.editor,i={bold:()=>t==null?void 0:t.chain().focus().toggleBold().run(),italic:()=>t==null?void 0:t.chain().focus().toggleItalic().run(),strike:()=>t==null?void 0:t.chain().focus().toggleStrike().run(),bulletList:()=>t==null?void 0:t.chain().focus().toggleBulletList().run(),orderedList:()=>t==null?void 0:t.chain().focus().toggleOrderedList().run(),blockquote:()=>t==null?void 0:t.chain().focus().toggleBlockquote().run(),code:()=>t==null?void 0:t.chain().focus().toggleCode().run(),codeBlock:()=>t==null?void 0:t.chain().focus().toggleCodeBlock().run()};t&&i[o]&&i[o]()},isSelectionActive(o){var t,i,a,l;return["bulletList","orderedList"].includes(o)?this.lastActiveNodes((i=(t=this.$refs.richTextEditor)==null?void 0:t.editor)==null?void 0:i.state,[{type:"bulletList"},{type:"orderedList"}]).includes(o)&&this.isFocused:((l=(a=this.$refs.richTextEditor)==null?void 0:a.editor)==null?void 0:l.isActive(o))&&this.isFocused},initLinkDialog(){var o,t,i;this.$refs.link.setInitialValues(this.selectedText,(i=(t=(o=this.$refs.richTextEditor)==null?void 0:o.editor)==null?void 0:t.getAttributes("link"))==null?void 0:i.href),this.hideLinkBubbleMenu=!0,this.linkDialogOpen=!0},removeLink(){var o;(o=this.$refs.richTextEditor)==null||o.removeLink(),this.linkDialogOpen=!1},setLink(o,t){this.$refs.richTextEditor.setLink(t,o,this.linkOptions,S.EDITOR_SUPPORTED_LINK_PROTOCOLS,S.EDITOR_DEFAULT_LINK_PREFIX),this.linkDialogOpen=!1},onMousedown(o){k.returnFirstEl(this.$refs.richTextEditor.$el).querySelector(".tiptap").contains(o.target)||(o.preventDefault(),this.$refs.richTextEditor.focusEditor())},onDrop(o){const t=o.dataTransfer,i=Array.from(t.files);this.$emit("add-media",i)},onPaste(o){if(o.clipboardData.files.length){o.stopPropagation(),o.preventDefault();const t=[...o.clipboardData.files];this.$emit("paste-media",t)}},onSkinTone(o){this.$emit("skin-tone",o)},onSelectEmoji(o,t){o&&(o.shift_key||t(),this.$refs.richTextEditor.editor.commands.insertContent({type:"emoji",attrs:{code:o.shortname}}),this.$emit("selected-emoji",o))},onSelectImage(){this.$refs.messageInputImageUpload.$refs.input.click()},onImageUpload(){this.$emit("select-media",this.$refs.messageInputImageUpload.$refs.input.files)},toggleEmojiPicker(){this.emojiPickerOpened=!this.emojiPickerOpened},onSend(){this.isSendDisabled||this.$emit("submit",this.internalInputValue)},onCancel(){this.$emit("cancel")},onInput(o){this.$emit("update:modelValue",o)},onTextInput(o){this.text=o,this.$emit("text-input",o)}}},Y={class:"d-recipe-message-input__bottom-section"},J={class:"d-recipe-message-input__bottom-section-left"},Z={class:"d-recipe-message-input__bottom-section-right"},$={class:"d-recipe-message-input__sms-count"},ee={key:0};function te(o,t,i,a,l,n){const m=e.resolveComponent("dt-recipe-message-input-link"),p=e.resolveComponent("dt-recipe-message-input-topbar"),h=e.resolveComponent("dt-rich-text-editor"),g=e.resolveComponent("dt-icon-image"),c=e.resolveComponent("dt-button"),L=e.resolveComponent("dt-input"),w=e.resolveComponent("dt-icon-very-satisfied"),y=e.resolveComponent("dt-icon-satisfied"),B=e.resolveComponent("dt-emoji-picker"),I=e.resolveComponent("dt-popover"),f=e.resolveComponent("dt-stack"),O=e.resolveComponent("dt-tooltip"),D=e.resolveComponent("dt-icon-send"),E=e.resolveDirective("dt-scrollbar"),b=e.resolveDirective("dt-tooltip");return e.openBlock(),e.createElementBlock("div",e.mergeProps({"data-qa":"dt-recipe-message-input",role:"presentation",class:"d-recipe-message-input"},n.addClassStyleAttrs(o.$attrs),{onDragover:t[12]||(t[12]=e.withModifiers(()=>{},["prevent"])),onDrop:t[13]||(t[13]=e.withModifiers((...s)=>n.onDrop&&n.onDrop(...s),["prevent"])),onPaste:t[14]||(t[14]=(...s)=>n.onPaste&&n.onPaste(...s)),onMousedown:t[15]||(t[15]=(...s)=>n.onMousedown&&n.onMousedown(...s))}),[e.renderSlot(o.$slots,"top"),i.richText?(e.openBlock(),e.createBlock(p,{key:l.selectedText,"bold-button-options":i.boldButtonOptions,"italic-button-options":i.italicButtonOptions,"strike-button-options":i.strikeButtonOptions,"bullet-list-button-options":i.bulletListButtonOptions,"ordered-list-button-options":i.orderedListButtonOptions,"block-quote-button-options":i.blockQuoteButtonOptions,"code-button-options":i.codeButtonOptions,"code-block-button-options":i.codeBlockButtonOptions,"is-selection-active":n.isSelectionActive,onClick:n.handleTopbarClick},{link:e.withCtx(()=>[e.createVNode(m,{ref:"link",open:l.linkDialogOpen,"link-button-options":i.linkButtonOptions,"is-selection-active":n.isSelectionActive,onOpened:n.linkDialogOpened,onSetLink:n.setLink,onRemoveLink:n.removeLink},null,8,["open","link-button-options","is-selection-active","onOpened","onSetLink","onRemoveLink"])]),_:1},8,["bold-button-options","italic-button-options","strike-button-options","bullet-list-button-options","ordered-list-button-options","block-quote-button-options","code-button-options","code-block-button-options","is-selection-active","onClick"])):e.createCommentVNode("",!0),e.withDirectives((e.openBlock(),e.createElementBlock("div",{class:"d-recipe-message-input__editor-wrapper",style:e.normalizeStyle({"max-height":i.maxHeight})},[e.createVNode(h,e.mergeProps({ref:"richTextEditor",modelValue:l.internalInputValue,"onUpdate:modelValue":t[0]||(t[0]=s=>l.internalInputValue=s),"allow-blockquote":i.richText,"allow-bold":i.richText,"allow-bullet-list":i.richText,"allow-code":i.richText,"allow-codeblock":i.richText,"allow-italic":i.richText,"allow-strike":i.richText,"allow-underline":i.richText,editable:i.editable,"input-aria-label":i.inputAriaLabel,"input-class":i.inputClass,"output-format":i.outputFormat,"auto-focus":i.autoFocus,link:i.richText,placeholder:i.placeholder,"prevent-typing":i.preventTyping,"mention-suggestion":i.mentionSuggestion,"channel-suggestion":i.channelSuggestion,"slash-command-suggestion":i.slashCommandSuggestion,"additional-extensions":l.additionalExtensions,"hide-link-bubble-menu":l.hideLinkBubbleMenu},n.removeClassStyleAttrs(o.$attrs),{onInput:n.onInput,onTextInput:n.onTextInput,onEnter:n.onSend,onSelected:t[1]||(t[1]=s=>l.selectedText=s),onEditLink:n.initLinkDialog,onFocus:t[2]||(t[2]=s=>l.isFocused=!0),onBlur:t[3]||(t[3]=s=>l.isFocused=!1)}),null,16,["modelValue","allow-blockquote","allow-bold","allow-bullet-list","allow-code","allow-codeblock","allow-italic","allow-strike","allow-underline","editable","input-aria-label","input-class","output-format","auto-focus","link","placeholder","prevent-typing","mention-suggestion","channel-suggestion","slash-command-suggestion","additional-extensions","hide-link-bubble-menu","onInput","onTextInput","onEnter","onEditLink"])],4)),[[E]]),e.renderSlot(o.$slots,"middle"),e.createElementVNode("section",Y,[e.createElementVNode("div",J,[e.createVNode(f,{gap:"200",direction:"row"},{default:e.withCtx(()=>{var s;return[i.showImagePicker?e.withDirectives((e.openBlock(),e.createBlock(c,{key:0,"data-qa":"dt-recipe-message-input-image-btn",size:"sm",class:"d-recipe-message-input__button",kind:"muted",importance:"clear","aria-label":i.showImagePicker.ariaLabel,onClick:n.onSelectImage,onMouseenter:t[4]||(t[4]=r=>l.imagePickerFocus=!0),onMouseleave:t[5]||(t[5]=r=>l.imagePickerFocus=!1),onFocus:t[6]||(t[6]=r=>l.imagePickerFocus=!0),onBlur:t[7]||(t[7]=r=>l.imagePickerFocus=!1)},{icon:e.withCtx(()=>[e.createVNode(g,{size:"300"})]),_:1},8,["aria-label","onClick"])),[[b,(s=i.showImagePicker)==null?void 0:s.tooltipLabel,"top-start"]]):e.createCommentVNode("",!0),e.createVNode(L,{ref:"messageInputImageUpload","data-qa":"dt-recipe-message-input-image-input",accept:"image/*, video/*",type:"file",class:"d-recipe-message-input__image-input",multiple:"",hidden:"",onInput:n.onImageUpload},null,8,["onInput"]),i.showEmojiPicker?(e.openBlock(),e.createBlock(I,{key:1,"open.sync":"emojiPickerOpened","data-qa":"dt-recipe-message-input-emoji-picker-popover","initial-focus-element":"#searchInput",padding:"none"},{anchor:e.withCtx(({attrs:r})=>[e.withDirectives((e.openBlock(),e.createBlock(c,e.mergeProps(r,{"data-qa":"dt-recipe-message-input-emoji-picker-btn",size:"sm",class:"d-recipe-message-input__button",kind:"muted",importance:"clear","aria-label":i.emojiButtonAriaLabel,onClick:n.toggleEmojiPicker,onMouseenter:t[8]||(t[8]=u=>l.emojiPickerFocus=!0),onMouseleave:t[9]||(t[9]=u=>l.emojiPickerFocus=!1),onFocus:t[10]||(t[10]=u=>l.emojiPickerFocus=!0),onBlur:t[11]||(t[11]=u=>l.emojiPickerFocus=!1)}),{icon:e.withCtx(()=>[n.emojiPickerHovered?(e.openBlock(),e.createBlock(w,{key:0,size:"300"})):(e.openBlock(),e.createBlock(y,{key:1,size:"300"}))]),_:2},1040,["aria-label","onClick"])),[[b,i.emojiTooltipMessage]])]),content:e.withCtx(({close:r})=>[e.createVNode(B,e.mergeProps(i.emojiPickerProps,{onSkinTone:n.onSkinTone,onSelectedEmoji:u=>n.onSelectEmoji(u,r)}),null,16,["onSkinTone","onSelectedEmoji"])]),_:1})):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"emojiGiphyPicker"),e.renderSlot(o.$slots,"customActionIcons")]}),_:3})]),e.createElementVNode("div",Z,[e.createVNode(f,{direction:"row",gap:"300"},{default:e.withCtx(()=>[e.createElementVNode("div",$,[e.renderSlot(o.$slots,"smsCount")]),i.showCharacterLimit?(e.openBlock(),e.createBlock(O,{key:0,class:"d-recipe-message-input__remaining-char-tooltip",placement:"top-end",enabled:n.characterLimitTooltipEnabled,message:i.showCharacterLimit.message,offset:[10,8]},{anchor:e.withCtx(()=>[e.withDirectives(e.createElementVNode("p",{class:"d-recipe-message-input__remaining-char","data-qa":"dt-recipe-message-input-character-limit"},e.toDisplayString(i.showCharacterLimit.count-n.inputLength),513),[[e.vShow,n.displayCharacterLimitWarning]])]),_:1},8,["enabled","message"])):e.createCommentVNode("",!0),i.showCancel?(e.openBlock(),e.createBlock(c,{key:1,"data-qa":"dt-recipe-message-input-cancel-button",class:"d-recipe-message-input__button d-recipe-message-input__cancel-button",size:"sm",kind:"muted",importance:"clear","aria-label":i.showCancel.ariaLabel,onClick:n.onCancel},{default:e.withCtx(()=>[e.createElementVNode("p",null,e.toDisplayString(i.showCancel.text),1)]),_:1},8,["aria-label","onClick"])):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"sendButton",{},()=>{var s;return[i.showSend?e.withDirectives((e.openBlock(),e.createBlock(c,{key:0,"data-qa":"dt-recipe-message-input-send-btn",size:"sm",kind:"default",importance:"primary",class:e.normalizeClass(["d-recipe-message-input__button d-recipe-message-input__send-button",{"d-recipe-message-input__send-button--disabled":n.isSendDisabled,"d-btn--icon-only":n.showSendIcon}]),"aria-label":i.showSend.ariaLabel,"aria-disabled":n.isSendDisabled,onClick:n.onSend},e.createSlots({default:e.withCtx(()=>[i.showSend.text?(e.openBlock(),e.createElementBlock("p",ee,e.toDisplayString(i.showSend.text),1)):e.createCommentVNode("",!0)]),_:2},[n.showSendIcon?{name:"icon",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"sendIcon",{iconSize:n.sendIconSize},()=>[e.createVNode(D,{size:n.sendIconSize},null,8,["size"])])]),key:"0"}:void 0]),1032,["class","aria-label","aria-disabled","onClick"])),[[b,(s=i.showSend)==null?void 0:s.tooltipLabel,"top-end"]]):e.createCommentVNode("",!0)]})]),_:3})])])],16)}const oe=x._(G,[["render",te]]);exports.default=oe;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const P=require("./last-active-nodes.cjs"),k=require("../../common/utils/index.cjs"),C=require("@tiptap/core"),_=require("../../node_modules/@tiptap/vue-3.cjs"),d=require("@dialpad/dialtone-icons/vue3"),e=require("vue"),T=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),j=require("../item-layout/item-layout.cjs"),v=require("../button/button.cjs"),V=require("./message-input-topbar.cjs"),N=require("./message-input-link.cjs"),S=require("../editor/editor-constants.cjs"),M=require("../emoji-picker/emoji-picker.cjs"),q=require("../input/input.cjs"),A=require("../popover/popover.cjs"),F=require("../rich-text-editor/rich-text-editor.cjs"),R=require("../tooltip/tooltip.cjs"),z=require("../stack/stack.cjs"),x=require("../rich-text-editor/rich-text-editor-constants.cjs"),U={name:"MeetingPill",components:{NodeViewWrapper:_.NodeViewWrapper,DtItemLayout:j.default,DtIconClose:d.DtIconClose,DtButton:v.default,DtIconVideo:d.DtIconVideo},props:_.nodeViewProps,emits:["meeting-pill-close"],methods:{close(o){this.$parent.$emit("meeting-pill-close",o)}}},H={class:"d-recipe-message-input-meeting-pill__icon"},W={class:"d-recipe-message-input-meeting-pill__close"};function K(o,t,i,a,l,n){const m=e.resolveComponent("dt-icon-video"),p=e.resolveComponent("dt-icon-close"),h=e.resolveComponent("dt-button"),g=e.resolveComponent("dt-item-layout"),c=e.resolveComponent("node-view-wrapper");return e.openBlock(),e.createBlock(c,{class:"d-recipe-message-input-meeting-pill"},{default:e.withCtx(()=>[e.createVNode(g,{class:"d-recipe-message-input-meeting-pill__layout",unstyled:""},{left:e.withCtx(()=>[e.createElementVNode("div",H,[e.createVNode(m,{size:"400"})])]),right:e.withCtx(()=>[e.createElementVNode("div",W,[e.createVNode(h,{circle:"","aria-label":o.node.attrs["close-button-aria-label"],size:"xs",importance:"clear",onClick:n.close},{icon:e.withCtx(()=>[e.createVNode(p,{size:"300"})]),_:1},8,["aria-label","onClick"])])]),default:e.withCtx(()=>[e.createTextVNode(" "+e.toDisplayString(o.node.attrs.text)+" ",1)]),_:1})]),_:1})}const X=T._(U,[["render",K]]),Q=C.Node.create({atom:!0,group:"inline",inline:!0,addNodeView(){return _.VueNodeViewRenderer(X)},addAttributes(){return{text:{default:'Please pass in "text" attribute'},"close-button-aria-label":{}}},parseHTML(){return[{tag:"meeting-pill"}]},renderText({node:o}){return"/dpm"},renderHTML({HTMLAttributes:o}){return["meeting-pill",C.mergeAttributes(o)]}}),G={compatConfig:{MODE:3},name:"DtRecipeMessageInput",components:{DtButton:v.default,DtEmojiPicker:M.default,DtInput:q.default,DtPopover:A.default,DtRecipeMessageInputTopbar:V.default,DtRecipeMessageInputLink:N.default,DtRichTextEditor:F.default,DtTooltip:R.default,DtStack:z.default,DtIconImage:d.DtIconImage,DtIconVerySatisfied:d.DtIconVerySatisfied,DtIconSatisfied:d.DtIconSatisfied,DtIconSend:d.DtIconSend},mixins:[],inheritAttrs:!1,props:{richText:{type:Boolean,default:!0},modelValue:{type:[Object,String],default:""},editable:{type:Boolean,default:!0},inputAriaLabel:{type:String,required:!0,default:""},preventTyping:{type:Boolean,default:!1},inputClass:{type:String,default:""},autoFocus:{type:[Boolean,String,Number],default:!1,validator(o){return typeof o=="string"?x.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(o):!0}},outputFormat:{type:String,default:"json",validator(o){return x.RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(o)}},placeholder:{type:String,default:""},disableSend:{type:Boolean,default:!1},maxHeight:{type:String,default:"unset"},showEmojiPicker:{type:Boolean,default:!0},emojiPickerProps:{type:Object,default:()=>({}),validate(o){return["searchNoResultsLabel","searchResultsLabel","searchPlaceholderLabel","skinSelectorButtonTooltipLabel","tabSetLabels"].every(t=>o[t]!=null)}},emojiTooltipMessage:{type:String,default:"Emoji"},emojiButtonAriaLabel:{type:String,default:"emoji button"},showCharacterLimit:{type:[Boolean,Object],default:()=>({count:1500,warning:500,message:""})},showImagePicker:{type:[Boolean,Object],default:()=>({tooltipLabel:"Attach Image",ariaLabel:"image button"})},showSend:{type:[Boolean,Object],default:()=>({})},showCancel:{type:[Boolean,Object],default:()=>({text:"Cancel"})},mentionSuggestion:{type:Object,default:null},channelSuggestion:{type:Object,default:null},slashCommandSuggestion:{type:Object,default:null},boldButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle bold on selected text",tooltipText:"Bold",keyboardShortcutText:"Mod + B"})},italicButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle italic on selected text",tooltipText:"Italic",keyboardShortcutText:"Mod + I"})},strikeButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle strikethrough on selected text",tooltipText:"Strikethrough",keyboardShortcutText:"Mod + Shift + S"})},linkButtonOptions:{type:Object,default:()=>({ariaLabel:"Create or edit link on selected text",tooltipText:"Link",keyboardShortcutText:"Mod + K",dialogTitle:"Add a link",textLabel:"Text to display (optional)",linkLabel:"Link",linkPlaceholder:"e.g. https://www.dialpad.com",removeLabel:"Remove",cancelLabel:"Cancel",confirmLabel:"Done",visuallyHiddenCloseText:"Close link dialog"})},bulletListButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle bullet list on selected text",tooltipText:"Bullet list",keyboardShortcutText:"Mod + Shift + 8"})},orderedListButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle ordered list on selected text",tooltipText:"Ordered list",keyboardShortcutText:"Mod + Shift + 7"})},blockQuoteButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle Blockquote on selected text",tooltipText:"Blockquote",keyboardShortcutText:"Mod + Shift + B"})},codeButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle code tag on selected text",tooltipText:"Code",keyboardShortcutText:"Mod + E"})},codeBlockButtonOptions:{type:Object,default:()=>({ariaLabel:"Toggle code block on selected text",tooltipText:"Code block",keyboardShortcutText:"Mod + Alt + C"})}},emits:["submit","select-media","add-media","paste-media","cancel","skin-tone","selected-emoji","selected-command","meeting-pill-close","update:modelValue","text-input"],data(){return{lastActiveNodes:P.default,additionalExtensions:[Q],internalInputValue:this.modelValue,imagePickerFocus:!1,emojiPickerFocus:!1,emojiPickerOpened:!1,isFocused:!1,linkOptions:{class:"d-link d-c-text d-d-inline-block"},linkDialogOpen:!1,selectedText:"",text:"",hideLinkBubbleMenu:!1}},computed:{showSendIcon(){return!this.showSend.text},inputLength(){return this.text.length},displayCharacterLimitWarning(){return!!this.showCharacterLimit&&this.showCharacterLimit.count-this.inputLength<=this.showCharacterLimit.warning},characterLimitTooltipEnabled(){return this.showCharacterLimit.message&&this.showCharacterLimit.count-this.inputLength<0},isSendDisabled(){return this.disableSend||this.showCharacterLimit&&this.inputLength>this.showCharacterLimit.count},computedCloseButtonProps(){return{ariaLabel:"Close"}},emojiPickerHovered(){return this.emojiPickerFocus||this.emojiPickerOpened},sendIconSize(){return"300"}},watch:{modelValue(o){this.internalInputValue=o},emojiPickerOpened(o){var t;o||(t=this.$refs.richTextEditor)==null||t.focusEditor()}},created(){this.modelValue&&this.outputFormat==="text"?this.internalInputValue=this.modelValue.replace(/\n/g,"<br>"):this.internalInputValue=this.modelValue},methods:{removeClassStyleAttrs:k.removeClassStyleAttrs,addClassStyleAttrs:k.addClassStyleAttrs,linkDialogOpened(o){var t;this.linkDialogOpen=o,o===!0?this.initLinkDialog():(this.hideLinkBubbleMenu=!1,(t=this.$refs.richTextEditor)==null||t.focusEditor())},handleTopbarClick(o){var a;const t=(a=this.$refs.richTextEditor)==null?void 0:a.editor,i={bold:()=>t==null?void 0:t.chain().focus().toggleBold().run(),italic:()=>t==null?void 0:t.chain().focus().toggleItalic().run(),strike:()=>t==null?void 0:t.chain().focus().toggleStrike().run(),bulletList:()=>t==null?void 0:t.chain().focus().toggleBulletList().run(),orderedList:()=>t==null?void 0:t.chain().focus().toggleOrderedList().run(),blockquote:()=>t==null?void 0:t.chain().focus().toggleBlockquote().run(),code:()=>t==null?void 0:t.chain().focus().toggleCode().run(),codeBlock:()=>t==null?void 0:t.chain().focus().toggleCodeBlock().run()};t&&i[o]&&i[o]()},isSelectionActive(o){var t,i,a,l;return["bulletList","orderedList"].includes(o)?this.lastActiveNodes((i=(t=this.$refs.richTextEditor)==null?void 0:t.editor)==null?void 0:i.state,[{type:"bulletList"},{type:"orderedList"}]).includes(o)&&this.isFocused:((l=(a=this.$refs.richTextEditor)==null?void 0:a.editor)==null?void 0:l.isActive(o))&&this.isFocused},initLinkDialog(){var o,t,i;this.$refs.link.setInitialValues(this.selectedText,(i=(t=(o=this.$refs.richTextEditor)==null?void 0:o.editor)==null?void 0:t.getAttributes("link"))==null?void 0:i.href),this.hideLinkBubbleMenu=!0,this.linkDialogOpen=!0},removeLink(){var o;(o=this.$refs.richTextEditor)==null||o.removeLink(),this.linkDialogOpen=!1},setLink(o,t){this.$refs.richTextEditor.setLink(t,o,this.linkOptions,S.EDITOR_SUPPORTED_LINK_PROTOCOLS,S.EDITOR_DEFAULT_LINK_PREFIX),this.linkDialogOpen=!1},onMousedown(o){k.returnFirstEl(this.$refs.richTextEditor.$el).querySelector(".tiptap").contains(o.target)||(o.preventDefault(),this.$refs.richTextEditor.focusEditor())},onDrop(o){const t=o.dataTransfer,i=Array.from(t.files);this.$emit("add-media",i)},onPaste(o){if(o.clipboardData.files.length){o.stopPropagation(),o.preventDefault();const t=[...o.clipboardData.files];this.$emit("paste-media",t)}},onSkinTone(o){this.$emit("skin-tone",o)},onSelectEmoji(o,t){o&&(o.shift_key||t(),this.$refs.richTextEditor.editor.commands.insertContent({type:"emoji",attrs:{code:o.shortname}}),this.$emit("selected-emoji",o))},onSelectImage(){this.$refs.messageInputImageUpload.$refs.input.click()},onImageUpload(){this.$emit("select-media",this.$refs.messageInputImageUpload.$refs.input.files)},toggleEmojiPicker(){this.emojiPickerOpened=!this.emojiPickerOpened},onSend(){this.isSendDisabled||this.$emit("submit",this.internalInputValue)},onCancel(){this.$emit("cancel")},onInput(o){this.$emit("update:modelValue",o)},onTextInput(o){this.text=o,this.$emit("text-input",o)}}},Y={class:"d-recipe-message-input__bottom-section"},J={class:"d-recipe-message-input__bottom-section-left"},Z={class:"d-recipe-message-input__bottom-section-right"},$={class:"d-recipe-message-input__sms-count"},ee={key:0};function te(o,t,i,a,l,n){const m=e.resolveComponent("dt-recipe-message-input-link"),p=e.resolveComponent("dt-recipe-message-input-topbar"),h=e.resolveComponent("dt-rich-text-editor"),g=e.resolveComponent("dt-icon-image"),c=e.resolveComponent("dt-button"),L=e.resolveComponent("dt-input"),w=e.resolveComponent("dt-icon-very-satisfied"),y=e.resolveComponent("dt-icon-satisfied"),B=e.resolveComponent("dt-emoji-picker"),I=e.resolveComponent("dt-popover"),f=e.resolveComponent("dt-stack"),O=e.resolveComponent("dt-tooltip"),D=e.resolveComponent("dt-icon-send"),E=e.resolveDirective("dt-scrollbar"),b=e.resolveDirective("dt-tooltip");return e.openBlock(),e.createElementBlock("div",e.mergeProps({"data-qa":"dt-recipe-message-input",role:"presentation",class:"d-recipe-message-input"},n.addClassStyleAttrs(o.$attrs),{onDragover:t[12]||(t[12]=e.withModifiers(()=>{},["prevent"])),onDrop:t[13]||(t[13]=e.withModifiers((...s)=>n.onDrop&&n.onDrop(...s),["prevent"])),onPaste:t[14]||(t[14]=(...s)=>n.onPaste&&n.onPaste(...s)),onMousedown:t[15]||(t[15]=(...s)=>n.onMousedown&&n.onMousedown(...s))}),[e.renderSlot(o.$slots,"top"),i.richText?(e.openBlock(),e.createBlock(p,{key:l.selectedText,"bold-button-options":i.boldButtonOptions,"italic-button-options":i.italicButtonOptions,"strike-button-options":i.strikeButtonOptions,"bullet-list-button-options":i.bulletListButtonOptions,"ordered-list-button-options":i.orderedListButtonOptions,"block-quote-button-options":i.blockQuoteButtonOptions,"code-button-options":i.codeButtonOptions,"code-block-button-options":i.codeBlockButtonOptions,"is-selection-active":n.isSelectionActive,onClick:n.handleTopbarClick},{link:e.withCtx(()=>[e.createVNode(m,{ref:"link",open:l.linkDialogOpen,"link-button-options":i.linkButtonOptions,"is-selection-active":n.isSelectionActive,onOpened:n.linkDialogOpened,onSetLink:n.setLink,onRemoveLink:n.removeLink},null,8,["open","link-button-options","is-selection-active","onOpened","onSetLink","onRemoveLink"])]),_:1},8,["bold-button-options","italic-button-options","strike-button-options","bullet-list-button-options","ordered-list-button-options","block-quote-button-options","code-button-options","code-block-button-options","is-selection-active","onClick"])):e.createCommentVNode("",!0),e.withDirectives((e.openBlock(),e.createElementBlock("div",{class:"d-recipe-message-input__editor-wrapper",style:e.normalizeStyle({"max-height":i.maxHeight})},[e.createVNode(h,e.mergeProps({ref:"richTextEditor",modelValue:l.internalInputValue,"onUpdate:modelValue":t[0]||(t[0]=s=>l.internalInputValue=s),"allow-blockquote":i.richText,"allow-bold":i.richText,"allow-bullet-list":i.richText,"allow-code":i.richText,"allow-codeblock":i.richText,"allow-italic":i.richText,"allow-strike":i.richText,"allow-underline":i.richText,"paste-rich-text":i.richText,editable:i.editable,"input-aria-label":i.inputAriaLabel,"input-class":i.inputClass,"output-format":i.outputFormat,"auto-focus":i.autoFocus,link:i.richText,placeholder:i.placeholder,"prevent-typing":i.preventTyping,"mention-suggestion":i.mentionSuggestion,"channel-suggestion":i.channelSuggestion,"slash-command-suggestion":i.slashCommandSuggestion,"additional-extensions":l.additionalExtensions,"hide-link-bubble-menu":l.hideLinkBubbleMenu},n.removeClassStyleAttrs(o.$attrs),{onInput:n.onInput,onTextInput:n.onTextInput,onEnter:n.onSend,onSelected:t[1]||(t[1]=s=>l.selectedText=s),onEditLink:n.initLinkDialog,onFocus:t[2]||(t[2]=s=>l.isFocused=!0),onBlur:t[3]||(t[3]=s=>l.isFocused=!1)}),null,16,["modelValue","allow-blockquote","allow-bold","allow-bullet-list","allow-code","allow-codeblock","allow-italic","allow-strike","allow-underline","paste-rich-text","editable","input-aria-label","input-class","output-format","auto-focus","link","placeholder","prevent-typing","mention-suggestion","channel-suggestion","slash-command-suggestion","additional-extensions","hide-link-bubble-menu","onInput","onTextInput","onEnter","onEditLink"])],4)),[[E]]),e.renderSlot(o.$slots,"middle"),e.createElementVNode("section",Y,[e.createElementVNode("div",J,[e.createVNode(f,{gap:"200",direction:"row"},{default:e.withCtx(()=>{var s;return[i.showImagePicker?e.withDirectives((e.openBlock(),e.createBlock(c,{key:0,"data-qa":"dt-recipe-message-input-image-btn",size:"sm",class:"d-recipe-message-input__button",kind:"muted",importance:"clear","aria-label":i.showImagePicker.ariaLabel,onClick:n.onSelectImage,onMouseenter:t[4]||(t[4]=r=>l.imagePickerFocus=!0),onMouseleave:t[5]||(t[5]=r=>l.imagePickerFocus=!1),onFocus:t[6]||(t[6]=r=>l.imagePickerFocus=!0),onBlur:t[7]||(t[7]=r=>l.imagePickerFocus=!1)},{icon:e.withCtx(()=>[e.createVNode(g,{size:"300"})]),_:1},8,["aria-label","onClick"])),[[b,(s=i.showImagePicker)==null?void 0:s.tooltipLabel,"top-start"]]):e.createCommentVNode("",!0),e.createVNode(L,{ref:"messageInputImageUpload","data-qa":"dt-recipe-message-input-image-input",accept:"image/*, video/*",type:"file",class:"d-recipe-message-input__image-input",multiple:"",hidden:"",onInput:n.onImageUpload},null,8,["onInput"]),i.showEmojiPicker?(e.openBlock(),e.createBlock(I,{key:1,"open.sync":"emojiPickerOpened","data-qa":"dt-recipe-message-input-emoji-picker-popover","initial-focus-element":"#searchInput",padding:"none"},{anchor:e.withCtx(({attrs:r})=>[e.withDirectives((e.openBlock(),e.createBlock(c,e.mergeProps(r,{"data-qa":"dt-recipe-message-input-emoji-picker-btn",size:"sm",class:"d-recipe-message-input__button",kind:"muted",importance:"clear","aria-label":i.emojiButtonAriaLabel,onClick:n.toggleEmojiPicker,onMouseenter:t[8]||(t[8]=u=>l.emojiPickerFocus=!0),onMouseleave:t[9]||(t[9]=u=>l.emojiPickerFocus=!1),onFocus:t[10]||(t[10]=u=>l.emojiPickerFocus=!0),onBlur:t[11]||(t[11]=u=>l.emojiPickerFocus=!1)}),{icon:e.withCtx(()=>[n.emojiPickerHovered?(e.openBlock(),e.createBlock(w,{key:0,size:"300"})):(e.openBlock(),e.createBlock(y,{key:1,size:"300"}))]),_:2},1040,["aria-label","onClick"])),[[b,i.emojiTooltipMessage]])]),content:e.withCtx(({close:r})=>[e.createVNode(B,e.mergeProps(i.emojiPickerProps,{onSkinTone:n.onSkinTone,onSelectedEmoji:u=>n.onSelectEmoji(u,r)}),null,16,["onSkinTone","onSelectedEmoji"])]),_:1})):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"emojiGiphyPicker"),e.renderSlot(o.$slots,"customActionIcons")]}),_:3})]),e.createElementVNode("div",Z,[e.createVNode(f,{direction:"row",gap:"300"},{default:e.withCtx(()=>[e.createElementVNode("div",$,[e.renderSlot(o.$slots,"smsCount")]),i.showCharacterLimit?(e.openBlock(),e.createBlock(O,{key:0,class:"d-recipe-message-input__remaining-char-tooltip",placement:"top-end",enabled:n.characterLimitTooltipEnabled,message:i.showCharacterLimit.message,offset:[10,8]},{anchor:e.withCtx(()=>[e.withDirectives(e.createElementVNode("p",{class:"d-recipe-message-input__remaining-char","data-qa":"dt-recipe-message-input-character-limit"},e.toDisplayString(i.showCharacterLimit.count-n.inputLength),513),[[e.vShow,n.displayCharacterLimitWarning]])]),_:1},8,["enabled","message"])):e.createCommentVNode("",!0),i.showCancel?(e.openBlock(),e.createBlock(c,{key:1,"data-qa":"dt-recipe-message-input-cancel-button",class:"d-recipe-message-input__button d-recipe-message-input__cancel-button",size:"sm",kind:"muted",importance:"clear","aria-label":i.showCancel.ariaLabel,onClick:n.onCancel},{default:e.withCtx(()=>[e.createElementVNode("p",null,e.toDisplayString(i.showCancel.text),1)]),_:1},8,["aria-label","onClick"])):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"sendButton",{},()=>{var s;return[i.showSend?e.withDirectives((e.openBlock(),e.createBlock(c,{key:0,"data-qa":"dt-recipe-message-input-send-btn",size:"sm",kind:"default",importance:"primary",class:e.normalizeClass(["d-recipe-message-input__button d-recipe-message-input__send-button",{"d-recipe-message-input__send-button--disabled":n.isSendDisabled,"d-btn--icon-only":n.showSendIcon}]),"aria-label":i.showSend.ariaLabel,"aria-disabled":n.isSendDisabled,onClick:n.onSend},e.createSlots({default:e.withCtx(()=>[i.showSend.text?(e.openBlock(),e.createElementBlock("p",ee,e.toDisplayString(i.showSend.text),1)):e.createCommentVNode("",!0)]),_:2},[n.showSendIcon?{name:"icon",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"sendIcon",{iconSize:n.sendIconSize},()=>[e.createVNode(D,{size:n.sendIconSize},null,8,["size"])])]),key:"0"}:void 0]),1032,["class","aria-label","aria-disabled","onClick"])),[[b,(s=i.showSend)==null?void 0:s.tooltipLabel,"top-end"]]):e.createCommentVNode("",!0)]})]),_:3})])])],16)}const oe=T._(G,[["render",te]]);exports.default=oe;
 //# sourceMappingURL=message-input.cjs.map