@michalrakus/x-react-web-lib 1.15.0 → 1.17.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/XAutoComplete.d.ts

@@ -12,6 +12,7 @@ export interface XAutoCompleteProps extends XFormComponentProps<XObject> {
     assocForm?: JSX.Element;
     filter?: XFilterProp;
     sortField?: string | DataTableSortMeta[];
+    fields?: string[];
     suggestions?: any[];
     lazy?: boolean;
     width?: string;

package/lib/components/XAutoComplete.js

@@ -89,7 +89,7 @@ var XAutoComplete = /** @class */ (function (_super) {
                 switch (_b.label) {
                     case 0:
                         if (!(this.props.suggestions === undefined)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, XUtils_1.XUtils.fetchRows(this.xAssoc.entityName, this.getFilterBase(this.props.filter), (_a = this.props.sortField) !== null && _a !== void 0 ? _a : this.props.displayField)];
+                        return [4 /*yield*/, XUtils_1.XUtils.fetchRows(this.xAssoc.entityName, this.getFilterBase(this.props.filter), (_a = this.props.sortField) !== null && _a !== void 0 ? _a : this.props.displayField, this.props.fields)];
                     case 1:
                         suggestions = _b.sent();
                         this.setState({ suggestions: suggestions }, setStateCallback);

package/lib/components/XCalendar.d.ts

@@ -5,5 +5,6 @@ export declare const XCalendar: (props: {
     onChange: (value: Date | null) => void;
     onBlur?: ((event: React.FocusEvent<HTMLInputElement, Element>) => void) | undefined;
     readOnly?: boolean | undefined;
+    error?: string | undefined;
     datetime?: boolean | undefined;
 }) => JSX.Element;

package/lib/components/XCalendar.js

@@ -1,4 +1,15 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -7,6 +18,7 @@ exports.XCalendar = void 0;
 var react_1 = __importDefault(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
 var XCalendar = function (props) {
     var _a;
@@ -22,6 +34,6 @@ var XCalendar = function (props) {
         }
     };
     var datetime = (_a = props.datetime) !== null && _a !== void 0 ? _a : false;
-    return (react_1.default.createElement(calendar_1.Calendar, { 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 }));
+    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))));
 };
 exports.XCalendar = XCalendar;

package/lib/components/XEnvVars.d.ts

