@dialpad/dialtone 9.95.0 → 9.97.0

package/dist/vue2/recipes/conversation_view/message_input/message_input_button.vue.js

@@ -0,0 +1,58 @@
+import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
+import DtButton from "../../../components/button/button.vue.js";
+import DtTooltip from "../../../components/tooltip/tooltip.vue.js";
+import DtStack from "../../../components/stack/stack.vue.js";
+import DtKeyboardShortcut from "../../../components/keyboard_shortcut/keyboard_shortcut.vue.js";
+const _sfc_main = {
+  name: "DtRecipeMessageInputButton",
+  components: {
+    DtButton,
+    DtTooltip,
+    DtStack,
+    DtKeyboardShortcut
+  },
+  props: {
+    ariaLabel: {
+      type: String,
+      required: true
+    },
+    tooltipText: {
+      type: String,
+      required: true
+    },
+    keyboardShortcutText: {
+      type: String,
+      default: ""
+    },
+    isActive: {
+      type: Boolean,
+      default: false
+    },
+    dataQa: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ["click"]
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("dt-tooltip", { scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-button", { attrs: { "data-qa": _vm.dataQa, "importance": "clear", "kind": "muted", "aria-label": _vm.ariaLabel, "size": "xs", "active": _vm.isActive }, on: { "click": function($event) {
+      return _vm.$emit("click", $event);
+    } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+      return [_vm._t("icon")];
+    }, proxy: true }], null, true) })];
+  }, proxy: true }]) }, [_c("dt-stack", { attrs: { "gap": "200" } }, [_c("p", [_vm._v(_vm._s(_vm.tooltipText))]), _vm.keyboardShortcutText ? _c("dt-keyboard-shortcut", { attrs: { "inverted": "", "shortcut": _vm.keyboardShortcutText } }) : _vm._e()], 1)], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns
+);
+const DtRecipeMessageInputButton = __component__.exports;
+export {
+  DtRecipeMessageInputButton as default
+};
+//# sourceMappingURL=message_input_button.vue.js.map

package/dist/vue2/recipes/conversation_view/message_input/message_input_button.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message_input_button.vue.js","sources":["../../../../recipes/conversation_view/message_input/message_input_button.vue"],"sourcesContent":["<template>\n  <dt-tooltip>\n    <template #anchor>\n      <dt-button\n        :data-qa=\"dataQa\"\n        importance=\"clear\"\n        kind=\"muted\"\n        :aria-label=\"ariaLabel\"\n        size=\"xs\"\n        :active=\"isActive\"\n        @click=\"$emit('click', $event)\"\n      >\n        <template #icon>\n          <slot name=\"icon\" />\n        </template>\n      </dt-button>\n    </template>\n    <dt-stack gap=\"200\">\n      <p>{{ tooltipText }}</p>\n      <dt-keyboard-shortcut\n        v-if=\"keyboardShortcutText\"\n        inverted\n        :shortcut=\"keyboardShortcutText\"\n      />\n    </dt-stack>\n  </dt-tooltip>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport { DtStack } from '@/components/stack';\nimport { DtKeyboardShortcut } from '@/components/keyboard_shortcut';\nexport default {\n  name: 'DtRecipeMessageInputButton',\n  components: {\n    DtButton,\n    DtTooltip,\n    DtStack,\n    DtKeyboardShortcut,\n  },\n\n  props: {\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    tooltipText: {\n      type: String,\n      required: true,\n    },\n\n    keyboardShortcutText: {\n      type: String,\n      default: '',\n    },\n\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    dataQa: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: ['click'],\n};\n</script>\n"],"names":[],"mappings":";;;;;AAiCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,OAAA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/recipes/conversation_view/message_input/message_input_link.vue.cjs

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue2 = require("@dialpad/dialtone-icons/vue2");
+const message_input_button = require("./message_input_button.vue.cjs");
+const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
+const popover = require("../../../components/popover/popover.vue.cjs");
+const input = require("../../../components/input/input.vue.cjs");
+const button = require("../../../components/button/button.vue.cjs");
+const stack = require("../../../components/stack/stack.vue.cjs");
+const _sfc_main = {
+  name: "MessageInputLink",
+  components: {
+    DtPopover: popover.default,
+    DtInput: input.default,
+    DtButton: button.default,
+    DtStack: stack.default,
+    DtIconLink2: vue2.DtIconLink2,
+    DtRecipeMessageInputButton: message_input_button.default
+  },
+  props: {
+    open: {
+      type: Boolean,
+      default: false
+    },
+    linkButtonOptions: {
+      type: Object,
+      required: true
+    },
+    isSelectionActive: {
+      type: Function,
+      default: () => {
+      }
+    }
+  },
+  emits: ["set-link", "remove-link", "opened"],
+  data() {
+    return {
+      linkText: "",
+      linkInput: "",
+      isOpen: false
+    };
+  },
+  watch: {
+    open: {
+      immediate: true,
+      handler(value) {
+        this.isOpen = value;
+      }
+    }
+  },
+  methods: {
+    setInitialValues(linkText, linkInput) {
+      this.linkText = linkText;
+      this.linkInput = linkInput;
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("dt-popover", { attrs: { "open": _vm.isOpen, "placement": "bottom-start", "content-class": "d-recipe-message-input__link-popover", "visually-hidden-close": true, "visually-hidden-close-label": _vm.linkButtonOptions.visuallyHiddenCloseText, "data-qa": "dt-message-input-link-popover", "show-close-button": false }, on: { "opened": function($event) {
+    return _vm.$emit("opened", $event);
+  } }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.linkButtonOptions.ariaLabel, "tooltip-text": _vm.linkButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.linkButtonOptions.keyboardShortcutText, "data-qa": "message-input-link-btn", "is-active": _vm.isSelectionActive("link") }, on: { "click": function($event) {
+      _vm.isOpen = true;
+    } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+      return [_c("dt-icon-link2", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
+    }, proxy: true }]) })];
+  }, proxy: true }, { key: "content", fn: function() {
+    return [_c("dt-stack", { attrs: { "gap": "500" } }, [_vm.linkButtonOptions.dialogTitle.length > 0 ? _c("div", { staticClass: "d-recipe-message-input__link-dialog-title" }, [_vm._v(" " + _vm._s(_vm.linkButtonOptions.dialogTitle) + " ")]) : _vm._e(), _c("dt-input", { attrs: { "input-aria-label": _vm.linkButtonOptions.textLabel, "size": "xs", "data-qa": "dt-message-input-link-text-input", "label": _vm.linkButtonOptions.textLabel, "input-wrapper-class": "d-recipe-message-input__link-input" }, on: { "click": function($event) {
+      $event.stopPropagation();
+    }, "focus": function($event) {
+      $event.stopPropagation();
+    }, "keydown": function($event) {
+      if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
+      return _vm.$emit("set-link", _vm.linkText, _vm.linkInput);
+    } }, nativeOn: { "click": function($event) {
+      $event.stopPropagation();
+    } }, model: { value: _vm.linkText, callback: function($$v) {
+      _vm.linkText = $$v;
+    }, expression: "linkText" } }), _c("dt-input", { attrs: { "input-aria-label": _vm.linkButtonOptions.linkLabel, "size": "xs", "data-qa": "dt-message-input-link-input", "placeholder": _vm.linkButtonOptions.linkPlaceholder, "label": _vm.linkButtonOptions.linkLabel, "input-wrapper-class": "d-recipe-message-input__link-input" }, on: { "click": function($event) {
+      $event.stopPropagation();
+    }, "focus": function($event) {
+      $event.stopPropagation();
+    }, "keydown": function($event) {
+      if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
+      return _vm.$emit("set-link", _vm.linkText, _vm.linkInput);
+    } }, nativeOn: { "click": function($event) {
+      $event.stopPropagation();
+    } }, model: { value: _vm.linkInput, callback: function($$v) {
+      _vm.linkInput = $$v;
+    }, expression: "linkInput" } }), _c("dt-stack", { staticClass: "d-recipe-message-input__link-dialog-buttons", attrs: { "direction": "row" } }, [_c("dt-button", { attrs: { "aria-label": _vm.linkButtonOptions.removeLabel, "importance": "clear", "kind": "danger", "size": "md", "data-qa": "dt-message-input-link-remove-btn" }, on: { "click": function($event) {
+      return _vm.$emit("remove-link", _vm.linkText, _vm.linkInput);
+    } } }, [_vm._v(" " + _vm._s(_vm.linkButtonOptions.removeLabel) + " ")]), _c("dt-stack", { attrs: { "direction": "row", "gap": "400" } }, [_c("dt-button", { attrs: { "aria-label": _vm.linkButtonOptions.cancelLabel, "importance": "clear", "kind": "muted", "size": "md", "data-qa": "dt-message-input-link-cancel-btn" }, on: { "click": function($event) {
+      _vm.isOpen = false;
+    } } }, [_vm._v(" " + _vm._s(_vm.linkButtonOptions.cancelLabel) + " ")]), _c("dt-button", { attrs: { "size": "md", "aria-label": _vm.linkButtonOptions.confirmLabel, "data-qa": "dt-message-input-link-confirm-btn" }, on: { "click": function($event) {
+      return _vm.$emit("set-link", _vm.linkText, _vm.linkInput);
+    } } }, [_vm._v(" " + _vm._s(_vm.linkButtonOptions.confirmLabel) + " ")])], 1)], 1)], 1)];
+  }, proxy: true }]) });
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns
+);
+const DtRecipeMessageInputLink = __component__.exports;
+exports.default = DtRecipeMessageInputLink;
+//# sourceMappingURL=message_input_link.vue.cjs.map

