@michalrakus/x-react-web-lib 1.20.0 → 1.22.0

package/XFormHeader.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/XFormHeader';

package/XFormHeader.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/components/XFormHeader.js');

package/XParamBrowse.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/administration/XParamBrowse';

package/XParamBrowse.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/administration/XParamBrowse.js');

package/XParamForm.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/administration/XParamForm';

package/XParamForm.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/administration/XParamForm.js');

package/gulpfile.js

@@ -13,10 +13,12 @@ function generateApi(cb) {
     const fs = require('fs');
 
     const apiFileList = [
-        "./lib/administration/XUserBrowse",
-        "./lib/administration/XUserForm",
         "./lib/administration/XBrowseMetaBrowse",
         "./lib/administration/XBrowseMetaForm",
+        "./lib/administration/XParamBrowse",
+        "./lib/administration/XParamForm",
+        "./lib/administration/XUserBrowse",
+        "./lib/administration/XUserForm",
 
         "./lib/components/XFormRowCol/XFormCol",
         "./lib/components/XFormRowCol/XFormInlineRow",
@@ -51,6 +53,7 @@ function generateApi(cb) {
         "./lib/components/XFormBaseT",
         "./lib/components/XFormDataTable2",
         "./lib/components/XFormFooter",
+        "./lib/components/XFormHeader",
         "./lib/components/XFormNavigator3",
         "./lib/components/XHolders",
         "./lib/components/XInputDate",

package/lib/administration/XParamBrowse.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { XBrowseProps } from "../components/XLazyDataTable/XLazyDataTable";
+import { XCustomFilter } from "../serverApi/FindParam";
+export declare const XParamBrowse: (props: XBrowseProps & {
+    customFilter?: XCustomFilter;
+}) => JSX.Element;

package/lib/administration/XParamBrowse.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XParamBrowse = void 0;
+var react_1 = __importDefault(require("react"));
+var XLazyDataTable_1 = require("../components/XLazyDataTable/XLazyDataTable");
+var XParamForm_1 = require("./XParamForm");
+var XParamBrowse = function (props) {
+    var onAddRow = function () {
+        // openForm pridavame automaticky v XFormNavigator3 pri renderovani komponentu
+        props.openForm(react_1.default.createElement(XParamForm_1.XParamForm, null));
+    };
+    var onEdit = function (selectedRow) {
+        // openForm pridavame automaticky v XFormNavigator3 pri renderovani komponentu
+        props.openForm(react_1.default.createElement(XParamForm_1.XParamForm, { id: selectedRow.id }));
+    };
+    return (react_1.default.createElement(XLazyDataTable_1.XLazyDataTable, { entity: "XParam", label: "Parameters", sortField: "id", rows: 30, customFilter: props.customFilter, onAddRow: onAddRow, onEdit: onEdit, removeRow: true, displayed: props.displayed },
+        react_1.default.createElement(XLazyDataTable_1.XLazyColumn, { field: "id", header: "ID", width: "8rem" }),
+        react_1.default.createElement(XLazyDataTable_1.XLazyColumn, { field: "code", header: "Code", width: "16rem" }),
+        react_1.default.createElement(XLazyDataTable_1.XLazyColumn, { field: "name", header: "Name", width: "45rem" }),
+        react_1.default.createElement(XLazyDataTable_1.XLazyColumn, { field: "value", header: "Value", width: "16rem" })));
+};
+exports.XParamBrowse = XParamBrowse;

package/lib/administration/XParamForm.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { XFormBaseModif } from "../components/XFormBaseModif";
+import { XObject } from "../components/XObject";
+export declare class XParamForm extends XFormBaseModif {
+    createNewObject(): XObject;
+    render(): JSX.Element;
+}

package/lib/administration/XParamForm.js

@@ -0,0 +1,62 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XParamForm = void 0;
+var react_1 = __importDefault(require("react"));
+var XFormBaseModif_1 = require("../components/XFormBaseModif");
+var XFormBase_1 = require("../components/XFormBase");
+var XInputDecimal_1 = require("../components/XInputDecimal");
+var XInputDate_1 = require("../components/XInputDate");
+var XInputText_1 = require("../components/XInputText");
+var XFormFooter_1 = require("../components/XFormFooter");
+var XFormHeader_1 = require("../components/XFormHeader");
+var XParamForm = /** @class */ (function (_super) {
+    __extends(XParamForm, _super);
+    function XParamForm() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    XParamForm.prototype.createNewObject = function () {
+        return { version: 0 };
+    };
+    XParamForm.prototype.render = function () {
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(XFormHeader_1.XFormHeader, { label: "Parameter" }),
+            react_1.default.createElement("div", { className: "x-form-row" },
+                react_1.default.createElement("div", { className: "x-form-col" },
+                    react_1.default.createElement(XInputDecimal_1.XInputDecimal, { form: this, field: "id", label: "ID", readOnly: true }),
+                    react_1.default.createElement(XInputDate_1.XInputDate, { form: this, field: "modifDate", label: "Modified at", readOnly: true }),
+                    react_1.default.createElement(XInputText_1.XInputText, { form: this, field: "modifXUser.name", label: "Modified by", inputStyle: { width: '12.5rem' } }),
+                    react_1.default.createElement(XInputText_1.XInputText, { form: this, field: "code", label: "Code", inputStyle: { width: '16rem' } }),
+                    react_1.default.createElement(XInputText_1.XInputText, { form: this, field: "name", label: "Name", inputStyle: { width: '45rem' } }),
+                    react_1.default.createElement(XInputText_1.XInputText, { form: this, field: "value", label: "Value", inputStyle: { width: '45rem' } }))),
+            react_1.default.createElement(XFormFooter_1.XFormFooter, { form: this })));
+    };
+    XParamForm = __decorate([
+        (0, XFormBase_1.Form)("XParam")
+    ], XParamForm);
+    return XParamForm;
+}(XFormBaseModif_1.XFormBaseModif));
+exports.XParamForm = XParamForm;

package/lib/administration/XUserBrowse.js

@@ -75,7 +75,7 @@ var XUserBrowse = function (props) {
             }
         });
     }); };
