@dialpad/dialtone 9.131.1 → 9.132.1

package/dist/vue2/lib/combobox-multi-select/combobox-multi-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-multi-select.js","sources":["../../../recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["<!-- eslint-disable vue/no-static-inline-styles -->\n<template>\n  <dt-recipe-combobox-with-popover\n    ref=\"comboboxWithPopover\"\n    :label=\"label\"\n    :show-list=\"showList\"\n    :max-height=\"listMaxHeight\"\n    :max-width=\"listMaxWidth\"\n    :popover-offset=\"popoverOffset\"\n    :has-suggestion-list=\"hasSuggestionList\"\n    content-width=\"anchor\"\n    :append-to=\"appendTo\"\n    :transition=\"transition\"\n    @select=\"onComboboxSelect\"\n    @highlight=\"comboboxHighlight\"\n  >\n    <template #input=\"{ onInput }\">\n      <span\n        ref=\"inputSlotWrapper\"\n        class=\"d-recipe-combobox-multi-select__input-wrapper\"\n        @focusin=\"handleInputFocusIn\"\n        @focusout=\"handleInputFocusOut\"\n      >\n        <span\n          ref=\"chipsWrapper\"\n          :class=\"['d-recipe-combobox-multi-select__chip-wrapper', chipWrapperClass]\"\n        >\n          <dt-chip\n            v-for=\"({ item, key }) in selectedItemsWithKeys\"\n            ref=\"chips\"\n            :key=\"key\"\n            :label-class=\"['d-chip__label']\"\n            :class=\"[\n              'd-recipe-combobox-multi-select__chip',\n              { 'd-recipe-combobox-multi-select__chip--truncate': !!chipMaxWidth },\n            ]\"\n            :style=\"{ maxWidth: chipMaxWidth }\"\n            :size=\"CHIP_SIZES[size]\"\n            v-on=\"chipListeners\"\n            @keyup.backspace=\"onChipRemove(item)\"\n            @close=\"onChipRemove(item)\"\n          >\n            {{ item }}\n          </dt-chip>\n        </span>\n\n        <dt-input\n          ref=\"input\"\n          v-model=\"value\"\n          class=\"d-recipe-combobox-multi-select__input\"\n          :input-class=\"[\n            inputClass, {\n              'd-recipe-combobox-multi-select__input--hidden': hideInputText,\n            }]\"\n          :input-wrapper-class=\"inputWrapperClass\"\n          :aria-label=\"label\"\n          :label=\"labelVisible ? label : ''\"\n          :description=\"description\"\n          :placeholder=\"inputPlaceHolder\"\n          :show-messages=\"showInputMessages\"\n          :messages=\"inputMessages\"\n          :size=\"size\"\n          v-on=\"inputListeners\"\n          @input=\"onInput\"\n        />\n\n        <dt-validation-messages\n          :validation-messages=\"maxSelectedMessage\"\n          :show-messages=\"showValidationMessages\"\n        />\n      </span>\n    </template>\n\n    <!-- @slot slot for popover header -->\n    <template\n      v-if=\"$slots.header\"\n      #header\n    >\n      <div ref=\"header\">\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <!-- @slot slot for popover list -->\n    <template #list>\n      <div\n        ref=\"list\"\n        class=\"d-recipe-combobox-multi-select__list\"\n        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"d-recipe-combobox-multi-select__list--loading\"\n        >\n          {{ loadingMessage }}\n        </div>\n      </div>\n    </template>\n\n    <!-- @slot slot for popover footer -->\n    <template\n      v-if=\"$slots.footer\"\n      #footer\n    >\n      <div ref=\"footer\">\n        <slot name=\"footer\" />\n      </div>\n    </template>\n  </dt-recipe-combobox-with-popover>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport DtRecipeComboboxWithPopover from '@/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue';\nimport DtInput from '@/components/input/input.vue';\nimport DtChip from '@/components/chip/chip.vue';\nimport DtValidationMessages from '@/components/validation_messages/validation_messages.vue';\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '@/components/popover/popover_constants';\nimport {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n} from './combobox_multi_select_constants';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeComboboxMultiSelect',\n\n  components: {\n    DtRecipeComboboxWithPopover,\n    DtInput,\n    DtChip,\n    DtValidationMessages,\n  },\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Input placeholder\n     */\n    placeholder: {\n      type: String,\n      default: 'Select one or start typing',\n    },\n\n    /**\n     * Input validation messages\n     */\n    inputMessages: {\n      type: Array,\n      default: () => [],\n      validator: inputMessages => {\n        return validationMessageValidator(inputMessages);\n      },\n    },\n\n    /**\n     * Show input validation message\n     */\n    showInputMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    // @TODO: https://dialpad.atlassian.net/browse/DP-52324\n    // type: {\n    //   type: String,\n    //   values: ['input', 'select'],\n    //   default: 'select',\n    // },\n\n    /**\n     * Determines if the list is loading\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The message when the list is loading\n     */\n    loadingMessage: {\n      type: String,\n      default: 'loading...',\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxHeight: {\n      type: String,\n      default: '300px',\n    },\n\n    /**\n     * The selected items\n     */\n    selectedItems: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Would be the maximum number of selections you can make. 0 is unlimited\n     */\n    maxSelected: {\n      type: Number,\n      default: 0,\n    },\n\n    /**\n     * Max select message when the max selections is exceeded with the structure:\n     * `[{\"message\": string, \"type\": VALIDATION_MESSAGE_TYPES }]`\n     */\n    maxSelectedMessage: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the chip, one of `xs`, `sm`, `md`\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (t) => Object.values(MULTI_SELECT_SIZES).includes(t),\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n\n    /**\n     * Determines whether the combobox should collapse to a single when losing focus.\n     * @type {boolean}\n     */\n    collapseOnFocusOut: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n    * Amount of reserved space (in px) on the right side of the input\n    * before the chips and the input caret jump to the next line.\n    * default is 64\n    */\n    reservedRightSpace: {\n      type: Number,\n      default: 64,\n    },\n\n    /**\n     * Determines the maximum width of a single chip. If the text within this chip exceeds the value\n     * it will be truncated with ellipses.\n     * Possible units rem|px|em\n     */\n    chipMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    inputClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input wrapper element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    inputWrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String }\n     */\n    'input',\n\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when item removed\n     *\n     * @event remove\n     * @type {String}\n     */\n    'remove',\n\n    /**\n     * Event fired when max selected items limit is reached\n     *\n     * @event max-selected\n     * @type {Object}\n     */\n    'max-selected',\n\n    /**\n     * Native keyup event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n      */\n    'keyup',\n\n    /**\n     * Event fired when combobox item is highlighted\n     *\n     * @event combobox-highlight\n     * @type {Object}\n     */\n    'combobox-highlight',\n  ],\n\n  data () {\n    return {\n      value: '',\n      popoverOffset: [0, 4],\n      showValidationMessages: false,\n      resizeWindowObserver: null,\n      initialInputHeight: null,\n      CHIP_SIZES,\n      inputFocused: false,\n      hideInputText: false,\n    };\n  },\n\n  computed: {\n    inputPlaceHolder () {\n      return this.selectedItems?.length > 0 ? '' : this.placeholder;\n    },\n\n    chipListeners () {\n      return {\n        ...this.$listeners,\n        keyup: event => {\n          this.onChipKeyup(event);\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        input: event => {\n          this.$emit('input', event);\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n\n        keyup: event => {\n          this.onInputKeyup(event);\n          this.$emit('keyup', event);\n        },\n\n        click: () => {\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n      };\n    },\n\n    selectedItemsWithKeys () {\n      return this.selectedItems.map(selectedItem => ({\n        item: selectedItem,\n        key: getUniqueString(selectedItem),\n      }));\n    },\n\n    chipWrapperClass () {\n      return {\n        [`d-recipe-combobox-multi-select__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n      };\n    },\n  },\n\n  watch: {\n    selectedItems: {\n      async handler () {\n        this.initSelectedItems();\n      },\n    },\n\n    chipMaxWidth: {\n      async handler () {\n        this.initSelectedItems();\n      },\n    },\n\n    async label () {\n      await this.$nextTick();\n      // Adjust the chips position if label changed\n      this.setChipsTopPosition();\n    },\n\n    async description () {\n      await this.$nextTick();\n      // Adjust the chips position if description changed\n      this.setChipsTopPosition();\n    },\n\n    size: {\n      async handler () {\n        await this.$nextTick();\n        const input = this.getInput();\n        this.revertInputPadding(input);\n        this.initialInputHeight = input.getBoundingClientRect().height;\n        this.setInputPadding();\n        this.setChipsTopPosition();\n      },\n    },\n  },\n\n  mounted () {\n    this.setInitialInputHeight();\n    // Recalculate chip position and input padding when resizing window\n    this.resizeWindowObserver = new ResizeObserver(async () => {\n      this.setChipsTopPosition();\n      this.setInputPadding();\n    });\n    this.resizeWindowObserver.observe(document.body);\n\n    this.initSelectedItems();\n  },\n\n  beforeDestroy () {\n    this.resizeWindowObserver?.unobserve(document.body);\n  },\n\n  methods: {\n    comboboxHighlight (highlightIndex) {\n      this.$emit('combobox-highlight', highlightIndex);\n    },\n\n    async initSelectedItems () {\n      await this.$nextTick();\n      this.setInputPadding();\n      this.setChipsTopPosition();\n      this.setInputMinWidth();\n      this.checkMaxSelected();\n    },\n\n    onChipRemove (item) {\n      this.$emit('remove', item);\n      this.$refs.input?.focus();\n    },\n\n    onComboboxSelect (i) {\n      if (this.loading) return;\n      this.value = '';\n      this.$emit('select', i);\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.showComboboxList();\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.closeComboboxList();\n    },\n\n    getChipButtons () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el.querySelector('button'));\n    },\n\n    getChips () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el);\n    },\n\n    getLastChipButton () {\n      return this.$refs.chips && this.getChipButtons()[this.getChipButtons().length - 1];\n    },\n\n    getLastChip () {\n      return this.$refs.chips && this.getChips()[this.getChips().length - 1];\n    },\n\n    getFirstChip () {\n      return this.$refs.chips && this.getChips()[0];\n    },\n\n    getInput () {\n      return this.$refs.input?.$refs.input;\n    },\n\n    onChipKeyup (event) {\n      const key = event.code?.toLowerCase();\n      if (key === 'arrowleft') {\n        // Move to the previous chip\n        this.navigateBetweenChips(event.target, true);\n      } else if (key === 'arrowright') {\n        if (event.target.id === this.getLastChipButton().id) {\n          // Move to the input if it's the last chip\n          this.moveFromChipToInput();\n        } else {\n          // Move to the next chip\n          this.navigateBetweenChips(event.target, false);\n        }\n      }\n    },\n\n    onInputKeyup (event) {\n      const key = event.code?.toLowerCase();\n      // If the cursor is at the start of the text,\n      // press 'backspace' or 'left' focuses the last chip\n      if (this.selectedItems.length > 0 && event.target.selectionStart === 0) {\n        if (key === 'backspace' || key === 'arrowleft') {\n          this.moveFromInputToChip();\n        }\n      }\n    },\n\n    moveFromInputToChip () {\n      this.getLastChipButton().focus();\n      this.$refs.input?.blur();\n      this.closeComboboxList();\n    },\n\n    moveFromChipToInput () {\n      this.getLastChipButton().blur();\n      this.$refs.input?.focus();\n      this.showComboboxList();\n    },\n\n    navigateBetweenChips (target, toLeft) {\n      const from = this.getChipButtons().indexOf(target);\n      const to = toLeft ? from - 1 : from + 1;\n      if (to < 0 || to >= this.$refs.chips?.length) {\n        return;\n      }\n      this.getChipButtons()[from].blur();\n      this.getChipButtons()[to].focus();\n      this.closeComboboxList();\n    },\n\n    setChipsTopPosition () {\n      // To place the chips in the input box\n      // The chip \"top\" position should be the same line as the input box\n      const input = this.getInput();\n      if (!input) return;\n      const inputSlotWrapper = this.$refs.inputSlotWrapper;\n      const top = input.getBoundingClientRect().top -\n                  inputSlotWrapper.getBoundingClientRect().top;\n      const chipsWrapper = this.$refs.chipsWrapper;\n      chipsWrapper.style.top = (top - CHIP_TOP_POSITION[this.size]) + 'px';\n    },\n\n    setInputPadding () {\n      const lastChip = this.getLastChip();\n      const input = this.getInput();\n      const chipsWrapper = this.$refs.chipsWrapper;\n      if (!input) return;\n      this.revertInputPadding(input);\n      this.popoverOffset = [0, 4];\n      if (!lastChip) return;\n      // Avoid adding extra padding when the input is not focused if collapseOnFocusOut is true\n      // This ensures the input returns to its original state when resizing\n      if (this.collapseOnFocusOut && !this.inputFocused) return;\n\n      // Get the position of the last chip\n      // The input cursor should be the same \"top\" as that chip and next besides it\n      const left = lastChip.offsetLeft + this.getFullWidth(lastChip);\n      const spaceLeft = input.getBoundingClientRect().width - left;\n      // input.style.paddingLeft = left + 'px';\n\n      if (spaceLeft > this.reservedRightSpace) {\n        input.style.paddingLeft = left + 'px';\n      } else {\n        input.style.paddingLeft = '4px';\n      }\n\n      // Get the chip wrapper height minus the 4px padding\n      const chipsWrapperHeight = chipsWrapper.getBoundingClientRect().height - 4;\n      const lastChipHeight = lastChip.getBoundingClientRect().height - 4;\n\n      // Get lastChip offsetTop plus 2px of the input padding.\n      const top = spaceLeft > this.reservedRightSpace\n        ? lastChip.offsetTop + 2\n        : (chipsWrapperHeight + lastChipHeight - 9);\n\n      input.style.paddingTop = `${top}px`;\n    },\n\n    revertInputPadding (input) {\n      input.style.paddingLeft = '';\n      input.style.paddingTop = '';\n      input.style.paddingBottom = '';\n    },\n\n    getFullWidth (el) {\n      const styles = window.getComputedStyle(el);\n      return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);\n    },\n\n    setInputMinWidth () {\n      // Ensure the width of the input is \"slightly bigger\" than the width of a single chip\n      const firstChip = this.getFirstChip();\n      const input = this.getInput();\n      if (!input) return;\n      if (firstChip) {\n        // Add 4px buffer for typing room\n        input.style.minWidth = (this.getFullWidth(firstChip) + 4) + 'px';\n      } else {\n        input.style.minWidth = '';\n      }\n    },\n\n    checkMaxSelected () {\n      if (this.maxSelected === 0) return;\n      if (this.selectedItems.length > this.maxSelected) {\n        this.showValidationMessages = true;\n        this.$emit('max-selected');\n      } else {\n        this.showValidationMessages = false;\n      }\n    },\n\n    setInitialInputHeight () {\n      const input = this.getInput();\n      if (!input) return;\n      this.initialInputHeight = input.getBoundingClientRect().height;\n    },\n\n    async handleInputFocusIn () {\n      this.inputFocused = true;\n      if (this.collapseOnFocusOut) {\n        this.hideInputText = false;\n        await this.$nextTick();\n        this.setInputPadding();\n      }\n    },\n\n    async handleInputFocusOut () {\n      this.inputFocused = false;\n      if (this.collapseOnFocusOut) {\n        this.hideInputText = true;\n        const input = this.getInput();\n        if (!input) return;\n        // Hide the input text when is not on first line\n        if (!input.style.paddingTop) {\n          return;\n        }\n        this.revertInputPadding(input);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtRecipeComboboxWithPopover","DtInput","DtChip","DtValidationMessages","inputMessages","validationMessageValidator","MULTI_SELECT_SIZES","appendTo","POPOVER_APPEND_TO_VALUES","CHIP_SIZES","_a","event","selectedItem","getUniqueString","input","highlightIndex","item","i","chip","key","target","toLeft","from","to","inputSlotWrapper","top","chipsWrapper","CHIP_TOP_POSITION","lastChip","left","spaceLeft","chipsWrapperHeight","lastChipHeight","el","styles","firstChip"],"mappings":"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"}
+{"version":3,"file":"combobox-multi-select.js","sources":["../../../recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["<!-- eslint-disable vue/no-static-inline-styles -->\n<template>\n  <dt-recipe-combobox-with-popover\n    ref=\"comboboxWithPopover\"\n    :label=\"label\"\n    :show-list=\"showList\"\n    :max-height=\"listMaxHeight\"\n    :max-width=\"listMaxWidth\"\n    :popover-offset=\"popoverOffset\"\n    :has-suggestion-list=\"hasSuggestionList\"\n    content-width=\"anchor\"\n    :append-to=\"appendTo\"\n    :transition=\"transition\"\n    @select=\"onComboboxSelect\"\n    @highlight=\"comboboxHighlight\"\n  >\n    <template #input=\"{ onInput }\">\n      <span\n        ref=\"inputSlotWrapper\"\n        class=\"d-recipe-combobox-multi-select__input-wrapper\"\n        @focusin=\"handleInputFocusIn\"\n        @focusout=\"handleInputFocusOut\"\n      >\n        <span\n          ref=\"chipsWrapper\"\n          :class=\"['d-recipe-combobox-multi-select__chip-wrapper', chipWrapperClass]\"\n        >\n          <dt-chip\n            v-for=\"({ item, key }) in selectedItemsWithKeys\"\n            ref=\"chips\"\n            :key=\"key\"\n            :label-class=\"['d-chip__label']\"\n            :class=\"[\n              'd-recipe-combobox-multi-select__chip',\n              { 'd-recipe-combobox-multi-select__chip--truncate': !!chipMaxWidth },\n            ]\"\n            :style=\"{ maxWidth: chipMaxWidth }\"\n            :size=\"CHIP_SIZES[size]\"\n            v-on=\"chipListeners\"\n            @keydown.backspace=\"onChipRemove(item)\"\n            @close=\"onChipRemove(item)\"\n          >\n            {{ item }}\n          </dt-chip>\n        </span>\n\n        <dt-input\n          ref=\"input\"\n          v-model=\"value\"\n          class=\"d-recipe-combobox-multi-select__input\"\n          :input-class=\"[\n            inputClass, {\n              'd-recipe-combobox-multi-select__input--hidden': hideInputText,\n            }]\"\n          :input-wrapper-class=\"inputWrapperClass\"\n          :aria-label=\"label\"\n          :label=\"labelVisible ? label : ''\"\n          :description=\"description\"\n          :placeholder=\"inputPlaceHolder\"\n          :show-messages=\"showInputMessages\"\n          :messages=\"inputMessages\"\n          :size=\"size\"\n          v-on=\"inputListeners\"\n          @input=\"onInput\"\n          @select.stop\n        />\n\n        <dt-validation-messages\n          :validation-messages=\"maxSelectedMessage\"\n          :show-messages=\"showValidationMessages\"\n        />\n      </span>\n    </template>\n\n    <!-- @slot slot for popover header -->\n    <template\n      v-if=\"$slots.header\"\n      #header\n    >\n      <div ref=\"header\">\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <!-- @slot slot for popover list -->\n    <template #list>\n      <div\n        ref=\"list\"\n        class=\"d-recipe-combobox-multi-select__list\"\n        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"d-recipe-combobox-multi-select__list--loading\"\n        >\n          {{ loadingMessage }}\n        </div>\n      </div>\n    </template>\n\n    <!-- @slot slot for popover footer -->\n    <template\n      v-if=\"$slots.footer\"\n      #footer\n    >\n      <div ref=\"footer\">\n        <slot name=\"footer\" />\n      </div>\n    </template>\n  </dt-recipe-combobox-with-popover>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport DtRecipeComboboxWithPopover from '@/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue';\nimport DtInput from '@/components/input/input.vue';\nimport DtChip from '@/components/chip/chip.vue';\nimport DtValidationMessages from '@/components/validation_messages/validation_messages.vue';\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '@/components/popover/popover_constants';\nimport {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n} from './combobox_multi_select_constants';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeComboboxMultiSelect',\n\n  components: {\n    DtRecipeComboboxWithPopover,\n    DtInput,\n    DtChip,\n    DtValidationMessages,\n  },\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Input placeholder\n     */\n    placeholder: {\n      type: String,\n      default: 'Select one or start typing',\n    },\n\n    /**\n     * Input validation messages\n     */\n    inputMessages: {\n      type: Array,\n      default: () => [],\n      validator: inputMessages => {\n        return validationMessageValidator(inputMessages);\n      },\n    },\n\n    /**\n     * Show input validation message\n     */\n    showInputMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    // @TODO: https://dialpad.atlassian.net/browse/DP-52324\n    // type: {\n    //   type: String,\n    //   values: ['input', 'select'],\n    //   default: 'select',\n    // },\n\n    /**\n     * Determines if the list is loading\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The message when the list is loading\n     */\n    loadingMessage: {\n      type: String,\n      default: 'loading...',\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxHeight: {\n      type: String,\n      default: '300px',\n    },\n\n    /**\n     * The selected items\n     */\n    selectedItems: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Would be the maximum number of selections you can make. 0 is unlimited\n     */\n    maxSelected: {\n      type: Number,\n      default: 0,\n    },\n\n    /**\n     * Max select message when the max selections is exceeded with the structure:\n     * `[{\"message\": string, \"type\": VALIDATION_MESSAGE_TYPES }]`\n     */\n    maxSelectedMessage: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the chip, one of `xs`, `sm`, `md`\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (t) => Object.values(MULTI_SELECT_SIZES).includes(t),\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n\n    /**\n     * Determines whether the combobox should collapse to a single when losing focus.\n     * @type {boolean}\n     */\n    collapseOnFocusOut: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n    * Amount of reserved space (in px) on the right side of the input\n    * before the chips and the input caret jump to the next line.\n    * default is 64\n    */\n    reservedRightSpace: {\n      type: Number,\n      default: 64,\n    },\n\n    /**\n     * Determines the maximum width of a single chip. If the text within this chip exceeds the value\n     * it will be truncated with ellipses.\n     * Possible units rem|px|em\n     */\n    chipMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    inputClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input wrapper element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    inputWrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String }\n     */\n    'input',\n\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when item removed\n     *\n     * @event remove\n     * @type {String}\n     */\n    'remove',\n\n    /**\n     * Event fired when max selected items limit is reached\n     *\n     * @event max-selected\n     * @type {Object}\n     */\n    'max-selected',\n\n    /**\n     * Native keyup event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n      */\n    'keyup',\n\n    /**\n     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n      */\n    'keydown',\n\n    /**\n     * Event fired when combobox item is highlighted\n     *\n     * @event combobox-highlight\n     * @type {Object}\n     */\n    'combobox-highlight',\n  ],\n\n  data () {\n    return {\n      value: '',\n      popoverOffset: [0, 4],\n      showValidationMessages: false,\n      resizeWindowObserver: null,\n      initialInputHeight: null,\n      CHIP_SIZES,\n      inputFocused: false,\n      hideInputText: false,\n    };\n  },\n\n  computed: {\n    inputPlaceHolder () {\n      return this.selectedItems?.length > 0 ? '' : this.placeholder;\n    },\n\n    chipListeners () {\n      return {\n        ...this.$listeners,\n        keydown: event => {\n          this.onChipKeyDown(event);\n          this.$emit('keydown', event);\n        },\n      };\n    },\n\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        input: event => {\n          this.$emit('input', event);\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n\n        keydown: event => {\n          this.onInputKeyDown(event);\n        },\n\n        keyup: event => {\n          this.$emit('keyup', event);\n        },\n\n        click: () => {\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n      };\n    },\n\n    selectedItemsWithKeys () {\n      return this.selectedItems.map(selectedItem => ({\n        item: selectedItem,\n        key: getUniqueString(selectedItem),\n      }));\n    },\n\n    chipWrapperClass () {\n      return {\n        [`d-recipe-combobox-multi-select__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n      };\n    },\n  },\n\n  watch: {\n    selectedItems: {\n      async handler () {\n        this.initSelectedItems();\n      },\n    },\n\n    chipMaxWidth: {\n      async handler () {\n        this.initSelectedItems();\n      },\n    },\n\n    async label () {\n      await this.$nextTick();\n      // Adjust the chips position if label changed\n      this.setChipsTopPosition();\n    },\n\n    async description () {\n      await this.$nextTick();\n      // Adjust the chips position if description changed\n      this.setChipsTopPosition();\n    },\n\n    size: {\n      async handler () {\n        await this.$nextTick();\n        const input = this.getInput();\n        this.revertInputPadding(input);\n        this.initialInputHeight = input.getBoundingClientRect().height;\n        this.setInputPadding();\n        this.setChipsTopPosition();\n      },\n    },\n  },\n\n  mounted () {\n    this.setInitialInputHeight();\n    // Recalculate chip position and input padding when resizing window\n    this.resizeWindowObserver = new ResizeObserver(async () => {\n      this.setChipsTopPosition();\n      this.setInputPadding();\n    });\n    this.resizeWindowObserver.observe(document.body);\n\n    this.initSelectedItems();\n  },\n\n  beforeDestroy () {\n    this.resizeWindowObserver?.unobserve(document.body);\n  },\n\n  methods: {\n    comboboxHighlight (highlightIndex) {\n      this.$emit('combobox-highlight', highlightIndex);\n    },\n\n    async initSelectedItems () {\n      await this.$nextTick();\n      this.setInputPadding();\n      this.setChipsTopPosition();\n      this.setInputMinWidth();\n      this.checkMaxSelected();\n    },\n\n    onChipRemove (item) {\n      this.$emit('remove', item);\n      this.$refs.input?.focus();\n    },\n\n    onComboboxSelect (i) {\n      if (this.loading) return;\n      this.value = '';\n      this.$emit('select', i);\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.showComboboxList();\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.closeComboboxList();\n    },\n\n    getChipButtons () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el.querySelector('button'));\n    },\n\n    getChips () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el);\n    },\n\n    getLastChipButton () {\n      return this.$refs.chips && this.getChipButtons()[this.getChipButtons().length - 1];\n    },\n\n    getLastChip () {\n      return this.$refs.chips && this.getChips()[this.getChips().length - 1];\n    },\n\n    getFirstChip () {\n      return this.$refs.chips && this.getChips()[0];\n    },\n\n    getInput () {\n      return this.$refs.input?.$refs.input;\n    },\n\n    onChipKeyDown (event) {\n      const key = event.code?.toLowerCase();\n      if (key === 'arrowleft') {\n        // Move to the previous chip\n        this.navigateBetweenChips(event.target, true);\n      } else if (key === 'arrowright') {\n        if (event.target.id === this.getLastChipButton().id) {\n          // Move to the input if it's the last chip\n          this.moveFromChipToInput();\n        } else {\n          // Move to the next chip\n          this.navigateBetweenChips(event.target, false);\n        }\n      }\n    },\n\n    onInputKeyDown (event) {\n      const key = event.code?.toLowerCase();\n      // If the cursor is at the start of the text,\n      // press 'backspace' or 'left' focuses the last chip\n      if (this.selectedItems.length > 0 && event.target.selectionStart === 0) {\n        // if there is selected text, do not focus the last chip\n        if (event.target.selectionEnd !== event.target.selectionStart) {\n          return;\n        }\n        if (key === 'backspace' || key === 'arrowleft') {\n          this.moveFromInputToChip();\n        }\n      }\n    },\n\n    moveFromInputToChip () {\n      this.getLastChipButton().focus();\n      this.$refs.input?.blur();\n      this.closeComboboxList();\n    },\n\n    moveFromChipToInput () {\n      this.getLastChipButton().blur();\n      this.$refs.input?.focus();\n      this.showComboboxList();\n    },\n\n    navigateBetweenChips (target, toLeft) {\n      const from = this.getChipButtons().indexOf(target);\n      const to = toLeft ? from - 1 : from + 1;\n      if (to < 0 || to >= this.$refs.chips?.length) {\n        return;\n      }\n      this.getChipButtons()[from].blur();\n      this.getChipButtons()[to].focus();\n      this.closeComboboxList();\n    },\n\n    setChipsTopPosition () {\n      // To place the chips in the input box\n      // The chip \"top\" position should be the same line as the input box\n      const input = this.getInput();\n      if (!input) return;\n      const inputSlotWrapper = this.$refs.inputSlotWrapper;\n      const top = input.getBoundingClientRect().top -\n                  inputSlotWrapper.getBoundingClientRect().top;\n      const chipsWrapper = this.$refs.chipsWrapper;\n      chipsWrapper.style.top = (top - CHIP_TOP_POSITION[this.size]) + 'px';\n    },\n\n    setInputPadding () {\n      const lastChip = this.getLastChip();\n      const input = this.getInput();\n      const chipsWrapper = this.$refs.chipsWrapper;\n      if (!input) return;\n      this.revertInputPadding(input);\n      this.popoverOffset = [0, 4];\n      if (!lastChip) return;\n      // Avoid adding extra padding when the input is not focused if collapseOnFocusOut is true\n      // This ensures the input returns to its original state when resizing\n      if (this.collapseOnFocusOut && !this.inputFocused) return;\n\n      // Get the position of the last chip\n      // The input cursor should be the same \"top\" as that chip and next besides it\n      const left = lastChip.offsetLeft + this.getFullWidth(lastChip);\n      const spaceLeft = input.getBoundingClientRect().width - left;\n      // input.style.paddingLeft = left + 'px';\n\n      if (spaceLeft > this.reservedRightSpace) {\n        input.style.paddingLeft = left + 'px';\n      } else {\n        input.style.paddingLeft = '4px';\n      }\n\n      // Get the chip wrapper height minus the 4px padding\n      const chipsWrapperHeight = chipsWrapper.getBoundingClientRect().height - 4;\n      const lastChipHeight = lastChip.getBoundingClientRect().height - 4;\n\n      // Get lastChip offsetTop plus 2px of the input padding.\n      const top = spaceLeft > this.reservedRightSpace\n        ? lastChip.offsetTop + 2\n        : (chipsWrapperHeight + lastChipHeight - 9);\n\n      input.style.paddingTop = `${top}px`;\n    },\n\n    revertInputPadding (input) {\n      input.style.paddingLeft = '';\n      input.style.paddingTop = '';\n      input.style.paddingBottom = '';\n    },\n\n    getFullWidth (el) {\n      const styles = window.getComputedStyle(el);\n      return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);\n    },\n\n    setInputMinWidth () {\n      // Ensure the width of the input is \"slightly bigger\" than the width of a single chip\n      const firstChip = this.getFirstChip();\n      const input = this.getInput();\n      if (!input) return;\n      if (firstChip) {\n        // Add 4px buffer for typing room\n        input.style.minWidth = (this.getFullWidth(firstChip) + 4) + 'px';\n      } else {\n        input.style.minWidth = '';\n      }\n    },\n\n    checkMaxSelected () {\n      if (this.maxSelected === 0) return;\n      if (this.selectedItems.length > this.maxSelected) {\n        this.showValidationMessages = true;\n        this.$emit('max-selected');\n      } else {\n        this.showValidationMessages = false;\n      }\n    },\n\n    setInitialInputHeight () {\n      const input = this.getInput();\n      if (!input) return;\n      this.initialInputHeight = input.getBoundingClientRect().height;\n    },\n\n    async handleInputFocusIn () {\n      this.inputFocused = true;\n      if (this.collapseOnFocusOut) {\n        this.hideInputText = false;\n        await this.$nextTick();\n        this.setInputPadding();\n      }\n    },\n\n    async handleInputFocusOut () {\n      this.inputFocused = false;\n      if (this.collapseOnFocusOut) {\n        this.hideInputText = true;\n        const input = this.getInput();\n        if (!input) return;\n        // Hide the input text when is not on first line\n        if (!input.style.paddingTop) {\n          return;\n        }\n        this.revertInputPadding(input);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtRecipeComboboxWithPopover","DtInput","DtChip","DtValidationMessages","inputMessages","validationMessageValidator","MULTI_SELECT_SIZES","appendTo","POPOVER_APPEND_TO_VALUES","CHIP_SIZES","_a","event","selectedItem","getUniqueString","input","highlightIndex","item","i","chip","key","target","toLeft","from","to","inputSlotWrapper","top","chipsWrapper","CHIP_TOP_POSITION","lastChip","left","spaceLeft","chipsWrapperHeight","lastChipHeight","el","styles","firstChip"],"mappings":"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"}

