@dialpad/dialtone-vue 3.119.0 → 3.120.0

package/dist/lib/ivr-node.js.map

@@ -1 +1 @@
-{"version":3,"file":"ivr-node.js","sources":["../../recipes/cards/ivr_node/ivr_node_constants.js","../../recipes/cards/ivr_node/ivr_node.vue"],"sourcesContent":["export const IVR_NODE_PROMPT_MENU = 'promptmenu';\nexport const IVR_NODE_PROMPT_COLLECT = 'promptcollect';\nexport const IVR_NODE_PROMPT_PLAY = 'promptplay';\nexport const IVR_NODE_EXPERT = 'gotoexpert';\nexport const IVR_NODE_GO_TO = 'goto';\nexport const IVR_NODE_BRANCH = 'branch';\nexport const IVR_NODE_TRANSFER = 'transfer';\nexport const IVR_NODE_HANGUP = 'hangup';\n\nexport const IVR_NODE_ICON_TYPES = {\n  [IVR_NODE_PROMPT_MENU]: 'keypad',\n  [IVR_NODE_PROMPT_COLLECT]: 'dialer',\n  [IVR_NODE_PROMPT_PLAY]: 'volume-2',\n  [IVR_NODE_EXPERT]: 'expert-node',\n  [IVR_NODE_BRANCH]: 'branch',\n  [IVR_NODE_GO_TO]: 'call-merge',\n  [IVR_NODE_TRANSFER]: 'transfer',\n  [IVR_NODE_HANGUP]: 'phone-hang-up',\n};\n\nexport const IVR_NODE_LABELS = {\n  [IVR_NODE_PROMPT_MENU]: 'Menu',\n  [IVR_NODE_PROMPT_COLLECT]: 'Collect',\n  [IVR_NODE_PROMPT_PLAY]: 'Play',\n  [IVR_NODE_EXPERT]: 'Expert',\n  [IVR_NODE_BRANCH]: 'Branch',\n  [IVR_NODE_GO_TO]: 'Go-to',\n  [IVR_NODE_TRANSFER]: 'Transfer',\n  [IVR_NODE_HANGUP]: 'Hangup',\n};\n\nconst IVR_NODE_COLORS = {\n  PROMPT: {\n    normal: 'd-bc-blue-200',\n    selected: 'd-bc-blue-300',\n  },\n  LOGIC: {\n    normal: 'd-bc-purple-200',\n    selected: 'd-bc-purple-400',\n  },\n  TERMINAL: {\n    normal: 'd-bc-red-100',\n    selected: 'd-bc-red-200',\n  },\n};\n\nexport const IVR_NODE_COLOR_MAPPING = {\n  [IVR_NODE_PROMPT_MENU]: IVR_NODE_COLORS.PROMPT,\n  [IVR_NODE_PROMPT_COLLECT]: IVR_NODE_COLORS.PROMPT,\n  [IVR_NODE_PROMPT_PLAY]: IVR_NODE_COLORS.PROMPT,\n  [IVR_NODE_EXPERT]: IVR_NODE_COLORS.LOGIC,\n  [IVR_NODE_BRANCH]: IVR_NODE_COLORS.LOGIC,\n  [IVR_NODE_GO_TO]: IVR_NODE_COLORS.LOGIC,\n  [IVR_NODE_TRANSFER]: IVR_NODE_COLORS.TERMINAL,\n  [IVR_NODE_HANGUP]: IVR_NODE_COLORS.TERMINAL,\n};\n","<template>\n  <div\n    class=\"ivr_node\"\n    v-on=\"nodeListeners\"\n  >\n    <div\n      v-if=\"dtmfKey\"\n      data-qa=\"dt-top-connector-dtmf\"\n      class=\"ivr-connector ivr-connector--dtmf\"\n      :class=\"{ 'ivr-connector--dtmf--selected': isSelected }\"\n    >\n      {{ dtmfKey }}\n    </div>\n    <slot\n      v-if=\"$slots.connector\"\n      name=\"connector\"\n    />\n    <div\n      v-if=\"!dtmfKey && !$slots.connector\"\n      data-qa=\"dt-top-connector\"\n      class=\"ivr-connector\"\n      :class=\"{ 'ivr-connector--selected': isSelected }\"\n    />\n    <dt-card\n      content-class=\"d-bt d-bc-black-300 d-px12 d-pt8 d-pb12\"\n      :container-class=\"[\n        'd-w100p',\n        { 'd-ba d-bar8 d-baw4': isSelected },\n        headerColor,\n      ]\"\n      :header-class=\"[\n        'd-mtn1',\n        'd-bt',\n        'd-btw4',\n        'd-p0',\n        headerColor,\n        { 'd-btr4': !isSelected },\n      ]\"\n    >\n      <template #header>\n        <!-- node label and icon section on left of the header -->\n        <div class=\"ivr_node__header-left\">\n          <dt-button\n            :aria-label=\"nodeType\"\n            importance=\"clear\"\n            kind=\"muted\"\n            data-qa=\"dt-ivr-node-icon\"\n          >\n            <template #icon>\n              <dt-icon\n                :name=\"nodeIcon\"\n                size=\"200\"\n                :class=\"['', { 'ivr_node__goto_icon': isGotoNode }]\"\n              />\n            </template>\n          </dt-button>\n          <p\n            class=\"ivr_node__label\"\n            data-qa=\"ivr-node-label\"\n          >\n            {{ nodeLabel }}\n          </p>\n        </div>\n        <!-- node menu for actions like edit, copy, delete -->\n        <dt-dropdown\n          v-model:open=\"isOpen\"\n          placement=\"bottom\"\n        >\n          <template #anchor>\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :aria-label=\"menuButtonAriaLabel\"\n              @click.stop.prevent=\"openMenu\"\n            >\n              <template #icon>\n                <dt-icon\n                  name=\"more-vertical\"\n                  size=\"200\"\n                />\n              </template>\n            </dt-button>\n          </template>\n          <template #list=\"{ close }\">\n            <div class=\"ivr_node__dropdown-list\">\n              <slot\n                name=\"menuItems\"\n                :close=\"close\"\n              />\n            </div>\n          </template>\n        </dt-dropdown>\n      </template>\n      <template #content>\n        <slot name=\"content\" />\n      </template>\n    </dt-card>\n  </div>\n</template>\n\n<script>\nimport { DtCard } from '@/components/card';\nimport { DtButton } from '@/components/button';\nimport { DtDropdown } from '@/components/dropdown';\nimport { DtIcon } from '@/components/icon';\nimport {\n  IVR_NODE_ICON_TYPES, IVR_NODE_COLOR_MAPPING, IVR_NODE_GO_TO,\n} from './ivr_node_constants';\n\nexport default {\n  name: 'DtRecipeIvrNode',\n\n  components: {\n    DtCard,\n    DtButton,\n    DtDropdown,\n    DtIcon,\n  },\n\n  props: {\n\n    /**\n     * type of IVR Node.\n     */\n    nodeType: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the node name.\n     */\n\n    nodeLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Selected state of the node\n     */\n    isSelected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Translated aria-label for header menu button\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * DTMF input\n     */\n    dtmfKey: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Add node click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n    };\n  },\n\n  computed: {\n    nodeListeners () {\n      return {\n        click: (e) => this.$emit('click', e),\n      };\n    },\n\n    nodeIcon () {\n      return IVR_NODE_ICON_TYPES[this.nodeType];\n    },\n\n    headerColor () {\n      const { normal, selected } = IVR_NODE_COLOR_MAPPING[this.nodeType];\n      return this.isSelected ? selected : normal;\n    },\n\n    isGotoNode () {\n      return this.nodeType === IVR_NODE_GO_TO;\n    },\n  },\n\n  methods: {\n    openMenu () {\n      this.isOpen = true;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.ivr_node {\n  width: 280px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  cursor: pointer;\n\n  &__header-left {\n    display: flex;\n    align-items: center;\n  }\n\n  &__label {\n    font-size: var(--dt-font-size-200);\n    font-weight: var(--dt-font-weight-bold);\n  }\n\n  &__dropdown-list {\n    width: var(--dt-size-825);\n  }\n}\n\n.ivr_node__goto_icon {\n  transform: rotate(90deg);\n}\n\n.ivr-connector {\n  z-index: var(--zi-base);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-color: var(--dt-color-purple-600);\n  background-color: var(--dt-color-purple-600);\n  width: var(--dt-size-400);\n  height: var(--dt-size-400);\n  border-radius: var(--dt-size-radius-circle);\n  margin-bottom: var(--dt-space-300-negative);\n\n  &--selected {\n    margin-bottom: var(--dt-space-400-negative);\n  }\n\n  &.ivr-connector--dtmf {\n    width: var(--dt-size-550);\n    height: var(--dt-size-550);\n    margin-bottom: var(--dt-space-450-negative);\n    color: var(--dt-color-neutral-white);\n    font-size: var(--dt-font-size-200);\n\n    &--selected {\n      margin-bottom: var(--dt-space-500-negative);\n    }\n  }\n}\n</style>\n"],"names":["IVR_NODE_PROMPT_MENU","IVR_NODE_PROMPT_COLLECT","IVR_NODE_PROMPT_PLAY","IVR_NODE_EXPERT","IVR_NODE_GO_TO","IVR_NODE_BRANCH","IVR_NODE_TRANSFER","IVR_NODE_HANGUP","IVR_NODE_ICON_TYPES","IVR_NODE_LABELS","IVR_NODE_COLORS","IVR_NODE_COLOR_MAPPING","_sfc_main","DtCard","DtButton","DtDropdown","DtIcon","e","normal","selected","_hoisted_1","_hoisted_3","_createElementBlock","_mergeProps","_toHandlers","$options","$props","_normalizeClass","_ctx","_renderSlot","_createVNode","_component_dt_card","_createElementVNode","_component_dt_button","_component_dt_icon","_hoisted_2","_toDisplayString","_component_dt_dropdown","$data","$event","_withCtx","close"],"mappings":"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"}
+{"version":3,"file":"ivr-node.js","sources":["../../recipes/cards/ivr_node/ivr_node_constants.js","../../recipes/cards/ivr_node/ivr_node.vue"],"sourcesContent":["export const IVR_NODE_PROMPT_MENU = 'promptmenu';\nexport const IVR_NODE_PROMPT_COLLECT = 'promptcollect';\nexport const IVR_NODE_PROMPT_PLAY = 'promptplay';\nexport const IVR_NODE_EXPERT = 'gotoexpert';\nexport const IVR_NODE_GO_TO = 'goto';\nexport const IVR_NODE_BRANCH = 'branch';\nexport const IVR_NODE_TRANSFER = 'transfer';\nexport const IVR_NODE_HANGUP = 'hangup';\n\nexport const IVR_NODE_ICON_TYPES = {\n  [IVR_NODE_PROMPT_MENU]: 'keypad',\n  [IVR_NODE_PROMPT_COLLECT]: 'dialer',\n  [IVR_NODE_PROMPT_PLAY]: 'volume-2',\n  [IVR_NODE_EXPERT]: 'expert-node',\n  [IVR_NODE_BRANCH]: 'branch',\n  [IVR_NODE_GO_TO]: 'call-merge',\n  [IVR_NODE_TRANSFER]: 'transfer',\n  [IVR_NODE_HANGUP]: 'phone-hang-up',\n};\n\nexport const IVR_NODE_LABELS = {\n  [IVR_NODE_PROMPT_MENU]: 'Menu',\n  [IVR_NODE_PROMPT_COLLECT]: 'Collect',\n  [IVR_NODE_PROMPT_PLAY]: 'Play',\n  [IVR_NODE_EXPERT]: 'Expert',\n  [IVR_NODE_BRANCH]: 'Branch',\n  [IVR_NODE_GO_TO]: 'Go-to',\n  [IVR_NODE_TRANSFER]: 'Transfer',\n  [IVR_NODE_HANGUP]: 'Hangup',\n};\n\nconst IVR_NODE_COLORS = {\n  PROMPT: {\n    normal: 'd-bc-blue-200',\n    selected: 'd-bc-blue-300',\n  },\n  LOGIC: {\n    normal: 'd-bc-purple-200',\n    selected: 'd-bc-purple-400',\n  },\n  TERMINAL: {\n    normal: 'd-bc-red-100',\n    selected: 'd-bc-red-200',\n  },\n};\n\nexport const IVR_NODE_COLOR_MAPPING = {\n  [IVR_NODE_PROMPT_MENU]: IVR_NODE_COLORS.PROMPT,\n  [IVR_NODE_PROMPT_COLLECT]: IVR_NODE_COLORS.PROMPT,\n  [IVR_NODE_PROMPT_PLAY]: IVR_NODE_COLORS.PROMPT,\n  [IVR_NODE_EXPERT]: IVR_NODE_COLORS.LOGIC,\n  [IVR_NODE_BRANCH]: IVR_NODE_COLORS.LOGIC,\n  [IVR_NODE_GO_TO]: IVR_NODE_COLORS.LOGIC,\n  [IVR_NODE_TRANSFER]: IVR_NODE_COLORS.TERMINAL,\n  [IVR_NODE_HANGUP]: IVR_NODE_COLORS.TERMINAL,\n};\n","<template>\n  <div\n    class=\"ivr_node\"\n    v-on=\"nodeListeners\"\n  >\n    <div\n      v-if=\"dtmfKey\"\n      data-qa=\"dt-top-connector-dtmf\"\n      class=\"ivr-connector ivr-connector--dtmf\"\n      :class=\"{ 'ivr-connector--dtmf--selected': isSelected }\"\n    >\n      {{ dtmfKey }}\n    </div>\n    <slot\n      v-if=\"$slots.connector\"\n      name=\"connector\"\n    />\n    <div\n      v-if=\"!dtmfKey && !$slots.connector\"\n      data-qa=\"dt-top-connector\"\n      class=\"ivr-connector\"\n      :class=\"{ 'ivr-connector--selected': isSelected }\"\n    />\n    <dt-card\n      content-class=\"d-bt d-bc-black-300 d-px12 d-pt8 d-pb12\"\n      :container-class=\"[\n        'd-w100p',\n        { 'd-ba d-bar8 d-baw4': isSelected },\n        headerColor,\n      ]\"\n      :header-class=\"[\n        'd-mtn1',\n        'd-bt',\n        'd-btw4',\n        'd-p0',\n        headerColor,\n        { 'd-btr4': !isSelected },\n      ]\"\n    >\n      <template #header>\n        <!-- node label and icon section on left of the header -->\n        <div class=\"ivr_node__header-left\">\n          <dt-button\n            :aria-label=\"nodeType\"\n            importance=\"clear\"\n            kind=\"muted\"\n            data-qa=\"dt-ivr-node-icon\"\n          >\n            <template #icon>\n              <dt-icon\n                :name=\"nodeIcon\"\n                size=\"200\"\n                :class=\"['', { 'ivr_node__goto_icon': isGotoNode }]\"\n              />\n            </template>\n          </dt-button>\n          <p\n            class=\"ivr_node__label\"\n            data-qa=\"ivr-node-label\"\n          >\n            {{ nodeLabel }}\n          </p>\n        </div>\n        <!-- node menu for actions like edit, copy, delete -->\n        <dt-dropdown\n          v-model:open=\"isOpen\"\n          placement=\"bottom\"\n        >\n          <template #anchor>\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :aria-label=\"menuButtonAriaLabel\"\n              @click.stop.prevent=\"openMenu\"\n            >\n              <template #icon>\n                <dt-icon\n                  name=\"more-vertical\"\n                  size=\"200\"\n                />\n              </template>\n            </dt-button>\n          </template>\n          <template #list=\"{ close }\">\n            <div class=\"ivr_node__dropdown-list\">\n              <slot\n                name=\"menuItems\"\n                :close=\"close\"\n              />\n            </div>\n          </template>\n        </dt-dropdown>\n      </template>\n      <template #content>\n        <slot name=\"content\" />\n      </template>\n    </dt-card>\n  </div>\n</template>\n\n<script>\nimport { DtCard } from '@/components/card';\nimport { DtButton } from '@/components/button';\nimport { DtDropdown } from '@/components/dropdown';\nimport { DtIcon } from '@/components/icon';\nimport {\n  IVR_NODE_ICON_TYPES, IVR_NODE_COLOR_MAPPING, IVR_NODE_GO_TO,\n} from './ivr_node_constants';\n\nexport default {\n  name: 'DtRecipeIvrNode',\n\n  components: {\n    DtCard,\n    DtButton,\n    DtDropdown,\n    DtIcon,\n  },\n\n  props: {\n\n    /**\n     * type of IVR Node.\n     */\n    nodeType: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the node name.\n     */\n\n    nodeLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Selected state of the node\n     */\n    isSelected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Translated aria-label for header menu button\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * DTMF input\n     */\n    dtmfKey: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Add node click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n    };\n  },\n\n  computed: {\n    nodeListeners () {\n      return {\n        click: (e) => this.$emit('click', e),\n      };\n    },\n\n    nodeIcon () {\n      return IVR_NODE_ICON_TYPES[this.nodeType];\n    },\n\n    headerColor () {\n      const { normal, selected } = IVR_NODE_COLOR_MAPPING[this.nodeType];\n      return this.isSelected ? selected : normal;\n    },\n\n    isGotoNode () {\n      return this.nodeType === IVR_NODE_GO_TO;\n    },\n  },\n\n  methods: {\n    openMenu () {\n      this.isOpen = true;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.ivr_node {\n  width: 280px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  cursor: pointer;\n\n  &__header-left {\n    display: flex;\n    align-items: center;\n  }\n\n  &__label {\n    font-size: var(--dt-font-size-200);\n    font-weight: var(--dt-font-weight-bold);\n  }\n\n  &__dropdown-list {\n    width: var(--dt-size-825);\n  }\n}\n\n.ivr_node__goto_icon {\n  transform: rotate(90deg);\n}\n\n.ivr-connector {\n  z-index: var(--zi-base);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-color: var(--dt-color-purple-600);\n  background-color: var(--dt-color-purple-600);\n  width: var(--dt-size-400);\n  height: var(--dt-size-400);\n  border-radius: var(--dt-size-radius-circle);\n  margin-bottom: var(--dt-space-300-negative);\n\n  &--selected {\n    margin-bottom: var(--dt-space-400-negative);\n  }\n\n  &.ivr-connector--dtmf {\n    width: var(--dt-size-550);\n    height: var(--dt-size-550);\n    margin-bottom: var(--dt-space-450-negative);\n    color: var(--dt-color-neutral-white);\n    font-size: var(--dt-font-size-200);\n\n    &--selected {\n      margin-bottom: var(--dt-space-500-negative);\n    }\n  }\n}\n</style>\n"],"names":["IVR_NODE_PROMPT_MENU","IVR_NODE_PROMPT_COLLECT","IVR_NODE_PROMPT_PLAY","IVR_NODE_EXPERT","IVR_NODE_GO_TO","IVR_NODE_BRANCH","IVR_NODE_TRANSFER","IVR_NODE_HANGUP","IVR_NODE_ICON_TYPES","IVR_NODE_LABELS","IVR_NODE_COLORS","IVR_NODE_COLOR_MAPPING","_sfc_main","DtCard","DtButton","DtDropdown","DtIcon","e","normal","selected","_hoisted_1","_hoisted_3","_createElementBlock","_mergeProps","_toHandlers","$options","$props","_normalizeClass","_ctx","_renderSlot","_createVNode","_component_dt_card","_createElementVNode","_component_dt_button","_component_dt_icon","_hoisted_2","_toDisplayString","_component_dt_dropdown","$data","$event","_withCtx","close"],"mappings":"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"}

