@dialpad/dialtone 9.110.0 → 9.110.1-beta.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"editor.js","sources":["../../../recipes/conversation_view/editor/editor.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-recipe-editor\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n    data-qa=\"dt-recipe-editor\"\n    role=\"presentation\"\n    @click=\"$refs.richTextEditor.focusEditor()\"\n  >\n    <!-- Section for the top UI -->\n    <dt-stack\n      class=\"d-recipe-editor__top-bar\"\n      direction=\"row\"\n      gap=\"450\"\n    >\n      <dt-stack\n        v-for=\"buttonGroup in buttonGroups\"\n        :key=\"buttonGroup.key\"\n        direction=\"row\"\n        gap=\"300\"\n      >\n        <dt-tooltip\n          v-for=\"button in buttonGroup.buttonGroup\"\n          :key=\"`${buttonGroup.key}-${JSON.stringify(button.selector)}`\"\n          :message=\"button.tooltipMessage\"\n          placement=\"top\"\n        >\n          <template #anchor>\n            <dt-button\n              :active=\"$refs.richTextEditor?.editor?.isActive(button.selector)\"\n              :aria-label=\"button.tooltipMessage\"\n              :data-qa=\"button.dataQA\"\n              importance=\"clear\"\n              kind=\"muted\"\n              size=\"xs\"\n              @click=\"button.onClick()\"\n            >\n              <template #icon>\n                <component\n                  :is=\"button.icon\"\n                  size=\"200\"\n                />\n              </template>\n              {{ button?.label }}\n            </dt-button>\n          </template>\n        </dt-tooltip>\n        <div class=\"d-recipe-editor__button-group-divider\" />\n      </dt-stack>\n      <dt-stack\n        v-if=\"linkButton.showBtn\"\n        direction=\"row\"\n        gap=\"300\"\n      >\n        <dt-popover\n          :open=\"showLinkInput\"\n          :show-close-button=\"false\"\n          :visually-hidden-close=\"true\"\n          :visually-hidden-close-label=\"'Close link input popover'\"\n          data-qa=\"dt-recipe-editor-link-input-popover\"\n          padding=\"none\"\n          placement=\"bottom-start\"\n          @click=\"onInputFocus\"\n          @opened=\"updateInput\"\n          @click.stop=\"onInputFocus\"\n        >\n          <template #anchor>\n            <dt-tooltip\n              :key=\"linkButton.key\"\n              :message=\"linkButton.tooltipMessage\"\n              placement=\"top\"\n            >\n              <template #anchor>\n                <dt-button\n                  :active=\"$refs.richTextEditor?.editor?.isActive(linkButton.selector)\"\n                  :aria-label=\"linkButton.tooltipMessage\"\n                  :data-qa=\"linkButton.dataQA\"\n                  importance=\"clear\"\n                  kind=\"muted\"\n                  size=\"xs\"\n                  @click=\"linkButton.onClick()\"\n                >\n                  <template #icon>\n                    <component\n                      :is=\"linkButton.icon\"\n                      size=\"200\"\n                    />\n                  </template>\n                </dt-button>\n              </template>\n            </dt-tooltip>\n          </template>\n\n          <template #content>\n            <div class=\"d-recipe-editor__popover-content\">\n              <span\n                v-if=\"showAddLink.setLinkTitle.length > 0\"\n              >\n                {{ showAddLink.setLinkTitle }}\n              </span>\n              <dt-input\n                v-model=\"linkInput\"\n                :input-aria-label=\"showAddLink.setLinkInputAriaLabel\"\n                :placeholder=\"setLinkPlaceholder\"\n                data-qa=\"dt-recipe-editor-link-input\"\n                input-wrapper-class=\"d-recipe-editor-link__input-wrapper\"\n                @click=\"onInputFocus\"\n                @focus=\"onInputFocus\"\n                @click.stop=\"onInputFocus\"\n                @keydown.enter=\"setLink\"\n              />\n            </div>\n          </template>\n          <template #footerContent>\n            <dt-stack\n              direction=\"row\"\n              gap=\"300\"\n              class=\"d-recipe-editor__popover-footer\"\n            >\n              <dt-button\n                :aria-label=\"removeLinkButton.ariaLabel\"\n                data-qa=\"dt-recipe-editor-remove-link-btn\"\n                importance=\"clear\"\n                kind=\"muted\"\n                size=\"sm\"\n                @click=\"removeLink\"\n              >\n                {{ removeLinkButton.label }}\n              </dt-button>\n              <dt-button\n                :aria-label=\"cancelSetLinkButton.ariaLabel\"\n                data-qa=\"dt-recipe-editor-set-link-cancel-btn\"\n                importance=\"clear\"\n                kind=\"muted\"\n                size=\"sm\"\n                @click=\"closeLinkInput\"\n              >\n                {{ cancelSetLinkButton.label }}\n              </dt-button>\n              <dt-button\n                :aria-label=\"confirmSetLinkButton.ariaLabel\"\n                data-qa=\"dt-recipe-editor-set-link-confirm-btn\"\n                size=\"sm\"\n                @click=\"setLink\"\n              >\n                {{ confirmSetLinkButton.label }}\n              </dt-button>\n            </dt-stack>\n          </template>\n        </dt-popover>\n      </dt-stack>\n    </dt-stack>\n\n    <!-- Some wrapper to restrict the height and show the scrollbar -->\n    <div\n      :style=\"{ 'max-height': maxHeight }\"\n      class=\"d-recipe-editor__content\"\n    >\n      <dt-rich-text-editor\n        ref=\"richTextEditor\"\n        v-model=\"internalInputValue\"\n        :allow-inline-images=\"true\"\n        :allow-line-breaks=\"true\"\n        :hide-link-bubble-menu=\"true\"\n        :auto-focus=\"autoFocus\"\n        :editable=\"editable\"\n        :input-aria-label=\"inputAriaLabel\"\n        :input-class=\"`d-recipe-editor__content-input ${inputClass}`\"\n        :link=\"true\"\n        :output-format=\"htmlOutputFormat\"\n        :placeholder=\"placeholder\"\n        :use-div-tags=\"useDivTags\"\n        data-qa=\"dt-rich-text-editor\"\n        v-bind=\"removeClassStyleAttrs($attrs)\"\n        @text-input=\"onTextInput\"\n        @blur=\"onBlur\"\n        @focus=\"onFocus\"\n        @input=\"onInput($event)\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  DtRichTextEditor,\n  RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n  RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport {\n  EDITOR_SUPPORTED_LINK_PROTOCOLS,\n  EDITOR_DEFAULT_LINK_PREFIX,\n} from './editor_constants.js';\nimport { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtStack } from '@/components/stack';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\nimport {\n  DtIconAlignCenter,\n  DtIconAlignJustify,\n  DtIconAlignLeft,\n  DtIconAlignRight,\n  DtIconBold,\n  DtIconCodeBlock,\n  DtIconImage,\n  DtIconItalic,\n  DtIconLightningBolt,\n  DtIconLink2,\n  DtIconListBullet,\n  DtIconListOrdered,\n  DtIconQuote,\n  DtIconStrikethrough,\n  DtIconUnderline,\n} from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeEditor',\n\n  components: {\n    DtRichTextEditor,\n    DtButton,\n    DtPopover,\n    DtStack,\n    DtInput,\n    DtTooltip,\n    DtIconLightningBolt,\n    DtIconBold,\n    DtIconItalic,\n    DtIconUnderline,\n    DtIconStrikethrough,\n    DtIconListBullet,\n    DtIconListOrdered,\n    DtIconAlignLeft,\n    DtIconAlignCenter,\n    DtIconAlignRight,\n    DtIconAlignJustify,\n    DtIconQuote,\n    DtIconCodeBlock,\n    DtIconLink2,\n    DtIconImage,\n  },\n\n  mixins: [],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Value of the input. The object format should match TipTap's JSON\n     * document structure: https://tiptap.dev/guide/output#option-1-json\n     */\n    value: {\n      type: [Object, String],\n      default: '',\n    },\n\n    /**\n     * Whether the input is editable\n     */\n    editable: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Descriptive label for the input element\n     */\n    inputAriaLabel: {\n      type: String,\n      required: true,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input element. Only accepts a String value\n     * because this is passed to the editor via options. For multiple classes,\n     * join them into one string, e.g. \"d-p8 d-hmx96\"\n     */\n    inputClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the input should receive focus after the component has been\n     * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n     * - `start`  Sets the focus to the beginning of the input\n     * - `end`    Sets the focus to the end of the input\n     * - `all`    Selects the whole contents of the input\n     * - `Number` Sets the focus to a specific position in the input\n     * - `true`   Defaults to `start`\n     * - `false`  Disables autofocus\n     * @values true, false, start, end, all, number\n     */\n    autoFocus: {\n      type: [Boolean, String, Number],\n      default: false,\n      validator (autoFocus) {\n        if (typeof autoFocus === 'string') {\n          return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n        }\n        return true;\n      },\n    },\n\n    /**\n     * Placeholder text\n     */\n    placeholder: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Content area needs to dynamically adjust height based on the conversation area height.\n     * can be vh|px|rem|em|%\n     */\n    maxHeight: {\n      type: String,\n      default: 'unset',\n    },\n\n    /**\n     * Confirm set link button defaults.\n     */\n    confirmSetLinkButton: {\n      type: Object,\n      default: () => ({ label: 'Confirm', ariaLabel: 'Confirm set link' }),\n    },\n\n    /**\n     * Remove link button defaults.\n     */\n    removeLinkButton: {\n      type: Object,\n      default: () => ({ label: 'Remove', ariaLabel: 'Remove link' }),\n    },\n\n    /**\n     * Cancel set link button defaults.\n     */\n    cancelSetLinkButton: {\n      type: Object,\n      default: () => ({ label: 'Cancel', ariaLabel: 'Cancel set link' }),\n    },\n\n    /**\n     * Placeholder text for the set link input field\n     */\n    setLinkPlaceholder: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Show button to render text as bold\n     */\n    showBoldButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to render text in italics\n     */\n    showItalicsButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to underline text\n     */\n    showUnderlineButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to strike text\n     */\n    showStrikeButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to render list items\n     */\n    showListItemsButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to render ordered list items\n     */\n    showOrderedListButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to align text to the left\n     */\n    showAlignLeftButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to align text to the center\n     */\n    showAlignCenterButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to align text to the right\n     */\n    showAlignRightButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to justify text\n     */\n    showAlignJustifyButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to add quote format to text\n     */\n    showQuoteButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to add code block\n     */\n    showCodeBlockButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to handle quick replies\n     */\n    showQuickRepliesButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to add an inline image\n     */\n    showInlineImageButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Show add link default config.\n     */\n    showAddLink: {\n      type: Object,\n      default: () => ({\n        showAddLinkButton: true,\n        setLinkTitle: 'Add a link',\n        setLinkInputAriaLabel: 'Input field to add link',\n      }),\n    },\n\n    /**\n     * Use div tags instead of paragraph tags to show text\n     */\n    useDivTags: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native focus event\n     * @event input\n     * @type {String|JSON}\n     */\n    'focus',\n\n    /**\n     * Native blur event\n     * @event input\n     * @type {String|JSON}\n     */\n    'blur',\n\n    /**\n     * Native input event\n     * @event input\n     * @type {String|JSON}\n     */\n    'input',\n\n    /**\n     * Quick replies button\n     * pressed event\n     * @event quick-replies-click\n     */\n    'quick-replies-click',\n\n    /**\n     * Emit when inline image button is clicked\n     * @event inline-image-click\n     */\n    'inline-image-click',\n\n    /**\n     * Emit when text input is changed\n     * @event text-input\n     * @type {String}\n     */\n    'text-input',\n  ],\n\n  data () {\n    return {\n      internalInputValue: this.value, // internal input content\n      hasFocus: false,\n\n      linkOptions: {\n        class: 'd-recipe-editor__link',\n      },\n\n      showLinkInput: false,\n      linkInput: '',\n    };\n  },\n\n  computed: {\n    inputLength () {\n      return this.internalInputValue.length;\n    },\n\n    htmlOutputFormat () {\n      return RICH_TEXT_EDITOR_OUTPUT_FORMATS[2];\n    },\n\n    showingTextFormatButtons () {\n      return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;\n    },\n\n    showingAlignmentButtons () {\n      return this.showAlignLeftButton || this.showAlignCenterButton ||\n        this.showAlignRightButton || this.showAlignJustifyButton;\n    },\n\n    showingListButtons () {\n      return this.showListItemsButton || this.showOrderedListButton;\n    },\n\n    buttonGroups () {\n      const individualButtonStacks = this.individualButtons.map(buttonData => ({\n        key: buttonData.selector,\n        buttonGroup: [buttonData],\n      }));\n      return [\n        { key: 'new', buttonGroup: this.newButtons },\n        { key: 'format', buttonGroup: this.textFormatButtons },\n        { key: 'alignment', buttonGroup: this.alignmentButtons },\n        { key: 'list', buttonGroup: this.listButtons },\n        ...individualButtonStacks,\n      ].filter(buttonGroupData => buttonGroupData.buttonGroup.length > 0);\n    },\n\n    newButtons () {\n      return [\n        {\n          showBtn: this.showQuickRepliesButton,\n          label: 'Quick reply',\n          selector: 'quickReplies',\n          icon: DtIconLightningBolt,\n          dataQA: 'dt-recipe-editor-quick-replies-btn',\n          tooltipMessage: 'Quick Reply',\n          onClick: this.onQuickRepliesClick,\n        },\n      ].filter(button => button.showBtn);\n    },\n\n    textFormatButtons () {\n      return [\n        {\n          showBtn: this.showBoldButton,\n          selector: 'bold',\n          icon: DtIconBold,\n          dataQA: 'dt-recipe-editor-bold-btn',\n          tooltipMessage: 'Bold',\n          onClick: this.onBoldTextToggle,\n        },\n        {\n          showBtn: this.showItalicsButton,\n          selector: 'italic',\n          icon: DtIconItalic,\n          dataQA: 'dt-recipe-editor-italics-btn',\n          tooltipMessage: 'Italics',\n          onClick: this.onItalicTextToggle,\n        },\n        {\n          showBtn: this.showUnderlineButton,\n          selector: 'underline',\n          icon: DtIconUnderline,\n          dataQA: 'dt-recipe-editor-underline-btn',\n          tooltipMessage: 'Underline',\n          onClick: this.onUnderlineTextToggle,\n        },\n        {\n          showBtn: this.showStrikeButton,\n          selector: 'strike',\n          icon: DtIconStrikethrough,\n          dataQA: 'dt-recipe-editor-strike-btn',\n          tooltipMessage: 'Strike',\n          onClick: this.onStrikethroughTextToggle,\n        },\n      ].filter(button => button.showBtn);\n    },\n\n    alignmentButtons () {\n      return [\n        {\n          showBtn: this.showAlignLeftButton,\n          selector: { textAlign: 'left' },\n          icon: DtIconAlignLeft,\n          dataQA: 'dt-recipe-editor-align-left-btn',\n          tooltipMessage: 'Align Left',\n          onClick: () => this.onTextAlign('left'),\n        },\n        {\n          showBtn: this.showAlignCenterButton,\n          selector: { textAlign: 'center' },\n          icon: DtIconAlignCenter,\n          dataQA: 'dt-recipe-editor-align-center-btn',\n          tooltipMessage: 'Align Center',\n          onClick: () => this.onTextAlign('center'),\n        },\n        {\n          showBtn: this.showAlignRightButton,\n          selector: { textAlign: 'right' },\n          icon: DtIconAlignRight,\n          dataQA: 'dt-recipe-editor-align-right-btn',\n          tooltipMessage: 'Align Right',\n          onClick: () => this.onTextAlign('right'),\n        },\n        {\n          showBtn: this.showAlignJustifyButton,\n          selector: { textAlign: 'justify' },\n          icon: DtIconAlignJustify,\n          dataQA: 'dt-recipe-editor-align-justify-btn',\n          tooltipMessage: 'Align Justify',\n          onClick: () => this.onTextAlign('justify'),\n        },\n      ].filter(button => button.showBtn);\n    },\n\n    listButtons () {\n      return [\n        {\n          showBtn: this.showListItemsButton,\n          selector: 'bulletList',\n          icon: DtIconListBullet,\n          dataQA: 'dt-recipe-editor-list-items-btn',\n          tooltipMessage: 'Bullet List',\n          onClick: this.onBulletListToggle,\n        },\n        {\n          showBtn: this.showOrderedListButton,\n          selector: 'orderedList',\n          icon: DtIconListOrdered,\n          dataQA: 'dt-recipe-editor-ordered-list-items-btn',\n          tooltipMessage: 'Ordered List',\n          onClick: this.onOrderedListToggle,\n        },\n      ].filter(button => button.showBtn);\n    },\n\n    individualButtons () {\n      return [\n        {\n          showBtn: this.showQuoteButton,\n          selector: 'blockquote',\n          icon: DtIconQuote,\n          dataQA: 'dt-recipe-editor-blockquote-btn',\n          tooltipMessage: 'Quote',\n          onClick: this.onBlockquoteToggle,\n        },\n        {\n          showBtn: this.showCodeBlockButton,\n          selector: 'codeBlock',\n          icon: DtIconCodeBlock,\n          dataQA: 'dt-recipe-editor-code-block-btn',\n          tooltipMessage: 'Code',\n          onClick: this.onCodeBlockToggle,\n        },\n        {\n          showBtn: this.showInlineImageButton,\n          selector: 'image',\n          icon: DtIconImage,\n          dataQA: 'dt-recipe-editor-inline-image-btn',\n          tooltipMessage: 'Image',\n          // Handle getting image\n          onClick: this.onInsertInlineImageClick,\n        },\n      ].filter(button => button.showBtn);\n    },\n\n    linkButton () {\n      return {\n        showBtn: this.showAddLink.showAddLinkButton,\n        selector: 'link',\n        icon: DtIconLink2,\n        dataQA: 'dt-recipe-editor-add-link-btn',\n        tooltipMessage: 'Link',\n        onClick: this.openLinkInput,\n      };\n    },\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalInputValue = newValue;\n    },\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n\n    onInputFocus (event) {\n      event?.stopPropagation();\n    },\n\n    removeLink () {\n      this.$refs.richTextEditor?.editor?.chain()?.focus()?.unsetLink()?.run();\n      this.closeLinkInput();\n    },\n\n    setLink (event) {\n      const editor = this.$refs.richTextEditor?.editor;\n      event?.preventDefault();\n      event?.stopPropagation();\n\n      if (!this.linkInput) {\n        // If link text is set to empty string,\n        // remove any existing links.\n        this.removeLink();\n        return;\n      }\n\n      // Check if input matches any of the supported link formats\n      const prefix = EDITOR_SUPPORTED_LINK_PROTOCOLS.find(prefixRegex => prefixRegex.test(this.linkInput));\n\n      if (!prefix) {\n        // If no matching pattern is found, prepend default prefix\n        this.linkInput = `${EDITOR_DEFAULT_LINK_PREFIX}${this.linkInput}`;\n      }\n\n      const selection = editor?.view?.state?.selection;\n\n      if (selection.anchor === selection.head) {\n        // If no text has been selected, manually insert the link text.\n        // Do not rely on link options set through DtRichTextEditor\n        // component, because they clash with these and cause issues.\n        editor\n          .chain()\n          .focus()\n          .insertContentAt(\n            selection.anchor,\n          `<a class=\"${this.linkOptions.class}\" href=${this.linkInput}>${this.linkInput}</a>`,\n          )\n          .run();\n      } else {\n        // Set or edit the link\n        editor\n          .chain()\n          .focus()\n          .extendMarkRange('link')\n          .setLink({ href: this.linkInput, class: this.linkOptions.class })\n          .run();\n      }\n\n      this.closeLinkInput();\n    },\n\n    openLinkInput () {\n      this.showLinkInput = true;\n    },\n\n    updateInput (openedInput) {\n      if (!openedInput) {\n        return this.closeLinkInput();\n      }\n      this.linkInput = this.$refs.richTextEditor?.editor?.getAttributes('link')?.href;\n    },\n\n    closeLinkInput () {\n      this.showLinkInput = false;\n      this.linkInput = '';\n      this.$refs.richTextEditor.editor?.chain().focus();\n    },\n\n    onBoldTextToggle () {\n      this.$refs.richTextEditor?.editor?.chain().focus().toggleBold().run();\n    },\n\n    onItalicTextToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleItalic().run();\n    },\n\n    onUnderlineTextToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleUnderline().run();\n    },\n\n    onStrikethroughTextToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleStrike().run();\n    },\n\n    onTextAlign (alignment) {\n      if (this.$refs.richTextEditor?.editor?.isActive({ textAlign: alignment })) {\n        // If this alignment type is already set here, unset it\n        return this.$refs.richTextEditor?.editor.chain().focus().unsetTextAlign().run();\n      }\n      this.$refs.richTextEditor?.editor.chain().focus().setTextAlign(alignment).run();\n    },\n\n    onBulletListToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleBulletList().run();\n    },\n\n    onOrderedListToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleOrderedList().run();\n    },\n\n    onCodeBlockToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleCodeBlock().run();\n    },\n\n    onQuickRepliesClick () {\n      this.$emit('quick-replies-click');\n    },\n\n    onInsertInlineImageClick () {\n      this.$emit('inline-image-click');\n    },\n\n    insertInlineImage (imageUrl) {\n      this.$refs.richTextEditor?.editor.chain().focus().setImage({ src: imageUrl }).run();\n    },\n\n    insertInMessageBody (messageContent) {\n      this.$refs.richTextEditor?.editor.chain().focus().insertContent(messageContent).run();\n    },\n\n    setCursorPosition (position = null) {\n      this.$refs.richTextEditor?.editor.chain().focus(position).run();\n    },\n\n    onBlockquoteToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().run();\n    },\n\n    onTextInput (input) {\n      this.$emit('text-input', input);\n    },\n\n    onFocus (event) {\n      this.hasFocus = true;\n      this.$emit('focus', event);\n    },\n\n    onBlur (event) {\n      this.hasFocus = false;\n      this.$emit('blur', event);\n    },\n\n    onInput (event) {\n      this.$emit('input', event);\n    },\n\n  },\n};\n</script>\n"],"names":["_sfc_main","DtRichTextEditor","DtButton","DtPopover","DtStack","DtInput","DtTooltip","DtIconLightningBolt","DtIconBold","DtIconItalic","DtIconUnderline","DtIconStrikethrough","DtIconListBullet","DtIconListOrdered","DtIconAlignLeft","DtIconAlignCenter","DtIconAlignRight","DtIconAlignJustify","DtIconQuote","DtIconCodeBlock","DtIconLink2","DtIconImage","autoFocus","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","RICH_TEXT_EDITOR_OUTPUT_FORMATS","individualButtonStacks","buttonData","buttonGroupData","button","newValue","removeClassStyleAttrs","addClassStyleAttrs","event","_e","_d","_c","_b","_a","editor","EDITOR_SUPPORTED_LINK_PROTOCOLS","prefixRegex","EDITOR_DEFAULT_LINK_PREFIX","selection","openedInput","alignment","imageUrl","messageContent","position","input","_createElementVNode","_hoisted_2","_createElementBlock","_mergeProps","$options","_ctx","_cache","$event","_createVNode","_component_dt_stack","_withCtx","_openBlock","_Fragment","_renderList","buttonGroup","_createBlock","_component_dt_tooltip","_component_dt_button","_resolveDynamicComponent","_createTextVNode","_toDisplayString","_hoisted_1","_component_dt_popover","$data","_withModifiers","$props","_hoisted_3","_createCommentVNode","_component_dt_input","_withKeys","_normalizeStyle","_component_dt_rich_text_editor"],"mappings":"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"}

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

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

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

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

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

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

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

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

