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

package/XEditor.d.ts

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

package/XEditor.js

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

package/XEditorBase.d.ts

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

package/XEditorBase.js

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

package/XExportRowsDialog.d.ts

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

package/XExportRowsDialog.js

@@ -2,4 +2,4 @@
 
 'use strict';
 
-module.exports = require('./lib/components/XExportRowsDialog.js');
+module.exports = require('./lib/components/XLazyDataTable/XExportRowsDialog.js');

package/XHtmlRenderer.d.ts

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

package/XHtmlRenderer.js

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

package/XLazyDataTable.d.ts

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

package/XLazyDataTable.js

@@ -2,4 +2,4 @@
 
 'use strict';
 
-module.exports = require('./lib/components/XLazyDataTable.js');
+module.exports = require('./lib/components/XLazyDataTable/XLazyDataTable.js');

package/XMultilineRenderer.d.ts

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

package/XMultilineRenderer.js

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

package/gulpfile.js

@@ -23,6 +23,11 @@ function generateApi(cb) {
         "./lib/components/XFormRowCol/XFormRow",
         "./lib/components/XFormRowCol/XFormRowCol",
 
+        "./lib/components/XLazyDataTable/XExportRowsDialog",
+        "./lib/components/XLazyDataTable/XHtmlRenderer",
+        "./lib/components/XLazyDataTable/XLazyDataTable",
+        "./lib/components/XLazyDataTable/XMultilineRenderer",
+
         "./lib/components/useXToken",
         "./lib/components/XAutoComplete",
         "./lib/components/XAutoCompleteBase",
@@ -36,9 +41,10 @@ function generateApi(cb) {
         "./lib/components/XDropdown",
         "./lib/components/XDropdownForEntity",
         "./lib/components/XEditBrowse",
+        "./lib/components/XEditor",
+        "./lib/components/XEditorBase",
         "./lib/components/XEnvVars",
         "./lib/components/XErrors",
-        "./lib/components/XExportRowsDialog",
         "./lib/components/XFieldChangeEvent",
         "./lib/components/XFormBase",
         "./lib/components/XFormBaseModif",
@@ -56,7 +62,6 @@ function generateApi(cb) {
         "./lib/components/XInputText",
         "./lib/components/XInputTextarea",
         "./lib/components/XInputTextareaBase",
-        "./lib/components/XLazyDataTable",
         "./lib/components/XLocale",
         "./lib/components/XLoginDialog",
         "./lib/components/XLoginForm",

package/lib/administration/XBrowseMetaBrowse.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { XBrowseProps } from "../components/XLazyDataTable";
+import { XBrowseProps } from "../components/XLazyDataTable/XLazyDataTable";
 export declare const XBrowseMetaBrowse: (props: XBrowseProps) => JSX.Element;

package/lib/administration/XBrowseMetaBrowse.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XBrowseMetaBrowse = void 0;
-var XLazyDataTable_1 = require("../components/XLazyDataTable");
+var XLazyDataTable_1 = require("../components/XLazyDataTable/XLazyDataTable");
 var react_1 = __importDefault(require("react"));
 var XBrowseMetaForm_1 = require("./XBrowseMetaForm");
 var XBrowseMetaBrowse = function (props) {

package/lib/administration/XUserBrowse.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { XBrowseProps } from "../components/XLazyDataTable";
+import { XBrowseProps } from "../components/XLazyDataTable/XLazyDataTable";
 export declare const XUserBrowse: (props: XBrowseProps) => JSX.Element;

package/lib/administration/XUserBrowse.js

@@ -40,7 +40,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XUserBrowse = void 0;
-var XLazyDataTable_1 = require("../components/XLazyDataTable");
+var XLazyDataTable_1 = require("../components/XLazyDataTable/XLazyDataTable");
 var react_1 = __importDefault(require("react"));
 var XUserForm_1 = require("./XUserForm");
 var XUtils_1 = require("../components/XUtils");

package/lib/components/XAutoComplete.d.ts

@@ -9,6 +9,7 @@ import { DataTableSortMeta } from "primereact/datatable";
 export interface XAutoCompleteProps extends XFormComponentProps<XObject> {
     assocField: string;
     displayField: string | string[];
+    itemTemplate?: (suggestion: any, index: number, createStringValue: boolean, defaultValue: (suggestion: any) => string) => React.ReactNode;
     searchBrowse?: JSX.Element;
     assocForm?: JSX.Element;
     suggestions?: any[];
@@ -21,6 +22,7 @@ export interface XAutoCompleteProps extends XFormComponentProps<XObject> {
     fields?: string[];
     width?: string;
     scrollHeight?: string;
+    inputClassName?: string;
     inputStyle?: React.CSSProperties;
 }
 export declare class XAutoComplete extends XFormComponent<XObject, XAutoCompleteProps> {

package/lib/components/XAutoComplete.js

@@ -70,7 +70,7 @@ var XAutoComplete = /** @class */ (function (_super) {
         // div className="col" nam zabezpeci aby XAutoCompleteBase nezaberal celu dlzku grid-u (ma nastaveny width=100% vdaka "formgroup-inline")
         return (react_1.default.createElement("div", { className: "field grid" },
             react_1.default.createElement("label", { htmlFor: this.props.assocField, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
-            react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), 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, width: this.props.width, scrollHeight: this.props.scrollHeight, suggestions: this.props.suggestions, suggestionsLoad: this.props.suggestionsLoad, lazyLoadMaxRows: this.props.lazyLoadMaxRows, splitQueryValue: this.props.splitQueryValue, minLength: this.props.minLength, suggestionsQuery: { entity: this.xAssoc.entityName, filter: function () { return _this.getFilterBase(_this.props.filter); }, sortField: this.props.sortField, fields: this.props.fields } })));
+            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, width: this.props.width, scrollHeight: this.props.scrollHeight, suggestions: this.props.suggestions, suggestionsLoad: this.props.suggestionsLoad, lazyLoadMaxRows: this.props.lazyLoadMaxRows, splitQueryValue: this.props.splitQueryValue, minLength: this.props.minLength, 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 XAutoComplete;
 }(XFormComponent_1.XFormComponent));

package/lib/components/XAutoCompleteBase.d.ts

@@ -22,6 +22,7 @@ export interface XAutoCompleteBaseProps {
     suggestionsQuery?: XQuery;
     lazyLoadMaxRows: number;
     field: string | string[];
+    itemTemplate?: (suggestion: any, index: number, createStringValue: boolean, defaultValue: (suggestion: any) => string) => React.ReactNode;
     splitQueryValue: boolean;
     searchBrowse?: JSX.Element;
     valueForm?: JSX.Element;
@@ -29,6 +30,7 @@ export interface XAutoCompleteBaseProps {
     minLength?: number;
     width?: string;
     scrollHeight?: string;
+    inputClassName?: string;
     readOnly?: boolean;
     error?: string;
     onErrorChange: (error: string | undefined) => void;
@@ -85,7 +87,9 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
     onEditAssocValue(): void;
     computeInputValue(): any;
     itemTemplate(suggestion: any, index: number): React.ReactNode;
-    computeDisplayValue(suggestion: any): string;
+    itemTemplateString(suggestion: any): string;
+    computeItemTemplate(suggestion: any, index: number, createStringValue: boolean): React.ReactNode;
+    computeDefaultDisplayValue(suggestion: any): string;
     static isMoreSuggestions(suggestion: any): boolean;
     createSearchBrowseParams(): XSearchBrowseParams;
     render(): JSX.Element;

package/lib/components/XAutoCompleteBase.js

@@ -150,7 +150,8 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         _this.onSelect = _this.onSelect.bind(_this);
         _this.onBlur = _this.onBlur.bind(_this);
         _this.itemTemplate = _this.itemTemplate.bind(_this);
-        _this.computeDisplayValue = _this.computeDisplayValue.bind(_this);
+        _this.itemTemplateString = _this.itemTemplateString.bind(_this);
+        _this.computeDefaultDisplayValue = _this.computeDefaultDisplayValue.bind(_this);
         _this.formDialogOnSaveOrCancel = _this.formDialogOnSaveOrCancel.bind(_this);
         _this.formDialogOnHide = _this.formDialogOnHide.bind(_this);
         _this.searchDialogOnChoose = _this.searchDialogOnChoose.bind(_this);
@@ -269,7 +270,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
                             }
                             filteredSuggestions = suggestions.filter(function (suggestion) {
                                 var e_1, _a;
-                                var fieldValue = _this.computeDisplayValue(suggestion);
+                                var fieldValue = _this.itemTemplateString(suggestion);
                                 // specialna null polozka (prazdny objekt) - test dame az za test fieldValue na undefined - koli performance
                                 if (fieldValue === undefined && Object.keys(suggestion).length === 0) {
                                     return false;
@@ -328,11 +329,12 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
                         findResult = _a.sent();
                         filteredSuggestions = findResult.rowList;
                         // ak sme nesortovali v DB (co je draha operacia) tak zosortujeme teraz
-                        // (computeDisplayValue sa vola duplicitne ale pre tych cca 20 zaznamov je to ok)
+                        // (itemTemplateString sa vola duplicitne ale pre tych cca 20 zaznamov je to ok)
                         if (this.props.suggestionsQuery.sortField === undefined) {
-                            filteredSuggestions = XUtils_1.XUtils.arraySort(filteredSuggestions, this.computeDisplayValue);
+                            filteredSuggestions = XUtils_1.XUtils.arraySort(filteredSuggestions, this.itemTemplateString);
                         }
                         // ak mame o 1 zaznam viac ako je lazyLoadMaxRows, zmenime posledny zaznam na ...
+                        // TODO - lepsie by bolo posledny zaznam vyhodit a popisok ... zobrazit do footer-a (odpadnu problemy z pripadnou selekciou pseudozaznamu ...)
                         if (filteredSuggestions.length > this.props.lazyLoadMaxRows) {
                             filteredSuggestions[filteredSuggestions.length - 1] = XAutoCompleteBase.valueMoreSuggestions; // zatial priamo string
                         }
@@ -577,7 +579,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         if (!this.state.inputChanged) {
             // poznamka: ak object === null tak treba do inputu zapisovat prazdny retazec, ak by sme pouzili null, neprejavila by sa zmena v modeli na null
             var object = this.props.value;
-            inputValue = (object !== null) ? this.computeDisplayValue(object) : ""; // TODO - je "" ok?
+            inputValue = (object !== null) ? this.computeItemTemplate(object, -1, true) : ""; // TODO - je "" ok?
         }
         else {
             inputValue = this.state.inputValueState;
@@ -585,9 +587,33 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         return inputValue;
     };
     XAutoCompleteBase.prototype.itemTemplate = function (suggestion, index) {
-        return this.computeDisplayValue(suggestion);
+        return this.computeItemTemplate(suggestion, index, false);
     };
-    XAutoCompleteBase.prototype.computeDisplayValue = function (suggestion) {
+    // pouziva sa na vytvorenie hodnoty do inputu (vyselectovany zaznam) a tiez na pripadne sortovanie a filtrovanie na frontende (ak nepouzivame lazy nacitavanie)
+    XAutoCompleteBase.prototype.itemTemplateString = function (suggestion) {
+        var itemValue = this.computeItemTemplate(suggestion, -1, true);
+        if (typeof itemValue !== "string") {
+            throw "XAutoCompleteBase: function of the property itemTemplate created non-string value for suggestion. Please create string value if parameter createStringValue = true.";
+        }
+        return itemValue;
+    };
+    XAutoCompleteBase.prototype.computeItemTemplate = function (suggestion, index, createStringValue) {
+        var itemTemplate;
+        // osetrenie specialnej polozky ... dame sem, nech sa to nemusi inde riesit
+        if (XAutoCompleteBase.isMoreSuggestions(suggestion)) {
+            itemTemplate = suggestion;
+        }
+        else {
+            if (this.props.itemTemplate) {
+                itemTemplate = this.props.itemTemplate(suggestion, index, createStringValue, this.computeDefaultDisplayValue);
+            }
+            else {
+                itemTemplate = this.computeDefaultDisplayValue(suggestion);
+            }
+        }
+        return itemTemplate;
+    };
+    XAutoCompleteBase.prototype.computeDefaultDisplayValue = function (suggestion) {
         var e_2, _a;
         var displayValue = "";
         if (XAutoCompleteBase.isMoreSuggestions(suggestion)) {
@@ -685,7 +711,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         // <DobrovolnikForm id={this.formDialogObjectId} object={this.formDialogInitValuesForInsert} onSaveOrCancel={this.formDialogOnSaveOrCancel}/>
         // formgroup-inline lepi SplitButton na autocomplete a zarovna jeho vysku
         return (react_1.default.createElement("div", { className: "x-auto-complete-base", style: { width: this.props.width } },
-            react_1.default.createElement(autocomplete_1.AutoComplete, __assign({ value: inputValue, suggestions: this.state.filteredSuggestions, completeMethod: this.completeMethod, itemTemplate: this.itemTemplate, onChange: this.onChange, onSelect: this.onSelect, onBlur: this.onBlur, minLength: this.props.minLength, scrollHeight: this.props.scrollHeight, ref: this.autoCompleteRef, readOnly: readOnly, disabled: readOnly }, XUtils_1.XUtils.createErrorProps(error))),
+            react_1.default.createElement(autocomplete_1.AutoComplete, __assign({ value: inputValue, suggestions: this.state.filteredSuggestions, completeMethod: this.completeMethod, itemTemplate: this.itemTemplate, onChange: this.onChange, onSelect: this.onSelect, onBlur: this.onBlur, minLength: this.props.minLength, scrollHeight: this.props.scrollHeight, ref: this.autoCompleteRef, readOnly: readOnly, disabled: readOnly }, XUtils_1.XUtils.createErrorProps(error), { inputClassName: this.props.inputClassName })),
             dropdownButton,
             this.props.valueForm != undefined ?
                 react_1.default.createElement(dialog_1.Dialog, { visible: this.state.formDialogOpened, onHide: this.formDialogOnHide, header: this.formDialogObjectId ? 'Modification' : 'New row' }, react_1.default.cloneElement(this.props.valueForm, {

package/lib/components/XAutoCompleteDT.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { XFormComponentDT, XFormComponentDTProps } from "./XFormComponentDT";
 import { XAssoc } from "../serverApi/XEntityMetadata";
 import { OperationType } from "./XUtils";
@@ -8,7 +8,8 @@ import { XTableFieldFilterProp } from "./XFormDataTable2";
 import { DataTableSortMeta } from "primereact/datatable";
 export interface XAutoCompleteDTProps extends XFormComponentDTProps {
     assocField: string;
-    displayField: string;
+    displayField: string | string[];
+    itemTemplate?: (suggestion: any, index: number, createStringValue: boolean, defaultValue: (suggestion: any) => string) => React.ReactNode;
     searchBrowse?: JSX.Element;
     assocForm?: JSX.Element;
     suggestions?: any[];
@@ -20,6 +21,7 @@ export interface XAutoCompleteDTProps extends XFormComponentDTProps {
     sortField?: string | DataTableSortMeta[];
     fields?: string[];
     scrollHeight?: string;
+    inputClassName?: string;
 }
 export declare class XAutoCompleteDT extends XFormComponentDT<XAutoCompleteDTProps> {
     protected xAssoc: XAssoc;

package/lib/components/XAutoCompleteDT.js

@@ -68,7 +68,7 @@ var XAutoCompleteDT = /** @class */ (function (_super) {
         // 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(), 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, 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 } }));
+        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/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, 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>;
@@ -54,7 +55,9 @@ export interface XLazyDataTableProps {
     sortField?: string | DataTableSortMeta[];
     fullTextSearch: boolean | string[];
     fields?: string[];
-    multiLineSwitch: boolean;
+    multilineSwitch: boolean;
+    multilineSwitchInitValue: XMultilineRenderType;
+    multilineSwitchFewLinesCount: number;
     searchBrowseParams?: XSearchBrowseParams;
     width?: string;
     rowClassName?: (data: any) => object | string | undefined;
@@ -71,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;
@@ -86,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;
@@ -96,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: {

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

@@ -110,23 +110,26 @@ exports.XLazyColumn = exports.XLazyDataTable = void 0;
 var react_1 = __importStar(require("react"));
 var datatable_1 = require("primereact/datatable");
 var column_1 = require("primereact/column");
-var XButton_1 = require("./XButton");
-var XUtils_1 = require("./XUtils");
-var XUtilsMetadata_1 = require("./XUtilsMetadata");
-var XDropdownDTFilter_1 = require("./XDropdownDTFilter");
-var XUtilsConversions_1 = require("../serverApi/XUtilsConversions");
-var FindParam_1 = require("../serverApi/FindParam");
-var XButtonIconSmall_1 = require("./XButtonIconSmall");
+var XButton_1 = require("../XButton");
+var XUtils_1 = require("../XUtils");
+var XUtilsMetadata_1 = require("../XUtilsMetadata");
+var XDropdownDTFilter_1 = require("../XDropdownDTFilter");
+var XUtilsConversions_1 = require("../../serverApi/XUtilsConversions");
+var FindParam_1 = require("../../serverApi/FindParam");
+var XButtonIconSmall_1 = require("../XButtonIconSmall");
 var tristatecheckbox_1 = require("primereact/tristatecheckbox");
-var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
+var XUtilsCommon_1 = require("../../serverApi/XUtilsCommon");
 var XExportRowsDialog_1 = require("./XExportRowsDialog");
 var api_1 = require("primereact/api");
-var XCalendar_1 = require("./XCalendar");
-var XInputDecimalBase_1 = require("./XInputDecimalBase");
-var XLocale_1 = require("./XLocale");
-var XFtsInput_1 = require("./XFtsInput");
-var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
-var inputswitch_1 = require("primereact/inputswitch");
+var XCalendar_1 = require("../XCalendar");
+var XInputDecimalBase_1 = require("../XInputDecimalBase");
+var XLocale_1 = require("../XLocale");
+var XFtsInput_1 = require("../XFtsInput");
+var XUtilsMetadataCommon_1 = require("../../serverApi/XUtilsMetadataCommon");
+var editor_1 = require("primereact/editor");
+var XMultilineSwitch_1 = require("./XMultilineSwitch");
+var XMultilineRenderer_1 = require("./XMultilineRenderer");
+var XHtmlRenderer_1 = require("./XHtmlRenderer");
 var XLazyDataTable = function (props) {
     var _a;
     // must be here, is used in createInitFilters()
@@ -236,7 +239,7 @@ var XLazyDataTable = function (props) {
     var _f = __read((0, react_1.useState)(filtersInit), 2), filters = _f[0], setFilters = _f[1]; // filtrovanie na "controlled manner" (moze sa sem nainicializovat nejaka hodnota)
     var initFtsInputValue = props.fullTextSearch ? createInitFtsInputValue() : undefined;
     var _g = __read((0, react_1.useState)(initFtsInputValue), 2), ftsInputValue = _g[0], setFtsInputValue = _g[1];
-    var _h = __read((0, react_1.useState)(true), 2), multiLineSwitchValue = _h[0], setMultiLineSwitchValue = _h[1];
+    var _h = __read((0, react_1.useState)(props.multilineSwitchInitValue), 2), multilineSwitchValue = _h[0], setMultilineSwitchValue = _h[1];
     var _j = __read((0, react_1.useState)(XUtils_1.XUtils.createMultiSortMeta(props.sortField)), 2), multiSortMeta = _j[0], setMultiSortMeta = _j[1];
     var _k = __read((0, react_1.useState)(null), 2), selectedRow = _k[0], setSelectedRow = _k[1];
     var _l = __read((_a = props.dataLoadedState) !== null && _a !== void 0 ? _a : (0, react_1.useState)(false), 2), dataLoaded = _l[0], setDataLoaded = _l[1]; // priznak kde si zapiseme, ci uz sme nacitali data
@@ -396,6 +399,10 @@ var XLazyDataTable = function (props) {
         }
         return headers;
     };
+    var hasContentTypeHtml = function () {
+        var columns = props.children;
+        return columns.some(function (column) { return column.props.contentType === "html"; });
+    };
     var onSelectionChange = function (event) {
         //console.log("zavolany onSelectionChange");
         //console.log(event.value);
@@ -617,23 +624,26 @@ var XLazyDataTable = function (props) {
         }
         return betweenFilter;
     };
-    var valueAsUI = function (value, xField) {
+    var valueAsUI = function (value, xField, contentType) {
         var valueResult;
         if (xField.type === "boolean") {
             // TODO - efektivnejsie by bolo renderovat len prislusne ikonky
             valueResult = react_1.default.createElement(tristatecheckbox_1.TriStateCheckbox, { value: value, disabled: true });
         }
         else {
-            // ine typy - convertValue vrati string
-            // mame zapnutu konverziu fromModel, lebo z json-u nam prichadzaju objekty typu string (napr. pri datumoch)
-            valueResult = (0, XUtilsConversions_1.convertValue)(xField, value, true, XUtilsConversions_1.AsUIType.Form);
-            // ak mame viacriadkovy text a zapnuty multiLineSwitch (defaultne je zapnuty aj ked nie je zobrazeny)
-            if (multiLineSwitchValue) {
-                if (xField.type === "string" && typeof valueResult === "string" && valueResult) {
-                    var lines = valueResult.split(XUtilsCommon_1.XUtilsCommon.newLine);
-                    if (lines.length >= 2) {
-                        var elemList = lines.map(function (value, index) { return react_1.default.createElement("div", { key: index }, value); });
-                        valueResult = react_1.default.createElement("div", null, elemList);
+            if (contentType === "html") {
+                // value should be always string (xField.type === "string")
+                valueResult = react_1.default.createElement(XHtmlRenderer_1.XHtmlRenderer, { htmlValue: value, renderType: multilineSwitchValue, fewLinesCount: props.multilineSwitchFewLinesCount });
+            }
+            else {
+                // ine typy - convertValue vrati string
+                // mame zapnutu konverziu fromModel, lebo z json-u nam prichadzaju objekty typu string (napr. pri datumoch)
+                valueResult = (0, XUtilsConversions_1.convertValue)(xField, value, true, XUtilsConversions_1.AsUIType.Form);
+                // ak mame viacriadkovy text a multilineSwitch nastaveny na viac ako 1 riadok (defaultne je nastaveny na "allLines") pouzijeme XMultilineRenderer
+                if (contentType === "multiline" && multilineSwitchValue !== "singleLine") {
+                    if (xField.type === "string" && typeof valueResult === "string" && valueResult) {
+                        var lines = valueResult.split(XUtilsCommon_1.XUtilsCommon.newLine);
+                        valueResult = react_1.default.createElement(XMultilineRenderer_1.XMultilineRenderer, { valueList: lines, renderType: multilineSwitchValue, fewLinesCount: props.multilineSwitchFewLinesCount, multilineContent: true });
                     }
                 }
             }
@@ -644,11 +654,11 @@ var XLazyDataTable = function (props) {
         var bodyValue;
         var rowDataValue = XUtilsCommon_1.XUtilsCommon.getValueOrValueListByPath(rowData, columnProps.field);
         if (Array.isArray(rowDataValue)) {
-            var elemList = rowDataValue.map(function (value, index) { return react_1.default.createElement("div", { key: index }, valueAsUI(value, xField)); });
-            bodyValue = react_1.default.createElement("div", null, elemList);
+            var elemList = rowDataValue.map(function (value) { return valueAsUI(value, xField, columnProps.contentType); });
+            bodyValue = react_1.default.createElement(XMultilineRenderer_1.XMultilineRenderer, { valueList: elemList, renderType: multilineSwitchValue, fewLinesCount: props.multilineSwitchFewLinesCount });
         }
         else {
-            bodyValue = valueAsUI(rowDataValue, xField);
+            bodyValue = valueAsUI(rowDataValue, xField, columnProps.contentType);
         }
         return bodyValue;
     };
@@ -898,7 +908,7 @@ var XLazyDataTable = function (props) {
             ftsInputValue ? react_1.default.createElement(XFtsInput_1.XFtsInput, { value: ftsInputValue, onChange: function (value) { return setFtsInputValue(value); } }) : null,
             react_1.default.createElement(XButton_1.XButton, { key: "filter", label: (0, XLocale_1.xLocaleOption)('filter'), onClick: onClickFilter }),
             react_1.default.createElement(XButton_1.XButton, { key: "clearFilter", label: (0, XLocale_1.xLocaleOption)('clearFilter'), onClick: onClickClearFilter }),
-            props.multiLineSwitch ? react_1.default.createElement(inputswitch_1.InputSwitch, { checked: multiLineSwitchValue, onChange: function (e) { return setMultiLineSwitchValue(e.value); }, className: "m-1" }) : null),
+            props.multilineSwitch ? react_1.default.createElement(XMultilineSwitch_1.XMultilineSwitch, { value: multilineSwitchValue, onChange: function (value) { return setMultilineSwitchValue(value); }, className: "m-1" }) : null),
         react_1.default.createElement("div", { className: "flex justify-content-center" },
             react_1.default.createElement(datatable_1.DataTable, { value: value.rowList, dataKey: dataKey, paginator: props.paginator, rows: rows, totalRecords: value.totalRecords, lazy: true, first: first, onPage: onPage, loading: loading, filterDisplay: props.filterDisplay, filters: filters, onFilter: onFilter, sortMode: "multiple", removableSort: true, multiSortMeta: multiSortMeta, onSort: onSort, selectionMode: "single", selection: selectedRow, onSelectionChange: onSelectionChange, onRowDoubleClick: onRowDoubleClick, rowClassName: props.rowClassName, ref: dataTableEl, className: "p-datatable-sm x-lazy-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, paginatorLeft: paginatorLeft, paginatorRight: paginatorRight, scrollable: props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
         react_1.default.createElement("div", { className: "flex justify-content-center" },
@@ -909,7 +919,8 @@ var XLazyDataTable = function (props) {
             props.appButtonsForRow ? props.appButtonsForRow.map(function (xAppButton) { return react_1.default.createElement(XButton_1.XButton, { key: xAppButton.key, icon: xAppButton.icon, label: xAppButton.label, onClick: function () { return onClickAppButtonForRow(xAppButton.onClick); } }); }) : null,
             props.appButtons,
             props.searchBrowseParams !== undefined ? react_1.default.createElement(XButton_1.XButton, { key: "choose", label: (0, XLocale_1.xLocaleOption)('chooseRow'), onClick: onClickChoose }) : null,
-            exportRows ? react_1.default.createElement(XExportRowsDialog_1.XExportRowsDialog, { key: "exportRowsDialog", dialogOpened: exportRowsDialogOpened, hideDialog: function () { return setExportRowsDialogOpened(false); }, rowCount: exportRowsDialogRowCount, exportParams: createExportParams }) : null)));
+            exportRows ? react_1.default.createElement(XExportRowsDialog_1.XExportRowsDialog, { key: "exportRowsDialog", dialogOpened: exportRowsDialogOpened, hideDialog: function () { return setExportRowsDialogOpened(false); }, rowCount: exportRowsDialogRowCount, exportParams: createExportParams }) : null),
+        hasContentTypeHtml() ? react_1.default.createElement(editor_1.Editor, { style: { display: 'none' }, showHeader: false }) : null /* we want to import css if needed (<style type="text/css" data-primereact-style-id="editor">) */));
 };
 exports.XLazyDataTable = XLazyDataTable;
 exports.XLazyDataTable.defaultProps = {
@@ -917,7 +928,9 @@ exports.XLazyDataTable.defaultProps = {
     rows: 10,
     filterDisplay: "row",
     fullTextSearch: true,
-    multiLineSwitch: false,
+    multilineSwitch: false,
+    multilineSwitchInitValue: "allLines",
+    multilineSwitchFewLinesCount: 2,
     scrollable: true,
     scrollWidth: 'viewport',
     scrollHeight: 'viewport',

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { XMultilineRenderType } from "./XLazyDataTable";
+export declare const XMultilineRenderer: (props: {
+    valueList: React.ReactNode[];
+    renderType: XMultilineRenderType;
+    fewLinesCount: number;
+    multilineContent?: boolean;
+}) => JSX.Element;

package/lib/components/XLazyDataTable/XMultilineRenderer.js

@@ -0,0 +1,80 @@
+"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.XMultilineRenderer = void 0;
+var react_1 = __importStar(require("react"));
+var button_1 = require("primereact/button");
+var XMultilineRenderer = function (props) {
+    // used only for props.renderType === "fewLines"
+    var _a = __read((0, react_1.useState)(false), 2), showAllLines = _a[0], setShowAllLines = _a[1];
+    var valueResult; // musime vracat element, ak chceme XMultilineRenderer volat priamo cez jsx
+    if (props.renderType === "singleLine") {
+        // TODO - joinovat elementy
+        valueResult = react_1.default.createElement("div", null, props.valueList.join(", ")); // pouziva sa hlavne pre oneToMany asociacie
+    }
+    else {
+        var valueListLocal = props.valueList;
+        if (props.renderType === "fewLines" && !showAllLines) {
+            valueListLocal = valueListLocal.slice(0, props.fewLinesCount);
+        }
+        var elemList = valueListLocal.map(function (value, index) { return react_1.default.createElement("div", { key: index }, value); });
+        if (props.renderType === "fewLines") {
+            if (props.valueList.length > props.fewLinesCount) {
+                // prepiseme posledny element v zozname - pridame mu button
+                var elemListLastIndex = elemList.length - 1;
+                elemList[elemListLastIndex] =
+                    react_1.default.createElement("div", { key: elemListLastIndex },
+                        valueListLocal[elemListLastIndex],
+                        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" }));
+                // ak by bol nejaky problem s tym hore tak treba pouzit toto:
+                // elemList[elemListLastIndex] =
+                //     <div className="flex flex-row flex-wrap">
+                //         <div key={elemListLastIndex}>{valueListLocal[elemListLastIndex]}</div>
+                //         <Button icon={showAllLines ? "pi pi-angle-double-left" : "pi pi-angle-double-right"} onClick={() => setShowAllLines(!showAllLines)}
+                //                 className="x-button-multiline-expand-collapse"/>
+                //     </div>;
+            }
+        }
+        valueResult = react_1.default.createElement("div", { className: props.multilineContent ? "x-multiline-content" : undefined }, elemList);
+    }
+    return valueResult;
+};
+exports.XMultilineRenderer = XMultilineRenderer;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { XMultilineRenderType } from "./XLazyDataTable";
+export declare const XMultilineSwitch: (props: {
+    value: XMultilineRenderType;
+    onChange: (value: XMultilineRenderType) => void;
+    className?: string | undefined;
+}) => JSX.Element;

package/lib/components/XLazyDataTable/XMultilineSwitch.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XMultilineSwitch = void 0;
+var react_1 = __importDefault(require("react"));
+var selectbutton_1 = require("primereact/selectbutton");
+var XMultilineSwitch = function (props) {
+    var options = [
+        { icon: 'pi pi-minus', value: 'singleLine' },
+        { icon: 'pi pi-bars', value: 'fewLines' },
+        { icon: 'pi pi-align-justify', value: 'allLines' }
+    ];
+    var itemTemplate = function (option) {
+        return react_1.default.createElement("i", { className: option.icon });
+    };
+    return (react_1.default.createElement(selectbutton_1.SelectButton, { value: props.value, onChange: function (e) { return props.onChange(e.value); }, options: options, optionValue: "value", itemTemplate: itemTemplate, className: props.className }));
+};
+exports.XMultilineSwitch = XMultilineSwitch;

package/lib/components/XUtilsMetadata.d.ts

@@ -1,6 +1,6 @@
 import { XField } from "../serverApi/XEntityMetadata";
 import { XBrowseMeta } from "../serverApi/XBrowseMetadata";
-import { XBetweenFilterProp } from "./XLazyDataTable";
+import { XBetweenFilterProp } from "./XLazyDataTable/XLazyDataTable";
 export declare class XUtilsMetadata {
     private static xBrowseMetaMap;
     static fetchAndSetXEntityMap(): Promise<any>;

package/lib/serverApi/XUtilsCommon.d.ts

@@ -10,6 +10,7 @@ export declare class XUtilsCommon {
     static isSingleField(path: string): boolean;
     static getPrefixAndField(path: string): [string | null, string];
     static objectAsJSON(value: any): string;
+    static arrayCreateMap<ID, T>(array: T[], idField: string): Map<ID, T>;
     static getDayName(date: Date | null | undefined): string | undefined;
     static dateAddDays(date: Date | null, days: number): Date | null;
     static findFirstMatch(pattern: RegExp, value: string): string | null;

package/lib/serverApi/XUtilsCommon.js

@@ -190,6 +190,26 @@ var XUtilsCommon = /** @class */ (function () {
         Date.prototype.toJSON = dateToJSONOriginal;
         return json;
     };
+    XUtilsCommon.arrayCreateMap = function (array, idField) {
+        var e_2, _a;
+        var idRowMap = new Map();
+        try {
+            for (var array_1 = __values(array), array_1_1 = array_1.next(); !array_1_1.done; array_1_1 = array_1.next()) {
+                var row = array_1_1.value;
+                if (row) {
+                    idRowMap.set(row[idField], row);
+                }
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (array_1_1 && !array_1_1.done && (_a = array_1.return)) _a.call(array_1);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        return idRowMap;
+    };
     XUtilsCommon.getDayName = function (date) {
         var days = ['nedeľa', 'pondelok', 'utorok', 'streda', 'štvrtok', 'piatok', 'sobota'];
         return date ? days[date.getDay()] : undefined;
@@ -212,7 +232,12 @@ var XUtilsCommon = /** @class */ (function () {
     };
     XUtilsCommon.today = function () {
         var today = new Date();
-        today.setHours(0, 0, 0, 0);
+        // vynulujeme casovu zlozku
+        // poznamka: Date vzdy obsahuje aj casovu zlozku. Nase konverzne funkcie dateFromModel a dateFromUI pouzivaju konverziu new Date('YYYY-MM-DD')
+        // a tato konverzia vytvara datum s GMT/UTC/Z casom 00:00:00 (stredoeuropsky 00:01:00 - akokeby sme zadavali new Date('YYYY-MM-DDT00:00:00Z'))
+        //today.setHours(0, 0, 0, 0); // nastavi cas 00:00:00 v aktualnej timezone (stredoeuropsky 00:00:00, GMT 23:00:00)
+        // - potom nam nefunguje porovnavanie s datumami vytvorenymi cez funkcie dateFromModel a dateFromUI
+        today.setUTCHours(0, 0, 0, 0);
         return today;
     };
     // vrati true ak sa string sklada iba z cislic, moze mat + alebo - na zaciatku

package/lib/serverApi/XUtilsMetadataCommon.d.ts

@@ -11,6 +11,7 @@ export declare class XUtilsMetadataCommon {
     static getXEntity(entity: string): XEntity;
     static getXFieldBase(xEntity: XEntity, field: string): XField | undefined;
     static getXField(xEntity: XEntity, field: string): XField;
+    static getXFieldByPathBase(xEntity: XEntity, path: string): XField | undefined;
     static getXFieldByPath(xEntity: XEntity, path: string): XField;
     static getXFieldByPathStr(entity: string, path: string): XField;
     static getXAssocBase(xEntity: XEntity, assocField: string): XAssoc | undefined;

package/lib/serverApi/XUtilsMetadataCommon.js

@@ -64,6 +64,22 @@ var XUtilsMetadataCommon = /** @class */ (function () {
         }
         return xField;
     };
+    XUtilsMetadataCommon.getXFieldByPathBase = function (xEntity, path) {
+        var _a = __read(XUtilsCommon_1.XUtilsCommon.getFieldAndRestPath(path), 2), field = _a[0], restPath = _a[1];
+        if (restPath === null) {
+            return XUtilsMetadataCommon.getXFieldBase(xEntity, field);
+        }
+        else {
+            var xAssoc = XUtilsMetadataCommon.getXAssocBase(xEntity, field);
+            if (xAssoc) {
+                var xAssocEntity = XUtilsMetadataCommon.getXEntity(xAssoc.entityName);
+                return XUtilsMetadataCommon.getXFieldByPathBase(xAssocEntity, restPath);
+            }
+            else {
+                return undefined;
+            }
+        }
+    };
     XUtilsMetadataCommon.getXFieldByPath = function (xEntity, path) {
         var _a = __read(XUtilsCommon_1.XUtilsCommon.getFieldAndRestPath(path), 2), field = _a[0], restPath = _a[1];
         if (restPath === null) {

package/lib/serverApi/x-lib-api.d.ts

@@ -0,0 +1,6 @@
+export interface XGetSequenceValueRequest {
+    name: string;
+}
+export interface XGetSequenceValueResponse {
+    value: number;
+}

package/lib/serverApi/x-lib-api.js

@@ -0,0 +1,3 @@
+"use strict";
+// misc api used in lib
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michalrakus/x-react-web-lib",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "description": "",
   "scripts": {
     "clean": "rimraf lib",
@@ -41,6 +41,7 @@
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
     "primereact": "~10.4.0",
+    "quill": "^1.3.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-transition-group": "^4.4.5"