package/dist/lib/keyboard-shortcut.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),u=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),d=require("./icon.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const t={"{win}":"layout-grid","{arrow-right}":"arrow-right","{arrow-left}":"arrow-left","{arrow-up}":"arrow-up","{arrow-down}":"arrow-down","{cmd}":"command"},l={"{plus}":"plus"},S=Object.keys(t),_={name:"DtKeyboardShortcut",components:{DtIcon:d.DtIcon},props:{inverted:{type:Boolean,default:!1},shortcut:{type:String,required:!0},screenReaderText:{type:String,default:null}},data(){return{SHORTCUTS_ICON_ALIASES:t,separator:/\+/gi}},computed:{icons(){return{...t,...l}},shortcutWithSeparator(){return this.shortcut.replace(this.separator,"{plus}")},formattedShortcut(){return Object.keys(t).reduce((c,r)=>c.replace(new RegExp("{"+r+"}","gi"),t[r]),this.shortcutWithSeparator)},formattedShortcutSplit(){const c=Object.keys(this.icons).join("|"),r=new RegExp(`(${c})`,"gi");return this.formattedShortcut.split(r).filter(Boolean)}}},h={key:0,class:"sr-only"},p=["innerHTML"];function m(c,r,o,y,T,a){const i=e.resolveComponent("dt-icon");return e.openBlock(),e.createElementBlock("kbd",{class:e.normalizeClass(["d-keyboard-shortcut",{"d-keyboard-shortcut--inverted":o.inverted}])},[o.screenReaderText?(e.openBlock(),e.createElementBlock("span",h,e.toDisplayString(o.screenReaderText),1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.formattedShortcutSplit,(n,s)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[a.icons[n]?(e.openBlock(),e.createBlock(i,{key:`${s}-${n}`,name:a.icons[n],size:"100","aria-hidden":"true",class:e.normalizeClass(["d-keyboard-shortcut__icon",{"d-keyboard-shortcut__icon--inverted":o.inverted}])},null,8,["name","class"])):(e.openBlock(),e.createElementBlock("span",{key:`${s}-${n}`,"aria-hidden":"true",class:e.normalizeClass(["d-keyboard-shortcut__item",{"d-keyboard-shortcut__item--inverted":o.inverted}]),innerHTML:n},null,10,p))],64))),256))],2)}const k=u._(_,[["render",m]]);exports.DtKeyboardShortcut=k;exports.SHORTCUTS_ALIASES_LIST=S;exports.SHORTCUTS_ICON_ALIASES=t;exports.SHORTCUTS_ICON_SEPARATOR=l;
+//# sourceMappingURL=keyboard-shortcut.cjs.map

package/dist/lib/keyboard-shortcut.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-shortcut.cjs","sources":["../../components/keyboard_shortcut/keyboard_shortcut_constants.js","../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["export const SHORTCUTS_ICON_ALIASES = {\n  '{win}': 'layout-grid',\n  '{arrow-right}': 'arrow-right',\n  '{arrow-left}': 'arrow-left',\n  '{arrow-up}': 'arrow-up',\n  '{arrow-down}': 'arrow-down',\n  '{cmd}': 'command',\n};\n\nexport const SHORTCUTS_ICON_SEPARATOR = {\n  '{plus}': 'plus',\n};\n\nexport const SHORTCUTS_ALIASES_LIST = Object.keys(SHORTCUTS_ICON_ALIASES);\n","<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      v-if=\"screenReaderText\"\n      class=\"sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <dt-icon\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        :name=\"icons[item]\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else\n        :key=\"`${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { SHORTCUTS_ICON_ALIASES, SHORTCUTS_ICON_SEPARATOR } from './keyboard_shortcut_constants';\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      SHORTCUTS_ICON_ALIASES,\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return { ...SHORTCUTS_ICON_ALIASES, ...SHORTCUTS_ICON_SEPARATOR };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n  },\n};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","SHORTCUTS_ICON_SEPARATOR","SHORTCUTS_ALIASES_LIST","_sfc_main","DtIcon","result","key","iconAliasString","regex","_createElementBlock","_normalizeClass","$props","_hoisted_1","_toDisplayString","_openBlock","_Fragment","_renderList","$options","item","i","_createBlock","_component_dt_icon"],"mappings":"kUAAY,MAACA,EAAyB,CACpC,QAAS,cACT,gBAAiB,cACjB,eAAgB,aAChB,aAAc,WACd,eAAgB,aAChB,QAAS,SACX,EAEaC,EAA2B,CACtC,SAAU,MACZ,EAEaC,EAAyB,OAAO,KAAKF,CAAsB,ECqCnEG,EAAU,CACb,KAAM,qBAEN,WAAY,CACV,OAAAC,EAAM,MACP,EAED,MAAO,CAKL,SAAU,CACR,KAAM,QACN,QAAS,EACV,EAMD,SAAU,CACR,KAAM,OACN,SAAU,EACX,EAKD,iBAAkB,CAChB,KAAM,OACN,QAAS,IACV,CACF,EAED,MAAQ,CACN,MAAO,CACL,uBAAAJ,EACA,UAAW,OAEd,EAED,SAAU,CACR,OAAS,CACP,MAAO,CAAE,GAAGA,EAAwB,GAAGC,EACxC,EAED,uBAAyB,CACvB,OAAO,KAAK,SAAS,QAAQ,KAAK,UAAW,QAAQ,CACtD,EAED,mBAAqB,CACnB,OAAO,OAAO,KAAKD,CAAsB,EAAE,OAAO,CAACK,EAAQC,IAClDD,EAAO,QAAQ,IAAI,OAAO,IAAMC,EAAM,IAAK,IAAI,EAAGN,EAAuBM,CAAG,CAAC,EACnF,KAAK,qBAAqB,CAC9B,EAGD,wBAA0B,CACxB,MAAMC,EAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG,EAOlDC,EAAQ,IAAI,OAAO,IAAID,CAAe,IAAK,IAAI,EACrD,OAAO,KAAK,kBAAkB,MAAMC,CAAK,EAAE,OAAO,OAAO,CAC1D,CACF,CACH,WA9GM,MAAM,8GARVC,EAqCM,mBAAA,MAAA,CApCH,MAAKC,EAAAA,eAAA,wDAA0EC,EAAQ,QAAA,MAMhFA,EAAgB,gCADxBF,EAKO,mBAAA,OALPG,EAKOC,EAAAA,gBADFF,EAAgB,gBAAA,EAAA,CAAA,gCAErBG,EAAAA,UAAA,EAAA,EAAAL,EAAA,mBAwBWM,WAvBW,KAAAC,EAAA,WAAAC,EAAA,uBAAZ,CAAAC,EAAMC,yDAGNF,EAAA,MAAMC,CAAI,iBADlBE,EAUE,YAAAC,EAAA,CARC,IAAG,GAAKF,CAAC,IAAID,CAAI,GACjB,KAAMD,EAAK,MAACC,CAAI,EACjB,KAAK,MACL,cAAY,OACX,MAAKR,EAAAA,eAAA,oEAA8FC,EAAQ,QAAA,8CAK9GF,EASE,mBAAA,OAAA,CAPC,IAAG,GAAKU,CAAC,IAAID,CAAI,GAClB,cAAY,OACX,MAAKR,EAAAA,eAAA,oEAA8FC,EAAQ,QAAA,IAI5G,UAAQO"}