@@ -1,6 +1,7 @@
 export declare enum XEnvVar {
     REACT_APP_BACKEND_URL = "REACT_APP_BACKEND_URL",
     REACT_APP_AUTH = "REACT_APP_AUTH",
+    REACT_APP_AUTH_OFF_USERNAME = "REACT_APP_AUTH_OFF_USERNAME",
     REACT_APP_AUTH0_DOMAIN = "REACT_APP_AUTH0_DOMAIN",
     REACT_APP_AUTH0_CLIENT_ID = "REACT_APP_AUTH0_CLIENT_ID",
     REACT_APP_AUTH0_AUDIENCE = "REACT_APP_AUTH0_AUDIENCE",
@@ -9,6 +10,7 @@ export declare enum XEnvVar {
     REACT_APP_MS_ENTRA_ID_BACKEND_SCOPE = "REACT_APP_MS_ENTRA_ID_BACKEND_SCOPE"
 }
 export declare enum XReactAppAuth {
+    OFF = "OFF",
     LOCAL = "LOCAL",
     AUTH0 = "AUTH0",
     MS_ENTRA_ID = "MS_ENTRA_ID"

package/lib/components/XEnvVars.js

@@ -6,6 +6,7 @@ var XEnvVar;
 (function (XEnvVar) {
     XEnvVar["REACT_APP_BACKEND_URL"] = "REACT_APP_BACKEND_URL";
     XEnvVar["REACT_APP_AUTH"] = "REACT_APP_AUTH";
+    XEnvVar["REACT_APP_AUTH_OFF_USERNAME"] = "REACT_APP_AUTH_OFF_USERNAME";
     XEnvVar["REACT_APP_AUTH0_DOMAIN"] = "REACT_APP_AUTH0_DOMAIN";
     XEnvVar["REACT_APP_AUTH0_CLIENT_ID"] = "REACT_APP_AUTH0_CLIENT_ID";
     XEnvVar["REACT_APP_AUTH0_AUDIENCE"] = "REACT_APP_AUTH0_AUDIENCE";
@@ -17,6 +18,7 @@ var XEnvVar;
 // enum for values of the environment variable REACT_APP_AUTH
 var XReactAppAuth;
 (function (XReactAppAuth) {
+    XReactAppAuth["OFF"] = "OFF";
     XReactAppAuth["LOCAL"] = "LOCAL";
     XReactAppAuth["AUTH0"] = "AUTH0";
     XReactAppAuth["MS_ENTRA_ID"] = "MS_ENTRA_ID";

package/lib/components/XFormBase.d.ts

@@ -55,15 +55,15 @@ export declare abstract class XFormBase extends Component<XFormProps> {
     formReadOnlyBase(field: string): boolean;
     onClickSave(): Promise<void>;
     onClickCancel(): void;
-    validateSave(): boolean;
-    validateForm(): XErrorMap;
+    validateSave(): Promise<boolean>;
+    validateForm(): Promise<XErrorMap>;
     fieldValidation(): XErrorMap;
     getErrorMessagesForAssoc(oneToManyAssoc: string): string;
     static saveErrorsIntoXRowTechData(row: any, xErrors: XErrors): void;
     formReadOnly(object: XObject, field: string): boolean;
     createNewObject(): XObject;
     preInitForm(object: XObject, operationType: OperationType.Insert | OperationType.Update): void;
-    validate(object: XObject): XErrors;
+    validate(object: XObject): Promise<XErrors>;
     preSave(object: XObject): void;
     saveRow(): Promise<any>;
 }

package/lib/components/XFormBase.js

@@ -383,9 +383,9 @@ var XFormBase = /** @class */ (function (_super) {
             var isAddRow, object, e_4;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0:
-                        //console.log("zavolany onClickSave");
-                        if (!this.validateSave()) {
+                    case 0: return [4 /*yield*/, this.validateSave()];
+                    case 1:
+                        if (!(_a.sent())) {
                             return [2 /*return*/];
                         }
                         // docasne na testovanie
@@ -402,18 +402,18 @@ var XFormBase = /** @class */ (function (_super) {
                         // }
                         this.preSave(this.state.object);
                         isAddRow = this.isAddRow();
-                        _a.label = 1;
-                    case 1:
-                        _a.trys.push([1, 3, , 4]);
-                        return [4 /*yield*/, this.saveRow()];
+                        _a.label = 2;
                     case 2:
-                        object = _a.sent();
-                        return [3 /*break*/, 4];
+                        _a.trys.push([2, 4, , 5]);
+                        return [4 /*yield*/, this.saveRow()];
                     case 3:
+                        object = _a.sent();
+                        return [3 /*break*/, 5];
+                    case 4:
                         e_4 = _a.sent();
                         XUtils_1.XUtils.showErrorMessage("Save row failed.", e_4);
                         return [2 /*return*/]; // zostavame vo formulari
-                    case 4:
+                    case 5:
                         if (this.props.onSaveOrCancel !== undefined) {
                             // formular je zobrazeny v dialogu
                             this.props.onSaveOrCancel(object, isAddRow ? XUtils_1.OperationType.Insert : XUtils_1.OperationType.Update);
@@ -438,74 +438,90 @@ var XFormBase = /** @class */ (function (_super) {
         }
     };
     XFormBase.prototype.validateSave = function () {
-        var e_5, _a, e_6, _b;
-        var xErrorMap = this.validateForm();
-        // zatial takto jednoducho
-        var msg = XUtils_1.XUtils.getErrorMessages(xErrorMap);
-        try {
-            // este spracujeme editovatelne tabulky
-            for (var _c = __values(this.xFormDataTableList), _d = _c.next(); !_d.done; _d = _c.next()) {
-                var xFormDataTable = _d.value;
-                //msg += xFormDataTable.getErrorMessages();
-                msg += this.getErrorMessagesForAssoc(xFormDataTable.props.assocField);
-            }
-        }
-        catch (e_5_1) { e_5 = { error: e_5_1 }; }
-        finally {
-            try {
-                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
-            }
-            finally { if (e_5) throw e_5.error; }
-        }
-        try {
-            // este spracujeme oneToMany asociacie, ktore boli explicitne uvedene, ze ich treba validovat
-            // (validaciu treba nakodit vo formulari, zavolat z metody validate() a ukoncit zavolanim XFormBase.saveErrorsIntoXRowTechData)
-            for (var _e = __values(this.assocToValidateList), _f = _e.next(); !_f.done; _f = _e.next()) {
-                var assocToValidate = _f.value;
-                msg += this.getErrorMessagesForAssoc(assocToValidate);
-            }
-        }
-        catch (e_6_1) { e_6 = { error: e_6_1 }; }
-        finally {
-            try {
-                if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
-            }
-            finally { if (e_6) throw e_6.error; }
-        }
-        var ok = true;
-        if (msg !== "") {
-            alert(msg);
-            ok = false;
-        }
-        return ok;
+        return __awaiter(this, void 0, void 0, function () {
+            var xErrorMap, msg, _a, _b, xFormDataTable, _c, _d, assocToValidate, ok;
+            var e_5, _e, e_6, _f;
+            return __generator(this, function (_g) {
+                switch (_g.label) {
+                    case 0: return [4 /*yield*/, this.validateForm()];
+                    case 1:
+                        xErrorMap = _g.sent();
+                        msg = XUtils_1.XUtils.getErrorMessages(xErrorMap);
+                        try {
+                            // este spracujeme editovatelne tabulky
+                            for (_a = __values(this.xFormDataTableList), _b = _a.next(); !_b.done; _b = _a.next()) {
+                                xFormDataTable = _b.value;
+                                //msg += xFormDataTable.getErrorMessages();
+                                msg += this.getErrorMessagesForAssoc(xFormDataTable.props.assocField);
+                            }
+                        }
+                        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                        finally {
+                            try {
+                                if (_b && !_b.done && (_e = _a.return)) _e.call(_a);
+                            }
+                            finally { if (e_5) throw e_5.error; }
+                        }
+                        try {
+                            // este spracujeme oneToMany asociacie, ktore boli explicitne uvedene, ze ich treba validovat
+                            // (validaciu treba nakodit vo formulari, zavolat z metody validate() a ukoncit zavolanim XFormBase.saveErrorsIntoXRowTechData)
+                            for (_c = __values(this.assocToValidateList), _d = _c.next(); !_d.done; _d = _c.next()) {
+                                assocToValidate = _d.value;
+                                msg += this.getErrorMessagesForAssoc(assocToValidate);
+                            }
+                        }
+                        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+                        finally {
+                            try {
+                                if (_d && !_d.done && (_f = _c.return)) _f.call(_c);
+                            }
+                            finally { if (e_6) throw e_6.error; }
+                        }
+                        ok = true;
+                        if (msg !== "") {
+                            alert(msg);
+                            ok = false;
+                        }
+                        return [2 /*return*/, ok];
+                }
+            });
+        });
     };
     XFormBase.prototype.validateForm = function () {
-        var e_7, _a;
-        var xErrorMap = this.fieldValidation();
-        // form validation
-        var xErrors = this.validate(this.getXObject());
-        try {
-            for (var _b = __values(Object.entries(xErrors)), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var _d = __read(_c.value, 2), field = _d[0], error = _d[1];
-                if (error) {
-                    // skusime zistit label
-                    var xFormComponent = this.findXFormComponent(field);
-                    var fieldLabel = xFormComponent ? xFormComponent.getLabel() : undefined;
-                    xErrorMap[field] = __assign(__assign({}, xErrorMap[field]), { form: error, fieldLabel: fieldLabel });
+        return __awaiter(this, void 0, void 0, function () {
+            var xErrorMap, xErrors, _a, _b, _c, field, error, xFormComponent, fieldLabel;
+            var e_7, _d;
+            return __generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0:
+                        xErrorMap = this.fieldValidation();
+                        return [4 /*yield*/, this.validate(this.getXObject())];
+                    case 1:
+                        xErrors = _e.sent();
+                        try {
+                            for (_a = __values(Object.entries(xErrors)), _b = _a.next(); !_b.done; _b = _a.next()) {
+                                _c = __read(_b.value, 2), field = _c[0], error = _c[1];
+                                if (error) {
+                                    xFormComponent = this.findXFormComponent(field);
+                                    fieldLabel = xFormComponent ? xFormComponent.getLabel() : undefined;
+                                    xErrorMap[field] = __assign(__assign({}, xErrorMap[field]), { form: error, fieldLabel: fieldLabel });
+                                }
+                            }
+                        }
+                        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+                        finally {
+                            try {
+                                if (_b && !_b.done && (_d = _a.return)) _d.call(_a);
+                            }
+                            finally { if (e_7) throw e_7.error; }
+                        }
+                        // TODO - optimalizacia - netreba setovat stav ak by sme sli prec z formulara (ak by zbehla validacia aj save a isli by sme naspet do browsu)
+                        // setujeme aj this.state.object, lebo mohli pribudnut/odbudnut chyby na rowData v editovatelnych tabulkach
+                        this.setState({ object: this.state.object, errorMap: xErrorMap });
+                        return [2 /*return*/, xErrorMap];
                 }
-            }
-        }
-        catch (e_7_1) { e_7 = { error: e_7_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_7) throw e_7.error; }
-        }
-        // TODO - optimalizacia - netreba setovat stav ak by sme sli prec z formulara (ak by zbehla validacia aj save a isli by sme naspet do browsu)
-        // setujeme aj this.state.object, lebo mohli pribudnut/odbudnut chyby na rowData v editovatelnych tabulkach
-        this.setState({ object: this.state.object, errorMap: xErrorMap });
-        return xErrorMap;
+            });
+        });
     };
     XFormBase.prototype.fieldValidation = function () {
         var e_8, _a, e_9, _b;
@@ -603,7 +619,11 @@ var XFormBase = /** @class */ (function (_super) {
     };
     // this method can be overriden in subclass if needed (custom validation)
     XFormBase.prototype.validate = function (object) {
-        return {};
+        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 object before save)
     XFormBase.prototype.preSave = function (object) {

package/lib/components/XFormRowCol/XFormRowCol.js

@@ -11,15 +11,17 @@ var XFormRowCol = function (props) {
         // ak chceme zmenit child element, tak treba bud vytvorit novy alebo vyklonovat
         // priklad je na https://soshace.com/building-react-components-using-children-props-and-context-api/
         childElemList = react_1.default.Children.map(props.children, function (child) {
+            // chceli by sme klonovat len nase X* komponenty (napr. XInputText)
+            // ak vyklonujeme cudziu komponentu (napr. div), funguje, ale prida do nej property labelstyle=[object Object]
+            // child.type.name vracia nazov komponenty (napr. XInputText) ale ked sa vytvori optimalizovany build, uz to nefunguje (uz je tam napr. "t")
+            // takze zatial klonujeme vzdy
             var _a, _b;
-            // klonujeme len nase X* komponenty (napr. XInputText), child.type.name vracia nazov komponenty (napr. XInputText)
-            // ak vyklonujeme cudziu komponentu, funguje, ale prida do nej property labelstyle=[object Object]
-            if (child.type.name && child.type.name.startsWith("X")) {
-                return react_1.default.cloneElement(child, { form: (_a = child.props.form) !== null && _a !== void 0 ? _a : props.form, labelStyle: (_b = child.props.labelStyle) !== null && _b !== void 0 ? _b : props.labelStyle });
-            }
-            else {
-                return child;
-            }
+            //if (child.type.name && child.type.name.startsWith("X")) {
+            return react_1.default.cloneElement(child, { form: (_a = child.props.form) !== null && _a !== void 0 ? _a : props.form, labelStyle: (_b = child.props.labelStyle) !== null && _b !== void 0 ? _b : props.labelStyle });
+            //}
+            //else {
+            //    return child;
+            //}
         });
     }
     else {

package/lib/components/XInputDate.js

@@ -56,7 +56,7 @@ var XInputDate = /** @class */ (function (_super) {
         // note: style overrides size (width of the input according to character count)
         return (react_1.default.createElement("div", { className: "field grid" },
             react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
-            react_1.default.createElement(XCalendar_1.XCalendar, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), 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', onBlur: this.onBlur })));
     };
     return XInputDate;
 }(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,12 +31,9 @@ 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);
+    XInputTextarea.prototype.onValueChange = function (value) {
         this.onValueChangeBase(value);
     };
     XInputTextarea.prototype.getLabelStyle = function () {
@@ -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/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

@@ -126,7 +126,7 @@ var XUtilsMetadata = /** @class */ (function () {
                 width = XUtilsMetadata.computeColumnWidthBase(size, 0.5 + 0.5);
             }
             else if (xField.type === "date") {
-                width = XUtilsMetadata.computeColumnWidthBase(10, 0.25 + 1.25 + 0.25); // napr. 31.12.2021, 1.25 rem date picker button
+                width = XUtilsMetadata.computeColumnWidthBase(11, 0.25 + 1.25 + 0.25); // napr. 31.12.2021 (poznamka: dal som 11 lebo vo filtri nebolo vidno cely datum), 1.25 rem date picker button
             }
             else if (xField.type === "datetime") {
                 width = XUtilsMetadata.computeColumnWidthBase(10 + 9, 0.25 + 1.25 + 0.25); // napr. 31.12.2021 03:03:00

package/lib/serverApi/XUtilsCommon.d.ts

@@ -10,5 +10,6 @@ export declare class XUtilsCommon {
     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;
 }
 export declare const dateFormat: any;

package/lib/serverApi/XUtilsCommon.js

@@ -172,6 +172,10 @@ var XUtilsCommon = /** @class */ (function () {
         var match = pattern.exec(value);
         return match != null ? match[0] : null;
     };
+    // to be used in sql expressions
+    XUtilsCommon.sqlMaxDateIfNull = function (sqlExp) {
+        return "coalesce(".concat(sqlExp, ", '9999-12-31'::DATE)");
+    };
     XUtilsCommon.newLine = '\n';
     return XUtilsCommon;
 }());

package/lib/serverApi/XUtilsConversions.d.ts

@@ -3,7 +3,7 @@ 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;

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.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,22 @@ function stringAsDB(value) {
     return value !== null ? "'".concat(value.replaceAll("'", "''"), "'") : "NULL";
 }
 exports.stringAsDB = stringAsDB;
-function numberFromUI(stringValue) {
+function intFromUI(stringValue) {
+    // convert stringValue (e.g. 1234) into integer number
+    // if stringValue is invalid, returns undefined
     var value;
     if (stringValue === '') {
         value = null;
     }
     else {
-        value = parseInt(stringValue, 10);
+        value = parseInt(stringValue, 10); // 1234xxx vrati number 1234, preto testujeme aj value.toString() !== stringValue
+        if (isNaN(value) || value.toString() !== stringValue) {
+            value = undefined;
+        }
     }
     return value;
 }
-exports.numberFromUI = numberFromUI;
+exports.intFromUI = intFromUI;
 function numberAsUI(value, fractionDigits) {
     if (fractionDigits === undefined) {
         fractionDigits = 2; // default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michalrakus/x-react-web-lib",
-  "version": "1.15.0",
+  "version": "1.17.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"