package/dist/vue2/recipes/conversation_view/message_input/message_input_link.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"message_input_link.vue.cjs","sources":["../../../../recipes/conversation_view/message_input/message_input_link.vue"],"sourcesContent":["<template>\n  <dt-popover\n    :open=\"isOpen\"\n    placement=\"bottom-start\"\n    content-class=\"d-recipe-message-input__link-popover\"\n    :visually-hidden-close=\"true\"\n    :visually-hidden-close-label=\"linkButtonOptions.visuallyHiddenCloseText\"\n    data-qa=\"dt-message-input-link-popover\"\n    :show-close-button=\"false\"\n    @opened=\"$emit('opened', $event)\"\n  >\n    <template #anchor>\n      <dt-recipe-message-input-button\n        :aria-label=\"linkButtonOptions.ariaLabel\"\n        :tooltip-text=\"linkButtonOptions.tooltipText\"\n        :keyboard-shortcut-text=\"linkButtonOptions.keyboardShortcutText\"\n        data-qa=\"message-input-link-btn\"\n        :is-active=\"isSelectionActive('link')\"\n        @click=\"isOpen = true\"\n      >\n        <template #icon>\n          <dt-icon-link2\n            class=\"d-recipe-message-input__button-stack-icon\"\n            size=\"200\"\n          />\n        </template>\n      </dt-recipe-message-input-button>\n    </template>\n\n    <template #content>\n      <dt-stack gap=\"500\">\n        <div\n          v-if=\"linkButtonOptions.dialogTitle.length > 0\"\n          class=\"d-recipe-message-input__link-dialog-title\"\n        >\n          {{ linkButtonOptions.dialogTitle }}\n        </div>\n        <dt-input\n          v-model=\"linkText\"\n          :input-aria-label=\"linkButtonOptions.textLabel\"\n          size=\"xs\"\n          data-qa=\"dt-message-input-link-text-input\"\n          :label=\"linkButtonOptions.textLabel\"\n          input-wrapper-class=\"d-recipe-message-input__link-input\"\n          @click.stop\n          @click.native.stop\n          @focus.stop\n          @keydown.enter=\"$emit('set-link', linkText, linkInput)\"\n        />\n        <dt-input\n          v-model=\"linkInput\"\n          :input-aria-label=\"linkButtonOptions.linkLabel\"\n          size=\"xs\"\n          data-qa=\"dt-message-input-link-input\"\n          :placeholder=\"linkButtonOptions.linkPlaceholder\"\n          :label=\"linkButtonOptions.linkLabel\"\n          input-wrapper-class=\"d-recipe-message-input__link-input\"\n          @click.stop\n          @click.native.stop\n          @focus.stop\n          @keydown.enter=\"$emit('set-link', linkText, linkInput)\"\n        />\n        <dt-stack\n          direction=\"row\"\n          class=\"d-recipe-message-input__link-dialog-buttons\"\n        >\n          <dt-button\n            :aria-label=\"linkButtonOptions.removeLabel\"\n            importance=\"clear\"\n            kind=\"danger\"\n            size=\"md\"\n            data-qa=\"dt-message-input-link-remove-btn\"\n            @click=\"$emit('remove-link', linkText, linkInput)\"\n          >\n            {{ linkButtonOptions.removeLabel }}\n          </dt-button>\n          <dt-stack\n            direction=\"row\"\n            gap=\"400\"\n          >\n            <dt-button\n              :aria-label=\"linkButtonOptions.cancelLabel\"\n              importance=\"clear\"\n              kind=\"muted\"\n              size=\"md\"\n              data-qa=\"dt-message-input-link-cancel-btn\"\n              @click=\"isOpen = false\"\n            >\n              {{ linkButtonOptions.cancelLabel }}\n            </dt-button>\n            <dt-button\n              size=\"md\"\n              :aria-label=\"linkButtonOptions.confirmLabel\"\n              data-qa=\"dt-message-input-link-confirm-btn\"\n              @click=\"$emit('set-link', linkText, linkInput)\"\n            >\n              {{ linkButtonOptions.confirmLabel }}\n            </dt-button>\n          </dt-stack>\n        </dt-stack>\n      </dt-stack>\n    </template>\n  </dt-popover>\n</template>\n\n<script>\nimport { DtPopover } from '@/components/popover';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\nimport { DtStack } from '@/components/stack';\nimport { DtIconLink2 } from '@dialpad/dialtone-icons/vue2';\nimport DtRecipeMessageInputButton from './message_input_button.vue';\nexport default {\n  name: 'MessageInputLink',\n\n  components: {\n    DtPopover,\n    DtInput,\n    DtButton,\n    DtStack,\n    DtIconLink2,\n    DtRecipeMessageInputButton,\n  },\n\n  props: {\n    open: {\n      type: Boolean,\n      default: false,\n    },\n\n    linkButtonOptions: {\n      type: Object,\n      required: true,\n    },\n\n    isSelectionActive: {\n      type: Function,\n      default: () => {},\n    },\n  },\n\n  emits: ['set-link', 'remove-link', 'opened'],\n\n  data () {\n    return {\n      linkText: '',\n      linkInput: '',\n      isOpen: false,\n    };\n  },\n\n  watch: {\n    open: {\n      immediate: true,\n      handler (value) {\n        this.isOpen = value;\n      },\n    },\n  },\n\n  methods: {\n    setInitialValues (linkText, linkInput) {\n      this.linkText = linkText;\n      this.linkInput = linkInput;\n    },\n  },\n};\n</script>\n"],"names":["DtPopover","DtInput","DtButton","DtStack","DtIconLink2","DtRecipeMessageInputButton"],"mappings":";;;;;;;;;AAgHA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAA,QAAA;AAAA,IACA,SAAAC,MAAA;AAAA,IACA,UAAAC,OAAA;AAAA,IACA,SAAAC,MAAA;AAAA,IACA,aAAAC,KAAA;AAAA,IACA,4BAAAC,qBAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,YAAA,eAAA,QAAA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA,OAAA;AACA,aAAA,SAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,iBAAA,UAAA,WAAA;AACA,WAAA,WAAA;AACA,WAAA,YAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/recipes/conversation_view/message_input/message_input_link.vue.js

