@progress/kendo-react-editor 6.1.1-dev.202311151536 → 7.0.0-develop.1

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

@@ -1,247 +0,0 @@
-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 { IconWrap } from '@progress/kendo-react-common';
-import { useLocalization } from '@progress/kendo-react-intl';
-import { messages, keys } from './../../messages';
-import { applyCellsData, cellsDefaultData } from './cellPropsUtils';
-/**
- * @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 closeDialog = React.useCallback(function () {
-        setShowDialog(false);
-        view === null || view === void 0 ? void 0 : view.focus();
-    }, [view]);
-    var onSave = React.useCallback(function (data) {
-        if (view && data) {
-            var tr = applyCellsData(view.state, data);
-            if (tr.docChanged) {
-                view.dispatch(tr);
-            }
-        }
-        closeDialog();
-    }, [view, closeDialog]);
-    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: closeDialog, 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 }
-];
-/**
- * @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 () {
-        return cellsDefaultData(props.view.state);
-    }, [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 && defaults.alignment &&
-        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 = borderStylesData.find(function (s) { return s.value === 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, _s, _t, _u, _v;
-        var data = {
-            applyToAll: Boolean((_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) || null,
-            widthUnit: ((_d = widthUnit.current) === null || _d === void 0 ? void 0 : _d.value) || '',
-            cellHeight: ((_e = cellHeight.current) === null || _e === void 0 ? void 0 : _e.value) || null,
-            heightUnit: ((_f = heightUnit.current) === null || _f === void 0 ? void 0 : _f.value) || '',
-            alignment: (_h = (_g = alignment.current) === null || _g === void 0 ? void 0 : _g.value) === null || _h === void 0 ? void 0 : _h.value,
-            textControl: (_k = (_j = textControl.current) === null || _j === void 0 ? void 0 : _j.value) === null || _k === void 0 ? void 0 : _k.value,
-            backgroundColor: (_l = backgroundColor.current) === null || _l === void 0 ? void 0 : _l.value,
-            cellPadding: typeof ((_m = cellPadding.current) === null || _m === void 0 ? void 0 : _m.value) === 'number' ? (_o = cellPadding.current) === null || _o === void 0 ? void 0 : _o.value : null,
-            borderWidth: typeof ((_p = borderWidth.current) === null || _p === void 0 ? void 0 : _p.value) === 'number' ? (_q = borderWidth.current) === null || _q === void 0 ? void 0 : _q.value : null,
-            borderColor: (_r = borderColor.current) === null || _r === void 0 ? void 0 : _r.value,
-            borderStyle: ((_t = (_s = borderStyle.current) === null || _s === void 0 ? void 0 : _s.value) === null || _t === void 0 ? void 0 : _t.value) || null,
-            id: String(((_u = id.current) === null || _u === void 0 ? void 0 : _u.value) || ''),
-            className: String(((_v = className.current) === null || _v === void 0 ? void 0 : _v.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

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

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

@@ -1,294 +0,0 @@
-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, NumericTextBox, TextBox } from '@progress/kendo-react-inputs';
-import { AutoComplete, DropDownList } from '@progress/kendo-react-dropdowns';
-import { Window, WindowActionsBar } from '@progress/kendo-react-dialogs';
-import { TabStrip, TabStripTab } from '@progress/kendo-react-layout';
-import { tableAlignMiddleCenterIcon, tableAlignMiddleLeftIcon, tableAlignMiddleRightIcon, tableAlignRemoveIcon, tablePropertiesIcon, tablePositionStartIcon, tablePositionCenterIcon, tablePositionEndIcon, positionTopIcon, positionBottomIcon } from '@progress/kendo-svg-icons';
-import { borderStyles, onDownPreventDefault, popupSettings, units, parentNode } from './../utils';
-import { itemRenderWithIcon, valueRenderWithIcon } from './tableCellProperties';
-import { useLocalization } from '@progress/kendo-react-intl';
-import { messages, keys } from './../../messages';
-import { applyTableData, initialTableData, tableDefaultData, tablePositionStyles } from './tablePropsUtils';
-/**
- * @hidden
- */
-export var TableProperties = function (props) {
-    var view = props.view, buttonProps = __rest(props, ["view"]);
-    var loc = useLocalization();
-    var _a = React.useState(false), showDialog = _a[0], setShowDialog = _a[1];
-    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 closeDialog = React.useCallback(function () {
-        setShowDialog(false);
-        view === null || view === void 0 ? void 0 : view.focus();
-    }, [view]);
-    var onSave = React.useCallback(function (data) {
-        if (view && data) {
-            var tr = applyTableData(view.state, data);
-            if (tr) {
-                view.dispatch(tr);
-            }
-        }
-        closeDialog();
-    }, [view, closeDialog]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, __assign({ type: "button", title: loc.toLanguageString(keys.tableProperties, messages[keys.tableProperties]), icon: 'table-properties', svgIcon: tablePropertiesIcon, onClick: onClick, disabled: !inTable }, onDownPreventDefault, buttonProps)),
-        showDialog && React.createElement(TablePropertiesDialog, { onClose: closeDialog, onSave: onSave, view: view })));
-};
-var alignData = [
-    { textKey: keys.tablePropertiesAlignLeft, text: messages[keys.tablePropertiesAlignLeft],
-        value: 'left', icon: 'table-align-middle-left', svgIcon: tableAlignMiddleLeftIcon },
-    { textKey: keys.tablePropertiesAlignCenter, text: messages[keys.tablePropertiesAlignCenter],
-        value: 'center', icon: 'table-align-middle-center', svgIcon: tableAlignMiddleCenterIcon },
-    { textKey: keys.tablePropertiesAlignRight, text: messages[keys.tablePropertiesAlignRight],
-        value: 'right', icon: 'table-align-middle-right', svgIcon: tableAlignMiddleRightIcon },
-    { textKey: keys.tablePropertiesNoAlignment, text: messages[keys.tablePropertiesNoAlignment],
-        value: '', icon: 'align-remove', svgIcon: tableAlignRemoveIcon }
-];
-var tablePosition = [{
-        textKey: keys.tablePropertiesLeft,
-        text: messages[keys.tablePropertiesLeft],
-        value: 'left',
-        style: {},
-        icon: 'table-position-left',
-        svgIcon: tablePositionStartIcon
-    }, {
-        textKey: keys.tablePropertiesCenter,
-        text: messages[keys.tablePropertiesCenter],
-        value: 'center',
-        style: {},
-        icon: 'table-position-center',
-        svgIcon: tablePositionCenterIcon
-    }, {
-        textKey: keys.tablePropertiesRight,
-        text: messages[keys.tablePropertiesRight],
-        value: 'right',
-        style: {},
-        icon: 'table-position-right',
-        svgIcon: tablePositionEndIcon
-    }].map(function (p) { return (__assign(__assign({}, p), { style: tablePositionStyles[p.value] })); });
-var captionPositionData = [{
-        textKey: keys.tablePropertiesTop,
-        text: messages[keys.tablePropertiesTop],
-        value: 'top',
-        icon: 'position-top',
-        svgIcon: positionTopIcon
-    }, {
-        textKey: keys.tablePropertiesBottom,
-        text: messages[keys.tablePropertiesBottom],
-        value: 'bottom',
-        icon: 'position-bottom',
-        svgIcon: positionBottomIcon
-    }];
-var associateHeadersData = [
-    { textKey: keys.tablePropertiesNone, text: messages[keys.tablePropertiesNone], value: 'none' },
-    { textKey: keys.tablePropertiesUsingScopeAttribute, text: messages[keys.tablePropertiesUsingScopeAttribute], value: 'scope' },
-    { textKey: keys.tablePropertiesUsingIdAttributes, text: messages[keys.tablePropertiesUsingIdAttributes], value: 'id' }
-];
-var TablePropertiesDialog = function (props) {
-    var defaults = React.useMemo(function () {
-        var state = props.view && props.view.state;
-        var data = state ? tableDefaultData(state) : initialTableData;
-        return data;
-    }, [props.view]);
-    var loc = useLocalization();
-    var _a = React.useState(0), selected = _a[0], setSelected = _a[1];
-    var onSelect = React.useCallback(function (event) {
-        setSelected(event.selected);
-    }, []);
-    // General tab refs
-    var rows = React.useRef(null);
-    var columns = React.useRef(null);
-    var width = React.useRef(null);
-    var height = React.useRef(null);
-    var cellSpacing = React.useRef(null);
-    var cellPadding = React.useRef(null);
-    var borderWidth = React.useRef(null);
-    var widthUnit = React.useRef(null);
-    var heightUnit = React.useRef(null);
-    var position = React.useRef(null);
-    var alignment = React.useRef(null);
-    var borderStyle = React.useRef(null);
-    var backgroundColor = React.useRef(null);
-    var borderColor = React.useRef(null);
-    var collapseBorders = React.useRef(null);
-    // Advanced tab refs
-    var id = React.useRef(null);
-    var className = React.useRef(null);
-    var caption = React.useRef(null);
-    var headerRows = React.useRef(null);
-    var headerColumns = React.useRef(null);
-    var captionAlignment = React.useRef(null);
-    var captionPosition = React.useRef(null);
-    var associateHeaders = React.useRef(null);
-    var onSave = React.useCallback(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
-        var data = {
-            rows: ((_a = rows.current) === null || _a === void 0 ? void 0 : _a.value) || 0,
-            columns: ((_b = columns.current) === null || _b === void 0 ? void 0 : _b.value) || 0,
-            width: width.current ? width.current.value : null,
-            height: height.current ? height.current.value : null,
-            cellSpacing: cellSpacing.current ? cellSpacing.current.value : null,
-            cellPadding: cellPadding.current ? cellPadding.current.value : null,
-            borderWidth: borderWidth.current ? borderWidth.current.value : null,
-            widthUnit: ((_c = widthUnit.current) === null || _c === void 0 ? void 0 : _c.value) || '',
-            heightUnit: ((_d = heightUnit.current) === null || _d === void 0 ? void 0 : _d.value) || '',
-            position: ((_f = (_e = position.current) === null || _e === void 0 ? void 0 : _e.value) === null || _f === void 0 ? void 0 : _f.value) || null,
-            textAlign: ((_g = alignment.current) === null || _g === void 0 ? void 0 : _g.value) ? alignment.current.value.value : null,
-            borderStyle: ((_h = borderStyle.current) === null || _h === void 0 ? void 0 : _h.value) ? borderStyle.current.value.value : null,
-            backgroundColor: (_j = backgroundColor.current) === null || _j === void 0 ? void 0 : _j.value,
-            borderColor: (_k = borderColor.current) === null || _k === void 0 ? void 0 : _k.value,
-            collapseBorders: Boolean((_m = (_l = collapseBorders.current) === null || _l === void 0 ? void 0 : _l.element) === null || _m === void 0 ? void 0 : _m.checked),
-            id: String(((_o = id.current) === null || _o === void 0 ? void 0 : _o.value) || ''),
-            className: String(((_p = className.current) === null || _p === void 0 ? void 0 : _p.value) || ''),
-            caption: String(((_q = caption.current) === null || _q === void 0 ? void 0 : _q.value) || ''),
-            headerRows: ((_r = headerRows.current) === null || _r === void 0 ? void 0 : _r.value) || 0,
-            headerColumns: ((_s = headerColumns.current) === null || _s === void 0 ? void 0 : _s.value) || 0,
-            captionAlignment: ((_t = captionAlignment.current) === null || _t === void 0 ? void 0 : _t.value) ? captionAlignment.current.value.value : null,
-            captionPosition: ((_u = captionPosition.current) === null || _u === void 0 ? void 0 : _u.value) ? captionPosition.current.value.value : null,
-            associateHeaders: ((_v = associateHeaders.current) === null || _v === void 0 ? void 0 : _v.value) ? associateHeaders.current.value.value : 'none'
-        };
-        props.onSave.call(undefined, data);
-    }, [props.onSave]);
-    var general = (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-2" },
-                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesRows, messages[keys.tablePropertiesRows])),
-                    React.createElement("div", { className: "k-form-field-wrap" },
-                        React.createElement(NumericTextBox, { ref: rows, defaultValue: defaults.rows, min: 1 }))),
-                React.createElement("div", { className: "k-form-field k-col-span-2" },
-                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesColumns, messages[keys.tablePropertiesColumns])),
-                    React.createElement("div", { className: "k-form-field-wrap" },
-                        React.createElement(NumericTextBox, { ref: columns, defaultValue: defaults.columns, min: 1 }))),
-                React.createElement("div", { className: "k-form-field k-col-span-1" },
-                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesWidth, messages[keys.tablePropertiesWidth])),
-                    React.createElement("div", { className: "k-form-field-wrap" },
-                        React.createElement(NumericTextBox, { ref: width, defaultValue: defaults.width, min: 0, placeholder: loc.toLanguageString(keys.sizeAuto, messages[keys.sizeAuto]) }))),
-                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: defaults.widthUnit, 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.tablePropertiesHeight, messages[keys.tablePropertiesHeight])),
-                    React.createElement("div", { className: "k-form-field-wrap" },
-                        React.createElement(NumericTextBox, { ref: height, defaultValue: defaults.height, min: 0, placeholder: loc.toLanguageString(keys.sizeAuto, messages[keys.sizeAuto]) }))),
-                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: defaults.heightUnit, data: units.filter(function (x) { return x !== '%'; }), 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.tablePropertiesPosition, messages[keys.tablePropertiesPosition])),
-                    React.createElement("div", { className: "k-form-field-wrap" },
-                        React.createElement(DropDownList, { ref: position, defaultValue: tablePosition.find(function (p) { return p.value === defaults.position; }), popupSettings: popupSettings, data: tablePosition.map(function (i) { return (__assign(__assign({}, i), { text: loc.toLanguageString(i.textKey, i.text) })); }), textField: 'text', dataItemKey: 'value', 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.tablePropertiesAlignment, messages[keys.tablePropertiesAlignment])),
-                    React.createElement("div", { className: "k-form-field-wrap" },
-                        React.createElement(DropDownList, { ref: alignment, defaultValue: alignData.find(function (a) { return a.value === defaults.textAlign; }), data: alignData.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.tablePropertiesCellSpacing, messages[keys.tablePropertiesCellSpacing])),
-                    React.createElement("div", { className: "k-form-field-wrap" },
-                        React.createElement(NumericTextBox, { ref: cellSpacing, defaultValue: defaults.cellSpacing, placeholder: loc.toLanguageString(keys.sizeAuto, messages[keys.sizeAuto]), 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.tablePropertiesCellPadding, messages[keys.tablePropertiesCellPadding])),
-                    React.createElement("div", { className: "k-form-field-wrap" },
-                        React.createElement(NumericTextBox, { ref: cellPadding, defaultValue: defaults.cellPadding, placeholder: loc.toLanguageString(keys.sizeAuto, messages[keys.sizeAuto]), min: 0 }))),
-                React.createElement("div", { className: "k-form-field k-col-span-full" },
-                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesTableBackground, messages[keys.tablePropertiesTableBackground])),
-                    React.createElement("div", { className: "k-form-field-wrap" },
-                        React.createElement(ColorPicker, { ref: backgroundColor, defaultValue: defaults.backgroundColor }))),
-                React.createElement("div", { className: "k-form-field k-col-span-1" },
-                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesBorderWidth, messages[keys.tablePropertiesBorderWidth])),
-                    React.createElement("div", { className: "k-form-field-wrap" },
-                        React.createElement(NumericTextBox, { ref: borderWidth, defaultValue: defaults.borderWidth, 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.tablePropertiesBorderColor, messages[keys.tablePropertiesBorderColor])),
-                    React.createElement("div", { className: "k-form-field-wrap" },
-                        React.createElement(ColorPicker, { ref: borderColor, defaultValue: defaults.borderColor }))),
-                React.createElement("div", { className: "k-form-field k-col-span-2" },
-                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesBorderStyle, messages[keys.tablePropertiesBorderStyle])),
-                    React.createElement("div", { className: "k-form-field-wrap" },
-                        React.createElement(DropDownList, { ref: borderStyle, defaultValue: borderStyles.find(function (s) { return s.value === defaults.borderStyle; }), popupSettings: popupSettings, data: borderStyles.map(function (i) { return (__assign(__assign({}, i), { text: loc.toLanguageString(i.textKey, i.text) })); }), textField: 'text', dataItemKey: 'value' }))),
-                React.createElement("div", { className: "k-form-field k-col-span-full" },
-                    React.createElement("div", { className: "k-form-field-wrap" },
-                        React.createElement(Checkbox, { ref: collapseBorders, className: "k-checkbox-wrap", label: loc.toLanguageString(keys.tablePropertiesCollapseBorders, messages[keys.tablePropertiesCollapseBorders]), defaultChecked: defaults.collapseBorders })))))));
-    var advanced = (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" },
-                React.createElement("div", { className: "k-form-field" },
-                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesId, messages[keys.tablePropertiesId])),
-                    React.createElement("div", { className: "k-form-field-wrap" },
-                        React.createElement(TextBox, { ref: id, defaultValue: defaults.id }))),
-                React.createElement("div", { className: "k-form-field" },
-                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesCssClass, messages[keys.tablePropertiesCssClass])),
-                    React.createElement("div", { className: "k-form-field-wrap" },
-                        React.createElement(TextBox, { ref: className, defaultValue: defaults.className }))),
-                React.createElement("fieldset", { className: "k-form-fieldset" },
-                    React.createElement("legend", { className: "k-form-legend" }, loc.toLanguageString(keys.tablePropertiesAccessibility, messages[keys.tablePropertiesAccessibility])),
-                    React.createElement("div", { className: "k-d-grid k-grid-cols-4 k-gap-x-4" },
-                        React.createElement("div", { className: "k-form-field k-col-span-full" },
-                            React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesCaption, messages[keys.tablePropertiesCaption])),
-                            React.createElement("div", { className: "k-form-field-wrap" },
-                                React.createElement(TextBox, { ref: caption, defaultValue: defaults.caption }))),
-                        React.createElement("div", { className: "k-form-field k-col-span-2" },
-                            React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesCaptionPosition, messages[keys.tablePropertiesCaptionPosition])),
-                            React.createElement("div", { className: "k-form-field-wrap" },
-                                React.createElement(DropDownList, { ref: captionPosition, defaultValue: captionPositionData.find(function (i) { return i.value === defaults.captionPosition; }), data: captionPositionData.map(function (i) { return (__assign(__assign({}, i), { text: loc.toLanguageString(i.textKey, i.text) })); }), popupSettings: popupSettings, textField: 'text', dataItemKey: 'value', 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.tablePropertiesCaptionAlignment, messages[keys.tablePropertiesCaptionAlignment])),
-                            React.createElement("div", { className: "k-form-field-wrap" },
-                                React.createElement(DropDownList, { ref: captionAlignment, defaultValue: alignData.find(function (i) { return i.value === defaults.captionAlignment; }), data: alignData.map(function (i) { return (__assign(__assign({}, i), { text: loc.toLanguageString(i.textKey, i.text) })); }), popupSettings: popupSettings, textField: 'text', dataItemKey: 'value', valueRender: valueRenderWithIcon, itemRender: itemRenderWithIcon }))),
-                        React.createElement("div", { className: "k-form-field k-col-span-1" },
-                            React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesHeaderRows, messages[keys.tablePropertiesHeaderRows])),
-                            React.createElement("div", { className: "k-form-field-wrap" },
-                                React.createElement(NumericTextBox, { ref: headerRows, defaultValue: defaults.headerRows, 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.tablePropertiesHeaderCols, messages[keys.tablePropertiesHeaderCols])),
-                            React.createElement("div", { className: "k-form-field-wrap" },
-                                React.createElement(NumericTextBox, { ref: headerColumns, defaultValue: defaults.headerColumns, 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.tablePropertiesAssociateHeaders, messages[keys.tablePropertiesAssociateHeaders])),
-                            React.createElement("div", { className: "k-form-field-wrap" },
-                                React.createElement(DropDownList, { ref: associateHeaders, defaultValue: associateHeadersData.find(function (i) { return i.value === defaults.associateHeaders; }), data: associateHeadersData.map(function (i) { return (__assign(__assign({}, i), { text: loc.toLanguageString(i.textKey, i.text) })); }), popupSettings: popupSettings, textField: 'text', dataItemKey: 'value' })))))))));
-    var content = (React.createElement(TabStrip, { selected: selected, onSelect: onSelect, animation: false, keepTabsMounted: true },
-        React.createElement(TabStripTab, { title: loc.toLanguageString(keys.tablePropertiesGeneral, messages[keys.tablePropertiesGeneral]) }, general),
-        React.createElement(TabStripTab, { title: loc.toLanguageString(keys.tablePropertiesAdvanced, messages[keys.tablePropertiesAdvanced]) }, advanced)));
-    var actionButtons = [(React.createElement(Button, { themeColor: 'primary', key: "save", onClick: onSave }, loc.toLanguageString(keys.tablePropertiesSave, messages[keys.tablePropertiesSave]))), (React.createElement(Button, { onClick: props.onClose, key: "cancel" }, loc.toLanguageString(keys.tablePropertiesCancel, messages[keys.tablePropertiesCancel])))];
-    return (React.createElement(Window, { className: 'k-editor-window k-editor-table-wizard-window', title: loc.toLanguageString(keys.tableProperties, messages[keys.tableProperties]), onClose: props.onClose, key: "dialog", style: { userSelect: 'none' }, width: 480, height: 630, modal: true, minimizeButton: function () { return null; }, maximizeButton: function () { return null; }, resizable: false },
-        content,
-        React.createElement.apply(React, __spreadArray([WindowActionsBar, { layout: 'start' }], actionButtons, false))));
-};