package/dist/vue3/lib/emoji/emoji-constants.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={};exports.default=e;
+//# sourceMappingURL=emoji-constants.cjs.map

package/dist/vue3/lib/emoji/emoji-constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-constants.cjs","sources":["../../../components/emoji/emoji_constants.js"],"sourcesContent":["export default { };\n"],"names":["emoji_constants"],"mappings":"4GAAA,MAAAA,EAAe,CAAG"}

package/dist/vue3/lib/emoji/emoji-constants.js

@@ -0,0 +1,5 @@
+const t = {};
+export {
+  t as default
+};
+//# sourceMappingURL=emoji-constants.js.map

package/dist/vue3/lib/emoji/emoji-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-constants.js","sources":["../../../components/emoji/emoji_constants.js"],"sourcesContent":["export default { };\n"],"names":["emoji_constants"],"mappings":"AAAA,MAAAA,IAAe,CAAG;"}

package/dist/vue3/lib/emoji/emoji.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../common/emoji/index.cjs"),e=require("vue"),d=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),u=require("../skeleton/skeleton.cjs"),s=require("../icon/icon-constants.cjs"),c={compatConfig:{MODE:3},name:"DtEmoji",components:{DtSkeleton:u.default},props:{code:{type:String,required:!0},size:{type:String,default:"500",validator:a=>Object.keys(s.ICON_SIZE_MODIFIERS).includes(a)},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 a;return this.emojiDataValid?(a=this.emojiData)!=null&&a.custom?t.customEmojiAssetUrl+this.emojiData.key+this.emojiData.extension:["100","200"].includes(this.size)?t.emojiImageUrlSmall+this.emojiData.key+t.emojiFileExtensionSmall:t.emojiImageUrlLarge+this.emojiData.key+t.emojiFileExtensionLarge:"invalid"},emojiAlt(){if(this.emojiDataValid)return this.emojiData.unicode_output?t.stringToUnicode(this.emojiData.unicode_output):this.emojiData.name},emojiLabel(){return this.emojiDataValid?this.ariaLabel?this.ariaLabel:this.emojiData.name:"Invalid Emoji"},emojiSize(){return s.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=t.codeToEmojiData(this.code)},imageLoaded(){this.imgLoading=!1},imageErrored(){this.imgLoading=!1}}},j=["aria-label","alt","title","src"];function g(a,o,n,D,l,i){const m=e.resolveComponent("dt-skeleton");return e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(["d-emoji d-icon",i.emojiSize])},[e.withDirectives(e.createVNode(m,{offset:0,class:e.normalizeClass(["d-icon",i.emojiSize]),"shape-option":{shape:"circle",size:"100%"}},null,8,["class"]),[[e.vShow,l.imgLoading&&n.showSkeleton]]),e.withDirectives(e.createElementVNode("img",{ref:"emojiImg",class:e.normalizeClass(["d-icon",i.emojiSize,n.imgClass]),"aria-label":i.emojiLabel,alt:i.emojiAlt,title:i.emojiLabel,src:i.emojiSrc,onLoad:o[0]||(o[0]=(...r)=>i.imageLoaded&&i.imageLoaded(...r)),onError:o[1]||(o[1]=(...r)=>i.imageErrored&&i.imageErrored(...r))},null,42,j),[[e.vShow,!l.imgLoading]])],2)}const h=d._(c,[["render",g]]);exports.default=h;
+//# sourceMappingURL=emoji.cjs.map

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