@@ -0,0 +1,108 @@
+import { DtIconLink2 } from "@dialpad/dialtone-icons/vue2";
+import DtRecipeMessageInputButton from "./message_input_button.vue.js";
+import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
+import DtPopover from "../../../components/popover/popover.vue.js";
+import DtInput from "../../../components/input/input.vue.js";
+import DtButton from "../../../components/button/button.vue.js";
+import DtStack from "../../../components/stack/stack.vue.js";
+const _sfc_main = {
+  name: "MessageInputLink",
+  components: {
+    DtPopover,
+    DtInput,
+    DtButton,
+    DtStack,
+    DtIconLink2,
+    DtRecipeMessageInputButton
+  },
+  props: {
+    open: {
+      type: Boolean,
+      default: false
+    },
+    linkButtonOptions: {
+      type: Object,
+      required: true
+    },
+    isSelectionActive: {
+      type: Function,
+      default: () => {
+      }
+    }
+  },
+  emits: ["set-link", "remove-link", "opened"],
+  data() {
+    return {
+      linkText: "",
+      linkInput: "",
+      isOpen: false
+    };
+  },
+  watch: {
+    open: {
+      immediate: true,
+      handler(value) {
+        this.isOpen = value;
+      }
+    }
+  },
+  methods: {
+    setInitialValues(linkText, linkInput) {
+      this.linkText = linkText;
+      this.linkInput = linkInput;
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("dt-popover", { attrs: { "open": _vm.isOpen, "placement": "bottom-start", "content-class": "d-recipe-message-input__link-popover", "visually-hidden-close": true, "visually-hidden-close-label": _vm.linkButtonOptions.visuallyHiddenCloseText, "data-qa": "dt-message-input-link-popover", "show-close-button": false }, on: { "opened": function($event) {
+    return _vm.$emit("opened", $event);
+  } }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.linkButtonOptions.ariaLabel, "tooltip-text": _vm.linkButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.linkButtonOptions.keyboardShortcutText, "data-qa": "message-input-link-btn", "is-active": _vm.isSelectionActive("link") }, on: { "click": function($event) {
+      _vm.isOpen = true;
+    } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+      return [_c("dt-icon-link2", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
+    }, proxy: true }]) })];
+  }, proxy: true }, { key: "content", fn: function() {
+    return [_c("dt-stack", { attrs: { "gap": "500" } }, [_vm.linkButtonOptions.dialogTitle.length > 0 ? _c("div", { staticClass: "d-recipe-message-input__link-dialog-title" }, [_vm._v(" " + _vm._s(_vm.linkButtonOptions.dialogTitle) + " ")]) : _vm._e(), _c("dt-input", { attrs: { "input-aria-label": _vm.linkButtonOptions.textLabel, "size": "xs", "data-qa": "dt-message-input-link-text-input", "label": _vm.linkButtonOptions.textLabel, "input-wrapper-class": "d-recipe-message-input__link-input" }, on: { "click": function($event) {
+      $event.stopPropagation();
+    }, "focus": function($event) {
+      $event.stopPropagation();
+    }, "keydown": function($event) {
+      if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
+      return _vm.$emit("set-link", _vm.linkText, _vm.linkInput);
+    } }, nativeOn: { "click": function($event) {
+      $event.stopPropagation();
+    } }, model: { value: _vm.linkText, callback: function($$v) {
+      _vm.linkText = $$v;
+    }, expression: "linkText" } }), _c("dt-input", { attrs: { "input-aria-label": _vm.linkButtonOptions.linkLabel, "size": "xs", "data-qa": "dt-message-input-link-input", "placeholder": _vm.linkButtonOptions.linkPlaceholder, "label": _vm.linkButtonOptions.linkLabel, "input-wrapper-class": "d-recipe-message-input__link-input" }, on: { "click": function($event) {
+      $event.stopPropagation();
+    }, "focus": function($event) {
+      $event.stopPropagation();
+    }, "keydown": function($event) {
+      if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
+      return _vm.$emit("set-link", _vm.linkText, _vm.linkInput);
+    } }, nativeOn: { "click": function($event) {
+      $event.stopPropagation();
+    } }, model: { value: _vm.linkInput, callback: function($$v) {
+      _vm.linkInput = $$v;
+    }, expression: "linkInput" } }), _c("dt-stack", { staticClass: "d-recipe-message-input__link-dialog-buttons", attrs: { "direction": "row" } }, [_c("dt-button", { attrs: { "aria-label": _vm.linkButtonOptions.removeLabel, "importance": "clear", "kind": "danger", "size": "md", "data-qa": "dt-message-input-link-remove-btn" }, on: { "click": function($event) {
+      return _vm.$emit("remove-link", _vm.linkText, _vm.linkInput);
+    } } }, [_vm._v(" " + _vm._s(_vm.linkButtonOptions.removeLabel) + " ")]), _c("dt-stack", { attrs: { "direction": "row", "gap": "400" } }, [_c("dt-button", { attrs: { "aria-label": _vm.linkButtonOptions.cancelLabel, "importance": "clear", "kind": "muted", "size": "md", "data-qa": "dt-message-input-link-cancel-btn" }, on: { "click": function($event) {
+      _vm.isOpen = false;
+    } } }, [_vm._v(" " + _vm._s(_vm.linkButtonOptions.cancelLabel) + " ")]), _c("dt-button", { attrs: { "size": "md", "aria-label": _vm.linkButtonOptions.confirmLabel, "data-qa": "dt-message-input-link-confirm-btn" }, on: { "click": function($event) {
+      return _vm.$emit("set-link", _vm.linkText, _vm.linkInput);
+    } } }, [_vm._v(" " + _vm._s(_vm.linkButtonOptions.confirmLabel) + " ")])], 1)], 1)], 1)];
+  }, proxy: true }]) });
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns
+);
+const DtRecipeMessageInputLink = __component__.exports;
+export {
+  DtRecipeMessageInputLink as default
+};
+//# sourceMappingURL=message_input_link.vue.js.map

