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

package/lib/components/XAutoCompleteDT.js

@@ -14,42 +14,6 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -57,7 +21,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.XAutoCompleteDT = void 0;
 var react_1 = __importDefault(require("react"));
 var XFormComponentDT_1 = require("./XFormComponentDT");
-var XUtils_1 = require("./XUtils");
 var XAutoCompleteBase_1 = require("./XAutoCompleteBase");
 var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
 var XAutoCompleteDT = /** @class */ (function (_super) {
@@ -66,33 +29,12 @@ var XAutoCompleteDT = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this.xAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXAssocToOne(XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(props.entity), props.assocField);
         _this.errorInBase = undefined;
-        _this.state = {
-            suggestions: []
-        };
         _this.onChangeAutoCompleteBase = _this.onChangeAutoCompleteBase.bind(_this);
         _this.onErrorChangeAutoCompleteBase = _this.onErrorChangeAutoCompleteBase.bind(_this);
         return _this;
     }
-    XAutoCompleteDT.prototype.componentDidMount = function () {
-        this.readAndSetSuggestions();
-    };
-    XAutoCompleteDT.prototype.readAndSetSuggestions = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var suggestions;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!(this.props.suggestions === undefined)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, XUtils_1.XUtils.fetchRows(this.xAssoc.entityName, this.getFilterBase(this.props.filter), this.props.displayField)];
-                    case 1:
-                        suggestions = _a.sent();
-                        this.setState({ suggestions: suggestions });
-                        _a.label = 2;
-                    case 2: return [2 /*return*/];
-                }
-            });
-        });
-    };
+    // componentDidMount() {
+    // }
     XAutoCompleteDT.prototype.getField = function () {
         return this.props.assocField;
     };
@@ -105,13 +47,6 @@ var XAutoCompleteDT = /** @class */ (function (_super) {
     };
     XAutoCompleteDT.prototype.onChangeAutoCompleteBase = function (object, objectChange) {
         this.onValueChangeBase(object, this.props.onChange, objectChange);
-        if (objectChange !== XUtils_1.OperationType.None) {
-            // zmenil sa zaznam dobrovolnika v DB
-            // zatial len refreshneme z DB
-            // ak by bol reqest pomaly, mozme pri inserte (nove id) / update (existujuce id) upravit zoznam a usetrime tym request do DB
-            // ak bol delete (dobrovolnik === null), treba urobit refresh do DB (alebo si poslat id-cko zmazaneho zaznamu)
-            this.readAndSetSuggestions();
-        }
     };
     XAutoCompleteDT.prototype.onErrorChangeAutoCompleteBase = function (error) {
         this.errorInBase = error; // odlozime si error
@@ -128,13 +63,12 @@ var XAutoCompleteDT = /** @class */ (function (_super) {
     };
     XAutoCompleteDT.prototype.render = function () {
         var _this = this;
-        var _a;
         var xEntityAssoc = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(this.xAssoc.entityName);
         //const xDisplayField = XUtilsMetadataCommon.getXFieldByPath(xEntityAssoc, this.props.displayField);
         // TODO - size
         //const size = this.props.size ?? xDisplayField.length;
         // div className="col" nam zabezpeci aby XAutoCompleteBase nezaberal celu dlzku grid-u (ma nastaveny width=100% vdaka "formgroup-inline")
-        return (react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), suggestions: (_a = this.props.suggestions) !== null && _a !== void 0 ? _a : this.state.suggestions, onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, searchBrowse: this.props.searchBrowse, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, customFilterFunction: function () { return _this.getFilterBase(_this.props.filter); } }));
+        return (react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, itemTemplate: this.props.itemTemplate, searchBrowse: this.props.searchBrowse, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, suggestions: this.props.suggestions, suggestionsLoad: this.props.suggestionsLoad, lazyLoadMaxRows: this.props.lazyLoadMaxRows, splitQueryValue: this.props.splitQueryValue, minLength: this.props.minLength, scrollHeight: this.props.scrollHeight, suggestionsQuery: { entity: this.xAssoc.entityName, filter: function () { return _this.getFilterBase(_this.props.filter); }, sortField: this.props.sortField, fields: this.props.fields }, inputClassName: this.props.inputClassName }));
     };
     return XAutoCompleteDT;
 }(XFormComponentDT_1.XFormComponentDT));

