@progress/kendo-react-editor 9.0.0-develop.2 → 9.0.0-develop.3

package/tools/table-wizard/cellPropsUtils.mjs

@@ -9,48 +9,48 @@
 import { htmlToFragment as x } from "@progress/kendo-editor-common";
 import { selectedCells as v, tableCells as W, getUnit as N, parseStyle as S, setNodeStyle as u } from "./utils.mjs";
 import { parentNode as k } from "../utils.mjs";
-const f = "k-colgroup-data", H = (o, e, r) => {
+const f = "k-colgroup-data", H = (o, e, n) => {
   const l = {
     cellWidth: null,
     widthUnit: ""
-  }, n = e.node, t = r.start(e.depth);
-  if (!n.attrs[f])
+  }, r = e.node, t = n.start(e.depth);
+  if (!r.attrs[f])
     return l;
   const h = /* @__PURE__ */ new Set();
   let s = "";
-  const b = x(n.attrs[f]).firstChild;
+  const b = x(r.attrs[f]).firstChild;
   return o.forEach((d) => {
-    const a = n.resolve(d.pos - t), c = a.parent, m = a.index();
+    const a = r.resolve(d.pos - t), c = a.parent, m = a.index();
     let g = 0;
     for (let y = 0; y <= m; y++)
       g += c.child(y).attrs.colspan;
-    let i = b.children[g - 1];
+    const i = b.children[g - 1];
     i && (s = i.style.width, h.add(s));
   }), h.size === 1 && s && (l.cellWidth = parseFloat(s) || null, l.widthUnit = N(s)), l;
-}, P = (o, e, r) => {
+}, P = (o, e, n) => {
   const l = {
     cellHeight: null,
     heightUnit: ""
-  }, n = e.node, t = r.start(e.depth), h = /* @__PURE__ */ new Set();
+  }, r = e.node, t = n.start(e.depth), h = /* @__PURE__ */ new Set();
   let s = "";
   return o.forEach((b) => {
     var c;
-    const a = n.resolve(b.pos - t).parent;
+    const a = r.resolve(b.pos - t).parent;
     s = S(((c = a.attrs) == null ? void 0 : c.style) || "").height || "", h.add(s);
   }), h.size === 1 && s && (l.cellHeight = parseFloat(s) || null, l.heightUnit = N(s)), l;
 }, p = (o, e) => {
-  const r = /* @__PURE__ */ new Set();
+  const n = /* @__PURE__ */ new Set();
   let l = "";
-  return o.forEach((n) => {
+  return o.forEach((r) => {
     var t;
-    l = S(((t = n.node.attrs) == null ? void 0 : t.style) || "")[e] || "", r.add(l);
-  }), r.size === 1 && l ? l : "";
+    l = S(((t = r.node.attrs) == null ? void 0 : t.style) || "")[e] || "", n.add(l);
+  }), n.size === 1 && l ? l : "";
 }, w = (o, e) => {
-  const r = /* @__PURE__ */ new Set();
+  const n = /* @__PURE__ */ new Set();
   let l = "";
-  return o.forEach((n) => {
-    l = (n.node.attrs || {})[e] || "", r.add(l);
-  }), r.size === 1 && l ? l : "";
+  return o.forEach((r) => {
+    l = (r.node.attrs || {})[e] || "", n.add(l);
+  }), n.size === 1 && l ? l : "";
 }, C = {
   applyToAll: !1,
   cellWidth: null,
@@ -67,11 +67,11 @@ const f = "k-colgroup-data", H = (o, e, r) => {
   id: "",
   className: ""
 }, T = (o) => {
-  const e = v(o), r = o.selection.$from, l = e.length ? k(r, (n) => n.type.spec.tableRole === "table") : null;
+  const e = v(o), n = o.selection.$from, l = e.length ? k(n, (r) => r.type.spec.tableRole === "table") : null;
   return l ? {
     ...C,
-    ...H(e, l, r),
-    ...P(e, l, r),
+    ...H(e, l, n),
+    ...P(e, l, n),
     alignment: { x: p(e, "text-align"), y: p(e, "vertical-align") },
     textControl: p(e, "white-space"),
     backgroundColor: p(e, "background-color") || void 0,
@@ -82,40 +82,43 @@ const f = "k-colgroup-data", H = (o, e, r) => {
     id: w(e, "id"),
     className: w(e, "class")
   } : C;
-}, U = (o, e, r) => {
-  const l = o.doc.resolve(e), n = l.parent, t = l.index();
+}, U = (o, e, n) => {
+  const l = o.doc.resolve(e), r = l.parent, t = l.index();
   let h = 0;
   for (let c = 0; c <= t; c++)
-    h += n.child(c).attrs.colspan;
+    h += r.child(c).attrs.colspan;
   const s = l.node(l.depth - 1), b = l.posAtIndex(0, l.depth - 1) - 1;
   let d = s.attrs, a;
   if (d && d[f]) {
     const c = x(d[f]).firstChild;
-    a = c.children[h - 1], a.style.width = r, d = { ...d, [f]: c.outerHTML }, o.setNodeMarkup(b, null, d);
+    a = c.children[h - 1], a.style.width = n, d = { ...d, [f]: c.outerHTML }, o.setNodeMarkup(b, null, d);
   } else {
     let c = 0;
-    for (let i = 0; i < n.childCount; i++)
-      c += n.child(i).attrs.colspan;
+    for (let i = 0; i < r.childCount; i++)
+      c += r.child(i).attrs.colspan;
     const m = document.createElement("colgroup"), g = new Array(c);
     for (let i = 0; i < c; i++)
       g[i] = document.createElement("col"), m.appendChild(g[i]);
-    a = g[t], a.style.width = r, d = {
+    a = g[t], a.style.width = n, d = {
       ...d,
       [f]: "<colgroup>" + g.reduce((i, y) => i + y.outerHTML, "") + "</colgroup>"
     }, o.setNodeMarkup(b, null, d);
   }
-}, E = (o, e, r) => {
-  let l = o.doc.resolve(e), n = l.parent;
-  const t = l.posAtIndex(0) - 1;
-  o.setNodeMarkup(t, null, u(n.attrs, "height", r));
-}, $ = (o, e, r) => {
-  r.forEach(({ node: l, pos: n }) => {
+}, E = (o, e, n) => {
+  const l = o.doc.resolve(e), r = l.parent, t = l.posAtIndex(0) - 1;
+  o.setNodeMarkup(t, null, u(r.attrs, "height", n));
+}, $ = (o, e, n) => {
+  n.forEach(({ node: l, pos: r }) => {
     let t = { ...l.attrs };
-    t = u(t, "border-color", e.borderColor || ""), t = u(t, "border-style", e.borderStyle || ""), t = u(t, "border-width", typeof e.borderWidth == "number" ? e.borderWidth + "px" : ""), t = u(t, "padding", typeof e.cellPadding == "number" ? e.cellPadding + "px" : ""), t = u(t, "background-color", e.backgroundColor || ""), t = u(t, "text-align", e.alignment.x || ""), t = u(t, "vertical-align", e.alignment.y || ""), t = u(t, "white-space", e.textControl || ""), t.id = e.id || null, t.class = e.className || null, o.setNodeMarkup(n, null, t), typeof e.cellWidth == "number" && U(o, n, e.cellWidth + (e.widthUnit || "px")), typeof e.cellHeight == "number" && E(o, n, e.cellHeight + (e.heightUnit || "px"));
+    t = u(t, "border-color", e.borderColor || ""), t = u(t, "border-style", e.borderStyle || ""), t = u(
+      t,
+      "border-width",
+      typeof e.borderWidth == "number" ? e.borderWidth + "px" : ""
+    ), t = u(t, "padding", typeof e.cellPadding == "number" ? e.cellPadding + "px" : ""), t = u(t, "background-color", e.backgroundColor || ""), t = u(t, "text-align", e.alignment.x || ""), t = u(t, "vertical-align", e.alignment.y || ""), t = u(t, "white-space", e.textControl || ""), t.id = e.id || null, t.class = e.className || null, o.setNodeMarkup(r, null, t), typeof e.cellWidth == "number" && U(o, r, e.cellWidth + (e.widthUnit || "px")), typeof e.cellHeight == "number" && E(o, r, e.cellHeight + (e.heightUnit || "px"));
   });
 }, z = (o, e) => {
-  const r = o.tr, l = e.applyToAll ? W(o) : v(o);
-  return $(r, e, l), r;
+  const n = o.tr, l = e.applyToAll ? W(o) : v(o);
+  return $(n, e, l), n;
 };
 export {
   z as applyCellsData,

package/tools/table-wizard/tableCellProperties.mjs

@@ -22,13 +22,16 @@ const Ye = (n) => {
     f(!0);
   }, []), s = e.useCallback(() => {
     f(!1), t == null || t.focus();
-  }, [t]), b = e.useCallback((c) => {
-    if (t && c) {
-      const m = Ve(t.state, c);
-      m.docChanged && t.dispatch(m);
-    }
-    s();
-  }, [t, s]);
+  }, [t]), b = e.useCallback(
+    (c) => {
+      if (t && c) {
+        const m = Ve(t.state, c);
+        m.docChanged && t.dispatch(m);
+      }
+      s();
+    },
+    [t, s]
+  );
   return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
     x,
     {
@@ -136,7 +139,9 @@ const Ye = (n) => {
   t.widthUnit && !i.includes(t.widthUnit) && i.push(t.widthUnit);
   const s = t.widthUnit || "", b = e.useRef(null), c = t.cellHeight, m = e.useRef(null);
   t.heightUnit && !i.includes(t.heightUnit) && i.push(t.heightUnit);
-  const ce = t.heightUnit || "", C = e.useRef(null), ie = ee.find((o) => o.value.x !== void 0 && t.alignment && o.value.x === t.alignment.x && o.value.y === t.alignment.y) || null, y = e.useRef(null), se = le.find((o) => o.value === t.textControl), N = e.useRef(null), me = t.backgroundColor, h = e.useRef(null), de = t.cellPadding, E = e.useRef(null), ue = t.borderWidth, S = e.useRef(null), fe = t.borderColor, w = e.useRef(null), ge = _.find((o) => o.value === t.borderStyle), I = e.useRef(null), pe = t.id, R = e.useRef(null), be = t.className, ke = e.useCallback(() => {
+  const ce = t.heightUnit || "", C = e.useRef(null), ie = ee.find(
+    (o) => o.value.x !== void 0 && t.alignment && o.value.x === t.alignment.x && o.value.y === t.alignment.y
+  ) || null, y = e.useRef(null), se = le.find((o) => o.value === t.textControl), N = e.useRef(null), me = t.backgroundColor, h = e.useRef(null), de = t.cellPadding, E = e.useRef(null), ue = t.borderWidth, S = e.useRef(null), fe = t.borderColor, w = e.useRef(null), ge = _.find((o) => o.value === t.borderStyle), I = e.useRef(null), pe = t.id, R = e.useRef(null), be = t.className, ke = e.useCallback(() => {
     var L, A, T, D, B, W, K, U, V, M, z, F, H, $, j, q, G, J, O, Q;
     const o = {
       applyToAll: !!((A = (L = u.current) == null ? void 0 : L.element) != null && A.checked),
@@ -155,13 +160,13 @@ const Ye = (n) => {
       className: String(((Q = R.current) == null ? void 0 : Q.value) || "")
     };
     n.onSave.call(void 0, o);
-  }, [n.onSave]), ve = /* @__PURE__ */ e.createElement("div", { className: "k-form k-form-md" }, /* @__PURE__ */ e.createElement("fieldset", { className: "k-form-fieldset" }, /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-4 k-gap-x-4" }, /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-full" }, /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement("span", { className: "k-checkbox-wrap" }, /* @__PURE__ */ e.createElement(Ee, { ref: u, defaultChecked: f })), /* @__PURE__ */ e.createElement(
-    "label",
-    {
-      className: "k-checkbox-label"
-    },
-    r.toLanguageString(l.cellPropertiesApplyToAllCells, a[l.cellPropertiesApplyToAllCells])
-  ))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(l.cellPropertiesWidth, a[l.cellPropertiesWidth])), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
+  }, [n.onSave]), ve = /* @__PURE__ */ e.createElement("div", { className: "k-form k-form-md" }, /* @__PURE__ */ e.createElement("fieldset", { className: "k-form-fieldset" }, /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-4 k-gap-x-4" }, /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-full" }, /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement("span", { className: "k-checkbox-wrap" }, /* @__PURE__ */ e.createElement(Ee, { ref: u, defaultChecked: f })), /* @__PURE__ */ e.createElement("label", { className: "k-checkbox-label" }, r.toLanguageString(
+    l.cellPropertiesApplyToAllCells,
+    a[l.cellPropertiesApplyToAllCells]
+  )))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
+    l.cellPropertiesWidth,
+    a[l.cellPropertiesWidth]
+  )), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
     k,
     {
       ref: g,
@@ -169,7 +174,21 @@ const Ye = (n) => {
       min: 0,
       placeholder: r.toLanguageString(l.sizeAuto, a[l.sizeAuto])
     }
-  ), /* @__PURE__ */ e.createElement("div", { className: "k-form-hint" }, r.toLanguageString(l.cellPropertiesApplyToColumn, a[l.cellPropertiesApplyToColumn])))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, " "), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(Z, { ref: p, defaultValue: s, data: i, popupSettings: d }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(l.cellPropertiesHeight, a[l.cellPropertiesHeight])), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
+  ), /* @__PURE__ */ e.createElement("div", { className: "k-form-hint" }, r.toLanguageString(
+    l.cellPropertiesApplyToColumn,
+    a[l.cellPropertiesApplyToColumn]
+  )))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, " "), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
+    Z,
+    {
+      ref: p,
+      defaultValue: s,
+      data: i,
+      popupSettings: d
+    }
+  ))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
+    l.cellPropertiesHeight,
+    a[l.cellPropertiesHeight]
+  )), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
     k,
     {
       ref: b,
@@ -177,7 +196,21 @@ const Ye = (n) => {
       min: 0,
       placeholder: r.toLanguageString(l.sizeAuto, a[l.sizeAuto])
     }
-  ), /* @__PURE__ */ e.createElement("div", { className: "k-form-hint" }, r.toLanguageString(l.cellPropertiesApplyToRow, a[l.cellPropertiesApplyToRow])))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, " "), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(Z, { ref: m, defaultValue: ce, data: i, popupSettings: d }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(l.cellPropertiesAlignment, a[l.cellPropertiesAlignment])), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
+  ), /* @__PURE__ */ e.createElement("div", { className: "k-form-hint" }, r.toLanguageString(
+    l.cellPropertiesApplyToRow,
+    a[l.cellPropertiesApplyToRow]
+  )))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, " "), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
+    Z,
+    {
+      ref: m,
+      defaultValue: ce,
+      data: i,
+      popupSettings: d
+    }
+  ))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
+    l.cellPropertiesAlignment,
+    a[l.cellPropertiesAlignment]
+  )), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
     P,
     {
       ref: C,
@@ -189,19 +222,40 @@ const Ye = (n) => {
       valueRender: te,
       itemRender: ae
     }
-  ))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(l.cellPropertiesTextControl, a[l.cellPropertiesTextControl])), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
+  ))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
+    l.cellPropertiesTextControl,
+    a[l.cellPropertiesTextControl]
+  )), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
     P,
     {
       ref: y,
       defaultValue: se,
-      data: le.map((o) => ({ ...o, text: r.toLanguageString(o.textKey, o.text) })),
+      data: le.map((o) => ({
+        ...o,
+        text: r.toLanguageString(o.textKey, o.text)
+      })),
       textField: "text",
       dataItemKey: "value",
       popupSettings: d,
       valueRender: te,
       itemRender: ae
     }
