@dialpad/dialtone-vue 3.223.0-next.2 → 3.223.0-next.4

package/dist/lib/combobox-with-popover/combobox-with-popover.js

@@ -1,27 +1,28 @@
 import { COMPONENT_SIZES as e } from "../../common/constants/sizes.js";
 import { HTML_ELEMENT_TYPE as t } from "../../common/constants/index.js";
-import { getUniqueString as n, hasSlotContent as r } from "../../common/utils/index.js";
-import { t as i } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { t as a } from "../../mode_constants-tb7TL85q.js";
-import o from "../combobox/combobox-loading-list.js";
-import s from "../combobox/combobox-empty-list.js";
-import { t as c } from "../../Combobox-By01ETlj.js";
-import { COMBOBOX_LABEL_SIZES as l } from "../combobox/combobox-constants.js";
-import { POPOVER_APPEND_TO_VALUES as u, POPOVER_CONTENT_WIDTHS as d } from "../popover/popover-constants.js";
-import f from "../popover/popover.js";
-import { DROPDOWN_PADDING_CLASSES as p } from "../dropdown/dropdown-constants.js";
-import { createBlock as m, createElementVNode as h, createSlots as g, createVNode as _, mergeProps as v, normalizeClass as y, normalizeProps as b, openBlock as x, renderSlot as S, resolveComponent as C, withCtx as w, withKeys as T } from "vue";
+import { ordinalSizeValidator as n } from "../../common/validators/index.js";
+import { getUniqueString as r, hasSlotContent as i } from "../../common/utils/index.js";
+import { t as a } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as o } from "../../mode_constants-tb7TL85q.js";
+import s from "../combobox/combobox-loading-list.js";
+import c from "../combobox/combobox-empty-list.js";
+import { t as l } from "../../Combobox-D8nQeBIf.js";
+import { COMBOBOX_LABEL_SIZES as u } from "../combobox/combobox-constants.js";
+import { POPOVER_APPEND_TO_VALUES as d, POPOVER_CONTENT_WIDTHS as f } from "../popover/popover-constants.js";
+import p from "../popover/popover.js";
+import { DROPDOWN_PADDING_CLASSES as m } from "../dropdown/dropdown-constants.js";
+import { createBlock as h, createElementVNode as g, createSlots as _, createVNode as v, mergeProps as y, normalizeClass as b, normalizeProps as x, openBlock as S, renderSlot as C, resolveComponent as w, withCtx as T, withKeys as E } from "vue";
 //#region components/ComboboxWithPopover/ComboboxWithPopover.vue
