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

package/XEditor.d.ts

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

package/XEditor.js

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

package/XEditorBase.d.ts

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

package/XEditorBase.js

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

package/XExportRowsDialog.d.ts

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

package/XExportRowsDialog.js

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

package/XHtmlRenderer.d.ts

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

package/XHtmlRenderer.js

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

package/XLazyDataTable.d.ts

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

package/XLazyDataTable.js

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

package/XMultilineRenderer.d.ts

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

package/XMultilineRenderer.js

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

package/XParamBrowse.d.ts

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

package/XParamBrowse.js

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

package/XParamForm.d.ts

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

package/XParamForm.js

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

package/gulpfile.js

@@ -13,16 +13,23 @@ function generateApi(cb) {
     const fs = require('fs');
 
     const apiFileList = [
-        "./lib/administration/XUserBrowse",
-        "./lib/administration/XUserForm",
         "./lib/administration/XBrowseMetaBrowse",
         "./lib/administration/XBrowseMetaForm",
+        "./lib/administration/XParamBrowse",
+        "./lib/administration/XParamForm",
+        "./lib/administration/XUserBrowse",
+        "./lib/administration/XUserForm",
 
         "./lib/components/XFormRowCol/XFormCol",
         "./lib/components/XFormRowCol/XFormInlineRow",
         "./lib/components/XFormRowCol/XFormRow",
         "./lib/components/XFormRowCol/XFormRowCol",
 
+        "./lib/components/XLazyDataTable/XExportRowsDialog",
+        "./lib/components/XLazyDataTable/XHtmlRenderer",
+        "./lib/components/XLazyDataTable/XLazyDataTable",
+        "./lib/components/XLazyDataTable/XMultilineRenderer",
+
         "./lib/components/useXToken",
         "./lib/components/XAutoComplete",
         "./lib/components/XAutoCompleteBase",
@@ -36,9 +43,10 @@ function generateApi(cb) {
         "./lib/components/XDropdown",
         "./lib/components/XDropdownForEntity",
         "./lib/components/XEditBrowse",
+        "./lib/components/XEditor",
+        "./lib/components/XEditorBase",
         "./lib/components/XEnvVars",
         "./lib/components/XErrors",
-        "./lib/components/XExportRowsDialog",
         "./lib/components/XFieldChangeEvent",
         "./lib/components/XFormBase",
         "./lib/components/XFormBaseModif",
@@ -56,7 +64,6 @@ function generateApi(cb) {
         "./lib/components/XInputText",
         "./lib/components/XInputTextarea",
         "./lib/components/XInputTextareaBase",
-        "./lib/components/XLazyDataTable",
         "./lib/components/XLocale",
         "./lib/components/XLoginDialog",
         "./lib/components/XLoginForm",

package/lib/administration/XBrowseMetaBrowse.d.ts

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

package/lib/administration/XBrowseMetaBrowse.js

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

package/lib/administration/XParamBrowse.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { XBrowseProps } from "../components/XLazyDataTable/XLazyDataTable";
+import { XCustomFilter } from "../serverApi/FindParam";
+export declare const XParamBrowse: (props: XBrowseProps & {
+    customFilter?: XCustomFilter;
+}) => JSX.Element;

package/lib/administration/XParamBrowse.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XParamBrowse = void 0;
+var react_1 = __importDefault(require("react"));
+var XLazyDataTable_1 = require("../components/XLazyDataTable/XLazyDataTable");
+var XParamForm_1 = require("./XParamForm");
+var XParamBrowse = function (props) {
+    var onAddRow = function () {
+        // openForm pridavame automaticky v XFormNavigator3 pri renderovani komponentu
+        props.openForm(react_1.default.createElement(XParamForm_1.XParamForm, null));
+    };
+    var onEdit = function (selectedRow) {
+        // openForm pridavame automaticky v XFormNavigator3 pri renderovani komponentu
+        props.openForm(react_1.default.createElement(XParamForm_1.XParamForm, { id: selectedRow.id }));
+    };
+    return (react_1.default.createElement(XLazyDataTable_1.XLazyDataTable, { entity: "XParam", sortField: "id", rows: 30, customFilter: props.customFilter, onAddRow: onAddRow, onEdit: onEdit, removeRow: true, displayed: props.displayed },
+        react_1.default.createElement(XLazyDataTable_1.XLazyColumn, { field: "id", header: "ID", width: "8rem" }),
+        react_1.default.createElement(XLazyDataTable_1.XLazyColumn, { field: "code", header: "Code", width: "16rem" }),
+        react_1.default.createElement(XLazyDataTable_1.XLazyColumn, { field: "name", header: "Name", width: "45rem" }),
+        react_1.default.createElement(XLazyDataTable_1.XLazyColumn, { field: "value", header: "Value", width: "16rem" })));
+};
+exports.XParamBrowse = XParamBrowse;

package/lib/administration/XParamForm.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { XFormBaseModif } from "../components/XFormBaseModif";
+import { XObject } from "../components/XObject";
+export declare class XParamForm extends XFormBaseModif {
+    createNewObject(): XObject;
+    render(): JSX.Element;
+}

package/lib/administration/XParamForm.js

@@ -0,0 +1,60 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XParamForm = void 0;
+var react_1 = __importDefault(require("react"));
+var XFormBaseModif_1 = require("../components/XFormBaseModif");
+var XFormBase_1 = require("../components/XFormBase");
+var XInputDecimal_1 = require("../components/XInputDecimal");
+var XInputDate_1 = require("../components/XInputDate");
+var XInputText_1 = require("../components/XInputText");
+var XFormFooter_1 = require("../components/XFormFooter");
+var XParamForm = /** @class */ (function (_super) {
+    __extends(XParamForm, _super);
+    function XParamForm() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    XParamForm.prototype.createNewObject = function () {
+        return { version: 0 };
+    };
+    XParamForm.prototype.render = function () {
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { className: "x-form-row" },
+                react_1.default.createElement("div", { className: "x-form-col" },
+                    react_1.default.createElement(XInputDecimal_1.XInputDecimal, { form: this, field: "id", label: "ID", readOnly: true }),
+                    react_1.default.createElement(XInputDate_1.XInputDate, { form: this, field: "modifDate", label: "Modified at", readOnly: true }),
+                    react_1.default.createElement(XInputText_1.XInputText, { form: this, field: "modifXUser.name", label: "Modified by", inputStyle: { width: '12.5rem' } }),
+                    react_1.default.createElement(XInputText_1.XInputText, { form: this, field: "code", label: "Code", inputStyle: { width: '16rem' } }),
+                    react_1.default.createElement(XInputText_1.XInputText, { form: this, field: "name", label: "Name", inputStyle: { width: '45rem' } }),
+                    react_1.default.createElement(XInputText_1.XInputText, { form: this, field: "value", label: "Value", inputStyle: { width: '45rem' } }))),
+            react_1.default.createElement(XFormFooter_1.XFormFooter, { form: this })));
+    };
+    XParamForm = __decorate([
+        (0, XFormBase_1.Form)("XParam")
+    ], XParamForm);
+    return XParamForm;
+}(XFormBaseModif_1.XFormBaseModif));
+exports.XParamForm = XParamForm;

package/lib/administration/XUserBrowse.d.ts

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

package/lib/administration/XUserBrowse.js

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

package/lib/components/XAutoComplete.d.ts

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

package/lib/components/XAutoComplete.js

@@ -70,7 +70,7 @@ var XAutoComplete = /** @class */ (function (_super) {
         // div className="col" nam zabezpeci aby XAutoCompleteBase nezaberal celu dlzku grid-u (ma nastaveny width=100% vdaka "formgroup-inline")
         return (react_1.default.createElement("div", { className: "field grid" },
             react_1.default.createElement("label", { htmlFor: this.props.assocField, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
-            react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, searchBrowse: this.props.searchBrowse, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, width: this.props.width, scrollHeight: this.props.scrollHeight, suggestions: this.props.suggestions, suggestionsLoad: this.props.suggestionsLoad, lazyLoadMaxRows: this.props.lazyLoadMaxRows, splitQueryValue: this.props.splitQueryValue, minLength: this.props.minLength, suggestionsQuery: { entity: this.xAssoc.entityName, filter: function () { return _this.getFilterBase(_this.props.filter); }, sortField: this.props.sortField, fields: this.props.fields } })));
+            react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, itemTemplate: this.props.itemTemplate, searchBrowse: this.props.searchBrowse, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, width: this.props.width, scrollHeight: this.props.scrollHeight, suggestions: this.props.suggestions, suggestionsLoad: this.props.suggestionsLoad, lazyLoadMaxRows: this.props.lazyLoadMaxRows, splitQueryValue: this.props.splitQueryValue, minLength: this.props.minLength, suggestionsQuery: { entity: this.xAssoc.entityName, filter: function () { return _this.getFilterBase(_this.props.filter); }, sortField: this.props.sortField, fields: this.props.fields }, inputClassName: this.props.inputClassName })));
     };
     return XAutoComplete;
 }(XFormComponent_1.XFormComponent));