-  ))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(l.cellPropertiesCellPadding, a[l.cellPropertiesCellPadding])), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(k, { ref: h, defaultValue: de, min: 0 }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(l.cellPropertiesBackground, a[l.cellPropertiesBackground])), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(X, { ref: N, defaultValue: me }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(l.cellPropertiesBorderWidth, a[l.cellPropertiesBorderWidth])), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(k, { ref: E, defaultValue: ue, min: 0 }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(l.cellPropertiesBorderColor, a[l.cellPropertiesBorderColor])), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(X, { ref: S, defaultValue: fe }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(l.cellPropertiesBorderStyle, a[l.cellPropertiesBorderStyle])), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
+  ))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
+    l.cellPropertiesCellPadding,
+    a[l.cellPropertiesCellPadding]
+  )), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(k, { ref: h, defaultValue: de, min: 0 }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
+    l.cellPropertiesBackground,
+    a[l.cellPropertiesBackground]
+  )), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(X, { ref: N, defaultValue: me }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
+    l.cellPropertiesBorderWidth,
+    a[l.cellPropertiesBorderWidth]
+  )), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(k, { ref: E, defaultValue: ue, min: 0 }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-1" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
+    l.cellPropertiesBorderColor,
+    a[l.cellPropertiesBorderColor]
+  )), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(X, { ref: S, defaultValue: fe }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-2" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
+    l.cellPropertiesBorderStyle,
+    a[l.cellPropertiesBorderStyle]
+  )), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
     P,
     {
       ref: w,
@@ -211,7 +265,13 @@ const Ye = (n) => {
       textField: "text",
       dataItemKey: "value"
     }
-  ))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-full" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(l.cellPropertiesId, a[l.cellPropertiesId])), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(Y, { ref: I, defaultValue: pe }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-full" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(l.cellPropertiesCssClass, a[l.cellPropertiesCssClass])), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(Y, { ref: R, defaultValue: be })))))), he = [/* @__PURE__ */ e.createElement(x, { themeColor: "primary", key: "save", onClick: ke }, r.toLanguageString(l.cellPropertiesSave, a[l.cellPropertiesSave])), /* @__PURE__ */ e.createElement(x, { onClick: n.onCancel, key: "cancel" }, r.toLanguageString(l.cellPropertiesCancel, a[l.cellPropertiesCancel]))];
+  ))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-full" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(l.cellPropertiesId, a[l.cellPropertiesId])), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(Y, { ref: I, defaultValue: pe }))), /* @__PURE__ */ e.createElement("div", { className: "k-form-field k-col-span-full" }, /* @__PURE__ */ e.createElement("label", { className: "k-label k-form-label" }, r.toLanguageString(
+    l.cellPropertiesCssClass,
+    a[l.cellPropertiesCssClass]
+  )), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(Y, { ref: R, defaultValue: be })))))), he = [
+    /* @__PURE__ */ e.createElement(x, { themeColor: "primary", key: "save", onClick: ke }, r.toLanguageString(l.cellPropertiesSave, a[l.cellPropertiesSave])),
+    /* @__PURE__ */ e.createElement(x, { onClick: n.onCancel, key: "cancel" }, r.toLanguageString(l.cellPropertiesCancel, a[l.cellPropertiesCancel]))
+  ];
   return /* @__PURE__ */ e.createElement(
     Pe,
     {