-    return (react_1.default.createElement(XLazyDataTable_1.XLazyDataTable, { entity: "XUser", rows: 10, onAddRow: onAddRow, onEdit: onEdit, removeRow: onRemoveRow, displayed: props.displayed },
+    return (react_1.default.createElement(XLazyDataTable_1.XLazyDataTable, { entity: "XUser", label: "Users", rows: 10, onAddRow: onAddRow, onEdit: onEdit, removeRow: onRemoveRow, displayed: props.displayed },
         react_1.default.createElement(XLazyDataTable_1.XLazyColumn, { field: "id", header: "ID" }),
         react_1.default.createElement(XLazyDataTable_1.XLazyColumn, { field: "username", header: "Username", width: "17rem" }),
         react_1.default.createElement(XLazyDataTable_1.XLazyColumn, { field: "name", header: "Name", width: "17rem" }),

package/lib/administration/XUserForm.js

@@ -75,6 +75,7 @@ var XCheckbox_1 = require("../components/XCheckbox");
 var XEnvVars_1 = require("../components/XEnvVars");
 var XFormBaseModif_1 = require("../components/XFormBaseModif");
 var XInputDate_1 = require("../components/XInputDate");
+var XFormHeader_1 = require("../components/XFormHeader");
 var XUserForm = /** @class */ (function (_super) {
     __extends(XUserForm, _super);
     function XUserForm(props) {
@@ -100,8 +101,9 @@ var XUserForm = /** @class */ (function (_super) {
             var e_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0:
-                        if (!this.validateSave()) {
+                    case 0: return [4 /*yield*/, this.validateSave()];
+                    case 1:
+                        if (!(_a.sent())) {
                             return [2 /*return*/];
                         }
                         // v deme nedovolime zmenit uzivatelov ktori sa pouzivaju na skusanie dema
@@ -134,18 +136,18 @@ var XUserForm = /** @class */ (function (_super) {
                             }
                         }
                         this.preSave(this.state.object);
-                        _a.label = 1;
-                    case 1:
-                        _a.trys.push([1, 3, , 4]);
-                        return [4 /*yield*/, XUtils_1.XUtils.post('userSaveRow', { entity: this.getEntity(), object: this.state.object })];
+                        _a.label = 2;
                     case 2:
-                        _a.sent();
-                        return [3 /*break*/, 4];
+                        _a.trys.push([2, 4, , 5]);
+                        return [4 /*yield*/, XUtils_1.XUtils.post('userSaveRow', { entity: this.getEntity(), object: this.state.object })];
                     case 3:
+                        _a.sent();
+                        return [3 /*break*/, 5];
+                    case 4:
                         e_1 = _a.sent();
                         XUtils_1.XUtils.showErrorMessage("Save row failed.", e_1);
                         return [2 /*return*/]; // zostavame vo formulari
-                    case 4:
+                    case 5:
                         this.props.openForm(null); // save zbehol, ideme naspet do browsu
                         return [2 /*return*/];
                 }
@@ -167,6 +169,7 @@ var XUserForm = /** @class */ (function (_super) {
             ];
         }
         return (react_1.default.createElement("div", null,
+            react_1.default.createElement(XFormHeader_1.XFormHeader, { label: "User" }),
             react_1.default.createElement("div", { className: "x-form-row" },
                 react_1.default.createElement("div", { className: "x-form-col" },
                     react_1.default.createElement(XInputDecimal_1.XInputDecimal, { form: this, field: "id", label: "ID", readOnly: true, labelStyle: { width: '14rem' } }),

package/lib/components/XAutoCompleteBase.js

@@ -614,39 +614,12 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         return itemTemplate;
     };
     XAutoCompleteBase.prototype.computeDefaultDisplayValue = function (suggestion) {
-        var e_2, _a;
-        var displayValue = "";
+        var displayValue;
         if (XAutoCompleteBase.isMoreSuggestions(suggestion)) {
             displayValue = suggestion;
         }
         else {
-            try {
-                for (var _b = __values(this.getFields()), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var field = _c.value;
-                    // TODO - konverzie na spravny typ/string
-                    var _d = __read(XUtilsCommon_1.XUtilsCommon.getPrefixAndField(field), 2), prefix = _d[0], fieldOnly = _d[1];
-                    var value = XUtilsCommon_1.XUtilsCommon.getValueByPath(suggestion, fieldOnly);
-                    if (value !== null && value !== undefined) {
-                        var valueStr = value.toString(); // TODO - spravnu konverziu
-                        if (valueStr !== "") {
-                            if (displayValue !== "") {
-                                displayValue += " ";
-                            }
-                            if (prefix) {
-                                displayValue += prefix;
-                            }
-                            displayValue += valueStr;
-                        }
-                    }
-                }
-            }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
-            finally {
-                try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                }
-                finally { if (e_2) throw e_2.error; }
-            }
+            displayValue = XUtilsCommon_1.XUtilsCommon.createDisplayValue(suggestion, this.getFields());
         }
         return displayValue;
     };

package/lib/components/XCalendar.d.ts

@@ -1,9 +1,16 @@
 /// <reference types="react" />
-export declare const XCalendar: (props: {
-    id?: string | undefined;
-    value: Date | null;
-    onChange: (value: Date | null) => void;
-    readOnly?: boolean | undefined;
-    error?: string | undefined;
-    datetime?: boolean | undefined;
-}) => JSX.Element;
+import { XDateScale } from "../serverApi/XUtilsConversions";
+export declare const XCalendar: {
+    (props: {
+        id?: string | undefined;
+        value: Date | null;
+        onChange: (value: Date | null) => void;
+        readOnly?: boolean | undefined;
+        error?: string | undefined;
+        scale: XDateScale;
+        datetime?: boolean | undefined;
+    }): JSX.Element;
+    defaultProps: {
+        scale: XDateScale;
+    };
+};

package/lib/components/XCalendar.js

@@ -84,7 +84,7 @@ var XCalendar = function (props) {
     var onBlur = function (e) {
         if (inputChanged) {
             // poznamka: e.target.value aj inputValueState obsahuju tu istu string hodnotu
-            var value = (0, XUtilsConversions_1.dateFromUI)(e.target.value);
+            var value = (0, XUtilsConversions_1.dateFromUI)(e.target.value, props.scale);
             props.onChange(value !== null && value !== void 0 ? value : null); // nekorektnu hodnotu reprezentovanu cez undefined budeme riesit akokeby user zadal null (field sa vyprazdni)
             setInputChanged(false);
             setInputValueState(undefined); // pre poriadok
@@ -100,9 +100,28 @@ var XCalendar = function (props) {
         }
         return inputValue;
     };
+    var getView = function (dateScale) {
+        var view;
+        if (dateScale === XUtilsConversions_1.XDateScale.Date) {
+            view = "date";
+        }
+        else if (dateScale === XUtilsConversions_1.XDateScale.Month) {
+            view = "month";
+        }
+        else if (dateScale === XUtilsConversions_1.XDateScale.Year) {
+            view = "year";
+        }
+        else {
+            throw "Unimplemented dateScale = " + dateScale;
+        }
+        return view;
+    };
     var datetime = (_a = props.datetime) !== null && _a !== void 0 ? _a : false;
     // poznamka: parseDateTime nerobi ziadny parse, nechceme aby Calendar "rusil" uzivatela pri typovani datumu
     // konverzia (a volanie props.onChange) sa robi az pri onBlur
-    return (react_1.default.createElement(calendar_1.Calendar, __assign({ id: props.id, value: getInputValue(), onChange: onChange, disabled: props.readOnly, showIcon: true, showOnFocus: false, dateFormat: (0, XUtilsConversions_1.dateFormatCalendar)(), keepInvalid: true, parseDateTime: function (text) { return text; }, showTime: datetime, showSeconds: datetime, inputClassName: datetime ? 'x-input-datetime' : 'x-input-date', onSelect: onSelect, onBlur: onBlur }, XUtils_1.XUtils.createErrorProps(props.error))));
+    return (react_1.default.createElement(calendar_1.Calendar, __assign({ id: props.id, value: getInputValue(), onChange: onChange, disabled: props.readOnly, showIcon: true, showOnFocus: false, view: getView(props.scale), dateFormat: (0, XUtilsConversions_1.dateFormatCalendar)(props.scale), keepInvalid: true, parseDateTime: function (text) { return text; }, showTime: datetime, showSeconds: datetime, inputClassName: datetime ? 'x-input-datetime' : 'x-input-date', onSelect: onSelect, onBlur: onBlur }, XUtils_1.XUtils.createErrorProps(props.error))));
 };
 exports.XCalendar = XCalendar;
+exports.XCalendar.defaultProps = {
+    scale: XUtilsConversions_1.XDateScale.Date
+};

package/lib/components/XFormComponent.d.ts

@@ -11,6 +11,7 @@ export interface XFormComponentProps<T> {
     form: XFormBase;
     label?: string;
     tooltip?: string;
+    placeholder?: string;
     readOnly?: XReadOnlyProp;
     labelStyle?: React.CSSProperties;
     inline?: boolean;

package/lib/components/XFormHeader.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const XFormHeader: (props: {
+    label: string;
+}) => JSX.Element;

package/lib/components/XFormHeader.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XFormHeader = void 0;
+var react_1 = __importDefault(require("react"));
+var XFormHeader = function (props) {
+    return (react_1.default.createElement("div", { className: "x-form-header" }, props.label));
+};
+exports.XFormHeader = XFormHeader;

package/lib/components/XInputDate.js

@@ -42,7 +42,7 @@ var XInputDate = /** @class */ (function (_super) {
         // note: style overrides size (width of the input according to character count)
         return (react_1.default.createElement("div", { className: "field grid" },
             react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
-            react_1.default.createElement(XCalendar_1.XCalendar, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), error: this.getError(), datetime: this.xField.type === 'datetime' })));
+            react_1.default.createElement(XCalendar_1.XCalendar, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), error: this.getError(), scale: this.xField.scale, datetime: this.xField.type === 'datetime' })));
     };
     return XInputDate;
 }(XInput_1.XInput));

package/lib/components/XInputDateDT.js

@@ -37,7 +37,7 @@ var XInputDateDT = /** @class */ (function (_super) {
         this.onValueChangeBase(value, this.props.onChange);
     };
     XInputDateDT.prototype.render = function () {
-        return (react_1.default.createElement(XCalendar_1.XCalendar, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), error: this.getError(), datetime: this.xField.type === 'datetime' }));
+        return (react_1.default.createElement(XCalendar_1.XCalendar, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), error: this.getError(), scale: this.xField.scale, datetime: this.xField.type === 'datetime' }));
     };
     return XInputDateDT;
 }(XInputDT_1.XInputDT));

package/lib/components/XInputText.js

@@ -63,7 +63,7 @@ var XInputText = /** @class */ (function (_super) {
         var label = this.getLabel();
         return (react_1.default.createElement("div", { className: "field grid" },
             label !== undefined ? react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, label) : null,
-            react_1.default.createElement(inputtext_1.InputText, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, size: size, style: this.props.inputStyle }, this.getClassNameTooltip(), { onBlur: this.onBlur }))));
+            react_1.default.createElement(inputtext_1.InputText, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, size: size, style: this.props.inputStyle }, this.getClassNameTooltip(), { onBlur: this.onBlur, placeholder: this.props.placeholder }))));
     };
     return XInputText;
 }(XInput_1.XInput));

