@dialpad/dialtone-vue 3.220.0-next.4 → 3.220.0

package/dist/lib/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","names":[],"sources":["../../../components/dropdown/dropdown.vue"],"sourcesContent":["<!-- eslint-disable max-lines -->\n<template>\n  <dt-popover\n    ref=\"popover\"\n    :content-width=\"contentWidth\"\n    :content-mode=\"contentMode\"\n    :open=\"open\"\n    :placement=\"placement\"\n    :initial-focus-element=\"openedWithKeyboard ? 'first' : 'dialog'\"\n    :fallback-placements=\"fallbackPlacements\"\n    padding=\"none\"\n    role=\"menu\"\n    :append-to=\"appendTo\"\n    :modal=\"modal\"\n    :max-height=\"maxHeight\"\n    :max-width=\"maxWidth\"\n    :open-with-arrow-keys=\"shouldOpenWithArrowKeys\"\n    :open-on-context=\"openOnContext\"\n    v-bind=\"$attrs\"\n    :tether=\"tether\"\n    :transition=\"transition\"\n    :footer-class=\"footerClass\"\n    v-on=\"dropdownListeners\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <!-- @slot Anchor element that activates the dropdown -->\n      <slot\n        ref=\"anchor\"\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content=\"{ close }\">\n      <!-- eslint-disable-next-line max-len -->\n      <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events vuejs-accessibility/no-static-element-interactions -->\n      <ul\n        :id=\"listId\"\n        ref=\"listWrapper\"\n        :class=\"listClasses\"\n        data-qa=\"dt-dropdown-list-wrapper\"\n        @mouseleave=\"clearHighlightIndex\"\n        @mousemove.capture=\"onMouseHighlight\"\n      >\n        <!-- @slot Slot for the list component -->\n        <slot\n          name=\"list\"\n          :close=\"close\"\n        />\n      </ul>\n    </template>\n    <template #footerContent=\"{ close }\">\n      <!-- @slot Slot for the footer content -->\n      <slot\n        name=\"footer\"\n        :close=\"close\"\n      />\n    </template>\n  </dt-popover>\n</template>\n\n<script>\nimport KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES } from '@/components/popover';\nimport { LIST_ITEM_NAVIGATION_TYPES } from '@/components/list_item';\nimport { DROPDOWN_PADDING_CLASSES } from './dropdown_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport { CONTENT_MODE_PROP } from '@/common/mode_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtDropdown',\n\n  components: {\n    DtPopover,\n  },\n\n  mixins: [\n    KeyboardNavigation({\n      indexKey: 'highlightIndex',\n      idKey: 'highlightId',\n      listElementKey: 'getListElement',\n      listItemRole: 'menuitem',\n      afterHighlightMethod: 'afterHighlight',\n      beginningOfListMethod: 'beginningOfListMethod',\n      endOfListMethod: 'endOfListMethod',\n      activeItemKey: 'activeItemEl',\n      focusOnKeyboardNavigation: true,\n    }),\n  ],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Applies a color mode to the positioned content element.\n     * @values light, dark, invert\n     */\n    contentMode: CONTENT_MODE_PROP,\n\n    /**\n     * Controls whether the dropdown is shown. When null (default), the dropdown\n     * toggles on click. When set to true or false, the default trigger is\n     * disabled and the parent controls visibility via v-model:open.\n     * @values null, true, false\n     */\n    open: {\n      type: [Boolean, null],\n      default: null,\n    },\n\n    /**\n     * Opens the dropdown on right click (context menu). If you set this value to `true`,\n     * the default trigger behavior will be disabled.\n     */\n    openOnContext: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Vertical padding size around the list element.\n     * @values none, small, large\n     */\n    padding: {\n      type: String,\n      default: 'small',\n      validator: (padding) => {\n        return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Determines modal state, dropdown has a modal overlay preventing interaction with elements\n     * below it, but it is invisible.\n     */\n    modal: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Width configuration for the popover content. When its value is 'anchor',\n     * the popover content will have the same width as the anchor.\n     * @values null, anchor\n     */\n    contentWidth: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    maxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets an ID on the list element of the component. Used by several aria attributes\n     * as well as when deriving the IDs for each item.\n     */\n    listId: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * If the dropdown does not fit in the direction described by \"placement\",\n     * it will attempt to change it's direction to the \"fallbackPlacements\".\n     *\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     * */\n    fallbackPlacements: {\n      type: Array,\n      default: () => {\n        return ['auto'];\n      },\n    },\n\n    /**\n     * The direction the dropdown displays relative to the anchor.\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    placement: {\n      type: String,\n      default: 'bottom',\n    },\n\n    /**\n     * A method that will be called when the selection goes past the beginning of the list.\n     */\n    onBeginningOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * A method that will be called when the selection goes past the end of the list.\n     */\n    onEndOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class for the footer wrapper element.\n     */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * If set to false the dialog will display over top of the anchor when there is insufficient space.\n     * If set to true it will never move from its position relative to the anchor and will clip instead.\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * @values true, false\n     */\n    tether: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n  },\n\n  emits: [\n    /**\n     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Event fired when the highlight changes\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n\n    /**\n     * Event fired when dropdown is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      LIST_ITEM_NAVIGATION_TYPES,\n      DROPDOWN_PADDING_CLASSES,\n      EVENT_KEYNAMES,\n      openedWithKeyboard: false,\n      isOpen: null,\n    };\n  },\n\n  computed: {\n    dropdownListeners () {\n      return {\n\n        'update:open': value => {\n          this.$emit('update:open', value);\n        },\n\n        opened: isPopoverOpen => {\n          this.updateInitialHighlightIndex(isPopoverOpen);\n        },\n\n        keydown: event => {\n          const eventCode = event.code;\n\n          switch (eventCode) {\n            case EVENT_KEYNAMES.up:\n            case EVENT_KEYNAMES.arrowup:\n              this.onUpKeyPress(event);\n              event.stopPropagation();\n              event.preventDefault();\n              break;\n            case EVENT_KEYNAMES.down:\n            case EVENT_KEYNAMES.arrowdown:\n              this.onDownKeyPress(event);\n              event.stopPropagation();\n              event.preventDefault();\n              break;\n            case EVENT_KEYNAMES.space:\n            case EVENT_KEYNAMES.spacebar:\n              this.onSpaceKey();\n              break;\n            case EVENT_KEYNAMES.enter:\n              this.onEnterKey();\n              break;\n            case EVENT_KEYNAMES.home:\n              this.onHomeKeyPress(event);\n              event.stopPropagation();\n              event.preventDefault();\n              break;\n            case EVENT_KEYNAMES.end:\n              this.onEndKeyPress(event);\n              event.stopPropagation();\n              event.preventDefault();\n              break;\n            default:\n              this.onKeyPress(event);\n              break;\n          }\n\n          this.$emit('keydown', event);\n        },\n      };\n    },\n\n    beginningOfListMethod () {\n      return this.onBeginningOfList || this.jumpToEnd;\n    },\n\n    endOfListMethod () {\n      return this.onEndOfList || this.jumpToBeginning;\n    },\n\n    activeItemEl () {\n      return this.getListElement().querySelector('#' + this.highlightId);\n    },\n\n    isArrowKeyNav () {\n      return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;\n    },\n\n    listClasses () {\n      return [\n        'd-dropdown-list',\n        DROPDOWN_PADDING_CLASSES[this.padding],\n        this.listClass,\n        { 'd-context-menu-list': this.openOnContext },\n      ];\n    },\n\n    shouldOpenWithArrowKeys () {\n      return !this.openOnContext;\n    },\n  },\n\n  methods: {\n    onMouseHighlight (e) {\n      const liElement = e.target.closest('li');\n\n      if (liElement && liElement.role && this.highlightId !== liElement.id) {\n        this.setHighlightId(liElement.id);\n        liElement.focus();\n      }\n    },\n\n    getListElement () {\n      return this.$refs.listWrapper;\n    },\n\n    clearHighlightIndex () {\n      this.setHighlightIndex(-1);\n    },\n\n    afterHighlight () {\n      if (this.highlightIndex === this._itemsLength() - 1) {\n        return;\n      }\n\n      this.$emit('highlight', this.highlightIndex);\n    },\n\n    updateInitialHighlightIndex (isPopoverOpen) {\n      this.isOpen = isPopoverOpen;\n\n      if (isPopoverOpen) {\n        if (this.openedWithKeyboard && this.isArrowKeyNav) {\n          this.setHighlightIndex(0);\n        }\n        this.$emit('opened', true);\n      } else {\n        this.clearHighlightIndex();\n        this.openedWithKeyboard = false;\n        this.$emit('opened', false);\n      }\n    },\n\n    onSpaceKey () {\n      if (!this.open) {\n        this.openedWithKeyboard = true;\n      }\n    },\n\n    onEnterKey () {\n      if (!this.open) {\n        this.openedWithKeyboard = true;\n      }\n    },\n\n    onUpKeyPress () {\n      if (!this.isOpen) {\n        this.openedWithKeyboard = true;\n        return;\n      }\n      if (this.isArrowKeyNav) {\n        return this.onUpKey();\n      }\n    },\n\n    onDownKeyPress () {\n      if (!this.isOpen) {\n        this.openedWithKeyboard = true;\n        return;\n      }\n      if (this.isArrowKeyNav) {\n        return this.onDownKey();\n      }\n    },\n\n    onHomeKeyPress () {\n      if (!this.isOpen || !this.isArrowKeyNav) {\n        return;\n      }\n\n      return this.onHomeKey();\n    },\n\n    onEndKeyPress () {\n      if (!this.isOpen || !this.isArrowKeyNav) {\n        return;\n      }\n\n      return this.onEndKey();\n    },\n\n    onKeyPress (e) {\n      if (!this.isOpen || !this.isArrowKeyNav || !this.isValidLetter(e.key)) {\n        return;\n      }\n\n      e.stopPropagation();\n      e.preventDefault();\n\n      return this.onNavigationKey(e.key);\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"dropdown.js","names":[],"sources":["../../../components/dropdown/dropdown.vue"],"sourcesContent":["<!-- eslint-disable max-lines -->\n<template>\n  <dt-popover\n    ref=\"popover\"\n    :content-width=\"contentWidth\"\n    :open=\"open\"\n    :placement=\"placement\"\n    :initial-focus-element=\"openedWithKeyboard ? 'first' : 'dialog'\"\n    :fallback-placements=\"fallbackPlacements\"\n    padding=\"none\"\n    role=\"menu\"\n    :append-to=\"appendTo\"\n    :modal=\"modal\"\n    :max-height=\"maxHeight\"\n    :max-width=\"maxWidth\"\n    :open-with-arrow-keys=\"shouldOpenWithArrowKeys\"\n    :open-on-context=\"openOnContext\"\n    v-bind=\"$attrs\"\n    :tether=\"tether\"\n    :transition=\"transition\"\n    v-on=\"dropdownListeners\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <!-- @slot Anchor element that activates the dropdown -->\n      <slot\n        ref=\"anchor\"\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content=\"{ close }\">\n      <!-- eslint-disable-next-line max-len -->\n      <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events vuejs-accessibility/no-static-element-interactions -->\n      <ul\n        :id=\"listId\"\n        ref=\"listWrapper\"\n        :class=\"listClasses\"\n        data-qa=\"dt-dropdown-list-wrapper\"\n        @mouseleave=\"clearHighlightIndex\"\n        @mousemove.capture=\"onMouseHighlight\"\n      >\n        <!-- @slot Slot for the list component -->\n        <slot\n          name=\"list\"\n          :close=\"close\"\n        />\n      </ul>\n    </template>\n    <template #footerContent=\"{ close }\">\n      <!-- @slot Slot for the footer content -->\n      <slot\n        name=\"footer\"\n        :close=\"close\"\n      />\n    </template>\n  </dt-popover>\n</template>\n\n<script>\nimport KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES } from '@/components/popover';\nimport { LIST_ITEM_NAVIGATION_TYPES } from '@/components/list_item';\nimport { DROPDOWN_PADDING_CLASSES } from './dropdown_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { EVENT_KEYNAMES } from '@/common/constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtDropdown',\n\n  components: {\n    DtPopover,\n  },\n\n  mixins: [\n    KeyboardNavigation({\n      indexKey: 'highlightIndex',\n      idKey: 'highlightId',\n      listElementKey: 'getListElement',\n      listItemRole: 'menuitem',\n      afterHighlightMethod: 'afterHighlight',\n      beginningOfListMethod: 'beginningOfListMethod',\n      endOfListMethod: 'endOfListMethod',\n      activeItemKey: 'activeItemEl',\n      focusOnKeyboardNavigation: true,\n    }),\n  ],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Controls whether the dropdown is shown. Leaving this null will have the dropdown trigger on click by default.\n     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n     * Supports v-model\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Opens the dropdown on right click (context menu). If you set this value to `true`,\n     * the default trigger behavior will be disabled.\n     */\n    openOnContext: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Vertical padding size around the list element.\n     * @values none, small, large\n     */\n    padding: {\n      type: String,\n      default: 'small',\n      validator: (padding) => {\n        return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Determines modal state, dropdown has a modal overlay preventing interaction with elements\n     * below it, but it is invisible.\n     */\n    modal: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Width configuration for the popover content. When its value is 'anchor',\n     * the popover content will have the same width as the anchor.\n     * @values null, anchor\n     */\n    contentWidth: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    maxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets an ID on the list element of the component. Used by several aria attributes\n     * as well as when deriving the IDs for each item.\n     */\n    listId: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * If the dropdown does not fit in the direction described by \"placement\",\n     * it will attempt to change it's direction to the \"fallbackPlacements\".\n     *\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     * */\n    fallbackPlacements: {\n      type: Array,\n      default: () => {\n        return ['auto'];\n      },\n    },\n\n    /**\n     * The direction the dropdown displays relative to the anchor.\n     */\n    placement: {\n      type: String,\n      default: 'bottom',\n    },\n\n    /**\n     * A method that will be called when the selection goes past the beginning of the list.\n     */\n    onBeginningOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * A method that will be called when the selection goes past the end of the list.\n     */\n    onEndOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * If set to false the dialog will display over top of the anchor when there is insufficient space.\n     * If set to true it will never move from its position relative to the anchor and will clip instead.\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * @values true, false\n     */\n    tether: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n  },\n\n  emits: [\n    /**\n     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Event fired when the highlight changes\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n\n    /**\n     * Event fired when dropdown is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      LIST_ITEM_NAVIGATION_TYPES,\n      DROPDOWN_PADDING_CLASSES,\n      EVENT_KEYNAMES,\n      openedWithKeyboard: false,\n      isOpen: null,\n    };\n  },\n\n  computed: {\n    dropdownListeners () {\n      return {\n\n        'update:open': value => {\n          this.$emit('update:open', value);\n        },\n\n        opened: isPopoverOpen => {\n          this.updateInitialHighlightIndex(isPopoverOpen);\n        },\n\n        keydown: event => {\n          const eventCode = event.code;\n\n          switch (eventCode) {\n            case EVENT_KEYNAMES.up:\n            case EVENT_KEYNAMES.arrowup:\n              this.onUpKeyPress(event);\n              event.stopPropagation();\n              event.preventDefault();\n              break;\n            case EVENT_KEYNAMES.down:\n            case EVENT_KEYNAMES.arrowdown:\n              this.onDownKeyPress(event);\n              event.stopPropagation();\n              event.preventDefault();\n              break;\n            case EVENT_KEYNAMES.space:\n            case EVENT_KEYNAMES.spacebar:\n              this.onSpaceKey();\n              break;\n            case EVENT_KEYNAMES.enter:\n              this.onEnterKey();\n              break;\n            case EVENT_KEYNAMES.home:\n              this.onHomeKeyPress(event);\n              event.stopPropagation();\n              event.preventDefault();\n              break;\n            case EVENT_KEYNAMES.end:\n              this.onEndKeyPress(event);\n              event.stopPropagation();\n              event.preventDefault();\n              break;\n            default:\n              this.onKeyPress(event);\n              break;\n          }\n\n          this.$emit('keydown', event);\n        },\n      };\n    },\n\n    beginningOfListMethod () {\n      return this.onBeginningOfList || this.jumpToEnd;\n    },\n\n    endOfListMethod () {\n      return this.onEndOfList || this.jumpToBeginning;\n    },\n\n    activeItemEl () {\n      return this.getListElement().querySelector('#' + this.highlightId);\n    },\n\n    isArrowKeyNav () {\n      return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;\n    },\n\n    listClasses () {\n      return [\n        'd-dropdown-list',\n        DROPDOWN_PADDING_CLASSES[this.padding],\n        this.listClass,\n        { 'd-context-menu-list': this.openOnContext },\n      ];\n    },\n\n    shouldOpenWithArrowKeys () {\n      return !this.openOnContext;\n    },\n  },\n\n  methods: {\n    onMouseHighlight (e) {\n      const liElement = e.target.closest('li');\n\n      if (liElement && liElement.role && this.highlightId !== liElement.id) {\n        this.setHighlightId(liElement.id);\n        liElement.focus();\n      }\n    },\n\n    getListElement () {\n      return this.$refs.listWrapper;\n    },\n\n    clearHighlightIndex () {\n      this.setHighlightIndex(-1);\n    },\n\n    afterHighlight () {\n      if (this.highlightIndex === this._itemsLength() - 1) {\n        return;\n      }\n\n      this.$emit('highlight', this.highlightIndex);\n    },\n\n    updateInitialHighlightIndex (isPopoverOpen) {\n      this.isOpen = isPopoverOpen;\n\n      if (isPopoverOpen) {\n        if (this.openedWithKeyboard && this.isArrowKeyNav) {\n          this.setHighlightIndex(0);\n        }\n        this.$emit('opened', true);\n      } else {\n        this.clearHighlightIndex();\n        this.openedWithKeyboard = false;\n        this.$emit('opened', false);\n      }\n    },\n\n    onSpaceKey () {\n      if (!this.open) {\n        this.openedWithKeyboard = true;\n      }\n    },\n\n    onEnterKey () {\n      if (!this.open) {\n        this.openedWithKeyboard = true;\n      }\n    },\n\n    onUpKeyPress () {\n      if (!this.isOpen) {\n        this.openedWithKeyboard = true;\n        return;\n      }\n      if (this.isArrowKeyNav) {\n        return this.onUpKey();\n      }\n    },\n\n    onDownKeyPress () {\n      if (!this.isOpen) {\n        this.openedWithKeyboard = true;\n        return;\n      }\n      if (this.isArrowKeyNav) {\n        return this.onDownKey();\n      }\n    },\n\n    onHomeKeyPress () {\n      if (!this.isOpen || !this.isArrowKeyNav) {\n        return;\n      }\n\n      return this.onHomeKey();\n    },\n\n    onEndKeyPress () {\n      if (!this.isOpen || !this.isArrowKeyNav) {\n        return;\n      }\n\n      return this.onEndKey();\n    },\n\n    onKeyPress (e) {\n      if (!this.isOpen || !this.isArrowKeyNav || !this.isValidLetter(e.key)) {\n        return;\n      }\n\n      e.stopPropagation();\n      e.preventDefault();\n\n      return this.onNavigationKey(e.key);\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/editor/EditorToolbarButton.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../button/button.cjs`);let n=require(`vue`);var r={name:`EditorToolbarButton`,components:{DtButton:t.default},props:{isActive:{type:Boolean,default:!1},tooltipMessage:{type:String,required:!0},dataQA:{type:String,default:``},tabindex:{type:Number,default:-1},icon:{type:Object,required:!0},label:{type:String,default:``},onClick:{type:Function,required:!0}},emits:[`shift-focus-right`,`shift-focus-left`]};function i(e,t,r,i,a,o){let s=(0,n.resolveComponent)(`dt-button`),c=(0,n.resolveDirective)(`dt-tooltip`);return(0,n.withDirectives)(((0,n.openBlock)(),(0,n.createBlock)(s,{ref:`buttonRef`,active:r.isActive,"aria-label":r.tooltipMessage,"data-qa":r.dataQA,tabindex:r.tabindex,importance:`clear`,kind:`muted`,size:100,onClick:r.onClick,onKeydown:[t[0]||(t[0]=(0,n.withKeys)((0,n.withModifiers)(t=>e.$emit(`shift-focus-right`),[`stop`]),[`right`])),t[1]||(t[1]=(0,n.withKeys)((0,n.withModifiers)(t=>e.$emit(`shift-focus-left`),[`stop`]),[`left`]))]},{icon:(0,n.withCtx)(()=>[((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(r.icon),{size:`200`})),(0,n.renderSlot)(e.$slots,`extra`)]),default:(0,n.withCtx)(()=>[(0,n.createTextVNode)(` `+(0,n.toDisplayString)(r.label),1)]),_:3},8,[`active`,`aria-label`,`data-qa`,`tabindex`,`onClick`])),[[c,{message:r.tooltipMessage,placement:`top`,externalAnchorElement:e.$refs.buttonRef?.$el}]])}var a=e.t(r,[[`render`,i]]);exports.default=a;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../button/button.cjs`);let n=require(`vue`);var r={name:`EditorToolbarButton`,components:{DtButton:t.default},props:{isActive:{type:Boolean,default:!1},tooltipMessage:{type:String,required:!0},dataQA:{type:String,default:``},tabindex:{type:Number,default:-1},icon:{type:Object,required:!0},label:{type:String,default:``},onClick:{type:Function,required:!0}},emits:[`shift-focus-right`,`shift-focus-left`]};function i(e,t,r,i,a,o){let s=(0,n.resolveComponent)(`dt-button`),c=(0,n.resolveDirective)(`dt-tooltip`);return(0,n.withDirectives)(((0,n.openBlock)(),(0,n.createBlock)(s,{ref:`buttonRef`,active:r.isActive,"aria-label":r.tooltipMessage,"data-qa":r.dataQA,tabindex:r.tabindex,importance:`clear`,kind:`muted`,size:`xs`,onClick:r.onClick,onKeydown:[t[0]||(t[0]=(0,n.withKeys)((0,n.withModifiers)(t=>e.$emit(`shift-focus-right`),[`stop`]),[`right`])),t[1]||(t[1]=(0,n.withKeys)((0,n.withModifiers)(t=>e.$emit(`shift-focus-left`),[`stop`]),[`left`]))]},{icon:(0,n.withCtx)(()=>[((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(r.icon),{size:`200`})),(0,n.renderSlot)(e.$slots,`extra`)]),default:(0,n.withCtx)(()=>[(0,n.createTextVNode)(` `+(0,n.toDisplayString)(r.label),1)]),_:3},8,[`active`,`aria-label`,`data-qa`,`tabindex`,`onClick`])),[[c,{message:r.tooltipMessage,placement:`top`,externalAnchorElement:e.$refs.buttonRef?.$el}]])}var a=e.t(r,[[`render`,i]]);exports.default=a;
 //# sourceMappingURL=EditorToolbarButton.cjs.map