package/dist/vue2/recipes/conversation_view/message_input/message_input_link.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message_input_link.vue.js","sources":["../../../../recipes/conversation_view/message_input/message_input_link.vue"],"sourcesContent":["<template>\n  <dt-popover\n    :open=\"isOpen\"\n    placement=\"bottom-start\"\n    content-class=\"d-recipe-message-input__link-popover\"\n    :visually-hidden-close=\"true\"\n    :visually-hidden-close-label=\"linkButtonOptions.visuallyHiddenCloseText\"\n    data-qa=\"dt-message-input-link-popover\"\n    :show-close-button=\"false\"\n    @opened=\"$emit('opened', $event)\"\n  >\n    <template #anchor>\n      <dt-recipe-message-input-button\n        :aria-label=\"linkButtonOptions.ariaLabel\"\n        :tooltip-text=\"linkButtonOptions.tooltipText\"\n        :keyboard-shortcut-text=\"linkButtonOptions.keyboardShortcutText\"\n        data-qa=\"message-input-link-btn\"\n        :is-active=\"isSelectionActive('link')\"\n        @click=\"isOpen = true\"\n      >\n        <template #icon>\n          <dt-icon-link2\n            class=\"d-recipe-message-input__button-stack-icon\"\n            size=\"200\"\n          />\n        </template>\n      </dt-recipe-message-input-button>\n    </template>\n\n    <template #content>\n      <dt-stack gap=\"500\">\n        <div\n          v-if=\"linkButtonOptions.dialogTitle.length > 0\"\n          class=\"d-recipe-message-input__link-dialog-title\"\n        >\n          {{ linkButtonOptions.dialogTitle }}\n        </div>\n        <dt-input\n          v-model=\"linkText\"\n          :input-aria-label=\"linkButtonOptions.textLabel\"\n          size=\"xs\"\n          data-qa=\"dt-message-input-link-text-input\"\n          :label=\"linkButtonOptions.textLabel\"\n          input-wrapper-class=\"d-recipe-message-input__link-input\"\n          @click.stop\n          @click.native.stop\n          @focus.stop\n          @keydown.enter=\"$emit('set-link', linkText, linkInput)\"\n        />\n        <dt-input\n          v-model=\"linkInput\"\n          :input-aria-label=\"linkButtonOptions.linkLabel\"\n          size=\"xs\"\n          data-qa=\"dt-message-input-link-input\"\n          :placeholder=\"linkButtonOptions.linkPlaceholder\"\n          :label=\"linkButtonOptions.linkLabel\"\n          input-wrapper-class=\"d-recipe-message-input__link-input\"\n          @click.stop\n          @click.native.stop\n          @focus.stop\n          @keydown.enter=\"$emit('set-link', linkText, linkInput)\"\n        />\n        <dt-stack\n          direction=\"row\"\n          class=\"d-recipe-message-input__link-dialog-buttons\"\n        >\n          <dt-button\n            :aria-label=\"linkButtonOptions.removeLabel\"\n            importance=\"clear\"\n            kind=\"danger\"\n            size=\"md\"\n            data-qa=\"dt-message-input-link-remove-btn\"\n            @click=\"$emit('remove-link', linkText, linkInput)\"\n          >\n            {{ linkButtonOptions.removeLabel }}\n          </dt-button>\n          <dt-stack\n            direction=\"row\"\n            gap=\"400\"\n          >\n            <dt-button\n              :aria-label=\"linkButtonOptions.cancelLabel\"\n              importance=\"clear\"\n              kind=\"muted\"\n              size=\"md\"\n              data-qa=\"dt-message-input-link-cancel-btn\"\n              @click=\"isOpen = false\"\n            >\n              {{ linkButtonOptions.cancelLabel }}\n            </dt-button>\n            <dt-button\n              size=\"md\"\n              :aria-label=\"linkButtonOptions.confirmLabel\"\n              data-qa=\"dt-message-input-link-confirm-btn\"\n              @click=\"$emit('set-link', linkText, linkInput)\"\n            >\n              {{ linkButtonOptions.confirmLabel }}\n            </dt-button>\n          </dt-stack>\n        </dt-stack>\n      </dt-stack>\n    </template>\n  </dt-popover>\n</template>\n\n<script>\nimport { DtPopover } from '@/components/popover';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\nimport { DtStack } from '@/components/stack';\nimport { DtIconLink2 } from '@dialpad/dialtone-icons/vue2';\nimport DtRecipeMessageInputButton from './message_input_button.vue';\nexport default {\n  name: 'MessageInputLink',\n\n  components: {\n    DtPopover,\n    DtInput,\n    DtButton,\n    DtStack,\n    DtIconLink2,\n    DtRecipeMessageInputButton,\n  },\n\n  props: {\n    open: {\n      type: Boolean,\n      default: false,\n    },\n\n    linkButtonOptions: {\n      type: Object,\n      required: true,\n    },\n\n    isSelectionActive: {\n      type: Function,\n      default: () => {},\n    },\n  },\n\n  emits: ['set-link', 'remove-link', 'opened'],\n\n  data () {\n    return {\n      linkText: '',\n      linkInput: '',\n      isOpen: false,\n    };\n  },\n\n  watch: {\n    open: {\n      immediate: true,\n      handler (value) {\n        this.isOpen = value;\n      },\n    },\n  },\n\n  methods: {\n    setInitialValues (linkText, linkInput) {\n      this.linkText = linkText;\n      this.linkInput = linkInput;\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;;;;AAgHA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,YAAA,eAAA,QAAA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA,OAAA;AACA,aAAA,SAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,iBAAA,UAAA,WAAA;AACA,WAAA,WAAA;AACA,WAAA,YAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/recipes/conversation_view/message_input/message_input_topbar.vue.cjs

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue2 = require("@dialpad/dialtone-icons/vue2");
+const message_input_button = require("./message_input_button.vue.cjs");
+const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
+const stack = require("../../../components/stack/stack.vue.cjs");
+const _sfc_main = {
+  name: "DtRecipeMesageInputTopbar",
+  components: {
+    DtStack: stack.default,
+    DtIconListBullet: vue2.DtIconListBullet,
+    DtIconBold: vue2.DtIconBold,
+    DtIconItalic: vue2.DtIconItalic,
+    DtIconStrikethrough: vue2.DtIconStrikethrough,
+    DtIconListOrdered: vue2.DtIconListOrdered,
+    DtIconQuote: vue2.DtIconQuote,
+    DtIconCode: vue2.DtIconCode,
+    DtIconCodeBlock: vue2.DtIconCodeBlock,
+    DtRecipeMessageInputButton: message_input_button.default
+  },
+  props: {
+    boldButtonOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    italicButtonOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    strikeButtonOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    bulletListButtonOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    orderedListButtonOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    blockQuoteButtonOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    codeButtonOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    codeBlockButtonOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    isSelectionActive: {
+      type: Function,
+      default: () => {
+      }
+    }
+  },
+  emits: ["click"]
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("dt-stack", { staticClass: "d-recipe-message-input__button-stack", attrs: { "direction": "row", "gap": "200" } }, [_c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.boldButtonOptions.ariaLabel, "tooltip-text": _vm.boldButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.boldButtonOptions.keyboardShortcutText, "data-qa": "bold", "is-active": _vm.isSelectionActive("bold") }, on: { "click": function($event) {
+    return _vm.$emit("click", "bold", $event);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon-bold", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
+  }, proxy: true }]) }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.italicButtonOptions.ariaLabel, "tooltip-text": _vm.italicButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.italicButtonOptions.keyboardShortcutText, "data-qa": "italic", "is-active": _vm.isSelectionActive("italic") }, on: { "click": function($event) {
+    return _vm.$emit("click", "italic", $event);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon-italic", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
+  }, proxy: true }]) }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.strikeButtonOptions.ariaLabel, "tooltip-text": _vm.strikeButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.strikeButtonOptions.keyboardShortcutText, "data-qa": "strikethrough", "is-active": _vm.isSelectionActive("strike") }, on: { "click": function($event) {
+    return _vm.$emit("click", "strike", $event);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon-strikethrough", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
+  }, proxy: true }]) }), _c("div", { staticClass: "d-recipe-message-input--button-group-divider" }), _vm._t("link"), _c("div", { staticClass: "d-recipe-message-input--button-group-divider" }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.bulletListButtonOptions.ariaLabel, "tooltip-text": _vm.bulletListButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.bulletListButtonOptions.keyboardShortcutText, "data-qa": "bullet-list", "is-active": _vm.isSelectionActive("bulletList") }, on: { "click": function($event) {
+    return _vm.$emit("click", "bulletList", $event);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon-list-bullet", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
+  }, proxy: true }]) }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.orderedListButtonOptions.ariaLabel, "tooltip-text": _vm.orderedListButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.orderedListButtonOptions.keyboardShortcutText, "data-qa": "ordered-list", "is-active": _vm.isSelectionActive("orderedList") }, on: { "click": function($event) {
+    return _vm.$emit("click", "orderedList", $event);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon-list-ordered", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
+  }, proxy: true }]) }), _c("div", { staticClass: "d-recipe-message-input--button-group-divider" }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.blockQuoteButtonOptions.ariaLabel, "tooltip-text": _vm.blockQuoteButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.blockQuoteButtonOptions.keyboardShortcutText, "data-qa": "blockquote", "is-active": _vm.isSelectionActive("blockquote") }, on: { "click": function($event) {
+    return _vm.$emit("click", "blockquote", $event);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon-quote", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
+  }, proxy: true }]) }), _c("div", { staticClass: "d-recipe-message-input--button-group-divider" }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.codeButtonOptions.ariaLabel, "tooltip-text": _vm.codeButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.codeButtonOptions.keyboardShortcutText, "data-qa": "code", "is-active": _vm.isSelectionActive("code") }, on: { "click": function($event) {
+    return _vm.$emit("click", "code", $event);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon-code", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
+  }, proxy: true }]) }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.codeBlockButtonOptions.ariaLabel, "tooltip-text": _vm.codeBlockButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.codeBlockButtonOptions.keyboardShortcutText, "data-qa": "code-block", "is-active": _vm.isSelectionActive("codeBlock") }, on: { "click": function($event) {
+    return _vm.$emit("click", "codeBlock", $event);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon-code-block", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
+  }, proxy: true }]) })], 2);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns
+);
+const DtRecipeMessageInputTopbar = __component__.exports;
+exports.default = DtRecipeMessageInputTopbar;
+//# sourceMappingURL=message_input_topbar.vue.cjs.map

