@dialpad/dialtone-vue 3.218.3 → 3.219.0-next.2

package/dist/lib/editor/editor.js

@@ -3,9 +3,9 @@ import { addClassStyleAttrs as Lt, removeClassStyleAttrs as Et } from "../../com
 import At from "./EditorToolbarButton.js";
 import yt from "./EditorToolbarDropdownButton.js";
 import wt from "./EditorToolbarPopoverButton.js";
-import { DtIconStopFilled as J, DtIconFontSize as Y, DtIconChevronDown as bt, DtIconBraces as j, DtIconType as G, DtIconSearch as Ct, DtIconImage as X, DtIconLink2 as W, DtIconCodeBlock as Z, DtIconQuote as $, DtIconAlignJustify as tt, DtIconAlignRight as et, DtIconAlignCenter as ot, DtIconAlignLeft as it, DtIconListOrdered as nt, DtIconListBullet as rt, DtIconStrikethrough as lt, DtIconUnderline as st, DtIconItalic as at, DtIconBold as ut, DtIconQuickReply as ct } from "@dialpad/dialtone-icons/vue3";
+import { DtIconStopFilled as J, DtIconFontSize as Y, DtIconChevronDown as bt, DtIconBraces as j, DtIconType as G, DtIconSearch as Ct, DtIconImage as X, DtIconLink2 as W, DtIconCodeBlock as Z, DtIconQuote as $, DtIconAlignJustify as tt, DtIconAlignRight as et, DtIconAlignCenter as ot, DtIconAlignLeft as it, DtIconListOrdered as nt, DtIconListBullet as rt, DtIconStrikethrough as lt, DtIconUnderline as st, DtIconItalic as at, DtIconBold as ut, DtIconQuickReply as ct } from "@dialpad/dialtone-icons/vue";
 import { DialtoneLocalization as Ot } from "../../localization/index.js";
-import { resolveComponent as p, resolveDirective as Rt, openBlock as u, createElementBlock as T, mergeProps as B, createVNode as d, withCtx as a, Fragment as k, renderList as A, createBlock as f, createElementVNode as _, normalizeStyle as O, createTextVNode as w, toDisplayString as I, withDirectives as xt, withKeys as b, withModifiers as L, resolveDynamicComponent as dt, createCommentVNode as D, normalizeClass as Ft } from "vue";
+import { resolveComponent as p, resolveDirective as Rt, openBlock as u, createElementBlock as m, mergeProps as B, createVNode as d, withCtx as a, Fragment as k, renderList as A, createBlock as f, createElementVNode as _, normalizeStyle as O, createTextVNode as w, toDisplayString as I, withDirectives as Ft, withKeys as b, withModifiers as L, resolveDynamicComponent as dt, createCommentVNode as D, normalizeClass as xt } from "vue";
 import { _ as Dt } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import St from "../combobox/combobox.js";
 import vt from "../tooltip/tooltip.js";