package/dist/lib/editor/EditorToolbarButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditorToolbarButton.cjs","names":[],"sources":["../../../recipes/conversation_view/editor/EditorToolbarButton.vue"],"sourcesContent":["<template>\n  <dt-button\n    ref=\"buttonRef\"\n    v-dt-tooltip=\"{ message: tooltipMessage, placement: 'top', externalAnchorElement: $refs.buttonRef?.$el }\"\n    :active=\"isActive\"\n    :aria-label=\"tooltipMessage\"\n    :data-qa=\"dataQA\"\n    :tabindex=\"tabindex\"\n    importance=\"clear\"\n    kind=\"muted\"\n    :size=\"100\"\n    @click=\"onClick\"\n    @keydown.right.stop=\"$emit('shift-focus-right')\"\n    @keydown.left.stop=\"$emit('shift-focus-left')\"\n  >\n    <template #icon>\n      <component\n        :is=\"icon\"\n        size=\"200\"\n      />\n      <slot name=\"extra\" />\n    </template>\n    {{ label }}\n  </dt-button>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'EditorToolbarButton',\n\n  components: {\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Whether the button is active\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Tooltip message\n     */\n    tooltipMessage: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Data QA attribute for testing\n     */\n    dataQA: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Tab index for keyboard navigation\n     */\n    tabindex: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Icon component\n     */\n    icon: {\n      type: Object,\n      required: true,\n    },\n\n    /**\n     * Button label text\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Click handler function\n     */\n    onClick: {\n      type: Function,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when right arrow key is pressed\n     */\n    'shift-focus-right',\n\n    /**\n     * Emitted when left arrow key is pressed\n     */\n    'shift-focus-left',\n  ],\n};\n</script>\n"],"mappings":"0PA6BA,IAAK,EAAU,CACb,KAAM,sBAEN,WAAY,CACV,SAAA,EAAA,QACD,CAED,MAAO,CAIL,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,eAAgB,CACd,KAAM,OACN,SAAU,GACX,CAKD,OAAQ,CACN,KAAM,OACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,OACN,QAAS,GACV,CAKD,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CAKD,MAAO,CACL,KAAM,OACN,QAAS,GACV,CAKD,QAAS,CACP,KAAM,SACN,SAAU,GACX,CACF,CAED,MAAO,CAIL,oBAKA,mBACD,CACF,0KAlFa,EAAA,CArBV,IAAI,YAEH,OAAQ,EAAA,SACR,aAAY,EAAA,eACZ,UAAS,EAAA,OACT,SAAU,EAAA,SACX,WAAW,QACX,KAAK,QACJ,KAAM,IACN,QAAO,EAAA,QACP,UAAO,CAAA,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,eAAA,GAAa,EAAA,MAAK,oBAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,QAAA,CAAA,EAAA,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,eAAA,GACN,EAAA,MAAK,mBAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,OAAA,CAAA,EAAA,GAEd,MAAA,EAAA,EAAA,aAIP,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBAFK,EAAA,KAAI,CAAA,CACT,KAAK,MAAK,CAAA,GAAA,EAAA,EAAA,YAES,EAAA,OAAA,QAAA,CAAA,CAAA,2BAEvB,EAAA,EAAA,EAAA,iBADW,KAAA,EAAA,EAAA,iBACR,EAAA,MAAK,CAAA,EAAA,CAAA,CAAA,8EAnBiB,EAAA,eAAc,UAAA,MAAA,sBAA2C,EAAA,MAAM,WAAW,IAAG,CAAA,CAAA,CAAA"}
+{"version":3,"file":"EditorToolbarButton.cjs","names":[],"sources":["../../../recipes/conversation_view/editor/EditorToolbarButton.vue"],"sourcesContent":["<template>\n  <dt-button\n    ref=\"buttonRef\"\n    v-dt-tooltip=\"{ message: tooltipMessage, placement: 'top', externalAnchorElement: $refs.buttonRef?.$el }\"\n    :active=\"isActive\"\n    :aria-label=\"tooltipMessage\"\n    :data-qa=\"dataQA\"\n    :tabindex=\"tabindex\"\n    importance=\"clear\"\n    kind=\"muted\"\n    size=\"xs\"\n    @click=\"onClick\"\n    @keydown.right.stop=\"$emit('shift-focus-right')\"\n    @keydown.left.stop=\"$emit('shift-focus-left')\"\n  >\n    <template #icon>\n      <component\n        :is=\"icon\"\n        size=\"200\"\n      />\n      <slot name=\"extra\" />\n    </template>\n    {{ label }}\n  </dt-button>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'EditorToolbarButton',\n\n  components: {\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Whether the button is active\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Tooltip message\n     */\n    tooltipMessage: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Data QA attribute for testing\n     */\n    dataQA: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Tab index for keyboard navigation\n     */\n    tabindex: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Icon component\n     */\n    icon: {\n      type: Object,\n      required: true,\n    },\n\n    /**\n     * Button label text\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Click handler function\n     */\n    onClick: {\n      type: Function,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when right arrow key is pressed\n     */\n    'shift-focus-right',\n\n    /**\n     * Emitted when left arrow key is pressed\n     */\n    'shift-focus-left',\n  ],\n};\n</script>\n"],"mappings":"0PA6BA,IAAK,EAAU,CACb,KAAM,sBAEN,WAAY,CACV,SAAA,EAAA,QACD,CAED,MAAO,CAIL,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,eAAgB,CACd,KAAM,OACN,SAAU,GACX,CAKD,OAAQ,CACN,KAAM,OACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,OACN,QAAS,GACV,CAKD,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CAKD,MAAO,CACL,KAAM,OACN,QAAS,GACV,CAKD,QAAS,CACP,KAAM,SACN,SAAU,GACX,CACF,CAED,MAAO,CAIL,oBAKA,mBACD,CACF,0KAlFa,EAAA,CArBV,IAAI,YAEH,OAAQ,EAAA,SACR,aAAY,EAAA,eACZ,UAAS,EAAA,OACT,SAAU,EAAA,SACX,WAAW,QACX,KAAK,QACL,KAAK,KACJ,QAAO,EAAA,QACP,UAAO,CAAA,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,eAAA,GAAa,EAAA,MAAK,oBAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,QAAA,CAAA,EAAA,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,eAAA,GACN,EAAA,MAAK,mBAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,OAAA,CAAA,EAAA,GAEd,MAAA,EAAA,EAAA,aAIP,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBAFK,EAAA,KAAI,CAAA,CACT,KAAK,MAAK,CAAA,GAAA,EAAA,EAAA,YAES,EAAA,OAAA,QAAA,CAAA,CAAA,2BAEvB,EAAA,EAAA,EAAA,iBADW,KAAA,EAAA,EAAA,iBACR,EAAA,MAAK,CAAA,EAAA,CAAA,CAAA,8EAnBiB,EAAA,eAAc,UAAA,MAAA,sBAA2C,EAAA,MAAM,WAAW,IAAG,CAAA,CAAA,CAAA"}

package/dist/lib/editor/EditorToolbarButton.js

@@ -47,7 +47,7 @@ function h(e, t, m, h, g, _) {
 		tabindex: m.tabindex,
 		importance: "clear",
 		kind: "muted",
-		size: 100,
+		size: "xs",
 		onClick: m.onClick,
 		onKeydown: [t[0] || (t[0] = f(p((t) => e.$emit("shift-focus-right"), ["stop"]), ["right"])), t[1] || (t[1] = f(p((t) => e.$emit("shift-focus-left"), ["stop"]), ["left"]))]
 	}, {

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

@@ -1 +1 @@
-{"version":3,"file":"EditorToolbarButton.js","names":[],"sources":["../../../recipes/conversation_view/editor/EditorToolbarButton.vue"],"sourcesContent":["<template>\n  <dt-button\n    ref=\"buttonRef\"\n    v-dt-tooltip=\"{ message: tooltipMessage, placement: 'top', externalAnchorElement: $refs.buttonRef?.$el }\"\n    :active=\"isActive\"\n    :aria-label=\"tooltipMessage\"\n    :data-qa=\"dataQA\"\n    :tabindex=\"tabindex\"\n    importance=\"clear\"\n    kind=\"muted\"\n    :size=\"100\"\n    @click=\"onClick\"\n    @keydown.right.stop=\"$emit('shift-focus-right')\"\n    @keydown.left.stop=\"$emit('shift-focus-left')\"\n  >\n    <template #icon>\n      <component\n        :is=\"icon\"\n        size=\"200\"\n      />\n      <slot name=\"extra\" />\n    </template>\n    {{ label }}\n  </dt-button>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'EditorToolbarButton',\n\n  components: {\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Whether the button is active\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Tooltip message\n     */\n    tooltipMessage: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Data QA attribute for testing\n     */\n    dataQA: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Tab index for keyboard navigation\n     */\n    tabindex: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Icon component\n     */\n    icon: {\n      type: Object,\n      required: true,\n    },\n\n    /**\n     * Button label text\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Click handler function\n     */\n    onClick: {\n      type: Function,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when right arrow key is pressed\n     */\n    'shift-focus-right',\n\n    /**\n     * Emitted when left arrow key is pressed\n     */\n    'shift-focus-left',\n  ],\n};\n</script>\n"],"mappings":";;;;AA6BA,IAAK,IAAU;CACb,MAAM;CAEN,YAAY,EACV,UAAA,GACD;CAED,OAAO;EAIL,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,gBAAgB;GACd,MAAM;GACN,UAAU;GACX;EAKD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,MAAM;GACJ,MAAM;GACN,UAAU;GACX;EAKD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAKD,SAAS;GACP,MAAM;GACN,UAAU;GACX;EACF;CAED,OAAO,CAIL,qBAKA,mBACD;CACF;;;gBAxGC,EAsBY,GAAA;EArBV,KAAI;EAEH,QAAQ,EAAA;EACR,cAAY,EAAA;EACZ,WAAS,EAAA;EACT,UAAU,EAAA;EACX,YAAW;EACX,MAAK;EACJ,MAAM;EACN,SAAO,EAAA;EACP,WAAO,CAAA,EAAA,OAAA,EAAA,KAAA,EAAA,GAAA,MAAa,EAAA,MAAK,oBAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,QAAA,CAAA,GAAA,EAAA,OAAA,EAAA,KAAA,EAAA,GAAA,MACN,EAAA,MAAK,mBAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,OAAA,CAAA,EAAA;;EAEd,MAAI,QAIX,EAAA,GAAA,EAHF,EAGE,EAFK,EAAA,KAAI,EAAA,EACT,MAAK,OAAK,CAAA,GAEZ,EAAqB,EAAA,QAAA,QAAA,CAAA,CAAA;mBAEvB,CAAA,EADW,MACX,EAAG,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;;;;;WAnBiB,EAAA;EAAc,WAAA;EAAA,uBAA2C,EAAA,MAAM,WAAW;EAAG,CAAA,CAAA,CAAA"}
+{"version":3,"file":"EditorToolbarButton.js","names":[],"sources":["../../../recipes/conversation_view/editor/EditorToolbarButton.vue"],"sourcesContent":["<template>\n  <dt-button\n    ref=\"buttonRef\"\n    v-dt-tooltip=\"{ message: tooltipMessage, placement: 'top', externalAnchorElement: $refs.buttonRef?.$el }\"\n    :active=\"isActive\"\n    :aria-label=\"tooltipMessage\"\n    :data-qa=\"dataQA\"\n    :tabindex=\"tabindex\"\n    importance=\"clear\"\n    kind=\"muted\"\n    size=\"xs\"\n    @click=\"onClick\"\n    @keydown.right.stop=\"$emit('shift-focus-right')\"\n    @keydown.left.stop=\"$emit('shift-focus-left')\"\n  >\n    <template #icon>\n      <component\n        :is=\"icon\"\n        size=\"200\"\n      />\n      <slot name=\"extra\" />\n    </template>\n    {{ label }}\n  </dt-button>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'EditorToolbarButton',\n\n  components: {\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Whether the button is active\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Tooltip message\n     */\n    tooltipMessage: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Data QA attribute for testing\n     */\n    dataQA: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Tab index for keyboard navigation\n     */\n    tabindex: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Icon component\n     */\n    icon: {\n      type: Object,\n      required: true,\n    },\n\n    /**\n     * Button label text\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Click handler function\n     */\n    onClick: {\n      type: Function,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when right arrow key is pressed\n     */\n    'shift-focus-right',\n\n    /**\n     * Emitted when left arrow key is pressed\n     */\n    'shift-focus-left',\n  ],\n};\n</script>\n"],"mappings":";;;;AA6BA,IAAK,IAAU;CACb,MAAM;CAEN,YAAY,EACV,UAAA,GACD;CAED,OAAO;EAIL,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,gBAAgB;GACd,MAAM;GACN,UAAU;GACX;EAKD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,MAAM;GACJ,MAAM;GACN,UAAU;GACX;EAKD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAKD,SAAS;GACP,MAAM;GACN,UAAU;GACX;EACF;CAED,OAAO,CAIL,qBAKA,mBACD;CACF;;;gBAxGC,EAsBY,GAAA;EArBV,KAAI;EAEH,QAAQ,EAAA;EACR,cAAY,EAAA;EACZ,WAAS,EAAA;EACT,UAAU,EAAA;EACX,YAAW;EACX,MAAK;EACL,MAAK;EACJ,SAAO,EAAA;EACP,WAAO,CAAA,EAAA,OAAA,EAAA,KAAA,EAAA,GAAA,MAAa,EAAA,MAAK,oBAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,QAAA,CAAA,GAAA,EAAA,OAAA,EAAA,KAAA,EAAA,GAAA,MACN,EAAA,MAAK,mBAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,OAAA,CAAA,EAAA;;EAEd,MAAI,QAIX,EAAA,GAAA,EAHF,EAGE,EAFK,EAAA,KAAI,EAAA,EACT,MAAK,OAAK,CAAA,GAEZ,EAAqB,EAAA,QAAA,QAAA,CAAA,CAAA;mBAEvB,CAAA,EADW,MACX,EAAG,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;;;;;WAnBiB,EAAA;EAAc,WAAA;EAAA,uBAA2C,EAAA,MAAM,WAAW;EAAG,CAAA,CAAA,CAAA"}

package/dist/lib/editor/EditorToolbarDropdownButton.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../button/button.cjs`),n=require(`../dropdown/dropdown.cjs`);let r=require(`vue`);var i={name:`EditorToolbardropdownButton`,components:{DtButton:t.default,DtDropdown:n.default},props:{isActive:{type:Boolean,default:!1},tooltipMessage:{type:String,required:!0},dataQa:{type:String,default:``},dropdownDataQa:{type:String,default:``},tabindex:{type:Number,default:-1},icon:{type:Object,required:!0}},emits:[`shift-focus-right`,`shift-focus-left`],data(){return{pendingCallback:null}},methods:{onDropdownOpened(e){!e&&typeof this.pendingCallback==`function`&&(this.pendingCallback(),this.pendingCallback=null)}}};function a(e,t,n,i,a,o){let s=(0,r.resolveComponent)(`dt-button`),c=(0,r.resolveComponent)(`dt-dropdown`),l=(0,r.resolveDirective)(`dt-tooltip`);return(0,r.openBlock)(),(0,r.createBlock)(c,{"data-qa":n.dropdownDataQa||`${n.dataQa}-dropdown`,padding:`small`,"navigation-type":`arrow-keys`,placement:`bottom-start`,onOpened:o.onDropdownOpened},{anchor:(0,r.withCtx)(({attrs:i})=>[(0,r.withDirectives)(((0,r.openBlock)(),(0,r.createBlock)(s,(0,r.mergeProps)({ref:`buttonRef`},i,{active:n.isActive,"aria-label":n.tooltipMessage,"data-qa":n.dataQa,tabindex:n.tabindex,importance:`clear`,kind:`muted`,size:100,onKeydown:[t[0]||(t[0]=(0,r.withKeys)((0,r.withModifiers)(t=>e.$emit(`shift-focus-right`),[`stop`]),[`right`])),t[1]||(t[1]=(0,r.withKeys)((0,r.withModifiers)(t=>e.$emit(`shift-focus-left`),[`stop`]),[`left`]))]}),{icon:(0,r.withCtx)(()=>[((0,r.openBlock)(),(0,r.createBlock)((0,r.resolveDynamicComponent)(n.icon),{size:`200`}))]),_:1},16,[`active`,`aria-label`,`data-qa`,`tabindex`])),[[l,{message:n.tooltipMessage,placement:`top`,externalAnchorElement:e.$refs.buttonRef?.$el}]])]),list:(0,r.withCtx)(({close:t})=>[(0,r.renderSlot)(e.$slots,`list`,{close:e=>{a.pendingCallback=e,t()}})]),_:3},8,[`data-qa`,`onOpened`])}var o=e.t(i,[[`render`,a]]);exports.default=o;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../button/button.cjs`),n=require(`../dropdown/dropdown.cjs`);let r=require(`vue`);var i={name:`EditorToolbardropdownButton`,components:{DtButton:t.default,DtDropdown:n.default},props:{isActive:{type:Boolean,default:!1},tooltipMessage:{type:String,required:!0},dataQa:{type:String,default:``},dropdownDataQa:{type:String,default:``},tabindex:{type:Number,default:-1},icon:{type:Object,required:!0}},emits:[`shift-focus-right`,`shift-focus-left`],data(){return{pendingCallback:null}},methods:{onDropdownOpened(e){!e&&typeof this.pendingCallback==`function`&&(this.pendingCallback(),this.pendingCallback=null)}}};function a(e,t,n,i,a,o){let s=(0,r.resolveComponent)(`dt-button`),c=(0,r.resolveComponent)(`dt-dropdown`),l=(0,r.resolveDirective)(`dt-tooltip`);return(0,r.openBlock)(),(0,r.createBlock)(c,{"data-qa":n.dropdownDataQa||`${n.dataQa}-dropdown`,padding:`small`,"navigation-type":`arrow-keys`,placement:`bottom-start`,onOpened:o.onDropdownOpened},{anchor:(0,r.withCtx)(({attrs:i})=>[(0,r.withDirectives)(((0,r.openBlock)(),(0,r.createBlock)(s,(0,r.mergeProps)({ref:`buttonRef`},i,{active:n.isActive,"aria-label":n.tooltipMessage,"data-qa":n.dataQa,tabindex:n.tabindex,importance:`clear`,kind:`muted`,size:`xs`,onKeydown:[t[0]||(t[0]=(0,r.withKeys)((0,r.withModifiers)(t=>e.$emit(`shift-focus-right`),[`stop`]),[`right`])),t[1]||(t[1]=(0,r.withKeys)((0,r.withModifiers)(t=>e.$emit(`shift-focus-left`),[`stop`]),[`left`]))]}),{icon:(0,r.withCtx)(()=>[((0,r.openBlock)(),(0,r.createBlock)((0,r.resolveDynamicComponent)(n.icon),{size:`200`}))]),_:1},16,[`active`,`aria-label`,`data-qa`,`tabindex`])),[[l,{message:n.tooltipMessage,placement:`top`,externalAnchorElement:e.$refs.buttonRef?.$el}]])]),list:(0,r.withCtx)(({close:t})=>[(0,r.renderSlot)(e.$slots,`list`,{close:e=>{a.pendingCallback=e,t()}})]),_:3},8,[`data-qa`,`onOpened`])}var o=e.t(i,[[`render`,a]]);exports.default=o;
 //# sourceMappingURL=EditorToolbarDropdownButton.cjs.map