package/dist/vue2/recipes/conversation_view/message_input/message_input_topbar.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"message_input_topbar.vue.cjs","sources":["../../../../recipes/conversation_view/message_input/message_input_topbar.vue"],"sourcesContent":["<template>\n  <dt-stack\n    direction=\"row\"\n    gap=\"200\"\n    class=\"d-recipe-message-input__button-stack\"\n  >\n    <dt-recipe-message-input-button\n      :aria-label=\"boldButtonOptions.ariaLabel\"\n      :tooltip-text=\"boldButtonOptions.tooltipText\"\n      :keyboard-shortcut-text=\"boldButtonOptions.keyboardShortcutText\"\n      data-qa=\"bold\"\n      :is-active=\"isSelectionActive('bold')\"\n      @click=\"$emit('click', 'bold', $event)\"\n    >\n      <template #icon>\n        <dt-icon-bold\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n\n    <dt-recipe-message-input-button\n      :aria-label=\"italicButtonOptions.ariaLabel\"\n      :tooltip-text=\"italicButtonOptions.tooltipText\"\n      :keyboard-shortcut-text=\"italicButtonOptions.keyboardShortcutText\"\n      data-qa=\"italic\"\n      :is-active=\"isSelectionActive('italic')\"\n      @click=\"$emit('click', 'italic', $event)\"\n    >\n      <template #icon>\n        <dt-icon-italic\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n\n    <dt-recipe-message-input-button\n      :aria-label=\"strikeButtonOptions.ariaLabel\"\n      :tooltip-text=\"strikeButtonOptions.tooltipText\"\n      :keyboard-shortcut-text=\"strikeButtonOptions.keyboardShortcutText\"\n      data-qa=\"strikethrough\"\n      :is-active=\"isSelectionActive('strike')\"\n      @click=\"$emit('click', 'strike', $event)\"\n    >\n      <template #icon>\n        <dt-icon-strikethrough\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <!-- @slot special slot for link button, since links require a custom dialog -->\n    <slot name=\"link\" />\n\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <dt-recipe-message-input-button\n      :aria-label=\"bulletListButtonOptions.ariaLabel\"\n      :tooltip-text=\"bulletListButtonOptions.tooltipText\"\n      :keyboard-shortcut-text=\"bulletListButtonOptions.keyboardShortcutText\"\n      data-qa=\"bullet-list\"\n      :is-active=\"isSelectionActive('bulletList')\"\n      @click=\"$emit('click', 'bulletList', $event)\"\n    >\n      <template #icon>\n        <dt-icon-list-bullet\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n\n    <dt-recipe-message-input-button\n      :aria-label=\"orderedListButtonOptions.ariaLabel\"\n      :tooltip-text=\"orderedListButtonOptions.tooltipText\"\n      :keyboard-shortcut-text=\"orderedListButtonOptions.keyboardShortcutText\"\n      data-qa=\"ordered-list\"\n      :is-active=\"isSelectionActive('orderedList')\"\n      @click=\"$emit('click', 'orderedList', $event)\"\n    >\n      <template #icon>\n        <dt-icon-list-ordered\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n    <dt-recipe-message-input-button\n      :aria-label=\"blockQuoteButtonOptions.ariaLabel\"\n      :tooltip-text=\"blockQuoteButtonOptions.tooltipText\"\n      :keyboard-shortcut-text=\"blockQuoteButtonOptions.keyboardShortcutText\"\n      data-qa=\"blockquote\"\n      :is-active=\"isSelectionActive('blockquote')\"\n      @click=\"$emit('click', 'blockquote', $event)\"\n    >\n      <template #icon>\n        <dt-icon-quote\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <dt-recipe-message-input-button\n      :aria-label=\"codeButtonOptions.ariaLabel\"\n      :tooltip-text=\"codeButtonOptions.tooltipText\"\n      :keyboard-shortcut-text=\"codeButtonOptions.keyboardShortcutText\"\n      data-qa=\"code\"\n      :is-active=\"isSelectionActive('code')\"\n      @click=\"$emit('click', 'code', $event)\"\n    >\n      <template #icon>\n        <dt-icon-code\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <dt-recipe-message-input-button\n      :aria-label=\"codeBlockButtonOptions.ariaLabel\"\n      :tooltip-text=\"codeBlockButtonOptions.tooltipText\"\n      :keyboard-shortcut-text=\"codeBlockButtonOptions.keyboardShortcutText\"\n      data-qa=\"code-block\"\n      :is-active=\"isSelectionActive('codeBlock')\"\n      @click=\"$emit('click', 'codeBlock', $event)\"\n    >\n      <template #icon>\n        <dt-icon-code-block\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n  </dt-stack>\n</template>\n\n<script>\nimport { DtStack } from '@/components/stack';\n\nimport {\n  DtIconListBullet, DtIconBold, DtIconItalic, DtIconStrikethrough,\n  DtIconListOrdered, DtIconQuote, DtIconCode, DtIconCodeBlock,\n} from '@dialpad/dialtone-icons/vue2';\n\nimport DtRecipeMessageInputButton from './message_input_button.vue';\nexport default {\n  name: 'DtRecipeMesageInputTopbar',\n  components: {\n    DtStack,\n    DtIconListBullet,\n    DtIconBold,\n    DtIconItalic,\n    DtIconStrikethrough,\n    DtIconListOrdered,\n    DtIconQuote,\n    DtIconCode,\n    DtIconCodeBlock,\n    DtRecipeMessageInputButton,\n  },\n\n  props: {\n    boldButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    italicButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    strikeButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    bulletListButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    orderedListButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    blockQuoteButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    codeButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    codeBlockButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    isSelectionActive: {\n      type: Function,\n      default: () => {},\n    },\n  },\n\n  emits: ['click'],\n};\n</script>\n"],"names":["DtStack","DtIconListBullet","DtIconBold","DtIconItalic","DtIconStrikethrough","DtIconListOrdered","DtIconQuote","DtIconCode","DtIconCodeBlock","DtRecipeMessageInputButton"],"mappings":";;;;;;AAwJA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,SAAAA,MAAA;AAAA,IACA,kBAAAC,KAAA;AAAA,IACA,YAAAC,KAAA;AAAA,IACA,cAAAC,KAAA;AAAA,IACA,qBAAAC,KAAA;AAAA,IACA,mBAAAC,KAAA;AAAA,IACA,aAAAC,KAAA;AAAA,IACA,YAAAC,KAAA;AAAA,IACA,iBAAAC,KAAA;AAAA,IACA,4BAAAC,qBAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,IAEA,0BAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,IAEA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,OAAA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/recipes/conversation_view/message_input/message_input_topbar.vue.js