package/dist/lib/keyboard-shortcut.js

@@ -4,7 +4,6 @@ import { DtIcon as f } from "./icon.js";
 import "@dialpad/dialtone-icons/vue3";
 import "../chunks/icon_constants-OpYAAKwF.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
 const a = {
   "{win}": "layout-grid",
   "{arrow-right}": "arrow-right",
@@ -14,7 +13,7 @@ const a = {
   "{cmd}": "command"
 }, k = {
   "{plus}": "plus"
-}, B = Object.keys(a), g = {
+}, L = Object.keys(a), g = {
   name: "DtKeyboardShortcut",
   components: {
     DtIcon: f
@@ -101,10 +100,10 @@ function T(c, e, r, R, x, s) {
     ], 64))), 256))
   ], 2);
 }
-const H = /* @__PURE__ */ y(g, [["render", T]]);
+const B = /* @__PURE__ */ y(g, [["render", T]]);
 export {
-  H as DtKeyboardShortcut,
-  B as SHORTCUTS_ALIASES_LIST,
+  B as DtKeyboardShortcut,
+  L as SHORTCUTS_ALIASES_LIST,
   a as SHORTCUTS_ICON_ALIASES,
   k as SHORTCUTS_ICON_SEPARATOR
 };

package/dist/lib/keyboard-shortcut.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut.js","sources":["../../components/keyboard_shortcut/keyboard_shortcut_constants.js","../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["export const SHORTCUTS_ICON_ALIASES = {\n  '{win}': 'layout-grid',\n  '{arrow-right}': 'arrow-right',\n  '{arrow-left}': 'arrow-left',\n  '{arrow-up}': 'arrow-up',\n  '{arrow-down}': 'arrow-down',\n  '{cmd}': 'command',\n};\n\nexport const SHORTCUTS_ICON_SEPARATOR = {\n  '{plus}': 'plus',\n};\n\nexport const SHORTCUTS_ALIASES_LIST = Object.keys(SHORTCUTS_ICON_ALIASES);\n","<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      v-if=\"screenReaderText\"\n      class=\"sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <dt-icon\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        :name=\"icons[item]\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else\n        :key=\"`${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { SHORTCUTS_ICON_ALIASES, SHORTCUTS_ICON_SEPARATOR } from './keyboard_shortcut_constants';\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      SHORTCUTS_ICON_ALIASES,\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return { ...SHORTCUTS_ICON_ALIASES, ...SHORTCUTS_ICON_SEPARATOR };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n  },\n};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","SHORTCUTS_ICON_SEPARATOR","SHORTCUTS_ALIASES_LIST","_sfc_main","DtIcon","result","key","iconAliasString","regex","_createElementBlock","_normalizeClass","$props","_hoisted_1","_toDisplayString","_openBlock","_Fragment","_renderList","$options","item","i","_createBlock","_component_dt_icon"],"mappings":";;;;;;;AAAY,MAACA,IAAyB;AAAA,EACpC,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AACX,GAEaC,IAA2B;AAAA,EACtC,UAAU;AACZ,GAEaC,IAAyB,OAAO,KAAKF,CAAsB,GCqCnEG,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAC;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,wBAAAJ;AAAA,MACA,WAAW;AAAA;EAEd;AAAA,EAED,UAAU;AAAA,IACR,QAAS;AACP,aAAO,EAAE,GAAGA,GAAwB,GAAGC;IACxC;AAAA,IAED,wBAAyB;AACvB,aAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,QAAQ;AAAA,IACtD;AAAA,IAED,oBAAqB;AACnB,aAAO,OAAO,KAAKD,CAAsB,EAAE,OAAO,CAACK,GAAQC,MAClDD,EAAO,QAAQ,IAAI,OAAO,MAAMC,IAAM,KAAK,IAAI,GAAGN,EAAuBM,CAAG,CAAC,GACnF,KAAK,qBAAqB;AAAA,IAC9B;AAAA;AAAA,IAGD,yBAA0B;AACxB,YAAMC,IAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG,GAOlDC,IAAQ,IAAI,OAAO,IAAID,CAAe,KAAK,IAAI;AACrD,aAAO,KAAK,kBAAkB,MAAMC,CAAK,EAAE,OAAO,OAAO;AAAA,IAC1D;AAAA,EACF;AACH;;EA9GM,OAAM;;;;cARVC,EAqCM,OAAA;AAAA,IApCH,OAAKC,EAAA;AAAA;yCAA0EC,EAAQ,SAAA;AAAA;;IAMhFA,EAAgB,yBADxBF,EAKO,QALPG,GAKOC,EADFF,EAAgB,gBAAA,GAAA,CAAA;KAErBG,EAAA,EAAA,GAAAL,EAwBWM,GAvBW,MAAAC,EAAAC,EAAA,wBAAZ,CAAAC,GAAMC;MAGNF,EAAA,MAAMC,CAAI,UADlBE,EAUEC,GAAA;AAAA,QARC,KAAG,GAAKF,CAAC,IAAID,CAAI;AAAA,QACjB,MAAMD,EAAK,MAACC,CAAI;AAAA,QACjB,MAAK;AAAA,QACL,eAAY;AAAA,QACX,OAAKR,EAAA;AAAA;mDAA8FC,EAAQ,SAAA;AAAA;8CAK9GF,EASE,QAAA;AAAA,QAPC,KAAG,GAAKU,CAAC,IAAID,CAAI;AAAA,QAClB,eAAY;AAAA,QACX,OAAKR,EAAA;AAAA;mDAA8FC,EAAQ,SAAA;AAAA;QAI5G,WAAQO;AAAA;;;;;"}
+{"version":3,"file":"keyboard-shortcut.js","sources":["../../components/keyboard_shortcut/keyboard_shortcut_constants.js","../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["export const SHORTCUTS_ICON_ALIASES = {\n  '{win}': 'layout-grid',\n  '{arrow-right}': 'arrow-right',\n  '{arrow-left}': 'arrow-left',\n  '{arrow-up}': 'arrow-up',\n  '{arrow-down}': 'arrow-down',\n  '{cmd}': 'command',\n};\n\nexport const SHORTCUTS_ICON_SEPARATOR = {\n  '{plus}': 'plus',\n};\n\nexport const SHORTCUTS_ALIASES_LIST = Object.keys(SHORTCUTS_ICON_ALIASES);\n","<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      v-if=\"screenReaderText\"\n      class=\"sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <dt-icon\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        :name=\"icons[item]\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else\n        :key=\"`${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { SHORTCUTS_ICON_ALIASES, SHORTCUTS_ICON_SEPARATOR } from './keyboard_shortcut_constants';\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      SHORTCUTS_ICON_ALIASES,\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return { ...SHORTCUTS_ICON_ALIASES, ...SHORTCUTS_ICON_SEPARATOR };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n  },\n};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","SHORTCUTS_ICON_SEPARATOR","SHORTCUTS_ALIASES_LIST","_sfc_main","DtIcon","result","key","iconAliasString","regex","_createElementBlock","_normalizeClass","$props","_hoisted_1","_toDisplayString","_openBlock","_Fragment","_renderList","$options","item","i","_createBlock","_component_dt_icon"],"mappings":";;;;;;AAAY,MAACA,IAAyB;AAAA,EACpC,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AACX,GAEaC,IAA2B;AAAA,EACtC,UAAU;AACZ,GAEaC,IAAyB,OAAO,KAAKF,CAAsB,GCqCnEG,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAC;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,wBAAAJ;AAAA,MACA,WAAW;AAAA;EAEd;AAAA,EAED,UAAU;AAAA,IACR,QAAS;AACP,aAAO,EAAE,GAAGA,GAAwB,GAAGC;IACxC;AAAA,IAED,wBAAyB;AACvB,aAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,QAAQ;AAAA,IACtD;AAAA,IAED,oBAAqB;AACnB,aAAO,OAAO,KAAKD,CAAsB,EAAE,OAAO,CAACK,GAAQC,MAClDD,EAAO,QAAQ,IAAI,OAAO,MAAMC,IAAM,KAAK,IAAI,GAAGN,EAAuBM,CAAG,CAAC,GACnF,KAAK,qBAAqB;AAAA,IAC9B;AAAA;AAAA,IAGD,yBAA0B;AACxB,YAAMC,IAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG,GAOlDC,IAAQ,IAAI,OAAO,IAAID,CAAe,KAAK,IAAI;AACrD,aAAO,KAAK,kBAAkB,MAAMC,CAAK,EAAE,OAAO,OAAO;AAAA,IAC1D;AAAA,EACF;AACH;;EA9GM,OAAM;;;;cARVC,EAqCM,OAAA;AAAA,IApCH,OAAKC,EAAA;AAAA;yCAA0EC,EAAQ,SAAA;AAAA;;IAMhFA,EAAgB,yBADxBF,EAKO,QALPG,GAKOC,EADFF,EAAgB,gBAAA,GAAA,CAAA;KAErBG,EAAA,EAAA,GAAAL,EAwBWM,GAvBW,MAAAC,EAAAC,EAAA,wBAAZ,CAAAC,GAAMC;MAGNF,EAAA,MAAMC,CAAI,UADlBE,EAUEC,GAAA;AAAA,QARC,KAAG,GAAKF,CAAC,IAAID,CAAI;AAAA,QACjB,MAAMD,EAAK,MAACC,CAAI;AAAA,QACjB,MAAK;AAAA,QACL,eAAY;AAAA,QACX,OAAKR,EAAA;AAAA;mDAA8FC,EAAQ,SAAA;AAAA;8CAK9GF,EASE,QAAA;AAAA,QAPC,KAAG,GAAKU,CAAC,IAAID,CAAI;AAAA,QAClB,eAAY;AAAA,QACX,OAAKR,EAAA;AAAA;mDAA8FC,EAAQ,SAAA;AAAA;QAI5G,WAAQO;AAAA;;;;;"}

