@dialpad/dialtone-vue 2.171.3 → 2.173.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/dist/component-documentation.json +1 -1
  2. package/dist/components/item_layout/item_layout.vue.cjs +63 -1
  3. package/dist/components/item_layout/item_layout.vue.cjs.map +1 -1
  4. package/dist/components/item_layout/item_layout.vue.js +63 -1
  5. package/dist/components/item_layout/item_layout.vue.js.map +1 -1
  6. package/dist/components/keyboard_shortcut/keyboard_shortcut.vue.cjs +2 -2
  7. package/dist/components/keyboard_shortcut/keyboard_shortcut.vue.js +2 -2
  8. package/dist/components/list_item/list_item.vue.cjs +12 -13
  9. package/dist/components/list_item/list_item.vue.cjs.map +1 -1
  10. package/dist/components/list_item/list_item.vue.js +12 -13
  11. package/dist/components/list_item/list_item.vue.js.map +1 -1
  12. package/dist/components/rich_text_editor/extensions/mentions/MentionSuggestion.vue.cjs.map +1 -1
  13. package/dist/components/rich_text_editor/extensions/mentions/MentionSuggestion.vue.js.map +1 -1
  14. package/dist/components/rich_text_editor/extensions/suggestion/SuggestionList.vue.cjs.map +1 -1
  15. package/dist/components/rich_text_editor/extensions/suggestion/SuggestionList.vue.js.map +1 -1
  16. package/dist/components/rich_text_editor/rich_text_editor.vue.cjs +160 -17
  17. package/dist/components/rich_text_editor/rich_text_editor.vue.cjs.map +1 -1
  18. package/dist/components/rich_text_editor/rich_text_editor.vue.js +161 -18
  19. package/dist/components/rich_text_editor/rich_text_editor.vue.js.map +1 -1
  20. package/dist/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.cjs +1 -1
  21. package/dist/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.cjs.map +1 -1
  22. package/dist/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.js +1 -1
  23. package/dist/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.js.map +1 -1
  24. package/dist/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.cjs +5 -1
  25. package/dist/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.cjs.map +1 -1
  26. package/dist/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.js +5 -1
  27. package/dist/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.js.map +1 -1
  28. package/dist/recipes/conversation_view/editor/editor.vue.cjs +16 -1
  29. package/dist/recipes/conversation_view/editor/editor.vue.cjs.map +1 -1
  30. package/dist/recipes/conversation_view/editor/editor.vue.js +16 -1
  31. package/dist/recipes/conversation_view/editor/editor.vue.js.map +1 -1
  32. package/dist/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.cjs +10 -10
  33. package/dist/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.cjs.map +1 -1
  34. package/dist/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.js +10 -10
  35. package/dist/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.js.map +1 -1
  36. package/dist/recipes/conversation_view/feed_item_row/feed_item_row.vue.cjs +2 -4
  37. package/dist/recipes/conversation_view/feed_item_row/feed_item_row.vue.cjs.map +1 -1
  38. package/dist/recipes/conversation_view/feed_item_row/feed_item_row.vue.js +2 -4
  39. package/dist/recipes/conversation_view/feed_item_row/feed_item_row.vue.js.map +1 -1
  40. package/dist/recipes/conversation_view/message_input/last_active_nodes.cjs +87 -0
  41. package/dist/recipes/conversation_view/message_input/last_active_nodes.cjs.map +1 -0
  42. package/dist/recipes/conversation_view/message_input/last_active_nodes.js +87 -0
  43. package/dist/recipes/conversation_view/message_input/last_active_nodes.js.map +1 -0
  44. package/dist/recipes/conversation_view/message_input/message_input.vue.cjs +229 -46
  45. package/dist/recipes/conversation_view/message_input/message_input.vue.cjs.map +1 -1
  46. package/dist/recipes/conversation_view/message_input/message_input.vue.js +229 -46
  47. package/dist/recipes/conversation_view/message_input/message_input.vue.js.map +1 -1
  48. package/dist/recipes/conversation_view/message_input/message_input_button.vue.cjs +58 -0
  49. package/dist/recipes/conversation_view/message_input/message_input_button.vue.cjs.map +1 -0
  50. package/dist/recipes/conversation_view/message_input/message_input_button.vue.js +58 -0
  51. package/dist/recipes/conversation_view/message_input/message_input_button.vue.js.map +1 -0
  52. package/dist/recipes/conversation_view/message_input/message_input_link.vue.cjs +108 -0
  53. package/dist/recipes/conversation_view/message_input/message_input_link.vue.cjs.map +1 -0
  54. package/dist/recipes/conversation_view/message_input/message_input_link.vue.js +108 -0
  55. package/dist/recipes/conversation_view/message_input/message_input_link.vue.js.map +1 -0
  56. package/dist/recipes/conversation_view/message_input/message_input_topbar.vue.cjs +106 -0
  57. package/dist/recipes/conversation_view/message_input/message_input_topbar.vue.cjs.map +1 -0
  58. package/dist/recipes/conversation_view/message_input/message_input_topbar.vue.js +106 -0
  59. package/dist/recipes/conversation_view/message_input/message_input_topbar.vue.js.map +1 -0
  60. package/dist/recipes/item_layout/contact_info/contact_info.vue.cjs +4 -4
  61. package/dist/recipes/item_layout/contact_info/contact_info.vue.cjs.map +1 -1
  62. package/dist/recipes/item_layout/contact_info/contact_info.vue.js +4 -4
  63. package/dist/recipes/item_layout/contact_info/contact_info.vue.js.map +1 -1
  64. package/dist/types/components/item_layout/item_layout.vue.d.ts +66 -1
  65. package/dist/types/components/item_layout/item_layout.vue.d.ts.map +1 -1
  66. package/dist/types/components/list_item/list_item.vue.d.ts +1 -22
  67. package/dist/types/components/list_item/list_item.vue.d.ts.map +1 -1
  68. package/dist/types/components/rich_text_editor/extensions/mentions/MentionSuggestion.vue.d.ts.map +1 -1
  69. package/dist/types/components/rich_text_editor/extensions/suggestion/SuggestionList.vue.d.ts.map +1 -1
  70. package/dist/types/components/rich_text_editor/rich_text_editor.vue.d.ts +37 -1
  71. package/dist/types/components/rich_text_editor/rich_text_editor.vue.d.ts.map +1 -1
  72. package/dist/types/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.d.ts.map +1 -1
  73. package/dist/types/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.d.ts.map +1 -1
  74. package/dist/types/recipes/conversation_view/editor/editor.vue.d.ts +11 -0
  75. package/dist/types/recipes/conversation_view/editor/editor.vue.d.ts.map +1 -1
  76. package/dist/types/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.d.ts.map +1 -1
  77. package/dist/types/recipes/conversation_view/feed_item_row/feed_item_row.vue.d.ts.map +1 -1
  78. package/dist/types/recipes/conversation_view/message_input/last_active_nodes.d.ts +3 -0
  79. package/dist/types/recipes/conversation_view/message_input/last_active_nodes.d.ts.map +1 -0
  80. package/dist/types/recipes/conversation_view/message_input/message_input.vue.d.ts +183 -60
  81. package/dist/types/recipes/conversation_view/message_input/message_input.vue.d.ts.map +1 -1
  82. package/dist/types/recipes/conversation_view/message_input/message_input_button.vue.d.ts +48 -0
  83. package/dist/types/recipes/conversation_view/message_input/message_input_button.vue.d.ts.map +1 -0
  84. package/dist/types/recipes/conversation_view/message_input/message_input_link.vue.d.ts +38 -0
  85. package/dist/types/recipes/conversation_view/message_input/message_input_link.vue.d.ts.map +1 -0
  86. package/dist/types/recipes/conversation_view/message_input/message_input_topbar.vue.d.ts +87 -0
  87. package/dist/types/recipes/conversation_view/message_input/message_input_topbar.vue.d.ts.map +1 -0
  88. package/dist/types/recipes/item_layout/contact_info/contact_info.vue.d.ts.map +1 -1
  89. package/package.json +7 -4