package/lib/components/XLazyDataTable/XExportRowsDialog.d.ts

@@ -1,15 +1,20 @@
 /// <reference types="react" />
 import { ExportType, LazyDataTableQueryParam } from "../../serverApi/ExportImportParam";
 export interface XExportParams {
-    path: string;
+    rowCount: number;
+    existsToManyAssoc: boolean;
     queryParam: LazyDataTableQueryParam | any;
-    headers?: string[];
+    headers: string[];
+    widths: string[];
+    fieldsToDuplicateValues?: string[];
     fileName: string;
 }
-export declare const XExportRowsDialog: (props: {
+export interface XExportRowsDialogState {
     dialogOpened: boolean;
+    exportParams?: XExportParams;
+}
+export declare const XExportRowsDialog: (props: {
+    dialogState: XExportRowsDialogState;
     hideDialog: () => void;
-    rowCount?: number;
     exportTypeOptions?: ExportType[];
-    exportParams: XExportParams | (() => XExportParams);
 }) => JSX.Element;

package/lib/components/XLazyDataTable/XExportRowsDialog.js

@@ -87,46 +87,65 @@ var XUtils_1 = require("../XUtils");
 var XUtilsConversions_1 = require("../../serverApi/XUtilsConversions");
 var XLocale_1 = require("../XLocale");
 var XExportRowsDialog = function (props) {
-    var _a, _b;
-    var _c = __read((0, react_1.useState)(ExportImportParam_1.ExportType.Csv), 2), exportType = _c[0], setExportType = _c[1];
-    var _d = __read((0, react_1.useState)(true), 2), createHeaderLine = _d[0], setCreateHeaderLine = _d[1];
-    var _e = __read((0, react_1.useState)(ExportImportParam_1.CsvSeparator.Semicolon), 2), csvSeparator = _e[0], setCsvSeparator = _e[1];
-    var _f = __read((0, react_1.useState)(ExportImportParam_1.CsvDecimalFormat.Comma), 2), decimalFormat = _f[0], setDecimalFormat = _f[1];
-    var _g = __read((0, react_1.useState)(ExportImportParam_1.CsvEncoding.Win1250), 2), csvEncoding = _g[0], setCsvEncoding = _g[1];
+    var _a, _b, _c, _d, _e;
+    var _f = __read((0, react_1.useState)(ExportImportParam_1.ExportType.Excel), 2), exportType = _f[0], setExportType = _f[1];
+    var _g = __read((0, react_1.useState)(true), 2), createHeaderLine = _g[0], setCreateHeaderLine = _g[1];
+    var _h = __read((0, react_1.useState)(ExportImportParam_1.XMultilineExportType.Multiline), 2), detailRowsExport = _h[0], setDetailRowsExport = _h[1];
+    var _j = __read((0, react_1.useState)(ExportImportParam_1.CsvSeparator.Semicolon), 2), csvSeparator = _j[0], setCsvSeparator = _j[1];
+    var _k = __read((0, react_1.useState)(ExportImportParam_1.CsvDecimalFormat.Comma), 2), decimalFormat = _k[0], setDecimalFormat = _k[1];
+    var _l = __read((0, react_1.useState)(ExportImportParam_1.CsvEncoding.Win1250), 2), csvEncoding = _l[0], setCsvEncoding = _l[1];
     // bez tejto metody by pri opetovnom otvoreni dialogu ponechal povodne hodnoty
     var onShow = function () {
-        setExportType(ExportImportParam_1.ExportType.Csv);
-        setCreateHeaderLine(true); // excel hadze hlasky koli prvemu riadku header-ov
+        setExportType(ExportImportParam_1.ExportType.Excel);
+        setCreateHeaderLine(true);
+        setDetailRowsExport(ExportImportParam_1.XMultilineExportType.Multiline);
         setCsvSeparator(ExportImportParam_1.CsvSeparator.Semicolon);
         setDecimalFormat(ExportImportParam_1.CsvDecimalFormat.Comma);
         setCsvEncoding(ExportImportParam_1.CsvEncoding.Win1250);
     };
     var onExport = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var exportParams, csvParam, exportParam, response, e_1, fileExt, fileName, respBlob, url, a;
+        var exportParams, apiPath, requestPayload, exportExcelParam, exportCsvParam, exportJsonParam, response, e_1, fileExt, fileName, respBlob, url, a;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     // export vykoname az po zatvoreni dialogu - moze dlho trvat a pobezi asynchronne (user zatial moze pracovat s aplikaciou)
                     // zavrieme dialog
                     props.hideDialog();
-                    if (typeof props.exportParams === 'function') {
-                        exportParams = props.exportParams();
+                    exportParams = props.dialogState.exportParams;
+                    if (exportType === ExportImportParam_1.ExportType.Excel) {
+                        apiPath = "x-lazy-data-table-export-excel";
+                        exportExcelParam = {
+                            queryParam: exportParams.queryParam,
+                            excelCsvParam: createExcelCsvParam(exportParams),
+                            widths: exportParams.widths
+                        };
+                        requestPayload = exportExcelParam;
                     }
-                    else {
-                        exportParams = props.exportParams;
+                    else if (exportType === ExportImportParam_1.ExportType.Csv) {
+                        apiPath = "x-lazy-data-table-export-csv";
+                        exportCsvParam = {
+                            queryParam: exportParams.queryParam,
+                            excelCsvParam: createExcelCsvParam(exportParams),
+                            csvParam: {
+                                csvSeparator: csvSeparator, csvDecimalFormat: decimalFormat, csvEncoding: csvEncoding
+                            }
+                        };
+                        requestPayload = exportCsvParam;
+                    }
+                    else if (exportType === ExportImportParam_1.ExportType.Json) {
+                        apiPath = "x-lazy-data-table-export-json";
+                        exportJsonParam = {
+                            queryParam: exportParams.queryParam
+                        };
+                        requestPayload = exportJsonParam;
                     }
-                    csvParam = undefined;
-                    if (exportType === ExportImportParam_1.ExportType.Csv) {
-                        csvParam = { useHeaderLine: createHeaderLine, csvSeparator: csvSeparator, csvDecimalFormat: decimalFormat, csvEncoding: csvEncoding };
-                        if (csvParam.useHeaderLine) {
-                            csvParam.headers = exportParams.headers;
-                        }
+                    else {
+                        throw "Unimplemented exportType = ".concat(exportType);
                     }
-                    exportParam = { exportType: exportType, csvParam: csvParam, queryParam: exportParams.queryParam };
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, XUtils_1.XUtils.fetchBasicJson(exportParams.path, exportParam)];
+                    return [4 /*yield*/, XUtils_1.XUtils.fetchBasicJson(apiPath, requestPayload)];
                 case 2:
                     response = _a.sent();
                     return [3 /*break*/, 4];
@@ -135,7 +154,7 @@ var XExportRowsDialog = function (props) {
                     XUtils_1.XUtils.showErrorMessage("Export failed.", e_1);
                     return [2 /*return*/];
                 case 4:
-                    fileExt = exportType;
+                    fileExt = exportType === ExportImportParam_1.ExportType.Excel ? "xlsx" : exportType;
                     fileName = "".concat(exportParams.fileName, ".").concat(fileExt);
                     return [4 /*yield*/, response.blob()];
                 case 5:
@@ -149,36 +168,52 @@ var XExportRowsDialog = function (props) {
             }
         });
     }); };
-    var elem = null;
-    if (props.dialogOpened) {
+    var createExcelCsvParam = function (exportParams) {
+        return {
+            headers: createHeaderLine ? exportParams.headers : undefined,
+            fieldsToDuplicateValues: exportParams.fieldsToDuplicateValues,
+            toManyAssocExport: detailRowsExport,
+            multilineTextExport: ExportImportParam_1.XMultilineExportType.Multiline // TODO - dorobit aj tuto dropdown kde si uzivatel vyberie ci chce mat v texte \n alebo nechce - aj na backende treba dorobit
+        };
+    };
+    var elem = [];
+    if (props.dialogState.dialogOpened) {
+        if (exportType === ExportImportParam_1.ExportType.Excel || exportType === ExportImportParam_1.ExportType.Csv) {
+            elem.push(react_1.default.createElement("div", { key: "expCreateHeaderLine", className: "field grid" },
+                react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expCreateHeaderLine')),
+                react_1.default.createElement(checkbox_1.Checkbox, { checked: createHeaderLine, onChange: function (e) { return setCreateHeaderLine(e.checked); } })));
+            if ((_a = props.dialogState.exportParams) === null || _a === void 0 ? void 0 : _a.existsToManyAssoc) {
+                elem.push(react_1.default.createElement("div", { key: "expDetailRowsExport", className: "field grid" },
+                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expDetailRowsExport')),
+                    react_1.default.createElement(dropdown_1.Dropdown, { value: detailRowsExport, options: XUtils_1.XUtils.multilineExportTypeOptions, onChange: function (e) { return setDetailRowsExport(e.value); } })));
+            }
+        }
         if (exportType === ExportImportParam_1.ExportType.Csv) {
-            elem = react_1.default.createElement("span", null,
-                react_1.default.createElement("div", { className: "field grid" },
-                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '10rem' } }, (0, XLocale_1.xLocaleOption)('expCreateHeaderLine')),
-                    react_1.default.createElement(checkbox_1.Checkbox, { checked: createHeaderLine, onChange: function (e) { return setCreateHeaderLine(e.checked); } })),
-                react_1.default.createElement("div", { className: "field grid" },
-                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '10rem' } }, (0, XLocale_1.xLocaleOption)('expCsvSeparator')),
+            elem.push([
+                react_1.default.createElement("div", { key: "expCsvSeparator", className: "field grid" },
+                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expCsvSeparator')),
                     react_1.default.createElement(dropdown_1.Dropdown, { value: csvSeparator, options: XUtils_1.XUtils.csvSeparatorOptions, onChange: function (e) { return setCsvSeparator(e.value); } })),
-                react_1.default.createElement("div", { className: "field grid" },
-                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '10rem' } }, (0, XLocale_1.xLocaleOption)('expDecimalFormat')),
+                react_1.default.createElement("div", { key: "expDecimalFormat", className: "field grid" },
+                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expDecimalFormat')),
                     react_1.default.createElement(dropdown_1.Dropdown, { value: decimalFormat, options: XUtils_1.XUtils.decimalFormatOptions, onChange: function (e) { return setDecimalFormat(e.value); } })),