package/dist/lib/lazy-show.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),n=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),o={name:"DtLazyShow",inheritAttrs:!1,props:{show:{type:Boolean,default:!1},transition:{type:String,default:null},appear:{type:Boolean,default:!1}},data(){return{initialized:!!this.show}},computed:{isCSSEnabled(){return process.env.NODE_ENV!=="test"}},watch:{show:function(t){!t||this.initialized||(this.initialized=!0)}}};function s(t,u,a,c,r,i){return e.openBlock(),e.createBlock(e.Transition,e.mergeProps({name:a.transition,appear:a.appear},t.$attrs,{css:i.isCSSEnabled}),{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",e.normalizeProps(e.guardReactiveProps(t.$attrs)),[r.initialized?e.renderSlot(t.$slots,"default",{key:0}):e.createCommentVNode("",!0)],16),[[e.vShow,a.show]])]),_:3},16,["name","appear","css"])}const l=n._(o,[["render",s]]);exports.DtLazyShow=l;
+//# sourceMappingURL=lazy-show.cjs.map

package/dist/lib/lazy-show.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-show.cjs","sources":["../../components/lazy_show/lazy_show.vue"],"sourcesContent":["<template>\n  <Transition\n    :name=\"transition\"\n    :appear=\"appear\"\n    v-bind=\"$attrs\"\n    :css=\"isCSSEnabled\"\n  >\n    <div\n      v-show=\"show\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot v-if=\"initialized\" />\n    </div>\n  </Transition>\n</template>\n\n<script>\n/**\n * Lazy Show is a utility component that prevents its children from being rendered until the first time it is shown.\n * @see https://dialtone.dialpad.com/components/lazy_show.html\n */\nexport default {\n  name: 'DtLazyShow',\n\n  inheritAttrs: false,\n\n  /******************\n   *     PROPS      *\n   ******************/\n  props: {\n    /**\n     * Whether the child slot is shown.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * A valid Vue enter/leave CSS transition name.\n     */\n    transition: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Enable/Disable transition animation\n     * @values true, false\n     */\n    appear: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  /******************\n   *      DATA      *\n   ******************/\n  data () {\n    return {\n      initialized: !!this.show,\n    };\n  },\n\n  computed: {\n    /**\n     * Set the css property to false when running tests only.\n     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n     * transition `css` property\n     * @returns {boolean}\n     */\n    isCSSEnabled () {\n      return process.env.NODE_ENV !== 'test';\n    },\n  },\n\n  /******************\n   *      WATCH     *\n   ******************/\n  watch: {\n    show: function (newValue) {\n      if (!newValue || this.initialized) return;\n\n      this.initialized = true;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","newValue","_openBlock","_createBlock","_Transition","_mergeProps","$props","_ctx","$options","_withDirectives","_createElementVNode","$data","_renderSlot"],"mappings":"oKAsBKA,EAAU,CACb,KAAM,aAEN,aAAc,GAKd,MAAO,CAKL,KAAM,CACJ,KAAM,QACN,QAAS,EACV,EAKD,WAAY,CACV,KAAM,OACN,QAAS,IACV,EAMD,OAAQ,CACN,KAAM,QACN,QAAS,EACV,CACF,EAKD,MAAQ,CACN,MAAO,CACL,YAAa,CAAC,CAAC,KAAK,KAEvB,EAED,SAAU,CAOR,cAAgB,CACd,OAAO,QAAQ,IAAI,WAAa,MACjC,CACF,EAKD,MAAO,CACL,KAAM,SAAUC,EAAU,CACpB,CAACA,GAAY,KAAK,cAEtB,KAAK,YAAc,GACpB,CACF,CACH,0BAxFE,OAAAC,YAAA,EAAAC,cAaaC,EAAAA,WAbbC,EAAAA,WAaa,CAZV,KAAMC,EAAU,WAChB,OAAQA,EAAM,QACPC,EAAM,OAAA,CACb,IAAKC,EAAY,YAAA,CAAA,EAAA,mBAElB,IAMM,CANNC,EAAA,eAAAC,EAAA,mBAMM,4CAJIH,EAAM,MAAA,CAAA,EAAA,CAGFI,EAAW,YAAvBC,EAA2B,WAAAL,EAAA,OAAA,UAAA,CAAA,IAAA,EAAA,6CAJnBD,EAAI,IAAA"}

package/dist/lib/link.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../chunks/link_constants-Kn6kP4i1.js"),t=require("vue"),i=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),s={name:"DtLink",props:{kind:{type:String,default:"",validator(e){return n.L.includes(e)}}},data(){return{LINK_KIND_MODIFIERS:n.a}}},o=["href"];function l(e,d,r,u,a,_){return t.openBlock(),t.createElementBlock("a",{class:t.normalizeClass(["d-link",a.LINK_KIND_MODIFIERS[r.kind]]),"data-qa":"dt-link",href:"href"in e.$attrs?e.$attrs.href:"javascript:void(0)"},[t.renderSlot(e.$slots,"default")],10,o)}const c=i._(s,[["render",l]]);exports.LINK_KIND_MODIFIERS=n.a;exports.LINK_VARIANTS=n.L;exports.DtLink=c;
+//# sourceMappingURL=link.cjs.map

package/dist/lib/link.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.cjs","sources":["../../components/link/link.vue"],"sourcesContent":["<template>\n  <a\n    :class=\"[\n      'd-link',\n      LINK_KIND_MODIFIERS[kind],\n    ]\"\n    data-qa=\"dt-link\"\n    :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </a>\n</template>\n\n<script>\nimport { LINK_VARIANTS, LINK_KIND_MODIFIERS } 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} href attribute\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n */\nexport default {\n  name: 'DtLink',\n\n  props: {\n    /**\n     * Applies the link variant styles\n     * @values null, danger, warning, success, muted, inverted, mention\n     */\n    kind: {\n      type: String,\n      default: '',\n      validator (kind) {\n        return LINK_VARIANTS.includes(kind);\n      },\n    },\n  },\n\n  data () {\n    return {\n      LINK_KIND_MODIFIERS,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","kind","LINK_VARIANTS","LINK_KIND_MODIFIERS","_createElementBlock","_normalizeClass","$data","$props","_ctx","_renderSlot"],"mappings":"sNAuBKA,EAAU,CACb,KAAM,SAEN,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,QAAS,GACT,UAAWC,EAAM,CACf,OAAOC,EAAa,EAAC,SAASD,CAAI,CACnC,CACF,CACF,EAED,MAAQ,CACN,MAAO,CACL,oBAAAE,EAAmB,EAEtB,CACH,0DA5CEC,EAUI,mBAAA,IAAA,CATD,MAAKC,EAAAA,eAAA,UAA0BC,EAAA,oBAAoBC,EAAI,IAAA,IAIxD,UAAQ,UACP,KAAgB,SAAAC,EAAA,OAASA,EAAA,OAAO,KAAI,uBAGrCC,aAAQD,EAAA,OAAA,SAAA"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./utils.cjs"),e=require("vue"),a=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");require("./constants.cjs");const l={name:"DtListItemGroup",props:{id:{type:String,default(){return r.getUniqueString()}},heading:{type:String,default:""},headingClass:{type:[String,Array,Object],default:""},listClass:{type:[String,Array,Object],default:""}}},n=["id","aria-labelledby"],d=["id"];function o(i,u,t,c,g,p){return e.openBlock(),e.createElementBlock("ul",{id:t.id,class:e.normalizeClass(["d-list-item-group",t.listClass]),role:"group","data-qa":"dt-dropdown-list-wrapper","aria-labelledby":`${t.id}-heading`},[t.heading?(e.openBlock(),e.createElementBlock("li",{key:0,id:`${t.id}-heading`,role:"presentation","data-qa":"dt-dropdown-list-heading",class:e.normalizeClass(["dt-dropdown-list--header",t.headingClass])},[e.renderSlot(i.$slots,"headingSlot",{},()=>[e.createTextVNode(e.toDisplayString(t.heading),1)])],10,d)):e.createCommentVNode("",!0),e.renderSlot(i.$slots,"default")],10,n)}const s=a._(l,[["render",o]]);exports.DtListItemGroup=s;
+//# sourceMappingURL=list-item-group.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-item-group.cjs","sources":["../../components/list_item_group/list_item_group.vue"],"sourcesContent":["<template>\n  <ul\n    :id=\"id\"\n    :class=\"['d-list-item-group', listClass]\"\n    role=\"group\"\n    data-qa=\"dt-dropdown-list-wrapper\"\n    :aria-labelledby=\"`${id}-heading`\"\n  >\n    <li\n      v-if=\"heading\"\n      :id=\"`${id}-heading`\"\n      role=\"presentation\"\n      data-qa=\"dt-dropdown-list-heading\"\n      :class=\"['dt-dropdown-list--header', headingClass]\"\n    >\n      <!-- @slot Slot for heading, will override heading prop. -->\n      <slot name=\"headingSlot\">\n        {{ heading }}\n      </slot>\n    </li>\n    <!-- @slot Slot for the list component -->\n    <slot />\n  </ul>\n</template>\n\n<script>\nimport {} from './list_item_group_constants';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'DtListItemGroup',\n\n  props: {\n    /**\n     * Id of the List Item Group\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * List's heading.\n     */\n    heading: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class to style the heading\n     */\n    headingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","getUniqueString","_createElementBlock","$props","_renderSlot","_ctx"],"mappings":"wNA6BA,MAAKA,EAAU,CACb,KAAM,kBAEN,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAW,CAAE,OAAOC,EAAe,gBAAA,CAAK,CACzC,EAKD,QAAS,CACP,KAAM,OACN,QAAS,EACV,EAKD,aAAc,CACZ,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,EAKD,UAAW,CACT,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,CACF,CACH,mFAhEEC,EAqBK,mBAAA,KAAA,CApBF,GAAIC,EAAE,GACN,4CAA6BA,EAAS,SAAA,CAAA,EACvC,KAAK,QACL,UAAQ,2BACP,qBAAoBA,EAAE,EAAA,aAGfA,EAAO,uBADfD,EAWK,mBAAA,KAAA,OATF,MAAOC,EAAE,EAAA,WACV,KAAK,eACL,UAAQ,2BACP,mDAAoCA,EAAY,YAAA,CAAA,IAGjDC,EAAAA,WAEOC,0BAFP,IAEO,qCADFF,EAAO,OAAA,EAAA,CAAA,wCAIdC,aAAQC,EAAA,OAAA,SAAA"}

