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

package/XInputTextareaBase.d.ts

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

package/XInputTextareaBase.js

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

package/gulpfile.js

@@ -55,6 +55,7 @@ function generateApi(cb) {
         "./lib/components/XInputIntervalBase",
         "./lib/components/XInputText",
         "./lib/components/XInputTextarea",
+        "./lib/components/XInputTextareaBase",
         "./lib/components/XLazyDataTable",
         "./lib/components/XLocale",
         "./lib/components/XLoginDialog",

package/lib/components/XAutoCompleteBase.d.ts

@@ -54,6 +54,7 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
     createDropdownItem(splitButtonItems: MenuItem[]): void;
     onOpenDropdown(e: any): void;
     openDropdown(e: any): void;
+    onEditAssocValue(): void;
     computeInputValue(): any;
     createSearchBrowseParams(): XSearchBrowseParams;
     render(): JSX.Element;

package/lib/components/XAutoCompleteBase.js

@@ -287,13 +287,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
                         alert('Please select some row.');
                     }
                     else {
-                        // otvorime dialog na update
-                        if (_this.props.idField === undefined) {
-                            throw "XAutoCompleteBase: property valueForm is defined but property idField is also needed for form editation.";
-                        }
-                        _this.formDialogObjectId = _this.props.value[_this.props.idField];
-                        _this.formDialogInitValuesForInsert = undefined;
-                        _this.setState({ formDialogOpened: true });
+                        _this.onEditAssocValue();
                     }
                 }
             }
@@ -349,6 +343,15 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         // otvori dropdown (search je metoda popisana v API, volanie sme skopcili zo zdrojakov primereact)
         this.autoCompleteRef.current.search(e, '', 'dropdown');
     };
+    XAutoCompleteBase.prototype.onEditAssocValue = function () {
+        // otvorime dialog na update
+        if (this.props.idField === undefined) {
+            throw "XAutoCompleteBase: property valueForm is defined but property idField is also needed for form editation.";
+        }
+        this.formDialogObjectId = this.props.value[this.props.idField];
+        this.formDialogInitValuesForInsert = undefined;
+        this.setState({ formDialogOpened: true });
+    };
     // vracia objekt (ak inputChanged === false) alebo string (ak inputChanged === true)
     XAutoCompleteBase.prototype.computeInputValue = function () {
         var inputValue;
@@ -375,21 +378,34 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         var _a;
         var readOnly = (_a = this.props.readOnly) !== null && _a !== void 0 ? _a : false;
         var dropdownButton;
-        if ((this.props.searchBrowse && !readOnly) || this.props.valueForm) {
-            // mame searchBrowse alebo CRUD operacie, potrebujeme SplitButton
-            var splitButtonItems = [];
-            if (this.props.valueForm) {
-                this.createInsertUpdateItems(splitButtonItems);
+        if (!readOnly) {
+            if (this.props.searchBrowse || this.props.valueForm) {
+                // mame searchBrowse alebo CRUD operacie, potrebujeme SplitButton
+                var splitButtonItems = [];
+                if (this.props.valueForm) {
+                    this.createInsertUpdateItems(splitButtonItems);
+                }
+                if (this.props.searchBrowse && !readOnly) {
+                    this.createSearchItem(splitButtonItems);
+                }
+                this.createDropdownItem(splitButtonItems);
+                dropdownButton = react_1.default.createElement(splitbutton_1.SplitButton, { model: splitButtonItems, className: 'x-splitbutton-only-dropdown' + XUtils_1.XUtils.mobileCssSuffix(), menuClassName: 'x-splitbutton-only-dropdown-menu' + XUtils_1.XUtils.mobileCssSuffix(), disabled: readOnly });
             }
-            if (this.props.searchBrowse && !readOnly) {
-                this.createSearchItem(splitButtonItems);
+            else {
+                // mame len 1 operaciu - dame jednoduchy button
+                dropdownButton = react_1.default.createElement(button_1.Button, { icon: "pi pi-chevron-down", onClick: function (e) { return _this.onOpenDropdown(e); }, className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix() });
             }
-            this.createDropdownItem(splitButtonItems);
-            dropdownButton = react_1.default.createElement(splitbutton_1.SplitButton, { model: splitButtonItems, className: 'x-splitbutton-only-dropdown' + XUtils_1.XUtils.mobileCssSuffix(), menuClassName: 'x-splitbutton-only-dropdown-menu' + XUtils_1.XUtils.mobileCssSuffix(), disabled: readOnly });
         }
         else {
-            // mame len 1 operaciu - dame jednoduchy button
-            dropdownButton = react_1.default.createElement(button_1.Button, { icon: "pi pi-chevron-down", onClick: function (e) { return _this.onOpenDropdown(e); }, className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix(), disabled: readOnly });
+            // readOnly
+            // ak mame valueForm a mame asociovany objekt, umoznime editovat asociovany objekt
+            if (this.props.valueForm && this.props.value !== null) {
+                dropdownButton = react_1.default.createElement(button_1.Button, { icon: "pi pi-pencil", onClick: function (e) { return _this.onEditAssocValue(); }, className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix() });
+            }
+            else {
+                // dame disablovany button (z estetickych dovodov, zachovame sirku)
+                dropdownButton = react_1.default.createElement(button_1.Button, { icon: "pi pi-chevron-down", className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix(), disabled: true });
+            }
         }
         // vypocitame inputValue
         var inputValue = this.computeInputValue();
@@ -407,7 +423,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         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, field: this.props.field, onChange: this.onChange, onSelect: this.onSelect, onBlur: this.onBlur, maxLength: this.props.maxLength, ref: this.autoCompleteRef, readOnly: readOnly, disabled: readOnly }, XUtils_1.XUtils.createErrorProps(error))),
             dropdownButton,
-            this.props.valueForm != undefined && !readOnly ?
+            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, {
                     id: this.formDialogObjectId, initValues: this.formDialogInitValuesForInsert, onSaveOrCancel: this.formDialogOnSaveOrCancel
                 } /*, this.props.valueForm.children*/))

package/lib/components/XCalendar.d.ts

