@michalrakus/x-react-web-lib 1.0.0 → 1.2.0

package/lib/components/XAutoCompleteBase.js

@@ -3,10 +3,12 @@ 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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+            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 __());
@@ -25,7 +27,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -38,7 +44,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -58,9 +64,14 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __spread = (this && this.__spread) || function () {
-    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
-    return ar;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XAutoCompleteBase = void 0;
@@ -69,6 +80,7 @@ var autocomplete_1 = require("primereact/autocomplete");
 var splitbutton_1 = require("primereact/splitbutton");
 var dialog_1 = require("primereact/dialog");
 var XUtils_1 = require("./XUtils");
+var button_1 = require("primereact/button");
 var XAutoCompleteBase = /** @class */ (function (_super) {
     __extends(XAutoCompleteBase, _super);
     function XAutoCompleteBase(props) {
@@ -87,6 +99,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         _this.onBlur = _this.onBlur.bind(_this);
         _this.formDialogOnSaveOrCancel = _this.formDialogOnSaveOrCancel.bind(_this);
         _this.formDialogOnHide = _this.formDialogOnHide.bind(_this);
+        _this.itemTemplate = _this.itemTemplate.bind(_this);
         return _this;
     }
     XAutoCompleteBase.prototype.componentDidMount = function () {
@@ -94,16 +107,27 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
             this.setFocusToInput();
         }
     };
+    XAutoCompleteBase.prototype.getDisplayValue = function (suggestion) {
+        var displayValue;
+        if (typeof this.props.field === 'string') {
+            displayValue = suggestion[this.props.field];
+        }
+        else {
+            // this.props.field is function returning string
+            displayValue = this.props.field(suggestion);
+        }
+        return displayValue;
+    };
     XAutoCompleteBase.prototype.completeMethod = function (event) {
         var _this = this;
         var filteredSuggestions;
         if (!event.query.trim().length) {
-            filteredSuggestions = __spread(this.props.suggestions);
+            filteredSuggestions = __spreadArray([], __read(this.props.suggestions), false);
         }
         else {
             var queryNormalized_1 = XUtils_1.XUtils.normalizeString(event.query);
             filteredSuggestions = this.props.suggestions.filter(function (suggestion) {
-                var fieldValue = suggestion[_this.props.field];
+                var fieldValue = _this.getDisplayValue(suggestion);
                 // bolo:
                 //return XUtils.normalizeString(fieldValue).startsWith(queryNormalized);
                 return XUtils_1.XUtils.normalizeString(fieldValue).indexOf(queryNormalized_1) !== -1;
@@ -153,6 +177,9 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
                     //console.log('onBlur - setujem timeout');
                     //setTimeout(() => {this.onBlurInvalidInput();}, 100);
                     // najnovsi sposob
+                    // TODO - problem - ak zapisem nejake znaky a vyselektujem nejaky zaznam tak vznikne cerveny preblik (az nasledny onSelect zrusi state.notValid = true)
+                    // zial neviem odlisit event sposobeny selektnutim zaznamu a event sposobeny kliknutim niekam vedla
+                    //console.log(e);
                     this.setState({ notValid: true }); // ocervenime input
                     this.props.onErrorChange(this.createErrorMessage()); // ohlasime nevalidnost parentovi
                 }
@@ -160,7 +187,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         }
     };
     XAutoCompleteBase.prototype.createErrorMessage = function () {
-        return "Value \"" + this.state.inputValueState + "\" was not found among valid values.";
+        return "Value \"".concat(this.state.inputValueState, "\" was not found among valid values.");
     };
     /*
         onBlurInvalidInput() {
@@ -186,18 +213,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         }
     */
     XAutoCompleteBase.prototype.setFocusToInput = function () {
-        if (this.autoCompleteRef.current.inputRef !== undefined) {
-            // funguje ak je XAutoCompleteBase priamo v projekte, tiez funguje ak sa pouziva lib-ka z npmjs.com
-            // nefunguje ak mame lib-ku priamo nalinkovanu na projekt (zmeny lib-ky pocas vyvoja)(minimalne next projekt kvm-next-web-app nefungoval)
-            this.autoCompleteRef.current.inputRef.current.focus();
-        }
-        else {
-            // pozor! nefunguje ak sa lib-ka pouziva z npmjs.com,
-            // je tu koli tomu ked je lib-ka priamo nalinkovana na projekt
-            // je to hack ale neviem to lepsie vyriesit
-            console.log('Warning! this.autoCompleteRef.current.inputRef is undefined - we try to use this.autoCompleteRef.current.inputEl instead');
-            this.autoCompleteRef.current.inputEl.focus();
-        }
+        this.autoCompleteRef.current.focus();
     };
     XAutoCompleteBase.prototype.setObjectValue = function (object, objectChange) {
         this.setState({ inputChanged: false, notValid: false });
@@ -231,18 +247,28 @@ 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) ? object : ""; // TODO - je "" ok?
+            if (typeof this.props.field === 'string') {
+                inputValue = (object !== null) ? object : ""; // TODO - je "" ok?
+            }
+            else {
+                inputValue = (object !== null) ? this.props.field(object) : "";
+            }
         }
         else {
             inputValue = this.state.inputValueState;
         }
         return inputValue;
     };
+    XAutoCompleteBase.prototype.itemTemplate = function (suggestion, index) {
+        // @ts-ignore
+        return this.props.field(suggestion);
+    };
     XAutoCompleteBase.prototype.render = function () {
         var _this = this;
-        // menu na pripadne CRUD operacie
-        var splitButtonItems = [];
+        var dropdownButton;
         if (this.props.valueForm) {
+            // mame CRUD operacie, potrebujeme SplitButton
+            var splitButtonItems = [];
             splitButtonItems.push({
                 icon: 'pi pi-plus',
                 command: function (e) {
@@ -250,7 +276,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
                     _this.formDialogObjectId = undefined;
                     _this.formDialogInitObjectForInsert = {};
                     // ak mame nevalidnu hodnotu, tak ju predplnime (snaha o user friendly)
-                    if (_this.state.inputChanged) {
+                    if (_this.state.inputChanged && typeof _this.props.field === 'string') {
                         _this.formDialogInitObjectForInsert[_this.props.field] = _this.state.inputValueState;
                     }
                     _this.setState({ formDialogOpened: true });
@@ -260,7 +286,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
                 icon: 'pi pi-pencil',
                 command: function (e) {
                     if (_this.state.inputChanged) {
-                        alert("Value \"" + _this.state.inputValueState + "\" was not found among valid values, please enter some valid value.");
+                        alert("Value \"".concat(_this.state.inputValueState, "\" was not found among valid values, please enter some valid value."));
                         _this.setFocusToInput();
                     }
                     else {
@@ -279,24 +305,41 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
                     }
                 }
             });
+            // remove nebudeme podporovat, je technicky problematicky - nemozme vymazat zaznam z DB koli FK constraintu
+            // {
+            //     icon: 'pi pi-times',
+            //     command: (e: any) => {
+            //         console.log('remove');
+            //     }
+            // },
+            splitButtonItems.push({
+                icon: 'pi pi-chevron-down',
+                command: function (e) {
+                    // zobrazi cely suggestions list, zide sa ak chceme vidiet vsetky moznosti
+                    // neprakticke ak mame vela poloziek v suggestions list
+                    // krasne zobrazi cely objekt!
+                    // this.autoCompleteRef.current je element <AutoComplete .../>, ktory vytvarame v render metode
+                    //console.log(this.autoCompleteRef.current);
+                    // otvori dropdown (search je metoda popisana v API, volanie sme skopcili zo zdrojakov primereact)
+                    _this.autoCompleteRef.current.search(e, '', 'dropdown');
+                }
+            });
+            dropdownButton = react_1.default.createElement(splitbutton_1.SplitButton, { model: splitButtonItems, className: 'x-splitbutton-only-dropdown' + XUtils_1.XUtils.mobileCssSuffix(), menuClassName: 'x-splitbutton-only-dropdown-menu' + XUtils_1.XUtils.mobileCssSuffix() });
+        }
+        else {
+            // mame len 1 operaciu - dame jednoduchy button
+            dropdownButton = react_1.default.createElement(button_1.Button, { icon: "pi pi-chevron-down", onClick: function (e) { return _this.autoCompleteRef.current.search(e, '', 'dropdown'); }, className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix() });
         }
-        // remove nebudeme podporovat, je technicky problematicky - nemozme vymazat zaznam z DB koli FK constraintu
-        // {
-        //     icon: 'pi pi-times',
-        //     command: (e: any) => {
-        //         console.log('remove');
-        //     }
-        // },
-        splitButtonItems.push({
-            icon: 'pi pi-chevron-down',
-            command: function (e) {
-                // zobrazi cely suggestions list, zide sa ak chceme vidiet vsetky moznosti
-                // neprakticke ak mame vela poloziek v suggestions list
-                _this.autoCompleteRef.current.onDropdownClick();
-            }
-        });
         // vypocitame inputValue
         var inputValue = this.computeInputValue();
+        // poznamka: asi by sa dalo pouzivat vzdy len itemTemplate (nepouzivat field)
+        var fieldOrItemTemplate;
+        if (typeof this.props.field === 'string') {
+            fieldOrItemTemplate = { field: this.props.field };
+        }
+        else {
+            fieldOrItemTemplate = { itemTemplate: this.itemTemplate };
+        }
         var error;
         if (this.state.notValid) {
             // ak je v nevalidnom stave, tak ma tato chybova hlaska prednost pred ostatnymi (ak nahodou su)
@@ -309,8 +352,8 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         // <DobrovolnikForm id={this.formDialogObjectId} object={this.formDialogInitObjectForInsert} 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 }, XUtils_1.XUtils.createErrorProps(error))),
-            react_1.default.createElement(splitbutton_1.SplitButton, { model: splitButtonItems, className: 'x-splitbutton-only-dropdown' + XUtils_1.XUtils.mobileCssSuffix(), menuClassName: 'x-splitbutton-only-dropdown-menu' + XUtils_1.XUtils.mobileCssSuffix() }),
+            react_1.default.createElement(autocomplete_1.AutoComplete, __assign({ value: inputValue, suggestions: this.state.filteredSuggestions, completeMethod: this.completeMethod }, fieldOrItemTemplate, { onChange: this.onChange, onSelect: this.onSelect, onBlur: this.onBlur, maxLength: this.props.maxLength, ref: this.autoCompleteRef }, XUtils_1.XUtils.createErrorProps(error))),
+            dropdownButton,
             this.props.valueForm != undefined ?
                 react_1.default.createElement(dialog_1.Dialog, { visible: this.state.formDialogOpened, onHide: this.formDialogOnHide, header: this.formDialogObjectId ? 'Modification' : 'New record' }, react_1.default.cloneElement(this.props.valueForm, {
                     id: this.formDialogObjectId, object: this.formDialogInitObjectForInsert, onSaveOrCancel: this.formDialogOnSaveOrCancel

package/lib/components/XAutoCompleteDT.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { XFormComponentDT, XFormComponentDTProps } from "./XFormComponentDT";
+import { XAssoc } from "../serverApi/XEntityMetadata";
+import { OperationType } from "./XUtils";
+import { XError } from "./XErrors";
+import { XTableFieldFilterProp } from "./XFormDataTable2";
+export interface XAutoCompleteDTProps extends XFormComponentDTProps {
+    assocField: string;
+    displayField: string | ((suggestion: any) => string);
+    searchTable?: any;
+    assocForm?: any;
+    filter?: XTableFieldFilterProp;
+}
+export declare class XAutoCompleteDT extends XFormComponentDT<XAutoCompleteDTProps> {
+    protected xAssoc: XAssoc;
+    protected errorInBase: string | undefined;
+    state: {
+        suggestions: any[];
+    };
+    constructor(props: XAutoCompleteDTProps);
+    componentDidMount(): void;
+    readAndSetSuggestions(): Promise<void>;
+    getField(): string;
+    isNotNull(): boolean;
+    getValue(): any | null;
+    onChangeAutoCompleteBase(object: any, objectChange: OperationType): void;
+    onErrorChangeAutoCompleteBase(error: string | undefined): void;
+    validate(): {
+        field: string;
+        xError: XError;
+    } | undefined;
+    render(): JSX.Element;
+}

package/lib/components/XAutoCompleteDT.js

@@ -0,0 +1,141 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XAutoCompleteDT = void 0;
+var XUtilsMetadata_1 = require("./XUtilsMetadata");
+var react_1 = __importDefault(require("react"));
+var XFormComponentDT_1 = require("./XFormComponentDT");
+var XUtils_1 = require("./XUtils");
+var XAutoCompleteBase_1 = require("./XAutoCompleteBase");
+var XAutoCompleteDT = /** @class */ (function (_super) {
+    __extends(XAutoCompleteDT, _super);
+    function XAutoCompleteDT(props) {
+        var _this = _super.call(this, props) || this;
+        _this.xAssoc = XUtilsMetadata_1.XUtilsMetadata.getXAssocToOne(XUtilsMetadata_1.XUtilsMetadata.getXEntity(props.entity), props.assocField);
+        _this.errorInBase = undefined;
+        _this.state = {
+            suggestions: []
+        };
+        _this.onChangeAutoCompleteBase = _this.onChangeAutoCompleteBase.bind(_this);
+        _this.onErrorChangeAutoCompleteBase = _this.onErrorChangeAutoCompleteBase.bind(_this);
+        return _this;
+    }
+    XAutoCompleteDT.prototype.componentDidMount = function () {
+        this.readAndSetSuggestions();
+    };
+    XAutoCompleteDT.prototype.readAndSetSuggestions = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var suggestions;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, XUtils_1.XUtils.fetchRows(this.xAssoc.entityName, this.getFilterBase(this.props.filter), typeof this.props.displayField === 'string' ? this.props.displayField : undefined)];
+                    case 1:
+                        suggestions = _a.sent();
+                        // ak mame funkciu, zosortujeme tu
+                        if (typeof this.props.displayField === 'function') {
+                            suggestions = XUtils_1.XUtils.arraySort(suggestions, this.props.displayField);
+                        }
+                        this.setState({ suggestions: suggestions });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    XAutoCompleteDT.prototype.getField = function () {
+        return this.props.assocField;
+    };
+    XAutoCompleteDT.prototype.isNotNull = function () {
+        return !this.xAssoc.isNullable;
+    };
+    XAutoCompleteDT.prototype.getValue = function () {
+        var assocObject = this.getValueFromRowData();
+        return assocObject;
+    };
+    XAutoCompleteDT.prototype.onChangeAutoCompleteBase = function (object, objectChange) {
+        this.onValueChangeBase(object, this.props.onChange, objectChange);
+        if (objectChange !== XUtils_1.OperationType.None) {
+            // zmenil sa zaznam dobrovolnika v DB
+            // zatial len refreshneme z DB
+            // ak by bol reqest pomaly, mozme pri inserte (nove id) / update (existujuce id) upravit zoznam a usetrime tym request do DB
+            // ak bol delete (dobrovolnik === null), treba urobit refresh do DB (alebo si poslat id-cko zmazaneho zaznamu)
+            this.readAndSetSuggestions();
+        }
+    };
+    XAutoCompleteDT.prototype.onErrorChangeAutoCompleteBase = function (error) {
+        this.errorInBase = error; // odlozime si error
+    };
+    // overrides method in XFormComponent
+    XAutoCompleteDT.prototype.validate = function () {
+        if (this.errorInBase) {
+            // error message dame na onChange, mohli by sme aj na onSet (predtym onBlur), je to jedno viac-menej
+            // TODO - fieldLabel
+            return { field: this.getField(), xError: { onChange: this.errorInBase, fieldLabel: undefined } };
+        }
+        // zavolame povodnu metodu
+        return _super.prototype.validate.call(this);
+    };
+    XAutoCompleteDT.prototype.render = function () {
+        var xEntityAssoc = XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.xAssoc.entityName);
+        //const xDisplayField = XUtilsMetadata.getXFieldByPath(xEntityAssoc, this.props.displayField);
+        // TODO - readOnly
+        // 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(), suggestions: this.state.suggestions, onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase }));
+    };
+    return XAutoCompleteDT;
+}(XFormComponentDT_1.XFormComponentDT));
+exports.XAutoCompleteDT = XAutoCompleteDT;

package/lib/components/XBrowse.js

@@ -3,10 +3,12 @@ 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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+            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 __());
@@ -14,7 +16,11 @@ var __extends = (this && this.__extends) || (function () {
 })();
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -27,7 +33,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -46,7 +52,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -312,7 +318,7 @@ var XBrowse = /** @class */ (function (_super) {
             this.props.openForm(formElementCloned);
         }
         else {
-            console.log("XBrowse entity = " + this.props.entity + ": form not found/registered.");
+            console.log("XBrowse entity = ".concat(this.props.entity, ": form not found/registered."));
         }
     };
     XBrowse.prototype.render = function () {

package/lib/components/XButton.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
+import { ButtonProps } from "primereact/button";
+import { IconType } from "primereact/utils";
 export declare const XButton: (props: {
     label?: string | undefined;
-    icon?: string | undefined;
+    icon?: IconType<ButtonProps>;
     onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     disabled?: boolean | undefined;
 }) => JSX.Element;

package/lib/components/XButton.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.XButton = void 0;
 var react_1 = __importDefault(require("react"));
 var button_1 = require("primereact/button");
-exports.XButton = function (props) {
-    // zatial iba pridany class x-button, aby sme vedeli nastavit margin "m-1" (1rem)
+var XButton = function (props) {
+    // zatial iba pridany class x-button, aby sme vedeli nastavit margin "m-1" (0.25rem)
     return (react_1.default.createElement(button_1.Button, { label: props.label, icon: props.icon, onClick: props.onClick, disabled: props.disabled, className: "m-1" }));
 };
+exports.XButton = XButton;

package/lib/components/XButtonIconNarrow.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ButtonProps } from "primereact/button";
+import { IconType } from "primereact/utils";
+export declare const XButtonIconNarrow: (props: {
+    icon: IconType<ButtonProps>;
+    onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    disabled?: boolean | undefined;
+    tooltip?: any;
+    addMargin?: boolean | undefined;
+}) => JSX.Element;

package/lib/components/XButtonIconNarrow.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.XButtonIconNarrow = void 0;
+var react_1 = __importDefault(require("react"));
+var button_1 = require("primereact/button");
+var XUtils_1 = require("./XUtils");
+// button s ikonkou, zuzeny na 1.5rem (21px), na mobile nezuzeny, defaultne s marginom "m-1" (0.25rem) (ako XButton), margin sa da vypnut (pouzivane pre editovatelnu tabulku)
+// zmyslom narrow buttonu je setrit miesto
+var XButtonIconNarrow = function (props) {
+    var className = '';
+    if (!XUtils_1.XUtils.isMobile()) {
+        className += 'x-button-icon-narrow';
+    }
+    if (props.addMargin === undefined || props.addMargin === true) {
+        if (className !== '') {
+            className += ' ';
+        }
+        className += 'm-1';
+    }
+    return (react_1.default.createElement(button_1.Button, { icon: props.icon, onClick: props.onClick, disabled: props.disabled, className: className !== '' ? className : undefined, tooltip: props.tooltip }));
+};
+exports.XButtonIconNarrow = XButtonIconNarrow;

package/lib/components/XButtonIconSmall.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
+import { ButtonProps } from "primereact/button";
+import { IconType } from "primereact/utils";
 export declare const XButtonIconSmall: (props: {
-    icon: string;
+    icon: IconType<ButtonProps>;
     onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     disabled?: boolean | undefined;
     tooltip?: any;

package/lib/components/XButtonIconSmall.js

@@ -7,6 +7,7 @@ exports.XButtonIconSmall = void 0;
 var react_1 = __importDefault(require("react"));
 var button_1 = require("primereact/button");
 var XUtils_1 = require("./XUtils");
-exports.XButtonIconSmall = function (props) {
+var XButtonIconSmall = function (props) {
     return (react_1.default.createElement(button_1.Button, { icon: props.icon, onClick: props.onClick, disabled: props.disabled, className: XUtils_1.XUtils.isMobile() ? undefined : 'x-button-icon-small p-button-sm', tooltip: props.tooltip }));
 };
+exports.XButtonIconSmall = XButtonIconSmall;

package/lib/components/XChangePasswordForm.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -14,7 +18,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -33,7 +37,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -77,11 +81,11 @@ var XUtils_1 = require("./XUtils");
 var password_1 = require("primereact/password");
 var button_1 = require("primereact/button");
 var inputtext_1 = require("primereact/inputtext");
-exports.XChangePasswordForm = function (props) {
+var XChangePasswordForm = function (props) {
     var _a;
-    var _b = __read(react_1.useState(""), 2), passwordCurrent = _b[0], setPasswordCurrent = _b[1];
-    var _c = __read(react_1.useState(""), 2), passwordNew = _c[0], setPasswordNew = _c[1];
-    var _d = __read(react_1.useState(""), 2), passwordNewConfirm = _d[0], setPasswordNewConfirm = _d[1];
+    var _b = __read((0, react_1.useState)(""), 2), passwordCurrent = _b[0], setPasswordCurrent = _b[1];
+    var _c = __read((0, react_1.useState)(""), 2), passwordNew = _c[0], setPasswordNew = _c[1];
+    var _d = __read((0, react_1.useState)(""), 2), passwordNewConfirm = _d[0], setPasswordNewConfirm = _d[1];
     var onClickSave = function () { return __awaiter(void 0, void 0, void 0, function () {
         var xToken, e_1;
         return __generator(this, function (_a) {
@@ -153,3 +157,4 @@ exports.XChangePasswordForm = function (props) {
         react_1.default.createElement("div", { className: "flex justify-content-center" },
             react_1.default.createElement(button_1.Button, { label: "Save", onClick: onClickSave }))));
 };
+exports.XChangePasswordForm = XChangePasswordForm;

package/lib/components/XCheckbox.d.ts

@@ -1,10 +1,8 @@
-import React from "react";
-import { XFormBase } from "./XFormBase";
-export declare const XCheckbox: (props: {
-    form: XFormBase;
-    field: string;
-    label?: string | undefined;
-    readOnly?: boolean | undefined;
-    inputStyle?: React.CSSProperties | undefined;
-    labelStyle?: React.CSSProperties | undefined;
-}) => JSX.Element;
+/// <reference types="react" />
+import { XInput, XInputProps } from "./XInput";
+export declare class XCheckbox extends XInput<boolean, XInputProps<boolean>> {
+    constructor(props: XInputProps<boolean>);
+    getValue(): boolean | null;
+    onValueChange(e: any): void;
+    render(): JSX.Element;
+}