@dialpad/dialtone-vue 2.180.1 → 2.182.0

package/dist/recipes/conversation_view/editor/editor.vue.cjs

@@ -32,7 +32,8 @@ const _sfc_main = {
     DtIconAlignJustify: vue2.DtIconAlignJustify,
     DtIconQuote: vue2.DtIconQuote,
     DtIconCodeBlock: vue2.DtIconCodeBlock,
-    DtIconLink2: vue2.DtIconLink2
+    DtIconLink2: vue2.DtIconLink2,
+    DtIconImage: vue2.DtIconImage
   },
   inheritAttrs: false,
   props: {
@@ -223,6 +224,13 @@ const _sfc_main = {
       type: Boolean,
       default: true
     },
+    /**
+     * Show button to add an inline image
+     */
+    showInlineImageButton: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Show add link default config.
      */
@@ -266,7 +274,12 @@ const _sfc_main = {
      * pressed event
      * @event quick-replies-click
      */
-    "quick-replies-click"
+    "quick-replies-click",
+    /**
+     * Emit when inline image button is clicked
+     * @event inline-image-click
+     */
+    "inline-image-click"
   ],
   data() {
     return {
@@ -431,6 +444,14 @@ const _sfc_main = {
           dataQA: "dt-recipe-editor-code-block-btn",
           tooltipMessage: "Code",
           onClick: this.onCodeBlockToggle
+        },
+        {
+          showBtn: this.showInlineImageButton,
+          selector: "image",
+          icon: vue2.DtIconImage,
+          dataQA: "dt-recipe-editor-inline-image-btn",
+          tooltipMessage: "Image",
+          onClick: this.onInsertInlineImageClick
         }
       ].filter((button2) => button2.showBtn);
     },
@@ -537,6 +558,13 @@ const _sfc_main = {
     onQuickRepliesClick() {
       this.$emit("quick-replies-click");
     },
+    onInsertInlineImageClick() {
+      this.$emit("inline-image-click");
+    },
+    insertInlineImage(imageUrl) {
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().setImage({ src: imageUrl }).run();
+    },
     onBlockquoteToggle() {
       var _a;
       (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleBlockquote().run();

package/dist/recipes/conversation_view/editor/editor.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"editor.vue.cjs","sources":["../../../../recipes/conversation_view/editor/editor.vue"],"sourcesContent":["<template>\n  <div\n\n    class=\"d-recipe-editor\"\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              <span v-if=\"button.label\">{{ button.label }}</span>\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.sync=\"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.native.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.native.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=\"$attrs\"\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 { 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  DtIconItalic,\n  DtIconLightningBolt,\n  DtIconLink2,\n  DtIconListBullet,\n  DtIconListOrdered,\n  DtIconQuote,\n  DtIconStrikethrough,\n  DtIconUnderline,\n} from '@dialpad/dialtone-icons/vue2';\n\nexport default {\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  },\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 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  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      ].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    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    onBlockquoteToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().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    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":["DtRichTextEditor","DtButton","DtPopover","DtStack","DtInput","DtTooltip","DtIconLightningBolt","DtIconBold","DtIconItalic","DtIconUnderline","DtIconStrikethrough","DtIconListBullet","DtIconListOrdered","DtIconAlignLeft","DtIconAlignCenter","DtIconAlignRight","DtIconAlignJustify","DtIconQuote","DtIconCodeBlock","DtIconLink2","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","RICH_TEXT_EDITOR_OUTPUT_FORMATS","button","editor","EDITOR_SUPPORTED_LINK_PROTOCOLS","EDITOR_DEFAULT_LINK_PREFIX"],"mappings":"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"}
+{"version":3,"file":"editor.vue.cjs","sources":["../../../../recipes/conversation_view/editor/editor.vue"],"sourcesContent":["<template>\n  <div\n\n    class=\"d-recipe-editor\"\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              <span v-if=\"button.label\">{{ button.label }}</span>\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.sync=\"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.native.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.native.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=\"$attrs\"\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 { 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/vue2';\n\nexport default {\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  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  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          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    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    onBlockquoteToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().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    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":["DtRichTextEditor","DtButton","DtPopover","DtStack","DtInput","DtTooltip","DtIconLightningBolt","DtIconBold","DtIconItalic","DtIconUnderline","DtIconStrikethrough","DtIconListBullet","DtIconListOrdered","DtIconAlignLeft","DtIconAlignCenter","DtIconAlignRight","DtIconAlignJustify","DtIconQuote","DtIconCodeBlock","DtIconLink2","DtIconImage","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","RICH_TEXT_EDITOR_OUTPUT_FORMATS","button","editor","EDITOR_SUPPORTED_LINK_PROTOCOLS","EDITOR_DEFAULT_LINK_PREFIX"],"mappings":"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"}

package/dist/recipes/conversation_view/editor/editor.vue.js

@@ -1,5 +1,5 @@
 import { EDITOR_SUPPORTED_LINK_PROTOCOLS, EDITOR_DEFAULT_LINK_PREFIX } from "./editor_constants.js";
-import { DtIconLightningBolt, DtIconBold, DtIconItalic, DtIconUnderline, DtIconStrikethrough, DtIconListBullet, DtIconListOrdered, DtIconAlignLeft, DtIconAlignCenter, DtIconAlignRight, DtIconAlignJustify, DtIconQuote, DtIconCodeBlock, DtIconLink2 } from "@dialpad/dialtone-icons/vue2";
+import { DtIconLightningBolt, DtIconBold, DtIconItalic, DtIconUnderline, DtIconStrikethrough, DtIconListBullet, DtIconListOrdered, DtIconAlignLeft, DtIconAlignCenter, DtIconAlignRight, DtIconAlignJustify, DtIconQuote, DtIconCodeBlock, DtIconLink2, DtIconImage } from "@dialpad/dialtone-icons/vue2";
 import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
 import DtRichTextEditor from "../../../components/rich_text_editor/rich_text_editor.vue.js";
 import DtButton from "../../../components/button/button.vue.js";
@@ -30,7 +30,8 @@ const _sfc_main = {
     DtIconAlignJustify,
     DtIconQuote,
     DtIconCodeBlock,
-    DtIconLink2
+    DtIconLink2,
+    DtIconImage
   },
   inheritAttrs: false,
   props: {
@@ -221,6 +222,13 @@ const _sfc_main = {
       type: Boolean,
       default: true
     },
+    /**
+     * Show button to add an inline image
+     */
+    showInlineImageButton: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Show add link default config.
      */
@@ -264,7 +272,12 @@ const _sfc_main = {
      * pressed event
      * @event quick-replies-click
      */
-    "quick-replies-click"
+    "quick-replies-click",
+    /**
+     * Emit when inline image button is clicked
+     * @event inline-image-click
+     */
+    "inline-image-click"
   ],
   data() {
     return {
@@ -429,6 +442,14 @@ const _sfc_main = {
           dataQA: "dt-recipe-editor-code-block-btn",
           tooltipMessage: "Code",
           onClick: this.onCodeBlockToggle
+        },
+        {
+          showBtn: this.showInlineImageButton,
+          selector: "image",
+          icon: DtIconImage,
+          dataQA: "dt-recipe-editor-inline-image-btn",
+          tooltipMessage: "Image",
+          onClick: this.onInsertInlineImageClick
         }
       ].filter((button) => button.showBtn);
     },
@@ -535,6 +556,13 @@ const _sfc_main = {
     onQuickRepliesClick() {
       this.$emit("quick-replies-click");
     },
+    onInsertInlineImageClick() {
+      this.$emit("inline-image-click");
+    },
+    insertInlineImage(imageUrl) {
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().setImage({ src: imageUrl }).run();
+    },
     onBlockquoteToggle() {
       var _a;
       (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleBlockquote().run();

package/dist/recipes/conversation_view/editor/editor.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"editor.vue.js","sources":["../../../../recipes/conversation_view/editor/editor.vue"],"sourcesContent":["<template>\n  <div\n\n    class=\"d-recipe-editor\"\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              <span v-if=\"button.label\">{{ button.label }}</span>\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.sync=\"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.native.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.native.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=\"$attrs\"\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 { 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  DtIconItalic,\n  DtIconLightningBolt,\n  DtIconLink2,\n  DtIconListBullet,\n  DtIconListOrdered,\n  DtIconQuote,\n  DtIconStrikethrough,\n  DtIconUnderline,\n} from '@dialpad/dialtone-icons/vue2';\n\nexport default {\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  },\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 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  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      ].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    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    onBlockquoteToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().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    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":["editor"],"mappings":"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"}
+{"version":3,"file":"editor.vue.js","sources":["../../../../recipes/conversation_view/editor/editor.vue"],"sourcesContent":["<template>\n  <div\n\n    class=\"d-recipe-editor\"\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              <span v-if=\"button.label\">{{ button.label }}</span>\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.sync=\"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.native.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.native.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=\"$attrs\"\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 { 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/vue2';\n\nexport default {\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  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  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          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    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    onBlockquoteToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().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    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":["editor"],"mappings":";;;;;;;;;;AAuNA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,WAAA;AAAA,MACA,MAAA,CAAA,SAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,WAAA;AACA,YAAA,OAAA,cAAA,UAAA;AACA,iBAAA,iCAAA,SAAA,SAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,EAAA,OAAA,WAAA,WAAA,mBAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,EAAA,OAAA,UAAA,WAAA,cAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,EAAA,OAAA,UAAA,WAAA,kBAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,uBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,uBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,uBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA;AAAA,QACA,mBAAA;AAAA,QACA,cAAA;AAAA,QACA,uBAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,oBAAA,KAAA;AAAA;AAAA,MACA,UAAA;AAAA,MAEA,aAAA;AAAA,QACA,OAAA;AAAA,MACA;AAAA,MAEA,eAAA;AAAA,MACA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,KAAA,mBAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAA,gCAAA,CAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,aAAA,KAAA,kBAAA,KAAA,qBAAA,KAAA,oBAAA,KAAA;AAAA,IACA;AAAA,IAEA,0BAAA;AACA,aAAA,KAAA,uBAAA,KAAA,yBACA,KAAA,wBAAA,KAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,aAAA,KAAA,uBAAA,KAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,YAAA,yBAAA,KAAA,kBAAA,IAAA,iBAAA;AAAA,QACA,KAAA,WAAA;AAAA,QACA,aAAA,CAAA,UAAA;AAAA,MACA,EAAA;AACA,aAAA;AAAA,QACA,EAAA,KAAA,OAAA,aAAA,KAAA,WAAA;AAAA,QACA,EAAA,KAAA,UAAA,aAAA,KAAA,kBAAA;AAAA,QACA,EAAA,KAAA,aAAA,aAAA,KAAA,iBAAA;AAAA,QACA,EAAA,KAAA,QAAA,aAAA,KAAA,YAAA;AAAA,QACA,GAAA;AAAA,MACA,EAAA,OAAA,qBAAA,gBAAA,YAAA,SAAA,CAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,OAAA;AAAA,UACA,UAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,KAAA;AAAA,QACA;AAAA,MACA,EAAA,OAAA,YAAA,OAAA,OAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,KAAA;AAAA,QACA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,KAAA;AAAA,QACA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,KAAA;AAAA,QACA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,KAAA;AAAA,QACA;AAAA,MACA,EAAA,OAAA,YAAA,OAAA,OAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA,EAAA,WAAA,OAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,MAAA,KAAA,YAAA,MAAA;AAAA,QACA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA,EAAA,WAAA,SAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,MAAA,KAAA,YAAA,QAAA;AAAA,QACA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA,EAAA,WAAA,QAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,MAAA,KAAA,YAAA,OAAA;AAAA,QACA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA,EAAA,WAAA,UAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,MAAA,KAAA,YAAA,SAAA;AAAA,QACA;AAAA,MACA,EAAA,OAAA,YAAA,OAAA,OAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,KAAA;AAAA,QACA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,KAAA;AAAA,QACA;AAAA,MACA,EAAA,OAAA,YAAA,OAAA,OAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,KAAA;AAAA,QACA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,KAAA;AAAA,QACA;AAAA,QACA;AAAA,UACA,SAAA,KAAA;AAAA,UACA,UAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA,KAAA;AAAA,QACA;AAAA,MACA,EAAA,OAAA,YAAA,OAAA,OAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA;AAAA,QACA,SAAA,KAAA,YAAA;AAAA,QACA,UAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,gBAAA;AAAA,QACA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA,UAAA;AACA,WAAA,qBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,aAAA,OAAA;AACA,qCAAA;AAAA,IACA;AAAA,IAEA,aAAA;;AACA,yCAAA,MAAA,mBAAA,mBAAA,WAAA,mBAAA,YAAA,mBAAA,YAAA,mBAAA,gBAAA,mBAAA;AACA,WAAA,eAAA;AAAA,IACA;AAAA,IAEA,QAAA,OAAA;;AACA,YAAAA,WAAA,UAAA,MAAA,mBAAA,mBAAA;AACA,qCAAA;AACA,qCAAA;AAEA,UAAA,CAAA,KAAA,WAAA;AAGA,aAAA,WAAA;AACA;AAAA,MACA;AAGA,YAAA,SAAA,gCAAA,KAAA,iBAAA,YAAA,KAAA,KAAA,SAAA,CAAA;AAEA,UAAA,CAAA,QAAA;AAEA,aAAA,YAAA,GAAA,0BAAA,GAAA,KAAA,SAAA;AAAA,MACA;AAEA,YAAA,aAAA,WAAAA,WAAA,gBAAAA,QAAA,SAAA,mBAAA,UAAA,mBAAA;AAEA,UAAA,UAAA,WAAA,UAAA,MAAA;AAIA,QAAAA,QACA,MAAA,EACA,MAAA,EACA;AAAA,UACA,UAAA;AAAA,UACA,aAAA,KAAA,YAAA,KAAA,UAAA,KAAA,SAAA,IAAA,KAAA,SAAA;AAAA,QACA,EACA;MACA,OAAA;AAEA,QAAAA,QACA,MAAA,EACA,MAAA,EACA,gBAAA,MAAA,EACA,QAAA,EAAA,MAAA,KAAA,WAAA,OAAA,KAAA,YAAA,OAAA,EACA;MACA;AAEA,WAAA,eAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,IAEA,YAAA,aAAA;;AACA,UAAA,CAAA,aAAA;AACA,eAAA,KAAA;MACA;AACA,WAAA,aAAA,sBAAA,MAAA,mBAAA,mBAAA,WAAA,mBAAA,cAAA,YAAA,mBAAA;AAAA,IACA;AAAA,IAEA,iBAAA;;AACA,WAAA,gBAAA;AACA,WAAA,YAAA;AACA,iBAAA,MAAA,eAAA,WAAA,mBAAA,QAAA;AAAA,IACA;AAAA,IAEA,mBAAA;;AACA,uBAAA,MAAA,mBAAA,mBAAA,WAAA,mBAAA,QAAA,QAAA,aAAA;AAAA,IACA;AAAA,IAEA,qBAAA;;AACA,iBAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,QAAA,eAAA;AAAA,IACA;AAAA,IAEA,wBAAA;;AACA,iBAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,QAAA,kBAAA;AAAA,IACA;AAAA,IAEA,4BAAA;;AACA,iBAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,QAAA,eAAA;AAAA,IACA;AAAA,IAEA,YAAA,WAAA;;AACA,WAAA,gBAAA,MAAA,mBAAA,mBAAA,WAAA,mBAAA,SAAA,EAAA,WAAA,UAAA,IAAA;AAEA,gBAAA,UAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,QAAA,iBAAA;AAAA,MACA;AACA,iBAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,QAAA,aAAA,WAAA;AAAA,IACA;AAAA,IAEA,qBAAA;;AACA,iBAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,QAAA,mBAAA;AAAA,IACA;AAAA,IAEA,sBAAA;;AACA,iBAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,QAAA,oBAAA;AAAA,IACA;AAAA,IAEA,oBAAA;;AACA,iBAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,QAAA,kBAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,WAAA,MAAA,qBAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,WAAA,MAAA,oBAAA;AAAA,IACA;AAAA,IAEA,kBAAA,UAAA;;AACA,iBAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,QAAA,SAAA,EAAA,KAAA,SAAA,GAAA;AAAA,IACA;AAAA,IAEA,qBAAA;;AACA,iBAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,QAAA,mBAAA;AAAA,IACA;AAAA,IAEA,oBAAA,gBAAA;;AACA,iBAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,QAAA,cAAA,gBAAA;AAAA,IACA;AAAA,IAEA,kBAAA,WAAA,MAAA;;AACA,iBAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,MAAA,UAAA;AAAA,IACA;AAAA,IAEA,QAAA,OAAA;AACA,WAAA,WAAA;AACA,WAAA,MAAA,SAAA,KAAA;AAAA,IACA;AAAA,IAEA,OAAA,OAAA;AACA,WAAA,WAAA;AACA,WAAA,MAAA,QAAA,KAAA;AAAA,IACA;AAAA,IAEA,QAAA,OAAA;AACA,WAAA,MAAA,SAAA,KAAA;AAAA,IACA;AAAA,EAEA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/recipes/leftbar/callbox/callbox.vue.cjs

@@ -112,7 +112,7 @@ var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
   return _c("div", { staticClass: "d-recipe-callbox", attrs: { "data-qa": "dt-recipe-callbox" } }, [_vm.$slots.video ? _c("div", { staticClass: "d-recipe-callbox__video", attrs: { "data-qa": "dt-recipe-callbox__video-wrapper" } }, [_vm._t("video")], 2) : _vm._e(), _c("div", { class: ["d-recipe-callbox__main-content", _vm.borderClass, { "d-recipe-callbox--clickable": _vm.clickable }], attrs: { "data-qa": "dt-recipe-callbox__main-content" } }, [_c("div", { staticClass: "d-recipe-callbox__main-content-top" }, [_vm.shouldShowAvatar ? _c("dt-avatar", { attrs: { "avatar-class": "d-recipe-callbox__avatar", "image-src": _vm.avatarSrc, "image-alt": "", "full-name": _vm.avatarFullName, "seed": _vm.avatarSeed, "clickable": _vm.clickable, "size": "sm" }, on: { "click": _vm.handleClick }, scopedSlots: _vm._u([_vm.isOnHold ? { key: "overlayIcon", fn: function() {
     return [_c("dt-icon-pause")];
-  }, proxy: true } : null], null, true) }) : _vm._e(), _c("div", { staticClass: "d-recipe-callbox__content" }, [_c(_vm.clickable ? "button" : "span", { tag: "component", staticClass: "d-recipe-callbox__content-title", attrs: { "data-qa": "dt-recipe-callbox__title" }, on: { "click": _vm.handleClick } }, [_vm._v(" " + _vm._s(_vm.title) + " ")]), _vm.$slots.badge || _vm.badgeText ? _c("div", { staticClass: "d-recipe-callbox__content-badge", attrs: { "data-qa": "dt-recipe-callbox__badge-wrapper" } }, [_vm._t("badge", function() {
+  }, proxy: true } : null], null, true) }) : _vm._e(), _c("div", { staticClass: "d-recipe-callbox__content" }, [_c(_vm.clickable ? "button" : "span", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: _vm.title, expression: "title" }], tag: "component", staticClass: "d-recipe-callbox__content-title", attrs: { "data-qa": "dt-recipe-callbox__title", "tabindex": "0" }, on: { "click": _vm.handleClick } }, [_vm._v(" " + _vm._s(_vm.title) + " ")]), _vm.$slots.badge || _vm.badgeText ? _c("div", { staticClass: "d-recipe-callbox__content-badge", attrs: { "data-qa": "dt-recipe-callbox__badge-wrapper" } }, [_vm._t("badge", function() {
     return [_c("dt-badge", { class: _vm.badgeClass, attrs: { "text": _vm.badgeText } })];
   })], 2) : _vm._e(), _vm.$slots.subtitle ? _c("div", { staticClass: "d-recipe-callbox__content-subtitle", attrs: { "data-qa": "dt-recipe-callbox__subtitle-wrapper" } }, [_vm._t("subtitle")], 2) : _vm._e()], 1), _vm.$slots.right ? _c("div", { staticClass: "d-recipe-callbox__right", attrs: { "data-qa": "dt-recipe-callbox__right-wrapper" } }, [_vm._t("right")], 2) : _vm._e()], 1), _vm.$slots.bottom ? _c("div", { staticClass: "d-recipe-callbox__main-content-bottom", attrs: { "data-qa": "dt-recipe-callbox__bottom-wrapper" } }, [_vm._t("bottom")], 2) : _vm._e()])]);
 };

package/dist/recipes/leftbar/callbox/callbox.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"callbox.vue.cjs","sources":["../../../../recipes/leftbar/callbox/callbox.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-recipe-callbox\"\n    class=\"d-recipe-callbox\"\n  >\n    <div\n      v-if=\"$slots.video\"\n      data-qa=\"dt-recipe-callbox__video-wrapper\"\n      class=\"d-recipe-callbox__video\"\n    >\n      <!-- @slot Slot for video stream -->\n      <slot name=\"video\" />\n    </div>\n    <div\n      data-qa=\"dt-recipe-callbox__main-content\"\n      :class=\"['d-recipe-callbox__main-content', borderClass, { 'd-recipe-callbox--clickable': clickable }]\"\n    >\n      <div\n        class=\"d-recipe-callbox__main-content-top\"\n      >\n        <dt-avatar\n          v-if=\"shouldShowAvatar\"\n          avatar-class=\"d-recipe-callbox__avatar\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :full-name=\"avatarFullName\"\n          :seed=\"avatarSeed\"\n          :clickable=\"clickable\"\n          size=\"sm\"\n          @click=\"handleClick\"\n        >\n          <template\n            v-if=\"isOnHold\"\n            #overlayIcon\n          >\n            <dt-icon-pause />\n          </template>\n        </dt-avatar>\n        <div class=\"d-recipe-callbox__content\">\n          <component\n            :is=\"clickable ? 'button' : 'span'\"\n            data-qa=\"dt-recipe-callbox__title\"\n            class=\"d-recipe-callbox__content-title\"\n            @click=\"handleClick\"\n          >\n            {{ title }}\n          </component>\n          <div\n            v-if=\"$slots.badge || badgeText\"\n            data-qa=\"dt-recipe-callbox__badge-wrapper\"\n            class=\"d-recipe-callbox__content-badge\"\n          >\n            <!-- @slot Slot for call center badge -->\n            <slot name=\"badge\">\n              <dt-badge\n                :class=\"badgeClass\"\n                :text=\"badgeText\"\n              />\n            </slot>\n          </div>\n          <div\n            v-if=\"$slots.subtitle\"\n            data-qa=\"dt-recipe-callbox__subtitle-wrapper\"\n            class=\"d-recipe-callbox__content-subtitle\"\n          >\n            <!-- @slot Slot for subtitle -->\n            <slot name=\"subtitle\" />\n          </div>\n        </div>\n        <div\n          v-if=\"$slots.right\"\n          data-qa=\"dt-recipe-callbox__right-wrapper\"\n          class=\"d-recipe-callbox__right\"\n        >\n          <!-- @slot Slot for right icons -->\n          <slot name=\"right\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-recipe-callbox__bottom-wrapper\"\n        class=\"d-recipe-callbox__main-content-bottom\"\n      >\n        <slot name=\"bottom\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from './callbox_constants';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport DtBadge from '@/components/badge/badge.vue';\nimport { DtIconPause } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'DtRecipeCallbox',\n\n  components: { DtBadge, DtAvatar, DtIconPause },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Text for the badge element\n     */\n    badgeText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Color for the badge element\n     * @values null, warning\n     */\n    badgeColor: {\n      type: String,\n      default: null,\n      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color),\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display if `avatarSrc` is empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox title\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color),\n    },\n\n    /**\n     * Makes the callbox avatar and title clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls the avatars overlay icon\n     */\n    isOnHold: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Callbox click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    shouldShowAvatar () {\n      return this.avatarFullName || this.avatarSrc;\n    },\n\n    badgeClass () {\n      return CALLBOX_BADGE_COLORS[this.badgeColor];\n    },\n\n    borderClass () {\n      return CALLBOX_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["DtBadge","DtAvatar","DtIconPause","CALLBOX_BADGE_COLORS","CALLBOX_BORDER_COLORS"],"mappings":";;;;;;;AA+FA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAAA,SAAAA,MAAAA,mBAAAC,OAAA,SAAA,aAAAC,iBAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,UAAA,QAAA,OAAA,KAAAC,kBAAA,oBAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAAC,uCAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,mBAAA;AACA,aAAA,KAAA,kBAAA,KAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAAD,kBAAA,qBAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAAC,kBAAA,sBAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,GAAA;AACA,UAAA,CAAA,KAAA,UAAA;AACA,WAAA,MAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"callbox.vue.cjs","sources":["../../../../recipes/leftbar/callbox/callbox.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-recipe-callbox\"\n    class=\"d-recipe-callbox\"\n  >\n    <div\n      v-if=\"$slots.video\"\n      data-qa=\"dt-recipe-callbox__video-wrapper\"\n      class=\"d-recipe-callbox__video\"\n    >\n      <!-- @slot Slot for video stream -->\n      <slot name=\"video\" />\n    </div>\n    <div\n      data-qa=\"dt-recipe-callbox__main-content\"\n      :class=\"['d-recipe-callbox__main-content', borderClass, { 'd-recipe-callbox--clickable': clickable }]\"\n    >\n      <div\n        class=\"d-recipe-callbox__main-content-top\"\n      >\n        <dt-avatar\n          v-if=\"shouldShowAvatar\"\n          avatar-class=\"d-recipe-callbox__avatar\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :full-name=\"avatarFullName\"\n          :seed=\"avatarSeed\"\n          :clickable=\"clickable\"\n          size=\"sm\"\n          @click=\"handleClick\"\n        >\n          <template\n            v-if=\"isOnHold\"\n            #overlayIcon\n          >\n            <dt-icon-pause />\n          </template>\n        </dt-avatar>\n        <div class=\"d-recipe-callbox__content\">\n          <component\n            :is=\"clickable ? 'button' : 'span'\"\n            v-dt-tooltip=\"title\"\n            data-qa=\"dt-recipe-callbox__title\"\n            class=\"d-recipe-callbox__content-title\"\n            tabindex=\"0\"\n            @click=\"handleClick\"\n          >\n            {{ title }}\n          </component>\n          <div\n            v-if=\"$slots.badge || badgeText\"\n            data-qa=\"dt-recipe-callbox__badge-wrapper\"\n            class=\"d-recipe-callbox__content-badge\"\n          >\n            <!-- @slot Slot for call center badge -->\n            <slot name=\"badge\">\n              <dt-badge\n                :class=\"badgeClass\"\n                :text=\"badgeText\"\n              />\n            </slot>\n          </div>\n          <div\n            v-if=\"$slots.subtitle\"\n            data-qa=\"dt-recipe-callbox__subtitle-wrapper\"\n            class=\"d-recipe-callbox__content-subtitle\"\n          >\n            <!-- @slot Slot for subtitle -->\n            <slot name=\"subtitle\" />\n          </div>\n        </div>\n        <div\n          v-if=\"$slots.right\"\n          data-qa=\"dt-recipe-callbox__right-wrapper\"\n          class=\"d-recipe-callbox__right\"\n        >\n          <!-- @slot Slot for right icons -->\n          <slot name=\"right\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-recipe-callbox__bottom-wrapper\"\n        class=\"d-recipe-callbox__main-content-bottom\"\n      >\n        <slot name=\"bottom\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from './callbox_constants';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport DtBadge from '@/components/badge/badge.vue';\nimport { DtIconPause } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'DtRecipeCallbox',\n\n  components: { DtBadge, DtAvatar, DtIconPause },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Text for the badge element\n     */\n    badgeText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Color for the badge element\n     * @values null, warning\n     */\n    badgeColor: {\n      type: String,\n      default: null,\n      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color),\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display if `avatarSrc` is empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox title\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color),\n    },\n\n    /**\n     * Makes the callbox avatar and title clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls the avatars overlay icon\n     */\n    isOnHold: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Callbox click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    shouldShowAvatar () {\n      return this.avatarFullName || this.avatarSrc;\n    },\n\n    badgeClass () {\n      return CALLBOX_BADGE_COLORS[this.badgeColor];\n    },\n\n    borderClass () {\n      return CALLBOX_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["DtBadge","DtAvatar","DtIconPause","CALLBOX_BADGE_COLORS","CALLBOX_BORDER_COLORS"],"mappings":";;;;;;;AAiGA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAAA,SAAAA,MAAAA,mBAAAC,OAAA,SAAA,aAAAC,iBAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,UAAA,QAAA,OAAA,KAAAC,kBAAA,oBAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAAC,uCAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,mBAAA;AACA,aAAA,KAAA,kBAAA,KAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAAD,kBAAA,qBAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAAC,kBAAA,sBAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,GAAA;AACA,UAAA,CAAA,KAAA,UAAA;AACA,WAAA,MAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/recipes/leftbar/callbox/callbox.vue.js

@@ -110,7 +110,7 @@ var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
   return _c("div", { staticClass: "d-recipe-callbox", attrs: { "data-qa": "dt-recipe-callbox" } }, [_vm.$slots.video ? _c("div", { staticClass: "d-recipe-callbox__video", attrs: { "data-qa": "dt-recipe-callbox__video-wrapper" } }, [_vm._t("video")], 2) : _vm._e(), _c("div", { class: ["d-recipe-callbox__main-content", _vm.borderClass, { "d-recipe-callbox--clickable": _vm.clickable }], attrs: { "data-qa": "dt-recipe-callbox__main-content" } }, [_c("div", { staticClass: "d-recipe-callbox__main-content-top" }, [_vm.shouldShowAvatar ? _c("dt-avatar", { attrs: { "avatar-class": "d-recipe-callbox__avatar", "image-src": _vm.avatarSrc, "image-alt": "", "full-name": _vm.avatarFullName, "seed": _vm.avatarSeed, "clickable": _vm.clickable, "size": "sm" }, on: { "click": _vm.handleClick }, scopedSlots: _vm._u([_vm.isOnHold ? { key: "overlayIcon", fn: function() {
     return [_c("dt-icon-pause")];
-  }, proxy: true } : null], null, true) }) : _vm._e(), _c("div", { staticClass: "d-recipe-callbox__content" }, [_c(_vm.clickable ? "button" : "span", { tag: "component", staticClass: "d-recipe-callbox__content-title", attrs: { "data-qa": "dt-recipe-callbox__title" }, on: { "click": _vm.handleClick } }, [_vm._v(" " + _vm._s(_vm.title) + " ")]), _vm.$slots.badge || _vm.badgeText ? _c("div", { staticClass: "d-recipe-callbox__content-badge", attrs: { "data-qa": "dt-recipe-callbox__badge-wrapper" } }, [_vm._t("badge", function() {
+  }, proxy: true } : null], null, true) }) : _vm._e(), _c("div", { staticClass: "d-recipe-callbox__content" }, [_c(_vm.clickable ? "button" : "span", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: _vm.title, expression: "title" }], tag: "component", staticClass: "d-recipe-callbox__content-title", attrs: { "data-qa": "dt-recipe-callbox__title", "tabindex": "0" }, on: { "click": _vm.handleClick } }, [_vm._v(" " + _vm._s(_vm.title) + " ")]), _vm.$slots.badge || _vm.badgeText ? _c("div", { staticClass: "d-recipe-callbox__content-badge", attrs: { "data-qa": "dt-recipe-callbox__badge-wrapper" } }, [_vm._t("badge", function() {
     return [_c("dt-badge", { class: _vm.badgeClass, attrs: { "text": _vm.badgeText } })];
   })], 2) : _vm._e(), _vm.$slots.subtitle ? _c("div", { staticClass: "d-recipe-callbox__content-subtitle", attrs: { "data-qa": "dt-recipe-callbox__subtitle-wrapper" } }, [_vm._t("subtitle")], 2) : _vm._e()], 1), _vm.$slots.right ? _c("div", { staticClass: "d-recipe-callbox__right", attrs: { "data-qa": "dt-recipe-callbox__right-wrapper" } }, [_vm._t("right")], 2) : _vm._e()], 1), _vm.$slots.bottom ? _c("div", { staticClass: "d-recipe-callbox__main-content-bottom", attrs: { "data-qa": "dt-recipe-callbox__bottom-wrapper" } }, [_vm._t("bottom")], 2) : _vm._e()])]);
 };

package/dist/recipes/leftbar/callbox/callbox.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"callbox.vue.js","sources":["../../../../recipes/leftbar/callbox/callbox.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-recipe-callbox\"\n    class=\"d-recipe-callbox\"\n  >\n    <div\n      v-if=\"$slots.video\"\n      data-qa=\"dt-recipe-callbox__video-wrapper\"\n      class=\"d-recipe-callbox__video\"\n    >\n      <!-- @slot Slot for video stream -->\n      <slot name=\"video\" />\n    </div>\n    <div\n      data-qa=\"dt-recipe-callbox__main-content\"\n      :class=\"['d-recipe-callbox__main-content', borderClass, { 'd-recipe-callbox--clickable': clickable }]\"\n    >\n      <div\n        class=\"d-recipe-callbox__main-content-top\"\n      >\n        <dt-avatar\n          v-if=\"shouldShowAvatar\"\n          avatar-class=\"d-recipe-callbox__avatar\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :full-name=\"avatarFullName\"\n          :seed=\"avatarSeed\"\n          :clickable=\"clickable\"\n          size=\"sm\"\n          @click=\"handleClick\"\n        >\n          <template\n            v-if=\"isOnHold\"\n            #overlayIcon\n          >\n            <dt-icon-pause />\n          </template>\n        </dt-avatar>\n        <div class=\"d-recipe-callbox__content\">\n          <component\n            :is=\"clickable ? 'button' : 'span'\"\n            data-qa=\"dt-recipe-callbox__title\"\n            class=\"d-recipe-callbox__content-title\"\n            @click=\"handleClick\"\n          >\n            {{ title }}\n          </component>\n          <div\n            v-if=\"$slots.badge || badgeText\"\n            data-qa=\"dt-recipe-callbox__badge-wrapper\"\n            class=\"d-recipe-callbox__content-badge\"\n          >\n            <!-- @slot Slot for call center badge -->\n            <slot name=\"badge\">\n              <dt-badge\n                :class=\"badgeClass\"\n                :text=\"badgeText\"\n              />\n            </slot>\n          </div>\n          <div\n            v-if=\"$slots.subtitle\"\n            data-qa=\"dt-recipe-callbox__subtitle-wrapper\"\n            class=\"d-recipe-callbox__content-subtitle\"\n          >\n            <!-- @slot Slot for subtitle -->\n            <slot name=\"subtitle\" />\n          </div>\n        </div>\n        <div\n          v-if=\"$slots.right\"\n          data-qa=\"dt-recipe-callbox__right-wrapper\"\n          class=\"d-recipe-callbox__right\"\n        >\n          <!-- @slot Slot for right icons -->\n          <slot name=\"right\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-recipe-callbox__bottom-wrapper\"\n        class=\"d-recipe-callbox__main-content-bottom\"\n      >\n        <slot name=\"bottom\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from './callbox_constants';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport DtBadge from '@/components/badge/badge.vue';\nimport { DtIconPause } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'DtRecipeCallbox',\n\n  components: { DtBadge, DtAvatar, DtIconPause },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Text for the badge element\n     */\n    badgeText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Color for the badge element\n     * @values null, warning\n     */\n    badgeColor: {\n      type: String,\n      default: null,\n      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color),\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display if `avatarSrc` is empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox title\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color),\n    },\n\n    /**\n     * Makes the callbox avatar and title clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls the avatars overlay icon\n     */\n    isOnHold: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Callbox click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    shouldShowAvatar () {\n      return this.avatarFullName || this.avatarSrc;\n    },\n\n    badgeClass () {\n      return CALLBOX_BADGE_COLORS[this.badgeColor];\n    },\n\n    borderClass () {\n      return CALLBOX_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;;AA+FA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,SAAA,UAAA,YAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,UAAA,QAAA,OAAA,KAAA,oBAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAA,qBAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,mBAAA;AACA,aAAA,KAAA,kBAAA,KAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,qBAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,sBAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,GAAA;AACA,UAAA,CAAA,KAAA,UAAA;AACA,WAAA,MAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"callbox.vue.js","sources":["../../../../recipes/leftbar/callbox/callbox.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-recipe-callbox\"\n    class=\"d-recipe-callbox\"\n  >\n    <div\n      v-if=\"$slots.video\"\n      data-qa=\"dt-recipe-callbox__video-wrapper\"\n      class=\"d-recipe-callbox__video\"\n    >\n      <!-- @slot Slot for video stream -->\n      <slot name=\"video\" />\n    </div>\n    <div\n      data-qa=\"dt-recipe-callbox__main-content\"\n      :class=\"['d-recipe-callbox__main-content', borderClass, { 'd-recipe-callbox--clickable': clickable }]\"\n    >\n      <div\n        class=\"d-recipe-callbox__main-content-top\"\n      >\n        <dt-avatar\n          v-if=\"shouldShowAvatar\"\n          avatar-class=\"d-recipe-callbox__avatar\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :full-name=\"avatarFullName\"\n          :seed=\"avatarSeed\"\n          :clickable=\"clickable\"\n          size=\"sm\"\n          @click=\"handleClick\"\n        >\n          <template\n            v-if=\"isOnHold\"\n            #overlayIcon\n          >\n            <dt-icon-pause />\n          </template>\n        </dt-avatar>\n        <div class=\"d-recipe-callbox__content\">\n          <component\n            :is=\"clickable ? 'button' : 'span'\"\n            v-dt-tooltip=\"title\"\n            data-qa=\"dt-recipe-callbox__title\"\n            class=\"d-recipe-callbox__content-title\"\n            tabindex=\"0\"\n            @click=\"handleClick\"\n          >\n            {{ title }}\n          </component>\n          <div\n            v-if=\"$slots.badge || badgeText\"\n            data-qa=\"dt-recipe-callbox__badge-wrapper\"\n            class=\"d-recipe-callbox__content-badge\"\n          >\n            <!-- @slot Slot for call center badge -->\n            <slot name=\"badge\">\n              <dt-badge\n                :class=\"badgeClass\"\n                :text=\"badgeText\"\n              />\n            </slot>\n          </div>\n          <div\n            v-if=\"$slots.subtitle\"\n            data-qa=\"dt-recipe-callbox__subtitle-wrapper\"\n            class=\"d-recipe-callbox__content-subtitle\"\n          >\n            <!-- @slot Slot for subtitle -->\n            <slot name=\"subtitle\" />\n          </div>\n        </div>\n        <div\n          v-if=\"$slots.right\"\n          data-qa=\"dt-recipe-callbox__right-wrapper\"\n          class=\"d-recipe-callbox__right\"\n        >\n          <!-- @slot Slot for right icons -->\n          <slot name=\"right\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-recipe-callbox__bottom-wrapper\"\n        class=\"d-recipe-callbox__main-content-bottom\"\n      >\n        <slot name=\"bottom\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from './callbox_constants';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport DtBadge from '@/components/badge/badge.vue';\nimport { DtIconPause } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'DtRecipeCallbox',\n\n  components: { DtBadge, DtAvatar, DtIconPause },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Text for the badge element\n     */\n    badgeText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Color for the badge element\n     * @values null, warning\n     */\n    badgeColor: {\n      type: String,\n      default: null,\n      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color),\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display if `avatarSrc` is empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox title\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color),\n    },\n\n    /**\n     * Makes the callbox avatar and title clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls the avatars overlay icon\n     */\n    isOnHold: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Callbox click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    shouldShowAvatar () {\n      return this.avatarFullName || this.avatarSrc;\n    },\n\n    badgeClass () {\n      return CALLBOX_BADGE_COLORS[this.badgeColor];\n    },\n\n    borderClass () {\n      return CALLBOX_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;;AAiGA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,SAAA,UAAA,YAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,UAAA,QAAA,OAAA,KAAA,oBAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAA,qBAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,mBAAA;AACA,aAAA,KAAA,kBAAA,KAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,qBAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,sBAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,GAAA;AACA,UAAA,CAAA,KAAA,UAAA;AACA,WAAA,MAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}