-                react_1.default.createElement("div", { className: "field grid" },
-                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '10rem' } }, (0, XLocale_1.xLocaleOption)('expEncoding')),
-                    react_1.default.createElement(dropdown_1.Dropdown, { value: csvEncoding, options: XUtils_1.XUtils.csvEncodingOptions, onChange: function (e) { return setCsvEncoding(e.value); } })));
+                react_1.default.createElement("div", { key: "expEncoding", className: "field grid" },
+                    react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expEncoding')),
+                    react_1.default.createElement(dropdown_1.Dropdown, { value: csvEncoding, options: XUtils_1.XUtils.csvEncodingOptions, onChange: function (e) { return setCsvEncoding(e.value); } }))
+            ]);
         }
     }
     // poznamka: renderovanie vnutornych komponentov Dialogu sa zavola az po otvoreni dialogu
-    return (react_1.default.createElement(dialog_1.Dialog, { visible: props.dialogOpened, onShow: onShow, onHide: function () { return props.hideDialog(); } },
-        props.rowCount ?
-            react_1.default.createElement("div", { className: "field grid" },
-                react_1.default.createElement("label", { className: "col-fixed", style: { width: '10rem' } }, (0, XLocale_1.xLocaleOption)('expRowCount')),
-                react_1.default.createElement(inputtext_1.InputText, { value: (0, XUtilsConversions_1.numberAsUI)((_a = props.rowCount) !== null && _a !== void 0 ? _a : null, 0), readOnly: true }))
+    return (react_1.default.createElement(dialog_1.Dialog, { visible: props.dialogState.dialogOpened, onShow: onShow, onHide: function () { return props.hideDialog(); } },
+        ((_b = props.dialogState.exportParams) === null || _b === void 0 ? void 0 : _b.rowCount) ?
+            react_1.default.createElement("div", { key: "expRowCount", className: "field grid" },
+                react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expRowCount')),
+                react_1.default.createElement(inputtext_1.InputText, { value: (0, XUtilsConversions_1.numberAsUI)((_d = (_c = props.dialogState.exportParams) === null || _c === void 0 ? void 0 : _c.rowCount) !== null && _d !== void 0 ? _d : null, 0), readOnly: true }))
             : null,
-        react_1.default.createElement("div", { className: "field grid" },
-            react_1.default.createElement("label", { className: "col-fixed", style: { width: '10rem' } }, (0, XLocale_1.xLocaleOption)('expExportType')),
-            react_1.default.createElement(dropdown_1.Dropdown, { value: exportType, options: (_b = props.exportTypeOptions) !== null && _b !== void 0 ? _b : XUtils_1.XUtils.exportTypeOptions, onChange: function (e) { return setExportType(e.value); } })),
+        react_1.default.createElement("div", { key: "expExportType", className: "field grid" },
+            react_1.default.createElement("label", { className: "col-fixed", style: { width: '12rem' } }, (0, XLocale_1.xLocaleOption)('expExportType')),
+            react_1.default.createElement(dropdown_1.Dropdown, { value: exportType, options: (_e = props.exportTypeOptions) !== null && _e !== void 0 ? _e : XUtils_1.XUtils.exportTypeOptions, onChange: function (e) { return setExportType(e.value); } })),
         elem,
-        react_1.default.createElement("div", { className: "flex justify-content-center" },
+        react_1.default.createElement("div", { key: "exportRows", className: "flex justify-content-center" },
             react_1.default.createElement(XButton_1.XButton, { label: (0, XLocale_1.xLocaleOption)('exportRows'), onClick: onExport }))));
 };
 exports.XExportRowsDialog = XExportRowsDialog;