@@ -0,0 +1,106 @@
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const vue2 = require("@dialpad/dialtone-icons/vue2");
4
+ const message_input_button = require("./message_input_button.vue.cjs");
5
+ const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
6
+ const stack = require("../../../components/stack/stack.vue.cjs");
7
+ const _sfc_main = {
8
+ name: "DtRecipeMesageInputTopbar",
9
+ components: {
10
+ DtStack: stack.default,
11
+ DtIconListBullet: vue2.DtIconListBullet,
12
+ DtIconBold: vue2.DtIconBold,
13
+ DtIconItalic: vue2.DtIconItalic,
14
+ DtIconStrikethrough: vue2.DtIconStrikethrough,
15
+ DtIconListOrdered: vue2.DtIconListOrdered,
16
+ DtIconQuote: vue2.DtIconQuote,
17
+ DtIconCode: vue2.DtIconCode,
18
+ DtIconCodeBlock: vue2.DtIconCodeBlock,
19
+ DtRecipeMessageInputButton: message_input_button.default
20
+ },
21
+ props: {
22
+ boldButtonOptions: {
23
+ type: Object,
24
+ default: () => ({})
25
+ },
26
+ italicButtonOptions: {
27
+ type: Object,
28
+ default: () => ({})
29
+ },
30
+ strikeButtonOptions: {
31
+ type: Object,
32
+ default: () => ({})
33
+ },
34
+ bulletListButtonOptions: {
35
+ type: Object,
36
+ default: () => ({})
37
+ },
38
+ orderedListButtonOptions: {
39
+ type: Object,
40
+ default: () => ({})
41
+ },
42
+ blockQuoteButtonOptions: {
43
+ type: Object,
44
+ default: () => ({})
45
+ },
46
+ codeButtonOptions: {
47
+ type: Object,
48
+ default: () => ({})
49
+ },
50
+ codeBlockButtonOptions: {
51
+ type: Object,
52
+ default: () => ({})
53
+ },
54
+ isSelectionActive: {
55
+ type: Function,
56
+ default: () => {
57
+ }
58
+ }
59
+ },
60
+ emits: ["click"]
61
+ };
62
+ var _sfc_render = function render() {
63
+ var _vm = this, _c = _vm._self._c;
64
+ 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) {
65
+ return _vm.$emit("click", "bold", $event);
66
+ } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
67
+ return [_c("dt-icon-bold", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
68
+ }, 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) {
69
+ return _vm.$emit("click", "italic", $event);
70
+ } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
71
+ return [_c("dt-icon-italic", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
72
+ }, 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) {
73
+ return _vm.$emit("click", "strike", $event);
74
+ } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
75
+ return [_c("dt-icon-strikethrough", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
76
+ }, 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) {
77
+ return _vm.$emit("click", "bulletList", $event);
78
+ } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
79
+ return [_c("dt-icon-list-bullet", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
80
+ }, 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) {
81
+ return _vm.$emit("click", "orderedList", $event);
82
+ } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
83
+ return [_c("dt-icon-list-ordered", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
84
+ }, 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) {
85
+ return _vm.$emit("click", "blockquote", $event);
86
+ } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
87
+ return [_c("dt-icon-quote", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
88
+ }, 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) {
89
+ return _vm.$emit("click", "code", $event);
90
+ } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
91
+ return [_c("dt-icon-code", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
92
+ }, 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) {
93
+ return _vm.$emit("click", "codeBlock", $event);
94
+ } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
95
+ return [_c("dt-icon-code-block", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
96
+ }, proxy: true }]) })], 2);
97
+ };
98
+ var _sfc_staticRenderFns = [];
99
+ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
100
+ _sfc_main,
101
+ _sfc_render,
102
+ _sfc_staticRenderFns
103
+ );
104
+ const DtRecipeMessageInputTopbar = __component__.exports;
105
+ exports.default = DtRecipeMessageInputTopbar;
106
+ //# sourceMappingURL=message_input_topbar.vue.cjs.map
@@ -0,0 +1 @@
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,106 @@
1
+ import { DtIconListBullet, DtIconBold, DtIconItalic, DtIconStrikethrough, DtIconListOrdered, DtIconQuote, DtIconCode, DtIconCodeBlock } from "@dialpad/dialtone-icons/vue2";
2
+ import DtRecipeMessageInputButton from "./message_input_button.vue.js";
3
+ import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
4
+ import DtStack from "../../../components/stack/stack.vue.js";
5
+ const _sfc_main = {
6
+ name: "DtRecipeMesageInputTopbar",
7
+ components: {
8
+ DtStack,
9
+ DtIconListBullet,
10
+ DtIconBold,
11
+ DtIconItalic,
12
+ DtIconStrikethrough,
13
+ DtIconListOrdered,
14
+ DtIconQuote,
15
+ DtIconCode,
16
+ DtIconCodeBlock,
17
+ DtRecipeMessageInputButton
18
+ },
19
+ props: {
20
+ boldButtonOptions: {
21
+ type: Object,
22
+ default: () => ({})
23
+ },
24
+ italicButtonOptions: {
25
+ type: Object,
26
+ default: () => ({})
27
+ },
28
+ strikeButtonOptions: {
29
+ type: Object,
30
+ default: () => ({})
31
+ },
32
+ bulletListButtonOptions: {
33
+ type: Object,
34
+ default: () => ({})
35
+ },
36
+ orderedListButtonOptions: {
37
+ type: Object,
38
+ default: () => ({})
39
+ },
40
+ blockQuoteButtonOptions: {
41
+ type: Object,
42
+ default: () => ({})
43
+ },
44
+ codeButtonOptions: {
45
+ type: Object,
46
+ default: () => ({})
47
+ },
48
+ codeBlockButtonOptions: {
49
+ type: Object,
50
+ default: () => ({})
51
+ },
52
+ isSelectionActive: {
53
+ type: Function,
54
+ default: () => {
55
+ }
56
+ }
57
+ },
58
+ emits: ["click"]
59
+ };
60
+ var _sfc_render = function render() {
61
+ var _vm = this, _c = _vm._self._c;
62
+ 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) {
63
+ return _vm.$emit("click", "bold", $event);
64
+ } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
65
+ return [_c("dt-icon-bold", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
66
+ }, 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) {
67
+ return _vm.$emit("click", "italic", $event);
68
+ } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
69
+ return [_c("dt-icon-italic", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
70
+ }, 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) {
71
+ return _vm.$emit("click", "strike", $event);
72
+ } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
73
+ return [_c("dt-icon-strikethrough", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
74
+ }, 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) {
75
+ return _vm.$emit("click", "bulletList", $event);
76
+ } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
77
+ return [_c("dt-icon-list-bullet", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
78
+ }, 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) {
79
+ return _vm.$emit("click", "orderedList", $event);
80
+ } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
81
+ return [_c("dt-icon-list-ordered", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
82
+ }, 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) {
83
+ return _vm.$emit("click", "blockquote", $event);
84
+ } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
85
+ return [_c("dt-icon-quote", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
86
+ }, 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) {
87
+ return _vm.$emit("click", "code", $event);
88
+ } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
89
+ return [_c("dt-icon-code", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
90
+ }, 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) {
91
+ return _vm.$emit("click", "codeBlock", $event);
92
+ } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
93
+ return [_c("dt-icon-code-block", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
94
+ }, proxy: true }]) })], 2);
95
+ };
96
+ var _sfc_staticRenderFns = [];
97
+ var __component__ = /* @__PURE__ */ normalizeComponent(
98
+ _sfc_main,
99
+ _sfc_render,
100
+ _sfc_staticRenderFns
101
+ );
102
+ const DtRecipeMessageInputTopbar = __component__.exports;
103
+ export {
104
+ DtRecipeMessageInputTopbar as default
105
+ };
106
+ //# sourceMappingURL=message_input_topbar.vue.js.map
@@ -0,0 +1 @@
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -108,7 +108,7 @@ const _sfc_main = {
108
108
  };