package/dist/vue2/lib/emoji/emoji.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("../../common/emoji/index.cjs"),r=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),s=require("../skeleton/skeleton.cjs"),o=require("../icon/icon-constants.cjs"),n={name:"DtEmoji",components:{DtSkeleton:s.default},props:{code:{type:String,required:!0},size:{type:String,default:"500",validator:t=>Object.keys(o.ICON_SIZE_MODIFIERS).includes(t)},imgClass:{type:[String,Object,Array],default:""},ariaLabel:{type:String,default:null},showSkeleton:{type:Boolean,default:!0}},data(){return{emojiData:null,imgLoading:!1}},computed:{emojiDataValid(){return!!this.emojiData},emojiSrc(){var t;return this.emojiDataValid?(t=this.emojiData)!=null&&t.custom?i.customEmojiAssetUrl+this.emojiData.key+this.emojiData.extension:["100","200"].includes(this.size)?i.emojiImageUrlSmall+this.emojiData.key+i.emojiFileExtensionSmall:i.emojiImageUrlLarge+this.emojiData.key+i.emojiFileExtensionLarge:"invalid"},emojiAlt(){if(this.emojiDataValid)return this.emojiData.unicode_output?i.stringToUnicode(this.emojiData.unicode_output):this.emojiData.name},emojiLabel(){return this.emojiDataValid?this.ariaLabel?this.ariaLabel:this.emojiData.name:"Invalid Emoji"},emojiSize(){return o.ICON_SIZE_MODIFIERS[this.size]}},watch:{code:{handler:function(){this.getEmojiData()},immediate:!0},emojiSrc:{handler:async function(){this.imgLoading=!0},immediate:!0}},methods:{getEmojiData(){this.emojiData=i.codeToEmojiData(this.code)},imageLoaded(){this.imgLoading=!1},imageErrored(){this.imgLoading=!1}}};var m=function(){var e=this,a=e._self._c;return a("span",{class:["d-emoji d-icon",e.emojiSize]},[a("dt-skeleton",{directives:[{name:"show",rawName:"v-show",value:e.imgLoading&&e.showSkeleton,expression:"imgLoading && showSkeleton"}],class:["d-icon",e.emojiSize],attrs:{offset:0,"shape-option":{shape:"circle",size:"100%"}}}),a("img",{directives:[{name:"show",rawName:"v-show",value:!e.imgLoading,expression:"!imgLoading"}],ref:"emojiImg",class:["d-icon",e.emojiSize,e.imgClass],attrs:{"aria-label":e.emojiLabel,alt:e.emojiAlt,title:e.emojiLabel,src:e.emojiSrc},on:{load:e.imageLoaded,error:e.imageErrored}})],1)},l=[],d=r.n(n,m,l);const u=d.exports;exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("../../common/emoji/index.cjs"),r=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),n=require("../skeleton/skeleton.cjs"),o=require("../icon/icon-constants.cjs"),s={name:"DtEmoji",components:{DtSkeleton:n.default},props:{code:{type:String,required:!0},size:{type:String,default:"500",validator:t=>Object.keys(o.ICON_SIZE_MODIFIERS).includes(t)},imgClass:{type:[String,Object,Array],default:""},ariaLabel:{type:String,default:null},showSkeleton:{type:Boolean,default:!0}},data(){return{emojiData:null,imgLoading:!1}},computed:{emojiDataValid(){return!!this.emojiData},emojiSrc(){var t;return this.emojiDataValid?(t=this.emojiData)!=null&&t.custom?this.emojiData.image:["100","200"].includes(this.size)?i.emojiImageUrlSmall+this.emojiData.key+i.emojiFileExtensionSmall:i.emojiImageUrlLarge+this.emojiData.key+i.emojiFileExtensionLarge:"invalid"},emojiAlt(){if(this.emojiDataValid)return this.emojiData.unicode_output?i.stringToUnicode(this.emojiData.unicode_output):this.emojiData.name},emojiLabel(){return this.emojiDataValid?this.ariaLabel?this.ariaLabel:this.emojiData.name:"Invalid Emoji"},emojiSize(){return o.ICON_SIZE_MODIFIERS[this.size]}},watch:{code:{handler:function(){this.getEmojiData()},immediate:!0},emojiSrc:{handler:async function(){this.imgLoading=!0},immediate:!0}},methods:{getEmojiData(){this.emojiData=i.codeToEmojiData(this.code)},imageLoaded(){this.imgLoading=!1},imageErrored(){this.imgLoading=!1}}};var m=function(){var e=this,a=e._self._c;return a("span",{class:["d-emoji d-icon",e.emojiSize]},[a("dt-skeleton",{directives:[{name:"show",rawName:"v-show",value:e.imgLoading&&e.showSkeleton,expression:"imgLoading && showSkeleton"}],class:["d-icon",e.emojiSize],attrs:{offset:0,"shape-option":{shape:"circle",size:"100%"}}}),a("img",{directives:[{name:"show",rawName:"v-show",value:!e.imgLoading,expression:"!imgLoading"}],ref:"emojiImg",class:["d-icon",e.emojiSize,e.imgClass],attrs:{"aria-label":e.emojiLabel,alt:e.emojiAlt,title:e.emojiLabel,src:e.emojiSrc},on:{load:e.imageLoaded,error:e.imageErrored}})],1)},l=[],d=r.n(s,m,l);const u=d.exports;exports.default=u;
 //# sourceMappingURL=emoji.cjs.map