@@ -0,0 +1,106 @@
+import { DtIconListBullet, DtIconBold, DtIconItalic, DtIconStrikethrough, DtIconListOrdered, DtIconQuote, DtIconCode, DtIconCodeBlock } from "@dialpad/dialtone-icons/vue2";
+import DtRecipeMessageInputButton from "./message_input_button.vue.js";
+import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
+import DtStack from "../../../components/stack/stack.vue.js";
+const _sfc_main = {
+  name: "DtRecipeMesageInputTopbar",
+  components: {
+    DtStack,
+    DtIconListBullet,
+    DtIconBold,
+    DtIconItalic,
+    DtIconStrikethrough,
+    DtIconListOrdered,
+    DtIconQuote,
+    DtIconCode,
+    DtIconCodeBlock,
+    DtRecipeMessageInputButton
+  },
+  props: {
+    boldButtonOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    italicButtonOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    strikeButtonOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    bulletListButtonOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    orderedListButtonOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    blockQuoteButtonOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    codeButtonOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    codeBlockButtonOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    isSelectionActive: {
+      type: Function,
+      default: () => {
+      }
+    }
+  },
+  emits: ["click"]
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("dt-stack", { staticClass: "d-recipe-message-input__button-stack", attrs: { "direction": "row", "gap": "200" } }, [_c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.boldButtonOptions.ariaLabel, "tooltip-text": _vm.boldButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.boldButtonOptions.keyboardShortcutText, "data-qa": "bold", "is-active": _vm.isSelectionActive("bold") }, on: { "click": function($event) {
+    return _vm.$emit("click", "bold", $event);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon-bold", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
+  }, proxy: true }]) }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.italicButtonOptions.ariaLabel, "tooltip-text": _vm.italicButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.italicButtonOptions.keyboardShortcutText, "data-qa": "italic", "is-active": _vm.isSelectionActive("italic") }, on: { "click": function($event) {
+    return _vm.$emit("click", "italic", $event);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon-italic", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
+  }, proxy: true }]) }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.strikeButtonOptions.ariaLabel, "tooltip-text": _vm.strikeButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.strikeButtonOptions.keyboardShortcutText, "data-qa": "strikethrough", "is-active": _vm.isSelectionActive("strike") }, on: { "click": function($event) {
+    return _vm.$emit("click", "strike", $event);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon-strikethrough", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
+  }, proxy: true }]) }), _c("div", { staticClass: "d-recipe-message-input--button-group-divider" }), _vm._t("link"), _c("div", { staticClass: "d-recipe-message-input--button-group-divider" }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.bulletListButtonOptions.ariaLabel, "tooltip-text": _vm.bulletListButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.bulletListButtonOptions.keyboardShortcutText, "data-qa": "bullet-list", "is-active": _vm.isSelectionActive("bulletList") }, on: { "click": function($event) {
+    return _vm.$emit("click", "bulletList", $event);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon-list-bullet", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
+  }, proxy: true }]) }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.orderedListButtonOptions.ariaLabel, "tooltip-text": _vm.orderedListButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.orderedListButtonOptions.keyboardShortcutText, "data-qa": "ordered-list", "is-active": _vm.isSelectionActive("orderedList") }, on: { "click": function($event) {
+    return _vm.$emit("click", "orderedList", $event);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon-list-ordered", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
+  }, proxy: true }]) }), _c("div", { staticClass: "d-recipe-message-input--button-group-divider" }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.blockQuoteButtonOptions.ariaLabel, "tooltip-text": _vm.blockQuoteButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.blockQuoteButtonOptions.keyboardShortcutText, "data-qa": "blockquote", "is-active": _vm.isSelectionActive("blockquote") }, on: { "click": function($event) {
+    return _vm.$emit("click", "blockquote", $event);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon-quote", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
+  }, proxy: true }]) }), _c("div", { staticClass: "d-recipe-message-input--button-group-divider" }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.codeButtonOptions.ariaLabel, "tooltip-text": _vm.codeButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.codeButtonOptions.keyboardShortcutText, "data-qa": "code", "is-active": _vm.isSelectionActive("code") }, on: { "click": function($event) {
+    return _vm.$emit("click", "code", $event);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon-code", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
+  }, proxy: true }]) }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.codeBlockButtonOptions.ariaLabel, "tooltip-text": _vm.codeBlockButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.codeBlockButtonOptions.keyboardShortcutText, "data-qa": "code-block", "is-active": _vm.isSelectionActive("codeBlock") }, on: { "click": function($event) {
+    return _vm.$emit("click", "codeBlock", $event);
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon-code-block", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
+  }, proxy: true }]) })], 2);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns
+);
+const DtRecipeMessageInputTopbar = __component__.exports;
+export {
+  DtRecipeMessageInputTopbar as default
+};
+//# sourceMappingURL=message_input_topbar.vue.js.map