package/dist/lib/list-item.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../chunks/list_item_constants-Tsz5CO1m.js"),a=require("./utils.cjs"),t=require("vue"),u=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),o=require("./item-layout.cjs"),d=require("./icon.cjs");require("./constants.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const c=["listitem","menuitem","option"],m={name:"DtListItem",components:{DtItemLayout:o.DtItemLayout,DtIcon:d.DtIcon},inject:{highlightId:{default:null}},props:{id:{type:String,default(){return a.default.getUniqueString()}},role:{type:String,default:"listitem",validator:e=>c.includes(e)},elementType:{type:String,default:"li"},type:{type:String,default:i.L.DEFAULT,validator:e=>Object.values(i.L).includes(e)},navigationType:{type:String,default:i.a.NONE,validator:e=>Object.values(i.a).includes(e)},selected:{type:Boolean,default:!1}},emits:["keydown","mousemove","mouseleave","mousedown"],data(){return{injected:!1,mouseHighlighted:!1}},computed:{listItemType(){switch(this.type){case i.L.DEFAULT:return o.DtItemLayout;default:return null}},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===i.a.TAB},isHoverable(){return this.navigationType!==i.a.NONE}},methods:{onClick(e){this.$emit("click",e)},onMouseHover(){this.mouseHighlighted=!0},onMouseLeave(){this.mouseHighlighted=!1}}};function h(e,y,l,f,I,s){const r=t.resolveComponent("dt-icon");return t.openBlock(),t.createBlock(t.resolveDynamicComponent(l.elementType),t.mergeProps({id:l.id,class:["dt-list-item",{"dt-list-item--focusable":s.isFocusable,"dt-list-item--highlighted":s.isHighlighted,"dt-list-item--static":!s.isHoverable}],tabindex:s.isFocusable?0:-1,role:l.role,"aria-selected":l.role==="listitem"?void 0:s.isHighlighted},t.toHandlers(s.listItemListeners)),{default:t.withCtx(()=>[s.listItemType?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(s.listItemType),{key:0},t.createSlots({_:2},[t.renderList(e.$slots,(v,n)=>({name:n,fn:t.withCtx(()=>[t.renderSlot(e.$slots,n)])})),l.selected?{name:"selected",fn:t.withCtx(()=>[t.createVNode(r,{name:"check",size:"400",class:"dt-list-item--selected-icon"})]),key:"0"}:void 0]),1024)):t.renderSlot(e.$slots,"default",{key:1})]),_:3},16,["id","class","tabindex","role","aria-selected"])}const g=u._(m,[["render",h]]);exports.LIST_ITEM_NAVIGATION_TYPES=i.a;exports.LIST_ITEM_TYPES=i.L;exports.DtListItem=g;
+//# sourceMappingURL=list-item.cjs.map

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

@@ -0,0 +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=\"['dt-list-item', {\n      'dt-list-item--focusable': isFocusable,\n      'dt-list-item--highlighted': isHighlighted,\n      'dt-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    <component\n      :is=\"listItemType\"\n      v-if=\"listItemType\"\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\n          name=\"check\"\n          size=\"400\"\n          class=\"dt-list-item--selected-icon\"\n        />\n      </template>\n    </component>\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 { DtIcon } from '@/components/icon';\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  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIcon,\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    listItemType () {\n      switch (this.type) {\n        case LIST_ITEM_TYPES.DEFAULT:\n          return DtItemLayout;\n        default:\n          return null;\n      }\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\n<style lang=\"less\">\n.dt-list-item {\n  list-style: none;\n  background-color: var(--dt-action-color-background-muted-default);\n\n  &:not(.dt-list-item--static) {\n    cursor: pointer;\n    border-radius: var(--dt-size-radius-300);\n  }\n\n  &--focusable:focus,\n  &--focusable:focus-within,\n  &--highlighted {\n    background-color: var(--dt-action-color-background-muted-hover);\n  }\n\n  &--highlighted:active {\n    background-color: var(--dt-action-color-background-muted-active);\n  }\n\n  &--selected-icon {\n    margin-left: var(--dt-space-400);\n  }\n\n  :focus-visible {\n    outline: none;\n    box-shadow: var(--dt-shadow-focus);\n  }\n}\n</style>\n"],"names":["ROLES","_sfc_main","DtItemLayout","DtIcon","utils","role","LIST_ITEM_TYPES","t","LIST_ITEM_NAVIGATION_TYPES","event","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","_openBlock","_createSlots","_ctx","_","slotName","_renderSlot","_createVNode","_component_dt_icon"],"mappings":"4cAmDA,MAAMA,EAAQ,CAAC,WAAY,WAAY,QAAQ,EAM1CC,EAAU,CACb,KAAM,aAEN,WAAY,cACVC,EAAY,aACZ,OAAAC,EAAM,MACP,EAKD,OAAQ,CACN,YAAa,CAAE,QAAS,IAAM,CAC/B,EAED,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAW,CAAE,OAAOC,UAAM,gBAAiB,CAAG,CAC/C,EAKD,KAAM,CACJ,KAAM,OACN,QAAS,WACT,UAAYC,GAAUL,EAAO,SAASK,CAAI,CAC3C,EAKD,YAAa,CACX,KAAM,OACN,QAAS,IACV,EAMD,KAAM,CACJ,KAAM,OACN,QAASC,EAAe,EAAC,QACzB,UAAYC,GAAM,OAAO,OAAOD,GAAe,EAAE,SAASC,CAAC,CAC5D,EASD,eAAgB,CACd,KAAM,OACN,QAASC,EAA0B,EAAC,KACpC,UAAYD,GAAM,OAAO,OAAOC,GAA0B,EAAE,SAASD,CAAC,CACvE,EAKD,SAAU,CACR,KAAM,QACN,QAAS,EACV,CACF,EAED,MAAO,CAOL,UAQA,YAQA,aAOA,WACD,EAED,MAAQ,CACN,MAAO,CACL,SAAU,GACV,iBAAkB,GAErB,EAED,SAAU,CACR,cAAgB,CACd,OAAQ,KAAK,KAAI,CACf,KAAKD,EAAe,EAAC,QACnB,OAAOJ,eACT,QACE,OAAO,IACX,CACD,EAED,mBAAqB,CACnB,MAAO,CACL,QAASO,GAAS,CACZ,CAAC,QAAS,OAAO,EAAE,SAASA,EAAM,KAAK,YAAW,CAAE,GACtD,KAAK,QAAQA,CAAK,EAEpB,KAAK,MAAM,UAAWA,CAAK,CAC5B,EAED,UAAWA,GAAS,CAClB,KAAK,aAAaA,CAAK,EACvB,KAAK,MAAM,YAAaA,CAAK,CAC9B,EAED,WAAYA,GAAS,CACnB,KAAK,aAAaA,CAAK,EACvB,KAAK,MAAM,aAAcA,CAAK,CAC/B,EAEJ,EAMD,eAAiB,CACf,OAAI,KAAK,YACA,KAAK,aAAe,KAAK,YAAW,EAAK,KAAK,KAAO,KAAK,cAAgB,KAAK,iBAEjF,EACR,EAED,aAAe,CAEb,OAAO,KAAK,iBAAmBD,EAA0B,EAAC,GAC3D,EAKD,aAAe,CACb,OAAO,KAAK,iBAAmBA,EAA0B,EAAC,IAC3D,CACF,EAED,QAAS,CACP,QAAS,EAAG,CAGV,KAAK,MAAM,QAAS,CAAC,CACtB,EAED,cAAgB,CACd,KAAK,iBAAmB,EACzB,EAED,cAAgB,CACd,KAAK,iBAAmB,EACzB,CACF,CACH,qFA9OEE,cAqCYC,EAAAA,wBApCLC,EAAW,WAAA,EADlBC,aAqCY,CAnCT,GAAID,EAAE,GACN,MAAK,CAAA,eAAA,2BAAsDE,EAAW,wCAAqCA,EAAa,sCAAiCA,EAAW,cAKpK,SAAUA,EAAW,YAAA,EAAA,GACrB,KAAMF,EAAI,KACV,gBAAeA,EAAA,OAAsB,WAAA,OAAYE,EAAa,aAC/D,EAAAC,aAAMD,EAAiB,iBAAA,CAAA,EAAA,mBAEvB,IAqBY,CAnBJA,EAAY,cAFpBE,EAAAA,UAAA,EAAAN,EAAA,YAqBYC,0BApBLG,EAAY,YAAA,EAAA,CAAA,IAAA,CAAA,EAAAG,EAAAA,YAAA,CAAA,EAAA,CAAA,EAAA,cAISC,EAAM,OAAA,CAAtBC,EAAGC,WACVA,eAGD,IAAyB,CAAzBC,aAAyBH,SAAZE,CAAQ,OAGfR,EAAQ,eACb,wBAED,IAIE,CAJFU,EAAAA,YAIEC,EAAA,CAHA,KAAK,QACL,KAAK,MACL,MAAM,2DAKZF,EAAe,WAAAH,EAAA,OAAA,UAAA,CAAA,IAAA,EAAA"}

package/dist/lib/list-item.js