package/lib/components/XEditBrowse.js

@@ -108,7 +108,7 @@ var XEditColumnDialog_1 = require("./XEditColumnDialog");
 var _ = __importStar(require("lodash"));
 var XUtilsMetadata_1 = require("./XUtilsMetadata");
 var XUtils_1 = require("./XUtils");
-var XLazyDataTable_1 = require("./XLazyDataTable");
+var XLazyDataTable_1 = require("./XLazyDataTable/XLazyDataTable");
 var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
 // TODO - pouzit extends XEditBrowseBase, ako je tomu pri CarForm?
 var XEditBrowse = /** @class */ (function (_super) {

package/lib/components/XEditor.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { XInput, XInputProps } from "./XInput";
+export interface XEditorProps extends XInputProps<string> {
+    labelOnTop: boolean;
+}
+export declare class XEditor extends XInput<string, XEditorProps> {
+    static defaultProps: {
+        labelOnTop: boolean;
+    };
+    constructor(props: XEditorProps);
+    getValue(): string | null;
+    onValueChange(value: string | null): void;
+    getLabelStyle(): React.CSSProperties;
+    render(): JSX.Element;
+}

package/lib/components/XEditor.js

@@ -0,0 +1,64 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XEditor = void 0;
+var react_1 = __importDefault(require("react"));
+var XInput_1 = require("./XInput");
+var XUtils_1 = require("./XUtils");
+var XEditorBase_1 = require("./XEditorBase");
+var XEditor = /** @class */ (function (_super) {
+    __extends(XEditor, _super);
+    function XEditor(props) {
+        var _this = _super.call(this, props) || this;
+        _this.onValueChange = _this.onValueChange.bind(_this);
+        return _this;
+    }
+    XEditor.prototype.getValue = function () {
+        return this.getValueFromObject();
+    };
+    XEditor.prototype.onValueChange = function (value) {
+        this.onValueChangeBase(value, this.props.onChange);
+    };
+    XEditor.prototype.getLabelStyle = function () {
+        var _a;
+        return this.props.labelOnTop ? ((_a = this.props.labelStyle) !== null && _a !== void 0 ? _a : {}) : _super.prototype.getLabelStyle.call(this);
+    };
+    XEditor.prototype.render = function () {
+        // TODO - neni to otestovane
+        var _a;
+        var style = (_a = this.props.inputStyle) !== null && _a !== void 0 ? _a : {};
+        // defaultne pridame width:100%
+        // ak nemame labelOnTop=true, musime odratat sirku labelu, inac sa label dostane nad input (koli flex-wrap: wrap)
+        var widthValue = this.props.labelOnTop ? '100%' : "calc(100% - ".concat(XUtils_1.XUtils.FIELD_LABEL_WIDTH, ")");
+        XUtils_1.XUtils.addCssPropIfNotExists(style, { width: widthValue });
+        // x-editor-label-on-top - nastavuje orientation: column, aby boli label a XEditorBase pod sebou (robene podla XInputTextarea)
+        // XEditorBase renderujeme az ked mame nacitany object, lebo inac sa nam nenastavi spravna velkost (hodnota nie je k dispozicii pri prvom renderingu) (robene podla XInputTextarea)
+        return (react_1.default.createElement("div", { className: !this.props.labelOnTop ? 'field grid' : 'field grid x-editor-label-on-top' },
+            react_1.default.createElement("label", { htmlFor: this.props.field, className: !this.props.labelOnTop ? 'col-fixed' : undefined, style: this.getLabelStyle() }, this.getLabel()),
+            this.props.form.state.object ?
+                react_1.default.createElement(XEditorBase_1.XEditorBase, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), style: style, error: this.getError() })
+                : null));
+    };
+    XEditor.defaultProps = {
+        labelOnTop: false
+    };
+    return XEditor;
+}(XInput_1.XInput));
+exports.XEditor = XEditor;