@@ -1,9 +1,8 @@
-import React from "react";
+/// <reference types="react" />
 export declare const XCalendar: (props: {
     id?: string | undefined;
     value: Date | null;
     onChange: (value: Date | null) => void;
-    onBlur?: ((event: React.FocusEvent<HTMLInputElement, Element>) => void) | undefined;
     readOnly?: boolean | undefined;
     error?: string | undefined;
     datetime?: boolean | undefined;

package/lib/components/XCalendar.js

@@ -10,30 +10,99 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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.XCalendar = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var calendar_1 = require("primereact/calendar");
 var XUtilsConversions_1 = require("../serverApi/XUtilsConversions");
 var XUtils_1 = require("./XUtils");
 // wrapper for Calendar component, maybe better name would be XInputDateBase
+// TODO - nefunguje rezim datetime pre zapis - dorobit konverziu!
 var XCalendar = function (props) {
     var _a;
+    // true, ak uzivatel typuje hodnotu
+    // false, ak uz uzivatel dotypoval (zavolal sa onBlur) - hodnotu berieme "z hora" (z prop.value)
+    var _b = __read((0, react_1.useState)(false), 2), inputChanged = _b[0], setInputChanged = _b[1];
+    // pouzivane, len ak inputChanged === true, je tu zapisana zmenena hodnota v inpute
+    var _c = __read((0, react_1.useState)(undefined), 2), inputValueState = _c[0], setInputValueState = _c[1];
     var onChange = function (e) {
-        // z Calendar prichadza e.value - typ Date alebo null
+        // standardne prichadza z Calendar e.value - typ Date alebo null
         // typ Date prichadza ak uzivatel vyplnil validny datum, null (typeof e.value vracia "object") prichadza ak uzivatel vymazal datum
         // alebo je este datum nekompletny (uzivatel prave zadava datum)
-        // ak nastavime keepInvalid={true}, tak bude chodit nevalidny string (typeof e.value vracia "string")
-        //console.log(typeof e.value);
-        //console.log(e.value instanceof Date);
-        if (e.value instanceof Date || e.value === null) {
-            props.onChange(e.value);
+        // nastavili sme keepInvalid={true} -> bude chodit nevalidny string (typeof e.value vracia "string")
+        // naviac sme vypli parsovanie na datum (metoda parseDateTime), takze vzdy chodi "string" a konverziu robime v onBlur
+        setInputChanged(true);
+        setInputValueState(e.value); // vzdycky string
+    };
+    var onSelect = function (e) {
+        // musime tu zavolat props.onChange lebo event select zavola aj onChange ale my umyselne v onChange nevolame props.onChange
+        // (cakame na event blur, ktory po selecte nepride)
+        props.onChange(e.value); // vzdycky Date
+        // pre poriadok resetneme stav
+        setInputChanged(false);
+        setInputValueState(undefined);
+    };
+    var onBlur = function (e) {
+        if (inputChanged) {
+            // poznamka: e.target.value aj inputValueState obsahuju tu istu string hodnotu
+            var value = (0, XUtilsConversions_1.dateFromUI)(e.target.value);
+            props.onChange(value !== null && value !== void 0 ? value : null); // nekorektnu hodnotu reprezentovanu cez undefined budeme riesit akokeby user zadal null (field sa vyprazdni)
+            setInputChanged(false);
+            setInputValueState(undefined); // pre poriadok
+        }
+    };
+    var getInputValue = function () {
+        var inputValue;
+        if (inputChanged) {
+            inputValue = inputValueState; // vzdycky string
+        }
+        else {
+            inputValue = (0, XUtilsConversions_1.dateFromModel)(props.value);
         }
+        return inputValue;
     };
     var datetime = (_a = props.datetime) !== null && _a !== void 0 ? _a : false;
-    return (react_1.default.createElement(calendar_1.Calendar, __assign({ id: props.id, value: props.value, onChange: onChange, disabled: props.readOnly, showIcon: true, showOnFocus: false, dateFormat: (0, XUtilsConversions_1.dateFormatCalendar)(), showTime: datetime, showSeconds: datetime, inputClassName: datetime ? 'x-input-datetime' : 'x-input-date', onBlur: props.onBlur }, XUtils_1.XUtils.createErrorProps(props.error))));
+    // poznamka: parseDateTime nerobi ziadny parse, nechceme aby Calendar "rusil" uzivatela pri typovani datumu
+    // konverzia (a volanie props.onChange) sa robi az pri onBlur
+    return (react_1.default.createElement(calendar_1.Calendar, __assign({ id: props.id, value: getInputValue(), onChange: onChange, disabled: props.readOnly, showIcon: true, showOnFocus: false, dateFormat: (0, XUtilsConversions_1.dateFormatCalendar)(), keepInvalid: true, parseDateTime: function (text) { return text; }, showTime: datetime, showSeconds: datetime, inputClassName: datetime ? 'x-input-datetime' : 'x-input-date', onSelect: onSelect, onBlur: onBlur }, XUtils_1.XUtils.createErrorProps(props.error))));
 };
 exports.XCalendar = XCalendar;

package/lib/components/XFormBase.js

@@ -92,6 +92,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.XFormBase = exports.Form = void 0;
 var react_1 = require("react");
 var XUtils_1 = require("./XUtils");
+var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
 // class decorator ktory nastavuje property entity (dalo by sa to nastavovat v konstruktore ale decorator je menej ukecany)
 // ma sa pouzivat len na triedach odvodenych od XFormBase - obmedzenie som vsak nevedel nakodit
 // property sa nastavi az po zbehnuti konstruktora
@@ -217,8 +218,11 @@ var XFormBase = /** @class */ (function (_super) {
         return this.props.id === undefined;
     };
     XFormBase.prototype.onFieldChange = function (field, value, error, onChange, assocObjectChange) {
+        // field moze byt aj na asociovanom objekte (field length > 1, napr.: <assocX>.<fieldY>)
+        // v takom pripade sa do errorMap zapise ako key cely field <assocX>.<fieldY>
+        // (zlozitejsie riesenie by bolo zapisovat errors do specialneho technickeho atributu asociovaneho objektu ale zatial to nechame takto jednoducho)
         var object = this.getXObject();
-        object[field] = value;
+        XUtilsCommon_1.XUtilsCommon.setValueByPath(object, field, value);
         var errorMap = this.state.errorMap;
         errorMap[field] = __assign(__assign({}, errorMap[field]), { onChange: error });
         // tu zavolame onChange komponentu - object uz ma zapisanu zmenenu hodnotu, onChange nasledne zmeni dalsie hodnoty a nasledne sa zavola setState

package/lib/components/XFormComponent.js

@@ -51,13 +51,9 @@ var XFormComponent = /** @class */ (function (_super) {
     };
     XFormComponent.prototype.isReadOnly = function () {
         var readOnly;
-        if (!XUtilsCommon_1.XUtilsCommon.isSingleField(this.getField())) {
-            // if the length of field is 2 or more, then readOnly
-            readOnly = true;
-        }
         // the purpose of formReadOnly is to put the whole form to read only mode,
         // that's why the formReadOnly has higher prio then property this.props.readOnly
-        else if (this.props.form.formReadOnlyBase(this.getField())) {
+        if (this.props.form.formReadOnlyBase(this.getField())) {
             readOnly = true;
         }
         else if (typeof this.props.readOnly === 'boolean') {
@@ -75,7 +71,14 @@ var XFormComponent = /** @class */ (function (_super) {
         }
         else {
             // readOnly is undefined
-            readOnly = false;
+            if (!XUtilsCommon_1.XUtilsCommon.isSingleField(this.getField())) {
+                // if the length of field is 2 or more, then readOnly
+                readOnly = true;
+            }
+            else {
+                // length of field is 1, default readOnly = false
+                readOnly = false;
+            }
         }
         return readOnly;
     };

package/lib/components/XFormDataTable2.d.ts

@@ -92,7 +92,7 @@ export type XTableFieldOnChange = (e: XTableFieldChangeEvent<any, any>) => void;
 export type XTableFieldReadOnlyProp = boolean | ((object: any, tableRow: any) => boolean);
 export type XTableFieldFilterProp = XCustomFilter | ((object: any, rowData: any) => XCustomFilter | undefined);
 export interface XFormColumnBaseProps {
-    type: "inputSimple" | "dropdown" | "autoComplete" | "searchButton" | "custom";
+    type: "inputSimple" | "dropdown" | "autoComplete" | "searchButton" | "textarea" | "custom";
     header?: any;
     readOnly?: XTableFieldReadOnlyProp;
     dropdownInFilter?: boolean;
@@ -123,6 +123,11 @@ export interface XFormSearchButtonColumnProps extends XFormColumnBaseProps {
     displayField: string;
     searchBrowse: JSX.Element;
 }
+export interface XFormTextareaColumnProps extends XFormColumnBaseProps {
+    field: string;
+    rows: number;
+    autoResize?: boolean;
+}
 export interface XFormCustomColumnProps extends XFormColumnBaseProps {
     body: React.ReactNode | ((data: any, options: ColumnBodyOptions) => React.ReactNode);
     field?: string;
@@ -155,6 +160,15 @@ export declare const XFormSearchButtonColumn: {
         columnViewStatus: boolean;
     };
 };
+export declare const XFormTextareaColumn: {
+    (props: XFormTextareaColumnProps): null;
+    defaultProps: {
+        type: string;
+        rows: number;
+        autoResize: boolean;
+        columnViewStatus: boolean;
+    };
+};
 export declare const XFormCustomColumn: {
     (props: XFormCustomColumnProps): null;
     defaultProps: {

package/lib/components/XFormDataTable2.js

@@ -60,7 +60,7 @@ var __values = (this && this.__values) || function(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.XFormCustomColumn = exports.XFormSearchButtonColumn = exports.XFormAutoCompleteColumn = exports.XFormDropdownColumn = exports.XFormColumn = exports.XFormDataTable2 = void 0;
+exports.XFormCustomColumn = exports.XFormTextareaColumn = exports.XFormSearchButtonColumn = exports.XFormAutoCompleteColumn = exports.XFormDropdownColumn = exports.XFormColumn = exports.XFormDataTable2 = void 0;
 var XFormBase_1 = require("./XFormBase");
 var react_1 = __importStar(require("react"));
 var XDropdownDT_1 = require("./XDropdownDT");
@@ -83,6 +83,7 @@ var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
 var XLocale_1 = require("./XLocale");
 var XInputIntervalDT_1 = require("./XInputIntervalDT");
 var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
+var XInputTextareaDT_1 = require("./XInputTextareaDT");
 var XFormDataTable2 = /** @class */ (function (_super) {
     __extends(XFormDataTable2, _super);
     function XFormDataTable2(props) {
@@ -150,6 +151,10 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             var columnPropsSearchButton = columnProps;
             return columnPropsSearchButton.assocField + '.' + columnPropsSearchButton.displayField;
         }
+        else if (columnProps.type === "textarea") {
+            var columnPropsTextarea = columnProps;
+            return columnPropsTextarea.field;
+        }
         else {
             throw "Unknown prop type = " + columnProps.type;
         }
@@ -183,6 +188,11 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             isNullable = xAssoc.isNullable;
             readOnly = XFormDataTable2.isReadOnlyHeader(undefined, columnProps.readOnly);
         }
+        else if (columnProps.type === "textarea") {
+            var columnPropsTextarea = columnProps;
+            isNullable = xField.isNullable;
+            readOnly = XFormDataTable2.isReadOnlyHeader(columnPropsTextarea.field, columnProps.readOnly);
+        }
         else {
             throw "Unknown prop type = " + columnProps.type;
         }
@@ -375,10 +385,10 @@ var XFormDataTable2 = /** @class */ (function (_super) {
                 body = react_1.default.createElement(XInputDecimalDT_1.XInputDecimalDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly, onChange: columnPropsInputSimple.onChange });
             }
             else if (xField.type === "date" || xField.type === "datetime") {
-                body = react_1.default.createElement(XInputDateDT_1.XInputDateDT, { form: this.props.form, xField: xField, field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly });
+                body = react_1.default.createElement(XInputDateDT_1.XInputDateDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly, onChange: columnPropsInputSimple.onChange });
             }
             else if (xField.type === "interval") {
-                body = react_1.default.createElement(XInputIntervalDT_1.XInputIntervalDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly });
+                body = react_1.default.createElement(XInputIntervalDT_1.XInputIntervalDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly, onChange: columnPropsInputSimple.onChange });
             }
             else if (xField.type === "boolean") {
                 body = react_1.default.createElement(XCheckboxDT_1.XCheckboxDT, { form: this.props.form, xField: xField, field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly });
@@ -400,6 +410,10 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             var columnPropsSearchButton = columnProps;
             body = react_1.default.createElement(XSearchButtonDT_1.XSearchButtonDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsSearchButton.assocField, displayField: columnPropsSearchButton.displayField, searchBrowse: columnPropsSearchButton.searchBrowse, rowData: rowData, readOnly: columnPropsSearchButton.readOnly });
         }
+        else if (columnProps.type === "textarea") {
+            var columnPropsTextarea = columnProps;
+            body = react_1.default.createElement(XInputTextareaDT_1.XInputTextareaDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsTextarea.field, rows: columnPropsTextarea.rows, autoResize: columnPropsTextarea.autoResize, rowData: rowData, readOnly: columnPropsTextarea.readOnly });
+        }
         else {
             throw "Unknown prop type = " + columnProps.type;
         }
@@ -723,6 +737,12 @@ var XFormSearchButtonColumn = function (props) {
 };
 exports.XFormSearchButtonColumn = XFormSearchButtonColumn;
 exports.XFormSearchButtonColumn.defaultProps = __assign(__assign({}, XFormColumnBase_defaultProps), { type: "searchButton" });
+var XFormTextareaColumn = function (props) {
+    // nevadi ze tu nic nevraciame, field a header vieme precitat a zvysok by sme aj tak zahodili lebo vytvarame novy element
+    return (null);
+};
+exports.XFormTextareaColumn = XFormTextareaColumn;
+exports.XFormTextareaColumn.defaultProps = __assign(__assign({}, XFormColumnBase_defaultProps), { type: "textarea", rows: 1, autoResize: true });
 var XFormCustomColumn = function (props) {
     // nevadi ze tu nic nevraciame, field a header vieme precitat a zvysok by sme aj tak zahodili lebo vytvarame novy element
     return (null);

package/lib/components/XFormRowCol/XFormCol.d.ts

@@ -3,6 +3,7 @@ import { XFormBase } from "../XFormBase";
 export interface XFormColProps {
     form?: XFormBase;
     labelStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
     children: JSX.Element | JSX.Element[];
 }
 export declare const XFormCol: (props: XFormColProps) => JSX.Element;

package/lib/components/XFormRowCol/XFormCol.js

@@ -7,6 +7,6 @@ exports.XFormCol = void 0;
 var react_1 = __importDefault(require("react"));
 var XFormRowCol_1 = require("./XFormRowCol");
 var XFormCol = function (props) {
-    return react_1.default.createElement(XFormRowCol_1.XFormRowCol, { className: "x-form-col", form: props.form, labelStyle: props.labelStyle, children: props.children });
+    return react_1.default.createElement(XFormRowCol_1.XFormRowCol, { className: "x-form-col", form: props.form, labelStyle: props.labelStyle, style: props.style, children: props.children });
 };
 exports.XFormCol = XFormCol;

package/lib/components/XFormRowCol/XFormInlineRow.d.ts

@@ -3,6 +3,7 @@ import { XFormBase } from "../XFormBase";
 export interface XFormInlineRowProps {
     form?: XFormBase;
     labelStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
     children: JSX.Element | JSX.Element[];
 }
 export declare const XFormInlineRow: (props: XFormInlineRowProps) => JSX.Element;

package/lib/components/XFormRowCol/XFormInlineRow.js

@@ -7,6 +7,6 @@ exports.XFormInlineRow = void 0;
 var react_1 = __importDefault(require("react"));
 var XFormRowCol_1 = require("./XFormRowCol");
 var XFormInlineRow = function (props) {
-    return react_1.default.createElement(XFormRowCol_1.XFormRowCol, { className: "x-form-inline-row", form: props.form, labelStyle: props.labelStyle, children: props.children });
+    return react_1.default.createElement(XFormRowCol_1.XFormRowCol, { className: "x-form-inline-row", form: props.form, labelStyle: props.labelStyle, style: props.style, children: props.children });
 };
 exports.XFormInlineRow = XFormInlineRow;

package/lib/components/XFormRowCol/XFormRow.d.ts

@@ -3,6 +3,7 @@ import { XFormBase } from "../XFormBase";
 export interface XFormRowProps {
     form?: XFormBase;
     labelStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
     children: JSX.Element | JSX.Element[];
 }
 export declare const XFormRow: (props: XFormRowProps) => JSX.Element;

package/lib/components/XFormRowCol/XFormRow.js

@@ -7,6 +7,6 @@ exports.XFormRow = void 0;
 var react_1 = __importDefault(require("react"));
 var XFormRowCol_1 = require("./XFormRowCol");
 var XFormRow = function (props) {
-    return react_1.default.createElement(XFormRowCol_1.XFormRowCol, { className: "x-form-row", form: props.form, labelStyle: props.labelStyle, children: props.children });
+    return react_1.default.createElement(XFormRowCol_1.XFormRowCol, { className: "x-form-row", form: props.form, labelStyle: props.labelStyle, style: props.style, children: props.children });
 };
 exports.XFormRow = XFormRow;

package/lib/components/XFormRowCol/XFormRowCol.d.ts

@@ -4,6 +4,7 @@ export interface XFormRowColProps {
     className: "x-form-row" | "x-form-inline-row" | "x-form-col";
     form?: XFormBase;
     labelStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
     children: JSX.Element | JSX.Element[];
 }
 export declare const XFormRowCol: (props: XFormRowColProps) => JSX.Element;

package/lib/components/XFormRowCol/XFormRowCol.js

@@ -27,6 +27,6 @@ var XFormRowCol = function (props) {
     else {
         childElemList = props.children; // netreba klonovat - viac menej koli performance
     }
-    return react_1.default.createElement("div", { className: props.className }, childElemList);
+    return react_1.default.createElement("div", { className: props.className, style: props.style }, childElemList);
 };
 exports.XFormRowCol = XFormRowCol;

package/lib/components/XInputDate.d.ts

@@ -8,6 +8,5 @@ export declare class XInputDate extends XInput<Date, XInputDateProps> {
     constructor(props: XInputDateProps);
     getValue(): Date | null;
     onValueChange(value: Date | null): void;
-    onBlur(e: any): void;
     render(): JSX.Element;
 }

package/lib/components/XInputDate.js

@@ -22,41 +22,27 @@ exports.XInputDate = void 0;
 var react_1 = __importDefault(require("react"));
 var XCalendar_1 = require("./XCalendar");
 var XInput_1 = require("./XInput");
+var XUtilsConversions_1 = require("../serverApi/XUtilsConversions");
 var XInputDate = /** @class */ (function (_super) {
     __extends(XInputDate, _super);
     function XInputDate(props) {
         var _this = _super.call(this, props) || this;
         _this.onValueChange = _this.onValueChange.bind(_this);
-        _this.onBlur = _this.onBlur.bind(_this);
         return _this;
     }
     XInputDate.prototype.getValue = function () {
-        var value = null;
-        var objectValue = this.getValueFromObject();
-        // tuto zatial hack, mal by prist Date
-        if (typeof objectValue === 'string') {
-            value = new Date(objectValue);
-        }
-        else if (typeof objectValue === 'object' && objectValue instanceof Date) {
-            value = objectValue;
-        }
-        // value zostalo null ak nebol vykonany ziaden if
+        var value = (0, XUtilsConversions_1.dateFromModel)(this.getValueFromObject());
         return value;
     };
     XInputDate.prototype.onValueChange = function (value) {
         // z XCalendar prichadza value - typ Date alebo null
-        this.onValueChangeBase(value);
-    };
-    // nedame do onChange inputu, lebo by sa nas onChange volal po kazdej zmene pismenka
-    // ak bude treba, mozme este dorobit metodu "onChange2", ktora sa bude volat po kazdej zmene pismenka (asi iba do XInputText)
-    XInputDate.prototype.onBlur = function (e) {
-        this.callOnChangeFromOnBlur();
+        this.onValueChangeBase(value, this.props.onChange);
     };
     XInputDate.prototype.render = function () {
         // note: style overrides size (width of the input according to character count)
         return (react_1.default.createElement("div", { className: "field grid" },
             react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
-            react_1.default.createElement(XCalendar_1.XCalendar, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), error: this.getError(), datetime: this.xField.type === 'datetime', onBlur: this.onBlur })));
+            react_1.default.createElement(XCalendar_1.XCalendar, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), error: this.getError(), datetime: this.xField.type === 'datetime' })));
     };
     return XInputDate;
 }(XInput_1.XInput));

package/lib/components/XInputDateDT.d.ts

@@ -1,11 +1,10 @@
 /// <reference types="react" />
-import { XFormBase } from "./XFormBase";
-import { XField } from "../serverApi/XEntityMetadata";
-import { XTableFieldReadOnlyProp } from "./XFormDataTable2";
-export declare const XInputDateDT: (props: {
-    form: XFormBase;
-    xField: XField;
-    field: string;
-    rowData: any;
-    readOnly?: XTableFieldReadOnlyProp | undefined;
-}) => JSX.Element;
+import { XInputDT, XInputDTProps } from "./XInputDT";
+export interface XInputDateDTProps extends XInputDTProps {
+}
+export declare class XInputDateDT extends XInputDT<XInputDateDTProps> {
+    constructor(props: XInputDateDTProps);
+    getValue(): Date | null;
+    onValueChange(value: Date | null): void;
+    render(): JSX.Element;
+}

package/lib/components/XInputDateDT.js

@@ -1,48 +1,44 @@
 "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.XInputDateDT = void 0;
-var XUtilsConversions_1 = require("../serverApi/XUtilsConversions");
-var calendar_1 = require("primereact/calendar");
 var react_1 = __importDefault(require("react"));
-var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
-var XUtils_1 = require("./XUtils");
-var XInputDateDT = function (props) {
-    var showTime = (props.xField.type === 'datetime');
-    var cssClassName = showTime ? 'x-input-datetime' : 'x-input-date';
-    var onValueChange = function (field, rowData, newValue) {
-        // z Calendar prichadza e.value - typ Date alebo null
-        // zmenime hodnotu v modeli (odtial sa hodnota cita)
-        rowData[field] = newValue;
-        // kedze "rowData" je sucastou "props.form.state.object", tak nam staci zavolat setState({object: object}), aby sa zmena prejavila
-        props.form.onObjectDataChange();
-    };
-    var fieldValue = undefined;
-    // test na undefined je tu koli insertu noveho riadku
-    if (props.rowData !== undefined && props.rowData !== null) {
-        var rowDataValue = XUtilsCommon_1.XUtilsCommon.getValueByPath(props.rowData, props.field);
-        //  pre istotu dame na null, null je standard
-        //if (rowDataValue === undefined) {
-        //    rowDataValue = null;
-        //}
-        // TODO - konvertovat null hodnotu na "" (vo funkcii stringAsUI) je dolezite aby sa prejavila zmena na null v modeli
-        // - otestovat ci zmena na null funguje dobre -
-        //fieldValue = stringAsUI(rowDataValue);
-        // tuto zatial hack, mal by prist Date
-        if (typeof rowDataValue === 'string') {
-            fieldValue = new Date(rowDataValue);
-        }
-        else if (typeof rowDataValue === 'object' && rowDataValue instanceof Date) {
-            fieldValue = rowDataValue;
-        }
-        // fieldValue zostalo undefined (konvertujeme null -> undefined) - Calendar pozaduje undefined, nechce null
+var XInputDT_1 = require("./XInputDT");
+var XCalendar_1 = require("./XCalendar");
+var XUtilsConversions_1 = require("../serverApi/XUtilsConversions");
+var XInputDateDT = /** @class */ (function (_super) {
+    __extends(XInputDateDT, _super);
+    function XInputDateDT(props) {
+        var _this = _super.call(this, props) || this;
+        _this.onValueChange = _this.onValueChange.bind(_this);
+        return _this;
     }
-    var readOnly = XUtils_1.XUtils.isReadOnlyTableField(props.field, props.readOnly, props.form.state.object, props.rowData);
-    // TODO - nefunguje dobre pridavanie noveho riadku - su tam stare neupdatnute hodnoty - este to asi neopravili https://github.com/primefaces/primereact/issues/1277
-    // test mame na TestovaciForm
-    // appendTo={document.body} appenduje overlay panel na element body - eliminuje problem s overflow (pozri poznamku v XDropdownDTFilter)
-    return (react_1.default.createElement(calendar_1.Calendar, { appendTo: document.body, id: props.field, value: fieldValue, onChange: function (e) { return onValueChange(props.field, props.rowData, e.value); }, disabled: readOnly, showIcon: true, dateFormat: (0, XUtilsConversions_1.dateFormatCalendar)(), showTime: showTime, showSeconds: showTime, inputClassName: cssClassName, showOnFocus: false }));
-};
+    XInputDateDT.prototype.getValue = function () {
+        return (0, XUtilsConversions_1.dateFromModel)(this.getValueFromRowData());
+    };
+    XInputDateDT.prototype.onValueChange = function (value) {
+        this.onValueChangeBase(value, this.props.onChange);
+    };
+    XInputDateDT.prototype.render = function () {
+        return (react_1.default.createElement(XCalendar_1.XCalendar, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), error: this.getError(), datetime: this.xField.type === 'datetime' }));
+    };
+    return XInputDateDT;
+}(XInputDT_1.XInputDT));
 exports.XInputDateDT = XInputDateDT;

package/lib/components/XInputDecimal.js

@@ -72,7 +72,7 @@ var XInputDecimal = /** @class */ (function (_super) {
         var label = this.getLabel();
         return (react_1.default.createElement("div", { className: "field grid" },
             label !== undefined ? react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, label) : null,
-            react_1.default.createElement(inputnumber_1.InputNumber, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), mode: "decimal", locale: "de-DE", useGrouping: useGrouping, minFractionDigits: fractionDigits, maxFractionDigits: fractionDigits, min: min, max: max, size: sizeInput, style: this.props.inputStyle }, this.getClassNameTooltip(), { onBlur: this.onBlur }))));
+            react_1.default.createElement(inputnumber_1.InputNumber, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), mode: "decimal", locale: "de-DE", useGrouping: useGrouping, minFractionDigits: fractionDigits, maxFractionDigits: fractionDigits, min: min, max: max, size: sizeInput, inputStyle: this.props.inputStyle }, this.getClassNameTooltip(), { onBlur: this.onBlur }))));
     };
     return XInputDecimal;
 }(XInput_1.XInput));