@@ -8,7 +8,6 @@ import "./constants.js";
 import "@dialpad/dialtone-icons/vue3";
 import "../chunks/icon_constants-OpYAAKwF.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
 const L = ["listitem", "menuitem", "option"], H = {
   name: "DtListItem",
   components: {
@@ -198,9 +197,9 @@ function S(e, k, i, b, E, t) {
     _: 3
   }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
 }
-const U = /* @__PURE__ */ T(H, [["render", S]]);
+const P = /* @__PURE__ */ T(H, [["render", S]]);
 export {
-  U as DtListItem,
+  P as DtListItem,
   s as LIST_ITEM_NAVIGATION_TYPES,
   l as LIST_ITEM_TYPES
 };

package/dist/lib/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=\"['dt-list-item', {\n      'dt-list-item--focusable': isFocusable,\n      'dt-list-item--highlighted': isHighlighted,\n      'dt-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    <component\n      :is=\"listItemType\"\n      v-if=\"listItemType\"\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\n          name=\"check\"\n          size=\"400\"\n          class=\"dt-list-item--selected-icon\"\n        />\n      </template>\n    </component>\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 { DtIcon } from '@/components/icon';\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  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIcon,\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    listItemType () {\n      switch (this.type) {\n        case LIST_ITEM_TYPES.DEFAULT:\n          return DtItemLayout;\n        default:\n          return null;\n      }\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\n<style lang=\"less\">\n.dt-list-item {\n  list-style: none;\n  background-color: var(--dt-action-color-background-muted-default);\n\n  &:not(.dt-list-item--static) {\n    cursor: pointer;\n    border-radius: var(--dt-size-radius-300);\n  }\n\n  &--focusable:focus,\n  &--focusable:focus-within,\n  &--highlighted {\n    background-color: var(--dt-action-color-background-muted-hover);\n  }\n\n  &--highlighted:active {\n    background-color: var(--dt-action-color-background-muted-active);\n  }\n\n  &--selected-icon {\n    margin-left: var(--dt-space-400);\n  }\n\n  :focus-visible {\n    outline: none;\n    box-shadow: var(--dt-shadow-focus);\n  }\n}\n</style>\n"],"names":["ROLES","_sfc_main","DtItemLayout","DtIcon","utils","role","LIST_ITEM_TYPES","t","LIST_ITEM_NAVIGATION_TYPES","event","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","_openBlock","_createSlots","_ctx","_","slotName","_renderSlot","_createVNode","_component_dt_icon"],"mappings":"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"}
+{"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=\"['dt-list-item', {\n      'dt-list-item--focusable': isFocusable,\n      'dt-list-item--highlighted': isHighlighted,\n      'dt-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    <component\n      :is=\"listItemType\"\n      v-if=\"listItemType\"\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\n          name=\"check\"\n          size=\"400\"\n          class=\"dt-list-item--selected-icon\"\n        />\n      </template>\n    </component>\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 { DtIcon } from '@/components/icon';\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  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIcon,\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    listItemType () {\n      switch (this.type) {\n        case LIST_ITEM_TYPES.DEFAULT:\n          return DtItemLayout;\n        default:\n          return null;\n      }\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\n<style lang=\"less\">\n.dt-list-item {\n  list-style: none;\n  background-color: var(--dt-action-color-background-muted-default);\n\n  &:not(.dt-list-item--static) {\n    cursor: pointer;\n    border-radius: var(--dt-size-radius-300);\n  }\n\n  &--focusable:focus,\n  &--focusable:focus-within,\n  &--highlighted {\n    background-color: var(--dt-action-color-background-muted-hover);\n  }\n\n  &--highlighted:active {\n    background-color: var(--dt-action-color-background-muted-active);\n  }\n\n  &--selected-icon {\n    margin-left: var(--dt-space-400);\n  }\n\n  :focus-visible {\n    outline: none;\n    box-shadow: var(--dt-shadow-focus);\n  }\n}\n</style>\n"],"names":["ROLES","_sfc_main","DtItemLayout","DtIcon","utils","role","LIST_ITEM_TYPES","t","LIST_ITEM_NAVIGATION_TYPES","event","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","_openBlock","_createSlots","_ctx","_","slotName","_renderSlot","_createVNode","_component_dt_icon"],"mappings":"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"}