109
109
  var _sfc_render = function render() {
110
110
  var _vm = this, _c = _vm._self._c;
111
- return _c("dt-item-layout", { staticClass: "d-recipe-contact-info", attrs: { "role": _vm.role, "data-qa": "contact-info" }, scopedSlots: _vm._u([_vm.showAvatar ? { key: "left", fn: function() {
111
+ return _c("dt-item-layout", { staticClass: "d-recipe-contact-info", attrs: { "role": _vm.role, "data-qa": "contact-info", "content-class": "d-recipe-contact-info__content", "right-class": "d-recipe-contact-info__right", "unstyled": "" }, scopedSlots: _vm._u([_vm.showAvatar ? { key: "left", fn: function() {
112
112
  return [_c("button", { staticClass: "d-recipe-contact-info__left", attrs: { "data-qa": "contact-info-left", "aria-labelledby": _vm.avatarLabelledBy }, on: { "click": _vm.avatarClick } }, [_vm.avatarList ? _c("span", { staticClass: "d-recipe-contact-info__avatars" }, _vm._l(_vm.avatarList, function(avatar2, index) {
113
113
  return _c("dt-avatar", { key: index, attrs: { "size": _vm.avatarSize, "seed": avatar2.seed, "full-name": avatar2.fullName, "image-src": avatar2.src, "image-alt": "", "overlay-text": avatar2.text, "avatar-class": [
114
114
  {
@@ -124,11 +124,11 @@ var _sfc_render = function render() {
124
124
  return [_vm._t("avatarIcon", null, { "iconSize": iconSize })];
125
125
  } }], null, true) })], 1)];
126
126
  }, proxy: true } : null, { key: "default", fn: function() {
127
- return [_c("div", { attrs: { "data-qa": "contact-info-header" } }, [_vm._t("header")], 2)];
127
+ return [_c("div", { staticClass: "d-recipe-contact-info__header", attrs: { "data-qa": "contact-info-header" } }, [_vm._t("header")], 2)];
128
128
  }, proxy: true }, { key: "subtitle", fn: function() {
129
- return [_c("div", { attrs: { "data-qa": "contact-info-subtitle" } }, [_vm._t("subtitle")], 2)];
129
+ return [_c("div", { staticClass: "d-recipe-contact-info__subtitle", attrs: { "data-qa": "contact-info-subtitle" } }, [_vm._t("subtitle")], 2)];
130
130
  }, proxy: true }, _vm.$slots.bottom ? { key: "bottom", fn: function() {
131
- return [_c("div", { attrs: { "data-qa": "contact-info-bottom" } }, [_vm._t("bottom")], 2)];
131
+ return [_c("div", { staticClass: "d-recipe-contact-info__bottom", attrs: { "data-qa": "contact-info-bottom" } }, [_vm._t("bottom")], 2)];
132
132
  }, proxy: true } : null, _vm.$slots.right ? { key: "right", fn: function() {
133
133
  return [_c("div", { attrs: { "data-qa": "contact-info-right" } }, [_vm._t("right")], 2)];
134
134
  }, proxy: true } : null], null, true) });
@@ -1 +1 @@
1
- {"version":3,"file":"contact_info.vue.cjs","sources":["../../../../recipes/item_layout/contact_info/contact_info.vue"],"sourcesContent":["<template>\n <dt-item-layout\n :role=\"role\"\n data-qa=\"contact-info\"\n class=\"d-recipe-contact-info\"\n >\n <template\n v-if=\"showAvatar\"\n #left\n >\n <button\n class=\"d-recipe-contact-info__left\"\n data-qa=\"contact-info-left\"\n :aria-labelledby=\"avatarLabelledBy\"\n @click=\"avatarClick\"\n >\n <span\n v-if=\"avatarList\"\n class=\"d-recipe-contact-info__avatars\"\n >\n <dt-avatar\n v-for=\"(avatar, index) in avatarList\"\n :key=\"index\"\n :size=\"avatarSize\"\n :seed=\"avatar.seed\"\n :full-name=\"avatar.fullName\"\n :image-src=\"avatar.src\"\n image-alt=\"\"\n :overlay-text=\"avatar.text\"\n :avatar-class=\"[\n {\n 'd-recipe-contact-info__avatar-stacked': index > 0,\n 'd-recipe-contact-info__avatar-halo': !!avatar.halo,\n },\n ]\"\n >\n <template\n #icon=\"{ iconSize }\"\n >\n <!-- @slot Slot for avatar icon in a list -->\n <slot\n name=\"avatarIcon\"\n :icon-size=\"iconSize\"\n />\n </template>\n <template\n v-if=\"avatar.icon\"\n #overlayIcon\n >\n <component :is=\"avatar.icon\" />\n </template>\n </dt-avatar>\n </span>\n <dt-avatar\n v-else\n :size=\"avatarSize\"\n :full-name=\"avatarFullName\"\n :image-src=\"avatarSrc\"\n image-alt=\"\"\n :seed=\"avatarSeed\"\n :color=\"avatarColor\"\n :presence=\"presence\"\n >\n <template\n #icon=\"{ iconSize }\"\n >\n <!-- @slot Slot for avatar icon in a list -->\n <slot\n name=\"avatarIcon\"\n :icon-size=\"iconSize\"\n />\n </template>\n </dt-avatar>\n </button>\n </template>\n <template #default>\n <div data-qa=\"contact-info-header\">\n <!-- @slot Slot for header information -->\n <slot name=\"header\" />\n </div>\n </template>\n\n <template #subtitle>\n <div data-qa=\"contact-info-subtitle\">\n <!-- @slot Slot for subtitle information -->\n <slot name=\"subtitle\" />\n </div>\n </template>\n\n <template\n v-if=\"$slots.bottom\"\n #bottom\n >\n <div data-qa=\"contact-info-bottom\">\n <!-- @slot Slot for information at the bottom -->\n <slot name=\"bottom\" />\n </div>\n </template>\n\n <template\n v-if=\"$slots.right\"\n #right\n >\n <div data-qa=\"contact-info-right\">\n <!-- @slot Slot for the right content -->\n <slot name=\"right\" />\n </div>\n </template>\n </dt-item-layout>\n</template>\n\n<script>\nimport DtItemLayout from '@/components/item_layout/item_layout.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\n\nexport default {\n name: 'DtRecipeContactInfo',\n\n components: {\n DtAvatar,\n DtItemLayout,\n },\n\n /* inheritAttrs: false is generally an option we want to set on library\n components. This allows any attributes passed in that are not recognized\n as props to be passed down to another element or component using v-bind:$attrs\n more info: https://vuejs.org/v2/api/#inheritAttrs */\n // inheritAttrs: false,\n\n props: {\n /**\n * String to use for the item's role.\n */\n role: {\n type: String,\n default: '',\n },\n\n /**\n * Display avatar if `showAvatar` property is true.\n */\n showAvatar: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Optional avatar image url.\n */\n avatarSrc: {\n type: String,\n default: '',\n },\n\n /**\n * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n */\n avatarSeed: {\n type: String,\n default: null,\n },\n\n /**\n * Avatar's full name, used to extract initials\n * to display in avatar if `avatarSrc` and `avatarIcon` are empty.\n */\n avatarFullName: {\n type: String,\n default: '',\n },\n\n /**\n * The size of the avatar\n * @values xs, sm, md, lg, xl\n */\n avatarSize: {\n type: String,\n default: 'lg',\n },\n\n /**\n * The aria-labelledby of the button containing avatars\n */\n avatarLabelledBy: {\n type: String,\n default: '',\n },\n\n /**\n * Avatar color to display if `avatarSrc` is empty.\n */\n avatarColor: {\n type: String,\n default: null,\n },\n\n /**\n * Determines whether to show the presence indicator for\n * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n * or 'active'. By default, it's null and nothing is shown.\n * @values null, busy, away, offline, active\n */\n presence: {\n type: String,\n default: null,\n },\n\n /**\n * Showing multiple avatars in contact info.\n * The props of array items are: <br>\n * `src` - avatar image url (optional) <br>\n * `fullName` - full name, used to extract initials to display in avatar<br>\n * if `avatarSrc` and `avatarIcon` are empty<br>\n * `seed` - determines uniqueness of avatar background <br>\n * `text` - text that overlays the avatar (optional) <br>\n * `icon` - icon that overlays the avatar (optional) <br>\n * `halo` - halo highlight around the avatar. boolean true/false\n */\n avatarList: {\n type: Array,\n default: null,\n },\n },\n\n emits: ['avatar-click'],\n\n methods: {\n avatarClick () {\n this.$emit('avatar-click');\n },\n },\n};\n</script>\n"],"names":["DtAvatar","DtItemLayout"],"mappings":";;;;;AAmHA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA,OAAA;AAAA,IACA,cAAAC,YAAA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,cAAA;AAAA,EAEA,SAAA;AAAA,IACA,cAAA;AACA,WAAA,MAAA,cAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"contact_info.vue.cjs","sources":["../../../../recipes/item_layout/contact_info/contact_info.vue"],"sourcesContent":["<template>\n <dt-item-layout\n :role=\"role\"\n data-qa=\"contact-info\"\n class=\"d-recipe-contact-info\"\n content-class=\"d-recipe-contact-info__content\"\n right-class=\"d-recipe-contact-info__right\"\n unstyled\n >\n <template\n v-if=\"showAvatar\"\n #left\n >\n <button\n class=\"d-recipe-contact-info__left\"\n data-qa=\"contact-info-left\"\n :aria-labelledby=\"avatarLabelledBy\"\n @click=\"avatarClick\"\n >\n <span\n v-if=\"avatarList\"\n class=\"d-recipe-contact-info__avatars\"\n >\n <dt-avatar\n v-for=\"(avatar, index) in avatarList\"\n :key=\"index\"\n :size=\"avatarSize\"\n :seed=\"avatar.seed\"\n :full-name=\"avatar.fullName\"\n :image-src=\"avatar.src\"\n image-alt=\"\"\n :overlay-text=\"avatar.text\"\n :avatar-class=\"[\n {\n 'd-recipe-contact-info__avatar-stacked': index > 0,\n 'd-recipe-contact-info__avatar-halo': !!avatar.halo,\n },\n ]\"\n >\n <template #icon=\"{ iconSize }\">\n <!-- @slot Slot for avatar icon in a list -->\n <slot\n name=\"avatarIcon\"\n :icon-size=\"iconSize\"\n />\n </template>\n <template\n v-if=\"avatar.icon\"\n #overlayIcon\n >\n <component :is=\"avatar.icon\" />\n </template>\n </dt-avatar>\n </span>\n <dt-avatar\n v-else\n :size=\"avatarSize\"\n :full-name=\"avatarFullName\"\n :image-src=\"avatarSrc\"\n image-alt=\"\"\n :seed=\"avatarSeed\"\n :color=\"avatarColor\"\n :presence=\"presence\"\n >\n <template #icon=\"{ iconSize }\">\n <!-- @slot Slot for avatar icon in a list -->\n <slot\n name=\"avatarIcon\"\n :icon-size=\"iconSize\"\n />\n </template>\n </dt-avatar>\n </button>\n </template>\n <template #default>\n <div\n class=\"d-recipe-contact-info__header\"\n data-qa=\"contact-info-header\"\n >\n <!-- @slot Slot for header information -->\n <slot name=\"header\" />\n </div>\n </template>\n\n <template #subtitle>\n <div\n class=\"d-recipe-contact-info__subtitle\"\n data-qa=\"contact-info-subtitle\"\n >\n <!-- @slot Slot for subtitle information -->\n <slot name=\"subtitle\" />\n </div>\n </template>\n\n <template\n v-if=\"$slots.bottom\"\n #bottom\n >\n <div\n class=\"d-recipe-contact-info__bottom\"\n data-qa=\"contact-info-bottom\"\n >\n <!-- @slot Slot for information at the bottom -->\n <slot name=\"bottom\" />\n </div>\n </template>\n\n <template\n v-if=\"$slots.right\"\n #right\n >\n <div data-qa=\"contact-info-right\">\n <!-- @slot Slot for the right content -->\n <slot name=\"right\" />\n </div>\n </template>\n </dt-item-layout>\n</template>\n\n<script>\nimport DtItemLayout from '@/components/item_layout/item_layout.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\n\nexport default {\n name: 'DtRecipeContactInfo',\n\n components: {\n DtAvatar,\n DtItemLayout,\n },\n\n /* inheritAttrs: false is generally an option we want to set on library\n components. This allows any attributes passed in that are not recognized\n as props to be passed down to another element or component using v-bind:$attrs\n more info: https://vuejs.org/v2/api/#inheritAttrs */\n // inheritAttrs: false,\n\n props: {\n /**\n * String to use for the item's role.\n */\n role: {\n type: String,\n default: '',\n },\n\n /**\n * Display avatar if `showAvatar` property is true.\n */\n showAvatar: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Optional avatar image url.\n */\n avatarSrc: {\n type: String,\n default: '',\n },\n\n /**\n * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n */\n avatarSeed: {\n type: String,\n default: null,\n },\n\n /**\n * Avatar's full name, used to extract initials\n * to display in avatar if `avatarSrc` and `avatarIcon` are empty.\n */\n avatarFullName: {\n type: String,\n default: '',\n },\n\n /**\n * The size of the avatar\n * @values xs, sm, md, lg, xl\n */\n avatarSize: {\n type: String,\n default: 'lg',\n },\n\n /**\n * The aria-labelledby of the button containing avatars\n */\n avatarLabelledBy: {\n type: String,\n default: '',\n },\n\n /**\n * Avatar color to display if `avatarSrc` is empty.\n */\n avatarColor: {\n type: String,\n default: null,\n },\n\n /**\n * Determines whether to show the presence indicator for\n * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n * or 'active'. By default, it's null and nothing is shown.\n * @values null, busy, away, offline, active\n */\n presence: {\n type: String,\n default: null,\n },\n\n /**\n * Showing multiple avatars in contact info.\n * The props of array items are: <br>\n * `src` - avatar image url (optional) <br>\n * `fullName` - full name, used to extract initials to display in avatar<br>\n * if `avatarSrc` and `avatarIcon` are empty<br>\n * `seed` - determines uniqueness of avatar background <br>\n * `text` - text that overlays the avatar (optional) <br>\n * `icon` - icon that overlays the avatar (optional) <br>\n * `halo` - halo highlight around the avatar. boolean true/false\n */\n avatarList: {\n type: Array,\n default: null,\n },\n },\n\n emits: ['avatar-click'],\n\n methods: {\n avatarClick () {\n this.$emit('avatar-click');\n },\n },\n};\n</script>\n"],"names":["DtAvatar","DtItemLayout"],"mappings":";;;;;AA2HA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA,OAAA;AAAA,IACA,cAAAC,YAAA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,cAAA;AAAA,EAEA,SAAA;AAAA,IACA,cAAA;AACA,WAAA,MAAA,cAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -106,7 +106,7 @@ const _sfc_main = {
106
106
  };
107
107
  var _sfc_render = function render() {
108
108
  var _vm = this, _c = _vm._self._c;
109
- return _c("dt-item-layout", { staticClass: "d-recipe-contact-info", attrs: { "role": _vm.role, "data-qa": "contact-info" }, scopedSlots: _vm._u([_vm.showAvatar ? { key: "left", fn: function() {
109
+ return _c("dt-item-layout", { staticClass: "d-recipe-contact-info", attrs: { "role": _vm.role, "data-qa": "contact-info", "content-class": "d-recipe-contact-info__content", "right-class": "d-recipe-contact-info__right", "unstyled": "" }, scopedSlots: _vm._u([_vm.showAvatar ? { key: "left", fn: function() {
110
110
  return [_c("button", { staticClass: "d-recipe-contact-info__left", attrs: { "data-qa": "contact-info-left", "aria-labelledby": _vm.avatarLabelledBy }, on: { "click": _vm.avatarClick } }, [_vm.avatarList ? _c("span", { staticClass: "d-recipe-contact-info__avatars" }, _vm._l(_vm.avatarList, function(avatar, index) {
111
111
  return _c("dt-avatar", { key: index, attrs: { "size": _vm.avatarSize, "seed": avatar.seed, "full-name": avatar.fullName, "image-src": avatar.src, "image-alt": "", "overlay-text": avatar.text, "avatar-class": [
112
112
  {
@@ -122,11 +122,11 @@ var _sfc_render = function render() {
122
122
  return [_vm._t("avatarIcon", null, { "iconSize": iconSize })];
123
123
  } }], null, true) })], 1)];
124
124
  }, proxy: true } : null, { key: "default", fn: function() {
125
- return [_c("div", { attrs: { "data-qa": "contact-info-header" } }, [_vm._t("header")], 2)];
125
+ return [_c("div", { staticClass: "d-recipe-contact-info__header", attrs: { "data-qa": "contact-info-header" } }, [_vm._t("header")], 2)];
126
126
  }, proxy: true }, { key: "subtitle", fn: function() {
127
- return [_c("div", { attrs: { "data-qa": "contact-info-subtitle" } }, [_vm._t("subtitle")], 2)];
127
+ return [_c("div", { staticClass: "d-recipe-contact-info__subtitle", attrs: { "data-qa": "contact-info-subtitle" } }, [_vm._t("subtitle")], 2)];
128
128
  }, proxy: true }, _vm.$slots.bottom ? { key: "bottom", fn: function() {
129
- return [_c("div", { attrs: { "data-qa": "contact-info-bottom" } }, [_vm._t("bottom")], 2)];
129
+ return [_c("div", { staticClass: "d-recipe-contact-info__bottom", attrs: { "data-qa": "contact-info-bottom" } }, [_vm._t("bottom")], 2)];
130
130
  }, proxy: true } : null, _vm.$slots.right ? { key: "right", fn: function() {
131
131
  return [_c("div", { attrs: { "data-qa": "contact-info-right" } }, [_vm._t("right")], 2)];
132
132
  }, proxy: true } : null], null, true) });
@@ -1 +1 @@
1
- {"version":3,"file":"contact_info.vue.js","sources":["../../../../recipes/item_layout/contact_info/contact_info.vue"],"sourcesContent":["<template>\n <dt-item-layout\n :role=\"role\"\n data-qa=\"contact-info\"\n class=\"d-recipe-contact-info\"\n >\n <template\n v-if=\"showAvatar\"\n #left\n >\n <button\n class=\"d-recipe-contact-info__left\"\n data-qa=\"contact-info-left\"\n :aria-labelledby=\"avatarLabelledBy\"\n @click=\"avatarClick\"\n >\n <span\n v-if=\"avatarList\"\n class=\"d-recipe-contact-info__avatars\"\n >\n <dt-avatar\n v-for=\"(avatar, index) in avatarList\"\n :key=\"index\"\n :size=\"avatarSize\"\n :seed=\"avatar.seed\"\n :full-name=\"avatar.fullName\"\n :image-src=\"avatar.src\"\n image-alt=\"\"\n :overlay-text=\"avatar.text\"\n :avatar-class=\"[\n {\n 'd-recipe-contact-info__avatar-stacked': index > 0,\n 'd-recipe-contact-info__avatar-halo': !!avatar.halo,\n },\n ]\"\n >\n <template\n #icon=\"{ iconSize }\"\n >\n <!-- @slot Slot for avatar icon in a list -->\n <slot\n name=\"avatarIcon\"\n :icon-size=\"iconSize\"\n />\n </template>\n <template\n v-if=\"avatar.icon\"\n #overlayIcon\n >\n <component :is=\"avatar.icon\" />\n </template>\n </dt-avatar>\n </span>\n <dt-avatar\n v-else\n :size=\"avatarSize\"\n :full-name=\"avatarFullName\"\n :image-src=\"avatarSrc\"\n image-alt=\"\"\n :seed=\"avatarSeed\"\n :color=\"avatarColor\"\n :presence=\"presence\"\n >\n <template\n #icon=\"{ iconSize }\"\n >\n <!-- @slot Slot for avatar icon in a list -->\n <slot\n name=\"avatarIcon\"\n :icon-size=\"iconSize\"\n />\n </template>\n </dt-avatar>\n </button>\n </template>\n <template #default>\n <div data-qa=\"contact-info-header\">\n <!-- @slot Slot for header information -->\n <slot name=\"header\" />\n </div>\n </template>\n\n <template #subtitle>\n <div data-qa=\"contact-info-subtitle\">\n <!-- @slot Slot for subtitle information -->\n <slot name=\"subtitle\" />\n </div>\n </template>\n\n <template\n v-if=\"$slots.bottom\"\n #bottom\n >\n <div data-qa=\"contact-info-bottom\">\n <!-- @slot Slot for information at the bottom -->\n <slot name=\"bottom\" />\n </div>\n </template>\n\n <template\n v-if=\"$slots.right\"\n #right\n >\n <div data-qa=\"contact-info-right\">\n <!-- @slot Slot for the right content -->\n <slot name=\"right\" />\n </div>\n </template>\n </dt-item-layout>\n</template>\n\n<script>\nimport DtItemLayout from '@/components/item_layout/item_layout.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\n\nexport default {\n name: 'DtRecipeContactInfo',\n\n components: {\n DtAvatar,\n DtItemLayout,\n },\n\n /* inheritAttrs: false is generally an option we want to set on library\n components. This allows any attributes passed in that are not recognized\n as props to be passed down to another element or component using v-bind:$attrs\n more info: https://vuejs.org/v2/api/#inheritAttrs */\n // inheritAttrs: false,\n\n props: {\n /**\n * String to use for the item's role.\n */\n role: {\n type: String,\n default: '',\n },\n\n /**\n * Display avatar if `showAvatar` property is true.\n */\n showAvatar: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Optional avatar image url.\n */\n avatarSrc: {\n type: String,\n default: '',\n },\n\n /**\n * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n */\n avatarSeed: {\n type: String,\n default: null,\n },\n\n /**\n * Avatar's full name, used to extract initials\n * to display in avatar if `avatarSrc` and `avatarIcon` are empty.\n */\n avatarFullName: {\n type: String,\n default: '',\n },\n\n /**\n * The size of the avatar\n * @values xs, sm, md, lg, xl\n */\n avatarSize: {\n type: String,\n default: 'lg',\n },\n\n /**\n * The aria-labelledby of the button containing avatars\n */\n avatarLabelledBy: {\n type: String,\n default: '',\n },\n\n /**\n * Avatar color to display if `avatarSrc` is empty.\n */\n avatarColor: {\n type: String,\n default: null,\n },\n\n /**\n * Determines whether to show the presence indicator for\n * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n * or 'active'. By default, it's null and nothing is shown.\n * @values null, busy, away, offline, active\n */\n presence: {\n type: String,\n default: null,\n },\n\n /**\n * Showing multiple avatars in contact info.\n * The props of array items are: <br>\n * `src` - avatar image url (optional) <br>\n * `fullName` - full name, used to extract initials to display in avatar<br>\n * if `avatarSrc` and `avatarIcon` are empty<br>\n * `seed` - determines uniqueness of avatar background <br>\n * `text` - text that overlays the avatar (optional) <br>\n * `icon` - icon that overlays the avatar (optional) <br>\n * `halo` - halo highlight around the avatar. boolean true/false\n */\n avatarList: {\n type: Array,\n default: null,\n },\n },\n\n emits: ['avatar-click'],\n\n methods: {\n avatarClick () {\n this.$emit('avatar-click');\n },\n },\n};\n</script>\n"],"names":[],"mappings":";;;AAmHA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,cAAA;AAAA,EAEA,SAAA;AAAA,IACA,cAAA;AACA,WAAA,MAAA,cAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"contact_info.vue.js","sources":["../../../../recipes/item_layout/contact_info/contact_info.vue"],"sourcesContent":["<template>\n <dt-item-layout\n :role=\"role\"\n data-qa=\"contact-info\"\n class=\"d-recipe-contact-info\"\n content-class=\"d-recipe-contact-info__content\"\n right-class=\"d-recipe-contact-info__right\"\n unstyled\n >\n <template\n v-if=\"showAvatar\"\n #left\n >\n <button\n class=\"d-recipe-contact-info__left\"\n data-qa=\"contact-info-left\"\n :aria-labelledby=\"avatarLabelledBy\"\n @click=\"avatarClick\"\n >\n <span\n v-if=\"avatarList\"\n class=\"d-recipe-contact-info__avatars\"\n >\n <dt-avatar\n v-for=\"(avatar, index) in avatarList\"\n :key=\"index\"\n :size=\"avatarSize\"\n :seed=\"avatar.seed\"\n :full-name=\"avatar.fullName\"\n :image-src=\"avatar.src\"\n image-alt=\"\"\n :overlay-text=\"avatar.text\"\n :avatar-class=\"[\n {\n 'd-recipe-contact-info__avatar-stacked': index > 0,\n 'd-recipe-contact-info__avatar-halo': !!avatar.halo,\n },\n ]\"\n >\n <template #icon=\"{ iconSize }\">\n <!-- @slot Slot for avatar icon in a list -->\n <slot\n name=\"avatarIcon\"\n :icon-size=\"iconSize\"\n />\n </template>\n <template\n v-if=\"avatar.icon\"\n #overlayIcon\n >\n <component :is=\"avatar.icon\" />\n </template>\n </dt-avatar>\n </span>\n <dt-avatar\n v-else\n :size=\"avatarSize\"\n :full-name=\"avatarFullName\"\n :image-src=\"avatarSrc\"\n image-alt=\"\"\n :seed=\"avatarSeed\"\n :color=\"avatarColor\"\n :presence=\"presence\"\n >\n <template #icon=\"{ iconSize }\">\n <!-- @slot Slot for avatar icon in a list -->\n <slot\n name=\"avatarIcon\"\n :icon-size=\"iconSize\"\n />\n </template>\n </dt-avatar>\n </button>\n </template>\n <template #default>\n <div\n class=\"d-recipe-contact-info__header\"\n data-qa=\"contact-info-header\"\n >\n <!-- @slot Slot for header information -->\n <slot name=\"header\" />\n </div>\n </template>\n\n <template #subtitle>\n <div\n class=\"d-recipe-contact-info__subtitle\"\n data-qa=\"contact-info-subtitle\"\n >\n <!-- @slot Slot for subtitle information -->\n <slot name=\"subtitle\" />\n </div>\n </template>\n\n <template\n v-if=\"$slots.bottom\"\n #bottom\n >\n <div\n class=\"d-recipe-contact-info__bottom\"\n data-qa=\"contact-info-bottom\"\n >\n <!-- @slot Slot for information at the bottom -->\n <slot name=\"bottom\" />\n </div>\n </template>\n\n <template\n v-if=\"$slots.right\"\n #right\n >\n <div data-qa=\"contact-info-right\">\n <!-- @slot Slot for the right content -->\n <slot name=\"right\" />\n </div>\n </template>\n </dt-item-layout>\n</template>\n\n<script>\nimport DtItemLayout from '@/components/item_layout/item_layout.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\n\nexport default {\n name: 'DtRecipeContactInfo',\n\n components: {\n DtAvatar,\n DtItemLayout,\n },\n\n /* inheritAttrs: false is generally an option we want to set on library\n components. This allows any attributes passed in that are not recognized\n as props to be passed down to another element or component using v-bind:$attrs\n more info: https://vuejs.org/v2/api/#inheritAttrs */\n // inheritAttrs: false,\n\n props: {\n /**\n * String to use for the item's role.\n */\n role: {\n type: String,\n default: '',\n },\n\n /**\n * Display avatar if `showAvatar` property is true.\n */\n showAvatar: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Optional avatar image url.\n */\n avatarSrc: {\n type: String,\n default: '',\n },\n\n /**\n * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n */\n avatarSeed: {\n type: String,\n default: null,\n },\n\n /**\n * Avatar's full name, used to extract initials\n * to display in avatar if `avatarSrc` and `avatarIcon` are empty.\n */\n avatarFullName: {\n type: String,\n default: '',\n },\n\n /**\n * The size of the avatar\n * @values xs, sm, md, lg, xl\n */\n avatarSize: {\n type: String,\n default: 'lg',\n },\n\n /**\n * The aria-labelledby of the button containing avatars\n */\n avatarLabelledBy: {\n type: String,\n default: '',\n },\n\n /**\n * Avatar color to display if `avatarSrc` is empty.\n */\n avatarColor: {\n type: String,\n default: null,\n },\n\n /**\n * Determines whether to show the presence indicator for\n * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n * or 'active'. By default, it's null and nothing is shown.\n * @values null, busy, away, offline, active\n */\n presence: {\n type: String,\n default: null,\n },\n\n /**\n * Showing multiple avatars in contact info.\n * The props of array items are: <br>\n * `src` - avatar image url (optional) <br>\n * `fullName` - full name, used to extract initials to display in avatar<br>\n * if `avatarSrc` and `avatarIcon` are empty<br>\n * `seed` - determines uniqueness of avatar background <br>\n * `text` - text that overlays the avatar (optional) <br>\n * `icon` - icon that overlays the avatar (optional) <br>\n * `halo` - halo highlight around the avatar. boolean true/false\n */\n avatarList: {\n type: Array,\n default: null,\n },\n },\n\n emits: ['avatar-click'],\n\n methods: {\n avatarClick () {\n this.$emit('avatar-click');\n },\n },\n};\n</script>\n"],"names":[],"mappings":";;;AA2HA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,cAAA;AAAA,EAEA,SAAA;AAAA,IACA,cAAA;AACA,WAAA,MAAA,cAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -7,7 +7,37 @@ declare const _default: import('vue').DefineComponent<{
7
7
  type: BooleanConstructor;
8
8
  default: boolean;
9
9
  };
10
- }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, Readonly<import('vue').ExtractPropTypes<{
10
+ leftClass: {
11
+ type: StringConstructor;
12
+ default: string;
13
+ };
14
+ contentClass: {
15
+ type: StringConstructor;
16
+ default: string;
17
+ };
18
+ titleClass: {
19
+ type: StringConstructor;
20
+ default: string;
21
+ };
22
+ subtitleClass: {
23
+ type: StringConstructor;
24
+ default: string;
25
+ };
26
+ bottomClass: {
27
+ type: StringConstructor;
28
+ default: string;
29
+ };
30
+ rightClass: {
31
+ type: StringConstructor;
32
+ default: string;
33
+ };
34
+ selectedClass: {
35
+ type: StringConstructor;
36
+ default: string;
37
+ };
38
+ }, {}, {}, {}, {
39
+ dynamicGridTemplateColumns(): string;
40
+ }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, Readonly<import('vue').ExtractPropTypes<{
11
41
  as: {
12
42
  type: StringConstructor;
13
43
  default: string;
@@ -16,9 +46,44 @@ declare const _default: import('vue').DefineComponent<{
16
46
  type: BooleanConstructor;
17
47
  default: boolean;
18
48
  };
49
+ leftClass: {
50
+ type: StringConstructor;
51
+ default: string;
52
+ };
53
+ contentClass: {
54
+ type: StringConstructor;
55
+ default: string;
56
+ };
57
+ titleClass: {
58
+ type: StringConstructor;
59
+ default: string;
60
+ };
61
+ subtitleClass: {
62
+ type: StringConstructor;
63
+ default: string;
64
+ };
65
+ bottomClass: {
66
+ type: StringConstructor;
67
+ default: string;
68
+ };
69
+ rightClass: {
70
+ type: StringConstructor;
71
+ default: string;
72
+ };
73
+ selectedClass: {
74
+ type: StringConstructor;
75
+ default: string;
76
+ };
19
77
  }>>, {
78
+ contentClass: string;
20
79
  as: string;
21
80
  unstyled: boolean;
81
+ leftClass: string;
82
+ titleClass: string;
83
+ subtitleClass: string;
84
+ bottomClass: string;
85
+ rightClass: string;
86
+ selectedClass: string;
22
87
  }>;
23
88
  export default _default;
24
89
  //# sourceMappingURL=item_layout.vue.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"item_layout.vue.d.ts","sourceRoot":"","sources":["../../../../components/item_layout/item_layout.vue"],"names":[],"mappings":"AAkEA;"}
1
+ {"version":3,"file":"item_layout.vue.d.ts","sourceRoot":"","sources":["../../../../components/item_layout/item_layout.vue"],"names":[],"mappings":"AAmEA;"}
@@ -30,28 +30,7 @@ declare const _default: import('vue').DefineComponent<{
30
30
  injected: boolean;
31
31
  mouseHighlighted: boolean;
32
32
  }, {
33
- listItemType(): import('vue').DefineComponent<{
34
- as: {
35
- type: StringConstructor;
36
- default: string;
37
- };
38
- unstyled: {
39
- type: BooleanConstructor;
40
- default: boolean;
41
- };
42
- }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, Readonly<import('vue').ExtractPropTypes<{
43
- as: {
44
- type: StringConstructor;
45
- default: string;
46
- };
47
- unstyled: {
48
- type: BooleanConstructor;
49
- default: boolean;
50
- };
51
- }>>, {
52
- as: string;
53
- unstyled: boolean;
54
- }> | null;
33
+ isDefaultType(): boolean;
55
34
  listItemListeners(): {
56
35
  keydown: (event: any) => void;
57
36
  mousemove: (event: any) => void;
@@ -1 +1 @@
1
- {"version":3,"file":"list_item.vue.d.ts","sourceRoot":"","sources":["../../../../components/list_item/list_item.vue"],"names":[],"mappings":"AAuCA;"}
1
+ {"version":3,"file":"list_item.vue.d.ts","sourceRoot":"","sources":["../../../../components/list_item/list_item.vue"],"names":[],"mappings":"AA6CA;"}
@@ -1 +1 @@
1
- {"version":3,"file":"MentionSuggestion.vue.d.ts","sourceRoot":"","sources":["../../../../../../components/rich_text_editor/extensions/mentions/MentionSuggestion.vue"],"names":[],"mappings":"AAgBA;"}
1
+ {"version":3,"file":"MentionSuggestion.vue.d.ts","sourceRoot":"","sources":["../../../../../../components/rich_text_editor/extensions/mentions/MentionSuggestion.vue"],"names":[],"mappings":"AAiBA;"}
@@ -1 +1 @@
1
- {"version":3,"file":"SuggestionList.vue.d.ts","sourceRoot":"","sources":["../../../../../../components/rich_text_editor/extensions/suggestion/SuggestionList.vue"],"names":[],"mappings":"AA0BA;"}
1
+ {"version":3,"file":"SuggestionList.vue.d.ts","sourceRoot":"","sources":["../../../../../../components/rich_text_editor/extensions/suggestion/SuggestionList.vue"],"names":[],"mappings":"AA2BA;"}
@@ -82,6 +82,10 @@ declare const _default: import('vue').DefineComponent<{
82
82
  type: BooleanConstructor;
83
83
  default: boolean;
84
84
  };
85
+ allowCode: {
86
+ type: BooleanConstructor;
87
+ default: boolean;
88
+ };
85
89
  allowCodeblock: {
86
90
  type: BooleanConstructor;
87
91
  default: boolean;
@@ -94,8 +98,16 @@ declare const _default: import('vue').DefineComponent<{
94
98
  type: ArrayConstructor;
95
99
  default: () => never[];
96
100
  };
101
+ hideLinkBubbleMenu: {
102
+ type: BooleanConstructor;
103
+ default: boolean;
104
+ };
97
105
  }, {}, {
98
106
  editor: null;
107
+ tippyOptions: {
108
+ appendTo: () => any;
109
+ placement: string;
110
+ };
99
111
  }, {
100
112
  editorListeners(): {
101
113
  input: () => void;
@@ -110,14 +122,28 @@ declare const _default: import('vue').DefineComponent<{
110
122
  };
111
123
  }, {
112
124
  createEditor(): void;
125
+ bubbleMenuShouldShow({ editor, view, state, oldState, from, to }: {
126
+ editor: any;
127
+ view: any;
128
+ state: any;
129
+ oldState: any;
130
+ from: any;
131
+ to: any;
132
+ }): any;
133
+ getSelectedLinkText(editor: any): any;
134
+ editLink(): void;
135
+ removeLink(): void;
136
+ openLink(): void;
137
+ setLink(linkInput: any, linkText: any, linkOptions: any, linkProtocols: string[] | undefined, defaultPrefix: any): void;
113
138
  processValue(newValue: any, returnIfEqual?: boolean): void;
114
139
  destroyEditor(): void;
140
+ triggerInputChangeEvents(): void;
115
141
  addEditorListeners(): void;
116
142
  getOutput(): any;
117
143
  getExtension(extension: any, options: any): any;
118
144
  updateEditorAttributes(attributes: any): void;
119
145
  focusEditor(): void;
120
- }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("input" | "focus" | "enter" | "blur" | "update:value")[], string, Readonly<import('vue').ExtractPropTypes<{
146
+ }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("input" | "focus" | "selected" | "enter" | "blur" | "json-input" | "html-input" | "text-input" | "update:value" | "edit-link")[], string, Readonly<import('vue').ExtractPropTypes<{
121
147
  value: {
122
148
  type: (ObjectConstructor | StringConstructor)[];
123
149
  default: string;
@@ -200,6 +226,10 @@ declare const _default: import('vue').DefineComponent<{
200
226
  type: BooleanConstructor;
201
227
  default: boolean;
202
228
  };
229
+ allowCode: {
230
+ type: BooleanConstructor;
231
+ default: boolean;
232
+ };
203
233
  allowCodeblock: {
204
234
  type: BooleanConstructor;
205
235
  default: boolean;
@@ -212,6 +242,10 @@ declare const _default: import('vue').DefineComponent<{
212
242
  type: ArrayConstructor;
213
243
  default: () => never[];
214
244
  };
245
+ hideLinkBubbleMenu: {
246
+ type: BooleanConstructor;
247
+ default: boolean;
248
+ };
215
249
  }>>, {
216
250
  link: boolean | Record<string, any>;
217
251
  value: string | Record<string, any>;
@@ -232,9 +266,11 @@ declare const _default: import('vue').DefineComponent<{
232
266
  allowItalic: boolean;
233
267
  allowStrike: boolean;
234
268
  allowUnderline: boolean;
269
+ allowCode: boolean;
235
270
  allowCodeblock: boolean;
236
271
  allowInlineImages: boolean;
237
272
  additionalExtensions: unknown[];
273
+ hideLinkBubbleMenu: boolean;
238
274
  }>;
239
275
  export default _default;
240
276
  //# sourceMappingURL=rich_text_editor.vue.d.ts.map