package/lib/components/XEditorBase.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export declare const XEditorBase: (props: {
+    id?: string | undefined;
+    value: string | null;
+    onChange: (value: string | null) => void;
+    readOnly?: boolean | undefined;
+    error?: string | undefined;
+    style?: React.CSSProperties | undefined;
+}) => JSX.Element;

package/lib/components/XEditorBase.js

@@ -0,0 +1,91 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XEditorBase = void 0;
+var react_1 = __importStar(require("react"));
+var XUtils_1 = require("./XUtils");
+var editor_1 = require("primereact/editor");
+// koli optimalizacii - typovany text si zapisuje do svojej stavovej premennej a onChange zavola az z onBlur
+// pri velkych formularoch je totiz volanie zmeny stavu this.setState({object: this.state.object, errorMap: this.state.errorMap}); pomale
+var XEditorBase = function (props) {
+    // true, ak uzivatel typuje hodnotu
+    // false, ak bol zavolany onBlur
+    var _a = __read((0, react_1.useState)(false), 2), editorValueChanged = _a[0], setEditorValueChanged = _a[1];
+    // pouzivane, len ak editorValueChanged === true, je tu zapisana zmenena hodnota v editore
+    var _b = __read((0, react_1.useState)(null), 2), editorValue = _b[0], setEditorValue = _b[1];
+    var onTextChange = function (e) {
+        setEditorValueChanged(true);
+        setEditorValue(e.htmlValue);
+    };
+    var onBlur = function (e) {
+        // optimalizacia - onChange volame len ak editorValueChanged === true
+        if (editorValueChanged) {
+            // TODO - bude vzdy onBlur volany az potom co bude setnuta editorValue? lebo ak nie tak treba hodnotu vytiahnut z "e"
+            //const htmlValue: string | null = e.target.??;
+            props.onChange(editorValue);
+            setEditorValueChanged(false);
+            setEditorValue(null); // pre poriadok
+        }
+    };
+    var getValue = function () {
+        var htmlValue;
+        if (editorValueChanged) {
+            htmlValue = editorValue;
+        }
+        else {
+            htmlValue = props.value;
+        }
+        return htmlValue !== null ? htmlValue : undefined; // value v Editor nechce null, chce undefined
+    };
+    return (react_1.default.createElement(editor_1.Editor, __assign({ id: props.id, value: getValue(), onTextChange: onTextChange, onBlur: onBlur, readOnly: props.readOnly, style: props.style }, XUtils_1.XUtils.createErrorProps(props.error))));
+};
+exports.XEditorBase = XEditorBase;

package/lib/components/XFormBase.d.ts