package/dist/lib/message-input.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),g=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),b=require("./button.cjs"),k=require("./emoji-picker.cjs"),w=require("./icon.cjs"),q=require("./input.cjs"),C=require("./popover.cjs"),d=require("./rich-text-editor.cjs"),S=require("./tooltip.cjs");require("./utils.cjs");require("./constants.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("../chunks/tab-at7WWglk.js");require("@dialpad/dialtone-emojis");require("../chunks/input-0Uksk4DP.js");require("./validators.cjs");require("./validation-messages.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("../chunks/popover_constants-hOEhklvr.js");require("tippy.js");require("./lazy-show.cjs");require("../chunks/modal-qEzlo0Sj.js");require("../chunks/sr_only_close_button-iD7s1Pbj.js");require("@tiptap/vue-3");require("@tiptap/extension-blockquote");require("@tiptap/extension-code-block");require("@tiptap/extension-document");require("@tiptap/extension-hard-break");require("@tiptap/extension-paragraph");require("@tiptap/extension-placeholder");require("@tiptap/extension-bold");require("@tiptap/extension-bullet-list");require("@tiptap/extension-italic");require("@tiptap/extension-link");require("@tiptap/extension-list-item");require("@tiptap/extension-ordered-list");require("@tiptap/extension-strike");require("@tiptap/extension-underline");require("@tiptap/extension-text");require("@tiptap/extension-text-align");require("@tiptap/core");require("../chunks/index-IBtQ5jRJ.js");require("emoji-regex");require("./skeleton.cjs");require("@tiptap/pm/state");require("@tiptap/suggestion");require("./list-item.cjs");require("../chunks/list_item_constants-Tsz5CO1m.js");require("./item-layout.cjs");require("./stack.cjs");require("../chunks/stack_constants-m9Ickqw0.js");require("@tiptap/extension-mention");require("./link.cjs");require("./avatar.cjs");require("./presence.cjs");const B={name:"DtRecipeMessageInput",components:{DtButton:b.DtButton,DtEmojiPicker:k.DtEmojiPicker,DtIcon:w.DtIcon,DtInput:q.DtInput,DtPopover:C.DtPopover,DtRichTextEditor:d.DtRichTextEditor,DtTooltip:S.DtTooltip},mixins:[],inheritAttrs:!1,props:{modelValue:{type:[Object,String],default:""},editable:{type:Boolean,default:!0},inputAriaLabel:{type:String,required:!0,default:""},inputClass:{type:String,default:""},autoFocus:{type:[Boolean,String,Number],default:!1,validator(o){return typeof o=="string"?d.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(o):!0}},outputFormat:{type:String,default:"text",validator(o){return d.RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(o)}},link:{type:[Boolean,Object],default:!1},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:()=>({icon:"send"})},showCancel:{type:[Boolean,Object],default:()=>({text:"Cancel"})},mentionSuggestion:{type:Object,default:null},allowBlockquote:{type:Boolean,default:!0},allowBold:{type:Boolean,default:!0},allowBulletList:{type:Boolean,default:!0},allowItalic:{type:Boolean,default:!0},allowStrike:{type:Boolean,default:!0},allowUnderline:{type:Boolean,default:!0}},emits:["submit","select-media","add-media","paste-media","cancel","skin-tone","selected-emoji","focus","blur","input"],data(){return{internalInputValue:this.modelValue,hasFocus:!1,imagePickerFocus:!1,emojiPickerFocus:!1,sendButtonFocus:!1,emojiPickerOpened:!1}},computed:{inputLength(){return this.internalInputValue.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}},watch:{modelValue(o){this.internalInputValue=o}},methods:{onDrag(o){o.stopPropagation(),o.preventDefault()},onDrop(o){o.stopPropagation(),o.preventDefault();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){if(!o){this.emojiPickerOpened=!1;return}this.$refs.richTextEditor.editor.commands.insertContent({type:"emoji",attrs:{code:o.shortname}}),this.emojiPickerOpened=!1,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")},onFocus(o){var t;this.hasFocus=!0,(t=this.$refs.richTextEditor)==null||t.focusEditor(),this.$emit("focus",o)},onBlur(o){this.hasFocus=!1,this.$emit("blur",o)},onInput(o){this.$emit("input",o)}}},P={class:"d-d-flex d-jc-space-between d-mx8 d-my4"},j={class:"d-d-flex"},y={class:"d-d-flex"},v={key:0};function D(o,t,i,L,l,n){const m=e.resolveComponent("dt-rich-text-editor"),u=e.resolveComponent("dt-icon"),a=e.resolveComponent("dt-button"),p=e.resolveComponent("dt-input"),s=e.resolveComponent("dt-tooltip"),h=e.resolveComponent("dt-emoji-picker"),f=e.resolveComponent("dt-popover");return e.openBlock(),e.createElementBlock("div",{"data-qa":"dt-message-input",role:"presentation",class:e.normalizeClass(["d-d-flex","d-fd-column","d-bar8","d-baw1","d-ba","d-c-text",{"d-bc-bold d-bs-sm":l.hasFocus,"d-bc-default":!l.hasFocus}]),onClick:t[15]||(t[15]=r=>{var c;return(c=o.$refs.richTextEditor)==null?void 0:c.focusEditor()}),onDragEnter:t[16]||(t[16]=(...r)=>n.onDrag&&n.onDrag(...r)),onDragOver:t[17]||(t[17]=(...r)=>n.onDrag&&n.onDrag(...r)),onDrop:t[18]||(t[18]=(...r)=>n.onDrop&&n.onDrop(...r)),onKeydown:t[19]||(t[19]=e.withKeys(e.withModifiers((...r)=>n.onSend&&n.onSend(...r),["exact"]),["enter"])),onPaste:t[20]||(t[20]=(...r)=>n.onPaste&&n.onPaste(...r))},[e.createElementVNode("div",{class:"d-of-auto d-mx16 d-mt8 d-mb4",style:e.normalizeStyle({"max-height":i.maxHeight})},[e.createVNode(m,e.mergeProps({ref:"richTextEditor",modelValue:l.internalInputValue,"onUpdate:modelValue":t[0]||(t[0]=r=>l.internalInputValue=r),"allow-blockquote":i.allowBlockquote,"allow-bold":i.allowBold,"allow-bullet-list":i.allowBulletList,"allow-italic":i.allowItalic,"allow-strike":i.allowStrike,"allow-underline":i.allowUnderline,editable:i.editable,"input-aria-label":i.inputAriaLabel,"input-class":i.inputClass,"output-format":i.outputFormat,"auto-focus":i.autoFocus,link:i.link,placeholder:i.placeholder,"mention-suggestion":i.mentionSuggestion},o.$attrs,{onFocus:n.onFocus,onBlur:n.onBlur,onInput:t[1]||(t[1]=r=>n.onInput(r))}),null,16,["modelValue","allow-blockquote","allow-bold","allow-bullet-list","allow-italic","allow-strike","allow-underline","editable","input-aria-label","input-class","output-format","auto-focus","link","placeholder","mention-suggestion","onFocus","onBlur"])],4),e.renderSlot(o.$slots,"middle"),e.createElementVNode("section",P,[e.createElementVNode("div",j,[i.showImagePicker?(e.openBlock(),e.createBlock(s,{key:0,placement:"top-start",message:i.showImagePicker.tooltipLabel,offset:[-4,-4]},{anchor:e.withCtx(()=>[e.createVNode(a,{"data-qa":"dt-message-input-image-btn",size:"sm",circle:"",kind:l.imagePickerFocus?"default":"muted",importance:"clear","aria-label":i.showImagePicker.ariaLabel,onClick:n.onSelectImage,onMouseenter:t[2]||(t[2]=r=>l.imagePickerFocus=!0),onMouseleave:t[3]||(t[3]=r=>l.imagePickerFocus=!1),onFocus:t[4]||(t[4]=r=>l.imagePickerFocus=!0),onBlur:t[5]||(t[5]=r=>l.imagePickerFocus=!1)},{icon:e.withCtx(()=>[e.createVNode(u,{name:"image",size:"300"})]),_:1},8,["kind","aria-label","onClick"]),e.createVNode(p,{ref:"messageInputImageUpload","data-qa":"dt-message-input-image-input",type:"file",class:"d-ps-absolute",multiple:"",hidden:"",onInput:n.onImageUpload},null,8,["onInput"])]),_:1},8,["message"])):e.createCommentVNode("",!0),i.showEmojiPicker?(e.openBlock(),e.createBlock(f,{key:1,"data-qa":"dt-message-input-emoji-picker-popover",open:l.emojiPickerOpened,"initial-focus-element":"#searchInput",padding:"none",onOpened:t[10]||(t[10]=r=>{l.emojiPickerOpened=r})},{anchor:e.withCtx(()=>[e.createVNode(s,{message:i.emojiTooltipMessage,offset:[0,-4]},{anchor:e.withCtx(()=>[e.createVNode(a,{"data-qa":"dt-message-input-emoji-picker-btn",size:"sm",circle:"",kind:n.emojiPickerHovered?"default":"muted",importance:"clear","aria-label":i.emojiButtonAriaLabel,offset:[0,0],onClick:n.toggleEmojiPicker,onMouseenter:t[6]||(t[6]=r=>l.emojiPickerFocus=!0),onMouseleave:t[7]||(t[7]=r=>l.emojiPickerFocus=!1),onFocus:t[8]||(t[8]=r=>l.emojiPickerFocus=!0),onBlur:t[9]||(t[9]=r=>l.emojiPickerFocus=!1)},{icon:e.withCtx(()=>[e.createVNode(u,{name:n.emojiPickerHovered?"very-satisfied":"satisfied",size:"300"},null,8,["name"])]),_:1},8,["kind","aria-label","onClick"])]),_:1},8,["message"])]),content:e.withCtx(()=>[e.createVNode(h,e.mergeProps(i.emojiPickerProps,{onSkinTone:n.onSkinTone,onSelectedEmoji:n.onSelectEmoji}),null,16,["onSkinTone","onSelectedEmoji"])]),_:1},8,["open"])):e.createCommentVNode("",!0)]),e.createElementVNode("div",y,[i.showCharacterLimit?(e.openBlock(),e.createBlock(s,{key:0,class:"dt-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-fc-error d-mr16 dt-message-input--remaining-char","data-qa":"dt-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(a,{key:1,"data-qa":"dt-message-input-cancel-button",class:"dt-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),i.showSend?(e.openBlock(),e.createBlock(s,{key:2,placement:"top-end",enabled:!i.showSend,message:i.showSend.tooltipLabel,show:!n.isSendDisabled&&l.sendButtonFocus,offset:[6,-8]},{anchor:e.withCtx(()=>[e.createVNode(a,{"data-qa":"dt-message-input-send-btn",size:"sm",kind:"default",importance:"primary",class:e.normalizeClass([{"message-input-button__disabled d-fc-muted":n.isSendDisabled,"d-btn--circle":i.showSend.icon}]),"aria-label":i.showSend.ariaLabel,"aria-disabled":n.isSendDisabled,onClick:n.onSend,onMouseenter:t[11]||(t[11]=r=>l.sendButtonFocus=!0),onMouseleave:t[12]||(t[12]=r=>l.sendButtonFocus=!1),onFocus:t[13]||(t[13]=r=>l.sendButtonFocus=!0),onBlur:t[14]||(t[14]=r=>l.sendButtonFocus=!1)},e.createSlots({default:e.withCtx(()=>[i.showSend.text?(e.openBlock(),e.createElementBlock("p",v,e.toDisplayString(i.showSend.text),1)):e.createCommentVNode("",!0)]),_:2},[i.showSend.icon?{name:"icon",fn:e.withCtx(()=>[e.createVNode(u,{name:i.showSend.icon,size:"300"},null,8,["name"])]),key:"0"}:void 0]),1032,["class","aria-label","aria-disabled","onClick"])]),_:1},8,["enabled","message","show"])):e.createCommentVNode("",!0)])])],34)}const I=g._(B,[["render",D]]);exports.DtRecipeMessageInput=I;
+//# sourceMappingURL=message-input.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"message-input.cjs","sources":["../../recipes/conversation_view/message_input/message_input.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <div\n    data-qa=\"dt-message-input\"\n    role=\"presentation\"\n    :class=\"['d-d-flex', 'd-fd-column', 'd-bar8', 'd-baw1', 'd-ba', 'd-c-text',\n             { 'd-bc-bold d-bs-sm': hasFocus, 'd-bc-default': !hasFocus }]\"\n    @click=\"$refs.richTextEditor?.focusEditor()\"\n    @drag-enter=\"onDrag\"\n    @drag-over=\"onDrag\"\n    @drop=\"onDrop\"\n    @keydown.enter.exact=\"onSend\"\n    @paste=\"onPaste\"\n  >\n    <!-- Some wrapper to restrict the height and show the scrollbar -->\n    <div\n      class=\"d-of-auto d-mx16 d-mt8 d-mb4\"\n      :style=\"{ 'max-height': maxHeight }\"\n    >\n      <dt-rich-text-editor\n        ref=\"richTextEditor\"\n        v-model=\"internalInputValue\"\n        :allow-blockquote=\"allowBlockquote\"\n        :allow-bold=\"allowBold\"\n        :allow-bullet-list=\"allowBulletList\"\n        :allow-italic=\"allowItalic\"\n        :allow-strike=\"allowStrike\"\n        :allow-underline=\"allowUnderline\"\n        :editable=\"editable\"\n        :input-aria-label=\"inputAriaLabel\"\n        :input-class=\"inputClass\"\n        :output-format=\"outputFormat\"\n        :auto-focus=\"autoFocus\"\n        :link=\"link\"\n        :placeholder=\"placeholder\"\n        :mention-suggestion=\"mentionSuggestion\"\n        v-bind=\"$attrs\"\n        @focus=\"onFocus\"\n        @blur=\"onBlur\"\n        @input=\"onInput($event)\"\n      />\n    </div>\n    <!-- @slot Slot for attachment carousel -->\n    <slot name=\"middle\" />\n    <!-- Section for the bottom UI -->\n    <section class=\"d-d-flex d-jc-space-between d-mx8 d-my4\">\n      <!-- Left content -->\n      <div class=\"d-d-flex\">\n        <dt-tooltip\n          v-if=\"showImagePicker\"\n          placement=\"top-start\"\n          :message=\"showImagePicker.tooltipLabel\"\n          :offset=\"[-4, -4]\"\n        >\n          <template #anchor>\n            <dt-button\n              data-qa=\"dt-message-input-image-btn\"\n              size=\"sm\"\n              circle\n              :kind=\"imagePickerFocus ? 'default' : 'muted'\"\n              importance=\"clear\"\n              :aria-label=\"showImagePicker.ariaLabel\"\n              @click=\"onSelectImage\"\n              @mouseenter=\"imagePickerFocus = true\"\n              @mouseleave=\"imagePickerFocus = false\"\n              @focus=\"imagePickerFocus = true\"\n              @blur=\"imagePickerFocus = false\"\n            >\n              <template #icon>\n                <dt-icon\n                  name=\"image\"\n                  size=\"300\"\n                />\n              </template>\n            </dt-button>\n            <dt-input\n              ref=\"messageInputImageUpload\"\n              data-qa=\"dt-message-input-image-input\"\n              type=\"file\"\n              class=\"d-ps-absolute\"\n              multiple\n              hidden\n              @input=\"onImageUpload\"\n            />\n          </template>\n        </dt-tooltip>\n        <dt-popover\n          v-if=\"showEmojiPicker\"\n          data-qa=\"dt-message-input-emoji-picker-popover\"\n          :open=\"emojiPickerOpened\"\n          initial-focus-element=\"#searchInput\"\n          padding=\"none\"\n          @opened=\"(open) => { emojiPickerOpened = open }\"\n        >\n          <template #anchor>\n            <dt-tooltip\n              :message=\"emojiTooltipMessage\"\n              :offset=\"[0, -4]\"\n            >\n              <template #anchor>\n                <dt-button\n                  data-qa=\"dt-message-input-emoji-picker-btn\"\n                  size=\"sm\"\n                  circle\n                  :kind=\"emojiPickerHovered ? 'default' : 'muted'\"\n                  importance=\"clear\"\n                  :aria-label=\"emojiButtonAriaLabel\"\n                  :offset=\"[0, 0]\"\n                  @click=\"toggleEmojiPicker\"\n                  @mouseenter=\"emojiPickerFocus = true\"\n                  @mouseleave=\"emojiPickerFocus = false\"\n                  @focus=\"emojiPickerFocus = true\"\n                  @blur=\"emojiPickerFocus = false\"\n                >\n                  <template #icon>\n                    <dt-icon\n                      :name=\"!emojiPickerHovered ? 'satisfied' : 'very-satisfied'\"\n                      size=\"300\"\n                    />\n                  </template>\n                </dt-button>\n              </template>\n            </dt-tooltip>\n          </template>\n          <template #content>\n            <dt-emoji-picker\n              v-bind=\"emojiPickerProps\"\n              @skin-tone=\"onSkinTone\"\n              @selected-emoji=\"onSelectEmoji\"\n            />\n          </template>\n        </dt-popover>\n      </div>\n      <!-- Right content -->\n      <div class=\"d-d-flex\">\n        <!-- Optionally displayed remaining character counter -->\n        <dt-tooltip\n          v-if=\"Boolean(showCharacterLimit)\"\n          class=\"dt-message-input--remaining-char-tooltip\"\n          placement=\"top-end\"\n          :enabled=\"characterLimitTooltipEnabled\"\n          :message=\"showCharacterLimit.message\"\n          :offset=\"[10, -8]\"\n        >\n          <template #anchor>\n            <p\n              v-show=\"displayCharacterLimitWarning\"\n              class=\"d-fc-error d-mr16 dt-message-input--remaining-char\"\n              data-qa=\"dt-message-input-character-limit\"\n            >\n              {{ showCharacterLimit.count - inputLength }}\n            </p>\n          </template>\n        </dt-tooltip>\n\n        <!-- Cancel button for edit mode -->\n        <dt-button\n          v-if=\"showCancel\"\n          data-qa=\"dt-message-input-cancel-button\"\n          class=\"dt-message-input--cancel-button\"\n          size=\"sm\"\n          kind=\"muted\"\n          importance=\"clear\"\n          :aria-label=\"showCancel.ariaLabel\"\n          @click=\"onCancel\"\n        >\n          <p>{{ showCancel.text }}</p>\n        </dt-button>\n\n        <!-- Send button -->\n        <dt-tooltip\n          v-if=\"showSend\"\n          placement=\"top-end\"\n          :enabled=\"!showSend\"\n          :message=\"showSend.tooltipLabel\"\n          :show=\"!isSendDisabled && sendButtonFocus\"\n          :offset=\"[6, -8]\"\n        >\n          <template #anchor>\n            <!-- Right positioned UI - send button -->\n            <dt-button\n              data-qa=\"dt-message-input-send-btn\"\n              size=\"sm\"\n              kind=\"default\"\n              importance=\"primary\"\n              :class=\"[\n                {\n                  'message-input-button__disabled d-fc-muted': isSendDisabled,\n                  'd-btn--circle': showSend.icon,\n                },\n              ]\"\n              :aria-label=\"showSend.ariaLabel\"\n              :aria-disabled=\"isSendDisabled\"\n              @click=\"onSend\"\n              @mouseenter=\"sendButtonFocus = true\"\n              @mouseleave=\"sendButtonFocus = false\"\n              @focus=\"sendButtonFocus = true\"\n              @blur=\"sendButtonFocus = false\"\n            >\n              <template\n                v-if=\"showSend.icon\"\n                #icon\n              >\n                <dt-icon\n                  :name=\"showSend.icon\"\n                  size=\"300\"\n                />\n              </template>\n              <template\n                v-if=\"showSend.text\"\n              >\n                <p>{{ showSend.text }}</p>\n              </template>\n            </dt-button>\n          </template>\n        </dt-tooltip>\n      </div>\n    </section>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  DtRichTextEditor,\n  RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n  RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport { DtEmojiPicker } from '@/components/emoji_picker';\nimport { DtPopover } from '@/components/popover';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\n\nexport default {\n  name: 'DtRecipeMessageInput',\n\n  components: {\n    DtButton,\n    DtEmojiPicker,\n    DtIcon,\n    DtInput,\n    DtPopover,\n    DtRichTextEditor,\n    DtTooltip,\n  },\n\n  mixins: [],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Value of the input. The object format should match TipTap's JSON\n     * document structure: https://tiptap.dev/guide/output#option-1-json\n     */\n    modelValue: {\n      type: [Object, String],\n      default: '',\n    },\n\n    /**\n     * Whether the input is editable\n     */\n    editable: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Descriptive label for the input element\n     */\n    inputAriaLabel: {\n      type: String,\n      required: true,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input element. Only accepts a String value\n     * because this is passed to the editor via options. For multiple classes,\n     * join them into one string, e.g. \"d-p8 d-hmx96\"\n     */\n    inputClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the input should receive focus after the component has been\n     * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n     * - `start`  Sets the focus to the beginning of the input\n     * - `end`    Sets the focus to the end of the input\n     * - `all`    Selects the whole contents of the input\n     * - `Number` Sets the focus to a specific position in the input\n     * - `true`   Defaults to `start`\n     * - `false`  Disables autofocus\n     * @values true, false, start, end, all, number\n     */\n    autoFocus: {\n      type: [Boolean, String, Number],\n      default: false,\n      validator (autoFocus) {\n        if (typeof autoFocus === 'string') {\n          return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n        }\n        return true;\n      },\n    },\n\n    /**\n     * The output format that the editor uses when emitting the \"@input\" event.\n     * One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for\n     * examples.\n     * @values text, json, html\n     */\n    outputFormat: {\n      type: String,\n      default: 'text',\n      validator (outputFormat) {\n        return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);\n      },\n    },\n\n    /**\n     * Enables the Link extension and optionally passes configurations to it\n     */\n    link: {\n      type: [Boolean, Object],\n      default: false,\n    },\n\n    /**\n     * Placeholder text\n     */\n    placeholder: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Disable Send Button\n     */\n    disableSend: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Content area needs to dynamically adjust height based on the conversation area height.\n     * can be vh|px|rem|em|%\n     */\n    maxHeight: {\n      type: String,\n      default: 'unset',\n    },\n\n    // Emoji picker props\n    showEmojiPicker: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Props to pass into the emoji picker.\n     */\n    emojiPickerProps: {\n      type: Object,\n      default: () => ({}),\n      validate (emojiPickerProps) {\n        return [\n          'searchNoResultsLabel',\n          'searchResultsLabel',\n          'searchPlaceholderLabel',\n          'skinSelectorButtonTooltipLabel',\n          'tabSetLabels',\n        ].every(prop => emojiPickerProps[prop] != null);\n      },\n    },\n\n    /**\n     * Emoji button tooltip label\n     */\n    emojiTooltipMessage: {\n      type: String,\n      default: 'Emoji',\n    },\n\n    // Aria label for buttons\n    /**\n     * Emoji button aria label\n     */\n    emojiButtonAriaLabel: {\n      type: String,\n      default: 'emoji button',\n    },\n\n    /**\n     * Enable character Limit warning\n     */\n    showCharacterLimit: {\n      type: [Boolean, Object],\n      default: () => ({ count: 1500, warning: 500, message: '' }),\n    },\n\n    showImagePicker: {\n      type: [Boolean, Object],\n      default: () => ({ tooltipLabel: 'Attach Image', ariaLabel: 'image button' }),\n    },\n\n    /**\n     * Send button defaults.\n     */\n    showSend: {\n      type: [Boolean, Object],\n      default: () => ({ icon: 'send' }),\n    },\n\n    /**\n     * Cancel button defaults.\n     */\n    showCancel: {\n      type: [Boolean, Object],\n      default: () => ({ text: 'Cancel' }),\n    },\n\n    /**\n     * suggestion object containing the items query function.\n     * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion\n     *\n     * The only required key is the items function which is used to query the contacts for suggestion.\n     * items({ query }) => { return [ContactObject]; }\n     * ContactObject format:\n     * { name: string, avatarSrc: string, id: string }\n     *\n     * When null, it does not add the plugin.\n     */\n    mentionSuggestion: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * Whether the input allows for block quote.\n     */\n    allowBlockquote: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the input allows for bold to be introduced in the text.\n     */\n    allowBold: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the input allows for bullet list to be introduced in the text.\n    */\n    allowBulletList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the input allows for italic to be introduced in the text.\n     */\n    allowItalic: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the input allows for strike to be introduced in the text.\n     */\n    allowStrike: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the input allows for underline to be introduced in the text.\n     */\n    allowUnderline: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Fires when send button is clicked\n     *\n     * @event submit\n     * @type {String}\n     */\n    'submit',\n\n    /**\n     * Fires when media is selected from image button\n     *\n     * @event select-media\n     * @type {Array}\n     */\n    'select-media',\n\n    /**\n     * Fires when media is dropped into the message input\n     *\n     * @event add-media\n     * @type {Array}\n     */\n    'add-media',\n\n    /**\n     * Fires when media is pasted into the message input\n     *\n     * @event paste-media\n     * @type {Array}\n     */\n    'paste-media',\n\n    /**\n     * Fires when cancel button is pressed (only on edit mode)\n     *\n     * @event cancel\n     * @type {Boolean}\n     */\n    'cancel',\n\n    /**\n     * Fires when skin tone is selected from the emoji picker\n     *\n     * @event skin-tone\n     * @type {String}\n     */\n    'skin-tone',\n\n    /**\n     * Fires when emoji is selected from the emoji picker\n     *\n     * @event selected-emoji\n     * @type {String}\n     */\n    'selected-emoji',\n\n    /**\n     * Native focus event\n     * @event input\n     * @type {String|JSON}\n     */\n    'focus',\n\n    /**\n     * Native blur event\n     * @event input\n     * @type {String|JSON}\n     */\n    'blur',\n\n    /**\n     * Native input event\n     * @event input\n     * @type {String|JSON}\n     */\n    'input',\n  ],\n\n  data () {\n    return {\n      internalInputValue: this.modelValue, // internal input content\n      hasFocus: false,\n      imagePickerFocus: false,\n      emojiPickerFocus: false,\n      sendButtonFocus: false,\n      emojiPickerOpened: false,\n    };\n  },\n\n  computed: {\n    inputLength () {\n      return this.internalInputValue.length;\n    },\n\n    displayCharacterLimitWarning () {\n      return Boolean(this.showCharacterLimit) &&\n        ((this.showCharacterLimit.count - this.inputLength) <= this.showCharacterLimit.warning);\n    },\n\n    characterLimitTooltipEnabled () {\n      return this.showCharacterLimit.message && (this.showCharacterLimit.count - this.inputLength < 0);\n    },\n\n    isSendDisabled () {\n      return this.disableSend ||\n      (this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count);\n    },\n\n    computedCloseButtonProps () {\n      return {\n        ariaLabel: 'Close',\n      };\n    },\n\n    emojiPickerHovered () {\n      return this.emojiPickerFocus || this.emojiPickerOpened;\n    },\n  },\n\n  watch: {\n    modelValue (newValue) {\n      this.internalInputValue = newValue;\n    },\n  },\n\n  methods: {\n    onDrag (e) {\n      e.stopPropagation();\n      e.preventDefault();\n    },\n\n    onDrop (e) {\n      e.stopPropagation();\n      e.preventDefault();\n\n      const dt = e.dataTransfer;\n      const files = Array.from(dt.files);\n      this.$emit('add-media', files);\n    },\n\n    onPaste (e) {\n      if (e.clipboardData.files.length) {\n        e.stopPropagation();\n        e.preventDefault();\n        const files = [...e.clipboardData.files];\n        this.$emit('paste-media', files);\n      }\n    },\n\n    onSkinTone (skinTone) {\n      this.$emit('skin-tone', skinTone);\n    },\n\n    onSelectEmoji (emoji) {\n      if (!emoji) {\n        this.emojiPickerOpened = false;\n        return;\n      }\n\n      // Insert emoji into the editor\n      this.$refs.richTextEditor.editor.commands.insertContent({\n        type: 'emoji',\n        attrs: {\n          code: emoji.shortname,\n        },\n      });\n      this.emojiPickerOpened = false;\n      this.$emit('selected-emoji', emoji);\n    },\n\n    onSelectImage () {\n      this.$refs.messageInputImageUpload.$refs.input.click();\n    },\n\n    onImageUpload () {\n      this.$emit('select-media', this.$refs.messageInputImageUpload.$refs.input.files);\n    },\n\n    toggleEmojiPicker () {\n      this.emojiPickerOpened = !this.emojiPickerOpened;\n    },\n\n    onSend () {\n      if (this.isSendDisabled) {\n        return;\n      }\n      this.$emit('submit', this.internalInputValue);\n    },\n\n    onCancel () {\n      this.$emit('cancel');\n    },\n\n    onFocus (event) {\n      this.hasFocus = true;\n      this.$refs.richTextEditor?.focusEditor();\n      this.$emit('focus', event);\n    },\n\n    onBlur (event) {\n      this.hasFocus = false;\n      this.$emit('blur', event);\n    },\n\n    onInput (event) {\n      this.$emit('input', event);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input--remaining-char-tooltip {\n  margin-top: auto;\n  margin-bottom: auto;\n}\n.dt-message-input--remaining-char {\n  font-size: 1.2rem;\n}\n\n.message-input-button__disabled {\n  background-color: unset;\n  color: var(--theme-sidebar-icon-color);\n  cursor: default;\n}\n\n.dt-message-input--cancel-button {\n  margin-right: var(--dt-space-300);\n}\n</style>\n"],"names":["_sfc_main","DtButton","DtEmojiPicker","DtIcon","DtInput","DtPopover","DtRichTextEditor","DtTooltip","autoFocus","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","outputFormat","RICH_TEXT_EDITOR_OUTPUT_FORMATS","emojiPickerProps","prop","newValue","e","dt","files","skinTone","emoji","event","_a","_hoisted_1","_hoisted_2","_hoisted_3","_createElementBlock","_normalizeClass","$data","_cache","$event","_ctx","$options","args","_createElementVNode","$props","_createVNode","_component_dt_rich_text_editor","_mergeProps","_renderSlot","_createBlock","_component_dt_tooltip","_component_dt_button","_component_dt_icon","_component_dt_input","_component_dt_popover","open","_component_dt_emoji_picker","_toDisplayString","_hoisted_4"],"mappings":"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"}