@@ -0,0 +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  compatConfig: { MODE: 3 },\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","_hoisted_1","_createElementBlock","_normalizeClass","$options","_createVNode","_component_dt_skeleton","_vShow","$data","$props","_createElementVNode","args"],"mappings":"qTAuCKA,EAAU,CACb,aAAc,CAAE,KAAM,CAAG,EACzB,KAAM,UAEN,WAAY,YACVC,EAAU,OACX,EAED,MAAO,CAML,KAAM,CACJ,KAAM,OACN,SAAU,EACX,EAOD,KAAM,CACJ,KAAM,OACN,QAAS,MACT,UAAYC,GAAM,OAAO,KAAKC,qBAAmB,EAAE,SAASD,CAAC,CAC9D,EAOD,SAAU,CACR,KAAM,CAAC,OAAQ,OAAQ,KAAK,EAC5B,QAAS,EACV,EAQD,UAAW,CACT,KAAM,OACN,QAAS,IACV,EAMD,aAAc,CACZ,KAAM,QACN,QAAS,EACV,CACF,EAED,MAAQ,CACN,MAAO,CACL,UAAW,KACX,WAAY,GAEf,EAED,SAAU,CACR,gBAAkB,CAChB,MAAO,CAAC,CAAC,KAAK,SACf,EAED,UAAY,OACV,OAAK,KAAK,gBAGNE,EAAA,KAAK,YAAL,MAAAA,EAAgB,OACXC,EAAAA,oBAAsB,KAAK,UAAU,IAAM,KAAK,UAAU,UAG/D,CAAC,MAAO,KAAK,EAAE,SAAS,KAAK,IAAI,EAC5BC,EAAiB,mBAAI,KAAK,UAAU,IAAMC,EAAAA,wBAE1CC,EAAiB,mBAAI,KAAK,UAAU,IAAMC,EAAAA,wBAVhB,SAYpC,EAED,UAAY,CACV,GAAK,KAAK,eACV,OAAO,KAAK,UAAU,eAAiBC,kBAAgB,KAAK,UAAU,cAAc,EAAI,KAAK,UAAU,IACxG,EAED,YAAc,CACZ,OAAK,KAAK,eACH,KAAK,UAAY,KAAK,UAAY,KAAK,UAAU,KADrB,eAEpC,EAED,WAAa,CACX,OAAOP,EAAmB,oBAAC,KAAK,IAAI,CACrC,CACF,EAED,MAAO,CACL,KAAM,CACJ,QAAS,UAAY,CACnB,KAAK,aAAY,CAClB,EAED,UAAW,EACZ,EAED,SAAU,CACR,QAAS,gBAAkB,CACzB,KAAK,WAAa,EACnB,EAED,UAAW,EACZ,CACF,EAED,QAAS,CACP,cAAgB,CACd,KAAK,UAAYQ,EAAAA,gBAAgB,KAAK,IAAI,CAC3C,EAED,aAAe,CACb,KAAK,WAAa,EACnB,EAED,cAAgB,CACd,KAAK,WAAa,EACnB,CACF,CACH,EA7KAC,EAAA,CAAA,aAAA,MAAA,QAAA,KAAA,yFACEC,EAkBO,mBAAA,OAAA,CAlBA,MADTC,EAAAA,iCACmCC,EAAS,SAAA,CAAA,qBACxCC,EAKE,YAAAC,EAAA,CAHC,OAAQ,EACR,MALPH,EAAAA,yBAKyBC,EAAS,SAAA,CAAA,EAC3B,eAAc,CAAiC,MAAA,SAAA,KAAA,MAAA,sBAHxC,CAAAG,EAAA,MAAAC,EAAA,YAAcC,EAAY,YAAA,qBAKpCC,EAUC,mBAAA,MAAA,CARC,IAAI,WACH,MAXPP,EAAA,eAAA,CAAA,SAWyBC,EAAS,UAAEK,EAAQ,QAAA,CAAA,EACrC,aAAYL,EAAU,WACtB,IAAKA,EAAQ,SACb,MAAOA,EAAU,WACjB,IAAKA,EAAQ,SACb,2BAAMA,EAAW,aAAAA,EAAA,YAAA,GAAAO,CAAA,GACjB,4BAAOP,EAAY,cAAAA,EAAA,aAAA,GAAAO,CAAA,EAjB1B,EAAA,KAAA,GAAAV,CAAA,EAAA,WASeO,EAAU,UAAA"}

package/dist/vue3/lib/emoji/emoji.js