@@ -62,6 +62,7 @@ export declare abstract class XFormBase extends Component<XFormProps> {
     static saveErrorsIntoXRowTechData(row: any, xErrors: XErrors): void;
     formReadOnly(object: XObject, field: string): boolean;
     createNewObject(): XObject;
+    createNewObjectAsync(): Promise<XObject>;
     preInitForm(object: XObject, operationType: OperationType.Insert | OperationType.Update): void;
     validate(object: XObject): Promise<XErrors>;
     preSave(object: XObject): void;

package/lib/components/XFormBase.js

@@ -180,17 +180,23 @@ var XFormBase = /** @class */ (function (_super) {
                             }
                             finally { if (e_1) throw e_1.error; }
                         }
-                        return [3 /*break*/, 3];
+                        return [3 /*break*/, 5];
                     case 2:
                         // add new row
                         object = this.createNewObject();
+                        if (!(Object.keys(object).length === 0)) return [3 /*break*/, 4];
+                        return [4 /*yield*/, this.createNewObjectAsync()];
+                    case 3:
+                        object = _d.sent();
+                        _d.label = 4;
+                    case 4:
                         // pridame pripadne "init values", ktore pridu cez prop object (pouziva sa napr. pri insertovani cez XAutoComplete na predplnenie hodnoty)
                         if (this.props.initValues !== undefined) {
-                            object = __assign(__assign({}, object), this.props.initValues); // values from this.props.object will override values from object (if key is the same)
+                            object = __assign(__assign({}, object), this.props.initValues); // values from this.props.initValues will override values from object (if key is the same)
                         }
                         operationType = XUtils_1.OperationType.Insert;
-                        _d.label = 3;
-                    case 3:
+                        _d.label = 5;
+                    case 5:
                         this.preInitForm(object, operationType);
                         //console.log("volany XFormBase.componentDidMount() - ideme setnut object");
                         this.setState({ object: object } /*, () => console.log("volany XFormBase.componentDidMount() - callback setState")*/);
@@ -618,6 +624,15 @@ var XFormBase = /** @class */ (function (_super) {
     XFormBase.prototype.createNewObject = function () {
         return {};
     };
+    // this method can be overriden in subclass if needed (to set some default values for insert)
+    // if createNewObject() returns empty object {}, then createNewObjectAsync() is called
+    XFormBase.prototype.createNewObjectAsync = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, {}];
+            });
+        });
+    };
     // this method can be overriden in subclass if needed (to modify/save object after read from DB and before set into the form)
     XFormBase.prototype.preInitForm = function (object, operationType) {
     };

package/lib/components/XFormDataTable2.js

@@ -541,7 +541,7 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         }
         var filterDisplay = this.props.filterDisplay !== "none" ? this.props.filterDisplay : undefined;
         // default sortovanie - ak mame insert tak nesortujeme (drzime poradie v akom user zaznam vytvoril), ak mame update tak podla id zosortujeme (nech je to zobrazene vzdy rovnako)
-        var sortField = ((_a = this.props.sortField) !== null && _a !== void 0 ? _a : this.props.form.isAddRow()) ? undefined : xEntity.idField;
+        var sortField = (_a = this.props.sortField) !== null && _a !== void 0 ? _a : (this.props.form.isAddRow() ? undefined : xEntity.idField);
         var label = this.props.label !== undefined ? this.props.label : this.props.assocField;
         var readOnly = this.isReadOnly();
         // v bloku function (child) nejde pouzit priamo this, thisLocal uz ide pouzit

package/lib/components/XInputTextareaBase.js