@@ -86,7 +86,7 @@ const Jt = {
     /**
      * Additional class name for the input element. Only accepts a String value
      * because this is passed to the editor via options. For multiple classes,
-     * join them into one string, e.g. "d-p8 d-hmx96"
+     * join them into one string, e.g. "d-p-100 d-hmx-150"
      */
     inputClass: {
       type: String,
@@ -861,8 +861,8 @@ const Jt = {
   }
 }, Yt = { class: "d-recipe-editor__popover-content" };
 function jt(t, o, i, l, r, e) {
-  const g = p("dt-icon-search"), E = p("dt-input"), R = p("dt-list-item"), S = p("dt-combobox"), v = p("editor-toolbar-popover-button"), ht = p("editor-toolbar-dropdown-button"), y = p("dt-button"), ft = p("dt-dropdown-separator"), pt = p("dt-list-item-group"), Bt = p("editor-toolbar-button"), C = p("dt-stack"), gt = p("dt-tooltip"), mt = p("dt-popover"), Tt = p("dt-rich-text-editor"), kt = Rt("dt-tooltip");
-  return u(), T("div", B({
+  const g = p("dt-icon-search"), E = p("dt-input"), R = p("dt-list-item"), S = p("dt-combobox"), v = p("editor-toolbar-popover-button"), ht = p("editor-toolbar-dropdown-button"), y = p("dt-button"), ft = p("dt-dropdown-separator"), pt = p("dt-list-item-group"), Bt = p("editor-toolbar-button"), C = p("dt-stack"), gt = p("dt-tooltip"), Tt = p("dt-popover"), mt = p("dt-rich-text-editor"), kt = Rt("dt-tooltip");
+  return u(), m("div", B({
     ref: "editorRoot",
     class: "d-recipe-editor"
   }, e.addClassStyleAttrs(t.$attrs), {
@@ -873,23 +873,23 @@ function jt(t, o, i, l, r, e) {
     d(C, {
       class: "d-recipe-editor__top-bar",
       direction: "row",
-      gap: "450"
+      gap: "150"
     }, {
       default: a(() => [
-        (u(!0), T(k, null, A(e.buttonGroups, (s) => (u(), f(C, {
+        (u(!0), m(k, null, A(e.buttonGroups, (s) => (u(), f(C, {
           key: s.key,
           direction: "row",
-          gap: "300"
+          gap: "50"
         }, {
           default: a(() => [
-            (u(!0), T(k, null, A(s.buttonGroup, (n) => {
-              var x, N, U, V, z, Q, M, q, P;
-              return u(), T(k, null, [
+            (u(!0), m(k, null, A(s.buttonGroup, (n) => {
+              var F, N, U, V, z, Q, M, q, P;
+              return u(), m(k, null, [
                 n.buttonType === "popover" && n.selector === "fontStyle" ? (u(), f(v, {
                   key: e.getButtonKey(s.key, n.selector),
                   ref_for: !0,
                   ref: e.getButtonRef(s.key, n.selector),
-                  "is-active": (N = (x = t.$refs.richTextEditor) == null ? void 0 : x.editor) == null ? void 0 : N.isActive(n.selector),
+                  "is-active": (N = (F = t.$refs.richTextEditor) == null ? void 0 : F.editor) == null ? void 0 : N.isActive(n.selector),
                   "tooltip-message": n.tooltipMessage,
                   "data-qa": n.dataQA,
                   "popover-data-qa": "dt-recipe-editor-font-style-input-popover",
@@ -898,25 +898,25 @@ function jt(t, o, i, l, r, e) {
                   onShiftFocusRight: e.shiftActionBarFocusRight,
                   onShiftFocusLeft: e.shiftActionBarFocusLeft
                 }, {
-                  content: a(({ close: m }) => [
+                  content: a(({ close: T }) => [
                     d(S, {
                       label: "",
                       "label-visible": !1,
                       "show-list": !0,
                       "click-on-select": !0,
-                      onEscape: (h) => m()
+                      onEscape: (h) => T()
                     }, {
                       input: a(({ inputProps: h }) => [
                         d(E, B({ ref_for: !0 }, h, {
                           modelValue: r.fontStyleSearch,
                           "onUpdate:modelValue": o[0] || (o[0] = (c) => r.fontStyleSearch = c),
-                          "root-class": "d-p8 d-pb4 d-w216",
+                          "root-class": "d-p-100 d-pbe-50 d-w216",
                           type: "search",
                           placeholder: r.i18n.$t("DIALTONE_EDITOR_FONT_STYLE_SEARCH_PLACEHOLDER"),
-                          size: "sm",
+                          size: 200,
                           role: "menuitem"
                         }), {
-                          leftIcon: a(({ iconSize: c }) => [
+                          startIcon: a(({ iconSize: c }) => [
                             d(g, { size: c }, null, 8, ["size"])
                           ]),
                           _: 1
@@ -924,14 +924,14 @@ function jt(t, o, i, l, r, e) {
                       ]),
                       list: a(({ listProps: h }) => [
                         _("ul", B({ ref_for: !0 }, h), [
-                          (u(!0), T(k, null, A(e.filteredFontStyles, (c) => (u(), f(R, {
+                          (u(!0), m(k, null, A(e.filteredFontStyles, (c) => (u(), f(R, {
                             key: c.name,
                             selected: e.isCurrentFontFamily(c.value),
                             style: O({ fontFamily: c.value || "inherit" }),
                             role: "option",
                             "navigation-type": "arrow-keys",
                             onClick: (K) => {
-                              m(e.focusEditor), e.onFontStyleSelect(c.value);
+                              T(e.focusEditor), e.onFontStyleSelect(c.value);
                             }
                           }, {
                             default: a(() => [
@@ -958,14 +958,14 @@ function jt(t, o, i, l, r, e) {
                   onShiftFocusRight: e.shiftActionBarFocusRight,
                   onShiftFocusLeft: e.shiftActionBarFocusLeft
                 }, {
-                  list: a(({ close: m }) => [
-                    (u(!0), T(k, null, A(i.fontSizes, (h) => (u(), f(R, {
+                  list: a(({ close: T }) => [
+                    (u(!0), m(k, null, A(i.fontSizes, (h) => (u(), f(R, {
                       key: h.name,
                       selected: e.isCurrentFontSize(h.value),
                       role: "menuitem",
                       "navigation-type": "arrow-keys",
                       onClick: (c) => {
-                        m(e.focusEditor), e.onFontSizeSelect(h.value, c);
+                        T(e.focusEditor), e.onFontSizeSelect(h.value, c);
                       }
                     }, {
                       default: a(() => [
@@ -977,13 +977,13 @@ function jt(t, o, i, l, r, e) {
                     }, 1032, ["selected", "onClick"]))), 128))
                   ]),
                   _: 1
-                }, 8, ["is-active", "tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "custom" && n.selector === "fontColor" ? xt((u(), f(y, {
+                }, 8, ["is-active", "tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "custom" && n.selector === "fontColor" ? Ft((u(), f(y, {
                   key: e.getButtonKey(s.key, n.selector),
                   ref_for: !0,
                   ref: e.getButtonRef(s.key, n.selector),
                   kind: "muted",
                   importance: "clear",
-                  size: "xs",
+                  size: 100,
                   active: (Q = (z = t.$refs.richTextEditor) == null ? void 0 : z.editor) == null ? void 0 : Q.isActive(n.selector),
                   tabindex: e.canFocus(e.getButtonRef(s.key, n.selector)) ? 0 : -1,
                   "aria-label": n.tooltipMessage,
@@ -992,7 +992,7 @@ function jt(t, o, i, l, r, e) {
                     b(L(e.shiftActionBarFocusRight, ["stop"]), ["right"]),
                     b(L(e.shiftActionBarFocusLeft, ["stop"]), ["left"])
                   ],
-                  onClick: (m) => n.onClick()
+                  onClick: (T) => n.onClick()
                 }, {
                   icon: a(() => [
                     (u(), f(dt(n.icon), {
@@ -1002,9 +1002,9 @@ function jt(t, o, i, l, r, e) {
                     d(E, {
                       value: r.currentFontColor,
                       "root-class": "d-w0 d-h0 d-of-hidden",
-                      "input-class": "colorPickerInput d-w0 d-h0 d-p0 d-bar0",
+                      "input-class": "colorPickerInput d-w0 d-h0 d-p-0 d-bar0",
                       "input-wrapper-class": "d-w0 d-h0 d-ba-none",
-                      size: "sm",
+                      size: 200,
                       type: "color",
                       onInput: e.onColorPickerInput,
                       onClick: o[1] || (o[1] = L(() => {
@@ -1031,25 +1031,25 @@ function jt(t, o, i, l, r, e) {
                   onShiftFocusRight: e.shiftActionBarFocusRight,
                   onShiftFocusLeft: e.shiftActionBarFocusLeft
                 }, {
-                  content: a(({ close: m }) => [
+                  content: a(({ close: T }) => [
                     d(S, {
                       label: "",
                       "label-visible": !1,
                       "show-list": !0,
                       "click-on-select": !0,
-                      onEscape: (h) => m()
+                      onEscape: (h) => T()
                     }, {
                       input: a(({ inputProps: h }) => [
                         d(E, B({ ref_for: !0 }, h, {
                           modelValue: r.variableSearchValue,
                           "onUpdate:modelValue": o[2] || (o[2] = (c) => r.variableSearchValue = c),
-                          "root-class": "d-p8 d-pb4 d-w264",
+                          "root-class": "d-p-100 d-pbe-50 d-w264",
                           type: "search",
                           placeholder: r.i18n.$t("DIALTONE_EDITOR_VARIABLE_POPOVER_SEARCH_PLACEHOLDER"),
-                          size: "md",
+                          size: 300,
                           role: "menuitem"
                         }), {
-                          leftIcon: a(({ iconSize: c }) => [
+                          startIcon: a(({ iconSize: c }) => [
                             d(g, { size: c }, null, 8, ["size"])
                           ]),
                           _: 1
@@ -1057,22 +1057,22 @@ function jt(t, o, i, l, r, e) {
                       ]),
                       list: a(({ listProps: h }) => [
                         _("div", B({ ref_for: !0 }, h), [
-                          (u(!0), T(k, null, A(e.filteredCategories, (c, K) => (u(), f(pt, {
+                          (u(!0), m(k, null, A(e.filteredCategories, (c, K) => (u(), f(pt, {
                             key: c.name,
                             heading: c.name,
-                            "heading-class": "d-headline--sm-compact d-p8"
+                            "heading-class": "d-headline--sm-compact d-p-100"
                           }, {
                             default: a(() => [
-                              (u(!0), T(k, null, A(e.getFilteredItemsForCategory(c), (F) => (u(), f(R, {
-                                key: c.name + F.name,
+                              (u(!0), m(k, null, A(e.getFilteredItemsForCategory(c), (x) => (u(), f(R, {
+                                key: c.name + x.name,
                                 role: "option",
                                 "navigation-type": "arrow-keys",
                                 onClick: (Gt) => {
-                                  e.insertVariable(c.name, F), m(e.focusEditor);
+                                  e.insertVariable(c.name, x), T(e.focusEditor);
                                 }
                               }, {
                                 default: a(() => [
-                                  w(I(F.name), 1)
+                                  w(I(x.name), 1)
                                 ]),
                                 _: 2
                               }, 1032, ["onClick"]))), 128)),
@@ -1109,10 +1109,10 @@ function jt(t, o, i, l, r, e) {
         e.linkButton.showBtn ? (u(), f(C, {
           key: 0,
           direction: "row",
-          gap: "300"
+          gap: "50"
         }, {
           default: a(() => [
-            d(mt, {
+            d(Tt, {
               open: r.showLinkInput,
               "show-close-button": !1,
               "data-qa": "dt-recipe-editor-link-input-popover",
@@ -1141,8 +1141,8 @@ function jt(t, o, i, l, r, e) {
                         tabindex: e.canFocus(e.getButtonRef("custom", "link")) ? 0 : -1,
                         importance: "clear",
                         kind: "muted",
-                        size: "xs",
-                        onClick: o[3] || (o[3] = (x) => e.linkButton.onClick()),
+                        size: 100,
+                        onClick: o[3] || (o[3] = (F) => e.linkButton.onClick()),
                         onKeydown: [
                           b(L(e.shiftActionBarFocusRight, ["stop"]), ["right"]),
                           b(L(e.shiftActionBarFocusLeft, ["stop"]), ["left"])
@@ -1180,7 +1180,7 @@ function jt(t, o, i, l, r, e) {
               footerContent: a(() => [
                 d(C, {
                   direction: "row",
-                  gap: "300",
+                  gap: "50",
                   class: "d-recipe-editor__popover-footer"
                 }, {
                   default: a(() => [
@@ -1188,7 +1188,7 @@ function jt(t, o, i, l, r, e) {
                       "data-qa": "dt-recipe-editor-remove-link-btn",
                       importance: "clear",
                       kind: "muted",
-                      size: "sm"
+                      size: 200
                     }, e.removeLinkButtonLabels, { onClick: e.removeLink }), {
                       default: a(() => [
                         w(I(e.removeLinkButtonLabels.title), 1)
@@ -1199,7 +1199,7 @@ function jt(t, o, i, l, r, e) {
                       "data-qa": "dt-recipe-editor-set-link-cancel-btn",
                       importance: "clear",
                       kind: "muted",
-                      size: "sm"
+                      size: 200
                     }, e.cancelSetLinkButtonLabels, { onClick: e.closeLinkInput }), {
                       default: a(() => [
                         w(I(e.cancelSetLinkButtonLabels.title), 1)
@@ -1208,7 +1208,7 @@ function jt(t, o, i, l, r, e) {
                     }, 16, ["onClick"]),
                     d(y, B({
                       "data-qa": "dt-recipe-editor-set-link-confirm-btn",
-                      size: "sm"
+                      size: 200
                     }, e.confirmSetLinkButtonLabels, { onClick: e.setLink }), {
                       default: a(() => [
                         w(I(e.confirmSetLinkButtonLabels.title), 1)
@@ -1229,9 +1229,9 @@ function jt(t, o, i, l, r, e) {
     }),
     _("div", {
       style: O({ "max-height": i.maxHeight }),
-      class: Ft(["d-recipe-editor__content", { "d-recipe-editor__content-image-resize": i.allowImageResize }])
+      class: xt(["d-recipe-editor__content", { "d-recipe-editor__content-image-resize": i.allowImageResize }])
     }, [
-      d(Tt, B({
+      d(mt, B({
         ref: "richTextEditor",
         modelValue: r.internalInputValue,
         "onUpdate:modelValue": o[5] || (o[5] = (s) => r.internalInputValue = s),