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

package/dist/es/tools/insertTable/tool.js

@@ -37,7 +37,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { Button } from '@progress/kendo-react-buttons';
-import { onDownPreventDefault } from './../utils';
+import { onDownPreventDefault, parentNode } from './../utils';
 import { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
 import { messages } from './../../messages';
 import { InsertTablePopupNS } from './popup';
@@ -93,7 +93,8 @@ export var InsertTableToolNS;
                 var _b = settings.messages, createTableMsgKey = _b.createTable, createTableHint = _b.createTableHint;
                 var createTableMsg = localization.toLanguageString(createTableMsgKey, messages[createTableMsgKey]);
                 var createTableHintMsg = localization.toLanguageString(createTableHint, messages[createTableHint]);
-                var disabled = !state || !canInsert(state, state.schema.nodes.table);
+                var disabled = Boolean(!state || !canInsert(state, state.schema.nodes.table) ||
+                    parentNode(state.selection.$from, function (node) { return node.type.name === 'table_caption_external'; }));
                 var rendering = [(React.createElement(Button, __assign({ onClick: disabled ? undefined : this.togglePopup, "aria-disabled": disabled ? true : undefined, ref: function (e) { return _this.button = e && e.element; }, key: "InsertTable" }, onDownPreventDefault, { title: createTableMsg }, settings.props, props, { className: classNames(props.className, settings.props.className, { 'k-disabled': disabled }) }))), (view && !disabled && (React.createElement(InsertTablePopupNS.InsertTablePopup, { key: "insertTablePopup", createTableMessage: createTableMsg, createTableHintMessage: createTableHintMsg, dir: props.dir, anchor: this.button, show: this.state.openedPopup, onClose: this.closePopup, onTableInsert: this.onTableInsert })) || null)];
                 return render ? render.call(undefined, rendering, { view: view }) : rendering;
             };

package/dist/es/tools/main.d.ts

@@ -19,6 +19,8 @@ import { SelectAllProps as SelectAllToolProps } from './selectAll';
 import { CleanFormattingProps as CleanFormattingToolProps } from './cleanFormatting';
 import { FindAndReplace as FindAndReplaceTool, FindAndReplaceProps as FindAndReplaceToolProps } from './findReplace';
 import { ButtonProps } from '@progress/kendo-react-buttons';
+import { TableCellPropertiesProps as TableCellPropertiesToolProps } from './table-wizard/tableCellProperties';
+import { TablePropertiesProps as TablePropertiesToolProps } from './table-wizard/tableProperties';
 /**
  * Represents a wrapping namespace for the tool components, props, and functions of the Editor.
  */
@@ -395,6 +397,24 @@ export declare namespace EditorTools {
      * Will render a SplitButton which applies `<ul>` HTML element with predefined styles - upper-roman, lower-roman, upper-latin and lower-latin.
      */
     export const NumberedList: (props: any) => JSX.Element;
+    /**
+     * The TableCellProperties tool component.
+     */
+    export const TableCellProperties: React.FunctionComponent<TableCellPropertiesToolProps>;
+    /**
+     * The props for the TableCellProperties tool component of the Editor.
+     */
+    export interface TableCellPropertiesProps extends TableCellPropertiesToolProps {
+    }
+    /**
+     * The TableProperties tool component.
+     */
+    export const TableProperties: React.FunctionComponent<TablePropertiesToolProps>;
+    /**
+     * The props for the TableProperties tool component of the Editor.
+     */
+    export interface TablePropertiesProps extends TablePropertiesToolProps {
+    }
     /**
      * The props for the Outdent tool component of the Editor.
      */

package/dist/es/tools/main.js

@@ -48,6 +48,8 @@ import { CleanFormatting as CleanFormattingTool } from './cleanFormatting';
 import { FindAndReplace as FindAndReplaceTool } from './findReplace';
 import { ListTool } from './lists-styled';
 import { listLatinBigIcon, listLatinSmallIcon, listOrderedIcon, listRomanLowerIcon, listRomanUpperIcon, listUnorderedIcon, listUnorderedOutlineIcon, listUnorderedSquareIcon } from '@progress/kendo-svg-icons';
+import { TableCellProperties as TableCellPropertiesTool } from './table-wizard/tableCellProperties';
+import { TableProperties as TablePropertiesTool } from './table-wizard/tableProperties';
 /**
  * Represents a wrapping namespace for the tool components, props, and functions of the Editor.
  */
@@ -435,6 +437,16 @@ export var EditorTools;
         ];
         return (React.createElement(ListTool, __assign({ listType: EditorToolsSettings.orderedList.listType, items: olItems, icon: "list-ordered", svgIcon: listOrderedIcon, titleKey: EditorToolsSettings.orderedList.messages.title }, props)));
     };