package/lib/components/XInputTextarea.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
 import { XInput, XInputProps } from "./XInput";
 export interface XInputTextareaProps extends XInputProps<string> {
-    rows: number;
+    rows?: number;
     cols?: number | "full";
     labelOnTop?: boolean;
+    autoResize?: boolean;
 }
 export declare class XInputTextarea extends XInput<string, XInputTextareaProps> {
     static defaultProps: {
@@ -11,8 +12,8 @@ export declare class XInputTextarea extends XInput<string, XInputTextareaProps>
         labelOnTop: boolean;
     };
     constructor(props: XInputTextareaProps);
-    getValue(): string;
-    onValueChange(e: any): void;
+    getValue(): string | null;
+    onValueChange(value: string | null): void;
     getLabelStyle(): React.CSSProperties;
     render(): JSX.Element;
 }

package/lib/components/XInputTextarea.js

@@ -14,27 +14,15 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XInputTextarea = void 0;
 var react_1 = __importDefault(require("react"));
-var XUtilsConversions_1 = require("../serverApi/XUtilsConversions");
 var XInput_1 = require("./XInput");
-var inputtextarea_1 = require("primereact/inputtextarea");
 var XUtils_1 = require("./XUtils");
+var XInputTextareaBase_1 = require("./XInputTextareaBase");
 var XInputTextarea = /** @class */ (function (_super) {
     __extends(XInputTextarea, _super);
     function XInputTextarea(props) {
@@ -43,13 +31,10 @@ var XInputTextarea = /** @class */ (function (_super) {
         return _this;
     }
     XInputTextarea.prototype.getValue = function () {
-        // konvertovat null hodnotu na "" (vo funkcii stringAsUI) je dolezite aby sa prejavila zmena na null v modeli
-        var value = this.getValueFromObject();
-        return (0, XUtilsConversions_1.stringAsUI)(value);
+        return this.getValueFromObject();
     };
-    XInputTextarea.prototype.onValueChange = function (e) {
-        var value = (0, XUtilsConversions_1.stringFromUI)(e.target.value);
-        this.onValueChangeBase(value);
+    XInputTextarea.prototype.onValueChange = function (value) {
+        this.onValueChangeBase(value, this.props.onChange);
     };
     XInputTextarea.prototype.getLabelStyle = function () {
         var _a;
@@ -72,9 +57,12 @@ var XInputTextarea = /** @class */ (function (_super) {
             // aj tak sa asi vzdy bude pouzivat "full"
             cols = this.props.cols;
         }
+        // InputTextarea renderujeme az ked mame nacitany object, lebo inac pri autoResize sa nam nenastavi spravna velkost (hodnota nie je k dispozicii pri prvom renderingu)
         return (react_1.default.createElement("div", { className: !this.props.labelOnTop ? 'field grid' : 'field grid x-inputtextarea-label-on-top' },
             react_1.default.createElement("label", { htmlFor: this.props.field, className: !this.props.labelOnTop ? 'col-fixed' : undefined, style: this.getLabelStyle() }, this.getLabel()),
-            react_1.default.createElement(inputtextarea_1.InputTextarea, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, style: inputStyle, rows: this.props.rows, cols: cols }, this.getClassNameTooltip()))));
+            this.props.form.state.object ?
+                react_1.default.createElement(XInputTextareaBase_1.XInputTextareaBase, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, style: inputStyle, rows: this.props.rows, cols: cols, autoResize: this.props.autoResize, error: this.getError() })
+                : null));
     };
     XInputTextarea.defaultProps = {
         cols: "full",

package/lib/components/XInputTextareaBase.d.ts

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

package/lib/components/XInputTextareaBase.js

@@ -0,0 +1,92 @@
+"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.XInputTextareaBase = void 0;
+var react_1 = __importStar(require("react"));
+var XUtilsConversions_1 = require("../serverApi/XUtilsConversions");
+var XUtils_1 = require("./XUtils");
+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
+    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
+        if (inputChanged) {
+            var value = (0, XUtilsConversions_1.stringFromUI)(e.target.value);
+            props.onChange(value);
+            setInputChanged(false);
+            setInputValueState(undefined); // pre poriadok
+        }
+    };
+    var getInputValue = function () {
+        var inputValue;
+        if (inputChanged) {
+            inputValue = inputValueState;
+        }
+        else {
+            inputValue = (0, XUtilsConversions_1.stringAsUI)(props.value);
+        }
+        return inputValue;
+    };
+    return (react_1.default.createElement(inputtextarea_1.InputTextarea, __assign({ id: props.id, value: getInputValue(), onChange: onChange, onBlur: onBlur, readOnly: props.readOnly, maxLength: props.maxLength, style: props.style, rows: props.rows, cols: props.cols, autoResize: props.autoResize }, XUtils_1.XUtils.createErrorProps(props.error))));
+};
+exports.XInputTextareaBase = XInputTextareaBase;