@@ -0,0 +1,141 @@
+import { customEmojiAssetUrl as c, emojiImageUrlSmall as j, emojiFileExtensionSmall as u, emojiImageUrlLarge as g, emojiFileExtensionLarge as h, stringToUnicode as f, codeToEmojiData as D } from "../../common/emoji/index.js";
+import { resolveComponent as S, openBlock as E, createElementBlock as L, normalizeClass as o, withDirectives as n, createVNode as p, vShow as l, createElementVNode as _ } from "vue";
+import { _ as k } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import y from "../skeleton/skeleton.js";
+import { ICON_SIZE_MODIFIERS as s } from "../icon/icon-constants.js";
+const b = {
+  compatConfig: { MODE: 3 },
+  name: "DtEmoji",
+  components: {
+    DtSkeleton: y
+  },
+  props: {
+    /**
+     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.
+     * <a class="d-link" href="https://emojipedia.org/joypixels/" target="_blank">JoyPixels</a>
+     * for all supported shortcode/unicode or the docs for setting up custom emojis.
+     */
+    code: {
+      type: String,
+      required: !0
+    },
+    /**
+     * The size of the emoji. Can be any of the icon size utility classes from
+     * <a class="d-link" href="https://dialtone.dialpad.com/components/icon.html" target="_blank"> Dialpad Icon Size</a>
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    size: {
+      type: String,
+      default: "500",
+      validator: (i) => Object.keys(s).includes(i)
+    },
+    /**
+     * Additional class name for the emoji img element.
+     * Can accept String, Object, and Array, i.e. has the
+     * same API as Vue's built-in handling of the class attribute.
+     */
+    imgClass: {
+      type: [String, Object, Array],
+      default: ""
+    },
+    /**
+     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n
+     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will
+     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the
+     * getEmojiData() function
+     */
+    ariaLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * Shows a skeleton loader while the emoji asset is loading.
+     * @values true, false
+     */
+    showSkeleton: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  data() {
+    return {
+      emojiData: null,
+      imgLoading: !1
+    };
+  },
+  computed: {
+    emojiDataValid() {
+      return !!this.emojiData;
+    },
+    emojiSrc() {
+      var i;
+      return this.emojiDataValid ? (i = this.emojiData) != null && i.custom ? c + this.emojiData.key + this.emojiData.extension : ["100", "200"].includes(this.size) ? j + this.emojiData.key + u : g + this.emojiData.key + h : "invalid";
+    },
+    emojiAlt() {
+      if (this.emojiDataValid)
+        return this.emojiData.unicode_output ? f(this.emojiData.unicode_output) : this.emojiData.name;
+    },
+    emojiLabel() {
+      return this.emojiDataValid ? this.ariaLabel ? this.ariaLabel : this.emojiData.name : "Invalid Emoji";
+    },
+    emojiSize() {
+      return s[this.size];
+    }
+  },
+  watch: {
+    code: {
+      handler: function() {
+        this.getEmojiData();
+      },
+      immediate: !0
+    },
+    emojiSrc: {
+      handler: async function() {
+        this.imgLoading = !0;
+      },
+      immediate: !0
+    }
+  },
+  methods: {
+    getEmojiData() {
+      this.emojiData = D(this.code);
+    },
+    imageLoaded() {
+      this.imgLoading = !1;
+    },
+    imageErrored() {
+      this.imgLoading = !1;
+    }
+  }
+}, z = ["aria-label", "alt", "title", "src"];
+function I(i, t, r, v, m, e) {
+  const d = S("dt-skeleton");
+  return E(), L("span", {
+    class: o(["d-emoji d-icon", e.emojiSize])
+  }, [
+    n(p(d, {
+      offset: 0,
+      class: o(["d-icon", e.emojiSize]),
+      "shape-option": { shape: "circle", size: "100%" }
+    }, null, 8, ["class"]), [
+      [l, m.imgLoading && r.showSkeleton]
+    ]),
+    n(_("img", {
+      ref: "emojiImg",
+      class: o(["d-icon", e.emojiSize, r.imgClass]),
+      "aria-label": e.emojiLabel,
+      alt: e.emojiAlt,
+      title: e.emojiLabel,
+      src: e.emojiSrc,
+      onLoad: t[0] || (t[0] = (...a) => e.imageLoaded && e.imageLoaded(...a)),
+      onError: t[1] || (t[1] = (...a) => e.imageErrored && e.imageErrored(...a))
+    }, null, 42, z), [
+      [l, !m.imgLoading]
+    ])
+  ], 2);
+}
+const A = /* @__PURE__ */ k(b, [["render", I]]);
+export {
+  A as default
+};
+//# sourceMappingURL=emoji.js.map

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

@@ -0,0 +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  compatConfig: { MODE: 3 },\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","_hoisted_1","_createElementBlock","_normalizeClass","$options","_createVNode","_component_dt_skeleton","_vShow","$data","$props","_createElementVNode","args"],"mappings":"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"}

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

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

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

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

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

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

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

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

package/dist/vue3/lib/emoji-picker/emoji-picker-constants.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const R={ARROW_UP:"ArrowUp",ARROW_DOWN:"ArrowDown",ARROW_LEFT:"ArrowLeft",ARROW_RIGHT:"ArrowRight"},e="https://static.dialpadcdn.com/joypixels/png/unicode/32/",t=9,E={DEFAULT:"Default",LIGHT:"Light",MEDIUM_LIGHT:"MediumLight",MEDIUM:"Medium",MEDIUM_DARK:"MediumDark",DARK:"Dark"},_={MOST_RECENTLY_USED:"Most recently used",SMILEYS_AND_PEOPLE:"Smileys and people",NATURE:"Nature",FOOD:"Food",ACTIVITY:"Activity",TRAVEL:"Travel",OBJECTS:"Objects",SYMBOLS:"Symbols",FLAGS:"Flags"},O={EMOJI_PICKER_SKIN_TONE_MODIFIERS:E,EMOJI_PICKER_CATEGORIES:_};exports.ARROW_KEYS=R;exports.CDN_URL=e;exports.EMOJIS_PER_ROW=t;exports.EMOJI_PICKER_CATEGORIES=_;exports.EMOJI_PICKER_SKIN_TONE_MODIFIERS=E;exports.default=O;
+//# sourceMappingURL=emoji-picker-constants.cjs.map

package/dist/vue3/lib/emoji-picker/emoji-picker-constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-picker-constants.cjs","sources":["../../../components/emoji_picker/emoji_picker_constants.js"],"sourcesContent":["export const ARROW_KEYS = {\n  ARROW_UP: 'ArrowUp',\n  ARROW_DOWN: 'ArrowDown',\n  ARROW_LEFT: 'ArrowLeft',\n  ARROW_RIGHT: 'ArrowRight',\n};\n\nexport const CDN_URL = 'https://static.dialpadcdn.com/joypixels/png/unicode/32/';\nexport const EMOJIS_PER_ROW = 9;\nexport const EMOJI_PICKER_SKIN_TONE_MODIFIERS = {\n  DEFAULT: 'Default',\n  LIGHT: 'Light',\n  MEDIUM_LIGHT: 'MediumLight',\n  MEDIUM: 'Medium',\n  MEDIUM_DARK: 'MediumDark',\n  DARK: 'Dark',\n};\n\nexport const EMOJI_PICKER_CATEGORIES = {\n  MOST_RECENTLY_USED: 'Most recently used',\n  SMILEYS_AND_PEOPLE: 'Smileys and people',\n  NATURE: 'Nature',\n  FOOD: 'Food',\n  ACTIVITY: 'Activity',\n  TRAVEL: 'Travel',\n  OBJECTS: 'Objects',\n  SYMBOLS: 'Symbols',\n  FLAGS: 'Flags',\n};\n\nexport default {\n  EMOJI_PICKER_SKIN_TONE_MODIFIERS,\n  EMOJI_PICKER_CATEGORIES,\n};\n"],"names":["ARROW_KEYS","CDN_URL","EMOJIS_PER_ROW","EMOJI_PICKER_SKIN_TONE_MODIFIERS","EMOJI_PICKER_CATEGORIES","emoji_picker_constants"],"mappings":"4GAAY,MAACA,EAAa,CACxB,SAAU,UACV,WAAY,YACZ,WAAY,YACZ,YAAa,YACf,EAEaC,EAAU,0DACVC,EAAiB,EACjBC,EAAmC,CAC9C,QAAS,UACT,MAAO,QACP,aAAc,cACd,OAAQ,SACR,YAAa,aACb,KAAM,MACR,EAEaC,EAA0B,CACrC,mBAAoB,qBACpB,mBAAoB,qBACpB,OAAQ,SACR,KAAM,OACN,SAAU,WACV,OAAQ,SACR,QAAS,UACT,QAAS,UACT,MAAO,OACT,EAEeC,EAAA,CACb,iCAAAF,EACA,wBAAAC,CACF"}

package/dist/vue3/lib/emoji-picker/emoji-picker-constants.js

@@ -0,0 +1,35 @@
+const R = {
+  ARROW_UP: "ArrowUp",
+  ARROW_DOWN: "ArrowDown",
+  ARROW_LEFT: "ArrowLeft",
+  ARROW_RIGHT: "ArrowRight"
+}, o = "https://static.dialpadcdn.com/joypixels/png/unicode/32/", _ = 9, t = {
+  DEFAULT: "Default",
+  LIGHT: "Light",
+  MEDIUM_LIGHT: "MediumLight",
+  MEDIUM: "Medium",
+  MEDIUM_DARK: "MediumDark",
+  DARK: "Dark"
+}, E = {
+  MOST_RECENTLY_USED: "Most recently used",
+  SMILEYS_AND_PEOPLE: "Smileys and people",
+  NATURE: "Nature",
+  FOOD: "Food",
+  ACTIVITY: "Activity",
+  TRAVEL: "Travel",
+  OBJECTS: "Objects",
+  SYMBOLS: "Symbols",
+  FLAGS: "Flags"
+}, e = {
+  EMOJI_PICKER_SKIN_TONE_MODIFIERS: t,
+  EMOJI_PICKER_CATEGORIES: E
+};
+export {
+  R as ARROW_KEYS,
+  o as CDN_URL,
+  _ as EMOJIS_PER_ROW,
+  E as EMOJI_PICKER_CATEGORIES,
+  t as EMOJI_PICKER_SKIN_TONE_MODIFIERS,
+  e as default
+};
+//# sourceMappingURL=emoji-picker-constants.js.map

package/dist/vue3/lib/emoji-picker/emoji-picker-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-picker-constants.js","sources":["../../../components/emoji_picker/emoji_picker_constants.js"],"sourcesContent":["export const ARROW_KEYS = {\n  ARROW_UP: 'ArrowUp',\n  ARROW_DOWN: 'ArrowDown',\n  ARROW_LEFT: 'ArrowLeft',\n  ARROW_RIGHT: 'ArrowRight',\n};\n\nexport const CDN_URL = 'https://static.dialpadcdn.com/joypixels/png/unicode/32/';\nexport const EMOJIS_PER_ROW = 9;\nexport const EMOJI_PICKER_SKIN_TONE_MODIFIERS = {\n  DEFAULT: 'Default',\n  LIGHT: 'Light',\n  MEDIUM_LIGHT: 'MediumLight',\n  MEDIUM: 'Medium',\n  MEDIUM_DARK: 'MediumDark',\n  DARK: 'Dark',\n};\n\nexport const EMOJI_PICKER_CATEGORIES = {\n  MOST_RECENTLY_USED: 'Most recently used',\n  SMILEYS_AND_PEOPLE: 'Smileys and people',\n  NATURE: 'Nature',\n  FOOD: 'Food',\n  ACTIVITY: 'Activity',\n  TRAVEL: 'Travel',\n  OBJECTS: 'Objects',\n  SYMBOLS: 'Symbols',\n  FLAGS: 'Flags',\n};\n\nexport default {\n  EMOJI_PICKER_SKIN_TONE_MODIFIERS,\n  EMOJI_PICKER_CATEGORIES,\n};\n"],"names":["ARROW_KEYS","CDN_URL","EMOJIS_PER_ROW","EMOJI_PICKER_SKIN_TONE_MODIFIERS","EMOJI_PICKER_CATEGORIES","emoji_picker_constants"],"mappings":"AAAY,MAACA,IAAa;AAAA,EACxB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AACf,GAEaC,IAAU,2DACVC,IAAiB,GACjBC,IAAmC;AAAA,EAC9C,SAAS;AAAA,EACT,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,MAAM;AACR,GAEaC,IAA0B;AAAA,EACrC,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT,GAEeC,IAAA;AAAA,EACb,kCAAAF;AAAA,EACA,yBAAAC;AACF;"}

package/dist/vue3/lib/emoji-picker/emoji-picker.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),T=require("@dialpad/dialtone-icons/vue3"),Q=require("../input/input.cjs"),X=require("../button/button.cjs"),Z=require("../../common/utils/index.cjs"),a=require("./emoji-picker-constants.cjs"),x=require("../tab/tab-group.cjs"),ee=require("../tab/tab.cjs"),w=require("@dialpad/dialtone-emojis"),te=require("../tooltip/tooltip.cjs"),oe={class:"d-emoji-picker__search d-emoji-picker__alignment"},le={__name:"emoji_search",props:{searchPlaceholderLabel:{type:String,required:!0},modelValue:{type:String,default:""}},emits:["update:modelValue","focus-emoji-selector","focus-tabset","select-first-emoji"],setup(o,{expose:_,emit:I}){const c=I,d=e.ref(null);function j(){c("update:modelValue",""),p()}function p(){d.value.focus()}return e.onMounted(()=>{p()}),_({focusSearchInput:p}),(S,m)=>(e.openBlock(),e.createElementBlock("div",oe,[e.createVNode(e.unref(Q.default),{id:"searchInput",ref_key:"searchInput",ref:d,placeholder:o.searchPlaceholderLabel,"model-value":o.modelValue,"onUpdate:modelValue":m[0]||(m[0]=r=>S.$emit("update:modelValue",r)),onKeydown:[m[1]||(m[1]=e.withKeys(r=>S.$emit("focus-tabset"),["up"])),m[2]||(m[2]=e.withKeys(e.withModifiers(r=>S.$emit("focus-emoji-selector"),["prevent"]),["down"])),m[3]||(m[3]=e.withKeys(r=>S.$emit("select-first-emoji"),["enter"]))]},e.createSlots({leftIcon:e.withCtx(()=>[e.createVNode(e.unref(T.DtIconSearch),{size:"200"})]),_:2},[o.modelValue.length>0?{name:"rightIcon",fn:e.withCtx(()=>[e.createVNode(e.unref(X.default),{importance:"clear",size:"xs",class:"d-emoji-picker__search-x-button",circle:"",kind:"muted",onClick:j},{icon:e.withCtx(()=>[e.createVNode(e.unref(T.DtIconClose),{size:"200"})]),_:1})]),key:"0"}:void 0]),1032,["placeholder","model-value"])]))}},ne={class:"d-emoji-picker__tabset"},se={__name:"emoji_tabset",props:{showRecentlyUsedTab:{type:Boolean,default:!1},scrollIntoTab:{type:Number,required:!0},emojiFilter:{type:String,default:""},tabsetLabels:{type:Array,required:!0}},emits:["selected-tabset","focus-search-input","focus-skin-selector"],setup(o,{expose:_,emit:I}){const c=o,d=I,j=[{label:a.EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED,icon:T.DtIconClock},{label:a.EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE,icon:T.DtIconSatisfied},{label:a.EMOJI_PICKER_CATEGORIES.NATURE,icon:T.DtIconLivingThing},{label:a.EMOJI_PICKER_CATEGORIES.FOOD,icon:T.DtIconFood},{label:a.EMOJI_PICKER_CATEGORIES.ACTIVITY,icon:T.DtIconObject},{label:a.EMOJI_PICKER_CATEGORIES.TRAVEL,icon:T.DtIconTransportation},{label:a.EMOJI_PICKER_CATEGORIES.OBJECTS,icon:T.DtIconLightbulb},{label:a.EMOJI_PICKER_CATEGORIES.SYMBOLS,icon:T.DtIconHeart},{label:a.EMOJI_PICKER_CATEGORIES.FLAGS,icon:T.DtIconFlag}],p=e.computed(()=>(c.showRecentlyUsedTab?j:j.slice(1)).map((l,n)=>({...l,label:c.tabsetLabels[n],id:(n+1).toString(),panelId:(n+1).toString()}))),S=e.computed(()=>c.emojiFilter.length>0),m=e.ref("1"),r=e.ref([]);e.watch(()=>c.scrollIntoTab,()=>{S.value||(m.value=(c.scrollIntoTab+1).toString())}),e.watch(S,()=>{S.value&&(m.value=null)});function R(t){const l=parseInt(t);m.value=t,d("selected-tabset",l)}function $(t){r.value.push(Z.returnFirstEl(t.$el))}function v(){r.value[0].focus()}function i(t,l){t.key==="Enter"&&(R(l),r.value[l-1].blur()),t.key==="Tab"&&(t.preventDefault(),t.shiftKey?d("focus-skin-selector"):d("focus-search-input")),t.key==="ArrowDown"&&d("focus-search-input")}return _({focusTabset:v}),(t,l)=>(e.openBlock(),e.createElementBlock("div",ne,[e.createVNode(e.unref(x.default),{size:"sm","tab-list-class":"d-emoji-picker__tabset-list",selected:m.value},{tabs:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,(n,h)=>(e.openBlock(),e.createBlock(e.unref(ee.default),{id:n.id,ref_for:!0,ref:u=>{u&&$(u)},key:n.id,"panel-id":n.panelId,label:n.label,"aria-controls":"d-emoji-picker-list",tabindex:h+1,onClickCapture:e.withModifiers(u=>R(n.id),["stop"]),onKeydown:u=>i(u,n.id)},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.icon),{size:"400"}))]),_:2},1032,["id","panel-id","label","tabindex","onClickCapture","onKeydown"]))),128))]),_:1},8,["selected"])]))}};function re(){const o=e.ref([]),_=e.ref([]),I=e.ref(!1),c=e.ref(!0);function d(t,l){r(t,l-1)||(o.value[t-1]?r(t-1,o.value[t-1].length-1):r(o.value.length-1,o.value[o.value.length-1].length-1))}function j(t,l){r(t,l+1)||r(t+1,0)||r(0,0)}function p(t,l){r(0,l-1)||r(0,_.value.length-1)}function S(t,l){r(0,l+1)||r(0,0)}function m(t,l,n){I.value?t==="left"?p(l,n):t==="right"&&S(l,n):t==="left"?d(l,n):t==="right"&&j(l,n)}function r(t,l){var h,u,g;const n=I.value?(h=_.value)==null?void 0:h[l]:(g=(u=o.value)==null?void 0:u[t])==null?void 0:g[l];return n?(n.focus(),!0):!1}function R(t,l,n){o.value[l]||(o.value[l]=[]),o.value[l][n]=t}function $(t,l){_.value[l]=t}function v(t,l){var n;if(c.value=!1,t===a.ARROW_KEYS.ARROW_UP){const h=l%a.EMOJIS_PER_ROW;if(!r(0,l-a.EMOJIS_PER_ROW)){const u=_.value.length-_.value.length%a.EMOJIS_PER_ROW+h;r(0,u),r(0,u)||r(0,_.value.length-1)}}if(t===a.ARROW_KEYS.ARROW_DOWN&&!r(0,l+a.EMOJIS_PER_ROW)){const h=l%a.EMOJIS_PER_ROW;(n=_.value)!=null&&n[l+(a.EMOJIS_PER_ROW-h)]?r(0,_.value.length-1):r(0,h)}t===a.ARROW_KEYS.ARROW_LEFT&&m("left",0,l),t===a.ARROW_KEYS.ARROW_RIGHT&&m("right",0,l)}function i(t,l,n){var h,u;if(t==="ArrowUp"){const g=n%a.EMOJIS_PER_ROW;if(l===0){const y=a.EMOJIS_PER_ROW-o.value[o.value.length-1].length%a.EMOJIS_PER_ROW,C=o.value[o.value.length-1].length+y-(a.EMOJIS_PER_ROW-g);r(o.value.length-1,C)||r(o.value.length-1,o.value[o.value.length-1].length-1);return}if(!r(l,n-a.EMOJIS_PER_ROW)){const y=l-1<0?0:l-1,C=o.value[y].length,B=C-C%a.EMOJIS_PER_ROW+g;r(y,B)||r(l-1,o.value[l-1].length-1)}}if(t==="ArrowDown"&&!r(l,n+a.EMOJIS_PER_ROW)){const g=n%a.EMOJIS_PER_ROW;(u=(h=o.value)==null?void 0:h[l])!=null&&u[n+(a.EMOJIS_PER_ROW-g)]?r(l,o.value[l].length-1):r(l+1,g)||r(0,g)||r(0,o.value[0].length-1)}t==="ArrowLeft"&&m("left",l,n),t==="ArrowRight"&&m("right",l,n)}return{emojiFilteredRefs:_,isFiltering:I,hoverFirstEmoji:c,setEmojiRef:R,setFilteredRef:$,focusEmoji:r,handleArrowNavigationFiltered:v,handleArrowNavigation:i}}const ie={class:"d-emoji-picker__selector"},ae={key:0,class:"d-emoji-picker__search-label d-emoji-picker__alignment"},ce={key:0},ue={class:"d-emoji-picker__tab"},fe=["aria-label","onClick","onFocusin","onMouseover","onKeydown"],de=["alt","aria-label","title","src"],me={key:2,class:"d-emoji-picker__alignment"},ve={class:"d-emoji-picker__tab","data-qa":"filtered-emojis"},be=["aria-label","onClick","onFocusin","onMouseover","onKeydown"],he=["alt","aria-label","title","src"],ke={__name:"emoji_selector",props:{emojiFilter:{type:String,default:""},skinTone:{type:String,required:!0},tabsetLabels:{type:Array,required:!0},selectedTabset:{type:Object,required:!0},searchResultsLabel:{type:String,required:!0},searchNoResultsLabel:{type:String,required:!0},recentlyUsedEmojis:{type:Array,default:()=>[]}},emits:["highlighted-emoji","selected-emoji","scroll-into-tab","focus-skin-selector","focus-search-input"],setup(o,{expose:_,emit:I}){const c=o,d=I,{emojiFilteredRefs:j,isFiltering:p,hoverFirstEmoji:S,setEmojiRef:m,setFilteredRef:r,focusEmoji:R,handleArrowNavigationFiltered:$,handleArrowNavigation:v}=re(),i=e.ref(null),t=e.ref(null),l=e.ref(null),n=["Recently used","People","Nature","Food","Activity","Travel","Objects","Symbols","Flags"],h=e.computed(()=>c.recentlyUsedEmojis.length?c.tabsetLabels.map(s=>({label:s,ref:e.ref(null)})):c.tabsetLabels.slice(1).map(s=>({label:s,ref:e.ref(null)}))),u=e.ref(h.value[0].label),g=e.computed(()=>c.recentlyUsedEmojis.length?n:n.slice(1)),y=e.ref([]),C=e.computed(()=>[...w.emojisGrouped[`People${c.skinTone}`],...w.emojisGrouped.Nature,...w.emojisGrouped.Food,...w.emojisGrouped[`Activity${c.skinTone}`],...w.emojisGrouped.Travel,...w.emojisGrouped[`Objects${c.skinTone}`],...w.emojisGrouped.Symbols,...w.emojisGrouped.Flags]),B=V(()=>{j.value=[],A()});e.watch(C,()=>{A()},{immediate:!0}),e.watch(()=>c.recentlyUsedEmojis,()=>{w.emojisGrouped["Recently used"]=c.recentlyUsedEmojis},{immediate:!0}),e.watch(()=>c.emojiFilter,()=>{U(),c.emojiFilter?p.value=!0:(p.value=!1,N(null)),B()}),e.watch(()=>c.selectedTabset,s=>{K(s.tabId)},{deep:!0});function M(s,f=!1){S.value=f,d("highlighted-emoji",s)}function A(){const s=c.emojiFilter.toLowerCase();y.value=C.value.filter(f=>{const k=f.name.toLowerCase().includes(s),E=f.keywords.some(b=>b.toLowerCase().includes(s));return k||E}),e.nextTick(()=>{s&&M(y.value[0],!0)})}function V(s,f=300){let k;return(...E)=>{clearTimeout(k),k=setTimeout(()=>s(...E),f)}}function J(s){return`${a.CDN_URL+s}.png`}function q(s){s.target.parentNode.style.display="none"}function K(s,f=!0){const E=h.value[s-1].ref.value[0];e.nextTick(()=>{const b=t.value,L=s===1?0:E.offsetTop-15;b.scrollTop=L,f&&R(s-1,0)})}function U(){const s=t.value;s.scrollTop=0}function G(){l.value=new IntersectionObserver(async s=>{s.forEach(f=>{var b,L,O,D,P;const{target:k}=f,E=parseInt(k.dataset.index);f.isIntersecting&&k.offsetTop<=i.value.offsetTop+50?(u.value=((b=h.value[E-1])==null?void 0:b.label)??((L=h.value[0])==null?void 0:L.label),d("scroll-into-tab",E-1)):f.boundingClientRect.bottom<=((O=i.value)==null?void 0:O.getBoundingClientRect().bottom)?(d("scroll-into-tab",E),u.value=(D=h.value[E])==null?void 0:D.label):E===1&&(d("scroll-into-tab",E),u.value=(P=h.value[0])==null?void 0:P.label)})}),l.value.observe(i.value),Array.from(t.value.children).forEach((s,f)=>{l.value.observe(s),s.dataset.index=f})}const W=(s,f,k)=>{if(s.preventDefault(),Object.values(a.ARROW_KEYS).includes(s.key)){$(s.key,f);return}switch(s.key){case"Tab":d("focus-skin-selector");break;case"Enter":F(k,s);break}},z=(s,f,k,E)=>{if(s.preventDefault(),Object.values(a.ARROW_KEYS).includes(s.key)){v(s.key,f,k);return}switch(s.key){case"Tab":s.shiftKey?R(f,0)&&f>0?K(f,!0):(K(1,!1),d("focus-search-input")):R(f+1,0)?K(f+1+1,!1):d("focus-skin-selector");break;case"Enter":F(E,s);break}};function F(s,f){d("selected-emoji",{...s,shift_key:f.shiftKey})}function N(s){d("highlighted-emoji",s)}function Y(){R(0,0)}function H(){K(g.value.length,!0)}return e.onMounted(()=>{G()}),e.onUnmounted(()=>{l.value.disconnect()}),_({focusEmojiSelector:Y,focusLastEmoji:H}),(s,f)=>(e.openBlock(),e.createElementBlock("div",ie,[e.createElementVNode("div",{id:"d-emoji-picker-list",ref_key:"listRef",ref:t,class:"d-emoji-picker__list"},[o.emojiFilter?(e.openBlock(),e.createElementBlock("p",ae,e.toDisplayString(y.value.length>0?o.searchResultsLabel:o.searchNoResultsLabel),1)):(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"tabCategoryRef",ref:i,class:"d-emoji-picker__category d-emoji-picker__alignment"},[e.createElementVNode("p",null,e.toDisplayString(u.value),1)],512)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.value,(k,E)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:E,ref_for:!0,ref:k.ref,class:"d-emoji-picker__alignment"},[E?(e.openBlock(),e.createElementBlock("p",ce,e.toDisplayString(k.label),1)):e.createCommentVNode("",!0),e.createElementVNode("div",ue,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(w.emojisGrouped)[g.value[E]+o.skinTone]?e.unref(w.emojisGrouped)[g.value[E]+o.skinTone]:e.unref(w.emojisGrouped)[g.value[E]],(b,L)=>(e.openBlock(),e.createElementBlock("button",{key:b.shortname,ref_for:!0,ref:O=>{O&&e.unref(m)(O,E,L)},type:"button","aria-label":b.name,onClick:O=>F(b,O),onFocusin:O=>N(b),onFocusout:f[0]||(f[0]=O=>N(null)),onMouseover:O=>N(b),onMouseleave:f[1]||(f[1]=O=>N(null)),onKeydown:O=>z(O,E,L,b)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:b.name,"aria-label":b.name,title:b.name,src:J(b.unicode_character),onError:q},null,40,de)],40,fe))),128))])])),[[e.vShow,!o.emojiFilter]])),128)),o.emojiFilter?(e.openBlock(),e.createElementBlock("div",me,[e.createElementVNode("div",ve,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.value,(k,E)=>(e.openBlock(),e.createElementBlock("button",{key:k.shortname,ref_for:!0,ref:b=>{b&&e.unref(r)(b,E)},type:"button","aria-label":k.name,class:e.normalizeClass({"hover-emoji":E===0&&e.unref(S)}),onClick:b=>F(k,b),onFocusin:b=>N(k),onFocusout:f[2]||(f[2]=b=>N(null)),onMouseover:b=>M(k),onMouseleave:f[3]||(f[3]=b=>M(null)),onKeydown:b=>W(b,E,k)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:k.name,"aria-label":k.name,title:k.name,src:`${e.unref(a.CDN_URL)+k.unicode_character}.png`},null,8,he)],42,be))),128))])])):e.createCommentVNode("",!0)],512)]))}},Ee={"data-qa":"skin-selector"},pe={class:"d-emoji-picker__skin-list"},_e=["onKeydown","onClick"],Se=["alt","aria-label","title","src"],Re={class:"d-emoji-picker__skin-selected"},ge=["aria-label"],ye=["alt","aria-label","title","src"],Ie={__name:"emoji_skin_selector",props:{skinTone:{type:String,required:!0},isHovering:{type:Boolean,default:!1},skinSelectorButtonTooltipLabel:{type:String,required:!0}},emits:["skin-tone","focus-tabset","focus-last-emoji"],setup(o,{expose:_,emit:I}){const c=o,d=I,j=[{name:":wave_tone1:",unicode_output:"1f44b-1f3fb",skinTone:a.EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,skinCode:"_tone1"},{name:":wave_tone2:",unicode_output:"1f44b-1f3fc",skinTone:a.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,skinCode:"_tone2"},{name:":wave_tone3:",unicode_output:"1f44b-1f3fd",skinTone:a.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,skinCode:"_tone3"},{name:":wave_tone4:",unicode_output:"1f44b-1f3fe",skinTone:a.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,skinCode:"_tone4"},{name:":wave_tone5:",unicode_output:"1f44b-1f3ff",skinTone:a.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,skinCode:"_tone5"},{name:":wave:",unicode_output:"1f44b",skinTone:a.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,skinCode:""}],p=e.ref(!1),S=e.ref(null),m=e.ref([]);e.watchEffect(()=>c.isHovering&&(p.value=!1));const r=e.computed(()=>j.find(n=>n.skinTone===c.skinTone)),R=e.ref(r.value);e.watchEffect(()=>r.value&&(R.value=r.value));function $(n){m.value.push(n)}function v(){S.value.focus()}function i(n){R.value=n,p.value=!1,d("skin-tone",n.skinTone),e.nextTick(()=>v())}const t=(n,h,u)=>{var g,y,C;n.preventDefault(),n.key==="ArrowLeft"&&(u===0&&((g=m.value[m.value.length-1])==null||g.focus()),(y=m.value[u-1])==null||y.focus()),n.key==="ArrowRight"&&((C=m.value[u+1])==null||C.focus()),n.key==="Enter"&&(h?i(h):l()),n.key==="Tab"&&(n.shiftKey?d("focus-last-emoji"):d("focus-tabset"))};function l(){p.value=!p.value,e.nextTick(()=>m.value[0].focus())}return _({focusSkinSelector:v}),(n,h)=>(e.openBlock(),e.createElementBlock("div",Ee,[e.withDirectives(e.createElementVNode("div",pe,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(j,(u,g)=>e.createElementVNode("button",{ref_for:!0,ref:y=>{y&&$(y)},key:u.name,class:e.normalizeClass({selected:R.value.skinCode===u.skinCode}),onKeydown:y=>t(y,u,g),onClick:y=>i(u)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:u.name,"aria-label":u.name,title:u.name,src:`${e.unref(a.CDN_URL)+u.unicode_output}.png`},null,8,Se)],42,_e)),64))],512),[[e.vShow,p.value]]),e.withDirectives(e.createElementVNode("div",Re,[e.createVNode(e.unref(te.default),{placement:"top-end"},{anchor:e.withCtx(()=>[e.createElementVNode("button",{ref_key:"skinSelectorRef",ref:S,"aria-label":o.skinSelectorButtonTooltipLabel,tabindex:"-1",onClick:l,onKeydown:h[0]||(h[0]=u=>t(u))},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:R.value.name,"aria-label":R.value.name,title:R.value.name,src:`${e.unref(a.CDN_URL)+R.value.unicode_output}.png`},null,8,ye)],40,ge)]),default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.skinSelectorButtonTooltipLabel)+" ",1)]),_:1})],512),[[e.vShow,!p.value]])]))}},je={class:"d-emoji-picker__data"},Oe=["alt","aria-label","title","src"],we={__name:"emoji_description",props:{emoji:{type:Object,default:null}},setup(o){return(_,I)=>{var c;return e.openBlock(),e.createElementBlock("div",je,[o.emoji?(e.openBlock(),e.createElementBlock("img",{key:0,class:"d-icon d-icon--size-500",alt:o.emoji.name,"aria-label":o.emoji.name,title:o.emoji.name,src:`${e.unref(a.CDN_URL)+o.emoji.unicode_character}.png`},null,8,Oe)):e.createCommentVNode("",!0),e.createElementVNode("div",null,e.toDisplayString((c=o.emoji)==null?void 0:c.name),1)])}}},Te={class:"d-emoji-picker"},Ce={class:"d-emoji-picker--header"},$e={class:"d-emoji-picker--body"},Ne={class:"d-emoji-picker--footer"},Le={__name:"emoji_picker",props:{recentlyUsedEmojis:{type:Array,default:()=>[]},searchPlaceholderLabel:{type:String,required:!0},searchResultsLabel:{type:String,required:!0},searchNoResultsLabel:{type:String,required:!0},tabSetLabels:{type:Array,required:!0},skinTone:{type:String,default:"Default"},skinSelectorButtonTooltipLabel:{type:String,required:!0},searchQuery:{type:String,default:""},showSearch:{type:Boolean,default:!0}},emits:["selected-emoji","skin-tone","close"],setup(o,{emit:_}){const I=o,c=_,d=e.ref(I.searchQuery.value),j=e.ref(null),p=e.ref({}),S=e.ref(0),m=e.computed(()=>I.recentlyUsedEmojis.length>0);e.watch(()=>I.searchQuery,v=>{d.value=v});function r(v){d.value="",p.value=v,p.value={...p.value,tabId:v}}function R(v){S.value=v}function $(v){j.value=v}return(v,i)=>(e.openBlock(),e.createElementBlock("div",Te,[e.createElementVNode("div",Ce,[e.createVNode(se,{ref:"tabsetRef","emoji-filter":d.value,"show-recently-used-tab":m.value,"scroll-into-tab":S.value,"tabset-labels":o.tabSetLabels,onFocusSkinSelector:i[0]||(i[0]=t=>v.$refs.skinSelectorRef.focusSkinSelector()),onFocusSearchInput:i[1]||(i[1]=t=>o.showSearch?v.$refs.searchInputRef.focusSearchInput():v.$refs.emojiSelectorRef.focusEmojiSelector()),onSelectedTabset:r,onKeydown:i[2]||(i[2]=e.withKeys(t=>c("close"),["esc"]))},null,8,["emoji-filter","show-recently-used-tab","scroll-into-tab","tabset-labels"])]),e.createElementVNode("div",$e,[o.showSearch?(e.openBlock(),e.createBlock(le,{key:0,ref:"searchInputRef",modelValue:d.value,"onUpdate:modelValue":i[3]||(i[3]=t=>d.value=t),"search-placeholder-label":o.searchPlaceholderLabel,onSelectFirstEmoji:i[4]||(i[4]=t=>c("selected-emoji",j.value)),onFocusTabset:i[5]||(i[5]=t=>v.$refs.tabsetRef.focusTabset()),onFocusEmojiSelector:i[6]||(i[6]=t=>v.$refs.emojiSelectorRef.focusEmojiSelector()),onKeydown:i[7]||(i[7]=e.withKeys(t=>c("close"),["esc"]))},null,8,["modelValue","search-placeholder-label"])):e.createCommentVNode("",!0),e.createVNode(ke,{ref:"emojiSelectorRef","emoji-filter":d.value,"skin-tone":o.skinTone,"tabset-labels":o.tabSetLabels,"search-results-label":o.searchResultsLabel,"search-no-results-label":o.searchNoResultsLabel,"recently-used-emojis":o.recentlyUsedEmojis,"selected-tabset":p.value,onScrollIntoTab:R,onHighlightedEmoji:$,onSelectedEmoji:i[8]||(i[8]=t=>c("selected-emoji",t)),onFocusSkinSelector:i[9]||(i[9]=t=>v.$refs.skinSelectorRef.focusSkinSelector()),onFocusSearchInput:i[10]||(i[10]=t=>o.showSearch?v.$refs.searchInputRef.focusSearchInput():v.$refs.tabsetRef.focusTabset()),onKeydown:i[11]||(i[11]=e.withKeys(t=>c("close"),["esc"]))},null,8,["emoji-filter","skin-tone","tabset-labels","search-results-label","search-no-results-label","recently-used-emojis","selected-tabset"])]),e.createElementVNode("div",Ne,[e.createVNode(we,{emoji:j.value},null,8,["emoji"]),e.createVNode(Ie,{ref:"skinSelectorRef","is-hovering":!!j.value,"skin-selector-button-tooltip-label":o.skinSelectorButtonTooltipLabel,"skin-tone":o.skinTone,onSkinTone:i[12]||(i[12]=t=>c("skin-tone",t)),onFocusTabset:i[13]||(i[13]=t=>v.$refs.tabsetRef.focusTabset()),onFocusLastEmoji:i[14]||(i[14]=t=>v.$refs.emojiSelectorRef.focusLastEmoji()),onKeydown:i[15]||(i[15]=e.withKeys(t=>c("close"),["esc"]))},null,8,["is-hovering","skin-selector-button-tooltip-label","skin-tone"])])]))}};exports.default=Le;
+//# sourceMappingURL=emoji-picker.cjs.map