@@ -58,18 +58,17 @@ var inputtextarea_1 = require("primereact/inputtextarea");
 // koli optimalizacii - typovany text si zapisuje do svojej stavovej premennej a onChange zavola az z onBlur
 // pri velkych formularoch je totiz volanie zmeny stavu this.setState({object: this.state.object, errorMap: this.state.errorMap}); pomale
 var XInputTextareaBase = function (props) {
-    // true, ak uzivatel typuje hodnotu ale hodnota sa este neda skonvertovat na korektny interval (este nevieme vytvorit IPostgresInterval)
-    // false, ak uz mame v inpute korektnu hodnotu - vtedy zavolame props.onChange a posleme mu IPostgresInterval
+    // true, ak uzivatel typuje hodnotu
+    // false, ak bol zavolany onBlur
     var _a = __read((0, react_1.useState)(false), 2), inputChanged = _a[0], setInputChanged = _a[1];
     // pouzivane, len ak inputChanged === true, je tu zapisana zmenena hodnota v inpute
     var _b = __read((0, react_1.useState)(undefined), 2), inputValueState = _b[0], setInputValueState = _b[1];
     var onChange = function (e) {
-        // conversion to IPostgresInterval will be done in onBlur
         setInputChanged(true);
         setInputValueState(e.target.value);
     };
     var onBlur = function (e) {
-        // optimalizacia - testujeme len ak inputChanged === true
+        // optimalizacia - onChange volame len ak inputChanged === true
         if (inputChanged) {
             var value = (0, XUtilsConversions_1.stringFromUI)(e.target.value);
             props.onChange(value);

package/lib/components/{XExportRowsDialog.d.ts → XLazyDataTable/XExportRowsDialog.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ExportType, LazyDataTableQueryParam } from "../serverApi/ExportImportParam";
+import { ExportType, LazyDataTableQueryParam } from "../../serverApi/ExportImportParam";
 export interface XExportParams {
     path: string;
     queryParam: LazyDataTableQueryParam | any;

package/lib/components/{XExportRowsDialog.js → XLazyDataTable/XExportRowsDialog.js}

@@ -76,16 +76,16 @@ var __read = (this && this.__read) || function (o, n) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XExportRowsDialog = void 0;
-var ExportImportParam_1 = require("../serverApi/ExportImportParam");
+var ExportImportParam_1 = require("../../serverApi/ExportImportParam");
 var react_1 = __importStar(require("react"));
 var dialog_1 = require("primereact/dialog");
 var inputtext_1 = require("primereact/inputtext");
 var dropdown_1 = require("primereact/dropdown");
 var checkbox_1 = require("primereact/checkbox");
-var XButton_1 = require("./XButton");
-var XUtils_1 = require("./XUtils");
-var XUtilsConversions_1 = require("../serverApi/XUtilsConversions");
-var XLocale_1 = require("./XLocale");
+var XButton_1 = require("../XButton");
+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];

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { XMultilineRenderType } from "./XLazyDataTable";
+export declare const XHtmlRenderer: (props: {
+    htmlValue: string | null;
+    renderType: XMultilineRenderType;
+    fewLinesCount: number;
+}) => JSX.Element;

package/lib/components/XLazyDataTable/XHtmlRenderer.js

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XHtmlRenderer = void 0;
+var react_1 = __importStar(require("react"));
+var button_1 = require("primereact/button");
+var XHtmlRenderer = function (props) {
+    var _a;
+    // used only for props.renderType === "fewLines"
+    var _b = __read((0, react_1.useState)(false), 2), showAllLines = _b[0], setShowAllLines = _b[1];
+    var className;
+    var htmlValue = (_a = props.htmlValue) !== null && _a !== void 0 ? _a : "";
+    var buttonExpandCollapse = null;
+    if (props.renderType === "singleLine") {
+        className = "x-html-content-single-line";
+    }
+    else {
+        // "fewLines" or "allLines"
+        className = "x-html-content";
+        if (props.renderType === "fewLines" && htmlValue) {
+            var parser = new DOMParser();
+            var xmlDoc = parser.parseFromString(htmlValue, "text/html");
+            var pElemList = xmlDoc.getElementsByTagName("p");
+            if (pElemList.length > props.fewLinesCount) {
+                if (!showAllLines) {
+                    htmlValue = "";
+                    for (var i = 0; i < props.fewLinesCount; i++) {
+                        htmlValue += pElemList[i].outerHTML; // naspet do <p>line 1</p>
+                    }
+                }
+                // pridame button na koniec posledneho riadku
+                buttonExpandCollapse = react_1.default.createElement(button_1.Button, { icon: showAllLines ? "pi pi-angle-double-left" : "pi pi-angle-double-right", onClick: function () { return setShowAllLines(!showAllLines); }, className: "x-button-multiline-expand-collapse", style: { marginLeft: '0rem' } });
+            }
+        }
+    }
+    return (react_1.default.createElement("div", { className: "p-editor-content ql-snow" },
+        react_1.default.createElement("div", { className: "ql-editor " + className, dangerouslySetInnerHTML: { __html: htmlValue } }),
+        buttonExpandCollapse));
+};
+exports.XHtmlRenderer = XHtmlRenderer;

package/lib/components/{XLazyDataTable.d.ts → XLazyDataTable/XLazyDataTable.d.ts}

@@ -1,13 +1,14 @@
 import React, { ReactChild } from 'react';
-import { DataTableFilterMeta, DataTableFilterMetaData, DataTableOperatorFilterMetaData } from 'primereact/datatable';
+import { DataTableFilterMeta, DataTableFilterMetaData, DataTableOperatorFilterMetaData, DataTableSortMeta } from 'primereact/datatable';
 import { ColumnBodyOptions, ColumnFilterElementTemplateOptions } from 'primereact/column';
-import { XViewStatusOrBoolean } from "./XUtils";
-import { XSearchBrowseParams } from "./XSearchBrowseParams";
-import { XAggregateType, XCustomFilter } from "../serverApi/FindParam";
-import { XOnSaveOrCancelProp } from "./XFormBase";
+import { XViewStatusOrBoolean } from "../XUtils";
+import { XSearchBrowseParams } from "../XSearchBrowseParams";
+import { XAggregateType, XCustomFilter } from "../../serverApi/FindParam";
+import { XOnSaveOrCancelProp } from "../XFormBase";
 import { IconType } from "primereact/utils";
 import { ButtonProps } from "primereact/button";
 export type XBetweenFilterProp = "row" | "column" | undefined;
+export type XMultilineRenderType = "singleLine" | "fewLines" | "allLines";
 export interface XAppButtonForRow {
     key?: string;
     icon?: IconType<ButtonProps>;
@@ -51,11 +52,15 @@ export interface XLazyDataTableProps {
     appButtons?: any;
     filters?: DataTableFilterMeta;
     customFilter?: XCustomFilter;
-    sortField?: string;
+    sortField?: string | DataTableSortMeta[];
     fullTextSearch: boolean | string[];
-    multiLineSwitch: boolean;
+    fields?: string[];
+    multilineSwitch: boolean;
+    multilineSwitchInitValue: XMultilineRenderType;
+    multilineSwitchFewLinesCount: number;
     searchBrowseParams?: XSearchBrowseParams;
     width?: string;
+    rowClassName?: (data: any) => object | string | undefined;
     dataLoadedState?: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
     editMode?: boolean;
     editModeHandlers?: XEditModeHandlers;
@@ -69,7 +74,9 @@ export declare const XLazyDataTable: {
         rows: number;
         filterDisplay: string;
         fullTextSearch: boolean;
-        multiLineSwitch: boolean;
+        multilineSwitch: boolean;
+        multilineSwitchInitValue: string;
+        multilineSwitchFewLinesCount: number;
         scrollable: boolean;
         scrollWidth: string;
         scrollHeight: string;
@@ -84,6 +91,7 @@ export type XFilterElementParams = {
     options: ColumnFilterElementTemplateOptions;
 };
 export type XFilterElementProp = (params: XFilterElementParams) => React.ReactNode;
+export type XContentType = "multiline" | "html" | undefined;
 export interface XLazyColumnProps {
     field: string;
     header?: any;
@@ -94,11 +102,15 @@ export interface XLazyColumnProps {
     showFilterMenu?: boolean;
     betweenFilter?: XBetweenFilterProp | "noBetween";
     width?: string;
+    contentType?: XContentType;
     aggregateType?: XAggregateType;
     columnViewStatus: XViewStatusOrBoolean;
     filterElement?: XFilterElementProp;
     body?: React.ReactNode | ((data: any, options: ColumnBodyOptions) => React.ReactNode);
 }
+export type XLazyColumnType = {
+    props: XLazyColumnProps;
+};
 export declare const XLazyColumn: {
     (props: XLazyColumnProps): null;
     defaultProps: {