package/lib/components/XInputTextareaDT.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { XInputDT, XInputDTProps } from "./XInputDT";
+export interface XInputTextareaDTProps extends XInputDTProps {
+    rows: number;
+    autoResize?: boolean;
+}
+export declare class XInputTextareaDT extends XInputDT<XInputTextareaDTProps> {
+    constructor(props: XInputTextareaDTProps);
+    getValue(): string | null;
+    onValueChange(value: string | null): void;
+    render(): JSX.Element;
+}

package/lib/components/XInputTextareaDT.js

@@ -0,0 +1,44 @@
+"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.XInputTextareaDT = void 0;
+var react_1 = __importDefault(require("react"));
+var XInputDT_1 = require("./XInputDT");
+var XInputTextareaBase_1 = require("./XInputTextareaBase");
+var XInputTextareaDT = /** @class */ (function (_super) {
+    __extends(XInputTextareaDT, _super);
+    function XInputTextareaDT(props) {
+        var _this = _super.call(this, props) || this;
+        _this.onValueChange = _this.onValueChange.bind(_this);
+        return _this;
+    }
+    XInputTextareaDT.prototype.getValue = function () {
+        return this.getValueFromRowData();
+    };
+    XInputTextareaDT.prototype.onValueChange = function (value) {
+        this.onValueChangeBase(value, this.props.onChange);
+    };
+    // pouzivame cols = undefined, sirka je urcena sirkou stlpca (width: 100%)
+    XInputTextareaDT.prototype.render = function () {
+        return (react_1.default.createElement(XInputTextareaBase_1.XInputTextareaBase, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, style: { width: '100%' }, rows: this.props.rows, cols: undefined, autoResize: this.props.autoResize, error: this.getError() }));
+    };
+    return XInputTextareaDT;
+}(XInputDT_1.XInputDT));
+exports.XInputTextareaDT = XInputTextareaDT;