package/dist/vue2/lib/emoji/emoji.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"emoji.cjs","sources":["../../../components/emoji/emoji.vue"],"sourcesContent":["<template>\n  <span :class=\"['d-emoji d-icon', emojiSize]\">\n    <dt-skeleton\n      v-show=\"imgLoading && showSkeleton\"\n      :offset=\"0\"\n      :class=\"['d-icon', emojiSize]\"\n      :shape-option=\"{ shape: 'circle', size: '100%' }\"\n    />\n    <img\n      v-show=\"!imgLoading\"\n      ref=\"emojiImg\"\n      :class=\"['d-icon', emojiSize, imgClass]\"\n      :aria-label=\"emojiLabel\"\n      :alt=\"emojiAlt\"\n      :title=\"emojiLabel\"\n      :src=\"emojiSrc\"\n      @load=\"imageLoaded\"\n      @error=\"imageErrored\"\n    >\n  </span>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport {\n  codeToEmojiData,\n  stringToUnicode,\n  emojiImageUrlSmall,\n  emojiFileExtensionSmall,\n  emojiImageUrlLarge,\n  emojiFileExtensionLarge,\n  customEmojiAssetUrl,\n} from '@/common/emoji';\nimport { DtSkeleton } from '@/components/skeleton';\n\n/**\n * Renders an emoji from a shortcode such as :smile: or unicode character such as 😄\n * @see https://dialtone.dialpad.com/components/emoji.html\n */\nexport default {\n  name: 'DtEmoji',\n\n  components: {\n    DtSkeleton,\n  },\n\n  props: {\n    /**\n     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.\n     * <a class=\"d-link\" href=\"https://emojipedia.org/joypixels/\" target=\"_blank\">JoyPixels</a>\n     * for all supported shortcode/unicode or the docs for setting up custom emojis.\n     */\n    code: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The size of the emoji. Can be any of the icon size utility classes from\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/icon.html\" target=\"_blank\"> Dialpad Icon Size</a>\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n\n    /**\n     * Additional class name for the emoji img element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    imgClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n\n     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will\n     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the\n     * getEmojiData() function\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Shows a skeleton loader while the emoji asset is loading.\n     * @values true, false\n     */\n    showSkeleton: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  data () {\n    return {\n      emojiData: null,\n      imgLoading: false,\n    };\n  },\n\n  computed: {\n    emojiDataValid () {\n      return !!this.emojiData;\n    },\n\n    emojiSrc () {\n      if (!this.emojiDataValid) { return 'invalid'; }\n\n      // custom emoji\n      if (this.emojiData?.custom) {\n        return customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;\n      }\n\n      if (['100', '200'].includes(this.size)) {\n        return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;\n      } else {\n        return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;\n      }\n    },\n\n    emojiAlt () {\n      if (!this.emojiDataValid) { return undefined; }\n      return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;\n    },\n\n    emojiLabel () {\n      if (!this.emojiDataValid) { return 'Invalid Emoji'; }\n      return this.ariaLabel ? this.ariaLabel : this.emojiData.name;\n    },\n\n    emojiSize () {\n      return ICON_SIZE_MODIFIERS[this.size];\n    },\n  },\n\n  watch: {\n    code: {\n      handler: function () {\n        this.getEmojiData();\n      },\n\n      immediate: true,\n    },\n\n    emojiSrc: {\n      handler: async function () {\n        this.imgLoading = true;\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    getEmojiData () {\n      this.emojiData = codeToEmojiData(this.code);\n    },\n\n    imageLoaded () {\n      this.imgLoading = false;\n    },\n\n    imageErrored () {\n      this.imgLoading = false;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtSkeleton","ICON_SIZE_MODIFIERS","_a","customEmojiAssetUrl","emojiImageUrlSmall","emojiFileExtensionSmall","emojiImageUrlLarge","emojiFileExtensionLarge","stringToUnicode","codeToEmojiData"],"mappings":"kSAuCAA,EAAA,CACA,KAAA,UAEA,WAAA,CACA,WAAAC,EAAAA,OACA,EAEA,MAAA,CAMA,KAAA,CACA,KAAA,OACA,SAAA,EACA,EAOA,KAAA,CACA,KAAA,OACA,QAAA,MACA,UAAA,GAAA,OAAA,KAAAC,qBAAA,EAAA,SAAA,CAAA,CACA,EAOA,SAAA,CACA,KAAA,CAAA,OAAA,OAAA,KAAA,EACA,QAAA,EACA,EAQA,UAAA,CACA,KAAA,OACA,QAAA,IACA,EAMA,aAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,UAAA,KACA,WAAA,EACA,CACA,EAEA,SAAA,CACA,gBAAA,CACA,MAAA,CAAA,CAAA,KAAA,SACA,EAEA,UAAA,OACA,OAAA,KAAA,gBAGAC,EAAA,KAAA,YAAA,MAAAA,EAAA,OACAC,EAAAA,oBAAA,KAAA,UAAA,IAAA,KAAA,UAAA,UAGA,CAAA,MAAA,KAAA,EAAA,SAAA,KAAA,IAAA,EACAC,qBAAA,KAAA,UAAA,IAAAC,EAAAA,wBAEAC,qBAAA,KAAA,UAAA,IAAAC,EAAAA,wBAVA,SAYA,EAEA,UAAA,CACA,GAAA,KAAA,eACA,OAAA,KAAA,UAAA,eAAAC,kBAAA,KAAA,UAAA,cAAA,EAAA,KAAA,UAAA,IACA,EAEA,YAAA,CACA,OAAA,KAAA,eACA,KAAA,UAAA,KAAA,UAAA,KAAA,UAAA,KADA,eAEA,EAEA,WAAA,CACA,OAAAP,EAAAA,oBAAA,KAAA,IAAA,CACA,CACA,EAEA,MAAA,CACA,KAAA,CACA,QAAA,UAAA,CACA,KAAA,aAAA,CACA,EAEA,UAAA,EACA,EAEA,SAAA,CACA,QAAA,gBAAA,CACA,KAAA,WAAA,EACA,EAEA,UAAA,EACA,CACA,EAEA,QAAA,CACA,cAAA,CACA,KAAA,UAAAQ,kBAAA,KAAA,IAAA,CACA,EAEA,aAAA,CACA,KAAA,WAAA,EACA,EAEA,cAAA,CACA,KAAA,WAAA,EACA,CACA,CACA"}
+{"version":3,"file":"emoji.cjs","sources":["../../../components/emoji/emoji.vue"],"sourcesContent":["<template>\n  <span :class=\"['d-emoji d-icon', emojiSize]\">\n    <dt-skeleton\n      v-show=\"imgLoading && showSkeleton\"\n      :offset=\"0\"\n      :class=\"['d-icon', emojiSize]\"\n      :shape-option=\"{ shape: 'circle', size: '100%' }\"\n    />\n    <img\n      v-show=\"!imgLoading\"\n      ref=\"emojiImg\"\n      :class=\"['d-icon', emojiSize, imgClass]\"\n      :aria-label=\"emojiLabel\"\n      :alt=\"emojiAlt\"\n      :title=\"emojiLabel\"\n      :src=\"emojiSrc\"\n      @load=\"imageLoaded\"\n      @error=\"imageErrored\"\n    >\n  </span>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport {\n  codeToEmojiData,\n  stringToUnicode,\n  emojiImageUrlSmall,\n  emojiFileExtensionSmall,\n  emojiImageUrlLarge,\n  emojiFileExtensionLarge,\n  customEmojiAssetUrl,\n} from '@/common/emoji';\nimport { DtSkeleton } from '@/components/skeleton';\n\n/**\n * Renders an emoji from a shortcode such as :smile: or unicode character such as 😄\n * @see https://dialtone.dialpad.com/components/emoji.html\n */\nexport default {\n  name: 'DtEmoji',\n\n  components: {\n    DtSkeleton,\n  },\n\n  props: {\n    /**\n     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.\n     * <a class=\"d-link\" href=\"https://emojipedia.org/joypixels/\" target=\"_blank\">JoyPixels</a>\n     * for all supported shortcode/unicode or the docs for setting up custom emojis.\n     */\n    code: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The size of the emoji. Can be any of the icon size utility classes from\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/icon.html\" target=\"_blank\"> Dialpad Icon Size</a>\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n\n    /**\n     * Additional class name for the emoji img element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    imgClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n\n     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will\n     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the\n     * getEmojiData() function\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Shows a skeleton loader while the emoji asset is loading.\n     * @values true, false\n     */\n    showSkeleton: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  data () {\n    return {\n      emojiData: null,\n      imgLoading: false,\n    };\n  },\n\n  computed: {\n    emojiDataValid () {\n      return !!this.emojiData;\n    },\n\n    emojiSrc () {\n      if (!this.emojiDataValid) { return 'invalid'; }\n\n      // custom emoji\n      if (this.emojiData?.custom) {\n        return this.emojiData.image;\n      }\n\n      if (['100', '200'].includes(this.size)) {\n        return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;\n      } else {\n        return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;\n      }\n    },\n\n    emojiAlt () {\n      if (!this.emojiDataValid) { return undefined; }\n      return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;\n    },\n\n    emojiLabel () {\n      if (!this.emojiDataValid) { return 'Invalid Emoji'; }\n      return this.ariaLabel ? this.ariaLabel : this.emojiData.name;\n    },\n\n    emojiSize () {\n      return ICON_SIZE_MODIFIERS[this.size];\n    },\n  },\n\n  watch: {\n    code: {\n      handler: function () {\n        this.getEmojiData();\n      },\n\n      immediate: true,\n    },\n\n    emojiSrc: {\n      handler: async function () {\n        this.imgLoading = true;\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    getEmojiData () {\n      this.emojiData = codeToEmojiData(this.code);\n    },\n\n    imageLoaded () {\n      this.imgLoading = false;\n    },\n\n    imageErrored () {\n      this.imgLoading = false;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtSkeleton","ICON_SIZE_MODIFIERS","_a","emojiImageUrlSmall","emojiFileExtensionSmall","emojiImageUrlLarge","emojiFileExtensionLarge","stringToUnicode","codeToEmojiData"],"mappings":"kSAuCAA,EAAA,CACA,KAAA,UAEA,WAAA,CACA,WAAAC,EAAAA,OACA,EAEA,MAAA,CAMA,KAAA,CACA,KAAA,OACA,SAAA,EACA,EAOA,KAAA,CACA,KAAA,OACA,QAAA,MACA,UAAA,GAAA,OAAA,KAAAC,qBAAA,EAAA,SAAA,CAAA,CACA,EAOA,SAAA,CACA,KAAA,CAAA,OAAA,OAAA,KAAA,EACA,QAAA,EACA,EAQA,UAAA,CACA,KAAA,OACA,QAAA,IACA,EAMA,aAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,UAAA,KACA,WAAA,EACA,CACA,EAEA,SAAA,CACA,gBAAA,CACA,MAAA,CAAA,CAAA,KAAA,SACA,EAEA,UAAA,OACA,OAAA,KAAA,gBAGAC,EAAA,KAAA,YAAA,MAAAA,EAAA,OACA,KAAA,UAAA,MAGA,CAAA,MAAA,KAAA,EAAA,SAAA,KAAA,IAAA,EACAC,qBAAA,KAAA,UAAA,IAAAC,EAAAA,wBAEAC,qBAAA,KAAA,UAAA,IAAAC,EAAAA,wBAVA,SAYA,EAEA,UAAA,CACA,GAAA,KAAA,eACA,OAAA,KAAA,UAAA,eAAAC,kBAAA,KAAA,UAAA,cAAA,EAAA,KAAA,UAAA,IACA,EAEA,YAAA,CACA,OAAA,KAAA,eACA,KAAA,UAAA,KAAA,UAAA,KAAA,UAAA,KADA,eAEA,EAEA,WAAA,CACA,OAAAN,EAAAA,oBAAA,KAAA,IAAA,CACA,CACA,EAEA,MAAA,CACA,KAAA,CACA,QAAA,UAAA,CACA,KAAA,aAAA,CACA,EAEA,UAAA,EACA,EAEA,SAAA,CACA,QAAA,gBAAA,CACA,KAAA,WAAA,EACA,EAEA,UAAA,EACA,CACA,EAEA,QAAA,CACA,cAAA,CACA,KAAA,UAAAO,kBAAA,KAAA,IAAA,CACA,EAEA,aAAA,CACA,KAAA,WAAA,EACA,EAEA,cAAA,CACA,KAAA,WAAA,EACA,CACA,CACA"}