+    /**
+     * The TableCellProperties tool component.
+     */
+    EditorTools.TableCellProperties = TableCellPropertiesTool;
+    ;
+    /**
+     * The TableProperties tool component.
+     */
+    EditorTools.TableProperties = TablePropertiesTool;
+    ;
     /**
      * Creates the Outdent tool component of the Editor.
      *

package/dist/es/tools/table-wizard/tableCellProperties.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { ListItemProps } from '@progress/kendo-react-dropdowns';
+import { ToolProps } from '../ToolProps';
+import { EditorState, Node } from '@progress/kendo-editor-common';
+/**
+ * @hidden
+ */
+export declare const selectedCells: (state: EditorState) => Array<{
+    node: Node;
+    pos: number;
+}>;
+/**
+ * @hidden
+ */
+export declare const tableCells: (state: EditorState) => Array<{
+    node: Node;
+    pos: number;
+}>;
+/**
+ * @hidden
+ */
+export interface TableCellPropertiesProps extends ToolProps {
+}
+/**
+ * @hidden
+ */
+export declare const TableCellProperties: React.FunctionComponent<TableCellPropertiesProps>;
+/**
+ * @hidden
+ */
+export declare const valueRenderWithIcon: (element: React.ReactElement<HTMLSpanElement>, value: any) => JSX.Element;
+/**
+ * @hidden
+ */
+export declare const itemRenderWithIcon: (li: React.ReactElement<any>, itemProps: ListItemProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

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

@@ -0,0 +1,471 @@
+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));
+};
+import * as React from 'react';
+import { Button } from '@progress/kendo-react-buttons';
+import { Checkbox, ColorPicker, InputPrefix, NumericTextBox, TextBox } from '@progress/kendo-react-inputs';
+import { AutoComplete, DropDownList } from '@progress/kendo-react-dropdowns';
+import { Window, WindowActionsBar } from '@progress/kendo-react-dialogs';
+import { tableAlignBottomCenterIcon, tableAlignBottomLeftIcon, tableAlignBottomRightIcon, tableAlignMiddleCenterIcon, tableAlignMiddleLeftIcon, tableAlignMiddleRightIcon, tableAlignTopCenterIcon, tableAlignTopLeftIcon, tableAlignTopRightIcon, tableAlignRemoveIcon, tableCellPropertiesIcon, textWrapIcon, parameterStringIcon } from '@progress/kendo-svg-icons';
+import { borderStyles as borderStylesData, onDownPreventDefault, popupSettings, units, parentNode } from '../utils';
+import { TableMap, htmlToFragment } from '@progress/kendo-editor-common';
+import { getUnit, parseStyle, setNodeStyle } from './utils';
+import { IconWrap } from '@progress/kendo-react-common';
+import { useLocalization } from '@progress/kendo-react-intl';
+import { messages, keys } from './../../messages';
+var colgroupAttr = 'k-colgroup-data';
+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
+ */
+export 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 [];
+};
+/**
+ * @hidden
+ */
+export var tableCells = function (state) {
+    var cells = [];
+    if (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 = 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;
+};
+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 = 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, 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 = setNodeStyle(attrs, 'border-color', data.borderColor || '');
+        attrs = setNodeStyle(attrs, 'border-style', ((_b = data.borderStyle) === null || _b === void 0 ? void 0 : _b.value) || '');
+        attrs = setNodeStyle(attrs, 'border-width', typeof data.borderWidth === 'number' ? data.borderWidth + 'px' : '');
+        attrs = setNodeStyle(attrs, 'padding', typeof data.cellPadding === 'number' ? data.cellPadding + 'px' : '');
+        attrs = setNodeStyle(attrs, 'background-color', data.backgroundColor || '');
+        attrs = setNodeStyle(attrs, 'text-align', ((_c = data.alignment) === null || _c === void 0 ? void 0 : _c.value.x) || '');
+        attrs = setNodeStyle(attrs, 'vertical-align', ((_d = data.alignment) === null || _d === void 0 ? void 0 : _d.value.y) || '');
+        attrs = 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
+ */
+export 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 = 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 ? tableCells(view.state) : 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(Button, __assign({ type: "button", title: loc.toLanguageString(keys.cellProperties, messages[keys.cellProperties]), icon: 'table-cell-properties', svgIcon: tableCellPropertiesIcon, onClick: onClick, disabled: !inTable }, onDownPreventDefault, buttonProps)),
+        showDialog && view && React.createElement(TableCellPropertiesDialog, { view: view, onCancel: onCancel, onSave: onSave })));
+};
+var alignData = [
+    { textKey: keys.cellPropertiesLeftTop, text: messages[keys.cellPropertiesLeftTop],
+        icon: 'table-align-top-left', svgIcon: tableAlignTopLeftIcon, value: { x: 'left', y: 'top' } },
+    { textKey: keys.cellPropertiesCenterTop, text: messages[keys.cellPropertiesCenterTop],
+        icon: 'table-align-top-center', svgIcon: tableAlignTopCenterIcon, value: { x: 'center', y: 'top' } },
+    { textKey: keys.cellPropertiesRightTop, text: messages[keys.cellPropertiesRightTop],
+        icon: 'table-align-top-right', svgIcon: tableAlignTopRightIcon, value: { x: 'right', y: 'top' } },
+    { textKey: keys.cellPropertiesLeftMiddle, text: messages[keys.cellPropertiesLeftMiddle],
+        icon: 'table-align-middle-left', svgIcon: tableAlignMiddleLeftIcon, value: { x: 'left', y: 'middle' } },
+    { textKey: keys.cellPropertiesCenterMiddle, text: messages[keys.cellPropertiesCenterMiddle],
+        icon: 'table-align-middle-center', svgIcon: tableAlignMiddleCenterIcon, value: { x: 'center', y: 'middle' } },
+    { textKey: keys.cellPropertiesRightMiddle, text: messages[keys.cellPropertiesRightMiddle],
+        icon: 'table-align-middle-right', svgIcon: tableAlignMiddleRightIcon, value: { x: 'right', y: 'middle' } },
+    { textKey: keys.cellPropertiesLeftBottom, text: messages[keys.cellPropertiesLeftBottom],
+        icon: 'table-align-bottom-left', svgIcon: tableAlignBottomLeftIcon, value: { x: 'left', y: 'bottom' } },
+    { textKey: keys.cellPropertiesCenterBottom, text: messages[keys.cellPropertiesCenterBottom],
+        icon: 'table-align-bottom-center', svgIcon: tableAlignBottomCenterIcon, value: { x: 'center', y: 'bottom' } },
+    { textKey: keys.cellPropertiesRightBottom, text: messages[keys.cellPropertiesRightBottom],
+        icon: 'table-align-bottom-right', svgIcon: tableAlignBottomRightIcon, value: { x: 'right', y: 'bottom' } },
+    { textKey: keys.cellPropertiesNoAlignment, text: messages[keys.cellPropertiesNoAlignment],
+        icon: 'align-remove', svgIcon: tableAlignRemoveIcon, value: { x: '', y: '' } }
+];
+var textControlData = [
+    { textKey: keys.cellPropertiesWrap, text: messages[keys.cellPropertiesWrap],
+        value: '', icon: 'text-wrap', svgIcon: textWrapIcon },
+    { textKey: keys.cellPropertiesFitToCell, text: messages[keys.cellPropertiesFitToCell],
+        value: 'nowrap', icon: 'parameter-string', svgIcon: 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 = 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 = 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 = 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 = getUnit(value);
+    }
+    return result;
+};
+var cellsStyle = function (cells, style) {
+    var values = new Set();
+    var value = '';
+    cells.forEach(function (cell) {
+        var _a;
+        value = 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
+ */
+export var valueRenderWithIcon = function (element, value) {
+    if (!value) {
+        return element;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InputPrefix, null,
+            React.createElement(IconWrap, { icon: value.svgIcon, name: value.icon })),
+        element));
+};
+/**
+ * @hidden
+ */
+export var itemRenderWithIcon = function (li, itemProps) {
+    var itemChildren = (React.createElement(React.Fragment, null,
+        React.createElement(InputPrefix, null,
+            React.createElement(IconWrap, { icon: itemProps.dataItem.svgIcon, name: itemProps.dataItem.icon })),
+        li.props.children));
+    return React.cloneElement(li, li.props, itemChildren);
+};
+var TableCellPropertiesDialog = function (props) {
+    var defaults = React.useMemo(function () {
+        var cells = 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 = 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 && !units.includes(defaults.widthUnit)) {
+        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 && !units.includes(defaults.heightUnit)) {
+        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(Checkbox, { ref: applyToAll, defaultChecked: applyToAllDef })),
+                        React.createElement("label", { className: "k-checkbox-label" }, loc.toLanguageString(keys.cellPropertiesApplyToAllCells, messages[keys.cellPropertiesApplyToAllCells])))),
+                React.createElement("div", { className: "k-form-field k-col-span-1" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.cellPropertiesWidth, messages[keys.cellPropertiesWidth])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(NumericTextBox, { ref: cellWidth, defaultValue: cellWidthDef, min: 0, placeholder: loc.toLanguageString(keys.sizeAuto, messages[keys.sizeAuto]) }),
+                        React.createElement("div", { className: "k-form-hint" }, loc.toLanguageString(keys.cellPropertiesApplyToColumn, messages[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(AutoComplete, { ref: widthUnit, defaultValue: widthUnitDef, data: units, popupSettings: popupSettings }))),
+                React.createElement("div", { className: "k-form-field k-col-span-1" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.cellPropertiesHeight, messages[keys.cellPropertiesHeight])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(NumericTextBox, { ref: cellHeight, defaultValue: cellHeightDef, min: 0, placeholder: loc.toLanguageString(keys.sizeAuto, messages[keys.sizeAuto]) }),
+                        React.createElement("div", { className: "k-form-hint" }, loc.toLanguageString(keys.cellPropertiesApplyToRow, messages[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(AutoComplete, { ref: heightUnit, defaultValue: heightUnitDef, data: units, popupSettings: popupSettings }))),
+                React.createElement("div", { className: "k-form-field k-col-span-2" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.cellPropertiesAlignment, messages[keys.cellPropertiesAlignment])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(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: popupSettings, valueRender: valueRenderWithIcon, itemRender: itemRenderWithIcon }))),
+                React.createElement("div", { className: "k-form-field k-col-span-2" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.cellPropertiesTextControl, messages[keys.cellPropertiesTextControl])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(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: popupSettings, valueRender: valueRenderWithIcon, itemRender: itemRenderWithIcon }))),
+                React.createElement("div", { className: "k-form-field k-col-span-2" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.cellPropertiesCellPadding, messages[keys.cellPropertiesCellPadding])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(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(keys.cellPropertiesBackground, messages[keys.cellPropertiesBackground])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(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(keys.cellPropertiesBorderWidth, messages[keys.cellPropertiesBorderWidth])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(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(keys.cellPropertiesBorderColor, messages[keys.cellPropertiesBorderColor])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(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(keys.cellPropertiesBorderStyle, messages[keys.cellPropertiesBorderStyle])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(DropDownList, { ref: borderStyle, defaultValue: borderStyleDef, popupSettings: popupSettings, data: borderStylesData, 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(keys.cellPropertiesId, messages[keys.cellPropertiesId])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(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(keys.cellPropertiesCssClass, messages[keys.cellPropertiesCssClass])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(TextBox, { ref: className, defaultValue: classNameDef })))))));
+    var actionButtons = [(React.createElement(Button, { themeColor: 'primary', key: "save", onClick: onSave }, loc.toLanguageString(keys.cellPropertiesSave, messages[keys.cellPropertiesSave]))), (React.createElement(Button, { onClick: props.onCancel, key: "cancel" }, loc.toLanguageString(keys.cellPropertiesCancel, messages[keys.cellPropertiesCancel])))];
+    return (React.createElement(Window, { className: 'k-editor-window k-editor-table-wizard-window', title: loc.toLanguageString(keys.cellProperties, messages[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([WindowActionsBar, { layout: 'start' }], actionButtons, false))));
+};

package/dist/es/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>;