package/lib/components/XLazyDataTable.d.ts

@@ -53,6 +53,7 @@ export interface XLazyDataTableProps {
     customFilter?: XCustomFilter;
     sortField?: string;
     fullTextSearch: boolean | string[];
+    multiLineSwitch: boolean;
     searchBrowseParams?: XSearchBrowseParams;
     width?: string;
     dataLoadedState?: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
@@ -68,6 +69,7 @@ export declare const XLazyDataTable: {
         rows: number;
         filterDisplay: string;
         fullTextSearch: boolean;
+        multiLineSwitch: boolean;
         scrollable: boolean;
         scrollWidth: string;
         scrollHeight: string;

package/lib/components/XLazyDataTable.js

@@ -117,6 +117,7 @@ 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 XLazyDataTable = function (props) {
     var _a;
     // must be here, is used in createInitFilters()
@@ -226,13 +227,14 @@ 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)(props.sortField ? [{ field: props.sortField, order: 1 }] : []), 2), multiSortMeta = _h[0], setMultiSortMeta = _h[1];
-    var _j = __read((0, react_1.useState)(null), 2), selectedRow = _j[0], setSelectedRow = _j[1];
-    var _k = __read((_a = props.dataLoadedState) !== null && _a !== void 0 ? _a : (0, react_1.useState)(false), 2), dataLoaded = _k[0], setDataLoaded = _k[1]; // priznak kde si zapiseme, ci uz sme nacitali data
-    var _l = __read((0, react_1.useState)(false), 2), exportRowsDialogOpened = _l[0], setExportRowsDialogOpened = _l[1];
-    var _m = __read((0, react_1.useState)(), 2), exportRowsDialogRowCount = _m[0], setExportRowsDialogRowCount = _m[1]; // param pre dialog
-    var _o = __read((0, react_1.useState)(filtersInit), 2), filtersAfterFiltering = _o[0], setFiltersAfterFiltering = _o[1]; // sem si odkladame stav filtra po kliknuti na button Filter (chceme exportovat presne to co vidno vyfiltrovane)
-    var _p = __read((0, react_1.useState)(initFtsInputValue), 2), ftsInputValueAfterFiltering = _p[0], setFtsInputValueAfterFiltering = _p[1]; // tak isto ako filtersAfterFiltering
+    var _h = __read((0, react_1.useState)(true), 2), multiLineSwitchValue = _h[0], setMultiLineSwitchValue = _h[1];
+    var _j = __read((0, react_1.useState)(props.sortField ? [{ field: props.sortField, order: 1 }] : []), 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
+    var _m = __read((0, react_1.useState)(false), 2), exportRowsDialogOpened = _m[0], setExportRowsDialogOpened = _m[1];
+    var _o = __read((0, react_1.useState)(), 2), exportRowsDialogRowCount = _o[0], setExportRowsDialogRowCount = _o[1]; // param pre dialog
+    var _p = __read((0, react_1.useState)(filtersInit), 2), filtersAfterFiltering = _p[0], setFiltersAfterFiltering = _p[1]; // sem si odkladame stav filtra po kliknuti na button Filter (chceme exportovat presne to co vidno vyfiltrovane)
+    var _q = __read((0, react_1.useState)(initFtsInputValue), 2), ftsInputValueAfterFiltering = _q[0], setFtsInputValueAfterFiltering = _q[1]; // tak isto ako filtersAfterFiltering
     // parameter [] zabezpeci ze sa metoda zavola len po prvom renderingu (a nie po kazdej zmene stavu (zavolani setNieco()))
     (0, react_1.useEffect)(function () {
         // jednoduchy sposob - nepouzivame parameter props.displayed a priznak dataLoaded
@@ -612,6 +614,16 @@ var XLazyDataTable = function (props) {
             // 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);
+                    }
+                }
+            }
         }
         return valueResult;
     };