package/dist/vue2/lib/emoji/emoji.js

@@ -1,11 +1,11 @@
-import { codeToEmojiData as o, stringToUnicode as r, customEmojiAssetUrl as m, emojiImageUrlSmall as s, emojiFileExtensionSmall as n, emojiImageUrlLarge as l, emojiFileExtensionLarge as d } from "../../common/emoji/index.js";
-import { n as c } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import j from "../skeleton/skeleton.js";
-import { ICON_SIZE_MODIFIERS as a } from "../icon/icon-constants.js";
-const u = {
+import { codeToEmojiData as o, stringToUnicode as r, emojiImageUrlSmall as m, emojiFileExtensionSmall as s, emojiImageUrlLarge as n, emojiFileExtensionLarge as l } from "../../common/emoji/index.js";
+import { n as d } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import c from "../skeleton/skeleton.js";
+import { ICON_SIZE_MODIFIERS as t } from "../icon/icon-constants.js";
+const j = {
   name: "DtEmoji",
   components: {
-    DtSkeleton: j
+    DtSkeleton: c
   },
   props: {
     /**
@@ -25,7 +25,7 @@ const u = {
     size: {
       type: String,
       default: "500",
-      validator: (i) => Object.keys(a).includes(i)
+      validator: (i) => Object.keys(t).includes(i)
     },
     /**
      * Additional class name for the emoji img element.
@@ -67,7 +67,7 @@ const u = {
     },
     emojiSrc() {
       var i;
-      return this.emojiDataValid ? (i = this.emojiData) != null && i.custom ? m + this.emojiData.key + this.emojiData.extension : ["100", "200"].includes(this.size) ? s + this.emojiData.key + n : l + this.emojiData.key + d : "invalid";
+      return this.emojiDataValid ? (i = this.emojiData) != null && i.custom ? this.emojiData.image : ["100", "200"].includes(this.size) ? m + this.emojiData.key + s : n + this.emojiData.key + l : "invalid";
     },
     emojiAlt() {
       if (this.emojiDataValid)
@@ -77,7 +77,7 @@ const u = {
       return this.emojiDataValid ? this.ariaLabel ? this.ariaLabel : this.emojiData.name : "Invalid Emoji";
     },
     emojiSize() {
-      return a[this.size];
+      return t[this.size];
     }
   },
   watch: {
@@ -106,16 +106,16 @@ const u = {
     }
   }
 };
-var h = function() {
-  var e = this, t = e._self._c;
-  return t("span", { class: ["d-emoji d-icon", e.emojiSize] }, [t("dt-skeleton", { directives: [{ name: "show", rawName: "v-show", value: e.imgLoading && e.showSkeleton, expression: "imgLoading && showSkeleton" }], class: ["d-icon", e.emojiSize], attrs: { offset: 0, "shape-option": { shape: "circle", size: "100%" } } }), t("img", { directives: [{ name: "show", rawName: "v-show", value: !e.imgLoading, expression: "!imgLoading" }], ref: "emojiImg", class: ["d-icon", e.emojiSize, e.imgClass], attrs: { "aria-label": e.emojiLabel, alt: e.emojiAlt, title: e.emojiLabel, src: e.emojiSrc }, on: { load: e.imageLoaded, error: e.imageErrored } })], 1);
-}, g = [], f = /* @__PURE__ */ c(
+var u = function() {
+  var e = this, a = e._self._c;
+  return a("span", { class: ["d-emoji d-icon", e.emojiSize] }, [a("dt-skeleton", { directives: [{ name: "show", rawName: "v-show", value: e.imgLoading && e.showSkeleton, expression: "imgLoading && showSkeleton" }], class: ["d-icon", e.emojiSize], attrs: { offset: 0, "shape-option": { shape: "circle", size: "100%" } } }), a("img", { directives: [{ name: "show", rawName: "v-show", value: !e.imgLoading, expression: "!imgLoading" }], ref: "emojiImg", class: ["d-icon", e.emojiSize, e.imgClass], attrs: { "aria-label": e.emojiLabel, alt: e.emojiAlt, title: e.emojiLabel, src: e.emojiSrc }, on: { load: e.imageLoaded, error: e.imageErrored } })], 1);
+}, g = [], h = /* @__PURE__ */ d(
+  j,
   u,
-  h,
   g
 );
-const _ = f.exports;
+const L = h.exports;
 export {
-  _ as default
+  L as default
 };
 //# sourceMappingURL=emoji.js.map

package/dist/vue2/lib/emoji/emoji.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji.js","sources":["../../../components/emoji/emoji.vue"],"sourcesContent":["<template>\n  <span :class=\"['d-emoji d-icon', emojiSize]\">\n    <dt-skeleton\n      v-show=\"imgLoading && showSkeleton\"\n      :offset=\"0\"\n      :class=\"['d-icon', emojiSize]\"\n      :shape-option=\"{ shape: 'circle', size: '100%' }\"\n    />\n    <img\n      v-show=\"!imgLoading\"\n      ref=\"emojiImg\"\n      :class=\"['d-icon', emojiSize, imgClass]\"\n      :aria-label=\"emojiLabel\"\n      :alt=\"emojiAlt\"\n      :title=\"emojiLabel\"\n      :src=\"emojiSrc\"\n      @load=\"imageLoaded\"\n      @error=\"imageErrored\"\n    >\n  </span>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport {\n  codeToEmojiData,\n  stringToUnicode,\n  emojiImageUrlSmall,\n  emojiFileExtensionSmall,\n  emojiImageUrlLarge,\n  emojiFileExtensionLarge,\n  customEmojiAssetUrl,\n} from '@/common/emoji';\nimport { DtSkeleton } from '@/components/skeleton';\n\n/**\n * Renders an emoji from a shortcode such as :smile: or unicode character such as 😄\n * @see https://dialtone.dialpad.com/components/emoji.html\n */\nexport default {\n  name: 'DtEmoji',\n\n  components: {\n    DtSkeleton,\n  },\n\n  props: {\n    /**\n     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.\n     * <a class=\"d-link\" href=\"https://emojipedia.org/joypixels/\" target=\"_blank\">JoyPixels</a>\n     * for all supported shortcode/unicode or the docs for setting up custom emojis.\n     */\n    code: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The size of the emoji. Can be any of the icon size utility classes from\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/icon.html\" target=\"_blank\"> Dialpad Icon Size</a>\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n\n    /**\n     * Additional class name for the emoji img element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    imgClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n\n     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will\n     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the\n     * getEmojiData() function\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Shows a skeleton loader while the emoji asset is loading.\n     * @values true, false\n     */\n    showSkeleton: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  data () {\n    return {\n      emojiData: null,\n      imgLoading: false,\n    };\n  },\n\n  computed: {\n    emojiDataValid () {\n      return !!this.emojiData;\n    },\n\n    emojiSrc () {\n      if (!this.emojiDataValid) { return 'invalid'; }\n\n      // custom emoji\n      if (this.emojiData?.custom) {\n        return customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;\n      }\n\n      if (['100', '200'].includes(this.size)) {\n        return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;\n      } else {\n        return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;\n      }\n    },\n\n    emojiAlt () {\n      if (!this.emojiDataValid) { return undefined; }\n      return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;\n    },\n\n    emojiLabel () {\n      if (!this.emojiDataValid) { return 'Invalid Emoji'; }\n      return this.ariaLabel ? this.ariaLabel : this.emojiData.name;\n    },\n\n    emojiSize () {\n      return ICON_SIZE_MODIFIERS[this.size];\n    },\n  },\n\n  watch: {\n    code: {\n      handler: function () {\n        this.getEmojiData();\n      },\n\n      immediate: true,\n    },\n\n    emojiSrc: {\n      handler: async function () {\n        this.imgLoading = true;\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    getEmojiData () {\n      this.emojiData = codeToEmojiData(this.code);\n    },\n\n    imageLoaded () {\n      this.imgLoading = false;\n    },\n\n    imageErrored () {\n      this.imgLoading = false;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtSkeleton","t","ICON_SIZE_MODIFIERS","_a","customEmojiAssetUrl","emojiImageUrlSmall","emojiFileExtensionSmall","emojiImageUrlLarge","emojiFileExtensionLarge","stringToUnicode","codeToEmojiData"],"mappings":";;;;AAuCA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,YAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,KAAAC,CAAA,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;;AACA,aAAA,KAAA,kBAGAE,IAAA,KAAA,cAAA,QAAAA,EAAA,SACAC,IAAA,KAAA,UAAA,MAAA,KAAA,UAAA,YAGA,CAAA,OAAA,KAAA,EAAA,SAAA,KAAA,IAAA,IACAC,IAAA,KAAA,UAAA,MAAAC,IAEAC,IAAA,KAAA,UAAA,MAAAC,IAVA;AAAA,IAYA;AAAA,IAEA,WAAA;AACA,UAAA,KAAA;AACA,eAAA,KAAA,UAAA,iBAAAC,EAAA,KAAA,UAAA,cAAA,IAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,iBACA,KAAA,YAAA,KAAA,YAAA,KAAA,UAAA,OADA;AAAA,IAEA;AAAA,IAEA,YAAA;AACA,aAAAP,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,SAAA,WAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,SAAA,iBAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,eAAA;AACA,WAAA,YAAAQ,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;"}
+{"version":3,"file":"emoji.js","sources":["../../../components/emoji/emoji.vue"],"sourcesContent":["<template>\n  <span :class=\"['d-emoji d-icon', emojiSize]\">\n    <dt-skeleton\n      v-show=\"imgLoading && showSkeleton\"\n      :offset=\"0\"\n      :class=\"['d-icon', emojiSize]\"\n      :shape-option=\"{ shape: 'circle', size: '100%' }\"\n    />\n    <img\n      v-show=\"!imgLoading\"\n      ref=\"emojiImg\"\n      :class=\"['d-icon', emojiSize, imgClass]\"\n      :aria-label=\"emojiLabel\"\n      :alt=\"emojiAlt\"\n      :title=\"emojiLabel\"\n      :src=\"emojiSrc\"\n      @load=\"imageLoaded\"\n      @error=\"imageErrored\"\n    >\n  </span>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport {\n  codeToEmojiData,\n  stringToUnicode,\n  emojiImageUrlSmall,\n  emojiFileExtensionSmall,\n  emojiImageUrlLarge,\n  emojiFileExtensionLarge,\n  customEmojiAssetUrl,\n} from '@/common/emoji';\nimport { DtSkeleton } from '@/components/skeleton';\n\n/**\n * Renders an emoji from a shortcode such as :smile: or unicode character such as 😄\n * @see https://dialtone.dialpad.com/components/emoji.html\n */\nexport default {\n  name: 'DtEmoji',\n\n  components: {\n    DtSkeleton,\n  },\n\n  props: {\n    /**\n     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.\n     * <a class=\"d-link\" href=\"https://emojipedia.org/joypixels/\" target=\"_blank\">JoyPixels</a>\n     * for all supported shortcode/unicode or the docs for setting up custom emojis.\n     */\n    code: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The size of the emoji. Can be any of the icon size utility classes from\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/icon.html\" target=\"_blank\"> Dialpad Icon Size</a>\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n\n    /**\n     * Additional class name for the emoji img element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    imgClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n\n     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will\n     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the\n     * getEmojiData() function\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Shows a skeleton loader while the emoji asset is loading.\n     * @values true, false\n     */\n    showSkeleton: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  data () {\n    return {\n      emojiData: null,\n      imgLoading: false,\n    };\n  },\n\n  computed: {\n    emojiDataValid () {\n      return !!this.emojiData;\n    },\n\n    emojiSrc () {\n      if (!this.emojiDataValid) { return 'invalid'; }\n\n      // custom emoji\n      if (this.emojiData?.custom) {\n        return this.emojiData.image;\n      }\n\n      if (['100', '200'].includes(this.size)) {\n        return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;\n      } else {\n        return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;\n      }\n    },\n\n    emojiAlt () {\n      if (!this.emojiDataValid) { return undefined; }\n      return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;\n    },\n\n    emojiLabel () {\n      if (!this.emojiDataValid) { return 'Invalid Emoji'; }\n      return this.ariaLabel ? this.ariaLabel : this.emojiData.name;\n    },\n\n    emojiSize () {\n      return ICON_SIZE_MODIFIERS[this.size];\n    },\n  },\n\n  watch: {\n    code: {\n      handler: function () {\n        this.getEmojiData();\n      },\n\n      immediate: true,\n    },\n\n    emojiSrc: {\n      handler: async function () {\n        this.imgLoading = true;\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    getEmojiData () {\n      this.emojiData = codeToEmojiData(this.code);\n    },\n\n    imageLoaded () {\n      this.imgLoading = false;\n    },\n\n    imageErrored () {\n      this.imgLoading = false;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtSkeleton","t","ICON_SIZE_MODIFIERS","_a","emojiImageUrlSmall","emojiFileExtensionSmall","emojiImageUrlLarge","emojiFileExtensionLarge","stringToUnicode","codeToEmojiData"],"mappings":";;;;AAuCA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,YAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,KAAAC,CAAA,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;;AACA,aAAA,KAAA,kBAGAE,IAAA,KAAA,cAAA,QAAAA,EAAA,SACA,KAAA,UAAA,QAGA,CAAA,OAAA,KAAA,EAAA,SAAA,KAAA,IAAA,IACAC,IAAA,KAAA,UAAA,MAAAC,IAEAC,IAAA,KAAA,UAAA,MAAAC,IAVA;AAAA,IAYA;AAAA,IAEA,WAAA;AACA,UAAA,KAAA;AACA,eAAA,KAAA,UAAA,iBAAAC,EAAA,KAAA,UAAA,cAAA,IAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,iBACA,KAAA,YAAA,KAAA,YAAA,KAAA,UAAA,OADA;AAAA,IAEA;AAAA,IAEA,YAAA;AACA,aAAAN,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,SAAA,WAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,SAAA,iBAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,eAAA;AACA,WAAA,YAAAO,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("./last-active-nodes.cjs"),r=require("@tiptap/core"),a=require("../../node_modules/@tiptap/vue-2.cjs"),s=require("@dialpad/dialtone-icons/vue2"),u=require("../../localization/index.cjs"),d=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),p=require("../button/button.cjs"),h=require("../item-layout/item-layout.cjs"),f=require("./message-input-topbar.cjs"),g=require("./message-input-link.cjs"),l=require("../editor/editor-constants.cjs"),_=require("../stack/stack.cjs"),b=require("../tooltip/tooltip.cjs"),k=require("../rich-text-editor/rich-text-editor.cjs"),T=require("../popover/popover.cjs"),v=require("../input/input.cjs"),L=require("../emoji-picker/emoji-picker.cjs"),c=require("../rich-text-editor/rich-text-editor-constants.cjs"),S={name:"MeetingPill",components:{NodeViewWrapper:a.NodeViewWrapper,DtItemLayout:h.default,DtIconClose:s.DtIconClose,DtButton:p.default,DtIconVideo:s.DtIconVideo},props:a.nodeViewProps,emits:["meeting-pill-close"],data(){return{i18n:new u.DialtoneLocalization}},computed:{closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},methods:{close(t){var i,n,o;const e=(o=(n=(i=this.editor)==null?void 0:i.storage)==null?void 0:n.meetingPill)==null?void 0:o.onClose;e&&typeof e=="function"&&e(t)}}};var I=function(){var e=this,i=e._self._c;return i("node-view-wrapper",{staticClass:"d-recipe-message-input-meeting-pill"},[i("dt-item-layout",{staticClass:"d-recipe-message-input-meeting-pill__layout",attrs:{unstyled:""},scopedSlots:e._u([{key:"left",fn:function(){return[i("div",{staticClass:"d-recipe-message-input-meeting-pill__icon"},[i("dt-icon-video",{attrs:{size:"400"}})],1)]},proxy:!0},{key:"right",fn:function(){return[i("div",{staticClass:"d-recipe-message-input-meeting-pill__close"},[i("dt-button",{attrs:{circle:"",importance:"clear",size:"xs","aria-label":e.closeButtonTitle,title:e.closeButtonTitle},on:{click:e.close},scopedSlots:e._u([{key:"icon",fn:function(){return[i("dt-icon-close",{attrs:{size:"300"}})]},proxy:!0}])})],1)]},proxy:!0}])},[e._v(" "+e._s(e.node.attrs.text)+" ")])],1)},x=[],y=d.n(S,I,x);const O=y.exports,B=r.Node.create({name:"meetingPill",atom:!0,group:"inline",inline:!0,addOptions(){return{onClose:()=>{}}},addStorage(){return{onClose:this.options.onClose}},addNodeView(){return a.VueNodeViewRenderer(O)},addAttributes(){return{text:{default:'Please pass in "text" attribute'}}},parseHTML(){return[{tag:"meeting-pill"}]},renderText(){return"/dpm"},renderHTML({HTMLAttributes:t}){return["meeting-pill",r.mergeAttributes(t)]}}),C={name:"DtRecipeMessageInput",components:{DtButton:p.default,DtEmojiPicker:L.default,DtInput:v.default,DtPopover:T.default,DtRecipeMessageInputTopbar:f.default,DtRecipeMessageInputLink:g.default,DtRichTextEditor:k.default,DtTooltip:b.default,DtStack:_.default,DtIconImage:s.DtIconImage,DtIconVerySatisfied:s.DtIconVerySatisfied,DtIconSatisfied:s.DtIconSatisfied,DtIconSend:s.DtIconSend},inheritAttrs:!1,props:{richText:{type:Boolean,default:!0},value:{type:[Object,String],default:""},editable:{type:Boolean,default:!0},inputAriaLabel:{type:String,required:!0,default:""},preventTyping:{type:Boolean,default:!1},inputClass:{type:String,default:""},autoFocus:{type:[Boolean,String,Number],default:!1,validator(t){return typeof t=="string"?c.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(t):!0}},outputFormat:{type:String,default:"json",validator(t){return c.RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(t)}},placeholder:{type:String,default:""},disableSend:{type:Boolean,default:!1},maxHeight:{type:String,default:"unset"},showEmojiPicker:{type:Boolean,default:!0},emojiPickerProps:{type:Object,default:()=>({})},showCharacterLimit:{type:[Boolean,Object],default:()=>({count:1500,warning:500,message:""})},showImagePicker:{type:[Boolean,Object],default:()=>({})},showSend:{type:[Boolean,Object],default:()=>({})},showCancel:{type:[Boolean,Object],default:()=>({})},mentionSuggestion:{type:Object,default:null},channelSuggestion:{type:Object,default:null},slashCommandSuggestion:{type:Object,default:null},boldButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + B"})},italicButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + I"})},strikeButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + Shift + S"})},linkButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + K",linkPlaceholder:"e.g. https://www.dialpad.com"})},bulletListButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + Shift + 8"})},orderedListButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + Shift + 7"})},blockQuoteButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + Shift + B"})},codeButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + E"})},codeBlockButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + Alt + C"})}},emits:["submit","select-media","add-media","paste-media","cancel","skin-tone","selected-emoji","selected-command","meeting-pill-close","update:value","text-input","add-emoji"],data(){return{lastActiveNodes:m.default,additionalExtensions:[B.configure({onClose:t=>{this.$emit("meeting-pill-close",t)}})],internalInputValue:this.value,imagePickerFocus:!1,emojiPickerFocus:!1,emojiPickerOpened:!1,isFocused:!1,linkOptions:{class:"d-link d-c-text d-d-inline-block"},linkDialogOpen:!1,selectedText:"",text:"",hideLinkBubbleMenu:!1,i18n:new u.DialtoneLocalization}},computed:{showSendIcon(){return!this.showSend.text},inputLength(){return this.text.length},displayCharacterLimitWarning(){return!!this.showCharacterLimit&&this.showCharacterLimit.count-this.inputLength<=this.showCharacterLimit.warning},characterLimitTooltipEnabled(){return this.showCharacterLimit.message&&this.showCharacterLimit.count-this.inputLength<0},isSendDisabled(){return this.disableSend||this.showCharacterLimit&&this.inputLength>this.showCharacterLimit.count},emojiPickerHovered(){return this.emojiPickerFocus||this.emojiPickerOpened},sendIconSize(){return"300"},sendButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_SEND_BUTTON_ARIA_LABEL")},imagePickerButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_IMAGE_PICKER_BUTTON_ARIA_LABEL")},emojiPickerButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_EMOJI_PICKER_BUTTON_ARIA_LABEL")},cancelButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_CANCEL_BUTTON_ARIA_LABEL")}},watch:{value(t){this.internalInputValue=t},emojiPickerOpened(t){var e;t||(e=this.$refs.richTextEditor)==null||e.focusEditor()}},created(){this.value&&this.outputFormat==="text"?this.internalInputValue=this.value.replace(/\n/g,"<br>"):this.internalInputValue=this.value},methods:{linkDialogOpened(t){var e;this.linkDialogOpen=t,t===!0?this.initLinkDialog():(this.hideLinkBubbleMenu=!1,(e=this.$refs.richTextEditor)==null||e.focusEditor())},handleTopbarClick(t){var n;const e=(n=this.$refs.richTextEditor)==null?void 0:n.editor,i={bold:()=>e==null?void 0:e.chain().focus().toggleBold().run(),italic:()=>e==null?void 0:e.chain().focus().toggleItalic().run(),strike:()=>e==null?void 0:e.chain().focus().toggleStrike().run(),bulletList:()=>e==null?void 0:e.chain().focus().toggleBulletList().run(),orderedList:()=>e==null?void 0:e.chain().focus().toggleOrderedList().run(),blockquote:()=>e==null?void 0:e.chain().focus().toggleBlockquote().run(),code:()=>e==null?void 0:e.chain().focus().toggleCode().run(),codeBlock:()=>e==null?void 0:e.chain().focus().toggleCodeBlock().run()};e&&i[t]&&i[t]()},isSelectionActive(t){var e,i,n,o;return["bulletList","orderedList"].includes(t)?this.lastActiveNodes((i=(e=this.$refs.richTextEditor)==null?void 0:e.editor)==null?void 0:i.state,[{type:"bulletList"},{type:"orderedList"}]).includes(t)&&this.isFocused:((o=(n=this.$refs.richTextEditor)==null?void 0:n.editor)==null?void 0:o.isActive(t))&&this.isFocused},initLinkDialog(){var t,e,i;this.$refs.link.setInitialValues(this.selectedText,(i=(e=(t=this.$refs.richTextEditor)==null?void 0:t.editor)==null?void 0:e.getAttributes("link"))==null?void 0:i.href),this.hideLinkBubbleMenu=!0,this.linkDialogOpen=!0},removeLink(){var t;(t=this.$refs.richTextEditor)==null||t.removeLink(),this.linkDialogOpen=!1},setLink(t,e){this.$refs.richTextEditor.setLink(e,t,this.linkOptions,l.EDITOR_SUPPORTED_LINK_PROTOCOLS,l.EDITOR_DEFAULT_LINK_PREFIX),this.linkDialogOpen=!1},onMousedown(t){this.$refs.richTextEditor.$el.querySelector(".tiptap").contains(t.target)||(t.preventDefault(),this.$refs.richTextEditor.focusEditor())},onDrop(t){const e=t.dataTransfer,i=Array.from(e.files);this.$emit("add-media",i)},onPaste(t){if(t.clipboardData.files.length){t.stopPropagation(),t.preventDefault();const e=[...t.clipboardData.files];this.$emit("paste-media",e)}},onSkinTone(t){this.$emit("skin-tone",t)},onSelectEmoji(t,e){t&&(t.shift_key||e(),this.$refs.richTextEditor.editor.commands.insertContent({type:"emoji",attrs:{code:t.shortname,image:t.image,name:t.name}}),this.$emit("selected-emoji",t))},onSelectImage(){this.$refs.messageInputImageUpload.$refs.input.click()},onImageUpload(){this.$emit("select-media",this.$refs.messageInputImageUpload.$refs.input.files)},toggleEmojiPicker(){this.emojiPickerOpened=!this.emojiPickerOpened},onSend(){this.isSendDisabled||this.$emit("submit",this.internalInputValue)},onCancel(){this.$emit("cancel")},onInput(t){this.$emit("update:value",t)},onTextInput(t){this.text=t,this.$emit("text-input",t)}}};var E=function(){var e=this,i=e._self._c;return i("div",{staticClass:"d-recipe-message-input",attrs:{"data-qa":"dt-recipe-message-input",role:"presentation"},on:{dragover:function(n){n.preventDefault()},drop:function(n){return n.preventDefault(),e.onDrop.apply(null,arguments)},paste:e.onPaste,mousedown:e.onMousedown}},[e._t("top"),e.richText?i("dt-recipe-message-input-topbar",{key:e.selectedText,attrs:{"bold-button-options":e.boldButtonOptions,"italic-button-options":e.italicButtonOptions,"strike-button-options":e.strikeButtonOptions,"bullet-list-button-options":e.bulletListButtonOptions,"ordered-list-button-options":e.orderedListButtonOptions,"block-quote-button-options":e.blockQuoteButtonOptions,"code-button-options":e.codeButtonOptions,"code-block-button-options":e.codeBlockButtonOptions,"is-selection-active":e.isSelectionActive},on:{click:e.handleTopbarClick},scopedSlots:e._u([{key:"link",fn:function(){return[i("dt-recipe-message-input-link",{ref:"link",attrs:{open:e.linkDialogOpen,"link-button-options":e.linkButtonOptions,"is-selection-active":e.isSelectionActive},on:{opened:e.linkDialogOpened,"set-link":e.setLink,"remove-link":e.removeLink}})]},proxy:!0}],null,!1,1527282285)}):e._e(),i("div",{directives:[{name:"dt-scrollbar",rawName:"v-dt-scrollbar"}],staticClass:"d-recipe-message-input__editor-wrapper",style:{"max-height":e.maxHeight}},[i("dt-rich-text-editor",e._g(e._b({ref:"richTextEditor",attrs:{editable:e.editable,"input-aria-label":e.inputAriaLabel,"input-class":e.inputClass,"output-format":e.outputFormat,"auto-focus":e.autoFocus,link:e.richText,placeholder:e.placeholder,"prevent-typing":e.preventTyping,"mention-suggestion":e.mentionSuggestion,"channel-suggestion":e.channelSuggestion,"slash-command-suggestion":e.slashCommandSuggestion,"paste-rich-text":e.richText,"allow-blockquote":e.richText,"allow-bold":e.richText,"allow-bullet-list":e.richText,"allow-code":e.richText,"allow-codeblock":e.richText,"allow-italic":e.richText,"allow-strike":e.richText,"allow-underline":e.richText,"additional-extensions":e.additionalExtensions,"hide-link-bubble-menu":e.hideLinkBubbleMenu},on:{input:e.onInput,"text-input":e.onTextInput,enter:e.onSend,selected:function(n){e.selectedText=n},"selected-command":function(n){return e.$emit("selected-command",n)},"edit-link":e.initLinkDialog,focus:function(n){e.isFocused=!0},blur:function(n){e.isFocused=!1}},model:{value:e.internalInputValue,callback:function(n){e.internalInputValue=n},expression:"internalInputValue"}},"dt-rich-text-editor",e.$attrs,!1),e.$listeners))],1),e._t("middle"),i("section",{staticClass:"d-recipe-message-input__bottom-section"},[i("div",{staticClass:"d-recipe-message-input__bottom-section-left"},[i("dt-stack",{attrs:{direction:"row",gap:"200"}},[e.showImagePicker?i("dt-button",{directives:[{name:"dt-tooltip",rawName:"v-dt-tooltip:top-start",value:e.imagePickerButtonLabel,expression:"imagePickerButtonLabel",arg:"top-start"}],staticClass:"d-recipe-message-input__button",attrs:{"data-qa":"dt-recipe-message-input-image-btn",size:"sm",kind:"muted",importance:"clear","aria-label":e.imagePickerButtonLabel},on:{click:e.onSelectImage,mouseenter:function(n){e.imagePickerFocus=!0},mouseleave:function(n){e.imagePickerFocus=!1},focus:function(n){e.imagePickerFocus=!0},blur:function(n){e.imagePickerFocus=!1}},scopedSlots:e._u([{key:"icon",fn:function(){return[i("dt-icon-image",{attrs:{size:"300"}})]},proxy:!0}],null,!1,4195307205)}):e._e(),i("dt-input",{ref:"messageInputImageUpload",staticClass:"d-recipe-message-input__image-input",attrs:{"data-qa":"dt-recipe-message-input-image-input",accept:"image/*, video/*",type:"file",multiple:"",hidden:""},on:{input:e.onImageUpload}}),e.showEmojiPicker?i("dt-popover",{attrs:{"open.sync":"emojiPickerOpened","data-qa":"dt-recipe-message-input-emoji-picker-popover","initial-focus-element":"#searchInput",padding:"none"},scopedSlots:e._u([{key:"anchor",fn:function({attrs:n}){return[i("dt-button",e._b({directives:[{name:"dt-tooltip",rawName:"v-dt-tooltip",value:e.emojiPickerButtonLabel,expression:"emojiPickerButtonLabel"}],staticClass:"d-recipe-message-input__button",attrs:{"data-qa":"dt-recipe-message-input-emoji-picker-btn",size:"sm",kind:"muted",importance:"clear","aria-label":e.emojiPickerButtonLabel},on:{click:e.toggleEmojiPicker,mouseenter:function(o){e.emojiPickerFocus=!0},mouseleave:function(o){e.emojiPickerFocus=!1},focus:function(o){e.emojiPickerFocus=!0},blur:function(o){e.emojiPickerFocus=!1}},scopedSlots:e._u([{key:"icon",fn:function(){return[e.emojiPickerHovered?i("dt-icon-very-satisfied",{attrs:{size:"300"}}):i("dt-icon-satisfied",{attrs:{size:"300"}})]},proxy:!0}],null,!0)},"dt-button",n,!1))]}},{key:"content",fn:function({close:n}){return[i("dt-emoji-picker",e._b({on:{"add-emoji":function(o){return e.$emit("add-emoji")},"skin-tone":e.onSkinTone,"selected-emoji":o=>e.onSelectEmoji(o,n)}},"dt-emoji-picker",e.emojiPickerProps,!1))]}}],null,!1,2292511006)}):e._e(),e._t("emojiGiphyPicker"),e._t("customActionIcons")],2)],1),i("div",{staticClass:"d-recipe-message-input__bottom-section-right"},[i("dt-stack",{attrs:{direction:"row",gap:"300"}},[i("div",{staticClass:"d-recipe-message-input__sms-count"},[e._t("smsCount")],2),e.showCharacterLimit?i("dt-tooltip",{staticClass:"d-recipe-message-input__remaining-char-tooltip",attrs:{placement:"top-end",enabled:e.characterLimitTooltipEnabled,message:e.showCharacterLimit.message,offset:[10,8]},scopedSlots:e._u([{key:"anchor",fn:function(){return[i("p",{directives:[{name:"show",rawName:"v-show",value:e.displayCharacterLimitWarning,expression:"displayCharacterLimitWarning"}],staticClass:"d-recipe-message-input__remaining-char",attrs:{"data-qa":"dt-recipe-message-input-character-limit"}},[e._v(" "+e._s(e.showCharacterLimit.count-e.inputLength)+" ")])]},proxy:!0}],null,!1,1021505058)}):e._e(),e.showCancel?i("dt-button",{directives:[{name:"dt-tooltip",rawName:"v-dt-tooltip",value:e.cancelButtonLabel,expression:"cancelButtonLabel"}],staticClass:"d-recipe-message-input__button d-recipe-message-input__cancel-button",attrs:{"data-qa":"dt-recipe-message-input-cancel-button",size:"sm",kind:"muted",importance:"clear","aria-label":e.cancelButtonLabel},on:{click:e.onCancel}},[i("p",[e._v(e._s(e.cancelButtonLabel))])]):e._e(),e._t("sendButton",function(){return[e.showSend?i("dt-button",{directives:[{name:"dt-tooltip",rawName:"v-dt-tooltip:top-end",value:e.sendButtonLabel,expression:"sendButtonLabel",arg:"top-end"}],class:["d-recipe-message-input__button d-recipe-message-input__send-button",{"d-recipe-message-input__send-button--disabled":e.isSendDisabled,"d-btn--icon-only":e.showSendIcon}],attrs:{"data-qa":"dt-recipe-message-input-send-btn",size:"sm",kind:"default",importance:"primary","aria-label":e.sendButtonLabel,"aria-disabled":e.isSendDisabled},on:{click:e.onSend},scopedSlots:e._u([e.showSendIcon?{key:"icon",fn:function(){return[e._t("sendIcon",function(){return[i("dt-icon-send",{attrs:{size:e.sendIconSize}})]},{iconSize:e.sendIconSize})]},proxy:!0}:null],null,!0)},[e.showSend.text?[i("p",[e._v(e._s(e.showSend.text))])]:e._e()],2):e._e()]})],2)],1)])],2)},P=[],w=d.n(C,E,P);const D=w.exports;exports.default=D;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("./last-active-nodes.cjs"),r=require("@tiptap/core"),a=require("../../node_modules/@tiptap/vue-2.cjs"),s=require("@dialpad/dialtone-icons/vue2"),u=require("../../localization/index.cjs"),d=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),p=require("../button/button.cjs"),h=require("../item-layout/item-layout.cjs"),f=require("./message-input-topbar.cjs"),g=require("./message-input-link.cjs"),l=require("../editor/editor-constants.cjs"),_=require("../stack/stack.cjs"),b=require("../tooltip/tooltip.cjs"),k=require("../rich-text-editor/rich-text-editor.cjs"),T=require("../popover/popover.cjs"),v=require("../input/input.cjs"),L=require("../emoji-picker/emoji-picker.cjs"),c=require("../rich-text-editor/rich-text-editor-constants.cjs"),S={name:"MeetingPill",components:{NodeViewWrapper:a.NodeViewWrapper,DtItemLayout:h.default,DtIconClose:s.DtIconClose,DtButton:p.default,DtIconVideo:s.DtIconVideo},props:a.nodeViewProps,emits:["meeting-pill-close"],data(){return{i18n:new u.DialtoneLocalization}},computed:{closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},methods:{close(t){var i,n,o;const e=(o=(n=(i=this.editor)==null?void 0:i.storage)==null?void 0:n.meetingPill)==null?void 0:o.onClose;e&&typeof e=="function"&&e(t)}}};var I=function(){var e=this,i=e._self._c;return i("node-view-wrapper",{staticClass:"d-recipe-message-input-meeting-pill"},[i("dt-item-layout",{staticClass:"d-recipe-message-input-meeting-pill__layout",attrs:{unstyled:""},scopedSlots:e._u([{key:"left",fn:function(){return[i("div",{staticClass:"d-recipe-message-input-meeting-pill__icon"},[i("dt-icon-video",{attrs:{size:"400"}})],1)]},proxy:!0},{key:"right",fn:function(){return[i("div",{staticClass:"d-recipe-message-input-meeting-pill__close"},[i("dt-button",{attrs:{circle:"",importance:"clear",size:"xs","aria-label":e.closeButtonTitle,title:e.closeButtonTitle},on:{click:e.close},scopedSlots:e._u([{key:"icon",fn:function(){return[i("dt-icon-close",{attrs:{size:"300"}})]},proxy:!0}])})],1)]},proxy:!0}])},[e._v(" "+e._s(e.node.attrs.text)+" ")])],1)},x=[],y=d.n(S,I,x);const O=y.exports,B=r.Node.create({name:"meetingPill",atom:!0,group:"inline",inline:!0,addOptions(){return{onClose:()=>{}}},addStorage(){return{onClose:this.options.onClose}},addNodeView(){return a.VueNodeViewRenderer(O)},addAttributes(){return{text:{default:'Please pass in "text" attribute'}}},parseHTML(){return[{tag:"meeting-pill"}]},renderText(){return"/dpm"},renderHTML({HTMLAttributes:t}){return["meeting-pill",r.mergeAttributes(t)]}}),C={name:"DtRecipeMessageInput",components:{DtButton:p.default,DtEmojiPicker:L.default,DtInput:v.default,DtPopover:T.default,DtRecipeMessageInputTopbar:f.default,DtRecipeMessageInputLink:g.default,DtRichTextEditor:k.default,DtTooltip:b.default,DtStack:_.default,DtIconImage:s.DtIconImage,DtIconVerySatisfied:s.DtIconVerySatisfied,DtIconSatisfied:s.DtIconSatisfied,DtIconSend:s.DtIconSend},inheritAttrs:!1,props:{richText:{type:Boolean,default:!0},value:{type:[Object,String],default:""},editable:{type:Boolean,default:!0},inputAriaLabel:{type:String,required:!0,default:""},preventTyping:{type:Boolean,default:!1},inputClass:{type:String,default:""},autoFocus:{type:[Boolean,String,Number],default:!1,validator(t){return typeof t=="string"?c.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(t):!0}},outputFormat:{type:String,default:"json",validator(t){return c.RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(t)}},placeholder:{type:String,default:""},disableSend:{type:Boolean,default:!1},maxHeight:{type:String,default:"unset"},showEmojiPicker:{type:Boolean,default:!0},emojiPickerProps:{type:Object,default:()=>({})},showCharacterLimit:{type:[Boolean,Object],default:()=>({count:1500,warning:500,message:""})},showImagePicker:{type:[Boolean,Object],default:()=>({})},showSend:{type:[Boolean,Object],default:()=>({})},showCancel:{type:[Boolean,Object],default:()=>({})},mentionSuggestion:{type:Object,default:null},channelSuggestion:{type:Object,default:null},slashCommandSuggestion:{type:Object,default:null},boldButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + B"})},italicButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + I"})},strikeButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + Shift + S"})},linkButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + K",linkPlaceholder:"e.g. https://www.dialpad.com"})},bulletListButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + Shift + 8"})},orderedListButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + Shift + 7"})},blockQuoteButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + Shift + B"})},codeButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + E"})},codeBlockButtonOptions:{type:Object,default:()=>({keyboardShortcutText:"Mod + Alt + C"})}},emits:["submit","select-media","add-media","paste-media","cancel","skin-tone","selected-emoji","selected-command","meeting-pill-close","update:value","text-input","add-emoji","emoji-scroll-bottom-reached"],data(){return{lastActiveNodes:m.default,additionalExtensions:[B.configure({onClose:t=>{this.$emit("meeting-pill-close",t)}})],internalInputValue:this.value,imagePickerFocus:!1,emojiPickerFocus:!1,emojiPickerOpened:!1,isFocused:!1,linkOptions:{class:"d-link d-c-text d-d-inline-block"},linkDialogOpen:!1,selectedText:"",text:"",hideLinkBubbleMenu:!1,i18n:new u.DialtoneLocalization}},computed:{showSendIcon(){return!this.showSend.text},inputLength(){return this.text.length},displayCharacterLimitWarning(){return!!this.showCharacterLimit&&this.showCharacterLimit.count-this.inputLength<=this.showCharacterLimit.warning},characterLimitTooltipEnabled(){return this.showCharacterLimit.message&&this.showCharacterLimit.count-this.inputLength<0},isSendDisabled(){return this.disableSend||this.showCharacterLimit&&this.inputLength>this.showCharacterLimit.count},emojiPickerHovered(){return this.emojiPickerFocus||this.emojiPickerOpened},sendIconSize(){return"300"},sendButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_SEND_BUTTON_ARIA_LABEL")},imagePickerButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_IMAGE_PICKER_BUTTON_ARIA_LABEL")},emojiPickerButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_EMOJI_PICKER_BUTTON_ARIA_LABEL")},cancelButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_CANCEL_BUTTON_ARIA_LABEL")}},watch:{value(t){this.internalInputValue=t},emojiPickerOpened(t){var e;t||(e=this.$refs.richTextEditor)==null||e.focusEditor()}},created(){this.value&&this.outputFormat==="text"?this.internalInputValue=this.value.replace(/\n/g,"<br>"):this.internalInputValue=this.value},methods:{linkDialogOpened(t){var e;this.linkDialogOpen=t,t===!0?this.initLinkDialog():(this.hideLinkBubbleMenu=!1,(e=this.$refs.richTextEditor)==null||e.focusEditor())},handleTopbarClick(t){var n;const e=(n=this.$refs.richTextEditor)==null?void 0:n.editor,i={bold:()=>e==null?void 0:e.chain().focus().toggleBold().run(),italic:()=>e==null?void 0:e.chain().focus().toggleItalic().run(),strike:()=>e==null?void 0:e.chain().focus().toggleStrike().run(),bulletList:()=>e==null?void 0:e.chain().focus().toggleBulletList().run(),orderedList:()=>e==null?void 0:e.chain().focus().toggleOrderedList().run(),blockquote:()=>e==null?void 0:e.chain().focus().toggleBlockquote().run(),code:()=>e==null?void 0:e.chain().focus().toggleCode().run(),codeBlock:()=>e==null?void 0:e.chain().focus().toggleCodeBlock().run()};e&&i[t]&&i[t]()},isSelectionActive(t){var e,i,n,o;return["bulletList","orderedList"].includes(t)?this.lastActiveNodes((i=(e=this.$refs.richTextEditor)==null?void 0:e.editor)==null?void 0:i.state,[{type:"bulletList"},{type:"orderedList"}]).includes(t)&&this.isFocused:((o=(n=this.$refs.richTextEditor)==null?void 0:n.editor)==null?void 0:o.isActive(t))&&this.isFocused},initLinkDialog(){var t,e,i;this.$refs.link.setInitialValues(this.selectedText,(i=(e=(t=this.$refs.richTextEditor)==null?void 0:t.editor)==null?void 0:e.getAttributes("link"))==null?void 0:i.href),this.hideLinkBubbleMenu=!0,this.linkDialogOpen=!0},removeLink(){var t;(t=this.$refs.richTextEditor)==null||t.removeLink(),this.linkDialogOpen=!1},setLink(t,e){this.$refs.richTextEditor.setLink(e,t,this.linkOptions,l.EDITOR_SUPPORTED_LINK_PROTOCOLS,l.EDITOR_DEFAULT_LINK_PREFIX),this.linkDialogOpen=!1},onMousedown(t){this.$refs.richTextEditor.$el.querySelector(".tiptap").contains(t.target)||(t.preventDefault(),this.$refs.richTextEditor.focusEditor())},onDrop(t){const e=t.dataTransfer,i=Array.from(e.files);this.$emit("add-media",i)},onPaste(t){if(t.clipboardData.files.length){t.stopPropagation(),t.preventDefault();const e=[...t.clipboardData.files];this.$emit("paste-media",e)}},onSkinTone(t){this.$emit("skin-tone",t)},onSelectEmoji(t,e){t&&(t.shift_key||e(),this.$refs.richTextEditor.editor.commands.insertContent({type:"emoji",attrs:{code:t.shortname,image:t.image,name:t.name}}),this.$emit("selected-emoji",t))},onSelectImage(){this.$refs.messageInputImageUpload.$refs.input.click()},onImageUpload(){this.$emit("select-media",this.$refs.messageInputImageUpload.$refs.input.files)},toggleEmojiPicker(){this.emojiPickerOpened=!this.emojiPickerOpened},onSend(){this.isSendDisabled||this.$emit("submit",this.internalInputValue)},onCancel(){this.$emit("cancel")},onInput(t){this.$emit("update:value",t)},onTextInput(t){this.text=t,this.$emit("text-input",t)}}};var E=function(){var e=this,i=e._self._c;return i("div",{staticClass:"d-recipe-message-input",attrs:{"data-qa":"dt-recipe-message-input",role:"presentation"},on:{dragover:function(n){n.preventDefault()},drop:function(n){return n.preventDefault(),e.onDrop.apply(null,arguments)},paste:e.onPaste,mousedown:e.onMousedown}},[e._t("top"),e.richText?i("dt-recipe-message-input-topbar",{key:e.selectedText,attrs:{"bold-button-options":e.boldButtonOptions,"italic-button-options":e.italicButtonOptions,"strike-button-options":e.strikeButtonOptions,"bullet-list-button-options":e.bulletListButtonOptions,"ordered-list-button-options":e.orderedListButtonOptions,"block-quote-button-options":e.blockQuoteButtonOptions,"code-button-options":e.codeButtonOptions,"code-block-button-options":e.codeBlockButtonOptions,"is-selection-active":e.isSelectionActive},on:{click:e.handleTopbarClick},scopedSlots:e._u([{key:"link",fn:function(){return[i("dt-recipe-message-input-link",{ref:"link",attrs:{open:e.linkDialogOpen,"link-button-options":e.linkButtonOptions,"is-selection-active":e.isSelectionActive},on:{opened:e.linkDialogOpened,"set-link":e.setLink,"remove-link":e.removeLink}})]},proxy:!0}],null,!1,1527282285)}):e._e(),i("div",{directives:[{name:"dt-scrollbar",rawName:"v-dt-scrollbar"}],staticClass:"d-recipe-message-input__editor-wrapper",style:{"max-height":e.maxHeight}},[i("dt-rich-text-editor",e._g(e._b({ref:"richTextEditor",attrs:{editable:e.editable,"input-aria-label":e.inputAriaLabel,"input-class":e.inputClass,"output-format":e.outputFormat,"auto-focus":e.autoFocus,link:e.richText,placeholder:e.placeholder,"prevent-typing":e.preventTyping,"mention-suggestion":e.mentionSuggestion,"channel-suggestion":e.channelSuggestion,"slash-command-suggestion":e.slashCommandSuggestion,"paste-rich-text":e.richText,"allow-blockquote":e.richText,"allow-bold":e.richText,"allow-bullet-list":e.richText,"allow-code":e.richText,"allow-codeblock":e.richText,"allow-italic":e.richText,"allow-strike":e.richText,"allow-underline":e.richText,"additional-extensions":e.additionalExtensions,"hide-link-bubble-menu":e.hideLinkBubbleMenu},on:{input:e.onInput,"text-input":e.onTextInput,enter:e.onSend,selected:function(n){e.selectedText=n},"selected-command":function(n){return e.$emit("selected-command",n)},"edit-link":e.initLinkDialog,focus:function(n){e.isFocused=!0},blur:function(n){e.isFocused=!1}},model:{value:e.internalInputValue,callback:function(n){e.internalInputValue=n},expression:"internalInputValue"}},"dt-rich-text-editor",e.$attrs,!1),e.$listeners))],1),e._t("middle"),i("section",{staticClass:"d-recipe-message-input__bottom-section"},[i("div",{staticClass:"d-recipe-message-input__bottom-section-left"},[i("dt-stack",{attrs:{direction:"row",gap:"200"}},[e.showImagePicker?i("dt-button",{directives:[{name:"dt-tooltip",rawName:"v-dt-tooltip:top-start",value:e.imagePickerButtonLabel,expression:"imagePickerButtonLabel",arg:"top-start"}],staticClass:"d-recipe-message-input__button",attrs:{"data-qa":"dt-recipe-message-input-image-btn",size:"sm",kind:"muted",importance:"clear","aria-label":e.imagePickerButtonLabel},on:{click:e.onSelectImage,mouseenter:function(n){e.imagePickerFocus=!0},mouseleave:function(n){e.imagePickerFocus=!1},focus:function(n){e.imagePickerFocus=!0},blur:function(n){e.imagePickerFocus=!1}},scopedSlots:e._u([{key:"icon",fn:function(){return[i("dt-icon-image",{attrs:{size:"300"}})]},proxy:!0}],null,!1,4195307205)}):e._e(),i("dt-input",{ref:"messageInputImageUpload",staticClass:"d-recipe-message-input__image-input",attrs:{"data-qa":"dt-recipe-message-input-image-input",accept:"image/*, video/*",type:"file",multiple:"",hidden:""},on:{input:e.onImageUpload}}),e.showEmojiPicker?i("dt-popover",{attrs:{"open.sync":"emojiPickerOpened","data-qa":"dt-recipe-message-input-emoji-picker-popover","initial-focus-element":"#searchInput",padding:"none"},scopedSlots:e._u([{key:"anchor",fn:function({attrs:n}){return[i("dt-button",e._b({directives:[{name:"dt-tooltip",rawName:"v-dt-tooltip",value:e.emojiPickerButtonLabel,expression:"emojiPickerButtonLabel"}],staticClass:"d-recipe-message-input__button",attrs:{"data-qa":"dt-recipe-message-input-emoji-picker-btn",size:"sm",kind:"muted",importance:"clear","aria-label":e.emojiPickerButtonLabel},on:{click:e.toggleEmojiPicker,mouseenter:function(o){e.emojiPickerFocus=!0},mouseleave:function(o){e.emojiPickerFocus=!1},focus:function(o){e.emojiPickerFocus=!0},blur:function(o){e.emojiPickerFocus=!1}},scopedSlots:e._u([{key:"icon",fn:function(){return[e.emojiPickerHovered?i("dt-icon-very-satisfied",{attrs:{size:"300"}}):i("dt-icon-satisfied",{attrs:{size:"300"}})]},proxy:!0}],null,!0)},"dt-button",n,!1))]}},{key:"content",fn:function({close:n}){return[i("dt-emoji-picker",e._b({on:{"add-emoji":function(o){return e.$emit("add-emoji")},"skin-tone":e.onSkinTone,"selected-emoji":o=>e.onSelectEmoji(o,n),"scroll-bottom-reached":function(o){return e.$emit("emoji-scroll-bottom-reached")}}},"dt-emoji-picker",e.emojiPickerProps,!1))]}}],null,!1,2616934230)}):e._e(),e._t("emojiGiphyPicker"),e._t("customActionIcons")],2)],1),i("div",{staticClass:"d-recipe-message-input__bottom-section-right"},[i("dt-stack",{attrs:{direction:"row",gap:"300"}},[i("div",{staticClass:"d-recipe-message-input__sms-count"},[e._t("smsCount")],2),e.showCharacterLimit?i("dt-tooltip",{staticClass:"d-recipe-message-input__remaining-char-tooltip",attrs:{placement:"top-end",enabled:e.characterLimitTooltipEnabled,message:e.showCharacterLimit.message,offset:[10,8]},scopedSlots:e._u([{key:"anchor",fn:function(){return[i("p",{directives:[{name:"show",rawName:"v-show",value:e.displayCharacterLimitWarning,expression:"displayCharacterLimitWarning"}],staticClass:"d-recipe-message-input__remaining-char",attrs:{"data-qa":"dt-recipe-message-input-character-limit"}},[e._v(" "+e._s(e.showCharacterLimit.count-e.inputLength)+" ")])]},proxy:!0}],null,!1,1021505058)}):e._e(),e.showCancel?i("dt-button",{directives:[{name:"dt-tooltip",rawName:"v-dt-tooltip",value:e.cancelButtonLabel,expression:"cancelButtonLabel"}],staticClass:"d-recipe-message-input__button d-recipe-message-input__cancel-button",attrs:{"data-qa":"dt-recipe-message-input-cancel-button",size:"sm",kind:"muted",importance:"clear","aria-label":e.cancelButtonLabel},on:{click:e.onCancel}},[i("p",[e._v(e._s(e.cancelButtonLabel))])]):e._e(),e._t("sendButton",function(){return[e.showSend?i("dt-button",{directives:[{name:"dt-tooltip",rawName:"v-dt-tooltip:top-end",value:e.sendButtonLabel,expression:"sendButtonLabel",arg:"top-end"}],class:["d-recipe-message-input__button d-recipe-message-input__send-button",{"d-recipe-message-input__send-button--disabled":e.isSendDisabled,"d-btn--icon-only":e.showSendIcon}],attrs:{"data-qa":"dt-recipe-message-input-send-btn",size:"sm",kind:"default",importance:"primary","aria-label":e.sendButtonLabel,"aria-disabled":e.isSendDisabled},on:{click:e.onSend},scopedSlots:e._u([e.showSendIcon?{key:"icon",fn:function(){return[e._t("sendIcon",function(){return[i("dt-icon-send",{attrs:{size:e.sendIconSize}})]},{iconSize:e.sendIconSize})]},proxy:!0}:null],null,!0)},[e.showSend.text?[i("p",[e._v(e._s(e.showSend.text))])]:e._e()],2):e._e()]})],2)],1)])],2)},P=[],w=d.n(C,E,P);const D=w.exports;exports.default=D;
 //# sourceMappingURL=message-input.cjs.map