package/dist/vue3/lib/emoji-picker/emoji-picker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-picker.cjs","sources":["../../../components/emoji_picker/modules/emoji_search.vue","../../../components/emoji_picker/modules/emoji_tabset.vue","../../../components/emoji_picker/composables/useKeyboardNavigation.js","../../../components/emoji_picker/modules/emoji_selector.vue","../../../components/emoji_picker/modules/emoji_skin_selector.vue","../../../components/emoji_picker/emoji_picker.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n    <dt-input\n      id=\"searchInput\"\n      ref=\"searchInput\"\n      :placeholder=\"searchPlaceholderLabel\"\n      :model-value=\"modelValue\"\n      @update:model-value=\"$emit('update:modelValue', $event)\"\n      @keydown.up=\"$emit('focus-tabset')\"\n      @keydown.down.prevent=\"$emit('focus-emoji-selector')\"\n      @keydown.enter=\"$emit('select-first-emoji')\"\n    >\n      <template #leftIcon>\n        <dt-icon-search\n          size=\"200\"\n        />\n      </template>\n      <template\n        v-if=\"modelValue.length > 0\"\n        #rightIcon\n      >\n        <dt-button\n          importance=\"clear\"\n          size=\"xs\"\n          class=\"d-emoji-picker__search-x-button\"\n          circle\n          kind=\"muted\"\n          @click=\"clearSearch\"\n        >\n          <template #icon>\n            <dt-icon-close\n              size=\"200\"\n            />\n          </template>\n        </dt-button>\n      </template>\n    </dt-input>\n  </div>\n</template>\n\n<script setup>\nimport { DtIconSearch, DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\nimport { onMounted, ref } from 'vue';\n\ndefineProps({\n  searchPlaceholderLabel: {\n    type: String,\n    required: true,\n  },\n  modelValue: {\n    type: String,\n    default: '',\n  },\n});\n\nconst emits = defineEmits(['update:modelValue', 'focus-emoji-selector', 'focus-tabset', 'select-first-emoji']);\n\nconst searchInput = ref(null);\n\nfunction clearSearch () {\n  emits('update:modelValue', '');\n  focusSearchInput();\n}\n\nfunction focusSearchInput () {\n  searchInput.value.focus();\n}\nonMounted(() => {\n  focusSearchInput();\n});\n\ndefineExpose({\n  focusSearchInput,\n});\n</script>\n","<template>\n  <div class=\"d-emoji-picker__tabset\">\n    <dt-tab-group\n      size=\"sm\"\n      tab-list-class=\"d-emoji-picker__tabset-list\"\n      :selected=\"selectedTab\"\n    >\n      <template #tabs>\n        <dt-tab\n          v-for=\"(tab, index) in tabs\"\n          :id=\"tab.id\"\n          :ref=\"el => { if (el) setTabsetRef(el) }\"\n          :key=\"tab.id\"\n          :panel-id=\"tab.panelId\"\n          :label=\"tab.label\"\n          aria-controls=\"d-emoji-picker-list\"\n          :tabindex=\"index + 1\"\n          @click.capture.stop=\"selectTabset(tab.id)\"\n          @keydown=\"handleKeyDown($event, tab.id)\"\n        >\n          <component\n            :is=\"tab.icon\"\n            size=\"400\"\n          />\n        </dt-tab>\n      </template>\n    </dt-tab-group>\n  </div>\n</template>\n\n<script setup>\nimport { computed, ref, watch } from 'vue';\nimport { DtTab, DtTabGroup } from '@/components/tab';\nimport { returnFirstEl } from '@/common/utils';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker/emoji_picker_constants.js';\nimport {\n  DtIconClock,\n  DtIconSatisfied,\n  DtIconLivingThing,\n  DtIconFood,\n  DtIconObject,\n  DtIconTransportation,\n  DtIconLightbulb,\n  DtIconHeart,\n  DtIconFlag,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst props = defineProps({\n  /**\n   * Whether to show the recently used tab or not\n   * @type {Boolean}\n   * @default false\n   */\n  showRecentlyUsedTab: {\n    type: Boolean,\n    default: false,\n  },\n\n  scrollIntoTab: {\n    type: Number,\n    required: true,\n  },\n\n  emojiFilter: {\n    type: String,\n    default: '',\n  },\n\n  /**\n   * The labels for the aria-label\n   * @type {Array}\n   * @required\n   */\n  tabsetLabels: {\n    type: Array,\n    required: true,\n  },\n});\n\nconst emits = defineEmits([\n  /**\n   * Emitted when a tab is selected\n   * @event selected-tabset\n   * @param {String} tabId - The name of the tab that was selected\n   */\n  'selected-tabset',\n\n  'focus-search-input',\n  'focus-skin-selector',\n]);\n\nconst TABS_DATA = [\n  { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: DtIconClock },\n  { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: DtIconSatisfied },\n  { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: DtIconLivingThing },\n  { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: DtIconFood },\n  { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: DtIconObject },\n  { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: DtIconTransportation },\n  { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: DtIconLightbulb },\n  { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: DtIconHeart },\n  { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: DtIconFlag },\n];\n\nconst tabs = computed(() => {\n  const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);\n\n  return tabsData.map((tab, index) => ({\n    ...tab,\n    label: props.tabsetLabels[index],\n    // IDs on dt-tab component need to be on string\n    id: (index + 1).toString(),\n    panelId: (index + 1).toString(),\n  }));\n});\n\nconst isSearching = computed(() => props.emojiFilter.length > 0);\n\nconst selectedTab = ref('1');\n\nconst tabsetRef = ref([]);\n\nwatch(() => props.scrollIntoTab,\n  () => {\n    if (!isSearching.value) {\n      selectedTab.value = (props.scrollIntoTab + 1).toString();\n    }\n  });\n\nwatch(isSearching,\n  () => {\n    if (isSearching.value) {\n      selectedTab.value = null;\n    }\n  });\n\n/**\n * We are using .capture.stop modifiers on the click event\n * because we don't want to trigger the click event of the\n * dt-tab component\n */\nfunction selectTabset (id) {\n  // IDs on scrollToTab need to be on number\n  const parseId = parseInt(id);\n  // IDs on dt-tab component need to be on string\n  selectedTab.value = id;\n  emits('selected-tabset', parseId);\n}\n\nfunction setTabsetRef (ref) {\n  // We push the $el, because $el is the button inside the dt-tab component\n  // and we need the button to focus it\n  tabsetRef.value.push(returnFirstEl(ref.$el));\n}\n\nfunction focusTabset () {\n  tabsetRef.value[0].focus();\n}\n\nfunction handleKeyDown (event, tabId) {\n  if (event.key === 'Enter') {\n    selectTabset(tabId);\n    // We blur because seems like the tab component override the selected prop, and it removes the selected style\n    tabsetRef.value[tabId - 1].blur();\n  }\n\n  if (event.key === 'Tab') {\n    event.preventDefault();\n    if (event.shiftKey) {\n      emits('focus-skin-selector');\n    } else {\n      emits('focus-search-input');\n    }\n  }\n\n  if (event.key === 'ArrowDown') {\n    // Jump to search input\n    emits('focus-search-input');\n  }\n}\n\ndefineExpose({\n  focusTabset,\n});\n</script>\n","import { ref } from 'vue';\nimport { EMOJIS_PER_ROW, ARROW_KEYS } from '@/components/emoji_picker/emoji_picker_constants';\n\nexport function useKeyboardNavigation () {\n  const emojiRefs = ref([]);\n  const emojiFilteredRefs = ref([]);\n  const isFiltering = ref(false);\n  const hoverFirstEmoji = ref(true);\n\n  function _handleArrowLeft (indexTab, indexEmoji) {\n    if (!focusEmoji(indexTab, indexEmoji - 1)) {\n      if (emojiRefs.value[indexTab - 1]) {\n        focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);\n      } else {\n        focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);\n      }\n    }\n  }\n\n  function _handleArrowRight (indexTab, indexEmoji) {\n    if (!focusEmoji(indexTab, indexEmoji + 1)) {\n      if (!focusEmoji(indexTab + 1, 0)) {\n        focusEmoji(0, 0);\n      }\n    }\n  }\n\n  function _handleArrowLeftFiltered (indexTab, indexEmoji) {\n    if (!focusEmoji(0, indexEmoji - 1)) {\n      focusEmoji(0, emojiFilteredRefs.value.length - 1);\n    }\n  }\n\n  function _handleArrowRightFiltered (indexTab, indexEmoji) {\n    if (!focusEmoji(0, indexEmoji + 1)) {\n      focusEmoji(0, 0);\n    }\n  }\n\n  function _handleHorizontalNavigation (direction, indexTab, indexEmoji) {\n    if (isFiltering.value) {\n      if (direction === 'left') {\n        _handleArrowLeftFiltered(indexTab, indexEmoji);\n      } else if (direction === 'right') {\n        _handleArrowRightFiltered(indexTab, indexEmoji);\n      }\n    } else {\n      if (direction === 'left') {\n        _handleArrowLeft(indexTab, indexEmoji);\n      } else if (direction === 'right') {\n        _handleArrowRight(indexTab, indexEmoji);\n      }\n    }\n  }\n\n  function focusEmoji (indexTab, indexEmoji) {\n    const emojiRef = isFiltering.value\n      ? emojiFilteredRefs.value?.[indexEmoji]\n      : emojiRefs.value?.[indexTab]?.[indexEmoji];\n\n    if (emojiRef) {\n      emojiRef.focus();\n      return true;\n    }\n\n    return false;\n  }\n\n  function setEmojiRef (el, indexTab, indexEmoji) {\n    if (!emojiRefs.value[indexTab]) {\n      emojiRefs.value[indexTab] = [];\n    }\n    emojiRefs.value[indexTab][indexEmoji] = el;\n  }\n\n  function setFilteredRef (el, index) {\n    emojiFilteredRefs.value[index] = el;\n  }\n\n  function handleArrowNavigationFiltered (key, indexEmoji) {\n    hoverFirstEmoji.value = false;\n\n    if (key === ARROW_KEYS.ARROW_UP) {\n      const position = indexEmoji % EMOJIS_PER_ROW;\n\n      if (!focusEmoji(0, indexEmoji - EMOJIS_PER_ROW)) {\n        const lastEmojiPosition =\n        emojiFilteredRefs.value.length - (emojiFilteredRefs.value.length % EMOJIS_PER_ROW) + position;\n\n        focusEmoji(0, lastEmojiPosition);\n\n        if (!focusEmoji(0, lastEmojiPosition)) {\n          focusEmoji(0, emojiFilteredRefs.value.length - 1);\n        }\n      }\n    }\n\n    if (key === ARROW_KEYS.ARROW_DOWN) {\n      if (!focusEmoji(0, indexEmoji + EMOJIS_PER_ROW)) {\n        const position = indexEmoji % EMOJIS_PER_ROW;\n\n        if (emojiFilteredRefs.value?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n          focusEmoji(0, emojiFilteredRefs.value.length - 1);\n        } else {\n          focusEmoji(0, position);\n        }\n      }\n    }\n\n    if (key === ARROW_KEYS.ARROW_LEFT) {\n      _handleHorizontalNavigation('left', 0, indexEmoji);\n    }\n\n    if (key === ARROW_KEYS.ARROW_RIGHT) {\n      _handleHorizontalNavigation('right', 0, indexEmoji);\n    }\n  }\n\n  function handleArrowNavigation (key, indexTab, indexEmoji) {\n    if (key === 'ArrowUp') {\n      const position = indexEmoji % EMOJIS_PER_ROW;\n\n      if (indexTab === 0) {\n      // we are on the first emoji tab, then we should jump to the last row of the last emoji tab\n        const numberOfMissingEmojis =\n        EMOJIS_PER_ROW - (emojiRefs.value[emojiRefs.value.length - 1].length % EMOJIS_PER_ROW);\n\n        const emojiToJump =\n        emojiRefs.value[emojiRefs.value.length - 1].length + numberOfMissingEmojis - (EMOJIS_PER_ROW - position);\n\n        if (!focusEmoji(emojiRefs.value.length - 1, emojiToJump)) {\n        // if there is no emoji in this position, jump to the last emoji of the row\n          focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);\n        }\n        return;\n      }\n\n      // if we are not on the first tab, we should jump to the previous row of the current tab\n      if (!focusEmoji(indexTab, indexEmoji - EMOJIS_PER_ROW)) {\n      // if there is no previous row, we should jump to emoji in the sampe position of the previous tab\n        const previousTab = indexTab - 1 < 0 ? 0 : indexTab - 1;\n        const emojisInPreviousTab = emojiRefs.value[previousTab].length;\n        const lastEmojiPosition = emojisInPreviousTab - (emojisInPreviousTab % EMOJIS_PER_ROW) + position;\n\n        if (!focusEmoji(previousTab, lastEmojiPosition)) {\n        // if there is no emoji in this position, jump to the last emoji of the row\n          focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);\n        }\n      }\n    }\n\n    if (key === 'ArrowDown') {\n      if (!focusEmoji(indexTab, indexEmoji + EMOJIS_PER_ROW)) {\n      // if cannot go down\n\n        // Calculate position from cell 0 to cell 8\n        const position = indexEmoji % EMOJIS_PER_ROW;\n\n        // check if it exists a next row in the current tab\n        if (emojiRefs.value?.[indexTab]?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n        // if it exists, we should focus the last emoji of the next row in the current tab\n          focusEmoji(indexTab, emojiRefs.value[indexTab].length - 1);\n        // if we are at the end of the list it will do nothing\n        } else {\n        // We don't have next row, we are in the last of the tab, then jump\n        // to the next tab but in the equal emoji position in row 0.\n\n          if (!focusEmoji(indexTab + 1, position)) {\n          // We are on the bottom!, should jump to the same position emoji in the first row of the first tabset\n          // if it doesn't has, jump to the last\n            if (!focusEmoji(0, position)) {\n              focusEmoji(0, emojiRefs.value[0].length - 1);\n            }\n          }\n        }\n      }\n    }\n\n    if (key === 'ArrowLeft') {\n      _handleHorizontalNavigation('left', indexTab, indexEmoji);\n    }\n\n    if (key === 'ArrowRight') {\n      _handleHorizontalNavigation('right', indexTab, indexEmoji);\n    }\n  }\n\n  return {\n    emojiFilteredRefs,\n    isFiltering,\n    hoverFirstEmoji,\n    setEmojiRef,\n    setFilteredRef,\n    focusEmoji,\n    handleArrowNavigationFiltered,\n    handleArrowNavigation,\n  };\n}\n","<template>\n  <div\n    class=\"d-emoji-picker__selector\"\n  >\n    <div\n      id=\"d-emoji-picker-list\"\n      ref=\"listRef\"\n      class=\"d-emoji-picker__list\"\n    >\n      <p\n        v-if=\"emojiFilter\"\n        class=\"d-emoji-picker__search-label d-emoji-picker__alignment\"\n      >\n        {{ filteredEmojis.length > 0 ? searchResultsLabel : searchNoResultsLabel }}\n      </p>\n      <div\n        v-else\n        ref=\"tabCategoryRef\"\n        class=\"d-emoji-picker__category d-emoji-picker__alignment\"\n      >\n        <p>\n          {{ fixedLabel }}\n        </p>\n      </div>\n      <div\n        v-for=\"(tabLabel, indexTab) in tabLabels\"\n        v-show=\"!emojiFilter\"\n        :key=\"indexTab\"\n        :ref=\"tabLabel.ref\"\n        class=\"d-emoji-picker__alignment\"\n      >\n        <p\n          v-if=\"indexTab\"\n        >\n          {{ tabLabel.label }}\n        </p>\n        <div\n          class=\"d-emoji-picker__tab\"\n        >\n          <button\n            v-for=\"(emoji, indexEmoji) in\n            (emojis[tabs[indexTab] + skinTone] ? emojis[tabs[indexTab] + skinTone] : emojis[tabs[indexTab]])\"\n            :key=\"emoji.shortname\"\n            :ref=\"el => { if (el) setEmojiRef(el, indexTab, indexEmoji) }\"\n            type=\"button\"\n            :aria-label=\"emoji.name\"\n            @click=\"event => selectEmoji(emoji, event)\"\n            @focusin=\"highlightEmoji(emoji)\"\n            @focusout=\"highlightEmoji(null)\"\n            @mouseover=\"highlightEmoji(emoji)\"\n            @mouseleave=\"highlightEmoji(null)\"\n            @keydown=\"event => handleKeyDown(event, indexTab, indexEmoji, emoji)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"emoji.name\"\n              :aria-label=\"emoji.name\"\n              :title=\"emoji.name\"\n              :src=\"getImgSrc(emoji.unicode_character)\"\n              @error=\"handleImageError\"\n            >\n          </button>\n        </div>\n      </div>\n      <div\n        v-if=\"emojiFilter\"\n        class=\"d-emoji-picker__alignment\"\n      >\n        <div\n          class=\"d-emoji-picker__tab \"\n          data-qa=\"filtered-emojis\"\n        >\n          <button\n            v-for=\"(emoji, index) in filteredEmojis\"\n            :key=\"emoji.shortname\"\n            :ref=\"el => { if (el) setFilteredRef(el, index) }\"\n            type=\"button\"\n            :aria-label=\"emoji.name\"\n            :class=\"{\n              'hover-emoji': (index === 0 && hoverFirstEmoji),\n            }\"\n            @click=\"event => selectEmoji(emoji, event)\"\n            @focusin=\"highlightEmoji(emoji)\"\n            @focusout=\"highlightEmoji(null)\"\n            @mouseover=\"hoverEmoji(emoji)\"\n            @mouseleave=\"hoverEmoji(null)\"\n            @keydown=\"event => handleKeyDownFilteredEmojis(event, index, emoji)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"emoji.name\"\n              :aria-label=\"emoji.name\"\n              :title=\"emoji.name\"\n              :src=\"`${CDN_URL + emoji.unicode_character}.png`\"\n            >\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\n/* eslint-disable max-len */\n/* eslint-disable max-lines */\nimport { emojisGrouped as emojis } from '@dialpad/dialtone-emojis';\nimport { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue';\nimport { CDN_URL, ARROW_KEYS } from '@/components/emoji_picker/emoji_picker_constants';\nimport { useKeyboardNavigation } from '@/components/emoji_picker/composables/useKeyboardNavigation';\n\nconst props = defineProps({\n  /**\n   * The filter to apply to the emoji list\n   * @type {String}\n   * @default ''\n   */\n  emojiFilter: {\n    type: String,\n    default: '',\n  },\n\n  /**\n   * The skin tone to apply to the emoji list\n   * @type {String}\n   * @required\n   */\n  skinTone: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The labels for the tabset\n   * @type {Array}\n   * @required\n   */\n  tabsetLabels: {\n    type: Array,\n    required: true,\n  },\n\n  selectedTabset: {\n    type: Object,\n    required: true,\n  },\n\n  /**\n   * The label for the search results tab\n   * @type {String}\n   * @required\n   */\n  searchResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  searchNoResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The list of recently used emojis\n   * @type {Array}\n   */\n  recentlyUsedEmojis: {\n    type: Array,\n    default: () => [],\n  },\n});\n\nconst emits = defineEmits([\n  /**\n   * Emitted when the user hover over an emoji\n   * @event highlighted-emoji\n   * @param {Object} emoji - The emoji data that was hovered\n    */\n  'highlighted-emoji',\n\n  /**\n   * Emitted when the user select an emoji\n   * @event selected-emoji\n   * @param {Object} emoji - The emoji data that was selected\n    */\n  'selected-emoji',\n\n  /**\n   * Emitted when the user scroll into an emoji tab\n   * @event scroll-into-tab\n   * @param {Number} tab-index - The tab that was scrolled into\n    */\n  'scroll-into-tab',\n\n  /**\n   * Emitted when the user reach the end of the emoji list\n   * @event focus-skin-selector\n    */\n  'focus-skin-selector',\n\n  /**\n   * Emitted when the user shift tab in first tab of emoji selector\n   * @event focus-search-input\n    */\n  'focus-search-input',\n]);\n\nconst {\n  emojiFilteredRefs,\n  isFiltering,\n  hoverFirstEmoji,\n  setEmojiRef,\n  setFilteredRef,\n  focusEmoji,\n  handleArrowNavigationFiltered,\n  handleArrowNavigation,\n} = useKeyboardNavigation();\n\n/**\n * The ref for the tab category\n * This is used to display the fixed label\n */\nconst tabCategoryRef = ref(null);\n\n/**\n * The ref for the list\n * This is used to display the tabs\n */\nconst listRef = ref(null);\n\n/**\n * The ref for the tab label observer\n * This is used to update the fixed label\n */\nconst tabLabelObserver = ref(null);\n\n/**\n * The list of tabs\n * This is used to display the tabs\n */\nconst TABS_DATA = ['Recently used', 'People', 'Nature', 'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags'];\n\n/**\n * The list of tab labels\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis list is empty\n * If it is empty, it will remove the recently used tab\n */\nconst tabLabels = computed(() => {\n  return props.recentlyUsedEmojis.length\n    ? props.tabsetLabels.map((label) => ({ label, ref: ref(null) }))\n    : props.tabsetLabels.slice(1).map((label) => ({ label, ref: ref(null) }));\n});\n\n/**\n * The label of the fixed tab\n * This is used to display the fixed label\n */\nconst fixedLabel = ref(tabLabels.value[0].label);\n\n/**\n * The list of tabs\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis list is empty\n * If it is empty, it will remove the recently used tab\n * The difference between this and the tab labels is that this one will set the structure of tabs\n * and the tab labels will set the labels\n */\nconst tabs = computed(() => {\n  return props.recentlyUsedEmojis.length ? TABS_DATA : TABS_DATA.slice(1);\n});\n\n/**\n * The list of current emojis that match the filter\n * This will be updated when the emojiFilter changes\n * This is used to display the search results\n * The difference between this and the current emojis list is that this one will not have the skin tone applied\n */\nconst filteredEmojis = ref([]);\n\n/**\n * The current emojis list we are displaying\n * This will be updated when the skin tone changes\n * The difference between this and the emojis list is that this one will have only the skin tone applied\n */\nconst currentEmojis = computed(() => {\n  return [\n    ...emojis[`People${props.skinTone}`],\n    ...emojis.Nature,\n    ...emojis.Food,\n    ...emojis[`Activity${props.skinTone}`],\n    ...emojis.Travel,\n    ...emojis[`Objects${props.skinTone}`],\n    ...emojis.Symbols,\n    ...emojis.Flags,\n  ];\n});\n\n/**\n * This will trigger the searchByNameAndKeywords function with debounce of 300 milliseconds\n */\nconst debouncedSearch = debounce(() => {\n  // We clean the emojiFilteredRefs to have an updated ref list for the search results\n  emojiFilteredRefs.value = [];\n  searchByNameAndKeywords();\n});\n\n/**\n * Update the current emojis list on skin tone changes\n * Also update the filtered emojis list\n * @listens skinTone\n */\nwatch(currentEmojis, () => {\n  searchByNameAndKeywords();\n}, { immediate: true });\n\n/**\n * Update the recently used emojis list on recently used emojis prop changes\n * @listens recentlyUsedEmojis\n */\nwatch(() => props.recentlyUsedEmojis,\n  () => {\n    emojis['Recently used'] = props.recentlyUsedEmojis;\n  }, { immediate: true });\n\n/**\n * Search for emojis by name and keywords\n * Will update the filtered emojis list on emojiFilter update\n * @listens emojiFilter\n */\nwatch(() => props.emojiFilter, () => {\n  resetScroll();\n  if (props.emojiFilter) {\n    isFiltering.value = true;\n  } else {\n    isFiltering.value = false;\n    // If the emoji filter is empty, emit null to remove the highlighted emoji\n    // of the previous search\n    highlightEmoji(null);\n  }\n  debouncedSearch();\n});\n\nwatch(\n  () => props.selectedTabset,\n  (tab) => {\n    scrollToTab(tab.tabId);\n  },\n  { deep: true },\n);\n\nfunction hoverEmoji (emoji, isFirst = false) {\n  hoverFirstEmoji.value = isFirst;\n  emits('highlighted-emoji', emoji);\n}\n\n/**\n * Filters an array of emoji objects based on a search string that matches both the name and keywords.\n * Will update the filtered emojis list\n */\nfunction searchByNameAndKeywords () {\n  const searchStr = props.emojiFilter.toLowerCase();\n  filteredEmojis.value = currentEmojis.value.filter(obj => {\n    const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);\n    const keywordsIncludeSearchStr = obj.keywords.some(keyword => keyword.toLowerCase().includes(searchStr));\n    return nameIncludesSearchStr || keywordsIncludeSearchStr;\n  });\n  nextTick(() => {\n    if (searchStr) {\n      hoverEmoji(filteredEmojis.value[0], true);\n    }\n  });\n}\n\nfunction debounce (fn, delay = 300) {\n  let timeout;\n\n  return (...args) => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => fn(...args), delay);\n  };\n}\n\nfunction getImgSrc (emoji) {\n  return `${CDN_URL + emoji}.png`;\n}\n\n/**\n * Handle image error - We hide the entire button if the image is not found\n */\nfunction handleImageError (event) {\n  event.target.parentNode.style.display = 'none';\n}\n\n/**\n * Scroll to the selected tab\n */\nfunction scrollToTab (tabIndex, focusFirstEmoji = true) {\n  const tabLabel = tabLabels.value[tabIndex - 1];\n  const tabElement = tabLabel.ref.value[0];\n\n  nextTick(() => {\n    const container = listRef.value;\n    const offsetTop = tabIndex === 1 ? 0 : tabElement.offsetTop - 15;\n\n    container.scrollTop = offsetTop;\n\n    if (focusFirstEmoji) {\n      focusEmoji((tabIndex - 1), 0);\n    }\n  });\n}\n\nfunction resetScroll () {\n  const container = listRef.value;\n\n  container.scrollTop = 0;\n}\n\n/**\n * This code creates an IntersectionObserver object that monitors the intersection between\n * the root element (tabCategoryRef) and its targets (the child elements of listRef),\n * and updates the value of the fixedLabel variable accordingly.\n */\nfunction setTabLabelObserver () {\n  /**\n   * The code extracts the target element and its index from the IntersectionObserverEntry object,\n   * and checks whether the target intersects with the root and is positioned above or below it.\n   */\n  tabLabelObserver.value = new IntersectionObserver(async (entries) => {\n    // eslint-disable-next-line complexity\n    entries.forEach(entry => {\n      const { target } = entry;\n      const index = parseInt(target.dataset.index);\n\n      /**\n       * If the target is positioned above the root,\n       * the code updates the value of the fixed label to the label of the previous tab,\n       * or the first tab if the current tab is the first one. If the target is positioned below the root, the code\n       * updates the value of the fixed label to the label of the current tab.\n       * If the target stops intersecting with the root and its index is 1 (the second tab),\n       * the code updates the value of the fixed label to the label of the first tab.\n       * NOTES:\n       * This last condition is needed because sometimes it is\n       * not detect the intersection between the root and the target.\n       * We also provide a 50 pixels offset to the root element in the first condition to always get the\n       * first tab if it has fewer emojis, because in some cases if you quickly scroll the observer does not detect it.\n       */\n      if (entry.isIntersecting && target.offsetTop <= tabCategoryRef.value.offsetTop + 50) {\n        fixedLabel.value = tabLabels.value[index - 1]?.label ?? tabLabels.value[0]?.label;\n        emits('scroll-into-tab', index - 1);\n      } else if (entry.boundingClientRect.bottom <= tabCategoryRef.value?.getBoundingClientRect().bottom) {\n        emits('scroll-into-tab', index);\n        fixedLabel.value = tabLabels.value[index]?.label;\n      } else if (index === 1) {\n        emits('scroll-into-tab', index);\n        fixedLabel.value = tabLabels.value[0]?.label;\n      }\n    });\n  });\n\n  /**\n   * The tabLabelObserver is set to observe the root element and all its children elements with\n   * the IntersectionObserver object, and sets their data-index attribute to their index.\n   */\n  tabLabelObserver.value.observe(tabCategoryRef.value);\n\n  Array.from(listRef.value.children).forEach((child, index) => {\n    tabLabelObserver.value.observe(child);\n    child.dataset.index = index;\n  });\n}\n\nconst handleKeyDownFilteredEmojis = (event, indexEmoji, emoji) => {\n  event.preventDefault();\n\n  if (Object.values(ARROW_KEYS).includes(event.key)) {\n    handleArrowNavigationFiltered(event.key, indexEmoji);\n    return;\n  }\n\n  switch (event.key) {\n    case 'Tab':\n      emits('focus-skin-selector');\n      break;\n    case 'Enter':\n      selectEmoji(emoji, event);\n      break;\n    default:\n      break;\n  }\n};\n\n/* eslint-disable-next-line complexity */\nconst handleKeyDown = (event, indexTab, indexEmoji, emoji) => {\n  event.preventDefault();\n\n  if (Object.values(ARROW_KEYS).includes(event.key)) {\n    handleArrowNavigation(event.key, indexTab, indexEmoji);\n    return;\n  }\n\n  switch (event.key) {\n    case 'Tab':\n      if (event.shiftKey) {\n        if (focusEmoji(indexTab, 0) && indexTab > 0) {\n          scrollToTab(indexTab, true);\n        } else {\n          scrollToTab(1, false);\n          emits('focus-search-input');\n        }\n      } else {\n        if (focusEmoji(indexTab + 1, 0)) {\n          scrollToTab(indexTab + 1 + 1, false);\n        } else {\n          // We are on the last emoji tabset, jump to the skin selector\n          emits('focus-skin-selector');\n        }\n      }\n      break;\n\n    case 'Enter':\n      selectEmoji(emoji, event);\n      break;\n\n    default:\n      break;\n  }\n};\n\nfunction selectEmoji (emoji, event) {\n  emits('selected-emoji', { ...emoji, shift_key: event.shiftKey });\n}\n\nfunction highlightEmoji (emoji) {\n  emits('highlighted-emoji', emoji);\n}\n\nfunction focusEmojiSelector () {\n  focusEmoji(0, 0);\n}\n\nfunction focusLastEmoji () {\n  scrollToTab(tabs.value.length, true);\n}\n\nonMounted(() => {\n  setTabLabelObserver();\n});\n\nonUnmounted(() => {\n  tabLabelObserver.value.disconnect();\n});\n\ndefineExpose({\n  focusEmojiSelector,\n  focusLastEmoji,\n});\n</script>\n","<template>\n  <div data-qa=\"skin-selector\">\n    <div\n      v-show=\"isOpen\"\n      class=\"d-emoji-picker__skin-list\"\n    >\n      <button\n        v-for=\"(skin, index) in skinList\"\n        :ref=\"el => { if (el) setSkinsRef(el) }\"\n        :key=\"skin.name\"\n        :class=\"{\n          'selected': skinSelected.skinCode === skin.skinCode,\n        }\"\n        @keydown=\"event => handleKeyDown(event, skin, index)\"\n        @click=\"selectSkin(skin)\"\n      >\n        <img\n          class=\"d-icon d-icon--size-500\"\n          :alt=\"skin.name\"\n          :aria-label=\"skin.name\"\n          :title=\"skin.name\"\n          :src=\"`${CDN_URL + skin.unicode_output}.png`\"\n        >\n      </button>\n    </div>\n    <div\n      v-show=\"!isOpen\"\n      class=\"d-emoji-picker__skin-selected\"\n    >\n      <dt-tooltip placement=\"top-end\">\n        {{ skinSelectorButtonTooltipLabel }}\n        <template #anchor>\n          <button\n            ref=\"skinSelectorRef\"\n            :aria-label=\"skinSelectorButtonTooltipLabel\"\n            tabindex=\"-1\"\n            @click=\"toggleSkinList\"\n            @keydown=\"event => handleKeyDown(event)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"skinSelected.name\"\n              :aria-label=\"skinSelected.name\"\n              :title=\"skinSelected.name\"\n              :src=\"`${CDN_URL + skinSelected.unicode_output}.png`\"\n            >\n          </button>\n        </template>\n      </dt-tooltip>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed, nextTick, ref, watchEffect } from 'vue';\nimport { CDN_URL, EMOJI_PICKER_SKIN_TONE_MODIFIERS } from '@/components/emoji_picker/emoji_picker_constants.js';\nimport { DtTooltip } from '@/components/tooltip';\n\nconst props = defineProps({\n  /**\n   * The skin tone to apply to the emoji list\n   * @type {String}\n   * @required\n   */\n  skinTone: {\n    type: String,\n    required: true,\n  },\n\n  isHovering: {\n    type: Boolean,\n    default: false,\n  },\n\n  skinSelectorButtonTooltipLabel: {\n    type: String,\n    required: true,\n  },\n});\n\nconst emits = defineEmits([\n  /**\n   * The skin tone that was selected\n   * @event skin-tone\n   * @type {Number}\n   */\n  'skin-tone',\n  'focus-tabset',\n  'focus-last-emoji',\n]);\n\nconst skinList = [\n  {\n    name: ':wave_tone1:',\n    unicode_output: '1f44b-1f3fb',\n    skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,\n    skinCode: '_tone1',\n  },\n  {\n    name: ':wave_tone2:',\n    unicode_output: '1f44b-1f3fc',\n    skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,\n    skinCode: '_tone2',\n  },\n  {\n    name: ':wave_tone3:',\n    unicode_output: '1f44b-1f3fd',\n    skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,\n    skinCode: '_tone3',\n  },\n  {\n    name: ':wave_tone4:',\n    unicode_output: '1f44b-1f3fe',\n    skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,\n    skinCode: '_tone4',\n  },\n  {\n    name: ':wave_tone5:',\n    unicode_output: '1f44b-1f3ff',\n    skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,\n    skinCode: '_tone5',\n  },\n  {\n    name: ':wave:',\n    unicode_output: '1f44b',\n    skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,\n    skinCode: '',\n  },\n];\n\nconst isOpen = ref(false);\n\nconst skinSelectorRef = ref(null);\n\nconst skinsRef = ref([]);\n\n/**\n * It will close the skin selector if the user is hovering over the emoji list\n */\nwatchEffect(\n  () => props.isHovering && (isOpen.value = false),\n);\n\n/**\n * It will initially display props.skinTone. If a new skin tone is selected,\n * it will display that until props.skinTone changes.\n */\nconst skinPassedIn = computed(() => skinList.find((skin) => skin.skinTone === props.skinTone));\nconst skinSelected = ref(skinPassedIn.value);\nwatchEffect(() => skinPassedIn.value && (skinSelected.value = skinPassedIn.value));\n\nfunction setSkinsRef (ref) {\n  skinsRef.value.push(ref);\n}\nfunction focusSkinSelector () {\n  skinSelectorRef.value.focus();\n}\n\nfunction selectSkin (skin) {\n  skinSelected.value = skin;\n  isOpen.value = false;\n  emits('skin-tone', skin.skinTone);\n  nextTick(() => focusSkinSelector());\n}\n\nconst handleKeyDown = (event, skin, index) => {\n  event.preventDefault();\n\n  if (event.key === 'ArrowLeft') {\n    if (index === 0) skinsRef.value[skinsRef.value.length - 1]?.focus();\n    skinsRef.value[index - 1]?.focus();\n  }\n\n  if (event.key === 'ArrowRight') {\n    skinsRef.value[index + 1]?.focus();\n  }\n\n  if (event.key === 'Enter') {\n    if (skin) { selectSkin(skin); } else {\n      toggleSkinList();\n    }\n  }\n\n  if (event.key === 'Tab') {\n    if (event.shiftKey) {\n      emits('focus-last-emoji');\n    } else {\n      emits('focus-tabset');\n    }\n  }\n};\n\nfunction toggleSkinList () {\n  isOpen.value = !isOpen.value;\n  nextTick(() => skinsRef.value[0].focus());\n}\n\ndefineExpose({\n  focusSkinSelector,\n});\n</script>\n","<template>\n  <div\n    class=\"d-emoji-picker\"\n  >\n    <div class=\"d-emoji-picker--header\">\n      <emoji-tabset\n        ref=\"tabsetRef\"\n        :emoji-filter=\"internalSearchQuery\"\n        :show-recently-used-tab=\"showRecentlyUsedTab\"\n        :scroll-into-tab=\"scrollIntoTab\"\n        :tabset-labels=\"tabSetLabels\"\n        @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n        @focus-search-input=\"showSearch\n          ? $refs.searchInputRef.focusSearchInput()\n          : $refs.emojiSelectorRef.focusEmojiSelector()\"\n        @selected-tabset=\"scrollToSelectedTabset\"\n        @keydown.esc=\"emits('close')\"\n      />\n    </div>\n    <div class=\"d-emoji-picker--body\">\n      <emoji-search\n        v-if=\"showSearch\"\n        ref=\"searchInputRef\"\n        v-model=\"internalSearchQuery\"\n        :search-placeholder-label=\"searchPlaceholderLabel\"\n        @select-first-emoji=\"emits('selected-emoji', highlightedEmoji)\"\n        @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n        @focus-emoji-selector=\"$refs.emojiSelectorRef.focusEmojiSelector()\"\n        @keydown.esc=\"emits('close')\"\n      />\n      <emoji-selector\n        ref=\"emojiSelectorRef\"\n        :emoji-filter=\"internalSearchQuery\"\n        :skin-tone=\"skinTone\"\n        :tabset-labels=\"tabSetLabels\"\n        :search-results-label=\"searchResultsLabel\"\n        :search-no-results-label=\"searchNoResultsLabel\"\n        :recently-used-emojis=\"recentlyUsedEmojis\"\n        :selected-tabset=\"selectedTabset\"\n        @scroll-into-tab=\"updateScrollIntoTab\"\n        @highlighted-emoji=\"updateHighlightedEmoji\"\n        @selected-emoji=\"emits('selected-emoji', $event)\"\n        @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n        @focus-search-input=\"showSearch ? $refs.searchInputRef.focusSearchInput() : $refs.tabsetRef.focusTabset()\"\n        @keydown.esc=\"emits('close')\"\n      />\n    </div>\n    <div class=\"d-emoji-picker--footer\">\n      <emoji-description :emoji=\"highlightedEmoji\" />\n      <emoji-skin-selector\n        ref=\"skinSelectorRef\"\n        :is-hovering=\"!!highlightedEmoji\"\n        :skin-selector-button-tooltip-label=\"skinSelectorButtonTooltipLabel\"\n        :skin-tone=\"skinTone\"\n        @skin-tone=\"emits('skin-tone', $event)\"\n        @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n        @focus-last-emoji=\"$refs.emojiSelectorRef.focusLastEmoji()\"\n        @keydown.esc=\"emits('close')\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport EmojiSearch from './modules/emoji_search.vue';\nimport EmojiTabset from './modules/emoji_tabset.vue';\nimport EmojiSelector from './modules/emoji_selector.vue';\nimport EmojiSkinSelector from './modules/emoji_skin_selector.vue';\nimport EmojiDescription from './modules/emoji_description.vue';\nimport { computed, ref, watch } from 'vue';\n\nconst props = defineProps({\n  /**\n   * The array with recently used  emoji object\n   * This list is necessary to fill the recently used tab\n   * @type {Array}\n   * @default []\n   * @example\n   * <dt-emoji-picker :recentlyUsedEmojis=\"[emojiObject, emojiObject]\" />\n   */\n  // TODO try to simplify this to achieve an array of unicode characters and not an entire emoji data object\n  recentlyUsedEmojis: {\n    type: Array,\n    default: () => ([]),\n  },\n\n  /**\n   * The placeholder text for the search input\n   * @type {String}\n   * @required\n   * @example\n   * <dt-emoji-picker :searchPlaceholderLabel=\"'Search...'\" />\n   */\n  searchPlaceholderLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The label for the search results tab\n   * @type {String}\n   * @required\n   * @example\n   * <dt-emoji-picker :searchResultsLabel=\"'Search results'\" />\n   */\n  searchResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The label for the search no results\n   * @type {String}\n   * @required\n   * @example\n   * <dt-emoji-picker :searchNoResultsLabel=\"'No results'\" />\n   */\n  searchNoResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The list of tabsets to show, it is necessary to be updated with the correct language\n   * It must respect the provided order.\n   * @type {Array}\n   * @required\n   * @example\n   * <dt-emoji-picker\n   *  :tabSetLabels=\"['Most recently used', 'Smileys and people', 'Nature',\n   *    'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags']\" />\n   */\n  tabSetLabels: {\n    type: Array,\n    required: true,\n  },\n\n  /**\n   * The skin tone to show the emojis\n   * This prop gives the possibility to use the skin tone selected by the user previously\n   * @type {String}\n   * @default 'Default'\n   * @values 'Default', 'Light', 'MediumLight', 'Medium', 'MediumDark', 'Dark'\n   * @example\n   * <dt-emoji-picker :skinTone=\"'Default'\" />\n   */\n  skinTone: {\n    type: String,\n    default: 'Default',\n  },\n\n  /**\n   * Tooltip shown when skin selector button is hovered.\n   * @type {String}\n   * @required\n   * @example\n   * <dt-emoji-picker :skin-selector-button-tooltip-label=\"'Change default skin tone'\" />\n   */\n  skinSelectorButtonTooltipLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * Sets the search query that filters emojis.\n   * @type {String}\n   * @example\n   * <dt-emoji-picker search-query=\"smile\" />\n   */\n  searchQuery: {\n    type: String,\n    default: '',\n  },\n\n  /**\n   * Shows the search input\n   * @type {Boolean}\n   * @example\n   * <dt-emoji-picker :show-search=\"false\" />\n   */\n  showSearch: {\n    type: Boolean,\n    default: true,\n  },\n});\n\nconst emits = defineEmits(\n  [\n    /**\n     * It will emit the selected emoji\n     * @event selected-emoji\n     * @param {Object} emoji - The selected emoji from the emoji selector\n     */\n    'selected-emoji',\n\n    /**\n     * It will emit the selected skin tone\n     * @event skin-tone\n     * @param {String} skin - The selected skin tone from the skin selector\n     */\n    'skin-tone',\n\n    /**\n     * Since the keyboard events are encapsulated, we emit this event to close the picker\n     * @event close\n     */\n    'close',\n  ],\n);\n\nconst internalSearchQuery = ref(props.searchQuery.value);\nconst highlightedEmoji = ref(null);\nconst selectedTabset = ref({});\n\nconst scrollIntoTab = ref(0);\n\nconst showRecentlyUsedTab = computed(() => props.recentlyUsedEmojis.length > 0);\n\nwatch(\n  () => props.searchQuery,\n  (newValue) => {\n    internalSearchQuery.value = newValue;\n  },\n);\n\n/**\n * Handle the selected tabset event\n * We're creating a new object with the same value as selectedTabset and assigning it back to selectedTabset.\n * Vue will see this as a new object and trigger the watcher in the child component.\n * Using this method, we are able to trigger the watcher in the child component even if the value being passed is the\n * same as the previous value.\n * @event selectedTabset\n * @param tabName {String} - The name of the tab that was selected\n */\nfunction scrollToSelectedTabset (tabId) {\n  internalSearchQuery.value = '';\n  selectedTabset.value = tabId;\n  selectedTabset.value = { ...selectedTabset.value, tabId };\n}\n\nfunction updateScrollIntoTab (value) {\n  scrollIntoTab.value = value;\n}\n\nfunction updateHighlightedEmoji (emoji) {\n  highlightedEmoji.value = emoji;\n}\n</script>\n"],"names":["emits","__emit","searchInput","ref","clearSearch","focusSearchInput","onMounted","__expose","props","__props","TABS_DATA","EMOJI_PICKER_CATEGORIES","DtIconClock","DtIconSatisfied","DtIconLivingThing","DtIconFood","DtIconObject","DtIconTransportation","DtIconLightbulb","DtIconHeart","DtIconFlag","tabs","computed","tab","index","isSearching","selectedTab","tabsetRef","watch","selectTabset","id","parseId","setTabsetRef","returnFirstEl","focusTabset","handleKeyDown","event","tabId","useKeyboardNavigation","emojiRefs","emojiFilteredRefs","isFiltering","hoverFirstEmoji","_handleArrowLeft","indexTab","indexEmoji","focusEmoji","_handleArrowRight","_handleArrowLeftFiltered","_handleArrowRightFiltered","_handleHorizontalNavigation","direction","emojiRef","_a","_c","_b","setEmojiRef","el","setFilteredRef","handleArrowNavigationFiltered","key","ARROW_KEYS","position","EMOJIS_PER_ROW","lastEmojiPosition","handleArrowNavigation","numberOfMissingEmojis","emojiToJump","previousTab","emojisInPreviousTab","tabCategoryRef","listRef","tabLabelObserver","tabLabels","label","fixedLabel","filteredEmojis","currentEmojis","emojis","debouncedSearch","debounce","searchByNameAndKeywords","resetScroll","highlightEmoji","scrollToTab","hoverEmoji","emoji","isFirst","searchStr","obj","nameIncludesSearchStr","keywordsIncludeSearchStr","keyword","nextTick","fn","delay","timeout","args","getImgSrc","CDN_URL","handleImageError","tabIndex","focusFirstEmoji","tabElement","container","offsetTop","setTabLabelObserver","entries","entry","target","_d","_e","child","handleKeyDownFilteredEmojis","selectEmoji","focusEmojiSelector","focusLastEmoji","onUnmounted","skinList","EMOJI_PICKER_SKIN_TONE_MODIFIERS","isOpen","skinSelectorRef","skinsRef","watchEffect","skinPassedIn","skin","skinSelected","setSkinsRef","focusSkinSelector","selectSkin","toggleSkinList","internalSearchQuery","highlightedEmoji","selectedTabset","scrollIntoTab","showRecentlyUsedTab","newValue","scrollToSelectedTabset","updateScrollIntoTab","value","updateHighlightedEmoji"],"mappings":"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"}