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

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/XAutoCompleteBase.js

@@ -404,8 +404,8 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         // Dialog pre konkretny form:
         // <DobrovolnikForm id={this.formDialogObjectId} object={this.formDialogInitValuesForInsert} onSaveOrCancel={this.formDialogOnSaveOrCancel}/>
         // formgroup-inline lepi SplitButton na autocomplete a zarovna jeho vysku
-        return (react_1.default.createElement("div", { className: "x-auto-complete-base" },
-            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), { style: { width: this.props.width } })),
+        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 ?
                 react_1.default.createElement(dialog_1.Dialog, { visible: this.state.formDialogOpened, onHide: this.formDialogOnHide, header: this.formDialogObjectId ? 'Modification' : 'New row' }, react_1.default.cloneElement(this.props.valueForm, {

package/lib/components/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/XCheckbox.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { XInput, XInputProps } from "./XInput";
+import { CheckboxChangeEvent } from "primereact/checkbox";
 export declare class XCheckbox extends XInput<boolean, XInputProps<boolean>> {
     constructor(props: XInputProps<boolean>);
     getValue(): boolean | null;
-    onValueChange(e: any): void;
+    checkboxOnValueChange(e: CheckboxChangeEvent): void;
+    triStateCheckboxOnValueChange(e: any): void;
     render(): JSX.Element;
 }

package/lib/components/XCheckbox.js

@@ -22,11 +22,13 @@ exports.XCheckbox = void 0;
 var react_1 = __importDefault(require("react"));
 var tristatecheckbox_1 = require("primereact/tristatecheckbox");
 var XInput_1 = require("./XInput");
+var checkbox_1 = require("primereact/checkbox");
 var XCheckbox = /** @class */ (function (_super) {
     __extends(XCheckbox, _super);
     function XCheckbox(props) {
         var _this = _super.call(this, props) || this;
-        _this.onValueChange = _this.onValueChange.bind(_this);
+        _this.checkboxOnValueChange = _this.checkboxOnValueChange.bind(_this);
+        _this.triStateCheckboxOnValueChange = _this.triStateCheckboxOnValueChange.bind(_this);
         return _this;
     }
     XCheckbox.prototype.getValue = function () {
@@ -34,7 +36,10 @@ var XCheckbox = /** @class */ (function (_super) {
         var value = this.getValueFromObject();
         return value;
     };
-    XCheckbox.prototype.onValueChange = function (e) {
+    XCheckbox.prototype.checkboxOnValueChange = function (e) {
+        this.onValueChangeBase(e.checked, this.props.onChange);
+    };
+    XCheckbox.prototype.triStateCheckboxOnValueChange = function (e) {
         var newValue = e.value;
         // pri klikani na TriStateCheckbox prichadza v newValue cyklicky: true -> false -> null
         // ak mame not null atribut, tak pri null hodnote skocime rovno na true
@@ -47,10 +52,19 @@ var XCheckbox = /** @class */ (function (_super) {
         this.onValueChangeBase(newValue, this.props.onChange);
     };
     XCheckbox.prototype.render = function () {
+        var _a;
         // 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(tristatecheckbox_1.TriStateCheckbox, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, disabled: this.isReadOnly(), style: this.props.inputStyle })));
+        // pre not null atributy pouzijeme standardny checkbox aby sme pre false mali prazdny biely checkbox - TODO - pomenit ikonky na TriStateCheckbox aby to pekne sedelo
+        var element = this.isNotNull()
+            ? react_1.default.createElement(checkbox_1.Checkbox, { id: this.props.field, checked: (_a = this.getValue()) !== null && _a !== void 0 ? _a : false, onChange: this.checkboxOnValueChange, disabled: this.isReadOnly(), style: this.props.inputStyle, tooltip: this.props.tooltip })
+            : react_1.default.createElement(tristatecheckbox_1.TriStateCheckbox, { id: this.props.field, value: this.getValue(), onChange: this.triStateCheckboxOnValueChange, disabled: this.isReadOnly(), style: this.props.inputStyle, tooltip: this.props.tooltip });
+        if (!this.props.onlyInput) {
+            var label = this.getLabel();
+            element = 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,
+                element);
+        }
+        return element;
     };
     return XCheckbox;
 }(XInput_1.XInput));

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/XFormComponent.d.ts

@@ -10,19 +10,22 @@ export type XFilterProp = XCustomFilter | ((object: any) => XCustomFilter | unde
 export interface XFormComponentProps<T> {
     form: XFormBase;
     label?: string;
+    tooltip?: string;
     readOnly?: XReadOnlyProp;
     labelStyle?: React.CSSProperties;
     inline?: boolean;
     onChange?: XFieldOnChange;
+    onlyInput?: boolean;
 }
 export declare abstract class XFormComponent<T, P extends XFormComponentProps<T>> extends Component<P> {
+    private valueChanged;
     protected constructor(props: P);
     abstract getField(): string;
     getValueFromObject(): any;
     onValueChangeBase(value: any, onChange?: XFieldOnChange, assocObjectChange?: OperationType): void;
     abstract isNotNull(): boolean;
     isReadOnly(): boolean;
-    getLabel(): string;
+    getLabel(): string | undefined;
     getLabelStyle(): React.CSSProperties;
     validate(): {
         field: string;

package/lib/components/XFormComponent.js

@@ -21,8 +21,10 @@ var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
 var XUtils_1 = require("./XUtils");
 var XFormComponent = /** @class */ (function (_super) {
     __extends(XFormComponent, _super);
+    // mali sme problem ze aplikacny onChange sa volal aj ked uzivatel iba klikol do inputu a odisiel z neho
     function XFormComponent(props) {
         var _this = _super.call(this, props) || this;
+        _this.valueChanged = false;
         props.form.addXFormComponent(_this);
         return _this;
     }
@@ -45,6 +47,7 @@ var XFormComponent = /** @class */ (function (_super) {
     XFormComponent.prototype.onValueChangeBase = function (value, onChange, assocObjectChange) {
         var error = this.validateOnChange(value);
         this.props.form.onFieldChange(this.getField(), value, error, onChange, assocObjectChange);
+        this.valueChanged = true;
     };
     XFormComponent.prototype.isReadOnly = function () {
         var readOnly;
@@ -76,12 +79,14 @@ var XFormComponent = /** @class */ (function (_super) {
         }
         return readOnly;
     };
+    // ak je label undefined, label element sa nevykresli
     XFormComponent.prototype.getLabel = function () {
-        var _a;
-        var label = (_a = this.props.label) !== null && _a !== void 0 ? _a : this.getField();
-        // test na readOnly je tu hlavne koli tomu aby sme nemali * pri ID atribute, ktory sa pri inserte generuje az pri zapise do DB
-        if (this.isNotNull() && !this.isReadOnly()) {
-            label = XUtils_1.XUtils.markNotNull(label);
+        var label = this.props.label;
+        if (label !== undefined) {
+            // test na readOnly je tu hlavne koli tomu aby sme nemali * pri ID atribute, ktory sa pri inserte generuje az pri zapise do DB
+            if (this.isNotNull() && !this.isReadOnly()) {
+                label = XUtils_1.XUtils.markNotNull(label);
+            }
         }
         return label;
     };
@@ -147,12 +152,13 @@ var XFormComponent = /** @class */ (function (_super) {
         return error ? XUtils_1.XUtils.getErrorMessage(error) : undefined;
     };
     XFormComponent.prototype.callOnChangeFromOnBlur = function () {
-        if (this.props.onChange) {
+        if (this.valueChanged && this.props.onChange) {
             var object = this.props.form.getXObject();
             // developer v onChange nastavi atributy na object-e
             this.props.onChange({ object: object });
             // rovno zavolame form.setState({...}), nech to nemusi robit developer
             this.props.form.setStateXForm();
+            this.valueChanged = false; // resetneme na false (dalsi onChange volame az ked user zmeni hodnotu)
         }
     };
     // len pre assoc fieldy sa pouziva

package/lib/components/XFormComponentDT.d.ts

@@ -12,6 +12,7 @@ export interface XFormComponentDTProps {
     onChange?: XTableFieldOnChange;
 }
 export declare abstract class XFormComponentDT<P extends XFormComponentDTProps> extends Component<P> {
+    private valueChanged;
     protected constructor(props: P);
     abstract getField(): string;
     getValueFromRowData(): any;

package/lib/components/XFormComponentDT.js

@@ -24,6 +24,7 @@ var XFormComponentDT = /** @class */ (function (_super) {
     __extends(XFormComponentDT, _super);
     function XFormComponentDT(props) {
         var _this = _super.call(this, props) || this;
+        _this.valueChanged = false;
         XFormBase_1.XFormBase.getXRowTechData(props.rowData).xFormComponentDTList.push(_this);
         return _this;
     }
@@ -46,6 +47,7 @@ var XFormComponentDT = /** @class */ (function (_super) {
     XFormComponentDT.prototype.onValueChangeBase = function (value, onChange, assocObjectChange) {
         var error = this.validateOnChange(value);
         this.props.form.onTableFieldChange(this.props.rowData, this.getField(), value, error, onChange, assocObjectChange);
+        this.valueChanged = true;
     };
     XFormComponentDT.prototype.isReadOnly = function () {
         var readOnly;
@@ -114,12 +116,13 @@ var XFormComponentDT = /** @class */ (function (_super) {
         return error ? XUtils_1.XUtils.getErrorMessage(error) : undefined;
     };
     XFormComponentDT.prototype.callOnChangeFromOnBlur = function () {
-        if (this.props.onChange) {
+        if (this.valueChanged && this.props.onChange) {
             var object = this.props.form.getXObject();
             // developer v onChange nastavi atributy na object-e
             this.props.onChange({ object: object, tableRow: this.props.rowData, assocObjectChange: undefined });
             // rovno zavolame form.setState({...}), nech to nemusi robit developer
             this.props.form.setStateXForm();
+            this.valueChanged = false; // resetneme na false (dalsi onChange volame az ked user zmeni hodnotu)
         }
     };
     // len pre assoc fieldy sa pouziva, aj to nie pre vsetky

package/lib/components/XFormDataTable2.d.ts

@@ -1,6 +1,7 @@
 import { XFormBase } from "./XFormBase";
-import { Component, ReactChild } from "react";
+import React, { Component, ReactChild } from "react";
 import { DataTableFilterMeta } from "primereact/datatable";
+import { ColumnBodyOptions } from "primereact/column";
 import { XEntity, XField } from "../serverApi/XEntityMetadata";
 import { XViewStatusOrBoolean } from "./XUtils";
 import { FilterMatchMode } from "primereact/api";
@@ -91,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";
+    type: "inputSimple" | "dropdown" | "autoComplete" | "searchButton" | "custom";
     header?: any;
     readOnly?: XTableFieldReadOnlyProp;
     dropdownInFilter?: boolean;
@@ -122,6 +123,10 @@ export interface XFormSearchButtonColumnProps extends XFormColumnBaseProps {
     displayField: string;
     searchBrowse: JSX.Element;
 }
+export interface XFormCustomColumnProps extends XFormColumnBaseProps {
+    body: React.ReactNode | ((data: any, options: ColumnBodyOptions) => React.ReactNode);
+    field?: string;
+}
 export declare const XFormColumn: {
     (props: XFormColumnProps): null;
     defaultProps: {
@@ -150,3 +155,10 @@ export declare const XFormSearchButtonColumn: {
         columnViewStatus: boolean;
     };
 };
+export declare const XFormCustomColumn: {
+    (props: XFormCustomColumnProps): null;
+    defaultProps: {
+        type: string;
+        columnViewStatus: boolean;
+    };
+};

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.XFormSearchButtonColumn = exports.XFormAutoCompleteColumn = exports.XFormDropdownColumn = exports.XFormColumn = exports.XFormDataTable2 = void 0;
+exports.XFormCustomColumn = 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");
@@ -118,8 +118,10 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             for (var _b = __values(props.children), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var child = _c.value;
                 var childColumn = child; // nevedel som to krajsie...
-                var field = props.assocField + '.' + _this.getPathForColumn(childColumn.props);
-                props.form.addField(field);
+                if (childColumn.props.type !== "custom") {
+                    var field = props.assocField + '.' + _this.getPathForColumn(childColumn.props);
+                    props.form.addField(field);
+                }
             }
         }
         catch (e_1_1) { e_1 = { error: e_1_1 }; }
@@ -231,24 +233,27 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             for (var _b = __values(this.props.children), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var child = _c.value;
                 var childColumn = child; // nevedel som to krajsie...
-                var field = this.getPathForColumn(childColumn.props);
-                var xField = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXFieldByPath(xEntity, field);
-                // TODO column.props.dropdownInFilter - pre "menu" by bolo fajn mat zoznam "enumov"
-                var filterMatchMode = this.getFilterMatchMode(xField);
-                var filterItem = void 0;
-                if (this.props.filterDisplay === "menu") {
-                    // DataTableOperatorFilterMetaData: operator + filter values
-                    filterItem = {
-                        operator: api_1.FilterOperator.OR,
-                        constraints: [{ value: null, matchMode: filterMatchMode }]
-                    };
-                }
-                else {
-                    // props.filterDisplay === "row"
-                    // DataTableFilterMetaData: filter value
-                    filterItem = { value: null, matchMode: filterMatchMode };
+                // zatial nepodporujeme filter pre custom stlpce
+                if (childColumn.props.type !== "custom") {
+                    var field = this.getPathForColumn(childColumn.props);
+                    var xField = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXFieldByPath(xEntity, field);
+                    // TODO column.props.dropdownInFilter - pre "menu" by bolo fajn mat zoznam "enumov"
+                    var filterMatchMode = this.getFilterMatchMode(xField);
+                    var filterItem = void 0;
+                    if (this.props.filterDisplay === "menu") {
+                        // DataTableOperatorFilterMetaData: operator + filter values
+                        filterItem = {
+                            operator: api_1.FilterOperator.OR,
+                            constraints: [{ value: null, matchMode: filterMatchMode }]
+                        };
+                    }
+                    else {
+                        // props.filterDisplay === "row"
+                        // DataTableFilterMetaData: filter value
+                        filterItem = { value: null, matchMode: filterMatchMode };
+                    }
+                    initFilters[field] = filterItem;
                 }
-                initFilters[field] = filterItem;
             }
         }
         catch (e_2_1) { e_2 = { error: e_2_1 }; }
@@ -562,72 +567,95 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             // (vzdy musime robit manipulacie so stlpcom, lebo potrebujeme pridat filter={true} sortable={true}
             var childColumn = child; // nevedel som to krajsie...
             var childColumnProps = childColumn.props;
-            // je dolezite, aby field obsahoval cely path az po zobrazovany atribut, lebo podla neho sa vykonava filtrovanie a sortovanie
-            // (aj ked, da sa to prebit na stlpcoch (na elemente Column), su na to atributy)
-            var field = thisLocal.getPathForColumn(childColumnProps);
-            // TODO - toto by sa mohlo vytiahnut vyssie, aj v bodyTemplate sa vola metoda XUtilsMetadata.getXFieldByPath
-            var xField = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXFieldByPath(xEntity, field);
-            // *********** header ***********
-            var header = XFormDataTable2.getHeader(childColumnProps, xEntity, field, xField);
-            // *********** filterElement ***********
+            var fieldParam;
+            var header;
             var filterElement;
-            if (thisLocal.props.filterDisplay !== "none") {
-                if (xField.type === "boolean") {
-                    var checkboxValue = thisLocal.getCheckboxFilterValue(field);
-                    filterElement = react_1.default.createElement(tristatecheckbox_1.TriStateCheckbox, { value: checkboxValue, onChange: function (e) { return thisLocal.onCheckboxFilterChange(field, e.value); } });
-                }
-                else if (childColumnProps.dropdownInFilter) {
-                    var dropdownValue = thisLocal.getDropdownFilterValue(field);
-                    filterElement = react_1.default.createElement(XDropdownDTFilter_1.XDropdownDTFilter, { entity: thisLocal.getEntity(), path: field, value: dropdownValue, onValueChange: thisLocal.onDropdownFilterChange });
-                }
+            var showFilterMenu;
+            var width;
+            var align;
+            var body;
+            if (childColumnProps.type === "custom") {
+                // len jednoduche hodnoty, zatial nebude takmer ziadna podpora
+                var columnPropsCustom = childColumnProps;
+                fieldParam = columnPropsCustom.field;
+                header = columnPropsCustom.header;
+                filterElement = undefined;
+                showFilterMenu = false;
+                width = XUtils_1.XUtils.processPropWidth(columnPropsCustom.width);
+                align = undefined;
+                body = columnPropsCustom.body;
             }
-            // *********** showFilterMenu ***********
-            var showFilterMenu = false;
-            if (thisLocal.props.filterDisplay !== "none") {
-                if (childColumnProps.showFilterMenu !== undefined) {
-                    showFilterMenu = childColumnProps.showFilterMenu;
+            else {
+                // fieldy ktore su v modeli (existuje xField)
+                // je dolezite, aby field obsahoval cely path az po zobrazovany atribut, lebo podla neho sa vykonava filtrovanie a sortovanie
+                // (aj ked, da sa to prebit na stlpcoch (na elemente Column), su na to atributy)
+                var field_1 = thisLocal.getPathForColumn(childColumnProps);
+                // TODO - toto by sa mohlo vytiahnut vyssie, aj v bodyTemplate sa vola metoda XUtilsMetadata.getXFieldByPath
+                var xField = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXFieldByPath(xEntity, field_1);
+                // *********** header ***********
+                header = XFormDataTable2.getHeader(childColumnProps, xEntity, field_1, xField);
+                // *********** filterElement ***********
+                if (thisLocal.props.filterDisplay !== "none") {
+                    if (xField.type === "boolean") {
+                        var checkboxValue = thisLocal.getCheckboxFilterValue(field_1);
+                        filterElement = react_1.default.createElement(tristatecheckbox_1.TriStateCheckbox, { value: checkboxValue, onChange: function (e) { return thisLocal.onCheckboxFilterChange(field_1, e.value); } });
+                    }
+                    else if (childColumnProps.dropdownInFilter) {
+                        var dropdownValue = thisLocal.getDropdownFilterValue(field_1);
+                        filterElement = react_1.default.createElement(XDropdownDTFilter_1.XDropdownDTFilter, { entity: thisLocal.getEntity(), path: field_1, value: dropdownValue, onValueChange: thisLocal.onDropdownFilterChange });
+                    }
                 }
-                else {
-                    showFilterMenu = true; // default
-                    if (thisLocal.props.filterDisplay === "row") {
-                        if (xField.type === "boolean" || childColumnProps.dropdownInFilter) {
-                            showFilterMenu = false;
+                // *********** showFilterMenu ***********
+                showFilterMenu = false;
+                if (thisLocal.props.filterDisplay !== "none") {
+                    if (childColumnProps.showFilterMenu !== undefined) {
+                        showFilterMenu = childColumnProps.showFilterMenu;
+                    }
+                    else {
+                        showFilterMenu = true; // default
+                        if (thisLocal.props.filterDisplay === "row") {
+                            if (xField.type === "boolean" || childColumnProps.dropdownInFilter) {
+                                showFilterMenu = false;
+                            }
                         }
                     }
                 }
+                // *********** width/headerStyle ***********
+                width = XUtils_1.XUtils.processPropWidth(childColumn.props.width);
+                if (width === undefined || width === "default") {
+                    var filterMenuInFilterRow = thisLocal.props.filterDisplay === "row" && showFilterMenu;
+                    var sortableButtonInHeader = thisLocal.props.sortable;
+                    var filterButtonInHeader = thisLocal.props.filterDisplay === "menu";
+                    width = XUtilsMetadata_1.XUtilsMetadata.computeColumnWidth(xField, undefined, filterMenuInFilterRow, childColumnProps.type, header, sortableButtonInHeader, filterButtonInHeader);
+                }
+                // *********** align ***********
+                align = undefined; // default undefined (left)
+                // do buducna
+                // if (childColumnProps.align !== undefined) {
+                //     align = childColumnProps.align;
+                // }
+                // else {
+                // decimal defaultne zarovnavame doprava
+                // if (xField.type === "decimal") {
+                //     align = "right";
+                // }
+                // else
+                if (xField.type === "boolean") {
+                    align = "center";
+                }
+                // }
+                // *********** body ***********
+                body = function (rowData) { return thisLocal.bodyTemplate(childColumnProps, readOnly, rowData, xEntity); };
+                fieldParam = field_1;
             }
             // *********** showClearButton ***********
             // pre filterDisplay = "row" nechceme clear button, chceme setrit miesto
             var showClearButton = thisLocal.props.filterDisplay === "menu";
-            // *********** width/headerStyle ***********
-            var width = XUtils_1.XUtils.processPropWidth(childColumn.props.width);
-            if (width === undefined || width === "default") {
-                var filterMenuInFilterRow = thisLocal.props.filterDisplay === "row" && showFilterMenu;
-                var sortableButtonInHeader = thisLocal.props.sortable;
-                var filterButtonInHeader = thisLocal.props.filterDisplay === "menu";
-                width = XUtilsMetadata_1.XUtilsMetadata.computeColumnWidth(xField, undefined, filterMenuInFilterRow, childColumnProps.type, header, sortableButtonInHeader, filterButtonInHeader);
-            }
             var headerStyle = {};
             if (width !== undefined) {
                 headerStyle = { width: width };
             }
-            // *********** align ***********
-            var align = undefined; // default undefined (left)
-            // do buducna
-            // if (childColumnProps.align !== undefined) {
-            //     align = childColumnProps.align;
-            // }
-            // else {
-            // decimal defaultne zarovnavame doprava
-            // if (xField.type === "decimal") {
-            //     align = "right";
-            // }
-            // else
-            if (xField.type === "boolean") {
-                align = "center";
-            }
-            // }
-            return react_1.default.createElement(column_1.Column, { field: field, header: header, filter: thisLocal.props.filterDisplay !== "none", sortable: thisLocal.props.sortable, filterElement: filterElement, showFilterMenu: showFilterMenu, showClearButton: showClearButton, headerStyle: headerStyle, align: align, body: function (rowData) { return thisLocal.bodyTemplate(childColumnProps, readOnly, rowData, xEntity); } });
+            return react_1.default.createElement(column_1.Column, { field: fieldParam, header: header, filter: thisLocal.props.filterDisplay !== "none", sortable: thisLocal.props.sortable, filterElement: filterElement, showFilterMenu: showFilterMenu, showClearButton: showClearButton, headerStyle: headerStyle, align: align, body: body });
         });
         if (this.props.showAddRemoveButtons && this.props.removeButtonInRow) {
             // je dolezite nastavit sirku header-a, lebo inac ma stlpec sirku 0 a nevidno ho
@@ -695,3 +723,9 @@ var XFormSearchButtonColumn = function (props) {
 };
 exports.XFormSearchButtonColumn = XFormSearchButtonColumn;
 exports.XFormSearchButtonColumn.defaultProps = __assign(__assign({}, XFormColumnBase_defaultProps), { type: "searchButton" });
+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);
+};
+exports.XFormCustomColumn = XFormCustomColumn;
+exports.XFormCustomColumn.defaultProps = __assign(__assign({}, XFormColumnBase_defaultProps), { type: "custom" });

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/XInputDecimal.js

@@ -69,8 +69,9 @@ var XInputDecimal = /** @class */ (function (_super) {
         var _b = XUtilsMetadata_1.XUtilsMetadata.getParamsForInputNumber(this.xField), useGrouping = _b.useGrouping, fractionDigits = _b.fractionDigits, min = _b.min, max = _b.max, size = _b.size;
         var sizeInput = (_a = this.props.size) !== null && _a !== void 0 ? _a : size;
         // note: style overrides size (width of the input according to character count)
+        var label = this.getLabel();
         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()),
+            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 }))));
     };
     return XInputDecimal;

package/lib/components/XInputDecimalBase.d.ts

@@ -9,4 +9,5 @@ export declare const XInputDecimalBase: (props: {
     min?: number | undefined;
     max?: number | undefined;
     size?: number | undefined;
+    className?: string | undefined;
 }) => JSX.Element;

package/lib/components/XInputDecimalBase.js

@@ -13,6 +13,6 @@ var XInputDecimalBase = function (props) {
         props.onChange(e.value);
     };
     // null konvertujeme na undefined (zevraj InputNumber nechce null)
-    return (react_1.default.createElement(inputnumber_1.InputNumber, { id: props.id, value: props.value !== null ? props.value : undefined, onChange: onChange, readOnly: props.readOnly, mode: "decimal", locale: "de-DE", useGrouping: props.useGrouping, minFractionDigits: props.fractionDigits, maxFractionDigits: props.fractionDigits, min: props.min, max: props.max, size: props.size }));
+    return (react_1.default.createElement(inputnumber_1.InputNumber, { id: props.id, value: props.value !== null ? props.value : undefined, onChange: onChange, readOnly: props.readOnly, mode: "decimal", locale: "de-DE", useGrouping: props.useGrouping, minFractionDigits: props.fractionDigits, maxFractionDigits: props.fractionDigits, min: props.min, max: props.max, size: props.size, className: props.className }));
 };
 exports.XInputDecimalBase = XInputDecimalBase;

package/lib/components/XInputText.js

@@ -60,8 +60,9 @@ var XInputText = /** @class */ (function (_super) {
         var _a;
         var size = (_a = this.props.size) !== null && _a !== void 0 ? _a : this.xField.length;
         // note: style overrides size (width of the input according to character count)
+        var label = this.getLabel();
         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()),
+            label !== undefined ? react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, label) : null,
             react_1.default.createElement(inputtext_1.InputText, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, size: size, style: this.props.inputStyle }, this.getClassNameTooltip(), { onBlur: this.onBlur }))));
     };
     return XInputText;

package/lib/components/XLazyDataTable.js

@@ -634,7 +634,7 @@ var XLazyDataTable = function (props) {
         if (props.scrollWidth !== "none") {
             scrollWidth = props.scrollWidth;
             if (scrollWidth === "viewport") {
-                scrollWidth = 'calc(100vw - 1.4rem)'; // 20px okraje
+                scrollWidth = 'calc(100vw - 2.2rem)'; // povodne bolo 1.4rem (20px okraje) ale pri vela stlpcoch vznikal horizontalny scrollbar
             }
         }
         if (props.scrollHeight !== "none") {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michalrakus/x-react-web-lib",
-  "version": "1.14.0",
+  "version": "1.16.0",
   "description": "",
   "scripts": {
     "clean": "rimraf lib",