@michalrakus/x-react-web-lib 1.1.0 → 1.3.0

package/FindParam.d.ts

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

package/FindParam.js

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

package/XButtonIconNarrow.d.ts

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

package/XButtonIconNarrow.js

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

package/XButtonIconSmall.d.ts

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

package/XButtonIconSmall.js

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

package/XFieldChangeEvent.d.ts

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

package/XFieldChangeEvent.js

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

package/gulpfile.js

@@ -17,12 +17,15 @@ function generateApi(cb) {
         "./lib/components/XAutoComplete",
         "./lib/components/XAutoCompleteBase",
         "./lib/components/XButton",
+        "./lib/components/XButtonIconNarrow",
+        "./lib/components/XButtonIconSmall",
         "./lib/components/XBrowse",
         "./lib/components/XChangePasswordForm",
         "./lib/components/XCheckbox",
         "./lib/components/XDropdown",
         "./lib/components/XEnvVars",
         "./lib/components/XErrors",
+        "./lib/components/XFieldChangeEvent",
         "./lib/components/XFormBase",
         "./lib/components/XFormBaseT",
         "./lib/components/XFormDataTable2",
@@ -43,6 +46,7 @@ function generateApi(cb) {
         "./lib/components/XUtilsConversions",
         "./lib/components/XUtilsMetadata",
 
+        "./lib/serverApi/FindParam",
         "./lib/serverApi/XUtilsCommon",
 
         "./lib/administration/XUserBrowse",

package/lib/components/SearchTableParams.d.ts

@@ -1,5 +1,11 @@
+import { DataTableFilterMetaData } from "primereact/datatable";
+import { XCustomFilter } from "../serverApi/FindParam";
+export interface XFieldFilter {
+    field: string;
+    constraint: DataTableFilterMetaData;
+}
 export interface SearchTableParams {
     onChoose: (chosenRow: any) => void;
-    displayField: string;
-    filter: string | undefined;
+    displayFieldFilter?: XFieldFilter;
+    customFilter?: XCustomFilter;
 }

package/lib/components/XAutoComplete.d.ts

@@ -1,23 +1,26 @@
 import React from "react";
-import { XFormComponent, XFormComponentProps } from "./XFormComponent";
+import { XFilterProp, XFormComponent, XFormComponentProps } from "./XFormComponent";
 import { XAssoc } from "../serverApi/XEntityMetadata";
 import { OperationType } from "./XUtils";
 import { XError } from "./XErrors";
-export interface XAutoCompleteProps extends XFormComponentProps {
+import { XObject } from "./XObject";
+export interface XAutoCompleteProps extends XFormComponentProps<XObject> {
     assocField: string;
-    displayField: string;
+    displayField: string | ((suggestion: any) => string);
     searchTable?: any;
     assocForm?: any;
+    filter?: XFilterProp;
     size?: number;
     inputStyle?: React.CSSProperties;
 }
-export declare class XAutoComplete extends XFormComponent<XAutoCompleteProps> {
+export declare class XAutoComplete extends XFormComponent<XObject, XAutoCompleteProps> {
     protected xAssoc: XAssoc;
     protected errorInBase: string | undefined;
     state: {
         suggestions: any[];
     };
     constructor(props: XAutoCompleteProps);
+    getDisplayFieldOrId(): string;
     componentDidMount(): void;
     readAndSetSuggestions(): Promise<void>;
     getField(): string;

package/lib/components/XAutoComplete.js

@@ -71,10 +71,22 @@ var XAutoComplete = /** @class */ (function (_super) {
         };
         _this.onChangeAutoCompleteBase = _this.onChangeAutoCompleteBase.bind(_this);
         _this.onErrorChangeAutoCompleteBase = _this.onErrorChangeAutoCompleteBase.bind(_this);
-        props.form.addField(props.assocField + '.' + props.displayField);
+        props.form.addField(props.assocField + '.' + _this.getDisplayFieldOrId());
         return _this;
     }
+    XAutoComplete.prototype.getDisplayFieldOrId = function () {
+        // toto je hack - ak ratame displayField cez funkciu, tak nam potom chyba (hociaky) atribut asociovaneho objektu
+        // podobne ako na XFormDataTable2, podsunieme id-ckovy atribut
+        if (typeof this.props.displayField === 'string') {
+            return this.props.displayField; // vsetko ok
+        }
+        else {
+            // v displayField mame funkciu, zistime id-ckovy atribut
+            return XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.xAssoc.entityName).idField;
+        }
+    };
     XAutoComplete.prototype.componentDidMount = function () {
+        console.log("volany XAutoComplete.componentDidMount()");
         this.readAndSetSuggestions();
     };
     XAutoComplete.prototype.readAndSetSuggestions = function () {
@@ -82,9 +94,13 @@ var XAutoComplete = /** @class */ (function (_super) {
             var suggestions;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, XUtils_1.XUtils.fetchMany('findRows', { entity: this.xAssoc.entityName, sortMeta: { field: this.props.displayField, order: 1 } })];
+                    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*/];
                 }
@@ -102,7 +118,7 @@ var XAutoComplete = /** @class */ (function (_super) {
         return assocObject;
     };
     XAutoComplete.prototype.onChangeAutoCompleteBase = function (object, objectChange) {
-        this.onValueChangeBase(object);
+        this.onValueChangeBase(object, this.props.onChange, objectChange);
         if (objectChange !== XUtils_1.OperationType.None) {
             // zmenil sa zaznam dobrovolnika v DB
             // zatial len refreshneme z DB
@@ -124,12 +140,11 @@ var XAutoComplete = /** @class */ (function (_super) {
         return _super.prototype.validate.call(this);
     };
     XAutoComplete.prototype.render = function () {
-        var _a;
         var xEntityAssoc = XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.xAssoc.entityName);
-        var xDisplayField = XUtilsMetadata_1.XUtilsMetadata.getXFieldByPath(xEntityAssoc, this.props.displayField);
+        //const xDisplayField = XUtilsMetadata.getXFieldByPath(xEntityAssoc, this.props.displayField);
         // TODO - readOnly
         // TODO - size
-        var size = (_a = this.props.size) !== null && _a !== void 0 ? _a : xDisplayField.length;
+        //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("div", { className: "field grid" },
             react_1.default.createElement("label", { htmlFor: this.props.assocField, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),

package/lib/components/XAutoCompleteBase.d.ts

@@ -1,13 +1,15 @@
-import { Component } from "react";
+import React, { Component } from "react";
+import { AutoCompleteChangeEvent } from "primereact/autocomplete";
 import { OperationType } from "./XUtils";
 export interface XAutoCompleteBaseProps {
     value: any;
     suggestions: any[];
     onChange: (object: any, objectChange: OperationType) => void;
-    field: string;
+    field: string | ((suggestion: any) => string);
     valueForm?: any;
     idField?: string;
     maxLength?: number;
+    readOnly?: boolean;
     error?: string;
     onErrorChange: (error: string | undefined) => void;
     setFocusOnCreate?: boolean;
@@ -25,17 +27,19 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
     formDialogInitObjectForInsert: any | undefined;
     constructor(props: XAutoCompleteBaseProps);
     componentDidMount(): void;
+    getDisplayValue(suggestion: any): string;
     completeMethod(event: {
         query: string;
     }): void;
-    onChange(e: any): void;
+    onChange(e: AutoCompleteChangeEvent): void;
     onSelect(e: any): void;
-    onBlur(e: any): void;
+    onBlur(e: React.FocusEvent<HTMLInputElement>): void;
     createErrorMessage(): string;
     setFocusToInput(): void;
     setObjectValue(object: any, objectChange: OperationType): void;
     formDialogOnSaveOrCancel(object: any | null, objectChange: OperationType): void;
     formDialogOnHide(): void;
     computeInputValue(): any;
+    itemTemplate(suggestion: any, index: number): React.ReactNode;
     render(): JSX.Element;
 }

package/lib/components/XAutoCompleteBase.js

@@ -80,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) {
@@ -98,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 () {
@@ -105,6 +107,17 @@ 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;
@@ -114,7 +127,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         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;
@@ -164,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
                 }
@@ -231,18 +247,30 @@ 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 _a;
+        var readOnly = (_a = this.props.readOnly) !== null && _a !== void 0 ? _a : false;
+        var dropdownButton;
         if (this.props.valueForm) {
+            // mame CRUD operacie, potrebujeme SplitButton
+            var splitButtonItems = [];
             splitButtonItems.push({
                 icon: 'pi pi-plus',
                 command: function (e) {
@@ -250,7 +278,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 });
@@ -279,28 +307,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(), disabled: readOnly });
+        }
+        else {
+            // mame len 1 operaciu - dame jednoduchy button
+            dropdownButton = react_1.default.createElement(button_1.Button, { icon: "pi pi-chevron-down", onClick: function (e) { return _this.autoCompleteRef.current.search(e, '', 'dropdown'); }, className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix(), disabled: readOnly });
         }
-        // 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');
-            }
-        });
         // 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)
@@ -313,9 +354,9 @@ 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() }),
-            this.props.valueForm != undefined ?
+            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, 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 record' }, react_1.default.cloneElement(this.props.valueForm, {
                     id: this.formDialogObjectId, object: this.formDialogInitObjectForInsert, onSaveOrCancel: this.formDialogOnSaveOrCancel
                 }, this.props.valueForm.children))

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,140 @@
+"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 - 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, readOnly: this.isReadOnly(), error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase }));
+    };
+    return XAutoCompleteDT;
+}(XFormComponentDT_1.XFormComponentDT));
+exports.XAutoCompleteDT = XAutoCompleteDT;

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

@@ -7,7 +7,7 @@ exports.XButton = void 0;
 var react_1 = __importDefault(require("react"));
 var button_1 = require("primereact/button");
 var XButton = function (props) {
-    // zatial iba pridany class x-button, aby sme vedeli nastavit margin "m-1" (1rem)
+    // 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;