package/dist/lib/editor/EditorToolbarDropdownButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditorToolbarDropdownButton.cjs","names":[],"sources":["../../../recipes/conversation_view/editor/EditorToolbarDropdownButton.vue"],"sourcesContent":["<template>\n  <dt-dropdown\n    :data-qa=\"dropdownDataQa || `${dataQa}-dropdown`\"\n    padding=\"small\"\n    navigation-type=\"arrow-keys\"\n    placement=\"bottom-start\"\n    @opened=\"onDropdownOpened\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <dt-button\n        ref=\"buttonRef\"\n        v-dt-tooltip=\"{ message: tooltipMessage, placement: 'top', externalAnchorElement: $refs.buttonRef?.$el }\"\n        v-bind=\"attrs\"\n        :active=\"isActive\"\n        :aria-label=\"tooltipMessage\"\n        :data-qa=\"dataQa\"\n        :tabindex=\"tabindex\"\n        importance=\"clear\"\n        kind=\"muted\"\n        :size=\"100\"\n        @keydown.right.stop=\"$emit('shift-focus-right')\"\n        @keydown.left.stop=\"$emit('shift-focus-left')\"\n      >\n        <template #icon>\n          <component\n            :is=\"icon\"\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </template>\n    <template #list=\"{ close: dropdownClose }\">\n      <slot\n        name=\"list\"\n        :close=\"(cb) => { pendingCallback = cb; dropdownClose(); }\"\n      />\n    </template>\n  </dt-dropdown>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtDropdown } from '@/components/dropdown';\n\nexport default {\n  name: 'EditorToolbardropdownButton',\n\n  components: {\n    DtButton,\n    DtDropdown,\n  },\n\n  props: {\n    /**\n     * Whether the button is active\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Tooltip message\n     */\n    tooltipMessage: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Data QA attribute for testing\n     */\n    dataQa: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * dropdown specific data QA attribute\n     */\n    dropdownDataQa: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Tab index for keyboard navigation\n     */\n    tabindex: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Icon component\n     */\n    icon: {\n      type: Object,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when right arrow key is pressed\n     */\n    'shift-focus-right',\n\n    /**\n     * Emitted when left arrow key is pressed\n     */\n    'shift-focus-left',\n  ],\n\n  data () {\n    return {\n      pendingCallback: null,\n    };\n  },\n\n  methods: {\n    // Wait until the dropdown is fully closed so the modal's anchor focus\n    // completes first, then the callback can override it (e.g. to focus the editor).\n    onDropdownOpened (isOpen) {\n      if (!isOpen && typeof this.pendingCallback === 'function') {\n        this.pendingCallback();\n        this.pendingCallback = null;\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"gSA4CA,IAAK,EAAU,CACb,KAAM,8BAEN,WAAY,CACV,SAAA,EAAA,QACA,WAAA,EAAA,QACD,CAED,MAAO,CAIL,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,eAAgB,CACd,KAAM,OACN,SAAU,GACX,CAKD,OAAQ,CACN,KAAM,OACN,QAAS,GACV,CAKD,eAAgB,CACd,KAAM,OACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,OACN,QAAS,GACV,CAKD,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CACF,CAED,MAAO,CAIL,oBAKA,mBACD,CAED,MAAQ,CACN,MAAO,CACL,gBAAiB,KAClB,EAGH,QAAS,CAGP,iBAAkB,EAAQ,CACpB,CAAC,GAAU,OAAO,KAAK,iBAAoB,aAC7C,KAAK,iBAAiB,CACtB,KAAK,gBAAkB,OAG5B,CACF,4LA7Fe,EAAA,CAnCX,UAAS,EAAA,gBAAc,GAAO,EAAA,OAAM,WACrC,QAAQ,QACR,kBAAgB,aAChB,UAAU,eACT,SAAQ,EAAA,mBAEE,QAAA,EAAA,EAAA,UAqBG,CArBO,WAAK,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAqBZ,GAAA,EAAA,EAAA,YAAA,CAnBV,IAAI,YAAW,CAEP,EAAK,CACZ,OAAQ,EAAA,SACR,aAAY,EAAA,eACZ,UAAS,EAAA,OACT,SAAU,EAAA,SACX,WAAW,QACX,KAAK,QACJ,KAAM,IACN,UAAO,CAAA,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,eAAA,GAAa,EAAA,MAAK,oBAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,QAAA,CAAA,EAAA,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,eAAA,GACN,EAAA,MAAK,mBAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,OAAA,CAAA,EAAA,IAEd,MAAA,EAAA,EAAA,aAIP,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBAFK,EAAA,KAAI,CAAA,CACT,KAAK,MAAK,CAAA,EAAA,CAAA,qEAfW,EAAA,eAAc,UAAA,MAAA,sBAA2C,EAAA,MAAM,WAAW,IAAG,CAAA,CAAA,CAAA,CAAA,CAAA,CAoB/F,MAAA,EAAA,EAAA,UAIP,CAAA,MAJsB,KAAa,EAAA,EAAA,EAAA,YAInC,EAAA,OAAA,OAAA,CADC,MAAQ,GAAE,CAAO,EAAA,gBAAkB,EAAI,GAAa"}
+{"version":3,"file":"EditorToolbarDropdownButton.cjs","names":[],"sources":["../../../recipes/conversation_view/editor/EditorToolbarDropdownButton.vue"],"sourcesContent":["<template>\n  <dt-dropdown\n    :data-qa=\"dropdownDataQa || `${dataQa}-dropdown`\"\n    padding=\"small\"\n    navigation-type=\"arrow-keys\"\n    placement=\"bottom-start\"\n    @opened=\"onDropdownOpened\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <dt-button\n        ref=\"buttonRef\"\n        v-dt-tooltip=\"{ message: tooltipMessage, placement: 'top', externalAnchorElement: $refs.buttonRef?.$el }\"\n        v-bind=\"attrs\"\n        :active=\"isActive\"\n        :aria-label=\"tooltipMessage\"\n        :data-qa=\"dataQa\"\n        :tabindex=\"tabindex\"\n        importance=\"clear\"\n        kind=\"muted\"\n        size=\"xs\"\n        @keydown.right.stop=\"$emit('shift-focus-right')\"\n        @keydown.left.stop=\"$emit('shift-focus-left')\"\n      >\n        <template #icon>\n          <component\n            :is=\"icon\"\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </template>\n    <template #list=\"{ close: dropdownClose }\">\n      <slot\n        name=\"list\"\n        :close=\"(cb) => { pendingCallback = cb; dropdownClose(); }\"\n      />\n    </template>\n  </dt-dropdown>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtDropdown } from '@/components/dropdown';\n\nexport default {\n  name: 'EditorToolbardropdownButton',\n\n  components: {\n    DtButton,\n    DtDropdown,\n  },\n\n  props: {\n    /**\n     * Whether the button is active\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Tooltip message\n     */\n    tooltipMessage: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Data QA attribute for testing\n     */\n    dataQa: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * dropdown specific data QA attribute\n     */\n    dropdownDataQa: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Tab index for keyboard navigation\n     */\n    tabindex: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Icon component\n     */\n    icon: {\n      type: Object,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when right arrow key is pressed\n     */\n    'shift-focus-right',\n\n    /**\n     * Emitted when left arrow key is pressed\n     */\n    'shift-focus-left',\n  ],\n\n  data () {\n    return {\n      pendingCallback: null,\n    };\n  },\n\n  methods: {\n    // Wait until the dropdown is fully closed so the modal's anchor focus\n    // completes first, then the callback can override it (e.g. to focus the editor).\n    onDropdownOpened (isOpen) {\n      if (!isOpen && typeof this.pendingCallback === 'function') {\n        this.pendingCallback();\n        this.pendingCallback = null;\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"gSA4CA,IAAK,EAAU,CACb,KAAM,8BAEN,WAAY,CACV,SAAA,EAAA,QACA,WAAA,EAAA,QACD,CAED,MAAO,CAIL,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,eAAgB,CACd,KAAM,OACN,SAAU,GACX,CAKD,OAAQ,CACN,KAAM,OACN,QAAS,GACV,CAKD,eAAgB,CACd,KAAM,OACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,OACN,QAAS,GACV,CAKD,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CACF,CAED,MAAO,CAIL,oBAKA,mBACD,CAED,MAAQ,CACN,MAAO,CACL,gBAAiB,KAClB,EAGH,QAAS,CAGP,iBAAkB,EAAQ,CACpB,CAAC,GAAU,OAAO,KAAK,iBAAoB,aAC7C,KAAK,iBAAiB,CACtB,KAAK,gBAAkB,OAG5B,CACF,4LA7Fe,EAAA,CAnCX,UAAS,EAAA,gBAAc,GAAO,EAAA,OAAM,WACrC,QAAQ,QACR,kBAAgB,aAChB,UAAU,eACT,SAAQ,EAAA,mBAEE,QAAA,EAAA,EAAA,UAqBG,CArBO,WAAK,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAqBZ,GAAA,EAAA,EAAA,YAAA,CAnBV,IAAI,YAAW,CAEP,EAAK,CACZ,OAAQ,EAAA,SACR,aAAY,EAAA,eACZ,UAAS,EAAA,OACT,SAAU,EAAA,SACX,WAAW,QACX,KAAK,QACL,KAAK,KACJ,UAAO,CAAA,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,eAAA,GAAa,EAAA,MAAK,oBAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,QAAA,CAAA,EAAA,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,eAAA,GACN,EAAA,MAAK,mBAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,OAAA,CAAA,EAAA,IAEd,MAAA,EAAA,EAAA,aAIP,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBAFK,EAAA,KAAI,CAAA,CACT,KAAK,MAAK,CAAA,EAAA,CAAA,qEAfW,EAAA,eAAc,UAAA,MAAA,sBAA2C,EAAA,MAAM,WAAW,IAAG,CAAA,CAAA,CAAA,CAAA,CAAA,CAoB/F,MAAA,EAAA,EAAA,UAIP,CAAA,MAJsB,KAAa,EAAA,EAAA,EAAA,YAInC,EAAA,OAAA,OAAA,CADC,MAAQ,GAAE,CAAO,EAAA,gBAAkB,EAAI,GAAa"}

package/dist/lib/editor/EditorToolbarDropdownButton.js

@@ -59,7 +59,7 @@ function h(e, t, n, m, h, g) {
 			tabindex: n.tabindex,
 			importance: "clear",
 			kind: "muted",
-			size: 100,
+			size: "xs",
 			onKeydown: [t[0] || (t[0] = f(p((t) => e.$emit("shift-focus-right"), ["stop"]), ["right"])), t[1] || (t[1] = f(p((t) => e.$emit("shift-focus-left"), ["stop"]), ["left"]))]
 		}), {
 			icon: u(() => [(a(), r(l(n.icon), { size: "200" }))]),

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

@@ -1 +1 @@
-{"version":3,"file":"EditorToolbarDropdownButton.js","names":[],"sources":["../../../recipes/conversation_view/editor/EditorToolbarDropdownButton.vue"],"sourcesContent":["<template>\n  <dt-dropdown\n    :data-qa=\"dropdownDataQa || `${dataQa}-dropdown`\"\n    padding=\"small\"\n    navigation-type=\"arrow-keys\"\n    placement=\"bottom-start\"\n    @opened=\"onDropdownOpened\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <dt-button\n        ref=\"buttonRef\"\n        v-dt-tooltip=\"{ message: tooltipMessage, placement: 'top', externalAnchorElement: $refs.buttonRef?.$el }\"\n        v-bind=\"attrs\"\n        :active=\"isActive\"\n        :aria-label=\"tooltipMessage\"\n        :data-qa=\"dataQa\"\n        :tabindex=\"tabindex\"\n        importance=\"clear\"\n        kind=\"muted\"\n        :size=\"100\"\n        @keydown.right.stop=\"$emit('shift-focus-right')\"\n        @keydown.left.stop=\"$emit('shift-focus-left')\"\n      >\n        <template #icon>\n          <component\n            :is=\"icon\"\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </template>\n    <template #list=\"{ close: dropdownClose }\">\n      <slot\n        name=\"list\"\n        :close=\"(cb) => { pendingCallback = cb; dropdownClose(); }\"\n      />\n    </template>\n  </dt-dropdown>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtDropdown } from '@/components/dropdown';\n\nexport default {\n  name: 'EditorToolbardropdownButton',\n\n  components: {\n    DtButton,\n    DtDropdown,\n  },\n\n  props: {\n    /**\n     * Whether the button is active\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Tooltip message\n     */\n    tooltipMessage: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Data QA attribute for testing\n     */\n    dataQa: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * dropdown specific data QA attribute\n     */\n    dropdownDataQa: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Tab index for keyboard navigation\n     */\n    tabindex: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Icon component\n     */\n    icon: {\n      type: Object,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when right arrow key is pressed\n     */\n    'shift-focus-right',\n\n    /**\n     * Emitted when left arrow key is pressed\n     */\n    'shift-focus-left',\n  ],\n\n  data () {\n    return {\n      pendingCallback: null,\n    };\n  },\n\n  methods: {\n    // Wait until the dropdown is fully closed so the modal's anchor focus\n    // completes first, then the callback can override it (e.g. to focus the editor).\n    onDropdownOpened (isOpen) {\n      if (!isOpen && typeof this.pendingCallback === 'function') {\n        this.pendingCallback();\n        this.pendingCallback = null;\n      }\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;AA4CA,IAAK,IAAU;CACb,MAAM;CAEN,YAAY;EACV,UAAA;EACA,YAAA;EACD;CAED,OAAO;EAIL,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,gBAAgB;GACd,MAAM;GACN,UAAU;GACX;EAKD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,gBAAgB;GACd,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,MAAM;GACJ,MAAM;GACN,UAAU;GACX;EACF;CAED,OAAO,CAIL,qBAKA,mBACD;CAED,OAAQ;AACN,SAAO,EACL,iBAAiB,MAClB;;CAGH,SAAS,EAGP,iBAAkB,GAAQ;AACxB,EAAI,CAAC,KAAU,OAAO,KAAK,mBAAoB,eAC7C,KAAK,iBAAiB,EACtB,KAAK,kBAAkB;IAG5B;CACF;;;aAjIC,EAoCc,GAAA;EAnCX,WAAS,EAAA,kBAAc,GAAO,EAAA,OAAM;EACrC,SAAQ;EACR,mBAAgB;EAChB,WAAU;EACT,UAAQ,EAAA;;EAEE,QAAM,GAqBH,EArBO,eAAK,CAAA,GAAA,GAAA,EACxB,EAoBY,GApBZ,EAoBY,EAnBV,KAAI,aAAW,EAEP,GAAK;GACZ,QAAQ,EAAA;GACR,cAAY,EAAA;GACZ,WAAS,EAAA;GACT,UAAU,EAAA;GACX,YAAW;GACX,MAAK;GACJ,MAAM;GACN,WAAO,CAAA,EAAA,OAAA,EAAA,KAAA,EAAA,GAAA,MAAa,EAAA,MAAK,oBAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,QAAA,CAAA,GAAA,EAAA,OAAA,EAAA,KAAA,EAAA,GAAA,MACN,EAAA,MAAK,mBAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,OAAA,CAAA,EAAA;;GAEd,MAAI,QAIX,EAAA,GAAA,EAHF,EAGE,EAFK,EAAA,KAAI,EAAA,EACT,MAAK,OAAK,CAAA,EAAA,CAAA;;;;;;;;YAfW,EAAA;GAAc,WAAA;GAAA,uBAA2C,EAAA,MAAM,WAAW;GAAG,CAAA,CAAA,CAAA,CAAA,CAAA;EAoB/F,MAAI,GAIX,EAAA,OAJsB,QAAa,CACrC,EAGE,EAAA,QAAA,QAAA,EADC,QAAQ,MAAE;AAA6B,GAAtB,EAAA,kBAAkB,GAAI,GAAa"}
+{"version":3,"file":"EditorToolbarDropdownButton.js","names":[],"sources":["../../../recipes/conversation_view/editor/EditorToolbarDropdownButton.vue"],"sourcesContent":["<template>\n  <dt-dropdown\n    :data-qa=\"dropdownDataQa || `${dataQa}-dropdown`\"\n    padding=\"small\"\n    navigation-type=\"arrow-keys\"\n    placement=\"bottom-start\"\n    @opened=\"onDropdownOpened\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <dt-button\n        ref=\"buttonRef\"\n        v-dt-tooltip=\"{ message: tooltipMessage, placement: 'top', externalAnchorElement: $refs.buttonRef?.$el }\"\n        v-bind=\"attrs\"\n        :active=\"isActive\"\n        :aria-label=\"tooltipMessage\"\n        :data-qa=\"dataQa\"\n        :tabindex=\"tabindex\"\n        importance=\"clear\"\n        kind=\"muted\"\n        size=\"xs\"\n        @keydown.right.stop=\"$emit('shift-focus-right')\"\n        @keydown.left.stop=\"$emit('shift-focus-left')\"\n      >\n        <template #icon>\n          <component\n            :is=\"icon\"\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </template>\n    <template #list=\"{ close: dropdownClose }\">\n      <slot\n        name=\"list\"\n        :close=\"(cb) => { pendingCallback = cb; dropdownClose(); }\"\n      />\n    </template>\n  </dt-dropdown>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtDropdown } from '@/components/dropdown';\n\nexport default {\n  name: 'EditorToolbardropdownButton',\n\n  components: {\n    DtButton,\n    DtDropdown,\n  },\n\n  props: {\n    /**\n     * Whether the button is active\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Tooltip message\n     */\n    tooltipMessage: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Data QA attribute for testing\n     */\n    dataQa: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * dropdown specific data QA attribute\n     */\n    dropdownDataQa: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Tab index for keyboard navigation\n     */\n    tabindex: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Icon component\n     */\n    icon: {\n      type: Object,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when right arrow key is pressed\n     */\n    'shift-focus-right',\n\n    /**\n     * Emitted when left arrow key is pressed\n     */\n    'shift-focus-left',\n  ],\n\n  data () {\n    return {\n      pendingCallback: null,\n    };\n  },\n\n  methods: {\n    // Wait until the dropdown is fully closed so the modal's anchor focus\n    // completes first, then the callback can override it (e.g. to focus the editor).\n    onDropdownOpened (isOpen) {\n      if (!isOpen && typeof this.pendingCallback === 'function') {\n        this.pendingCallback();\n        this.pendingCallback = null;\n      }\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;AA4CA,IAAK,IAAU;CACb,MAAM;CAEN,YAAY;EACV,UAAA;EACA,YAAA;EACD;CAED,OAAO;EAIL,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,gBAAgB;GACd,MAAM;GACN,UAAU;GACX;EAKD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,gBAAgB;GACd,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,MAAM;GACJ,MAAM;GACN,UAAU;GACX;EACF;CAED,OAAO,CAIL,qBAKA,mBACD;CAED,OAAQ;AACN,SAAO,EACL,iBAAiB,MAClB;;CAGH,SAAS,EAGP,iBAAkB,GAAQ;AACxB,EAAI,CAAC,KAAU,OAAO,KAAK,mBAAoB,eAC7C,KAAK,iBAAiB,EACtB,KAAK,kBAAkB;IAG5B;CACF;;;aAjIC,EAoCc,GAAA;EAnCX,WAAS,EAAA,kBAAc,GAAO,EAAA,OAAM;EACrC,SAAQ;EACR,mBAAgB;EAChB,WAAU;EACT,UAAQ,EAAA;;EAEE,QAAM,GAqBH,EArBO,eAAK,CAAA,GAAA,GAAA,EACxB,EAoBY,GApBZ,EAoBY,EAnBV,KAAI,aAAW,EAEP,GAAK;GACZ,QAAQ,EAAA;GACR,cAAY,EAAA;GACZ,WAAS,EAAA;GACT,UAAU,EAAA;GACX,YAAW;GACX,MAAK;GACL,MAAK;GACJ,WAAO,CAAA,EAAA,OAAA,EAAA,KAAA,EAAA,GAAA,MAAa,EAAA,MAAK,oBAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,QAAA,CAAA,GAAA,EAAA,OAAA,EAAA,KAAA,EAAA,GAAA,MACN,EAAA,MAAK,mBAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,OAAA,CAAA,EAAA;;GAEd,MAAI,QAIX,EAAA,GAAA,EAHF,EAGE,EAFK,EAAA,KAAI,EAAA,EACT,MAAK,OAAK,CAAA,EAAA,CAAA;;;;;;;;YAfW,EAAA;GAAc,WAAA;GAAA,uBAA2C,EAAA,MAAM,WAAW;GAAG,CAAA,CAAA,CAAA,CAAA,CAAA;EAoB/F,MAAI,GAIX,EAAA,OAJsB,QAAa,CACrC,EAGE,EAAA,QAAA,QAAA,EADC,QAAQ,MAAE;AAA6B,GAAtB,EAAA,kBAAkB,GAAI,GAAa"}

package/dist/lib/editor/EditorToolbarPopoverButton.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../button/button.cjs`),n=require(`../popover/popover.cjs`);let r=require(`vue`);var i={name:`EditorToolbarPopoverButton`,components:{DtButton:t.default,DtPopover:n.default},props:{isActive:{type:Boolean,default:!1},tooltipMessage:{type:String,required:!0},dataQa:{type:String,default:``},popoverDataQa:{type:String,default:``},tabindex:{type:Number,default:-1},icon:{type:Object,required:!0}},emits:[`shift-focus-right`,`shift-focus-left`],data(){return{pendingCallback:null}},methods:{onPopoverOpened(e){!e&&typeof this.pendingCallback==`function`&&(this.pendingCallback(),this.pendingCallback=null)}}};function a(e,t,n,i,a,o){let s=(0,r.resolveComponent)(`dt-button`),c=(0,r.resolveComponent)(`dt-popover`),l=(0,r.resolveDirective)(`dt-tooltip`);return(0,r.openBlock)(),(0,r.createBlock)(c,{"data-qa":n.popoverDataQa||`${n.dataQa}-popover`,padding:`small`,"navigation-type":`arrow-keys`,placement:`bottom-start`,"open-with-arrow-keys":!0,onOpened:o.onPopoverOpened},{anchor:(0,r.withCtx)(({attrs:i})=>[(0,r.withDirectives)(((0,r.openBlock)(),(0,r.createBlock)(s,(0,r.mergeProps)({ref:`buttonRef`},i,{active:n.isActive,"aria-label":n.tooltipMessage,"data-qa":n.dataQa,tabindex:n.tabindex,importance:`clear`,kind:`muted`,size:100,onKeydown:[t[0]||(t[0]=(0,r.withKeys)((0,r.withModifiers)(t=>e.$emit(`shift-focus-right`),[`stop`]),[`right`])),t[1]||(t[1]=(0,r.withKeys)((0,r.withModifiers)(t=>e.$emit(`shift-focus-left`),[`stop`]),[`left`]))]}),{icon:(0,r.withCtx)(()=>[((0,r.openBlock)(),(0,r.createBlock)((0,r.resolveDynamicComponent)(n.icon),{size:`200`}))]),_:1},16,[`active`,`aria-label`,`data-qa`,`tabindex`])),[[l,{message:n.tooltipMessage,placement:`top`,externalAnchorElement:e.$refs.buttonRef?.$el}]])]),content:(0,r.withCtx)(({close:t})=>[(0,r.renderSlot)(e.$slots,`content`,{close:e=>{a.pendingCallback=e,t()}})]),_:3},8,[`data-qa`,`onOpened`])}var o=e.t(i,[[`render`,a]]);exports.default=o;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../button/button.cjs`),n=require(`../popover/popover.cjs`);let r=require(`vue`);var i={name:`EditorToolbarPopoverButton`,components:{DtButton:t.default,DtPopover:n.default},props:{isActive:{type:Boolean,default:!1},tooltipMessage:{type:String,required:!0},dataQa:{type:String,default:``},popoverDataQa:{type:String,default:``},tabindex:{type:Number,default:-1},icon:{type:Object,required:!0}},emits:[`shift-focus-right`,`shift-focus-left`],data(){return{pendingCallback:null}},methods:{onPopoverOpened(e){!e&&typeof this.pendingCallback==`function`&&(this.pendingCallback(),this.pendingCallback=null)}}};function a(e,t,n,i,a,o){let s=(0,r.resolveComponent)(`dt-button`),c=(0,r.resolveComponent)(`dt-popover`),l=(0,r.resolveDirective)(`dt-tooltip`);return(0,r.openBlock)(),(0,r.createBlock)(c,{"data-qa":n.popoverDataQa||`${n.dataQa}-popover`,padding:`small`,"navigation-type":`arrow-keys`,placement:`bottom-start`,"open-with-arrow-keys":!0,onOpened:o.onPopoverOpened},{anchor:(0,r.withCtx)(({attrs:i})=>[(0,r.withDirectives)(((0,r.openBlock)(),(0,r.createBlock)(s,(0,r.mergeProps)({ref:`buttonRef`},i,{active:n.isActive,"aria-label":n.tooltipMessage,"data-qa":n.dataQa,tabindex:n.tabindex,importance:`clear`,kind:`muted`,size:`xs`,onKeydown:[t[0]||(t[0]=(0,r.withKeys)((0,r.withModifiers)(t=>e.$emit(`shift-focus-right`),[`stop`]),[`right`])),t[1]||(t[1]=(0,r.withKeys)((0,r.withModifiers)(t=>e.$emit(`shift-focus-left`),[`stop`]),[`left`]))]}),{icon:(0,r.withCtx)(()=>[((0,r.openBlock)(),(0,r.createBlock)((0,r.resolveDynamicComponent)(n.icon),{size:`200`}))]),_:1},16,[`active`,`aria-label`,`data-qa`,`tabindex`])),[[l,{message:n.tooltipMessage,placement:`top`,externalAnchorElement:e.$refs.buttonRef?.$el}]])]),content:(0,r.withCtx)(({close:t})=>[(0,r.renderSlot)(e.$slots,`content`,{close:e=>{a.pendingCallback=e,t()}})]),_:3},8,[`data-qa`,`onOpened`])}var o=e.t(i,[[`render`,a]]);exports.default=o;
 //# sourceMappingURL=EditorToolbarPopoverButton.cjs.map

package/dist/lib/editor/EditorToolbarPopoverButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditorToolbarPopoverButton.cjs","names":[],"sources":["../../../recipes/conversation_view/editor/EditorToolbarPopoverButton.vue"],"sourcesContent":["<template>\n  <dt-popover\n    :data-qa=\"popoverDataQa || `${dataQa}-popover`\"\n    padding=\"small\"\n    navigation-type=\"arrow-keys\"\n    placement=\"bottom-start\"\n    :open-with-arrow-keys=\"true\"\n    @opened=\"onPopoverOpened\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <dt-button\n        ref=\"buttonRef\"\n        v-dt-tooltip=\"{ message: tooltipMessage, placement: 'top', externalAnchorElement: $refs.buttonRef?.$el }\"\n        v-bind=\"attrs\"\n        :active=\"isActive\"\n        :aria-label=\"tooltipMessage\"\n        :data-qa=\"dataQa\"\n        :tabindex=\"tabindex\"\n        importance=\"clear\"\n        kind=\"muted\"\n        :size=\"100\"\n        @keydown.right.stop=\"$emit('shift-focus-right')\"\n        @keydown.left.stop=\"$emit('shift-focus-left')\"\n      >\n        <template #icon>\n          <component\n            :is=\"icon\"\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </template>\n    <template #content=\"{ close: popoverClose }\">\n      <slot\n        name=\"content\"\n        :close=\"(cb) => { pendingCallback = cb; popoverClose(); }\"\n      />\n    </template>\n  </dt-popover>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\n\nexport default {\n  name: 'EditorToolbarPopoverButton',\n\n  components: {\n    DtButton,\n    DtPopover,\n  },\n\n  props: {\n    /**\n     * Whether the button is active\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Tooltip message\n     */\n    tooltipMessage: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Data QA attribute for testing\n     */\n    dataQa: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Popover specific data QA attribute\n     */\n    popoverDataQa: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Tab index for keyboard navigation\n     */\n    tabindex: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Icon component\n     */\n    icon: {\n      type: Object,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when right arrow key is pressed\n     */\n    'shift-focus-right',\n\n    /**\n     * Emitted when left arrow key is pressed\n     */\n    'shift-focus-left',\n  ],\n\n  data () {\n    return {\n      pendingCallback: null,\n    };\n  },\n\n  methods: {\n    // Wait until the dropdown is fully closed so the modal's anchor focus\n    // completes first, then the callback can override it (e.g. to focus the editor).\n    onPopoverOpened (isOpen) {\n      if (!isOpen && typeof this.pendingCallback === 'function') {\n        this.pendingCallback();\n        this.pendingCallback = null;\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"8RA6CA,IAAK,EAAU,CACb,KAAM,6BAEN,WAAY,CACV,SAAA,EAAA,QACA,UAAA,EAAA,QACD,CAED,MAAO,CAIL,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,eAAgB,CACd,KAAM,OACN,SAAU,GACX,CAKD,OAAQ,CACN,KAAM,OACN,QAAS,GACV,CAKD,cAAe,CACb,KAAM,OACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,OACN,QAAS,GACV,CAKD,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CACF,CAED,MAAO,CAIL,oBAKA,mBACD,CAED,MAAQ,CACN,MAAO,CACL,gBAAiB,KAClB,EAGH,QAAS,CAGP,gBAAiB,EAAQ,CACnB,CAAC,GAAU,OAAO,KAAK,iBAAoB,aAC7C,KAAK,iBAAiB,CACtB,KAAK,gBAAkB,OAG5B,CACF,2LA7Fc,EAAA,CApCV,UAAS,EAAA,eAAa,GAAO,EAAA,OAAM,UACpC,QAAQ,QACR,kBAAgB,aAChB,UAAU,eACT,uBAAsB,GACtB,SAAQ,EAAA,kBAEE,QAAA,EAAA,EAAA,UAqBG,CArBO,WAAK,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAqBZ,GAAA,EAAA,EAAA,YAAA,CAnBV,IAAI,YAAW,CAEP,EAAK,CACZ,OAAQ,EAAA,SACR,aAAY,EAAA,eACZ,UAAS,EAAA,OACT,SAAU,EAAA,SACX,WAAW,QACX,KAAK,QACJ,KAAM,IACN,UAAO,CAAA,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,eAAA,GAAa,EAAA,MAAK,oBAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,QAAA,CAAA,EAAA,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,eAAA,GACN,EAAA,MAAK,mBAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,OAAA,CAAA,EAAA,IAEd,MAAA,EAAA,EAAA,aAIP,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBAFK,EAAA,KAAI,CAAA,CACT,KAAK,MAAK,CAAA,EAAA,CAAA,qEAfW,EAAA,eAAc,UAAA,MAAA,sBAA2C,EAAA,MAAM,WAAW,IAAG,CAAA,CAAA,CAAA,CAAA,CAAA,CAoB/F,SAAA,EAAA,EAAA,UAIP,CAAA,MAJyB,KAAY,EAAA,EAAA,EAAA,YAIrC,EAAA,OAAA,UAAA,CADC,MAAQ,GAAE,CAAO,EAAA,gBAAkB,EAAI,GAAY"}
+{"version":3,"file":"EditorToolbarPopoverButton.cjs","names":[],"sources":["../../../recipes/conversation_view/editor/EditorToolbarPopoverButton.vue"],"sourcesContent":["<template>\n  <dt-popover\n    :data-qa=\"popoverDataQa || `${dataQa}-popover`\"\n    padding=\"small\"\n    navigation-type=\"arrow-keys\"\n    placement=\"bottom-start\"\n    :open-with-arrow-keys=\"true\"\n    @opened=\"onPopoverOpened\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <dt-button\n        ref=\"buttonRef\"\n        v-dt-tooltip=\"{ message: tooltipMessage, placement: 'top', externalAnchorElement: $refs.buttonRef?.$el }\"\n        v-bind=\"attrs\"\n        :active=\"isActive\"\n        :aria-label=\"tooltipMessage\"\n        :data-qa=\"dataQa\"\n        :tabindex=\"tabindex\"\n        importance=\"clear\"\n        kind=\"muted\"\n        size=\"xs\"\n        @keydown.right.stop=\"$emit('shift-focus-right')\"\n        @keydown.left.stop=\"$emit('shift-focus-left')\"\n      >\n        <template #icon>\n          <component\n            :is=\"icon\"\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </template>\n    <template #content=\"{ close: popoverClose }\">\n      <slot\n        name=\"content\"\n        :close=\"(cb) => { pendingCallback = cb; popoverClose(); }\"\n      />\n    </template>\n  </dt-popover>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\n\nexport default {\n  name: 'EditorToolbarPopoverButton',\n\n  components: {\n    DtButton,\n    DtPopover,\n  },\n\n  props: {\n    /**\n     * Whether the button is active\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Tooltip message\n     */\n    tooltipMessage: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Data QA attribute for testing\n     */\n    dataQa: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Popover specific data QA attribute\n     */\n    popoverDataQa: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Tab index for keyboard navigation\n     */\n    tabindex: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Icon component\n     */\n    icon: {\n      type: Object,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when right arrow key is pressed\n     */\n    'shift-focus-right',\n\n    /**\n     * Emitted when left arrow key is pressed\n     */\n    'shift-focus-left',\n  ],\n\n  data () {\n    return {\n      pendingCallback: null,\n    };\n  },\n\n  methods: {\n    // Wait until the dropdown is fully closed so the modal's anchor focus\n    // completes first, then the callback can override it (e.g. to focus the editor).\n    onPopoverOpened (isOpen) {\n      if (!isOpen && typeof this.pendingCallback === 'function') {\n        this.pendingCallback();\n        this.pendingCallback = null;\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"8RA6CA,IAAK,EAAU,CACb,KAAM,6BAEN,WAAY,CACV,SAAA,EAAA,QACA,UAAA,EAAA,QACD,CAED,MAAO,CAIL,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,eAAgB,CACd,KAAM,OACN,SAAU,GACX,CAKD,OAAQ,CACN,KAAM,OACN,QAAS,GACV,CAKD,cAAe,CACb,KAAM,OACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,OACN,QAAS,GACV,CAKD,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CACF,CAED,MAAO,CAIL,oBAKA,mBACD,CAED,MAAQ,CACN,MAAO,CACL,gBAAiB,KAClB,EAGH,QAAS,CAGP,gBAAiB,EAAQ,CACnB,CAAC,GAAU,OAAO,KAAK,iBAAoB,aAC7C,KAAK,iBAAiB,CACtB,KAAK,gBAAkB,OAG5B,CACF,2LA7Fc,EAAA,CApCV,UAAS,EAAA,eAAa,GAAO,EAAA,OAAM,UACpC,QAAQ,QACR,kBAAgB,aAChB,UAAU,eACT,uBAAsB,GACtB,SAAQ,EAAA,kBAEE,QAAA,EAAA,EAAA,UAqBG,CArBO,WAAK,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAqBZ,GAAA,EAAA,EAAA,YAAA,CAnBV,IAAI,YAAW,CAEP,EAAK,CACZ,OAAQ,EAAA,SACR,aAAY,EAAA,eACZ,UAAS,EAAA,OACT,SAAU,EAAA,SACX,WAAW,QACX,KAAK,QACL,KAAK,KACJ,UAAO,CAAA,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,eAAA,GAAa,EAAA,MAAK,oBAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,QAAA,CAAA,EAAA,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,eAAA,GACN,EAAA,MAAK,mBAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,OAAA,CAAA,EAAA,IAEd,MAAA,EAAA,EAAA,aAIP,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBAFK,EAAA,KAAI,CAAA,CACT,KAAK,MAAK,CAAA,EAAA,CAAA,qEAfW,EAAA,eAAc,UAAA,MAAA,sBAA2C,EAAA,MAAM,WAAW,IAAG,CAAA,CAAA,CAAA,CAAA,CAAA,CAoB/F,SAAA,EAAA,EAAA,UAIP,CAAA,MAJyB,KAAY,EAAA,EAAA,EAAA,YAIrC,EAAA,OAAA,UAAA,CADC,MAAQ,GAAE,CAAO,EAAA,gBAAkB,EAAI,GAAY"}

package/dist/lib/editor/EditorToolbarPopoverButton.js

@@ -60,7 +60,7 @@ function h(e, t, n, m, h, g) {
 			tabindex: n.tabindex,
 			importance: "clear",
 			kind: "muted",
-			size: 100,
+			size: "xs",
 			onKeydown: [t[0] || (t[0] = f(p((t) => e.$emit("shift-focus-right"), ["stop"]), ["right"])), t[1] || (t[1] = f(p((t) => e.$emit("shift-focus-left"), ["stop"]), ["left"]))]
 		}), {
 			icon: u(() => [(a(), r(l(n.icon), { size: "200" }))]),

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

@@ -1 +1 @@
-{"version":3,"file":"EditorToolbarPopoverButton.js","names":[],"sources":["../../../recipes/conversation_view/editor/EditorToolbarPopoverButton.vue"],"sourcesContent":["<template>\n  <dt-popover\n    :data-qa=\"popoverDataQa || `${dataQa}-popover`\"\n    padding=\"small\"\n    navigation-type=\"arrow-keys\"\n    placement=\"bottom-start\"\n    :open-with-arrow-keys=\"true\"\n    @opened=\"onPopoverOpened\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <dt-button\n        ref=\"buttonRef\"\n        v-dt-tooltip=\"{ message: tooltipMessage, placement: 'top', externalAnchorElement: $refs.buttonRef?.$el }\"\n        v-bind=\"attrs\"\n        :active=\"isActive\"\n        :aria-label=\"tooltipMessage\"\n        :data-qa=\"dataQa\"\n        :tabindex=\"tabindex\"\n        importance=\"clear\"\n        kind=\"muted\"\n        :size=\"100\"\n        @keydown.right.stop=\"$emit('shift-focus-right')\"\n        @keydown.left.stop=\"$emit('shift-focus-left')\"\n      >\n        <template #icon>\n          <component\n            :is=\"icon\"\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </template>\n    <template #content=\"{ close: popoverClose }\">\n      <slot\n        name=\"content\"\n        :close=\"(cb) => { pendingCallback = cb; popoverClose(); }\"\n      />\n    </template>\n  </dt-popover>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\n\nexport default {\n  name: 'EditorToolbarPopoverButton',\n\n  components: {\n    DtButton,\n    DtPopover,\n  },\n\n  props: {\n    /**\n     * Whether the button is active\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Tooltip message\n     */\n    tooltipMessage: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Data QA attribute for testing\n     */\n    dataQa: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Popover specific data QA attribute\n     */\n    popoverDataQa: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Tab index for keyboard navigation\n     */\n    tabindex: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Icon component\n     */\n    icon: {\n      type: Object,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when right arrow key is pressed\n     */\n    'shift-focus-right',\n\n    /**\n     * Emitted when left arrow key is pressed\n     */\n    'shift-focus-left',\n  ],\n\n  data () {\n    return {\n      pendingCallback: null,\n    };\n  },\n\n  methods: {\n    // Wait until the dropdown is fully closed so the modal's anchor focus\n    // completes first, then the callback can override it (e.g. to focus the editor).\n    onPopoverOpened (isOpen) {\n      if (!isOpen && typeof this.pendingCallback === 'function') {\n        this.pendingCallback();\n        this.pendingCallback = null;\n      }\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;AA6CA,IAAK,IAAU;CACb,MAAM;CAEN,YAAY;EACV,UAAA;EACA,WAAA;EACD;CAED,OAAO;EAIL,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,gBAAgB;GACd,MAAM;GACN,UAAU;GACX;EAKD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,eAAe;GACb,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,MAAM;GACJ,MAAM;GACN,UAAU;GACX;EACF;CAED,OAAO,CAIL,qBAKA,mBACD;CAED,OAAQ;AACN,SAAO,EACL,iBAAiB,MAClB;;CAGH,SAAS,EAGP,gBAAiB,GAAQ;AACvB,EAAI,CAAC,KAAU,OAAO,KAAK,mBAAoB,eAC7C,KAAK,iBAAiB,EACtB,KAAK,kBAAkB;IAG5B;CACF;;;aAlIC,EAqCa,GAAA;EApCV,WAAS,EAAA,iBAAa,GAAO,EAAA,OAAM;EACpC,SAAQ;EACR,mBAAgB;EAChB,WAAU;EACT,wBAAsB;EACtB,UAAQ,EAAA;;EAEE,QAAM,GAqBH,EArBO,eAAK,CAAA,GAAA,GAAA,EACxB,EAoBY,GApBZ,EAoBY,EAnBV,KAAI,aAAW,EAEP,GAAK;GACZ,QAAQ,EAAA;GACR,cAAY,EAAA;GACZ,WAAS,EAAA;GACT,UAAU,EAAA;GACX,YAAW;GACX,MAAK;GACJ,MAAM;GACN,WAAO,CAAA,EAAA,OAAA,EAAA,KAAA,EAAA,GAAA,MAAa,EAAA,MAAK,oBAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,QAAA,CAAA,GAAA,EAAA,OAAA,EAAA,KAAA,EAAA,GAAA,MACN,EAAA,MAAK,mBAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,OAAA,CAAA,EAAA;;GAEd,MAAI,QAIX,EAAA,GAAA,EAHF,EAGE,EAFK,EAAA,KAAI,EAAA,EACT,MAAK,OAAK,CAAA,EAAA,CAAA;;;;;;;;YAfW,EAAA;GAAc,WAAA;GAAA,uBAA2C,EAAA,MAAM,WAAW;GAAG,CAAA,CAAA,CAAA,CAAA,CAAA;EAoB/F,SAAO,GAId,EAAA,OAJyB,QAAY,CACvC,EAGE,EAAA,QAAA,WAAA,EADC,QAAQ,MAAE;AAA6B,GAAtB,EAAA,kBAAkB,GAAI,GAAY"}
+{"version":3,"file":"EditorToolbarPopoverButton.js","names":[],"sources":["../../../recipes/conversation_view/editor/EditorToolbarPopoverButton.vue"],"sourcesContent":["<template>\n  <dt-popover\n    :data-qa=\"popoverDataQa || `${dataQa}-popover`\"\n    padding=\"small\"\n    navigation-type=\"arrow-keys\"\n    placement=\"bottom-start\"\n    :open-with-arrow-keys=\"true\"\n    @opened=\"onPopoverOpened\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <dt-button\n        ref=\"buttonRef\"\n        v-dt-tooltip=\"{ message: tooltipMessage, placement: 'top', externalAnchorElement: $refs.buttonRef?.$el }\"\n        v-bind=\"attrs\"\n        :active=\"isActive\"\n        :aria-label=\"tooltipMessage\"\n        :data-qa=\"dataQa\"\n        :tabindex=\"tabindex\"\n        importance=\"clear\"\n        kind=\"muted\"\n        size=\"xs\"\n        @keydown.right.stop=\"$emit('shift-focus-right')\"\n        @keydown.left.stop=\"$emit('shift-focus-left')\"\n      >\n        <template #icon>\n          <component\n            :is=\"icon\"\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </template>\n    <template #content=\"{ close: popoverClose }\">\n      <slot\n        name=\"content\"\n        :close=\"(cb) => { pendingCallback = cb; popoverClose(); }\"\n      />\n    </template>\n  </dt-popover>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\n\nexport default {\n  name: 'EditorToolbarPopoverButton',\n\n  components: {\n    DtButton,\n    DtPopover,\n  },\n\n  props: {\n    /**\n     * Whether the button is active\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Tooltip message\n     */\n    tooltipMessage: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Data QA attribute for testing\n     */\n    dataQa: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Popover specific data QA attribute\n     */\n    popoverDataQa: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Tab index for keyboard navigation\n     */\n    tabindex: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Icon component\n     */\n    icon: {\n      type: Object,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when right arrow key is pressed\n     */\n    'shift-focus-right',\n\n    /**\n     * Emitted when left arrow key is pressed\n     */\n    'shift-focus-left',\n  ],\n\n  data () {\n    return {\n      pendingCallback: null,\n    };\n  },\n\n  methods: {\n    // Wait until the dropdown is fully closed so the modal's anchor focus\n    // completes first, then the callback can override it (e.g. to focus the editor).\n    onPopoverOpened (isOpen) {\n      if (!isOpen && typeof this.pendingCallback === 'function') {\n        this.pendingCallback();\n        this.pendingCallback = null;\n      }\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;AA6CA,IAAK,IAAU;CACb,MAAM;CAEN,YAAY;EACV,UAAA;EACA,WAAA;EACD;CAED,OAAO;EAIL,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,gBAAgB;GACd,MAAM;GACN,UAAU;GACX;EAKD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,eAAe;GACb,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,MAAM;GACJ,MAAM;GACN,UAAU;GACX;EACF;CAED,OAAO,CAIL,qBAKA,mBACD;CAED,OAAQ;AACN,SAAO,EACL,iBAAiB,MAClB;;CAGH,SAAS,EAGP,gBAAiB,GAAQ;AACvB,EAAI,CAAC,KAAU,OAAO,KAAK,mBAAoB,eAC7C,KAAK,iBAAiB,EACtB,KAAK,kBAAkB;IAG5B;CACF;;;aAlIC,EAqCa,GAAA;EApCV,WAAS,EAAA,iBAAa,GAAO,EAAA,OAAM;EACpC,SAAQ;EACR,mBAAgB;EAChB,WAAU;EACT,wBAAsB;EACtB,UAAQ,EAAA;;EAEE,QAAM,GAqBH,EArBO,eAAK,CAAA,GAAA,GAAA,EACxB,EAoBY,GApBZ,EAoBY,EAnBV,KAAI,aAAW,EAEP,GAAK;GACZ,QAAQ,EAAA;GACR,cAAY,EAAA;GACZ,WAAS,EAAA;GACT,UAAU,EAAA;GACX,YAAW;GACX,MAAK;GACL,MAAK;GACJ,WAAO,CAAA,EAAA,OAAA,EAAA,KAAA,EAAA,GAAA,MAAa,EAAA,MAAK,oBAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,QAAA,CAAA,GAAA,EAAA,OAAA,EAAA,KAAA,EAAA,GAAA,MACN,EAAA,MAAK,mBAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,OAAA,CAAA,EAAA;;GAEd,MAAI,QAIX,EAAA,GAAA,EAHF,EAGE,EAFK,EAAA,KAAI,EAAA,EACT,MAAK,OAAK,CAAA,EAAA,CAAA;;;;;;;;YAfW,EAAA;GAAc,WAAA;GAAA,uBAA2C,EAAA,MAAM,WAAW;GAAG,CAAA,CAAA,CAAA,CAAA,CAAA;EAoB/F,SAAO,GAId,EAAA,OAJyB,QAAY,CACvC,EAGE,EAAA,QAAA,WAAA,EADC,QAAQ,MAAE;AAA6B,GAAtB,EAAA,kBAAkB,GAAI,GAAY"}

package/dist/lib/editor/editor.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../localization/index.cjs`),r=require(`../button/button.cjs`),i=require(`../list-item/list-item.cjs`),a=require(`../../combobox-Da7wBh3G.cjs`),o=require(`../stack/stack.cjs`),s=require(`../tooltip/tooltip.cjs`),c=require(`../popover/popover.cjs`),l=require(`../dropdown/dropdown-separator.cjs`),u=require(`../input/input.cjs`),d=require(`../list-item-group/list-item-group.cjs`),f=require(`../../rich_text_editor-TolFmwK_.cjs`),p=require(`../rich-text-editor/rich-text-editor-constants.cjs`),m=require(`./editor-constants.cjs`),h=require(`./EditorToolbarButton.cjs`),g=require(`./EditorToolbarDropdownButton.cjs`),_=require(`./EditorToolbarPopoverButton.cjs`);let v=require(`vue`),y=require(`@dialpad/dialtone-icons/vue`);var b={compatConfig:{MODE:3},name:`DtRecipeEditor`,components:{DtListItemGroup:d.default,DtDropdownSeparator:l.default,DtListItem:i.default,DtRichTextEditor:f.t,DtButton:r.default,DtPopover:c.default,DtStack:o.default,DtInput:u.default,DtTooltip:s.default,DtCombobox:a.t,EditorToolbarButton:h.default,EditorToolbarDropdownButton:g.default,EditorToolbarPopoverButton:_.default,DtIconQuickReply:y.DtIconQuickReply,DtIconBold:y.DtIconBold,DtIconItalic:y.DtIconItalic,DtIconUnderline:y.DtIconUnderline,DtIconStrikethrough:y.DtIconStrikethrough,DtIconListBullet:y.DtIconListBullet,DtIconListOrdered:y.DtIconListOrdered,DtIconAlignLeft:y.DtIconAlignLeft,DtIconAlignCenter:y.DtIconAlignCenter,DtIconAlignRight:y.DtIconAlignRight,DtIconAlignJustify:y.DtIconAlignJustify,DtIconQuote:y.DtIconQuote,DtIconCodeBlock:y.DtIconCodeBlock,DtIconLink2:y.DtIconLink2,DtIconImage:y.DtIconImage,DtIconSearch:y.DtIconSearch,DtIconType:y.DtIconType,DtIconBraces:y.DtIconBraces,DtIconChevronDown:y.DtIconChevronDown,DtIconFontSize:y.DtIconFontSize,DtIconStopFilled:y.DtIconStopFilled},mixins:[],inheritAttrs:!1,props:{modelValue:{type:[Object,String],default:``},editable:{type:Boolean,default:!0},inputAriaLabel:{type:String,required:!0,default:``},inputClass:{type:String,default:``},autoFocus:{type:[Boolean,String,Number],default:!1,validator(e){return typeof e==`string`?p.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(e):!0}},placeholder:{type:String,default:``},maxHeight:{type:String,default:`unset`},setLinkPlaceholder:{type:String,default:``},showBoldButton:{type:Boolean,default:!0},showItalicsButton:{type:Boolean,default:!0},showUnderlineButton:{type:Boolean,default:!0},showStrikeButton:{type:Boolean,default:!0},showListItemsButton:{type:Boolean,default:!0},showOrderedListButton:{type:Boolean,default:!0},showAlignLeftButton:{type:Boolean,default:!0},showAlignCenterButton:{type:Boolean,default:!0},showAlignRightButton:{type:Boolean,default:!0},showAlignJustifyButton:{type:Boolean,default:!0},showQuoteButton:{type:Boolean,default:!0},showCodeBlockButton:{type:Boolean,default:!0},showQuickRepliesButton:{type:Boolean,default:!0},showInlineImageButton:{type:Boolean,default:!1},showVariableButton:{type:Boolean,default:!1},variableCategories:{type:Array,default:()=>[]},showAddLink:{type:Object,default:()=>({showAddLinkButton:!0})},showFontStyleButton:{type:Boolean,default:!1},showFontSizeButton:{type:Boolean,default:!1},showFontColorButton:{type:Boolean,default:!1},fontStyles:{type:Array,default:()=>[{name:`Arial`,value:null},{name:`Georgia`,value:`Georgia`},{name:`Helvetica`,value:`Helvetica`},{name:`Verdana`,value:`Verdana`},{name:`Times New Roman`,value:`Times New Roman`}]},fontSizes:{type:Array,default:()=>[{name:`Small`,value:`12px`},{name:`Normal`,value:`15px`},{name:`Large`,value:`24px`},{name:`Huge`,value:`36px`}]},allowBackgroundColor:{type:Boolean,default:!1},allowLineHeight:{type:Boolean,default:!1},preserveWhitespace:{type:[Boolean,String],default:`full`},useDivTags:{type:Boolean,default:!1},allowTables:{type:Boolean,default:!1},allowImageResize:{type:Boolean,default:!1}},emits:[`focus`,`blur`,`update:modelValue`,`quick-replies-click`,`inline-image-click`,`text-input`],data(){return{internalInputValue:this.modelValue,hasFocus:!1,linkOptions:{class:`d-recipe-editor__link`},currentFontColor:void 0,showLinkInput:!1,fontStyleSearch:``,linkInput:``,currentButtonRefIndex:0,variableSearchValue:``,i18n:new n.DialtoneLocalization}},computed:{inputLength(){return this.internalInputValue.length},htmlOutputFormat(){return p.RICH_TEXT_EDITOR_OUTPUT_FORMATS[2]},flattenedVariableItems(){return this.variableCategories?this.variableCategories.reduce((e,t)=>e.concat(t.items||[]),[]):[]},showingTextFormatButtons(){return this.showBoldButton||this.showItalicsButton||this.showStrikeButton||this.showUnderlineButton},showingAlignmentButtons(){return this.showAlignLeftButton||this.showAlignCenterButton||this.showAlignRightButton||this.showAlignJustifyButton},showingListButtons(){return this.showListItemsButton||this.showOrderedListButton},orderedRefs(){let e=this.buttonGroups.reduce(function(e,t){return t.buttonGroup.forEach(n=>{e.push(this.getButtonRef(t.key,n.selector))},this),e}.bind(this),[]);return e.push(this.getButtonRef(`custom`,`link`)),e},buttonGroups(){let e=this.individualButtons.map(e=>({key:e.selector,buttonGroup:[e]}));return[{key:`new`,buttonGroup:this.newButtons},{key:`format`,buttonGroup:this.textFormatButtons},{key:`alignment`,buttonGroup:this.alignmentButtons},{key:`list`,buttonGroup:this.listButtons},...e].filter(e=>e.buttonGroup.length>0)},newButtons(){return[{showBtn:this.showQuickRepliesButton,buttonType:`button`,label:this.i18n.$t(`DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL`),selector:`quickReplies`,icon:y.DtIconQuickReply,dataQA:`dt-recipe-editor-quick-replies-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL`),onClick:this.onQuickRepliesClick}].filter(e=>e.showBtn)},textFormatButtons(){return[{showBtn:this.showFontStyleButton,buttonType:`popover`,selector:`fontStyle`,icon:y.DtIconType,dataQA:`dt-recipe-editor-font-style-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_FONT_STYLE_BUTTON_LABEL`)},{showBtn:this.showFontSizeButton,buttonType:`popover`,selector:`fontSize`,icon:y.DtIconFontSize,dataQA:`dt-recipe-editor-font-size-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_FONT_SIZE_BUTTON_LABEL`)},{showBtn:this.showFontColorButton,buttonType:`custom`,selector:`fontColor`,icon:y.DtIconStopFilled,dataQA:`dt-recipe-editor-font-color-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_FONT_COLOR_BUTTON_LABEL`),onClick:this.onColorPickerButtonClick},{showBtn:this.showBoldButton,buttonType:`button`,selector:`bold`,icon:y.DtIconBold,dataQA:`dt-recipe-editor-bold-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_BOLD_BUTTON_LABEL`),onClick:this.onBoldTextToggle},{showBtn:this.showItalicsButton,buttonType:`button`,selector:`italic`,icon:y.DtIconItalic,dataQA:`dt-recipe-editor-italics-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_ITALICS_BUTTON_LABEL`),onClick:this.onItalicTextToggle},{showBtn:this.showUnderlineButton,buttonType:`button`,selector:`underline`,icon:y.DtIconUnderline,dataQA:`dt-recipe-editor-underline-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_UNDERLINE_BUTTON_LABEL`),onClick:this.onUnderlineTextToggle},{showBtn:this.showStrikeButton,buttonType:`button`,selector:`strike`,icon:y.DtIconStrikethrough,dataQA:`dt-recipe-editor-strike-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_STRIKE_BUTTON_LABEL`),onClick:this.onStrikethroughTextToggle}].filter(e=>e.showBtn)},alignmentButtons(){return[{showBtn:this.showAlignLeftButton,buttonType:`button`,selector:{textAlign:`left`},icon:y.DtIconAlignLeft,dataQA:`dt-recipe-editor-align-left-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_ALIGN_LEFT_BUTTON_LABEL`),onClick:()=>this.onTextAlign(`left`)},{showBtn:this.showAlignCenterButton,buttonType:`button`,selector:{textAlign:`center`},icon:y.DtIconAlignCenter,dataQA:`dt-recipe-editor-align-center-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_ALIGN_CENTER_BUTTON_LABEL`),onClick:()=>this.onTextAlign(`center`)},{showBtn:this.showAlignRightButton,buttonType:`button`,selector:{textAlign:`right`},icon:y.DtIconAlignRight,dataQA:`dt-recipe-editor-align-right-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_ALIGN_RIGHT_BUTTON_LABEL`),onClick:()=>this.onTextAlign(`right`)},{showBtn:this.showAlignJustifyButton,buttonType:`button`,selector:{textAlign:`justify`},icon:y.DtIconAlignJustify,dataQA:`dt-recipe-editor-align-justify-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_ALIGN_JUSTIFY_BUTTON_LABEL`),onClick:()=>this.onTextAlign(`justify`)}].filter(e=>e.showBtn)},listButtons(){return[{showBtn:this.showListItemsButton,buttonType:`button`,selector:`bulletList`,icon:y.DtIconListBullet,dataQA:`dt-recipe-editor-list-items-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_BULLET_LIST_BUTTON_LABEL`),onClick:this.onBulletListToggle},{showBtn:this.showOrderedListButton,buttonType:`button`,selector:`orderedList`,icon:y.DtIconListOrdered,dataQA:`dt-recipe-editor-ordered-list-items-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_ORDERED_LIST_BUTTON_LABEL`),onClick:this.onOrderedListToggle}].filter(e=>e.showBtn)},individualButtons(){return[{showBtn:this.showQuoteButton,buttonType:`button`,selector:`blockquote`,icon:y.DtIconQuote,dataQA:`dt-recipe-editor-blockquote-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_QUOTE_BUTTON_LABEL`),onClick:this.onBlockquoteToggle},{showBtn:this.showCodeBlockButton,buttonType:`button`,selector:`codeBlock`,icon:y.DtIconCodeBlock,dataQA:`dt-recipe-editor-code-block-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_CODE_BUTTON_LABEL`),onClick:this.onCodeBlockToggle},{showBtn:this.showInlineImageButton,buttonType:`button`,selector:`image`,icon:y.DtIconImage,dataQA:`dt-recipe-editor-inline-image-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_IMAGE_BUTTON_LABEL`),onClick:this.onInsertInlineImageClick},{showBtn:this.showVariableButton,buttonType:`popover`,selector:`variable`,icon:y.DtIconBraces,dataQA:`dt-recipe-editor-variable-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_VARIABLE_BUTTON_LABEL`)}].filter(e=>e.showBtn)},linkButton(){return{showBtn:this.showAddLink.showAddLinkButton,buttonType:`custom`,selector:`link`,icon:y.DtIconLink2,dataQA:`dt-recipe-editor-add-link-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_LINK_BUTTON_LABEL`),onClick:this.openLinkInput}},confirmSetLinkButtonLabels(){return this.i18n.$ta(`DIALTONE_EDITOR_CONFIRM_SET_LINK_BUTTON`)},cancelSetLinkButtonLabels(){return this.i18n.$ta(`DIALTONE_EDITOR_CANCEL_SET_LINK_BUTTON`)},removeLinkButtonLabels(){return this.i18n.$ta(`DIALTONE_EDITOR_REMOVE_LINK_BUTTON`)},showAddLinkButtonLabels(){return this.i18n.$ta(`DIALTONE_EDITOR_ADD_LINK_BUTTON`)},filteredFontStyles(){let e=this.fontStyleSearch.toLowerCase();return this.fontStyles.filter(t=>t.name.toLowerCase().includes(e))},filteredCategories(){return this.variableCategories.filter(e=>this.getFilteredItemsForCategory(e).length)},colorPickerInput(){return this.$refs.editorRoot?.querySelector(`.colorPickerInput`)},isDefaultFontColor(){return this.currentFontColor===m.EDITOR_DEFAULT_FONT_COLOR},actionBarBtn(){let e=this.$refs[this.orderedRefs[this.currentButtonRefIndex]][0]?.$refs?.buttonRef||this.$refs[this.orderedRefs[this.currentButtonRefIndex]];return Array.isArray(e)?e[0]:e}},watch:{modelValue(e){this.internalInputValue=e}},methods:{removeClassStyleAttrs:e.removeClassStyleAttrs,focusEditor(){this.$refs.richTextEditor?.editor?.commands.focus()},onInputFocus(e){e?.stopPropagation()},removeLink(){this.$refs.richTextEditor?.editor?.chain()?.focus()?.unsetLink()?.run(),this.closeLinkInput()},setLink(e){let t=this.$refs.richTextEditor?.editor;if(e?.preventDefault(),e?.stopPropagation(),!this.linkInput){this.removeLink();return}m.EDITOR_SUPPORTED_LINK_PROTOCOLS.find(e=>e.test(this.linkInput))||(this.linkInput=`${m.EDITOR_DEFAULT_LINK_PREFIX}${this.linkInput}`);let n=t?.view?.state?.selection;n.anchor===n.head?t.chain().focus().insertContentAt(n.anchor,`<a class="${this.linkOptions.class}" href=${this.linkInput}>${this.linkInput}</a>`).run():t.chain().focus().extendMarkRange(`link`).setLink({href:this.linkInput,class:this.linkOptions.class}).run(),this.closeLinkInput()},openLinkInput(){this.showLinkInput=!0},updateInput(e){if(!e)return this.closeLinkInput();this.linkInput=this.$refs.richTextEditor?.editor?.getAttributes(`link`)?.href},closeLinkInput(){this.showLinkInput=!1,this.linkInput=``,this.$refs.richTextEditor.editor?.chain().focus()},onBoldTextToggle(){this.$refs.richTextEditor?.editor?.chain().focus().toggleBold().run()},onItalicTextToggle(){this.$refs.richTextEditor?.editor.chain().focus().toggleItalic().run()},onUnderlineTextToggle(){this.$refs.richTextEditor?.editor.chain().focus().toggleUnderline().run()},onStrikethroughTextToggle(){this.$refs.richTextEditor?.editor.chain().focus().toggleStrike().run()},onTextAlign(e){if(this.$refs.richTextEditor?.editor?.isActive({textAlign:e}))return this.$refs.richTextEditor?.editor.chain().focus().unsetTextAlign().run();this.$refs.richTextEditor?.editor.chain().focus().setTextAlign(e).run()},onBulletListToggle(){this.$refs.richTextEditor?.editor.chain().focus().toggleBulletList().run()},onOrderedListToggle(){this.$refs.richTextEditor?.editor.chain().focus().toggleOrderedList().run()},onCodeBlockToggle(){this.$refs.richTextEditor?.editor.chain().focus().toggleCodeBlock().run()},onQuickRepliesClick(){this.$emit(`quick-replies-click`)},onInsertInlineImageClick(){this.$emit(`inline-image-click`)},insertVariable(e,t){this.$refs.richTextEditor?.editor.chain().focus().insertVariable({id:t.id,placeholder:t.placeholder||``,altText:``,enableAltText:t.enableAltText}).run()},insertInlineImage(e){this.$refs.richTextEditor?.editor.chain().focus().setImage({src:e}).run()},insertInMessageBody(e){this.$refs.richTextEditor?.editor.chain().focus().insertContent(e).run()},setCursorPosition(e=null){this.$refs.richTextEditor?.editor.chain().focus(e).run()},onBlockquoteToggle(){this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().run()},onTextInput(e){this.$emit(`text-input`,e)},onFocus(e){this.hasFocus=!0,this.$emit(`focus`,e)},onBlur(e){this.hasFocus=!1,this.$emit(`blur`,e)},onUpdateModelValue(e){this.$emit(`update:modelValue`,e)},onSelected(){this.updateFontColorInput()},getButtonKey(e,t){return`${e}-${JSON.stringify(t)}`},getButtonRef(e,t){return`${this.getButtonKey(e,t)}-ref`},canFocus(e){return e===this.orderedRefs[this.currentButtonRefIndex]},shiftActionBarFocusRight(){this.shiftButtonRefIndex(1)},shiftActionBarFocusLeft(){this.shiftButtonRefIndex(-1)},shiftButtonRefIndex(e){let t=this.actionBarBtn,n=(this.currentButtonRefIndex+e)%this.orderedRefs.length;this.currentButtonRefIndex=n>=0?n:this.orderedRefs.length+n;let r=this.actionBarBtn;t.$el.blur(),r.$el.focus()},onFontStyleSelect(e){e?this.$refs.richTextEditor?.editor?.chain().focus().setFontFamily(e).run():this.$refs.richTextEditor?.editor?.chain().focus().unsetFontFamily().run(),this.$refs.richTextEditor?.editor?.commands.focus()},isCurrentFontFamily(e){return e?this.$refs.richTextEditor?.editor?.isActive(`textStyle`,{fontFamily:e}):!this.$refs.richTextEditor?.editor?.getAttributes(`textStyle`)?.fontFamily},onFontSizeSelect(e){this.$refs.richTextEditor?.editor?.chain().focus().setFontSize(e).run(),this.$refs.richTextEditor?.editor?.commands.focus()},isCurrentFontSize(e){return e?this.$refs.richTextEditor?.editor?.isActive(`textStyle`,{fontSize:e}):!this.$refs.richTextEditor?.editor?.getAttributes(`textStyle`)?.fontSize},getFilteredItemsForCategory(e){let t=this.variableSearchValue.toLowerCase();return e.name.toLowerCase().includes(t)?e.items:e.items.filter(e=>e.name.toLowerCase().includes(t))},updateFontColorInput(){this.currentFontColor=this.$refs.richTextEditor?.editor?.getAttributes(`textStyle`)?.color||`#000000`},onColorPickerButtonClick(){this.colorPickerInput?.click()},onColorPickerInput(e){this.$refs.richTextEditor?.editor?.chain().focus().setColor(e).run(),this.$refs.richTextEditor?.editor?.commands.focus(),this.updateFontColorInput()}}},x={class:`d-recipe-editor__popover-content`};function S(e,t,n,r,i,a){let o=(0,v.resolveComponent)(`dt-icon-search`),s=(0,v.resolveComponent)(`dt-input`),c=(0,v.resolveComponent)(`dt-list-item`),l=(0,v.resolveComponent)(`dt-combobox`),u=(0,v.resolveComponent)(`editor-toolbar-popover-button`),d=(0,v.resolveComponent)(`editor-toolbar-dropdown-button`),f=(0,v.resolveComponent)(`dt-button`),p=(0,v.resolveComponent)(`dt-dropdown-separator`),m=(0,v.resolveComponent)(`dt-list-item-group`),h=(0,v.resolveComponent)(`editor-toolbar-button`),g=(0,v.resolveComponent)(`dt-stack`),_=(0,v.resolveComponent)(`dt-tooltip`),y=(0,v.resolveComponent)(`dt-popover`),b=(0,v.resolveComponent)(`dt-rich-text-editor`),S=(0,v.resolveDirective)(`dt-tooltip`);return(0,v.openBlock)(),(0,v.createElementBlock)(`div`,{ref:`editorRoot`,class:(0,v.normalizeClass)([`d-recipe-editor`,e.$attrs.class]),style:(0,v.normalizeStyle)(e.$attrs.style),"data-qa":`dt-recipe-editor`,role:`presentation`,onClick:t[6]||(t[6]=t=>e.$refs.richTextEditor.focusEditor())},[(0,v.createVNode)(g,{class:`d-recipe-editor__top-bar`,direction:`row`,gap:`150`},{default:(0,v.withCtx)(()=>[((0,v.openBlock)(!0),(0,v.createElementBlock)(v.Fragment,null,(0,v.renderList)(a.buttonGroups,r=>((0,v.openBlock)(),(0,v.createBlock)(g,{key:r.key,direction:`row`,gap:`50`},{default:(0,v.withCtx)(()=>[((0,v.openBlock)(!0),(0,v.createElementBlock)(v.Fragment,null,(0,v.renderList)(r.buttonGroup,g=>((0,v.openBlock)(),(0,v.createElementBlock)(v.Fragment,null,[g.buttonType===`popover`&&g.selector===`fontStyle`?((0,v.openBlock)(),(0,v.createBlock)(u,{key:a.getButtonKey(r.key,g.selector),ref_for:!0,ref:a.getButtonRef(r.key,g.selector),"is-active":e.$refs.richTextEditor?.editor?.isActive(g.selector),"tooltip-message":g.tooltipMessage,"data-qa":g.dataQA,"popover-data-qa":`dt-recipe-editor-font-style-input-popover`,tabindex:a.canFocus(a.getButtonRef(r.key,g.selector))?0:-1,icon:g.icon,onShiftFocusRight:a.shiftActionBarFocusRight,onShiftFocusLeft:a.shiftActionBarFocusLeft},{content:(0,v.withCtx)(({close:e})=>[(0,v.createVNode)(l,{label:``,"show-label":!1,"show-list":!0,"click-on-select":!0,onEscape:t=>e()},{input:(0,v.withCtx)(({inputProps:e})=>[(0,v.createVNode)(s,(0,v.mergeProps)({ref_for:!0},e,{modelValue:i.fontStyleSearch,"onUpdate:modelValue":t[0]||(t[0]=e=>i.fontStyleSearch=e),class:`d-p-100 d-pbe-50 d-w216`,type:`search`,placeholder:i.i18n.$t(`DIALTONE_EDITOR_FONT_STYLE_SEARCH_PLACEHOLDER`),size:200,role:`menuitem`}),{startIcon:(0,v.withCtx)(({iconSize:e})=>[(0,v.createVNode)(o,{size:e},null,8,[`size`])]),_:1},16,[`modelValue`,`placeholder`])]),list:(0,v.withCtx)(({listProps:t})=>[(0,v.createElementVNode)(`ul`,(0,v.mergeProps)({ref_for:!0},t),[((0,v.openBlock)(!0),(0,v.createElementBlock)(v.Fragment,null,(0,v.renderList)(a.filteredFontStyles,t=>((0,v.openBlock)(),(0,v.createBlock)(c,{key:t.name,selected:a.isCurrentFontFamily(t.value),style:(0,v.normalizeStyle)({fontFamily:t.value||`inherit`}),role:`option`,"navigation-type":`arrow-keys`,onClick:n=>{e(a.focusEditor),a.onFontStyleSelect(t.value)}},{default:(0,v.withCtx)(()=>[(0,v.createTextVNode)((0,v.toDisplayString)(t.name),1)]),_:2},1032,[`selected`,`style`,`onClick`]))),128))],16)]),_:2},1032,[`onEscape`])]),_:1},8,[`is-active`,`tooltip-message`,`data-qa`,`tabindex`,`icon`,`onShiftFocusRight`,`onShiftFocusLeft`])):g.buttonType===`popover`&&g.selector===`fontSize`?((0,v.openBlock)(),(0,v.createBlock)(d,{key:a.getButtonKey(r.key,g.selector),ref_for:!0,ref:a.getButtonRef(r.key,g.selector),"is-active":e.$refs.richTextEditor?.editor?.isActive(g.selector),"tooltip-message":g.tooltipMessage,"data-qa":g.dataQA,"dropdown-data-qa":`dt-recipe-editor-font-size-input-popover`,tabindex:a.canFocus(a.getButtonRef(r.key,g.selector))?0:-1,icon:g.icon,onShiftFocusRight:a.shiftActionBarFocusRight,onShiftFocusLeft:a.shiftActionBarFocusLeft},{list:(0,v.withCtx)(({close:e})=>[((0,v.openBlock)(!0),(0,v.createElementBlock)(v.Fragment,null,(0,v.renderList)(n.fontSizes,t=>((0,v.openBlock)(),(0,v.createBlock)(c,{key:t.name,selected:a.isCurrentFontSize(t.value),role:`menuitem`,"navigation-type":`arrow-keys`,onClick:n=>{e(a.focusEditor),a.onFontSizeSelect(t.value,n)}},{default:(0,v.withCtx)(()=>[(0,v.createElementVNode)(`span`,{style:(0,v.normalizeStyle)({fontSize:t.value})},(0,v.toDisplayString)(t.name),5)]),_:2},1032,[`selected`,`onClick`]))),128))]),_:1},8,[`is-active`,`tooltip-message`,`data-qa`,`tabindex`,`icon`,`onShiftFocusRight`,`onShiftFocusLeft`])):g.buttonType===`custom`&&g.selector===`fontColor`?(0,v.withDirectives)(((0,v.openBlock)(),(0,v.createBlock)(f,{key:a.getButtonKey(r.key,g.selector),ref_for:!0,ref:a.getButtonRef(r.key,g.selector),kind:`muted`,importance:`clear`,size:100,active:e.$refs.richTextEditor?.editor?.isActive(g.selector),tabindex:a.canFocus(a.getButtonRef(r.key,g.selector))?0:-1,"aria-label":g.tooltipMessage,"data-qa":g.dataQA,onKeydown:[(0,v.withKeys)((0,v.withModifiers)(a.shiftActionBarFocusRight,[`stop`]),[`right`]),(0,v.withKeys)((0,v.withModifiers)(a.shiftActionBarFocusLeft,[`stop`]),[`left`])],onClick:e=>g.onClick()},{icon:(0,v.withCtx)(()=>[((0,v.openBlock)(),(0,v.createBlock)((0,v.resolveDynamicComponent)(g.icon),{size:`200`,style:(0,v.normalizeStyle)(a.isDefaultFontColor?{}:{color:i.currentFontColor})},null,8,[`style`])),(0,v.createVNode)(s,{value:i.currentFontColor,class:`d-w0 d-h0 d-of-hidden`,"input-class":`colorPickerInput d-w0 d-h0 d-p-0 d-bar-0`,"input-wrapper-class":`d-w0 d-h0 d-ba-none`,size:200,type:`color`,"onUpdate:modelValue":a.onColorPickerInput,onClick:t[1]||(t[1]=(0,v.withModifiers)(()=>{},[`stop`]))},null,8,[`value`,`onUpdate:modelValue`])]),_:2},1032,[`active`,`tabindex`,`aria-label`,`data-qa`,`onKeydown`,`onClick`])),[[S,{message:g.tooltipMessage,placement:`top`,externalAnchorElement:e.$refs[a.getButtonRef(r.key,g.selector)]?.$el}]]):g.buttonType===`popover`&&g.selector===`variable`?((0,v.openBlock)(),(0,v.createBlock)(u,{key:a.getButtonKey(r.key,g.selector),ref_for:!0,ref:a.getButtonRef(r.key,g.selector),"is-active":!1,"tooltip-message":g.tooltipMessage,"data-qa":g.dataQA,"popover-data-qa":`dt-recipe-editor-variable-popover`,tabindex:a.canFocus(a.getButtonRef(r.key,g.selector))?0:-1,icon:g.icon,onShiftFocusRight:a.shiftActionBarFocusRight,onShiftFocusLeft:a.shiftActionBarFocusLeft},{content:(0,v.withCtx)(({close:e})=>[(0,v.createVNode)(l,{label:``,"show-label":!1,"show-list":!0,"click-on-select":!0,onEscape:t=>e()},{input:(0,v.withCtx)(({inputProps:e})=>[(0,v.createVNode)(s,(0,v.mergeProps)({ref_for:!0},e,{modelValue:i.variableSearchValue,"onUpdate:modelValue":t[2]||(t[2]=e=>i.variableSearchValue=e),class:`d-p-100 d-pbe-50 d-w264`,type:`search`,placeholder:i.i18n.$t(`DIALTONE_EDITOR_VARIABLE_POPOVER_SEARCH_PLACEHOLDER`),size:300,role:`menuitem`}),{startIcon:(0,v.withCtx)(({iconSize:e})=>[(0,v.createVNode)(o,{size:e},null,8,[`size`])]),_:1},16,[`modelValue`,`placeholder`])]),list:(0,v.withCtx)(({listProps:t})=>[(0,v.createElementVNode)(`div`,(0,v.mergeProps)({ref_for:!0},t),[((0,v.openBlock)(!0),(0,v.createElementBlock)(v.Fragment,null,(0,v.renderList)(a.filteredCategories,(t,n)=>((0,v.openBlock)(),(0,v.createBlock)(m,{key:t.name,heading:t.name,"heading-class":`d-headline--sm-compact d-p-100`},{default:(0,v.withCtx)(()=>[((0,v.openBlock)(!0),(0,v.createElementBlock)(v.Fragment,null,(0,v.renderList)(a.getFilteredItemsForCategory(t),n=>((0,v.openBlock)(),(0,v.createBlock)(c,{key:t.name+n.name,role:`option`,"navigation-type":`arrow-keys`,onClick:r=>{a.insertVariable(t.name,n),e(a.focusEditor)}},{default:(0,v.withCtx)(()=>[(0,v.createTextVNode)((0,v.toDisplayString)(n.name),1)]),_:2},1032,[`onClick`]))),128)),n<a.filteredCategories.length-1?((0,v.openBlock)(),(0,v.createBlock)(p,{key:0})):(0,v.createCommentVNode)(``,!0)]),_:2},1032,[`heading`]))),128))],16)]),_:2},1032,[`onEscape`])]),_:1},8,[`tooltip-message`,`data-qa`,`tabindex`,`icon`,`onShiftFocusRight`,`onShiftFocusLeft`])):g.buttonType===`button`?((0,v.openBlock)(),(0,v.createBlock)(h,{key:a.getButtonKey(r.key,g.selector),ref_for:!0,ref:a.getButtonRef(r.key,g.selector),"is-active":e.$refs.richTextEditor?.editor?.isActive(g.selector),"tooltip-message":g.tooltipMessage,"data-qa":g.dataQA,tabindex:a.canFocus(a.getButtonRef(r.key,g.selector))?0:-1,icon:g.icon,label:g.label,"on-click":g.onClick,onShiftFocusRight:a.shiftActionBarFocusRight,onShiftFocusLeft:a.shiftActionBarFocusLeft},null,8,[`is-active`,`tooltip-message`,`data-qa`,`tabindex`,`icon`,`label`,`on-click`,`onShiftFocusRight`,`onShiftFocusLeft`])):(0,v.createCommentVNode)(``,!0)],64))),256)),t[7]||(t[7]=(0,v.createElementVNode)(`div`,{class:`d-recipe-editor__button-group-divider`},null,-1))]),_:2},1024))),128)),a.linkButton.showBtn?((0,v.openBlock)(),(0,v.createBlock)(g,{key:0,direction:`row`,gap:`50`},{default:(0,v.withCtx)(()=>[(0,v.createVNode)(y,{open:i.showLinkInput,"show-close-button":!1,"data-qa":`dt-recipe-editor-link-input-popover`,padding:`none`,placement:`bottom-start`,onClick:[a.onInputFocus,(0,v.withModifiers)(a.onInputFocus,[`stop`])],onOpened:a.updateInput},{anchor:(0,v.withCtx)(()=>[((0,v.openBlock)(),(0,v.createBlock)(_,{key:a.linkButton.key,message:a.linkButton.tooltipMessage,placement:`top`},{anchor:(0,v.withCtx)(()=>[(0,v.createVNode)(f,{ref:a.getButtonRef(`custom`,`link`),active:e.$refs.richTextEditor?.editor?.isActive(a.linkButton.selector),"aria-label":a.linkButton.tooltipMessage,"data-qa":a.linkButton.dataQA,tabindex:a.canFocus(a.getButtonRef(`custom`,`link`))?0:-1,importance:`clear`,kind:`muted`,size:100,onClick:t[3]||(t[3]=e=>a.linkButton.onClick()),onKeydown:[(0,v.withKeys)((0,v.withModifiers)(a.shiftActionBarFocusRight,[`stop`]),[`right`]),(0,v.withKeys)((0,v.withModifiers)(a.shiftActionBarFocusLeft,[`stop`]),[`left`])]},{icon:(0,v.withCtx)(()=>[((0,v.openBlock)(),(0,v.createBlock)((0,v.resolveDynamicComponent)(a.linkButton.icon),{size:`200`}))]),_:1},8,[`active`,`aria-label`,`data-qa`,`tabindex`,`onKeydown`])]),_:1},8,[`message`]))]),content:(0,v.withCtx)(()=>[(0,v.createElementVNode)(`div`,x,[(0,v.createElementVNode)(`span`,null,(0,v.toDisplayString)(a.showAddLinkButtonLabels.title),1),(0,v.createVNode)(s,{modelValue:i.linkInput,"onUpdate:modelValue":t[4]||(t[4]=e=>i.linkInput=e),"input-aria-label":a.showAddLinkButtonLabels[`aria-label`],placeholder:n.setLinkPlaceholder,"data-qa":`dt-recipe-editor-link-input`,"input-wrapper-class":`d-recipe-editor-link__input-wrapper`,onClick:[a.onInputFocus,(0,v.withModifiers)(a.onInputFocus,[`stop`])],onFocus:a.onInputFocus,onKeydown:(0,v.withKeys)(a.setLink,[`enter`])},null,8,[`modelValue`,`input-aria-label`,`placeholder`,`onClick`,`onFocus`,`onKeydown`])])]),footerContent:(0,v.withCtx)(()=>[(0,v.createVNode)(g,{direction:`row`,gap:`50`,class:`d-recipe-editor__popover-footer`},{default:(0,v.withCtx)(()=>[(0,v.createVNode)(f,(0,v.mergeProps)({"data-qa":`dt-recipe-editor-remove-link-btn`,importance:`clear`,kind:`muted`,size:200},a.removeLinkButtonLabels,{onClick:a.removeLink}),{default:(0,v.withCtx)(()=>[(0,v.createTextVNode)((0,v.toDisplayString)(a.removeLinkButtonLabels.title),1)]),_:1},16,[`onClick`]),(0,v.createVNode)(f,(0,v.mergeProps)({"data-qa":`dt-recipe-editor-set-link-cancel-btn`,importance:`clear`,kind:`muted`,size:200},a.cancelSetLinkButtonLabels,{onClick:a.closeLinkInput}),{default:(0,v.withCtx)(()=>[(0,v.createTextVNode)((0,v.toDisplayString)(a.cancelSetLinkButtonLabels.title),1)]),_:1},16,[`onClick`]),(0,v.createVNode)(f,(0,v.mergeProps)({"data-qa":`dt-recipe-editor-set-link-confirm-btn`,size:200},a.confirmSetLinkButtonLabels,{onClick:a.setLink}),{default:(0,v.withCtx)(()=>[(0,v.createTextVNode)((0,v.toDisplayString)(a.confirmSetLinkButtonLabels.title),1)]),_:1},16,[`onClick`])]),_:1})]),_:1},8,[`open`,`onClick`,`onOpened`])]),_:1})):(0,v.createCommentVNode)(``,!0)]),_:1}),(0,v.createElementVNode)(`div`,{style:(0,v.normalizeStyle)({"max-height":n.maxHeight}),class:(0,v.normalizeClass)([`d-recipe-editor__content`,{"d-recipe-editor__content-image-resize":n.allowImageResize}])},[(0,v.createVNode)(b,(0,v.mergeProps)({ref:`richTextEditor`,modelValue:i.internalInputValue,"onUpdate:modelValue":t[5]||(t[5]=e=>i.internalInputValue=e),"allow-font-color":!0,"allow-font-family":!0,"allow-inline-images":!0,"allow-line-breaks":!0,"allow-variable":!0,"allow-font-size":n.showFontSizeButton,"allow-background-color":n.allowBackgroundColor,"allow-line-height":n.allowLineHeight,"variable-items":a.flattenedVariableItems,"show-link-bubble-menu":!1,"auto-focus":n.autoFocus,editable:n.editable,"input-aria-label":n.inputAriaLabel,"input-class":`d-recipe-editor__content-input ${n.inputClass}`,link:!0,"output-format":a.htmlOutputFormat,placeholder:n.placeholder,"preserve-whitespace":n.preserveWhitespace,"use-div-tags":n.useDivTags,"allow-tables":n.allowTables,"allow-image-resize":n.allowImageResize,"data-qa":`dt-rich-text-editor`},a.removeClassStyleAttrs(e.$attrs),{onTextInput:a.onTextInput,onBlur:a.onBlur,onFocus:a.onFocus,"onUpdate:modelValue":a.onUpdateModelValue,onSelected:a.onSelected}),null,16,[`modelValue`,`allow-font-size`,`allow-background-color`,`allow-line-height`,`variable-items`,`auto-focus`,`editable`,`input-aria-label`,`input-class`,`output-format`,`placeholder`,`preserve-whitespace`,`use-div-tags`,`allow-tables`,`allow-image-resize`,`onTextInput`,`onBlur`,`onFocus`,`onUpdate:modelValue`,`onSelected`])],6)],6)}var C=t.t(b,[[`render`,S]]);exports.default=C;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../localization/index.cjs`),r=require(`../button/button.cjs`),i=require(`../list-item/list-item.cjs`),a=require(`../../combobox-DhjZxfUw.cjs`),o=require(`../stack/stack.cjs`),s=require(`../tooltip/tooltip.cjs`),c=require(`../popover/popover.cjs`),l=require(`../dropdown/dropdown-separator.cjs`),u=require(`../input/input.cjs`),d=require(`../list-item-group/list-item-group.cjs`),f=require(`../../rich_text_editor-FduHYl-G.cjs`),p=require(`../rich-text-editor/rich-text-editor-constants.cjs`),m=require(`./editor-constants.cjs`),h=require(`./EditorToolbarButton.cjs`),g=require(`./EditorToolbarDropdownButton.cjs`),_=require(`./EditorToolbarPopoverButton.cjs`);let v=require(`vue`),y=require(`@dialpad/dialtone-icons/vue3`);var b={compatConfig:{MODE:3},name:`DtRecipeEditor`,components:{DtListItemGroup:d.default,DtDropdownSeparator:l.default,DtListItem:i.default,DtRichTextEditor:f.t,DtButton:r.default,DtPopover:c.default,DtStack:o.default,DtInput:u.default,DtTooltip:s.default,DtCombobox:a.t,EditorToolbarButton:h.default,EditorToolbarDropdownButton:g.default,EditorToolbarPopoverButton:_.default,DtIconQuickReply:y.DtIconQuickReply,DtIconBold:y.DtIconBold,DtIconItalic:y.DtIconItalic,DtIconUnderline:y.DtIconUnderline,DtIconStrikethrough:y.DtIconStrikethrough,DtIconListBullet:y.DtIconListBullet,DtIconListOrdered:y.DtIconListOrdered,DtIconAlignLeft:y.DtIconAlignLeft,DtIconAlignCenter:y.DtIconAlignCenter,DtIconAlignRight:y.DtIconAlignRight,DtIconAlignJustify:y.DtIconAlignJustify,DtIconQuote:y.DtIconQuote,DtIconCodeBlock:y.DtIconCodeBlock,DtIconLink2:y.DtIconLink2,DtIconImage:y.DtIconImage,DtIconSearch:y.DtIconSearch,DtIconType:y.DtIconType,DtIconBraces:y.DtIconBraces,DtIconChevronDown:y.DtIconChevronDown,DtIconFontSize:y.DtIconFontSize,DtIconStopFilled:y.DtIconStopFilled},mixins:[],inheritAttrs:!1,props:{modelValue:{type:[Object,String],default:``},editable:{type:Boolean,default:!0},inputAriaLabel:{type:String,required:!0,default:``},inputClass:{type:String,default:``},autoFocus:{type:[Boolean,String,Number],default:!1,validator(e){return typeof e==`string`?p.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(e):!0}},placeholder:{type:String,default:``},maxHeight:{type:String,default:`unset`},setLinkPlaceholder:{type:String,default:``},showBoldButton:{type:Boolean,default:!0},showItalicsButton:{type:Boolean,default:!0},showUnderlineButton:{type:Boolean,default:!0},showStrikeButton:{type:Boolean,default:!0},showListItemsButton:{type:Boolean,default:!0},showOrderedListButton:{type:Boolean,default:!0},showAlignLeftButton:{type:Boolean,default:!0},showAlignCenterButton:{type:Boolean,default:!0},showAlignRightButton:{type:Boolean,default:!0},showAlignJustifyButton:{type:Boolean,default:!0},showQuoteButton:{type:Boolean,default:!0},showCodeBlockButton:{type:Boolean,default:!0},showQuickRepliesButton:{type:Boolean,default:!0},showInlineImageButton:{type:Boolean,default:!1},showVariableButton:{type:Boolean,default:!1},variableCategories:{type:Array,default:()=>[]},showAddLink:{type:Object,default:()=>({showAddLinkButton:!0})},showFontStyleButton:{type:Boolean,default:!1},showFontSizeButton:{type:Boolean,default:!1},showFontColorButton:{type:Boolean,default:!1},fontStyles:{type:Array,default:()=>[{name:`Arial`,value:null},{name:`Georgia`,value:`Georgia`},{name:`Helvetica`,value:`Helvetica`},{name:`Verdana`,value:`Verdana`},{name:`Times New Roman`,value:`Times New Roman`}]},fontSizes:{type:Array,default:()=>[{name:`Small`,value:`12px`},{name:`Normal`,value:`15px`},{name:`Large`,value:`24px`},{name:`Huge`,value:`36px`}]},allowBackgroundColor:{type:Boolean,default:!1},allowLineHeight:{type:Boolean,default:!1},preserveWhitespace:{type:[Boolean,String],default:`full`},useDivTags:{type:Boolean,default:!1},allowTables:{type:Boolean,default:!1},allowImageResize:{type:Boolean,default:!1}},emits:[`focus`,`blur`,`input`,`update:modelValue`,`quick-replies-click`,`inline-image-click`,`text-input`],data(){return{internalInputValue:this.modelValue,hasFocus:!1,linkOptions:{class:`d-recipe-editor__link`},currentFontColor:void 0,showLinkInput:!1,fontStyleSearch:``,linkInput:``,currentButtonRefIndex:0,variableSearchValue:``,i18n:new n.DialtoneLocalization}},computed:{inputLength(){return this.internalInputValue.length},htmlOutputFormat(){return p.RICH_TEXT_EDITOR_OUTPUT_FORMATS[2]},flattenedVariableItems(){return this.variableCategories?this.variableCategories.reduce((e,t)=>e.concat(t.items||[]),[]):[]},showingTextFormatButtons(){return this.showBoldButton||this.showItalicsButton||this.showStrikeButton||this.showUnderlineButton},showingAlignmentButtons(){return this.showAlignLeftButton||this.showAlignCenterButton||this.showAlignRightButton||this.showAlignJustifyButton},showingListButtons(){return this.showListItemsButton||this.showOrderedListButton},orderedRefs(){let e=this.buttonGroups.reduce(function(e,t){return t.buttonGroup.forEach(n=>{e.push(this.getButtonRef(t.key,n.selector))},this),e}.bind(this),[]);return e.push(this.getButtonRef(`custom`,`link`)),e},buttonGroups(){let e=this.individualButtons.map(e=>({key:e.selector,buttonGroup:[e]}));return[{key:`new`,buttonGroup:this.newButtons},{key:`format`,buttonGroup:this.textFormatButtons},{key:`alignment`,buttonGroup:this.alignmentButtons},{key:`list`,buttonGroup:this.listButtons},...e].filter(e=>e.buttonGroup.length>0)},newButtons(){return[{showBtn:this.showQuickRepliesButton,buttonType:`button`,label:this.i18n.$t(`DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL`),selector:`quickReplies`,icon:y.DtIconQuickReply,dataQA:`dt-recipe-editor-quick-replies-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL`),onClick:this.onQuickRepliesClick}].filter(e=>e.showBtn)},textFormatButtons(){return[{showBtn:this.showFontStyleButton,buttonType:`popover`,selector:`fontStyle`,icon:y.DtIconType,dataQA:`dt-recipe-editor-font-style-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_FONT_STYLE_BUTTON_LABEL`)},{showBtn:this.showFontSizeButton,buttonType:`popover`,selector:`fontSize`,icon:y.DtIconFontSize,dataQA:`dt-recipe-editor-font-size-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_FONT_SIZE_BUTTON_LABEL`)},{showBtn:this.showFontColorButton,buttonType:`custom`,selector:`fontColor`,icon:y.DtIconStopFilled,dataQA:`dt-recipe-editor-font-color-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_FONT_COLOR_BUTTON_LABEL`),onClick:this.onColorPickerButtonClick},{showBtn:this.showBoldButton,buttonType:`button`,selector:`bold`,icon:y.DtIconBold,dataQA:`dt-recipe-editor-bold-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_BOLD_BUTTON_LABEL`),onClick:this.onBoldTextToggle},{showBtn:this.showItalicsButton,buttonType:`button`,selector:`italic`,icon:y.DtIconItalic,dataQA:`dt-recipe-editor-italics-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_ITALICS_BUTTON_LABEL`),onClick:this.onItalicTextToggle},{showBtn:this.showUnderlineButton,buttonType:`button`,selector:`underline`,icon:y.DtIconUnderline,dataQA:`dt-recipe-editor-underline-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_UNDERLINE_BUTTON_LABEL`),onClick:this.onUnderlineTextToggle},{showBtn:this.showStrikeButton,buttonType:`button`,selector:`strike`,icon:y.DtIconStrikethrough,dataQA:`dt-recipe-editor-strike-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_STRIKE_BUTTON_LABEL`),onClick:this.onStrikethroughTextToggle}].filter(e=>e.showBtn)},alignmentButtons(){return[{showBtn:this.showAlignLeftButton,buttonType:`button`,selector:{textAlign:`left`},icon:y.DtIconAlignLeft,dataQA:`dt-recipe-editor-align-left-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_ALIGN_LEFT_BUTTON_LABEL`),onClick:()=>this.onTextAlign(`left`)},{showBtn:this.showAlignCenterButton,buttonType:`button`,selector:{textAlign:`center`},icon:y.DtIconAlignCenter,dataQA:`dt-recipe-editor-align-center-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_ALIGN_CENTER_BUTTON_LABEL`),onClick:()=>this.onTextAlign(`center`)},{showBtn:this.showAlignRightButton,buttonType:`button`,selector:{textAlign:`right`},icon:y.DtIconAlignRight,dataQA:`dt-recipe-editor-align-right-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_ALIGN_RIGHT_BUTTON_LABEL`),onClick:()=>this.onTextAlign(`right`)},{showBtn:this.showAlignJustifyButton,buttonType:`button`,selector:{textAlign:`justify`},icon:y.DtIconAlignJustify,dataQA:`dt-recipe-editor-align-justify-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_ALIGN_JUSTIFY_BUTTON_LABEL`),onClick:()=>this.onTextAlign(`justify`)}].filter(e=>e.showBtn)},listButtons(){return[{showBtn:this.showListItemsButton,buttonType:`button`,selector:`bulletList`,icon:y.DtIconListBullet,dataQA:`dt-recipe-editor-list-items-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_BULLET_LIST_BUTTON_LABEL`),onClick:this.onBulletListToggle},{showBtn:this.showOrderedListButton,buttonType:`button`,selector:`orderedList`,icon:y.DtIconListOrdered,dataQA:`dt-recipe-editor-ordered-list-items-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_ORDERED_LIST_BUTTON_LABEL`),onClick:this.onOrderedListToggle}].filter(e=>e.showBtn)},individualButtons(){return[{showBtn:this.showQuoteButton,buttonType:`button`,selector:`blockquote`,icon:y.DtIconQuote,dataQA:`dt-recipe-editor-blockquote-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_QUOTE_BUTTON_LABEL`),onClick:this.onBlockquoteToggle},{showBtn:this.showCodeBlockButton,buttonType:`button`,selector:`codeBlock`,icon:y.DtIconCodeBlock,dataQA:`dt-recipe-editor-code-block-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_CODE_BUTTON_LABEL`),onClick:this.onCodeBlockToggle},{showBtn:this.showInlineImageButton,buttonType:`button`,selector:`image`,icon:y.DtIconImage,dataQA:`dt-recipe-editor-inline-image-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_IMAGE_BUTTON_LABEL`),onClick:this.onInsertInlineImageClick},{showBtn:this.showVariableButton,buttonType:`popover`,selector:`variable`,icon:y.DtIconBraces,dataQA:`dt-recipe-editor-variable-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_VARIABLE_BUTTON_LABEL`)}].filter(e=>e.showBtn)},linkButton(){return{showBtn:this.showAddLink.showAddLinkButton,buttonType:`custom`,selector:`link`,icon:y.DtIconLink2,dataQA:`dt-recipe-editor-add-link-btn`,tooltipMessage:this.i18n.$t(`DIALTONE_EDITOR_LINK_BUTTON_LABEL`),onClick:this.openLinkInput}},confirmSetLinkButtonLabels(){return this.i18n.$ta(`DIALTONE_EDITOR_CONFIRM_SET_LINK_BUTTON`)},cancelSetLinkButtonLabels(){return this.i18n.$ta(`DIALTONE_EDITOR_CANCEL_SET_LINK_BUTTON`)},removeLinkButtonLabels(){return this.i18n.$ta(`DIALTONE_EDITOR_REMOVE_LINK_BUTTON`)},showAddLinkButtonLabels(){return this.i18n.$ta(`DIALTONE_EDITOR_ADD_LINK_BUTTON`)},filteredFontStyles(){let e=this.fontStyleSearch.toLowerCase();return this.fontStyles.filter(t=>t.name.toLowerCase().includes(e))},filteredCategories(){return this.variableCategories.filter(e=>this.getFilteredItemsForCategory(e).length)},colorPickerInput(){return this.$refs.editorRoot?.querySelector(`.colorPickerInput`)},isDefaultFontColor(){return this.currentFontColor===m.EDITOR_DEFAULT_FONT_COLOR},actionBarBtn(){let e=this.$refs[this.orderedRefs[this.currentButtonRefIndex]][0]?.$refs?.buttonRef||this.$refs[this.orderedRefs[this.currentButtonRefIndex]];return Array.isArray(e)?e[0]:e}},watch:{modelValue(e){this.internalInputValue=e}},methods:{removeClassStyleAttrs:e.removeClassStyleAttrs,addClassStyleAttrs:e.addClassStyleAttrs,focusEditor(){this.$refs.richTextEditor?.editor?.commands.focus()},onInputFocus(e){e?.stopPropagation()},removeLink(){this.$refs.richTextEditor?.editor?.chain()?.focus()?.unsetLink()?.run(),this.closeLinkInput()},setLink(e){let t=this.$refs.richTextEditor?.editor;if(e?.preventDefault(),e?.stopPropagation(),!this.linkInput){this.removeLink();return}m.EDITOR_SUPPORTED_LINK_PROTOCOLS.find(e=>e.test(this.linkInput))||(this.linkInput=`${m.EDITOR_DEFAULT_LINK_PREFIX}${this.linkInput}`);let n=t?.view?.state?.selection;n.anchor===n.head?t.chain().focus().insertContentAt(n.anchor,`<a class="${this.linkOptions.class}" href=${this.linkInput}>${this.linkInput}</a>`).run():t.chain().focus().extendMarkRange(`link`).setLink({href:this.linkInput,class:this.linkOptions.class}).run(),this.closeLinkInput()},openLinkInput(){this.showLinkInput=!0},updateInput(e){if(!e)return this.closeLinkInput();this.linkInput=this.$refs.richTextEditor?.editor?.getAttributes(`link`)?.href},closeLinkInput(){this.showLinkInput=!1,this.linkInput=``,this.$refs.richTextEditor.editor?.chain().focus()},onBoldTextToggle(){this.$refs.richTextEditor?.editor?.chain().focus().toggleBold().run()},onItalicTextToggle(){this.$refs.richTextEditor?.editor.chain().focus().toggleItalic().run()},onUnderlineTextToggle(){this.$refs.richTextEditor?.editor.chain().focus().toggleUnderline().run()},onStrikethroughTextToggle(){this.$refs.richTextEditor?.editor.chain().focus().toggleStrike().run()},onTextAlign(e){if(this.$refs.richTextEditor?.editor?.isActive({textAlign:e}))return this.$refs.richTextEditor?.editor.chain().focus().unsetTextAlign().run();this.$refs.richTextEditor?.editor.chain().focus().setTextAlign(e).run()},onBulletListToggle(){this.$refs.richTextEditor?.editor.chain().focus().toggleBulletList().run()},onOrderedListToggle(){this.$refs.richTextEditor?.editor.chain().focus().toggleOrderedList().run()},onCodeBlockToggle(){this.$refs.richTextEditor?.editor.chain().focus().toggleCodeBlock().run()},onQuickRepliesClick(){this.$emit(`quick-replies-click`)},onInsertInlineImageClick(){this.$emit(`inline-image-click`)},insertVariable(e,t){this.$refs.richTextEditor?.editor.chain().focus().insertVariable({id:t.id,placeholder:t.placeholder||``,altText:``,enableAltText:t.enableAltText}).run()},insertInlineImage(e){this.$refs.richTextEditor?.editor.chain().focus().setImage({src:e}).run()},insertInMessageBody(e){this.$refs.richTextEditor?.editor.chain().focus().insertContent(e).run()},setCursorPosition(e=null){this.$refs.richTextEditor?.editor.chain().focus(e).run()},onBlockquoteToggle(){this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().run()},onTextInput(e){this.$emit(`text-input`,e)},onFocus(e){this.hasFocus=!0,this.$emit(`focus`,e)},onBlur(e){this.hasFocus=!1,this.$emit(`blur`,e)},onInput(e){this.$emit(`input`,e),this.$emit(`update:modelValue`,e)},onSelected(){this.updateFontColorInput()},getButtonKey(e,t){return`${e}-${JSON.stringify(t)}`},getButtonRef(e,t){return`${this.getButtonKey(e,t)}-ref`},canFocus(e){return e===this.orderedRefs[this.currentButtonRefIndex]},shiftActionBarFocusRight(){this.shiftButtonRefIndex(1)},shiftActionBarFocusLeft(){this.shiftButtonRefIndex(-1)},shiftButtonRefIndex(e){let t=this.actionBarBtn,n=(this.currentButtonRefIndex+e)%this.orderedRefs.length;this.currentButtonRefIndex=n>=0?n:this.orderedRefs.length+n;let r=this.actionBarBtn;t.$el.blur(),r.$el.focus()},onFontStyleSelect(e){e?this.$refs.richTextEditor?.editor?.chain().focus().setFontFamily(e).run():this.$refs.richTextEditor?.editor?.chain().focus().unsetFontFamily().run(),this.$refs.richTextEditor?.editor?.commands.focus()},isCurrentFontFamily(e){return e?this.$refs.richTextEditor?.editor?.isActive(`textStyle`,{fontFamily:e}):!this.$refs.richTextEditor?.editor?.getAttributes(`textStyle`)?.fontFamily},onFontSizeSelect(e){this.$refs.richTextEditor?.editor?.chain().focus().setFontSize(e).run(),this.$refs.richTextEditor?.editor?.commands.focus()},isCurrentFontSize(e){return e?this.$refs.richTextEditor?.editor?.isActive(`textStyle`,{fontSize:e}):!this.$refs.richTextEditor?.editor?.getAttributes(`textStyle`)?.fontSize},getFilteredItemsForCategory(e){let t=this.variableSearchValue.toLowerCase();return e.name.toLowerCase().includes(t)?e.items:e.items.filter(e=>e.name.toLowerCase().includes(t))},updateFontColorInput(){this.currentFontColor=this.$refs.richTextEditor?.editor?.getAttributes(`textStyle`)?.color||`#000000`},onColorPickerButtonClick(){this.colorPickerInput?.click()},onColorPickerInput(e){this.$refs.richTextEditor?.editor?.chain().focus().setColor(e).run(),this.$refs.richTextEditor?.editor?.commands.focus(),this.updateFontColorInput()}}},x={class:`d-recipe-editor__popover-content`};function S(e,t,n,r,i,a){let o=(0,v.resolveComponent)(`dt-icon-search`),s=(0,v.resolveComponent)(`dt-input`),c=(0,v.resolveComponent)(`dt-list-item`),l=(0,v.resolveComponent)(`dt-combobox`),u=(0,v.resolveComponent)(`editor-toolbar-popover-button`),d=(0,v.resolveComponent)(`editor-toolbar-dropdown-button`),f=(0,v.resolveComponent)(`dt-button`),p=(0,v.resolveComponent)(`dt-dropdown-separator`),m=(0,v.resolveComponent)(`dt-list-item-group`),h=(0,v.resolveComponent)(`editor-toolbar-button`),g=(0,v.resolveComponent)(`dt-stack`),_=(0,v.resolveComponent)(`dt-tooltip`),y=(0,v.resolveComponent)(`dt-popover`),b=(0,v.resolveComponent)(`dt-rich-text-editor`),S=(0,v.resolveDirective)(`dt-tooltip`);return(0,v.openBlock)(),(0,v.createElementBlock)(`div`,(0,v.mergeProps)({ref:`editorRoot`,class:`d-recipe-editor`},a.addClassStyleAttrs(e.$attrs),{"data-qa":`dt-recipe-editor`,role:`presentation`,onClick:t[7]||(t[7]=t=>e.$refs.richTextEditor.focusEditor())}),[(0,v.createVNode)(g,{class:`d-recipe-editor__top-bar`,direction:`row`,gap:`450`},{default:(0,v.withCtx)(()=>[((0,v.openBlock)(!0),(0,v.createElementBlock)(v.Fragment,null,(0,v.renderList)(a.buttonGroups,r=>((0,v.openBlock)(),(0,v.createBlock)(g,{key:r.key,direction:`row`,gap:`300`},{default:(0,v.withCtx)(()=>[((0,v.openBlock)(!0),(0,v.createElementBlock)(v.Fragment,null,(0,v.renderList)(r.buttonGroup,g=>((0,v.openBlock)(),(0,v.createElementBlock)(v.Fragment,null,[g.buttonType===`popover`&&g.selector===`fontStyle`?((0,v.openBlock)(),(0,v.createBlock)(u,{key:a.getButtonKey(r.key,g.selector),ref_for:!0,ref:a.getButtonRef(r.key,g.selector),"is-active":e.$refs.richTextEditor?.editor?.isActive(g.selector),"tooltip-message":g.tooltipMessage,"data-qa":g.dataQA,"popover-data-qa":`dt-recipe-editor-font-style-input-popover`,tabindex:a.canFocus(a.getButtonRef(r.key,g.selector))?0:-1,icon:g.icon,onShiftFocusRight:a.shiftActionBarFocusRight,onShiftFocusLeft:a.shiftActionBarFocusLeft},{content:(0,v.withCtx)(({close:e})=>[(0,v.createVNode)(l,{label:``,"label-visible":!1,"show-list":!0,"click-on-select":!0,onEscape:t=>e()},{input:(0,v.withCtx)(({inputProps:e})=>[(0,v.createVNode)(s,(0,v.mergeProps)({ref_for:!0},e,{modelValue:i.fontStyleSearch,"onUpdate:modelValue":t[0]||(t[0]=e=>i.fontStyleSearch=e),"root-class":`d-p8 d-pb4 d-w216`,type:`search`,placeholder:i.i18n.$t(`DIALTONE_EDITOR_FONT_STYLE_SEARCH_PLACEHOLDER`),size:`sm`,role:`menuitem`}),{leftIcon:(0,v.withCtx)(({iconSize:e})=>[(0,v.createVNode)(o,{size:e},null,8,[`size`])]),_:1},16,[`modelValue`,`placeholder`])]),list:(0,v.withCtx)(({listProps:t})=>[(0,v.createElementVNode)(`ul`,(0,v.mergeProps)({ref_for:!0},t),[((0,v.openBlock)(!0),(0,v.createElementBlock)(v.Fragment,null,(0,v.renderList)(a.filteredFontStyles,t=>((0,v.openBlock)(),(0,v.createBlock)(c,{key:t.name,selected:a.isCurrentFontFamily(t.value),style:(0,v.normalizeStyle)({fontFamily:t.value||`inherit`}),role:`option`,"navigation-type":`arrow-keys`,onClick:n=>{e(a.focusEditor),a.onFontStyleSelect(t.value)}},{default:(0,v.withCtx)(()=>[(0,v.createTextVNode)((0,v.toDisplayString)(t.name),1)]),_:2},1032,[`selected`,`style`,`onClick`]))),128))],16)]),_:2},1032,[`onEscape`])]),_:1},8,[`is-active`,`tooltip-message`,`data-qa`,`tabindex`,`icon`,`onShiftFocusRight`,`onShiftFocusLeft`])):g.buttonType===`popover`&&g.selector===`fontSize`?((0,v.openBlock)(),(0,v.createBlock)(d,{key:a.getButtonKey(r.key,g.selector),ref_for:!0,ref:a.getButtonRef(r.key,g.selector),"is-active":e.$refs.richTextEditor?.editor?.isActive(g.selector),"tooltip-message":g.tooltipMessage,"data-qa":g.dataQA,"dropdown-data-qa":`dt-recipe-editor-font-size-input-popover`,tabindex:a.canFocus(a.getButtonRef(r.key,g.selector))?0:-1,icon:g.icon,onShiftFocusRight:a.shiftActionBarFocusRight,onShiftFocusLeft:a.shiftActionBarFocusLeft},{list:(0,v.withCtx)(({close:e})=>[((0,v.openBlock)(!0),(0,v.createElementBlock)(v.Fragment,null,(0,v.renderList)(n.fontSizes,t=>((0,v.openBlock)(),(0,v.createBlock)(c,{key:t.name,selected:a.isCurrentFontSize(t.value),role:`menuitem`,"navigation-type":`arrow-keys`,onClick:n=>{e(a.focusEditor),a.onFontSizeSelect(t.value,n)}},{default:(0,v.withCtx)(()=>[(0,v.createElementVNode)(`span`,{style:(0,v.normalizeStyle)({fontSize:t.value})},(0,v.toDisplayString)(t.name),5)]),_:2},1032,[`selected`,`onClick`]))),128))]),_:1},8,[`is-active`,`tooltip-message`,`data-qa`,`tabindex`,`icon`,`onShiftFocusRight`,`onShiftFocusLeft`])):g.buttonType===`custom`&&g.selector===`fontColor`?(0,v.withDirectives)(((0,v.openBlock)(),(0,v.createBlock)(f,{key:a.getButtonKey(r.key,g.selector),ref_for:!0,ref:a.getButtonRef(r.key,g.selector),kind:`muted`,importance:`clear`,size:`xs`,active:e.$refs.richTextEditor?.editor?.isActive(g.selector),tabindex:a.canFocus(a.getButtonRef(r.key,g.selector))?0:-1,"aria-label":g.tooltipMessage,"data-qa":g.dataQA,onKeydown:[(0,v.withKeys)((0,v.withModifiers)(a.shiftActionBarFocusRight,[`stop`]),[`right`]),(0,v.withKeys)((0,v.withModifiers)(a.shiftActionBarFocusLeft,[`stop`]),[`left`])],onClick:e=>g.onClick()},{icon:(0,v.withCtx)(()=>[((0,v.openBlock)(),(0,v.createBlock)((0,v.resolveDynamicComponent)(g.icon),{size:`200`,style:(0,v.normalizeStyle)(a.isDefaultFontColor?{}:{color:i.currentFontColor})},null,8,[`style`])),(0,v.createVNode)(s,{value:i.currentFontColor,"root-class":`d-w0 d-h0 d-of-hidden`,"input-class":`colorPickerInput d-w0 d-h0 d-p0 d-bar0`,"input-wrapper-class":`d-w0 d-h0 d-ba-none`,size:`sm`,type:`color`,onInput:a.onColorPickerInput,onClick:t[1]||(t[1]=(0,v.withModifiers)(()=>{},[`stop`]))},null,8,[`value`,`onInput`])]),_:2},1032,[`active`,`tabindex`,`aria-label`,`data-qa`,`onKeydown`,`onClick`])),[[S,{message:g.tooltipMessage,placement:`top`,externalAnchorElement:e.$refs[a.getButtonRef(r.key,g.selector)]?.$el}]]):g.buttonType===`popover`&&g.selector===`variable`?((0,v.openBlock)(),(0,v.createBlock)(u,{key:a.getButtonKey(r.key,g.selector),ref_for:!0,ref:a.getButtonRef(r.key,g.selector),"is-active":!1,"tooltip-message":g.tooltipMessage,"data-qa":g.dataQA,"popover-data-qa":`dt-recipe-editor-variable-popover`,tabindex:a.canFocus(a.getButtonRef(r.key,g.selector))?0:-1,icon:g.icon,onShiftFocusRight:a.shiftActionBarFocusRight,onShiftFocusLeft:a.shiftActionBarFocusLeft},{content:(0,v.withCtx)(({close:e})=>[(0,v.createVNode)(l,{label:``,"label-visible":!1,"show-list":!0,"click-on-select":!0,onEscape:t=>e()},{input:(0,v.withCtx)(({inputProps:e})=>[(0,v.createVNode)(s,(0,v.mergeProps)({ref_for:!0},e,{modelValue:i.variableSearchValue,"onUpdate:modelValue":t[2]||(t[2]=e=>i.variableSearchValue=e),"root-class":`d-p8 d-pb4 d-w264`,type:`search`,placeholder:i.i18n.$t(`DIALTONE_EDITOR_VARIABLE_POPOVER_SEARCH_PLACEHOLDER`),size:`md`,role:`menuitem`}),{leftIcon:(0,v.withCtx)(({iconSize:e})=>[(0,v.createVNode)(o,{size:e},null,8,[`size`])]),_:1},16,[`modelValue`,`placeholder`])]),list:(0,v.withCtx)(({listProps:t})=>[(0,v.createElementVNode)(`div`,(0,v.mergeProps)({ref_for:!0},t),[((0,v.openBlock)(!0),(0,v.createElementBlock)(v.Fragment,null,(0,v.renderList)(a.filteredCategories,(t,n)=>((0,v.openBlock)(),(0,v.createBlock)(m,{key:t.name,heading:t.name,"heading-class":`d-headline--sm-compact d-p8`},{default:(0,v.withCtx)(()=>[((0,v.openBlock)(!0),(0,v.createElementBlock)(v.Fragment,null,(0,v.renderList)(a.getFilteredItemsForCategory(t),n=>((0,v.openBlock)(),(0,v.createBlock)(c,{key:t.name+n.name,role:`option`,"navigation-type":`arrow-keys`,onClick:r=>{a.insertVariable(t.name,n),e(a.focusEditor)}},{default:(0,v.withCtx)(()=>[(0,v.createTextVNode)((0,v.toDisplayString)(n.name),1)]),_:2},1032,[`onClick`]))),128)),n<a.filteredCategories.length-1?((0,v.openBlock)(),(0,v.createBlock)(p,{key:0})):(0,v.createCommentVNode)(``,!0)]),_:2},1032,[`heading`]))),128))],16)]),_:2},1032,[`onEscape`])]),_:1},8,[`tooltip-message`,`data-qa`,`tabindex`,`icon`,`onShiftFocusRight`,`onShiftFocusLeft`])):g.buttonType===`button`?((0,v.openBlock)(),(0,v.createBlock)(h,{key:a.getButtonKey(r.key,g.selector),ref_for:!0,ref:a.getButtonRef(r.key,g.selector),"is-active":e.$refs.richTextEditor?.editor?.isActive(g.selector),"tooltip-message":g.tooltipMessage,"data-qa":g.dataQA,tabindex:a.canFocus(a.getButtonRef(r.key,g.selector))?0:-1,icon:g.icon,label:g.label,"on-click":g.onClick,onShiftFocusRight:a.shiftActionBarFocusRight,onShiftFocusLeft:a.shiftActionBarFocusLeft},null,8,[`is-active`,`tooltip-message`,`data-qa`,`tabindex`,`icon`,`label`,`on-click`,`onShiftFocusRight`,`onShiftFocusLeft`])):(0,v.createCommentVNode)(``,!0)],64))),256)),t[8]||(t[8]=(0,v.createElementVNode)(`div`,{class:`d-recipe-editor__button-group-divider`},null,-1))]),_:2},1024))),128)),a.linkButton.showBtn?((0,v.openBlock)(),(0,v.createBlock)(g,{key:0,direction:`row`,gap:`300`},{default:(0,v.withCtx)(()=>[(0,v.createVNode)(y,{open:i.showLinkInput,"show-close-button":!1,"data-qa":`dt-recipe-editor-link-input-popover`,padding:`none`,placement:`bottom-start`,onClick:[a.onInputFocus,(0,v.withModifiers)(a.onInputFocus,[`stop`])],onOpened:a.updateInput},{anchor:(0,v.withCtx)(()=>[((0,v.openBlock)(),(0,v.createBlock)(_,{key:a.linkButton.key,message:a.linkButton.tooltipMessage,placement:`top`},{anchor:(0,v.withCtx)(()=>[(0,v.createVNode)(f,{ref:a.getButtonRef(`custom`,`link`),active:e.$refs.richTextEditor?.editor?.isActive(a.linkButton.selector),"aria-label":a.linkButton.tooltipMessage,"data-qa":a.linkButton.dataQA,tabindex:a.canFocus(a.getButtonRef(`custom`,`link`))?0:-1,importance:`clear`,kind:`muted`,size:`xs`,onClick:t[3]||(t[3]=e=>a.linkButton.onClick()),onKeydown:[(0,v.withKeys)((0,v.withModifiers)(a.shiftActionBarFocusRight,[`stop`]),[`right`]),(0,v.withKeys)((0,v.withModifiers)(a.shiftActionBarFocusLeft,[`stop`]),[`left`])]},{icon:(0,v.withCtx)(()=>[((0,v.openBlock)(),(0,v.createBlock)((0,v.resolveDynamicComponent)(a.linkButton.icon),{size:`200`}))]),_:1},8,[`active`,`aria-label`,`data-qa`,`tabindex`,`onKeydown`])]),_:1},8,[`message`]))]),content:(0,v.withCtx)(()=>[(0,v.createElementVNode)(`div`,x,[(0,v.createElementVNode)(`span`,null,(0,v.toDisplayString)(a.showAddLinkButtonLabels.title),1),(0,v.createVNode)(s,{modelValue:i.linkInput,"onUpdate:modelValue":t[4]||(t[4]=e=>i.linkInput=e),"input-aria-label":a.showAddLinkButtonLabels[`aria-label`],placeholder:n.setLinkPlaceholder,"data-qa":`dt-recipe-editor-link-input`,"input-wrapper-class":`d-recipe-editor-link__input-wrapper`,onClick:[a.onInputFocus,(0,v.withModifiers)(a.onInputFocus,[`stop`])],onFocus:a.onInputFocus,onKeydown:(0,v.withKeys)(a.setLink,[`enter`])},null,8,[`modelValue`,`input-aria-label`,`placeholder`,`onClick`,`onFocus`,`onKeydown`])])]),footerContent:(0,v.withCtx)(()=>[(0,v.createVNode)(g,{direction:`row`,gap:`300`,class:`d-recipe-editor__popover-footer`},{default:(0,v.withCtx)(()=>[(0,v.createVNode)(f,(0,v.mergeProps)({"data-qa":`dt-recipe-editor-remove-link-btn`,importance:`clear`,kind:`muted`,size:`sm`},a.removeLinkButtonLabels,{onClick:a.removeLink}),{default:(0,v.withCtx)(()=>[(0,v.createTextVNode)((0,v.toDisplayString)(a.removeLinkButtonLabels.title),1)]),_:1},16,[`onClick`]),(0,v.createVNode)(f,(0,v.mergeProps)({"data-qa":`dt-recipe-editor-set-link-cancel-btn`,importance:`clear`,kind:`muted`,size:`sm`},a.cancelSetLinkButtonLabels,{onClick:a.closeLinkInput}),{default:(0,v.withCtx)(()=>[(0,v.createTextVNode)((0,v.toDisplayString)(a.cancelSetLinkButtonLabels.title),1)]),_:1},16,[`onClick`]),(0,v.createVNode)(f,(0,v.mergeProps)({"data-qa":`dt-recipe-editor-set-link-confirm-btn`,size:`sm`},a.confirmSetLinkButtonLabels,{onClick:a.setLink}),{default:(0,v.withCtx)(()=>[(0,v.createTextVNode)((0,v.toDisplayString)(a.confirmSetLinkButtonLabels.title),1)]),_:1},16,[`onClick`])]),_:1})]),_:1},8,[`open`,`onClick`,`onOpened`])]),_:1})):(0,v.createCommentVNode)(``,!0)]),_:1}),(0,v.createElementVNode)(`div`,{style:(0,v.normalizeStyle)({"max-height":n.maxHeight}),class:(0,v.normalizeClass)([`d-recipe-editor__content`,{"d-recipe-editor__content-image-resize":n.allowImageResize}])},[(0,v.createVNode)(b,(0,v.mergeProps)({ref:`richTextEditor`,modelValue:i.internalInputValue,"onUpdate:modelValue":t[5]||(t[5]=e=>i.internalInputValue=e),"allow-font-color":!0,"allow-font-family":!0,"allow-inline-images":!0,"allow-line-breaks":!0,"allow-variable":!0,"allow-font-size":n.showFontSizeButton,"allow-background-color":n.allowBackgroundColor,"allow-line-height":n.allowLineHeight,"variable-items":a.flattenedVariableItems,"hide-link-bubble-menu":!0,"auto-focus":n.autoFocus,editable:n.editable,"input-aria-label":n.inputAriaLabel,"input-class":`d-recipe-editor__content-input ${n.inputClass}`,link:!0,"output-format":a.htmlOutputFormat,placeholder:n.placeholder,"preserve-whitespace":n.preserveWhitespace,"use-div-tags":n.useDivTags,"allow-tables":n.allowTables,"allow-image-resize":n.allowImageResize,"data-qa":`dt-rich-text-editor`},a.removeClassStyleAttrs(e.$attrs),{onTextInput:a.onTextInput,onBlur:a.onBlur,onFocus:a.onFocus,onInput:t[6]||(t[6]=e=>a.onInput(e)),onSelected:a.onSelected}),null,16,[`modelValue`,`allow-font-size`,`allow-background-color`,`allow-line-height`,`variable-items`,`auto-focus`,`editable`,`input-aria-label`,`input-class`,`output-format`,`placeholder`,`preserve-whitespace`,`use-div-tags`,`allow-tables`,`allow-image-resize`,`onTextInput`,`onBlur`,`onFocus`,`onSelected`])],6)],16)}var C=t.t(b,[[`render`,S]]);exports.default=C;
 //# sourceMappingURL=editor.cjs.map