package/lib/components/XAutoCompleteBase.d.ts

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

package/lib/components/XAutoCompleteBase.js

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

package/lib/components/XAutoCompleteDT.d.ts

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

package/lib/components/XAutoCompleteDT.js

@@ -68,7 +68,7 @@ var XAutoCompleteDT = /** @class */ (function (_super) {
         // TODO - size
         //const size = this.props.size ?? xDisplayField.length;
         // div className="col" nam zabezpeci aby XAutoCompleteBase nezaberal celu dlzku grid-u (ma nastaveny width=100% vdaka "formgroup-inline")
-        return (react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, searchBrowse: this.props.searchBrowse, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, suggestions: this.props.suggestions, suggestionsLoad: this.props.suggestionsLoad, lazyLoadMaxRows: this.props.lazyLoadMaxRows, splitQueryValue: this.props.splitQueryValue, minLength: this.props.minLength, scrollHeight: this.props.scrollHeight, suggestionsQuery: { entity: this.xAssoc.entityName, filter: function () { return _this.getFilterBase(_this.props.filter); }, sortField: this.props.sortField, fields: this.props.fields } }));
+        return (react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, itemTemplate: this.props.itemTemplate, searchBrowse: this.props.searchBrowse, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase, suggestions: this.props.suggestions, suggestionsLoad: this.props.suggestionsLoad, lazyLoadMaxRows: this.props.lazyLoadMaxRows, splitQueryValue: this.props.splitQueryValue, minLength: this.props.minLength, scrollHeight: this.props.scrollHeight, suggestionsQuery: { entity: this.xAssoc.entityName, filter: function () { return _this.getFilterBase(_this.props.filter); }, sortField: this.props.sortField, fields: this.props.fields }, inputClassName: this.props.inputClassName }));
     };
     return XAutoCompleteDT;
 }(XFormComponentDT_1.XFormComponentDT));

package/lib/components/XEditBrowse.js

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

package/lib/components/XEditor.d.ts

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

package/lib/components/XEditor.js

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

package/lib/components/XEditorBase.d.ts

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