-var E = {
+var D = {
 	name: "DtComboboxWithPopover",
 	components: {
-		DtCombobox: c,
-		DtPopover: f,
-		ComboboxLoadingList: o,
-		ComboboxEmptyList: s
+		DtCombobox: l,
+		DtPopover: p,
+		ComboboxLoadingList: s,
+		ComboboxEmptyList: c
 	},
 	props: {
-		contentMode: a,
+		contentMode: o,
 		label: {
 			type: String,
 			required: !0
@@ -33,7 +34,7 @@ var E = {
 		size: {
 			type: [String, Number],
 			default: null,
-			validator: (t) => t === null || Object.values(l).includes(t) || Object.keys(e).includes(String(t))
+			validator: (t) => t === null || Object.values(u).includes(t) || n(e)(t)
 		},
 		description: {
 			type: String,
@@ -46,7 +47,7 @@ var E = {
 		listId: {
 			type: String,
 			default() {
-				return n();
+				return r();
 			}
 		},
 		listClass: {
@@ -100,12 +101,12 @@ var E = {
 		padding: {
 			type: String,
 			default: "small",
-			validator: (e) => Object.keys(p).some((t) => t === e)
+			validator: (e) => Object.keys(m).some((t) => t === e)
 		},
 		contentWidth: {
 			type: String,
 			default: null,
-			validator: (e) => d.includes(e)
+			validator: (e) => f.includes(e)
 		},
 		openWithArrowKeys: {
 			type: Boolean,
@@ -138,7 +139,7 @@ var E = {
 		appendTo: {
 			type: [t, String],
 			default: "body",
-			validator: (e) => u.includes(e) || e instanceof HTMLElement
+			validator: (e) => d.includes(e) || e instanceof HTMLElement
 		},
 		transition: {
 			type: String,
@@ -153,12 +154,12 @@ var E = {
 	],
 	data() {
 		return {
-			DROPDOWN_PADDING_CLASSES: p,
+			DROPDOWN_PADDING_CLASSES: m,
 			isListShown: !1,
 			isInputFocused: !1,
 			isListFocused: !1,
-			externalAnchor: n(),
-			hasSlotContent: r
+			externalAnchor: r(),
+			hasSlotContent: i
 		};
 	},
 	computed: { comboboxListeners() {
@@ -213,10 +214,10 @@ var E = {
 			this.showList !== null || this.isListShown || !this.openWithArrowKeys || this.showComboboxList();
 		}
 	}
-}, D = ["id"], O = ["onMouseleave", "onFocusout"];
-function k(e, t, n, r, i, a) {
-	let o = C("combobox-loading-list"), s = C("combobox-empty-list"), c = C("dt-popover"), l = C("dt-combobox");
-	return x(), m(l, v({
+}, O = ["id"], k = ["onMouseleave", "onFocusout"];
+function A(e, t, n, r, i, a) {
+	let o = w("combobox-loading-list"), s = w("combobox-empty-list"), c = w("dt-popover"), l = w("dt-combobox");
+	return S(), h(l, y({
 		ref: "combobox",
 		loading: n.loading,
 		label: n.label,
@@ -232,16 +233,16 @@ function k(e, t, n, r, i, a) {
 		"list-id": n.listId,
 		"data-qa": "dt-combobox"
 	}, a.comboboxListeners), {
-		input: w(({ inputProps: n }) => [h("div", {
+		input: T(({ inputProps: n }) => [g("div", {
 			id: i.externalAnchor,
 			ref: "input",
 			onFocusin: t[0] || (t[0] = (...e) => a.onFocusIn && a.onFocusIn(...e)),
-			onKeydown: [t[1] || (t[1] = T((e) => a.openOnArrowKeyPress(e), ["up"])), t[2] || (t[2] = T((e) => a.openOnArrowKeyPress(e), ["down"]))]
-		}, [S(e.$slots, "input", {
+			onKeydown: [t[1] || (t[1] = E((e) => a.openOnArrowKeyPress(e), ["up"])), t[2] || (t[2] = E((e) => a.openOnArrowKeyPress(e), ["down"]))]
+		}, [C(e.$slots, "input", {
 			inputProps: n,
 			onInput: a.handleDisplayList
-		})], 40, D)]),
-		list: w(({ opened: r, listProps: a, clearHighlightIndex: l }) => [_(c, {
+		})], 40, O)]),
+		list: T(({ opened: r, listProps: a, clearHighlightIndex: l }) => [v(c, {
 			ref: "popover",
 			open: i.isListShown,
 			"onUpdate:open": t[3] || (t[3] = (e) => i.isListShown = e),
@@ -265,34 +266,34 @@ function k(e, t, n, r, i, a) {
 			"dialog-class": n.dialogClass,
 			transition: n.transition,
 			onOpened: r
-		}, g({
-			content: w(() => [h("div", {
+		}, _({
+			content: T(() => [g("div", {
 				ref: "listWrapper",
-				class: y([
+				class: b([
 					"d-recipe-combobox-with-popover__list",
 					i.DROPDOWN_PADDING_CLASSES[n.padding],
 					n.listClass
 				]),
 				onMouseleave: l,
 				onFocusout: l
-			}, [n.loading ? (x(), m(o, b(v({ key: 0 }, a)), null, 16)) : n.emptyList && n.emptyStateMessage ? (x(), m(s, v({ key: 1 }, a, { message: n.emptyStateMessage }), null, 16, ["message"])) : S(e.$slots, "list", {
+			}, [n.loading ? (S(), h(o, x(y({ key: 0 }, a)), null, 16)) : n.emptyList && n.emptyStateMessage ? (S(), h(s, y({ key: 1 }, a, { message: n.emptyStateMessage }), null, 16, ["message"])) : C(e.$slots, "list", {
 				key: 2,
 				listProps: a
-			})], 42, O)]),
+			})], 42, k)]),
 			_: 2
 		}, [i.hasSlotContent(e.$slots.header) ? {
 			name: "headerContent",
-			fn: w(() => [h("div", {
+			fn: T(() => [g("div", {
 				ref: "header",
-				class: y(n.headerClass)
-			}, [S(e.$slots, "header")], 2)]),
+				class: b(n.headerClass)
+			}, [C(e.$slots, "header")], 2)]),
 			key: "0"
 		} : void 0, i.hasSlotContent(e.$slots.footer) ? {
 			name: "footerContent",
-			fn: w(() => [h("div", {
+			fn: T(() => [g("div", {
 				ref: "footer",
-				class: y(n.footerClass)
-			}, [S(e.$slots, "footer")], 2)]),
+				class: b(n.footerClass)
+			}, [C(e.$slots, "footer")], 2)]),
 			key: "1"
 		} : void 0]), 1032, [
 			"open",
@@ -323,8 +324,8 @@ function k(e, t, n, r, i, a) {
 		"list-id"
 	]);
 }
-var A = /* @__PURE__ */ i(E, [["render", k]]);
+var j = /* @__PURE__ */ a(D, [["render", A]]);
 //#endregion
-export { A as default };
+export { j as default };
 
 //# sourceMappingURL=combobox-with-popover.js.map

package/dist/lib/combobox-with-popover/combobox-with-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-with-popover.js","names":[],"sources":["../../../components/ComboboxWithPopover/ComboboxWithPopover.vue"],"sourcesContent":["<template>\n  <dt-combobox\n    ref=\"combobox\"\n    :loading=\"loading\"\n    :label=\"label\"\n    :show-label=\"showLabel\"\n    :size=\"size\"\n    :description=\"description\"\n    :empty-list=\"emptyList\"\n    :empty-state-message=\"emptyStateMessage\"\n    :show-list=\"isListShown\"\n    :on-beginning-of-list=\"onBeginningOfList\"\n    :on-end-of-list=\"onEndOfList\"\n    :list-rendered-outside=\"true\"\n    :list-id=\"listId\"\n    data-qa=\"dt-combobox\"\n    v-bind=\"comboboxListeners\"\n  >\n    <template\n      #input=\"{ inputProps }\"\n    >\n      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n      <div\n        :id=\"externalAnchor\"\n        ref=\"input\"\n        @focusin=\"onFocusIn\"\n        @keydown.up=\"openOnArrowKeyPress($event)\"\n        @keydown.down=\"openOnArrowKeyPress($event)\"\n      >\n        <slot\n          name=\"input\"\n          :input-props=\"inputProps\"\n          :on-input=\"handleDisplayList\"\n        />\n      </div>\n    </template>\n    <template #list=\"{ opened, listProps, clearHighlightIndex }\">\n      <dt-popover\n        ref=\"popover\"\n        v-model:open=\"isListShown\"\n        :close-on-click=\"false\"\n        :max-height=\"maxHeight\"\n        :max-width=\"maxWidth\"\n        :offset=\"popoverOffset\"\n        :sticky=\"popoverSticky\"\n        :content-mode=\"contentMode\"\n        placement=\"bottom-start\"\n        initial-focus-element=\"none\"\n        padding=\"none\"\n        role=\"listbox\"\n        :external-anchor=\"externalAnchor\"\n        :content-width=\"contentWidth\"\n        :content-appear=\"true\"\n        :content-tabindex=\"null\"\n        :modal=\"false\"\n        :auto-focus=\"false\"\n        :append-to=\"appendTo\"\n        :dialog-class=\"dialogClass\"\n        :transition=\"transition\"\n        @opened=\"opened\"\n      >\n        <template\n          v-if=\"hasSlotContent($slots.header)\"\n          #headerContent\n        >\n          <div\n            ref=\"header\"\n            :class=\"headerClass\"\n          >\n            <slot name=\"header\" />\n          </div>\n        </template>\n\n        <template #content>\n          <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n          <div\n            ref=\"listWrapper\"\n            :class=\"[\n              'd-recipe-combobox-with-popover__list',\n              DROPDOWN_PADDING_CLASSES[padding],\n              listClass,\n            ]\"\n            @mouseleave=\"clearHighlightIndex\"\n            @focusout=\"clearHighlightIndex\"\n          >\n            <combobox-loading-list\n              v-if=\"loading\"\n              v-bind=\"listProps\"\n            />\n            <combobox-empty-list\n              v-else-if=\"emptyList && emptyStateMessage\"\n              v-bind=\"listProps\"\n              :message=\"emptyStateMessage\"\n            />\n            <slot\n              v-else\n              name=\"list\"\n              :list-props=\"listProps\"\n            />\n          </div>\n        </template>\n\n        <template\n          v-if=\"hasSlotContent($slots.footer)\"\n          #footerContent\n        >\n          <div\n            ref=\"footer\"\n            :class=\"footerClass\"\n          >\n            <slot name=\"footer\" />\n          </div>\n        </template>\n      </dt-popover>\n    </template>\n  </dt-combobox>\n</template>\n\n<script>\nimport ComboboxLoadingList from '@/components/Combobox/ComboboxLoadingList.vue';\nimport ComboboxEmptyList from '@/components/Combobox/ComboboxEmptyList.vue';\nimport { DtCombobox, COMBOBOX_LABEL_SIZES } from '@/components/Combobox';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_CONTENT_WIDTHS } from '@/components/Popover';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { COMPONENT_SIZES, HTML_ELEMENT_TYPE } from '@/common/constants';\nimport { DROPDOWN_PADDING_CLASSES } from '@/components/Dropdown';\nimport { CONTENT_MODE_PROP } from '@/common/mode_constants';\n\nexport default {\n  name: 'DtComboboxWithPopover',\n\n  components: {\n    DtCombobox,\n    DtPopover,\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  props: {\n    /**\n     * Applies a color mode to the positioned content element.\n     * @values light, dark, invert\n     */\n    contentMode: CONTENT_MODE_PROP,\n\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    showLabel: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the input.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: null,\n      validator: (t) => t === null\n        || Object.values(COMBOBOX_LABEL_SIZES).includes(t)\n        || Object.keys(COMPONENT_SIZES).includes(String(t)),\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Sets an ID on the list element of the component. Used by several aria attributes\n     * as well as when deriving the IDs for each item.\n     */\n    listId: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class for the header wrapper element.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class for the footer wrapper element.\n     */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class for the popover dialog element.\n     */\n    dialogClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A method that will be called when the selection goes past the beginning of the list.\n     */\n    onBeginningOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * A method that will be called when the selection goes past the end of the list.\n     */\n    onEndOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    maxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Vertical padding size around the list element.\n     */\n    padding: {\n      type: String,\n      default: 'small',\n      validator: (padding) => {\n        return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Width configuration for the popover content. When its value is 'anchor',\n     * the popover content will have the same width as the anchor.\n     */\n    contentWidth: {\n      type: String,\n      default: null,\n      validator: contentWidth => POPOVER_CONTENT_WIDTHS.includes(contentWidth),\n    },\n\n    /**\n     * If the list should be shown by pressing up or down arrow key on the input element.\n     * This can be set when not passing showList prop.\n     */\n    openWithArrowKeys: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the popover content box from its anchor element\n     *  by the specified number of pixels.\n     */\n    popoverOffset: {\n      type: Array,\n      default: () => [0, 4],\n    },\n\n    /**\n     * If the popover sticks to the input.\n     */\n    popoverSticky: {\n      type: [Boolean, String],\n      default: false,\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.\n     */\n    emptyList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Message to show when the list is empty\n     */\n    emptyStateMessage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTML_ELEMENT_TYPE, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when 'escape' key is pressed\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when an item is highlighted\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Emitted when items are shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      DROPDOWN_PADDING_CLASSES,\n      isListShown: false,\n      isInputFocused: false,\n      isListFocused: false,\n      externalAnchor: getUniqueString(),\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    comboboxListeners () {\n      return {\n        ...this.$attrs,\n\n        onSelect: this.onSelect,\n\n        onEscape: this.onEscape,\n\n        onHighlight: this.onHighlight,\n      };\n    },\n  },\n\n  watch: {\n    showList: {\n      handler: function (show) {\n        if (show !== null) {\n          this.isListShown = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isListShown (val) {\n      if (val) {\n        window.addEventListener('mousedown', this.onFocusOut);\n      } else {\n        window.removeEventListener('mousedown', this.onFocusOut);\n      }\n      this.onOpened(val);\n    },\n  },\n\n  methods: {\n    handleDisplayList (value) {\n      if (!this.hasSuggestionList && value) { this.showComboboxList(); }\n      if (!this.hasSuggestionList && !value) { this.closeComboboxList(); }\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = true;\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = false;\n    },\n\n    onSelect (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('select', highlightIndex);\n      if (!this.hasSuggestionList) {\n        // we don't display the list before the user has typed anything\n        this.closeComboboxList();\n      }\n    },\n\n    onEscape () {\n      this.$emit('escape');\n      this.closeComboboxList();\n    },\n\n    onHighlight (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('highlight', highlightIndex);\n    },\n\n    onOpened (opened) {\n      this.$emit('opened', opened);\n    },\n\n    onFocusIn (e) {\n      if (this.hasSuggestionList && e && this.$refs.input?.querySelector('input') === e.target) {\n        // only trigger if we show suggestion list when focused, and\n        // it's the input specifically that was focused\n        this.showComboboxList();\n      }\n    },\n\n    onFocusOut (e) {\n      // Check if the focus change was to another target within the combobox component\n      const popoverEl = this.$refs.popover?.tip?.popper;\n      const comboboxEl = this.$refs.input;\n\n      if (e.composedPath()?.some(el => [popoverEl, comboboxEl].includes(el))) return;\n\n      // If outside the combobox then close\n      this.closeComboboxList();\n    },\n\n    openOnArrowKeyPress () {\n      if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) { return; }\n\n      this.showComboboxList();\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"combobox-with-popover.js","names":[],"sources":["../../../components/ComboboxWithPopover/ComboboxWithPopover.vue"],"sourcesContent":["<template>\n  <dt-combobox\n    ref=\"combobox\"\n    :loading=\"loading\"\n    :label=\"label\"\n    :show-label=\"showLabel\"\n    :size=\"size\"\n    :description=\"description\"\n    :empty-list=\"emptyList\"\n    :empty-state-message=\"emptyStateMessage\"\n    :show-list=\"isListShown\"\n    :on-beginning-of-list=\"onBeginningOfList\"\n    :on-end-of-list=\"onEndOfList\"\n    :list-rendered-outside=\"true\"\n    :list-id=\"listId\"\n    data-qa=\"dt-combobox\"\n    v-bind=\"comboboxListeners\"\n  >\n    <template\n      #input=\"{ inputProps }\"\n    >\n      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n      <div\n        :id=\"externalAnchor\"\n        ref=\"input\"\n        @focusin=\"onFocusIn\"\n        @keydown.up=\"openOnArrowKeyPress($event)\"\n        @keydown.down=\"openOnArrowKeyPress($event)\"\n      >\n        <slot\n          name=\"input\"\n          :input-props=\"inputProps\"\n          :on-input=\"handleDisplayList\"\n        />\n      </div>\n    </template>\n    <template #list=\"{ opened, listProps, clearHighlightIndex }\">\n      <dt-popover\n        ref=\"popover\"\n        v-model:open=\"isListShown\"\n        :close-on-click=\"false\"\n        :max-height=\"maxHeight\"\n        :max-width=\"maxWidth\"\n        :offset=\"popoverOffset\"\n        :sticky=\"popoverSticky\"\n        :content-mode=\"contentMode\"\n        placement=\"bottom-start\"\n        initial-focus-element=\"none\"\n        padding=\"none\"\n        role=\"listbox\"\n        :external-anchor=\"externalAnchor\"\n        :content-width=\"contentWidth\"\n        :content-appear=\"true\"\n        :content-tabindex=\"null\"\n        :modal=\"false\"\n        :auto-focus=\"false\"\n        :append-to=\"appendTo\"\n        :dialog-class=\"dialogClass\"\n        :transition=\"transition\"\n        @opened=\"opened\"\n      >\n        <template\n          v-if=\"hasSlotContent($slots.header)\"\n          #headerContent\n        >\n          <div\n            ref=\"header\"\n            :class=\"headerClass\"\n          >\n            <slot name=\"header\" />\n          </div>\n        </template>\n\n        <template #content>\n          <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n          <div\n            ref=\"listWrapper\"\n            :class=\"[\n              'd-recipe-combobox-with-popover__list',\n              DROPDOWN_PADDING_CLASSES[padding],\n              listClass,\n            ]\"\n            @mouseleave=\"clearHighlightIndex\"\n            @focusout=\"clearHighlightIndex\"\n          >\n            <combobox-loading-list\n              v-if=\"loading\"\n              v-bind=\"listProps\"\n            />\n            <combobox-empty-list\n              v-else-if=\"emptyList && emptyStateMessage\"\n              v-bind=\"listProps\"\n              :message=\"emptyStateMessage\"\n            />\n            <slot\n              v-else\n              name=\"list\"\n              :list-props=\"listProps\"\n            />\n          </div>\n        </template>\n\n        <template\n          v-if=\"hasSlotContent($slots.footer)\"\n          #footerContent\n        >\n          <div\n            ref=\"footer\"\n            :class=\"footerClass\"\n          >\n            <slot name=\"footer\" />\n          </div>\n        </template>\n      </dt-popover>\n    </template>\n  </dt-combobox>\n</template>\n\n<script>\nimport ComboboxLoadingList from '@/components/Combobox/ComboboxLoadingList.vue';\nimport ComboboxEmptyList from '@/components/Combobox/ComboboxEmptyList.vue';\nimport { DtCombobox, COMBOBOX_LABEL_SIZES } from '@/components/Combobox';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_CONTENT_WIDTHS } from '@/components/Popover';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { COMPONENT_SIZES, HTML_ELEMENT_TYPE } from '@/common/constants';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport { DROPDOWN_PADDING_CLASSES } from '@/components/Dropdown';\nimport { CONTENT_MODE_PROP } from '@/common/mode_constants';\n\nexport default {\n  name: 'DtComboboxWithPopover',\n\n  components: {\n    DtCombobox,\n    DtPopover,\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  props: {\n    /**\n     * Applies a color mode to the positioned content element.\n     * @values light, dark, invert\n     */\n    contentMode: CONTENT_MODE_PROP,\n\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    showLabel: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the input.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: null,\n      validator: (t) => t === null\n        || Object.values(COMBOBOX_LABEL_SIZES).includes(t)\n        || ordinalSizeValidator(COMPONENT_SIZES)(t),\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Sets an ID on the list element of the component. Used by several aria attributes\n     * as well as when deriving the IDs for each item.\n     */\n    listId: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class for the header wrapper element.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class for the footer wrapper element.\n     */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class for the popover dialog element.\n     */\n    dialogClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A method that will be called when the selection goes past the beginning of the list.\n     */\n    onBeginningOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * A method that will be called when the selection goes past the end of the list.\n     */\n    onEndOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    maxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Vertical padding size around the list element.\n     */\n    padding: {\n      type: String,\n      default: 'small',\n      validator: (padding) => {\n        return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Width configuration for the popover content. When its value is 'anchor',\n     * the popover content will have the same width as the anchor.\n     */\n    contentWidth: {\n      type: String,\n      default: null,\n      validator: contentWidth => POPOVER_CONTENT_WIDTHS.includes(contentWidth),\n    },\n\n    /**\n     * If the list should be shown by pressing up or down arrow key on the input element.\n     * This can be set when not passing showList prop.\n     */\n    openWithArrowKeys: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the popover content box from its anchor element\n     *  by the specified number of pixels.\n     */\n    popoverOffset: {\n      type: Array,\n      default: () => [0, 4],\n    },\n\n    /**\n     * If the popover sticks to the input.\n     */\n    popoverSticky: {\n      type: [Boolean, String],\n      default: false,\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.\n     */\n    emptyList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Message to show when the list is empty\n     */\n    emptyStateMessage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTML_ELEMENT_TYPE, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when 'escape' key is pressed\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when an item is highlighted\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Emitted when items are shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      DROPDOWN_PADDING_CLASSES,\n      isListShown: false,\n      isInputFocused: false,\n      isListFocused: false,\n      externalAnchor: getUniqueString(),\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    comboboxListeners () {\n      return {\n        ...this.$attrs,\n\n        onSelect: this.onSelect,\n\n        onEscape: this.onEscape,\n\n        onHighlight: this.onHighlight,\n      };\n    },\n  },\n\n  watch: {\n    showList: {\n      handler: function (show) {\n        if (show !== null) {\n          this.isListShown = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isListShown (val) {\n      if (val) {\n        window.addEventListener('mousedown', this.onFocusOut);\n      } else {\n        window.removeEventListener('mousedown', this.onFocusOut);\n      }\n      this.onOpened(val);\n    },\n  },\n\n  methods: {\n    handleDisplayList (value) {\n      if (!this.hasSuggestionList && value) { this.showComboboxList(); }\n      if (!this.hasSuggestionList && !value) { this.closeComboboxList(); }\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = true;\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = false;\n    },\n\n    onSelect (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('select', highlightIndex);\n      if (!this.hasSuggestionList) {\n        // we don't display the list before the user has typed anything\n        this.closeComboboxList();\n      }\n    },\n\n    onEscape () {\n      this.$emit('escape');\n      this.closeComboboxList();\n    },\n\n    onHighlight (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('highlight', highlightIndex);\n    },\n\n    onOpened (opened) {\n      this.$emit('opened', opened);\n    },\n\n    onFocusIn (e) {\n      if (this.hasSuggestionList && e && this.$refs.input?.querySelector('input') === e.target) {\n        // only trigger if we show suggestion list when focused, and\n        // it's the input specifically that was focused\n        this.showComboboxList();\n      }\n    },\n\n    onFocusOut (e) {\n      // Check if the focus change was to another target within the combobox component\n      const popoverEl = this.$refs.popover?.tip?.popper;\n      const comboboxEl = this.$refs.input;\n\n      if (e.composedPath()?.some(el => [popoverEl, comboboxEl].includes(el))) return;\n\n      // If outside the combobox then close\n      this.closeComboboxList();\n    },\n\n    openOnArrowKeyPress () {\n      if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) { return; }\n\n      this.showComboboxList();\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/editor/editor.cjs

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

package/dist/lib/editor/editor.js

@@ -3,14 +3,14 @@ import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
 import { DialtoneLocalization as n } from "../../localization/index.js";
 import r from "../button/button.js";
 import i from "../list-item/list-item.js";
-import { t as a } from "../../Combobox-By01ETlj.js";
+import { t as a } from "../../Combobox-D8nQeBIf.js";
 import o from "../stack/stack.js";
 import s from "../tooltip/tooltip.js";
 import c from "../popover/popover.js";
 import l from "../dropdown/dropdown-separator.js";
 import u from "../input/input.js";
 import d from "../list-item-group/list-item-group.js";
-import { t as f } from "../../RichTextEditor-D8Kas5A3.js";
+import { t as f } from "../../RichTextEditor-DxbZSRop.js";
 import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as p, RICH_TEXT_EDITOR_OUTPUT_FORMATS as m } from "../rich-text-editor/rich-text-editor-constants.js";
 import { EDITOR_DEFAULT_FONT_COLOR as h, EDITOR_DEFAULT_LINK_PREFIX as g, EDITOR_SUPPORTED_LINK_PROTOCOLS as _ } from "./editor-constants.js";
 import v from "./editor-toolbar-button.js";

package/dist/lib/emoji/emoji.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../../common/emoji/index.cjs`),n=require(`../icon/icon-constants.cjs`),r=require(`../skeleton/skeleton.cjs`);let i=require(`vue`);var a={name:`DtEmoji`,components:{DtSkeleton:r.default},props:{code:{type:String,required:!0},size:{type:String,default:`500`,validator:e=>Object.keys(n.ICON_SIZE_MODIFIERS).includes(e)},imgClass:{type:[String,Object,Array],default:``},ariaLabel:{type:String,default:null},showSkeleton:{type:Boolean,default:!0}},data(){return{emojiData:null,imgLoading:!1}},computed:{emojiDataValid(){return!!this.emojiData},emojiSrc(){return this.emojiDataValid?this.emojiData?.custom?this.emojiData.image:[`100`,`200`].includes(this.size)?t.emojiImageUrlSmall+this.emojiData.key+t.emojiFileExtensionSmall:t.emojiImageUrlLarge+this.emojiData.key+t.emojiFileExtensionLarge:`invalid`},emojiAlt(){if(this.emojiDataValid)return this.emojiData.unicode_output?t.stringToUnicode(this.emojiData.unicode_output):this.emojiData.name},emojiLabel(){return this.emojiDataValid?this.ariaLabel?this.ariaLabel:this.emojiData.name:`Invalid Emoji`},emojiSize(){return n.ICON_SIZE_MODIFIERS[this.size]}},watch:{code:{handler:function(){this.getEmojiData()},immediate:!0},emojiSrc:{handler:async function(){this.imgLoading=!0},immediate:!0}},methods:{getEmojiData(){this.emojiData=t.codeToEmojiData(this.code)},imageLoaded(){this.imgLoading=!1},imageErrored(){this.imgLoading=!1}}},o=[`aria-label`,`alt`,`title`,`src`];function s(e,t,n,r,a,s){let c=(0,i.resolveComponent)(`dt-skeleton`);return(0,i.openBlock)(),(0,i.createElementBlock)(`span`,{class:(0,i.normalizeClass)([`d-emoji d-icon`,s.emojiSize])},[(0,i.withDirectives)((0,i.createVNode)(c,{offset:0,class:(0,i.normalizeClass)([`d-icon`,s.emojiSize]),"shape-option":{shape:`circle`,size:`100%`}},null,8,[`class`]),[[i.vShow,a.imgLoading&&n.showSkeleton]]),(0,i.withDirectives)((0,i.createElementVNode)(`img`,{ref:`emojiImg`,class:(0,i.normalizeClass)([`d-icon`,s.emojiSize,n.imgClass]),"aria-label":s.emojiLabel,alt:s.emojiAlt,title:s.emojiLabel,src:s.emojiSrc,onLoad:t[0]||(t[0]=(...e)=>s.imageLoaded&&s.imageLoaded(...e)),onError:t[1]||(t[1]=(...e)=>s.imageErrored&&s.imageErrored(...e))},null,42,o),[[i.vShow,!a.imgLoading]])],2)}var c=e.t(a,[[`render`,s]]);exports.default=c;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../common/emoji/index.cjs`),r=require(`../icon/icon-constants.cjs`),i=require(`../skeleton/skeleton.cjs`);let a=require(`vue`);var o={name:`DtEmoji`,components:{DtSkeleton:i.default},props:{code:{type:String,required:!0},size:{type:[String,Number],default:500,validator:e.ordinalSizeValidator(r.ICON_SIZE_MODIFIERS)},imgClass:{type:[String,Object,Array],default:``},ariaLabel:{type:String,default:null},showSkeleton:{type:Boolean,default:!0}},data(){return{emojiData:null,imgLoading:!1}},computed:{emojiDataValid(){return!!this.emojiData},emojiSrc(){return this.emojiDataValid?this.emojiData?.custom?this.emojiData.image:[`100`,`200`].includes(String(this.size))?n.emojiImageUrlSmall+this.emojiData.key+n.emojiFileExtensionSmall:n.emojiImageUrlLarge+this.emojiData.key+n.emojiFileExtensionLarge:`invalid`},emojiAlt(){if(this.emojiDataValid)return this.emojiData.unicode_output?n.stringToUnicode(this.emojiData.unicode_output):this.emojiData.name},emojiLabel(){return this.emojiDataValid?this.ariaLabel?this.ariaLabel:this.emojiData.name:`Invalid Emoji`},emojiSize(){return r.ICON_SIZE_MODIFIERS[this.size]}},watch:{code:{handler:function(){this.getEmojiData()},immediate:!0},emojiSrc:{handler:async function(){this.imgLoading=!0},immediate:!0}},methods:{getEmojiData(){this.emojiData=n.codeToEmojiData(this.code)},imageLoaded(){this.imgLoading=!1},imageErrored(){this.imgLoading=!1}}},s=[`aria-label`,`alt`,`title`,`src`];function c(e,t,n,r,i,o){let c=(0,a.resolveComponent)(`dt-skeleton`);return(0,a.openBlock)(),(0,a.createElementBlock)(`span`,{class:(0,a.normalizeClass)([`d-emoji d-icon`,o.emojiSize])},[(0,a.withDirectives)((0,a.createVNode)(c,{offset:0,class:(0,a.normalizeClass)([`d-icon`,o.emojiSize]),"shape-option":{shape:`circle`,size:`100%`}},null,8,[`class`]),[[a.vShow,i.imgLoading&&n.showSkeleton]]),(0,a.withDirectives)((0,a.createElementVNode)(`img`,{ref:`emojiImg`,class:(0,a.normalizeClass)([`d-icon`,o.emojiSize,n.imgClass]),"aria-label":o.emojiLabel,alt:o.emojiAlt,title:o.emojiLabel,src:o.emojiSrc,onLoad:t[0]||(t[0]=(...e)=>o.imageLoaded&&o.imageLoaded(...e)),onError:t[1]||(t[1]=(...e)=>o.imageErrored&&o.imageErrored(...e))},null,42,s),[[a.vShow,!i.imgLoading]])],2)}var l=t.t(o,[[`render`,c]]);exports.default=l;
 //# sourceMappingURL=emoji.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"emoji.cjs","names":[],"sources":["../../../components/Emoji/Emoji.vue"],"sourcesContent":["<template>\n  <span :class=\"['d-emoji d-icon', emojiSize]\">\n    <dt-skeleton\n      v-show=\"imgLoading && showSkeleton\"\n      :offset=\"0\"\n      :class=\"['d-icon', emojiSize]\"\n      :shape-option=\"{ shape: 'circle', size: '100%' }\"\n    />\n    <img\n      v-show=\"!imgLoading\"\n      ref=\"emojiImg\"\n      :class=\"['d-icon', emojiSize, imgClass]\"\n      :aria-label=\"emojiLabel\"\n      :alt=\"emojiAlt\"\n      :title=\"emojiLabel\"\n      :src=\"emojiSrc\"\n      @load=\"imageLoaded\"\n      @error=\"imageErrored\"\n    >\n  </span>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon';\nimport {\n  codeToEmojiData,\n  stringToUnicode,\n  emojiImageUrlSmall,\n  emojiFileExtensionSmall,\n  emojiImageUrlLarge,\n  emojiFileExtensionLarge,\n} from '@/common/emoji';\nimport { DtSkeleton } from '@/components/Skeleton';\n\n/**\n * Renders an emoji from a shortcode such as :smile: or unicode character such as 😄\n * @see https://dialtone.dialpad.com/components/emoji.html\n */\nexport default {\n  name: 'DtEmoji',\n\n  components: {\n    DtSkeleton,\n  },\n\n  props: {\n    /**\n     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.\n     * <a class=\"d-link\" href=\"https://emojipedia.org/joypixels/\" target=\"_blank\">JoyPixels</a>\n     * for all supported shortcode/unicode or the docs for setting up custom emojis.\n     */\n    code: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The size of the emoji. Can be any of the icon size utility classes from\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/icon.html\" target=\"_blank\"> Dialpad Icon Size</a>\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n\n    /**\n     * Additional class name for the emoji img element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    imgClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n\n     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will\n     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the\n     * getEmojiData() function\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Shows a skeleton loader while the emoji asset is loading.\n     * @values true, false\n     */\n    showSkeleton: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  data () {\n    return {\n      emojiData: null,\n      imgLoading: false,\n    };\n  },\n\n  computed: {\n    emojiDataValid () {\n      return !!this.emojiData;\n    },\n\n    emojiSrc () {\n      if (!this.emojiDataValid) { return 'invalid'; }\n\n      // custom emoji\n      if (this.emojiData?.custom) {\n        return this.emojiData.image;\n      }\n\n      if (['100', '200'].includes(this.size)) {\n        return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;\n      } else {\n        return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;\n      }\n    },\n\n    emojiAlt () {\n      if (!this.emojiDataValid) { return undefined; }\n      return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;\n    },\n\n    emojiLabel () {\n      if (!this.emojiDataValid) { return 'Invalid Emoji'; }\n      return this.ariaLabel ? this.ariaLabel : this.emojiData.name;\n    },\n\n    emojiSize () {\n      return ICON_SIZE_MODIFIERS[this.size];\n    },\n  },\n\n  watch: {\n    code: {\n      handler: function () {\n        this.getEmojiData();\n      },\n\n      immediate: true,\n    },\n\n    emojiSrc: {\n      handler: async function () {\n        this.imgLoading = true;\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    getEmojiData () {\n      this.emojiData = codeToEmojiData(this.code);\n    },\n\n    imageLoaded () {\n      this.imgLoading = false;\n    },\n\n    imageErrored () {\n      this.imgLoading = false;\n    },\n  },\n};\n</script>\n"],"mappings":"gVAsCA,IAAK,EAAU,CACb,KAAM,UAEN,WAAY,CACV,WAAA,EAAA,QACD,CAED,MAAO,CAML,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CAOD,KAAM,CACJ,KAAM,OACN,QAAS,MACT,UAAY,GAAM,OAAO,KAAK,EAAA,oBAAoB,CAAC,SAAS,EAAE,CAC/D,CAOD,SAAU,CACR,KAAM,CAAC,OAAQ,OAAQ,MAAM,CAC7B,QAAS,GACV,CAQD,UAAW,CACT,KAAM,OACN,QAAS,KACV,CAMD,aAAc,CACZ,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,UAAW,KACX,WAAY,GACb,EAGH,SAAU,CACR,gBAAkB,CAChB,MAAO,CAAC,CAAC,KAAK,WAGhB,UAAY,CAWR,OAVG,KAAK,eAGN,KAAK,WAAW,OACX,KAAK,UAAU,MAGpB,CAAC,MAAO,MAAM,CAAC,SAAS,KAAK,KAAK,CAC7B,EAAA,mBAAqB,KAAK,UAAU,IAAM,EAAA,wBAE1C,EAAA,mBAAqB,KAAK,UAAU,IAAM,EAAA,wBAVhB,WAcrC,UAAY,CACL,QAAK,eACV,OAAO,KAAK,UAAU,eAAiB,EAAA,gBAAgB,KAAK,UAAU,eAAc,CAAI,KAAK,UAAU,MAGzG,YAAc,CAEZ,OADK,KAAK,eACH,KAAK,UAAY,KAAK,UAAY,KAAK,UAAU,KADrB,iBAIrC,WAAa,CACX,OAAO,EAAA,oBAAoB,KAAK,OAEnC,CAED,MAAO,CACL,KAAM,CACJ,QAAS,UAAY,CACnB,KAAK,cAAc,EAGrB,UAAW,GACZ,CAED,SAAU,CACR,QAAS,gBAAkB,CACzB,KAAK,WAAa,IAGpB,UAAW,GACZ,CACF,CAED,QAAS,CACP,cAAgB,CACd,KAAK,UAAY,EAAA,gBAAgB,KAAK,KAAK,EAG7C,aAAe,CACb,KAAK,WAAa,IAGpB,cAAgB,CACd,KAAK,WAAa,IAErB,CACF,2JAxJQ,OAAA,CAlBA,OAAA,EAAA,EAAA,gBAAK,CAAA,iBAAqB,EAAA,UAAS,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,aAMtC,EAAA,CAHC,OAAQ,EACR,OAAA,EAAA,EAAA,gBAAK,CAAA,SAAa,EAAA,UAAS,CAAA,CAC3B,eAAc,CAAA,MAAA,SAAA,KAAA,OAAiC,8BAHxC,EAAA,YAAc,EAAA,aAAY,CAAA,CAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,oBAenC,MAAA,CARC,IAAI,WACH,OAAA,EAAA,EAAA,gBAAK,CAAA,SAAa,EAAA,UAAW,EAAA,SAAQ,CAAA,CACrC,aAAY,EAAA,WACZ,IAAK,EAAA,SACL,MAAO,EAAA,WACP,IAAK,EAAA,SACL,OAAI,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,aAAA,EAAA,YAAA,GAAA,EAAW,EACjB,QAAK,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,cAAA,EAAA,aAAA,GAAA,EAAY,yBARX,EAAA,WAAU,CAAA,CAAA,CAAA,CAAA,EAAA"}
+{"version":3,"file":"emoji.cjs","names":[],"sources":["../../../components/Emoji/Emoji.vue"],"sourcesContent":["<template>\n  <span :class=\"['d-emoji d-icon', emojiSize]\">\n    <dt-skeleton\n      v-show=\"imgLoading && showSkeleton\"\n      :offset=\"0\"\n      :class=\"['d-icon', emojiSize]\"\n      :shape-option=\"{ shape: 'circle', size: '100%' }\"\n    />\n    <img\n      v-show=\"!imgLoading\"\n      ref=\"emojiImg\"\n      :class=\"['d-icon', emojiSize, imgClass]\"\n      :aria-label=\"emojiLabel\"\n      :alt=\"emojiAlt\"\n      :title=\"emojiLabel\"\n      :src=\"emojiSrc\"\n      @load=\"imageLoaded\"\n      @error=\"imageErrored\"\n    >\n  </span>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport {\n  codeToEmojiData,\n  stringToUnicode,\n  emojiImageUrlSmall,\n  emojiFileExtensionSmall,\n  emojiImageUrlLarge,\n  emojiFileExtensionLarge,\n} from '@/common/emoji';\nimport { DtSkeleton } from '@/components/Skeleton';\n\n/**\n * Renders an emoji from a shortcode such as :smile: or unicode character such as 😄\n * @see https://dialtone.dialpad.com/components/emoji.html\n */\nexport default {\n  name: 'DtEmoji',\n\n  components: {\n    DtSkeleton,\n  },\n\n  props: {\n    /**\n     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.\n     * <a class=\"d-link\" href=\"https://emojipedia.org/joypixels/\" target=\"_blank\">JoyPixels</a>\n     * for all supported shortcode/unicode or the docs for setting up custom emojis.\n     */\n    code: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The size of the emoji. Can be any of the icon size utility classes from\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/icon.html\" target=\"_blank\"> Dialpad Icon Size</a>\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: [String, Number],\n      default: 500,\n      validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\n    },\n\n    /**\n     * Additional class name for the emoji img element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    imgClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n\n     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will\n     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the\n     * getEmojiData() function\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Shows a skeleton loader while the emoji asset is loading.\n     * @values true, false\n     */\n    showSkeleton: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  data () {\n    return {\n      emojiData: null,\n      imgLoading: false,\n    };\n  },\n\n  computed: {\n    emojiDataValid () {\n      return !!this.emojiData;\n    },\n\n    emojiSrc () {\n      if (!this.emojiDataValid) { return 'invalid'; }\n\n      // custom emoji\n      if (this.emojiData?.custom) {\n        return this.emojiData.image;\n      }\n\n      if (['100', '200'].includes(String(this.size))) {\n        return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;\n      } else {\n        return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;\n      }\n    },\n\n    emojiAlt () {\n      if (!this.emojiDataValid) { return undefined; }\n      return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;\n    },\n\n    emojiLabel () {\n      if (!this.emojiDataValid) { return 'Invalid Emoji'; }\n      return this.ariaLabel ? this.ariaLabel : this.emojiData.name;\n    },\n\n    emojiSize () {\n      return ICON_SIZE_MODIFIERS[this.size];\n    },\n  },\n\n  watch: {\n    code: {\n      handler: function () {\n        this.getEmojiData();\n      },\n\n      immediate: true,\n    },\n\n    emojiSrc: {\n      handler: async function () {\n        this.imgLoading = true;\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    getEmojiData () {\n      this.emojiData = codeToEmojiData(this.code);\n    },\n\n    imageLoaded () {\n      this.imgLoading = false;\n    },\n\n    imageErrored () {\n      this.imgLoading = false;\n    },\n  },\n};\n</script>\n"],"mappings":"+XAuCA,IAAK,EAAU,CACb,KAAM,UAEN,WAAY,CACV,WAAA,EAAA,QACD,CAED,MAAO,CAML,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CAOD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAW,EAAA,qBAAqB,EAAA,oBAAoB,CACrD,CAOD,SAAU,CACR,KAAM,CAAC,OAAQ,OAAQ,MAAM,CAC7B,QAAS,GACV,CAQD,UAAW,CACT,KAAM,OACN,QAAS,KACV,CAMD,aAAc,CACZ,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,UAAW,KACX,WAAY,GACb,EAGH,SAAU,CACR,gBAAkB,CAChB,MAAO,CAAC,CAAC,KAAK,WAGhB,UAAY,CAWR,OAVG,KAAK,eAGN,KAAK,WAAW,OACX,KAAK,UAAU,MAGpB,CAAC,MAAO,MAAM,CAAC,SAAS,OAAO,KAAK,KAAK,CAAC,CACrC,EAAA,mBAAqB,KAAK,UAAU,IAAM,EAAA,wBAE1C,EAAA,mBAAqB,KAAK,UAAU,IAAM,EAAA,wBAVhB,WAcrC,UAAY,CACL,QAAK,eACV,OAAO,KAAK,UAAU,eAAiB,EAAA,gBAAgB,KAAK,UAAU,eAAc,CAAI,KAAK,UAAU,MAGzG,YAAc,CAEZ,OADK,KAAK,eACH,KAAK,UAAY,KAAK,UAAY,KAAK,UAAU,KADrB,iBAIrC,WAAa,CACX,OAAO,EAAA,oBAAoB,KAAK,OAEnC,CAED,MAAO,CACL,KAAM,CACJ,QAAS,UAAY,CACnB,KAAK,cAAc,EAGrB,UAAW,GACZ,CAED,SAAU,CACR,QAAS,gBAAkB,CACzB,KAAK,WAAa,IAGpB,UAAW,GACZ,CACF,CAED,QAAS,CACP,cAAgB,CACd,KAAK,UAAY,EAAA,gBAAgB,KAAK,KAAK,EAG7C,aAAe,CACb,KAAK,WAAa,IAGpB,cAAgB,CACd,KAAK,WAAa,IAErB,CACF,2JAzJQ,OAAA,CAlBA,OAAA,EAAA,EAAA,gBAAK,CAAA,iBAAqB,EAAA,UAAS,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,aAMtC,EAAA,CAHC,OAAQ,EACR,OAAA,EAAA,EAAA,gBAAK,CAAA,SAAa,EAAA,UAAS,CAAA,CAC3B,eAAc,CAAA,MAAA,SAAA,KAAA,OAAiC,8BAHxC,EAAA,YAAc,EAAA,aAAY,CAAA,CAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,oBAenC,MAAA,CARC,IAAI,WACH,OAAA,EAAA,EAAA,gBAAK,CAAA,SAAa,EAAA,UAAW,EAAA,SAAQ,CAAA,CACrC,aAAY,EAAA,WACZ,IAAK,EAAA,SACL,MAAO,EAAA,WACP,IAAK,EAAA,SACL,OAAI,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,aAAA,EAAA,YAAA,GAAA,EAAW,EACjB,QAAK,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,cAAA,EAAA,aAAA,GAAA,EAAY,yBARX,EAAA,WAAU,CAAA,CAAA,CAAA,CAAA,EAAA"}

package/dist/lib/emoji/emoji.js

@@ -1,21 +1,22 @@
-import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { codeToEmojiData as t, emojiFileExtensionLarge as n, emojiFileExtensionSmall as r, emojiImageUrlLarge as i, emojiImageUrlSmall as a, stringToUnicode as o } from "../../common/emoji/index.js";
-import { ICON_SIZE_MODIFIERS as s } from "../icon/icon-constants.js";
-import c from "../skeleton/skeleton.js";
-import { createElementBlock as l, createElementVNode as u, createVNode as d, normalizeClass as f, openBlock as p, resolveComponent as m, vShow as h, withDirectives as g } from "vue";
+import { ordinalSizeValidator as e } from "../../common/validators/index.js";
+import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { codeToEmojiData as n, emojiFileExtensionLarge as r, emojiFileExtensionSmall as i, emojiImageUrlLarge as a, emojiImageUrlSmall as o, stringToUnicode as s } from "../../common/emoji/index.js";
+import { ICON_SIZE_MODIFIERS as c } from "../icon/icon-constants.js";
+import l from "../skeleton/skeleton.js";
+import { createElementBlock as u, createElementVNode as d, createVNode as f, normalizeClass as p, openBlock as m, resolveComponent as h, vShow as g, withDirectives as _ } from "vue";
 //#region components/Emoji/Emoji.vue
-var _ = {
+var v = {
 	name: "DtEmoji",
-	components: { DtSkeleton: c },
+	components: { DtSkeleton: l },
 	props: {
 		code: {
 			type: String,
 			required: !0
 		},
 		size: {
-			type: String,
-			default: "500",
-			validator: (e) => Object.keys(s).includes(e)
+			type: [String, Number],
+			default: 500,
+			validator: e(c)
 		},
 		imgClass: {
 			type: [
@@ -45,16 +46,16 @@ var _ = {
 			return !!this.emojiData;
 		},
 		emojiSrc() {
-			return this.emojiDataValid ? this.emojiData?.custom ? this.emojiData.image : ["100", "200"].includes(this.size) ? a + this.emojiData.key + r : i + this.emojiData.key + n : "invalid";
+			return this.emojiDataValid ? this.emojiData?.custom ? this.emojiData.image : ["100", "200"].includes(String(this.size)) ? o + this.emojiData.key + i : a + this.emojiData.key + r : "invalid";
 		},
 		emojiAlt() {
-			if (this.emojiDataValid) return this.emojiData.unicode_output ? o(this.emojiData.unicode_output) : this.emojiData.name;
+			if (this.emojiDataValid) return this.emojiData.unicode_output ? s(this.emojiData.unicode_output) : this.emojiData.name;
 		},
 		emojiLabel() {
 			return this.emojiDataValid ? this.ariaLabel ? this.ariaLabel : this.emojiData.name : "Invalid Emoji";
 		},
 		emojiSize() {
-			return s[this.size];
+			return c[this.size];
 		}
 	},
 	watch: {
@@ -73,7 +74,7 @@ var _ = {
 	},
 	methods: {
 		getEmojiData() {
-			this.emojiData = t(this.code);
+			this.emojiData = n(this.code);
 		},
 		imageLoaded() {
 			this.imgLoading = !1;
@@ -82,24 +83,24 @@ var _ = {
 			this.imgLoading = !1;
 		}
 	}
-}, v = [
+}, y = [
 	"aria-label",
 	"alt",
 	"title",
 	"src"
 ];
-function y(e, t, n, r, i, a) {
-	let o = m("dt-skeleton");
-	return p(), l("span", { class: f(["d-emoji d-icon", a.emojiSize]) }, [g(d(o, {
+function b(e, t, n, r, i, a) {
+	let o = h("dt-skeleton");
+	return m(), u("span", { class: p(["d-emoji d-icon", a.emojiSize]) }, [_(f(o, {
 		offset: 0,
-		class: f(["d-icon", a.emojiSize]),
+		class: p(["d-icon", a.emojiSize]),
 		"shape-option": {
 			shape: "circle",
 			size: "100%"
 		}
-	}, null, 8, ["class"]), [[h, i.imgLoading && n.showSkeleton]]), g(u("img", {
+	}, null, 8, ["class"]), [[g, i.imgLoading && n.showSkeleton]]), _(d("img", {
 		ref: "emojiImg",
-		class: f([
+		class: p([
 			"d-icon",
 			a.emojiSize,
 			n.imgClass
@@ -110,10 +111,10 @@ function y(e, t, n, r, i, a) {
 		src: a.emojiSrc,
 		onLoad: t[0] || (t[0] = (...e) => a.imageLoaded && a.imageLoaded(...e)),
 		onError: t[1] || (t[1] = (...e) => a.imageErrored && a.imageErrored(...e))
-	}, null, 42, v), [[h, !i.imgLoading]])], 2);
+	}, null, 42, y), [[g, !i.imgLoading]])], 2);
 }
-var b = /* @__PURE__ */ e(_, [["render", y]]);
+var x = /* @__PURE__ */ t(v, [["render", b]]);
 //#endregion
-export { b as default };
+export { x as default };
 
 //# sourceMappingURL=emoji.js.map