package/dist/vue2/recipes/conversation_view/message_input/message_input_topbar.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message_input_topbar.vue.js","sources":["../../../../recipes/conversation_view/message_input/message_input_topbar.vue"],"sourcesContent":["<template>\n  <dt-stack\n    direction=\"row\"\n    gap=\"200\"\n    class=\"d-recipe-message-input__button-stack\"\n  >\n    <dt-recipe-message-input-button\n      :aria-label=\"boldButtonOptions.ariaLabel\"\n      :tooltip-text=\"boldButtonOptions.tooltipText\"\n      :keyboard-shortcut-text=\"boldButtonOptions.keyboardShortcutText\"\n      data-qa=\"bold\"\n      :is-active=\"isSelectionActive('bold')\"\n      @click=\"$emit('click', 'bold', $event)\"\n    >\n      <template #icon>\n        <dt-icon-bold\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n\n    <dt-recipe-message-input-button\n      :aria-label=\"italicButtonOptions.ariaLabel\"\n      :tooltip-text=\"italicButtonOptions.tooltipText\"\n      :keyboard-shortcut-text=\"italicButtonOptions.keyboardShortcutText\"\n      data-qa=\"italic\"\n      :is-active=\"isSelectionActive('italic')\"\n      @click=\"$emit('click', 'italic', $event)\"\n    >\n      <template #icon>\n        <dt-icon-italic\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n\n    <dt-recipe-message-input-button\n      :aria-label=\"strikeButtonOptions.ariaLabel\"\n      :tooltip-text=\"strikeButtonOptions.tooltipText\"\n      :keyboard-shortcut-text=\"strikeButtonOptions.keyboardShortcutText\"\n      data-qa=\"strikethrough\"\n      :is-active=\"isSelectionActive('strike')\"\n      @click=\"$emit('click', 'strike', $event)\"\n    >\n      <template #icon>\n        <dt-icon-strikethrough\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <!-- @slot special slot for link button, since links require a custom dialog -->\n    <slot name=\"link\" />\n\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <dt-recipe-message-input-button\n      :aria-label=\"bulletListButtonOptions.ariaLabel\"\n      :tooltip-text=\"bulletListButtonOptions.tooltipText\"\n      :keyboard-shortcut-text=\"bulletListButtonOptions.keyboardShortcutText\"\n      data-qa=\"bullet-list\"\n      :is-active=\"isSelectionActive('bulletList')\"\n      @click=\"$emit('click', 'bulletList', $event)\"\n    >\n      <template #icon>\n        <dt-icon-list-bullet\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n\n    <dt-recipe-message-input-button\n      :aria-label=\"orderedListButtonOptions.ariaLabel\"\n      :tooltip-text=\"orderedListButtonOptions.tooltipText\"\n      :keyboard-shortcut-text=\"orderedListButtonOptions.keyboardShortcutText\"\n      data-qa=\"ordered-list\"\n      :is-active=\"isSelectionActive('orderedList')\"\n      @click=\"$emit('click', 'orderedList', $event)\"\n    >\n      <template #icon>\n        <dt-icon-list-ordered\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n    <dt-recipe-message-input-button\n      :aria-label=\"blockQuoteButtonOptions.ariaLabel\"\n      :tooltip-text=\"blockQuoteButtonOptions.tooltipText\"\n      :keyboard-shortcut-text=\"blockQuoteButtonOptions.keyboardShortcutText\"\n      data-qa=\"blockquote\"\n      :is-active=\"isSelectionActive('blockquote')\"\n      @click=\"$emit('click', 'blockquote', $event)\"\n    >\n      <template #icon>\n        <dt-icon-quote\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n\n    <div class=\"d-recipe-message-input--button-group-divider\" />\n\n    <dt-recipe-message-input-button\n      :aria-label=\"codeButtonOptions.ariaLabel\"\n      :tooltip-text=\"codeButtonOptions.tooltipText\"\n      :keyboard-shortcut-text=\"codeButtonOptions.keyboardShortcutText\"\n      data-qa=\"code\"\n      :is-active=\"isSelectionActive('code')\"\n      @click=\"$emit('click', 'code', $event)\"\n    >\n      <template #icon>\n        <dt-icon-code\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n    <dt-recipe-message-input-button\n      :aria-label=\"codeBlockButtonOptions.ariaLabel\"\n      :tooltip-text=\"codeBlockButtonOptions.tooltipText\"\n      :keyboard-shortcut-text=\"codeBlockButtonOptions.keyboardShortcutText\"\n      data-qa=\"code-block\"\n      :is-active=\"isSelectionActive('codeBlock')\"\n      @click=\"$emit('click', 'codeBlock', $event)\"\n    >\n      <template #icon>\n        <dt-icon-code-block\n          class=\"d-recipe-message-input__button-stack-icon\"\n          size=\"200\"\n        />\n      </template>\n    </dt-recipe-message-input-button>\n  </dt-stack>\n</template>\n\n<script>\nimport { DtStack } from '@/components/stack';\n\nimport {\n  DtIconListBullet, DtIconBold, DtIconItalic, DtIconStrikethrough,\n  DtIconListOrdered, DtIconQuote, DtIconCode, DtIconCodeBlock,\n} from '@dialpad/dialtone-icons/vue2';\n\nimport DtRecipeMessageInputButton from './message_input_button.vue';\nexport default {\n  name: 'DtRecipeMesageInputTopbar',\n  components: {\n    DtStack,\n    DtIconListBullet,\n    DtIconBold,\n    DtIconItalic,\n    DtIconStrikethrough,\n    DtIconListOrdered,\n    DtIconQuote,\n    DtIconCode,\n    DtIconCodeBlock,\n    DtRecipeMessageInputButton,\n  },\n\n  props: {\n    boldButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    italicButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    strikeButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    bulletListButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    orderedListButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    blockQuoteButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    codeButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    codeBlockButtonOptions: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    isSelectionActive: {\n      type: Function,\n      default: () => {},\n    },\n  },\n\n  emits: ['click'],\n};\n</script>\n"],"names":[],"mappings":";;;;AAwJA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,IAEA,0BAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,IAEA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,OAAA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/types/components/hovercard/hovercard.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hovercard.vue.d.ts","sourceRoot":"","sources":["../../../../components/hovercard/hovercard.vue"],"names":[],"mappings":"AAwCA;"}
+{"version":3,"file":"hovercard.vue.d.ts","sourceRoot":"","sources":["../../../../components/hovercard/hovercard.vue"],"names":[],"mappings":"AA2CA;"}