@progress/kendo-react-editor 5.15.0-dev.202307180734 → 5.15.0-dev.202307181342

package/dist/npm/tools/table-wizard/tableCellProperties.js

@@ -0,0 +1,492 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.itemRenderWithIcon = exports.valueRenderWithIcon = exports.TableCellProperties = exports.tableCells = exports.selectedCells = exports.parentNode = void 0;
+var React = require("react");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+var kendo_react_inputs_1 = require("@progress/kendo-react-inputs");
+var kendo_react_dropdowns_1 = require("@progress/kendo-react-dropdowns");
+var kendo_react_dialogs_1 = require("@progress/kendo-react-dialogs");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+var utils_1 = require("../utils");
+var kendo_editor_common_1 = require("@progress/kendo-editor-common");
+var utils_2 = require("./utils");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
+var messages_1 = require("./../../messages");
+var colgroupAttr = 'k-colgroup-data';
+/**
+ * @hidden
+ */
+function parentNode(pos, predicate) {
+    for (var depth = pos.depth; depth > 0; depth--) {
+        var node = pos.node(depth);
+        if (predicate(node)) {
+            return { node: node, depth: depth };
+        }
+    }
+    return null;
+}
+exports.parentNode = parentNode;
+var getCells = function (state) {
+    var doc = state.doc, selection = state.selection;
+    var result = [];
+    selection.ranges.forEach(function (range) {
+        var from = range.$from.pos;
+        var to = range.$to.pos;
+        doc.nodesBetween(from, to, function (node, pos, _parent, _index) {
+            if (node.type.name === 'table_cell' || node.type.name === 'table_header') {
+                result.push({ node: node, pos: pos });
+            }
+        });
+    });
+    return result;
+};
+/**
+ * @hidden
+ */
+var selectedCells = function (state) {
+    var startNodeTable = parentNode(state.selection.$from, function (n) { return n.type.name === 'table'; });
+    var endNodeTable = parentNode(state.selection.$to, function (n) { return n.type.name === 'table'; });
+    if (startNodeTable && endNodeTable && startNodeTable.depth === endNodeTable.depth && startNodeTable.node.eq(endNodeTable.node)) {
+        var cells = getCells(state).filter(function (_a) {
+            var pos = _a.pos;
+            var parentTable = parentNode(state.doc.resolve(pos), function (n) { return n.type.name === 'table'; });
+            return parentTable && parentTable.depth === startNodeTable.depth && startNodeTable.node.eq(parentTable.node);
+        });
+        return cells;
+    }
+    return [];
+};
+exports.selectedCells = selectedCells;
+/**
+ * @hidden
+ */
+var tableCells = function (state) {
+    var cells = [];
+    if ((0, exports.selectedCells)(state).length) {
+        var $pos = state.selection.$from;
+        var parentTable = parentNode($pos, function (n) { return n.type.spec.tableRole === 'table'; });
+        if (parentTable === null) {
+            return cells;
+        }
+        var tablePos_1 = $pos.start(parentTable.depth);
+        var tableNode = parentTable.node;
+        var map = kendo_editor_common_1.TableMap.get(tableNode);
+        var doc_1 = state.doc;
+        map.map.forEach(function (m) {
+            var pos = m + tablePos_1;
+            cells.push({ pos: pos, node: doc_1.nodeAt(pos) });
+        });
+    }
+    return cells;
+};
+exports.tableCells = tableCells;
+var setCellWidth = function (tr, pos, width) {
+    var _a, _b;
+    var $cell = tr.doc.resolve(pos);
+    var row = $cell.parent;
+    var cellIndex = $cell.index();
+    var colSpan = 0;
+    for (var i = 0; i <= cellIndex; i++) {
+        colSpan += row.child(i).attrs.colspan;
+    }
+    var tableNode = $cell.node($cell.depth - 1);
+    var tablePos = $cell.posAtIndex(0, $cell.depth - 1) - 1;
+    var attrs = tableNode.attrs;
+    var col;
+    if (attrs && attrs[colgroupAttr]) {
+        // const colgroup = parseStrColgroup(tableNode.attrs[colgroupAttr]);
+        var colgroup = (0, kendo_editor_common_1.htmlToFragment)(attrs[colgroupAttr]).firstChild;
+        col = colgroup.children[colSpan - 1];
+        col.style.width = width;
+        attrs = __assign(__assign({}, attrs), (_a = {}, _a[colgroupAttr] = colgroup.outerHTML, _a));
+        tr.setNodeMarkup(tablePos, null, attrs);
+    }
+    else {
+        var total = 0;
+        for (var i = 0; i < row.childCount; i++) {
+            total += row.child(i).attrs.colspan;
+        }
+        var colgroup = document.createElement('colgroup');
+        var cols = new Array(total);
+        for (var i = 0; i < total; i++) {
+            cols[i] = document.createElement('col');
+            colgroup.appendChild(cols[i]);
+        }
+        col = cols[cellIndex];
+        col.style.width = width;
+        attrs = __assign(__assign({}, attrs), (_b = {}, _b[colgroupAttr] = '<colgroup>' + cols.reduce(function (acc, cur) { return acc + cur.outerHTML; }, '') + '</colgroup>', _b));
+        tr.setNodeMarkup(tablePos, null, attrs);
+    }
+};
+var setCellHeight = function (tr, pos, height) {
+    var $cell = tr.doc.resolve(pos);
+    var row = $cell.parent;
+    var rowPos = $cell.posAtIndex(0) - 1;
+    tr.setNodeMarkup(rowPos, null, (0, utils_2.setNodeStyle)(row.attrs, 'height', height));
+};
+var applyOnCell = function (tr, data, cells) {
+    cells.forEach(function (_a) {
+        var _b, _c, _d;
+        var node = _a.node, pos = _a.pos;
+        var attrs = __assign({}, node.attrs);
+        attrs = (0, utils_2.setNodeStyle)(attrs, 'border-color', data.borderColor || '');
+        attrs = (0, utils_2.setNodeStyle)(attrs, 'border-style', ((_b = data.borderStyle) === null || _b === void 0 ? void 0 : _b.value) || '');
+        attrs = (0, utils_2.setNodeStyle)(attrs, 'border-width', typeof data.borderWidth === 'number' ? data.borderWidth + 'px' : '');
+        attrs = (0, utils_2.setNodeStyle)(attrs, 'padding', typeof data.cellPadding === 'number' ? data.cellPadding + 'px' : '');
+        attrs = (0, utils_2.setNodeStyle)(attrs, 'background-color', data.backgroundColor || '');
+        attrs = (0, utils_2.setNodeStyle)(attrs, 'text-align', ((_c = data.alignment) === null || _c === void 0 ? void 0 : _c.value.x) || '');
+        attrs = (0, utils_2.setNodeStyle)(attrs, 'vertical-align', ((_d = data.alignment) === null || _d === void 0 ? void 0 : _d.value.y) || '');
+        attrs = (0, utils_2.setNodeStyle)(attrs, 'white-space', data.textControl || '');
+        attrs.id = data.id || null;
+        attrs.class = data.className || null;
+        tr.setNodeMarkup(pos, null, attrs);
+        if (typeof data.cellWidth === 'number') {
+            setCellWidth(tr, pos, data.cellWidth + (data.widthUnit || 'px'));
+        }
+        if (typeof data.cellHeight === 'number') {
+            setCellHeight(tr, pos, data.cellHeight + (data.heightUnit || 'px'));
+        }
+    });
+};
+/**
+ * @hidden
+ */
+var TableCellProperties = function (props) {
+    var view = props.view, buttonProps = __rest(props, ["view"]);
+    var _a = React.useState(false), showDialog = _a[0], setShowDialog = _a[1];
+    var loc = (0, kendo_react_intl_1.useLocalization)();
+    var inTable = Boolean(view && parentNode(view.state.selection.$from, function (n) { return n.type.spec.tableRole === 'table'; }));
+    var onClick = React.useCallback(function () {
+        setShowDialog(true);
+    }, []);
+    var onSave = React.useCallback(function (data) {
+        if (view && data) {
+            var tr = view.state.tr;
+            var cells = data.applyToAll ? (0, exports.tableCells)(view.state) : (0, exports.selectedCells)(view.state);
+            applyOnCell(tr, data, cells);
+            if (tr.docChanged) {
+                view.dispatch(tr);
+            }
+        }
+        setShowDialog(false);
+    }, [view]);
+    var onCancel = React.useCallback(function () {
+        setShowDialog(false);
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", title: loc.toLanguageString(messages_1.keys.cellProperties, messages_1.messages[messages_1.keys.cellProperties]), icon: 'table-cell-properties', svgIcon: kendo_svg_icons_1.tableCellPropertiesIcon, onClick: onClick, disabled: !inTable }, utils_1.onDownPreventDefault, buttonProps)),
+        showDialog && view && React.createElement(TableCellPropertiesDialog, { view: view, onCancel: onCancel, onSave: onSave })));
+};
+exports.TableCellProperties = TableCellProperties;
+var alignData = [
+    { textKey: messages_1.keys.cellPropertiesLeftTop, text: messages_1.messages[messages_1.keys.cellPropertiesLeftTop],
+        icon: 'table-align-top-left', svgIcon: kendo_svg_icons_1.tableAlignTopLeftIcon, value: { x: 'left', y: 'top' } },
+    { textKey: messages_1.keys.cellPropertiesCenterTop, text: messages_1.messages[messages_1.keys.cellPropertiesCenterTop],
+        icon: 'table-align-top-center', svgIcon: kendo_svg_icons_1.tableAlignTopCenterIcon, value: { x: 'center', y: 'top' } },
+    { textKey: messages_1.keys.cellPropertiesRightTop, text: messages_1.messages[messages_1.keys.cellPropertiesRightTop],
+        icon: 'table-align-top-right', svgIcon: kendo_svg_icons_1.tableAlignTopRightIcon, value: { x: 'right', y: 'top' } },
+    { textKey: messages_1.keys.cellPropertiesLeftMiddle, text: messages_1.messages[messages_1.keys.cellPropertiesLeftMiddle],
+        icon: 'table-align-middle-left', svgIcon: kendo_svg_icons_1.tableAlignMiddleLeftIcon, value: { x: 'left', y: 'middle' } },
+    { textKey: messages_1.keys.cellPropertiesCenterMiddle, text: messages_1.messages[messages_1.keys.cellPropertiesCenterMiddle],
+        icon: 'table-align-middle-center', svgIcon: kendo_svg_icons_1.tableAlignMiddleCenterIcon, value: { x: 'center', y: 'middle' } },
+    { textKey: messages_1.keys.cellPropertiesRightMiddle, text: messages_1.messages[messages_1.keys.cellPropertiesRightMiddle],
+        icon: 'table-align-middle-right', svgIcon: kendo_svg_icons_1.tableAlignMiddleRightIcon, value: { x: 'right', y: 'middle' } },
+    { textKey: messages_1.keys.cellPropertiesLeftBottom, text: messages_1.messages[messages_1.keys.cellPropertiesLeftBottom],
+        icon: 'table-align-bottom-left', svgIcon: kendo_svg_icons_1.tableAlignBottomLeftIcon, value: { x: 'left', y: 'bottom' } },
+    { textKey: messages_1.keys.cellPropertiesCenterBottom, text: messages_1.messages[messages_1.keys.cellPropertiesCenterBottom],
+        icon: 'table-align-bottom-center', svgIcon: kendo_svg_icons_1.tableAlignBottomCenterIcon, value: { x: 'center', y: 'bottom' } },
+    { textKey: messages_1.keys.cellPropertiesRightBottom, text: messages_1.messages[messages_1.keys.cellPropertiesRightBottom],
+        icon: 'table-align-bottom-right', svgIcon: kendo_svg_icons_1.tableAlignBottomRightIcon, value: { x: 'right', y: 'bottom' } },
+    { textKey: messages_1.keys.cellPropertiesNoAlignment, text: messages_1.messages[messages_1.keys.cellPropertiesNoAlignment],
+        icon: 'align-remove', svgIcon: kendo_svg_icons_1.tableAlignRemoveIcon, value: { x: '', y: '' } }
+];
+var textControlData = [
+    { textKey: messages_1.keys.cellPropertiesWrap, text: messages_1.messages[messages_1.keys.cellPropertiesWrap],
+        value: '', icon: 'text-wrap', svgIcon: kendo_svg_icons_1.textWrapIcon },
+    { textKey: messages_1.keys.cellPropertiesFitToCell, text: messages_1.messages[messages_1.keys.cellPropertiesFitToCell],
+        value: 'nowrap', icon: 'parameter-string', svgIcon: kendo_svg_icons_1.parameterStringIcon }
+];
+var cellsWidth = function (cells, table, $pos) {
+    var result = {
+        cellWidth: null,
+        widthUnit: null
+    };
+    var tableNode = table.node;
+    var tablePos = $pos.start(table.depth);
+    if (!tableNode.attrs[colgroupAttr]) {
+        return result;
+    }
+    var width = new Set();
+    var value = '';
+    var colgroup = (0, kendo_editor_common_1.htmlToFragment)(tableNode.attrs[colgroupAttr]).firstChild;
+    cells.forEach(function (cell) {
+        var $cell = tableNode.resolve(cell.pos - tablePos);
+        var row = $cell.parent;
+        var cellIndex = $cell.index();
+        var colSpan = 0;
+        for (var i = 0; i <= cellIndex; i++) {
+            colSpan += row.child(i).attrs.colspan;
+        }
+        var col = colgroup.children[colSpan - 1];
+        if (col) {
+            value = col.style.width;
+            width.add(value);
+        }
+    });
+    if (width.size === 1 && value) {
+        result.cellWidth = parseFloat(value) || null;
+        result.widthUnit = (0, utils_2.getUnit)(value);
+    }
+    return result;
+};
+var cellsHeight = function (cells, table, $pos) {
+    var result = {
+        cellHeight: null,
+        heightUnit: null
+    };
+    var tableNode = table.node;
+    var tablePos = $pos.start(table.depth);
+    var height = new Set();
+    var value = '';
+    cells.forEach(function (cell) {
+        var _a;
+        var $cell = tableNode.resolve(cell.pos - tablePos);
+        var row = $cell.parent;
+        value = (0, utils_2.parseStyle)(((_a = row.attrs) === null || _a === void 0 ? void 0 : _a.style) || '').height || '';
+        height.add(value);
+    });
+    if (height.size === 1 && value) {
+        result.cellHeight = parseFloat(value) || null;
+        result.heightUnit = (0, utils_2.getUnit)(value);
+    }
+    return result;
+};
+var cellsStyle = function (cells, style) {
+    var values = new Set();
+    var value = '';
+    cells.forEach(function (cell) {
+        var _a;
+        value = (0, utils_2.parseStyle)(((_a = cell.node.attrs) === null || _a === void 0 ? void 0 : _a.style) || '')[style] || '';
+        values.add(value);
+    });
+    if (values.size === 1 && value) {
+        return value;
+    }
+    return '';
+};
+var cellsProp = function (cells, prop) {
+    var values = new Set();
+    var value = '';
+    cells.forEach(function (cell) {
+        value = (cell.node.attrs || {})[prop] || '';
+        values.add(value);
+    });
+    if (values.size === 1 && value) {
+        return value;
+    }
+    return '';
+};
+var initialData = {
+    applyToAll: false,
+    cellWidth: null,
+    widthUnit: null,
+    cellHeight: null,
+    heightUnit: null,
+    alignment: { x: '', y: '' },
+    textControl: '',
+    backgroundColor: null,
+    cellPadding: '',
+    borderWidth: null,
+    borderColor: null,
+    borderStyle: '',
+    id: '',
+    class: ''
+};
+/**
+ * @hidden
+ */
+var valueRenderWithIcon = function (element, value) {
+    if (!value) {
+        return element;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(kendo_react_inputs_1.InputPrefix, null,
+            React.createElement(kendo_react_common_1.IconWrap, { icon: value.svgIcon, name: value.icon })),
+        element));
+};
+exports.valueRenderWithIcon = valueRenderWithIcon;
+/**
+ * @hidden
+ */
+var itemRenderWithIcon = function (li, itemProps) {
+    var itemChildren = (React.createElement(React.Fragment, null,
+        React.createElement(kendo_react_inputs_1.InputPrefix, null,
+            React.createElement(kendo_react_common_1.IconWrap, { icon: itemProps.dataItem.svgIcon, name: itemProps.dataItem.icon })),
+        li.props.children));
+    return React.cloneElement(li, li.props, itemChildren);
+};
+exports.itemRenderWithIcon = itemRenderWithIcon;
+var TableCellPropertiesDialog = function (props) {
+    var defaults = React.useMemo(function () {
+        var cells = (0, exports.selectedCells)(props.view.state);
+        var $pos = props.view.state.selection.$from;
+        var table = cells.length ? parentNode($pos, function (n) { return n.type.spec.tableRole === 'table'; }) : null;
+        if (!table) {
+            return initialData;
+        }
+        return __assign(__assign(__assign(__assign({}, initialData), cellsWidth(cells, table, $pos)), cellsHeight(cells, table, $pos)), { alignment: { x: cellsStyle(cells, 'text-align'), y: cellsStyle(cells, 'vertical-align') }, textControl: cellsStyle(cells, 'white-space'), backgroundColor: cellsStyle(cells, 'background-color') || undefined, cellPadding: parseFloat(cellsStyle(cells, 'padding')) || null, borderWidth: parseFloat(cellsStyle(cells, 'border-width')) || null, borderColor: cellsStyle(cells, 'border-color') || undefined, borderStyle: cellsStyle(cells, 'border-style'), id: cellsProp(cells, 'id'), className: cellsProp(cells, 'class') });
+    }, [props.view]);
+    var loc = (0, kendo_react_intl_1.useLocalization)();
+    var applyToAll = React.useRef(null);
+    var applyToAllDef = defaults.applyToAll;
+    var cellWidth = React.useRef(null);
+    var cellWidthDef = defaults.cellWidth;
+    var widthUnit = React.useRef(null);
+    if (defaults.widthUnit && !utils_1.units.includes(defaults.widthUnit)) {
+        utils_1.units.push(defaults.widthUnit);
+    }
+    var widthUnitDef = defaults.widthUnit || '';
+    var cellHeight = React.useRef(null);
+    var cellHeightDef = defaults.cellHeight;
+    var heightUnit = React.useRef(null);
+    if (defaults.heightUnit && !utils_1.units.includes(defaults.heightUnit)) {
+        utils_1.units.push(defaults.heightUnit);
+    }
+    var heightUnitDef = defaults.heightUnit || '';
+    var alignment = React.useRef(null);
+    var alignmentDef = alignData.find(function (al) { return al.value.x !== undefined && al.value.x === defaults.alignment.x && al.value.y === defaults.alignment.y; }) || null;
+    var textControl = React.useRef(null);
+    var textControlDef = textControlData.find(function (d) { return d.value === defaults.textControl; });
+    var backgroundColor = React.useRef(null);
+    var backgroundColorDef = defaults.backgroundColor;
+    var cellPadding = React.useRef(null);
+    var cellPaddingDef = defaults.cellPadding;
+    var borderWidth = React.useRef(null);
+    var borderWidthDef = defaults.borderWidth;
+    var borderColor = React.useRef(null);
+    var borderColorDef = defaults.borderColor;
+    var borderStyle = React.useRef(null);
+    var borderStyleDef = defaults.borderStyle;
+    var id = React.useRef(null);
+    var idDef = defaults.id;
+    var className = React.useRef(null);
+    var classNameDef = defaults.className;
+    var onSave = React.useCallback(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        var data = {
+            applyToAll: (_b = (_a = applyToAll.current) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.checked,
+            cellWidth: (_c = cellWidth.current) === null || _c === void 0 ? void 0 : _c.value,
+            widthUnit: (_d = widthUnit.current) === null || _d === void 0 ? void 0 : _d.value,
+            cellHeight: (_e = cellHeight.current) === null || _e === void 0 ? void 0 : _e.value,
+            heightUnit: (_f = heightUnit.current) === null || _f === void 0 ? void 0 : _f.value,
+            alignment: (_g = alignment.current) === null || _g === void 0 ? void 0 : _g.value,
+            textControl: (_j = (_h = textControl.current) === null || _h === void 0 ? void 0 : _h.value) === null || _j === void 0 ? void 0 : _j.value,
+            backgroundColor: (_k = backgroundColor.current) === null || _k === void 0 ? void 0 : _k.value,
+            cellPadding: (_l = cellPadding.current) === null || _l === void 0 ? void 0 : _l.value,
+            borderWidth: (_m = borderWidth.current) === null || _m === void 0 ? void 0 : _m.value,
+            borderColor: (_o = borderColor.current) === null || _o === void 0 ? void 0 : _o.value,
+            borderStyle: (_p = borderStyle.current) === null || _p === void 0 ? void 0 : _p.value,
+            id: (_q = id.current) === null || _q === void 0 ? void 0 : _q.value,
+            className: (_r = className.current) === null || _r === void 0 ? void 0 : _r.value
+        };
+        props.onSave.call(undefined, data);
+    }, [props.onSave]);
+    var content = (React.createElement("div", { className: "k-form k-form-md" },
+        React.createElement("fieldset", { className: "k-form-fieldset" },
+            React.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-4 k-gap-x-4" },
+                React.createElement("div", { className: "k-form-field k-col-span-full" },
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement("span", { className: "k-checkbox-wrap" },
+                            React.createElement(kendo_react_inputs_1.Checkbox, { ref: applyToAll, defaultChecked: applyToAllDef })),
+                        React.createElement("label", { className: "k-checkbox-label" }, loc.toLanguageString(messages_1.keys.cellPropertiesApplyToAllCells, messages_1.messages[messages_1.keys.cellPropertiesApplyToAllCells])))),
+                React.createElement("div", { className: "k-form-field k-col-span-1" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(messages_1.keys.cellPropertiesWidth, messages_1.messages[messages_1.keys.cellPropertiesWidth])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(kendo_react_inputs_1.NumericTextBox, { ref: cellWidth, defaultValue: cellWidthDef, min: 0, placeholder: loc.toLanguageString(messages_1.keys.sizeAuto, messages_1.messages[messages_1.keys.sizeAuto]) }),
+                        React.createElement("div", { className: "k-form-hint" }, loc.toLanguageString(messages_1.keys.cellPropertiesApplyToColumn, messages_1.messages[messages_1.keys.cellPropertiesApplyToColumn])))),
+                React.createElement("div", { className: "k-form-field k-col-span-1" },
+                    React.createElement("label", { className: "k-label k-form-label" }, "\u00A0"),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(kendo_react_dropdowns_1.AutoComplete, { ref: widthUnit, defaultValue: widthUnitDef, data: utils_1.units, popupSettings: utils_1.popupSettings }))),
+                React.createElement("div", { className: "k-form-field k-col-span-1" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(messages_1.keys.cellPropertiesHeight, messages_1.messages[messages_1.keys.cellPropertiesHeight])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(kendo_react_inputs_1.NumericTextBox, { ref: cellHeight, defaultValue: cellHeightDef, min: 0, placeholder: loc.toLanguageString(messages_1.keys.sizeAuto, messages_1.messages[messages_1.keys.sizeAuto]) }),
+                        React.createElement("div", { className: "k-form-hint" }, loc.toLanguageString(messages_1.keys.cellPropertiesApplyToRow, messages_1.messages[messages_1.keys.cellPropertiesApplyToRow])))),
+                React.createElement("div", { className: "k-form-field k-col-span-1" },
+                    React.createElement("label", { className: "k-label k-form-label" }, "\u00A0"),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(kendo_react_dropdowns_1.AutoComplete, { ref: heightUnit, defaultValue: heightUnitDef, data: utils_1.units, popupSettings: utils_1.popupSettings }))),
+                React.createElement("div", { className: "k-form-field k-col-span-2" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(messages_1.keys.cellPropertiesAlignment, messages_1.messages[messages_1.keys.cellPropertiesAlignment])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(kendo_react_dropdowns_1.DropDownList, { ref: alignment, defaultValue: alignmentDef, data: alignData.map(function (i) { return (__assign(__assign({}, i), { text: loc.toLanguageString(i.textKey, i.text) })); }), textField: 'text', dataItemKey: 'text', popupSettings: utils_1.popupSettings, valueRender: exports.valueRenderWithIcon, itemRender: exports.itemRenderWithIcon }))),
+                React.createElement("div", { className: "k-form-field k-col-span-2" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(messages_1.keys.cellPropertiesTextControl, messages_1.messages[messages_1.keys.cellPropertiesTextControl])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(kendo_react_dropdowns_1.DropDownList, { ref: textControl, defaultValue: textControlDef, data: textControlData.map(function (i) { return (__assign(__assign({}, i), { text: loc.toLanguageString(i.textKey, i.text) })); }), textField: 'text', dataItemKey: 'value', popupSettings: utils_1.popupSettings, valueRender: exports.valueRenderWithIcon, itemRender: exports.itemRenderWithIcon }))),
+                React.createElement("div", { className: "k-form-field k-col-span-2" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(messages_1.keys.cellPropertiesCellPadding, messages_1.messages[messages_1.keys.cellPropertiesCellPadding])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(kendo_react_inputs_1.NumericTextBox, { ref: cellPadding, defaultValue: cellPaddingDef, min: 0 }))),
+                React.createElement("div", { className: "k-form-field k-col-span-2" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(messages_1.keys.cellPropertiesBackground, messages_1.messages[messages_1.keys.cellPropertiesBackground])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(kendo_react_inputs_1.ColorPicker, { ref: backgroundColor, defaultValue: backgroundColorDef }))),
+                React.createElement("div", { className: "k-form-field k-col-span-1" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(messages_1.keys.cellPropertiesBorderWidth, messages_1.messages[messages_1.keys.cellPropertiesBorderWidth])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(kendo_react_inputs_1.NumericTextBox, { ref: borderWidth, defaultValue: borderWidthDef, min: 0 }))),
+                React.createElement("div", { className: "k-form-field k-col-span-1" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(messages_1.keys.cellPropertiesBorderColor, messages_1.messages[messages_1.keys.cellPropertiesBorderColor])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(kendo_react_inputs_1.ColorPicker, { ref: borderColor, defaultValue: borderColorDef }))),
+                React.createElement("div", { className: "k-form-field k-col-span-2" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(messages_1.keys.cellPropertiesBorderStyle, messages_1.messages[messages_1.keys.cellPropertiesBorderStyle])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(kendo_react_dropdowns_1.DropDownList, { ref: borderStyle, defaultValue: borderStyleDef, popupSettings: utils_1.popupSettings, data: utils_1.borderStyles, textField: 'text', dataItemKey: 'value' }))),
+                React.createElement("div", { className: "k-form-field k-col-span-full" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(messages_1.keys.cellPropertiesId, messages_1.messages[messages_1.keys.cellPropertiesId])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(kendo_react_inputs_1.TextBox, { ref: id, defaultValue: idDef }))),
+                React.createElement("div", { className: "k-form-field k-col-span-full" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(messages_1.keys.cellPropertiesCssClass, messages_1.messages[messages_1.keys.cellPropertiesCssClass])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(kendo_react_inputs_1.TextBox, { ref: className, defaultValue: classNameDef })))))));
+    var actionButtons = [(React.createElement(kendo_react_buttons_1.Button, { themeColor: 'primary', key: "save", onClick: onSave }, loc.toLanguageString(messages_1.keys.cellPropertiesSave, messages_1.messages[messages_1.keys.cellPropertiesSave]))), (React.createElement(kendo_react_buttons_1.Button, { onClick: props.onCancel, key: "cancel" }, loc.toLanguageString(messages_1.keys.cellPropertiesCancel, messages_1.messages[messages_1.keys.cellPropertiesCancel])))];
+    return (React.createElement(kendo_react_dialogs_1.Window, { className: 'k-editor-window k-editor-table-wizard-window', title: loc.toLanguageString(messages_1.keys.cellProperties, messages_1.messages[messages_1.keys.cellProperties]), onClose: props.onCancel, key: "dialog", style: { userSelect: 'none' }, width: 408, height: 587, modal: true, minimizeButton: function () { return null; }, maximizeButton: function () { return null; }, resizable: false },
+        content,
+        React.createElement.apply(React, __spreadArray([kendo_react_dialogs_1.WindowActionsBar, { layout: 'start' }], actionButtons, false))));
+};

package/dist/npm/tools/table-wizard/tableProperties.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ToolProps } from './../ToolProps';
+/**
+ * @hidden
+ */
+export interface TablePropertiesProps extends ToolProps {
+}
+/**
+ * @hidden
+ */
+export declare const TableProperties: React.FunctionComponent<TablePropertiesProps>;