@@ -872,7 +884,8 @@ var XLazyDataTable = function (props) {
         react_1.default.createElement("div", { className: "flex justify-content-center align-items-center" },
             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 })),
+            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),
         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, 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" },
@@ -891,6 +904,7 @@ exports.XLazyDataTable.defaultProps = {
     rows: 10,
     filterDisplay: "row",
     fullTextSearch: true,
+    multiLineSwitch: false,
     scrollable: true,
     scrollWidth: 'viewport',
     scrollHeight: 'viewport',

package/lib/components/XUtilsMetadata.js

@@ -143,7 +143,7 @@ var XUtilsMetadata = /** @class */ (function () {
         }
         else {
             // form datatable (formColumnType is defined)
-            if (formColumnType === "inputSimple") {
+            if (formColumnType === "inputSimple" || formColumnType === "textarea") {
                 var padding = 0.21 + 0.07 + 0.5; // padding is 2.94px + 1px border + 7px padding in input
                 if (xField.type === "string") {
                     width = XUtilsMetadata.computeColumnWidthBase(xField.length, padding + padding); // padding left + right

package/lib/serverApi/XUtilsCommon.d.ts

@@ -2,14 +2,18 @@ export declare class XUtilsCommon {
     static newLine: string;
     static getValueByPath(object: any, path: string): any;
     static getValueOrValueListByPath(object: any, path: string): any | any[];
+    static setValueByPath(object: any, path: string, value: any): void;
     static getFieldListForPath(path: string): string[];
     static getFieldAndRestPath(path: string): [string, string | null];
     static getPathToAssoc(path: string): string;
+    static getPathToAssocAndField(path: string): [string | null, string];
     static isSingleField(path: string): boolean;
     static objectAsJSON(value: any): string;
     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;
     static sqlMaxDateIfNull(sqlExp: string): string;
+    static today(): Date;
+    static isInt(stringValue: string): boolean;
 }
 export declare const dateFormat: any;

package/lib/serverApi/XUtilsCommon.js

@@ -108,6 +108,20 @@ var XUtilsCommon = /** @class */ (function () {
             }
         }
     };
+    XUtilsCommon.setValueByPath = function (object, path, value) {
+        var _a = __read(XUtilsCommon.getPathToAssocAndField(path), 2), pathToAssoc = _a[0], field = _a[1];
+        if (pathToAssoc !== null) {
+            var assocObject = XUtilsCommon.getValueByPath(object, pathToAssoc);
+            // if null or undefined or is not object, then error
+            if (assocObject === null || assocObject === undefined || typeof assocObject !== 'object') {
+                console.log("XUtilsCommon.setValueByPath: could not set value ".concat(value, " into object property ").concat(path, ". Assoc object not found (found value: ").concat(assocObject, "). Main object:"));
+                console.log(object);
+                throw "setValueByPath: could not set value ".concat(value, " into object property ").concat(path, ". Assoc object not found. The main object can be seen in log.");
+            }
+            object = assocObject;
+        }
+        object[field] = value;
+    };
     XUtilsCommon.getFieldListForPath = function (path) {
         return path.split('.');
     };
@@ -131,6 +145,15 @@ var XUtilsCommon = /** @class */ (function () {
             return path.substring(0, posDot);
         }
     };
+    XUtilsCommon.getPathToAssocAndField = function (path) {
+        var posDot = path.lastIndexOf(".");
+        if (posDot === -1) {
+            return [null, path];
+        }
+        else {
+            return [path.substring(0, posDot), path.substring(posDot + 1)];
+        }
+    };
     XUtilsCommon.isSingleField = function (path) {
         return path.indexOf(".") === -1;
     };
@@ -176,6 +199,15 @@ var XUtilsCommon = /** @class */ (function () {
     XUtilsCommon.sqlMaxDateIfNull = function (sqlExp) {
         return "coalesce(".concat(sqlExp, ", '9999-12-31'::DATE)");
     };
+    XUtilsCommon.today = function () {
+        var today = new Date();
+        today.setHours(0, 0, 0, 0);
+        return today;
+    };
+    // vrati true ak sa string sklada iba z cislic, moze mat + alebo - na zaciatku
+    XUtilsCommon.isInt = function (stringValue) {
+        return /^[-+]?\d+$/.test(stringValue);
+    };
     XUtilsCommon.newLine = '\n';
     return XUtilsCommon;
 }());

package/lib/serverApi/XUtilsConversions.d.ts

@@ -3,10 +3,11 @@ import { XField } from "./XEntityMetadata";
 export declare function stringFromUI(stringValue: string): string | null;
 export declare function stringAsUI(value: string | null): string;
 export declare function stringAsDB(value: string | null): string;
-export declare function numberFromUI(stringValue: string): number | null;
+export declare function intFromUI(stringValue: string): number | null | undefined;
 export declare function numberAsUI(value: number | null, fractionDigits?: number): string;
 export declare function numberFromModel(value: any): number | null;
 export declare function dateFromModel(value: any): Date | null;
+export declare function dateFromUI(valueString: string): Date | null | undefined;
 export declare function dateAsUI(value: Date | null): string;
 export declare function datetimeAsUI(value: Date | null): string;
 export declare function timeFromModel(value: any): Date | null;

package/lib/serverApi/XUtilsConversions.js

@@ -27,7 +27,7 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertValue = exports.convertObject = exports.AsUIType = exports.booleanAsUIText = exports.intervalAsUI = exports.intervalFromUI = exports.datetimeFormatUI = exports.dateFormatCalendar = exports.dateFormatUI = exports.timeFromModel = exports.datetimeAsUI = exports.dateAsUI = exports.dateFromModel = exports.numberFromModel = exports.numberAsUI = exports.numberFromUI = exports.stringAsDB = exports.stringAsUI = exports.stringFromUI = void 0;
+exports.convertValue = exports.convertObject = exports.AsUIType = exports.booleanAsUIText = exports.intervalAsUI = exports.intervalFromUI = exports.datetimeFormatUI = exports.dateFormatCalendar = exports.dateFormatUI = exports.timeFromModel = exports.datetimeAsUI = exports.dateAsUI = exports.dateFromUI = exports.dateFromModel = exports.numberFromModel = exports.numberAsUI = exports.intFromUI = exports.stringAsDB = exports.stringAsUI = exports.stringFromUI = void 0;
 var XUtilsCommon_1 = require("./XUtilsCommon");
 var XLocale_1 = require("../components/XLocale");
 var XUtilsMetadataCommon_1 = require("./XUtilsMetadataCommon");
@@ -51,17 +51,25 @@ function stringAsDB(value) {
     return value !== null ? "'".concat(value.replaceAll("'", "''"), "'") : "NULL";
 }
 exports.stringAsDB = stringAsDB;
-function numberFromUI(stringValue) {
-    var value;
+function intFromUI(stringValue) {
+    // convert stringValue (e.g. 1234) into integer number
+    // if stringValue is invalid, returns undefined
+    var value = undefined;
     if (stringValue === '') {
         value = null;
     }
     else {
-        value = parseInt(stringValue, 10);
+        if (XUtilsCommon_1.XUtilsCommon.isInt(stringValue)) {
+            // 1234xxx vrati number 1234, preto sme spravili test isInt
+            value = parseInt(stringValue, 10);
+            if (isNaN(value)) {
+                value = undefined;
+            }
+        }
     }
     return value;
 }
-exports.numberFromUI = numberFromUI;
+exports.intFromUI = intFromUI;
 function numberAsUI(value, fractionDigits) {
     if (fractionDigits === undefined) {
         fractionDigits = 2; // default
@@ -100,6 +108,61 @@ function dateFromModel(value) {
     return dateValue;
 }
 exports.dateFromModel = dateFromModel;
+function dateFromUI(valueString) {
+    // converts valueString (e.g. 21.2.2024) into Date
+    // if stringValue is invalid, returns undefined
+    var valueDate = undefined;
+    if (valueString === '') {
+        valueDate = null;
+    }
+    else {
+        // null znamena nezadane (doplni sa podla aktualneho datumu), undefined znamena zadana nekorektna hodnota
+        var day = void 0;
+        var month = null;
+        var year = null;
+        var posDot = valueString.indexOf('.');
+        if (posDot === -1) {
+            day = intFromUI(valueString);
+        }
+        else {
+            day = intFromUI(valueString.substring(0, posDot));
+            var rest = valueString.substring(posDot + 1);
+            var posDot2 = rest.indexOf('.');
+            if (posDot2 === -1) {
+                month = intFromUI(rest);
+            }
+            else {
+                month = intFromUI(rest.substring(0, posDot2));
+                year = intFromUI(rest.substring(posDot2 + 1));
+            }
+        }
+        // doplnime mesiac a rok ak uzivatel nezadal (ak mame undefined, tak umyselne nedoplname)
+        if (month === null) {
+            month = XUtilsCommon_1.XUtilsCommon.today().getMonth() + 1; // o 1 mesiac viac (januar je 0)
+        }
+        if (year === null) {
+            year = XUtilsCommon_1.XUtilsCommon.today().getFullYear();
+        }
+        // ak day alebo month alebo year zostal undefined, tak user zadal nekorektnu hodnotu - vratime undefined
+        if (day && month && year) {
+            var monthStr = month.toString();
+            if (monthStr.length < 2) {
+                monthStr = "0" + monthStr;
+            }
+            var dayStr = day.toString();
+            if (dayStr.length < 2) {
+                dayStr = "0" + dayStr;
+            }
+            valueDate = new Date("".concat(year, "-").concat(monthStr, "-").concat(dayStr));
+            if (isNaN(valueDate)) {
+                // ak je nekorektny datum (napr. 2024-13-01)
+                valueDate = undefined;
+            }
+        }
+    }
+    return valueDate;
+}
+exports.dateFromUI = dateFromUI;
 function dateAsUI(value) {
     if (value !== null) {
         return (0, XUtilsCommon_1.dateFormat)(value, dateFormatUI());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michalrakus/x-react-web-lib",
-  "version": "1.16.0",
+  "version": "1.18.0",
   "description": "",
   "scripts": {
     "clean": "rimraf lib",
@@ -40,7 +40,7 @@
   "peerDependencies": {
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
-    "primereact": "~9.6.0",
+    "primereact": "~10.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-transition-group": "^4.4.5"