@michalrakus/x-react-web-lib 1.22.0 → 1.23.0

package/lib/components/XInputDate.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { XFormComponentProps } from "./XFormComponent";
 import { XInput } from "./XInput";
 export interface XInputDateProps extends XFormComponentProps<number> {
@@ -8,5 +8,5 @@ export declare class XInputDate extends XInput<Date, XInputDateProps> {
     constructor(props: XInputDateProps);
     getValue(): Date | null;
     onValueChange(value: Date | null): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XInputDateDT.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { XInputDT, XInputDTProps } from "./XInputDT";
 export interface XInputDateDTProps extends XInputDTProps {
 }
@@ -6,5 +6,5 @@ export declare class XInputDateDT extends XInputDT<XInputDateDTProps> {
     constructor(props: XInputDateDTProps);
     getValue(): Date | null;
     onValueChange(value: Date | null): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XInputDecimal.d.ts

@@ -11,5 +11,5 @@ export declare class XInputDecimal extends XInput<number, XInputDecimalProps> {
     getValue(): number | undefined;
     onValueChange(e: any): void;
     onBlur(e: any): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XInputDecimalBase.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export declare const XInputDecimalBase: (props: {
     id?: string | undefined;
     value: number | null;
@@ -10,4 +10,4 @@ export declare const XInputDecimalBase: (props: {
     max?: number | undefined;
     size?: number | undefined;
     className?: string | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XInputDecimalDT.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { XInputDT, XInputDTProps } from "./XInputDT";
 export interface XInputDecimalDTProps extends XInputDTProps {
 }
@@ -7,5 +7,5 @@ export declare class XInputDecimalDT extends XInputDT<XInputDecimalDTProps> {
     getValue(): number | undefined;
     onValueChange(e: any): void;
     onBlur(e: any): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XInputDecimalDT.js

@@ -67,7 +67,7 @@ var XInputDecimalDT = /** @class */ (function (_super) {
     };
     XInputDecimalDT.prototype.render = function () {
         var _a = XUtilsMetadata_1.XUtilsMetadata.getParamsForInputNumber(this.xField), useGrouping = _a.useGrouping, fractionDigits = _a.fractionDigits, min = _a.min, max = _a.max;
-        return (react_1.default.createElement(inputnumber_1.InputNumber, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), mode: "decimal", locale: "de-DE", useGrouping: useGrouping, minFractionDigits: fractionDigits, maxFractionDigits: fractionDigits, min: min, max: max, onBlur: this.onBlur }, XUtils_1.XUtils.addClassName(XUtils_1.XUtils.createErrorProps(this.getError()), "x-input-to-resize"))));
+        return (react_1.default.createElement(inputnumber_1.InputNumber, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), mode: "decimal", locale: "de-DE", useGrouping: useGrouping, minFractionDigits: fractionDigits, maxFractionDigits: fractionDigits, min: min, max: max, onBlur: this.onBlur }, XUtils_1.XUtils.addClassName(XUtils_1.XUtils.createTooltipOrErrorProps(this.getError()), "x-input-to-resize"))));
     };
     return XInputDecimalDT;
 }(XInputDT_1.XInputDT));

package/lib/components/XInputFileList.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { Component } from "react";
 import { FileUploadHandlerEvent } from "primereact/fileupload";
 import { XFormBase } from "./XFormBase";
@@ -31,6 +32,6 @@ export declare class XInputFileList extends Component<XInputFileListProps> {
     static sizeInMB(size: number): string;
     onDownloadFile(xFile: XFile): Promise<void>;
     onRemoveFile(fileItem: any): Promise<void>;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/lib/components/XInputInterval.d.ts

@@ -10,5 +10,5 @@ export declare class XInputInterval extends XInput<number, XInputIntervalProps>
     constructor(props: XInputIntervalProps);
     getValue(): IPostgresInterval | null;
     onValueChange(value: IPostgresInterval | null): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XInputIntervalBase.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import React, { CSSProperties } from "react";
 import { IPostgresInterval } from "./XUtils";
 export declare const XInputIntervalBase: (props: {
     id?: string | undefined;
@@ -7,4 +7,4 @@ export declare const XInputIntervalBase: (props: {
     readOnly?: boolean | undefined;
     error?: string | undefined;
     style?: CSSProperties | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XInputIntervalBase.js

@@ -92,6 +92,6 @@ var XInputIntervalBase = function (props) {
         return inputValue;
     };
     // remark - width:'3.5rem' is default, can be overriden by value from props.style, if needed
-    return (react_1.default.createElement(inputtext_1.InputText, __assign({ id: props.id, value: getInputValue(), onChange: onChange, onBlur: onBlur, readOnly: props.readOnly }, XUtils_1.XUtils.createErrorProps(props.error), { style: __assign({ width: '3.5rem' }, props.style) })));
+    return (react_1.default.createElement(inputtext_1.InputText, __assign({ id: props.id, value: getInputValue(), onChange: onChange, onBlur: onBlur, readOnly: props.readOnly }, XUtils_1.XUtils.createTooltipOrErrorProps(props.error), { style: __assign({ width: '3.5rem' }, props.style) })));
 };
 exports.XInputIntervalBase = XInputIntervalBase;

package/lib/components/XInputIntervalDT.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { IPostgresInterval } from "./XUtils";
 import { XInputDT, XInputDTProps } from "./XInputDT";
 export interface XInputIntervalDTProps extends XInputDTProps {
@@ -7,5 +7,5 @@ export declare class XInputIntervalDT extends XInputDT<XInputIntervalDTProps> {
     constructor(props: XInputIntervalDTProps);
     getValue(): IPostgresInterval | null;
     onValueChange(value: IPostgresInterval | null): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XInputText.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { XInput, XInputProps } from "./XInput";
 export interface XInputTextProps extends XInputProps<string> {
     size?: number;
@@ -8,5 +8,5 @@ export declare class XInputText extends XInput<string, XInputTextProps> {
     getValue(): string;
     onValueChange(e: any): void;
     onBlur(e: any): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XInputText.js

@@ -34,6 +34,8 @@ var react_1 = __importDefault(require("react"));
 var XUtilsConversions_1 = require("../serverApi/XUtilsConversions");
 var inputtext_1 = require("primereact/inputtext");
 var XInput_1 = require("./XInput");
+var XUtils_1 = require("./XUtils");
+var tooltip_1 = require("primereact/tooltip");
 var XInputText = /** @class */ (function (_super) {
     __extends(XInputText, _super);
     function XInputText(props) {
@@ -57,13 +59,22 @@ var XInputText = /** @class */ (function (_super) {
         this.callOnChangeFromOnBlur();
     };
     XInputText.prototype.render = function () {
-        var _a;
+        var _a, _b;
+        var value = this.getValue();
+        var labelTooltip = undefined;
+        var labelElemId = undefined;
+        if (value) {
+            // nevidno placeholder, tak zobrazime desc ako label tooltip
+            labelTooltip = this.props.desc;
+            labelElemId = "".concat(this.props.field, "_label_id");
+        }
         var size = (_a = this.props.size) !== null && _a !== void 0 ? _a : this.xField.length;
         // note: style overrides size (width of the input according to character count)
         var label = this.getLabel();
         return (react_1.default.createElement("div", { className: "field grid" },
-            label !== undefined ? react_1.default.createElement("label", { htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, label) : null,
-            react_1.default.createElement(inputtext_1.InputText, __assign({ id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, size: size, style: this.props.inputStyle }, this.getClassNameTooltip(), { onBlur: this.onBlur, placeholder: this.props.placeholder }))));
+            label !== undefined ? react_1.default.createElement("label", { id: labelElemId, htmlFor: this.props.field, className: "col-fixed", style: this.getLabelStyle() }, label) : null,
+            labelTooltip ? react_1.default.createElement(tooltip_1.Tooltip, { target: "#".concat(labelElemId), content: labelTooltip }) : null,
+            react_1.default.createElement(inputtext_1.InputText, __assign({ id: this.props.field, value: value, onChange: this.onValueChange, onBlur: this.onBlur, readOnly: this.isReadOnly(), maxLength: this.xField.length, size: size, style: this.props.inputStyle }, XUtils_1.XUtils.createTooltipOrErrorProps(this.getError(), this.props.tooltip), { placeholder: (_b = this.props.placeholder) !== null && _b !== void 0 ? _b : this.props.desc }))));
     };
     return XInputText;
 }(XInput_1.XInput));

package/lib/components/XInputTextDT.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { XFormBase } from "./XFormBase";
+import React from "react";
 import { XTableFieldReadOnlyProp } from "./XFormDataTable2";
 export declare const XInputTextDT: (props: {
     form: XFormBase;
@@ -7,4 +7,4 @@ export declare const XInputTextDT: (props: {
     field: string;
     rowData: any;
     readOnly?: XTableFieldReadOnlyProp | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XInputTextarea.d.ts

@@ -15,5 +15,5 @@ export declare class XInputTextarea extends XInput<string, XInputTextareaProps>
     getValue(): string | null;
     onValueChange(value: string | null): void;
     getLabelStyle(): React.CSSProperties;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XInputTextarea.js

@@ -23,6 +23,7 @@ var react_1 = __importDefault(require("react"));
 var XInput_1 = require("./XInput");
 var XUtils_1 = require("./XUtils");
 var XInputTextareaBase_1 = require("./XInputTextareaBase");
+var tooltip_1 = require("primereact/tooltip");
 var XInputTextarea = /** @class */ (function (_super) {
     __extends(XInputTextarea, _super);
     function XInputTextarea(props) {
@@ -41,7 +42,7 @@ var XInputTextarea = /** @class */ (function (_super) {
         return this.props.labelOnTop ? ((_a = this.props.labelStyle) !== null && _a !== void 0 ? _a : {}) : _super.prototype.getLabelStyle.call(this);
     };
     XInputTextarea.prototype.render = function () {
-        var _a;
+        var _a, _b;
         var inputStyle = (_a = this.props.inputStyle) !== null && _a !== void 0 ? _a : {};
         var cols;
         if (this.props.cols === "full") {
@@ -57,11 +58,20 @@ var XInputTextarea = /** @class */ (function (_super) {
             // aj tak sa asi vzdy bude pouzivat "full"
             cols = this.props.cols;
         }
+        var value = this.getValue();
+        var labelTooltip = undefined;
+        var labelElemId = undefined;
+        if (value !== null) {
+            // nevidno placeholder, tak zobrazime desc ako label tooltip
+            labelTooltip = this.props.desc;
+            labelElemId = "".concat(this.props.field, "_label_id");
+        }
         // InputTextarea renderujeme az ked mame nacitany object, lebo inac pri autoResize sa nam nenastavi spravna velkost (hodnota nie je k dispozicii pri prvom renderingu)
         return (react_1.default.createElement("div", { className: !this.props.labelOnTop ? 'field grid' : 'field grid x-inputtextarea-label-on-top' },
-            react_1.default.createElement("label", { htmlFor: this.props.field, className: !this.props.labelOnTop ? 'col-fixed' : undefined, style: this.getLabelStyle() }, this.getLabel()),
+            react_1.default.createElement("label", { id: labelElemId, htmlFor: this.props.field, className: !this.props.labelOnTop ? 'col-fixed' : undefined, style: this.getLabelStyle() }, this.getLabel()),
+            labelTooltip ? react_1.default.createElement(tooltip_1.Tooltip, { target: "#".concat(labelElemId), content: labelTooltip }) : null,
             this.props.form.state.object ?
-                react_1.default.createElement(XInputTextareaBase_1.XInputTextareaBase, { id: this.props.field, value: this.getValue(), onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, style: inputStyle, rows: this.props.rows, cols: cols, autoResize: this.props.autoResize, error: this.getError() })
+                react_1.default.createElement(XInputTextareaBase_1.XInputTextareaBase, { id: this.props.field, value: value, onChange: this.onValueChange, readOnly: this.isReadOnly(), maxLength: this.xField.length, style: inputStyle, rows: this.props.rows, cols: cols, autoResize: this.props.autoResize, error: this.getError(), tooltip: this.props.tooltip, placeholder: (_b = this.props.placeholder) !== null && _b !== void 0 ? _b : this.props.desc })
                 : null));
     };
     XInputTextarea.defaultProps = {

package/lib/components/XInputTextareaBase.d.ts

@@ -10,4 +10,6 @@ export declare const XInputTextareaBase: (props: {
     error?: string | undefined;
     style?: React.CSSProperties | undefined;
     maxLength?: number | undefined;
-}) => JSX.Element;
+    tooltip?: string | undefined;
+    placeholder?: string | undefined;
+}) => React.JSX.Element;

package/lib/components/XInputTextareaBase.js

@@ -86,6 +86,6 @@ var XInputTextareaBase = function (props) {
         }
         return inputValue;
     };
-    return (react_1.default.createElement(inputtextarea_1.InputTextarea, __assign({ id: props.id, value: getInputValue(), onChange: onChange, onBlur: onBlur, readOnly: props.readOnly, maxLength: props.maxLength, style: props.style, rows: props.rows, cols: props.cols, autoResize: props.autoResize }, XUtils_1.XUtils.createErrorProps(props.error))));
+    return (react_1.default.createElement(inputtextarea_1.InputTextarea, __assign({ id: props.id, value: getInputValue(), onChange: onChange, onBlur: onBlur, readOnly: props.readOnly, maxLength: props.maxLength, style: props.style, rows: props.rows, cols: props.cols, autoResize: props.autoResize }, XUtils_1.XUtils.createTooltipOrErrorProps(props.error, props.tooltip), { placeholder: props.placeholder })));
 };
 exports.XInputTextareaBase = XInputTextareaBase;

package/lib/components/XInputTextareaDT.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { XInputDT, XInputDTProps } from "./XInputDT";
 export interface XInputTextareaDTProps extends XInputDTProps {
     rows: number;
@@ -8,5 +8,5 @@ export declare class XInputTextareaDT extends XInputDT<XInputTextareaDTProps> {
     constructor(props: XInputTextareaDTProps);
     getValue(): string | null;
     onValueChange(value: string | null): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/XLazyDataTable/XExportRowsDialog.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { ExportType, LazyDataTableQueryParam } from "../../serverApi/ExportImportParam";
+import React from "react";
 export interface XExportParams {
     rowCount: number;
     existsToManyAssoc: boolean;
@@ -17,4 +17,4 @@ export declare const XExportRowsDialog: (props: {
     dialogState: XExportRowsDialogState;
     hideDialog: () => void;
     exportTypeOptions?: ExportType[];
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XLazyDataTable/XLazyDataTable.d.ts

@@ -75,7 +75,7 @@ export interface XLazyDataTableProps {
     children: ReactChild[];
 }
 export declare const XLazyDataTable: {
-    (props: XLazyDataTableProps): JSX.Element;
+    (props: XLazyDataTableProps): React.JSX.Element;
     defaultProps: {
         paginator: boolean;
         rows: number;

package/lib/components/XLazyDataTable/XMultilineSwitch.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from "react";
 import { XMultilineRenderType } from "./XLazyDataTable";
 export declare const XMultilineSwitch: (props: {
     value: XMultilineRenderType;
     onChange: (value: XMultilineRenderType) => void;
     className?: string | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XLazyDataTable/XOcfDropdown.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from "react";
 import { XOptionalCustomFilter } from "./XLazyDataTable";
 export declare const XOcfDropdown: (props: {
     optionalCustomFilters: XOptionalCustomFilter[];
     value: XOptionalCustomFilter | undefined;
     onChange: (value: XOptionalCustomFilter | undefined) => void;
     className?: string | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XLoginDialog.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { XToken } from "./XToken";
 export declare const XLoginDialog: (props: {
     dialogOpened: boolean;
     setXToken: (xToken: XToken | null) => void;
     onHideDialog: (ok: boolean) => void;
     customUserService?: string | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XLoginForm.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 import { XToken } from "./XToken";
+import React from "react";
 export declare const XLoginForm: (props: {
     setXToken: (xToken: XToken | null) => void;
     onLogin?: (() => void) | undefined;
     customUserService?: string | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/lib/components/XMultiSelect.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { XFilterProp, XFormComponent, XFormComponentProps } from "./XFormComponent";
+import { XAssoc } from "../serverApi/XEntityMetadata";
+import { XObject } from "./XObject";
+import { DataTableSortMeta } from "primereact/datatable";
+export interface XMultiSelectProps extends XFormComponentProps<XObject> {
+    assocToMany: string;
+    assocManyToOne?: string;
+    displayField: string;
+    filter?: XFilterProp;
+    sortField?: string | DataTableSortMeta[];
+    fields?: string[];
+    width?: string;
+    scrollHeight?: string;
+}
+export declare class XMultiSelect extends XFormComponent<XObject, XMultiSelectProps> {
+    protected xAssocToMany: XAssoc;
+    protected xAssocManyToOne?: XAssoc;
+    constructor(props: XMultiSelectProps);
+    getField(): string;
+    isNotNull(): boolean;
+    getValue(): any[];
+    onChange(value: any[]): void;
+    render(): React.JSX.Element;
+}

package/lib/components/XMultiSelect.js

@@ -0,0 +1,97 @@
+"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.XMultiSelect = void 0;
+var react_1 = __importDefault(require("react"));
+var XFormComponent_1 = require("./XFormComponent");
+var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
+var XMultiSelectBase_1 = require("./XMultiSelectBase");
+var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
+var XMultiSelect = /** @class */ (function (_super) {
+    __extends(XMultiSelect, _super);
+    function XMultiSelect(props) {
+        var _this = _super.call(this, props) || this;
+        _this.xAssocToMany = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXAssocToManyByPath(XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(props.form.getEntity()), props.assocToMany);
+        if (props.assocManyToOne) {
+            _this.xAssocManyToOne = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXAssocToOneByPath(XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(_this.xAssocToMany.entityName), props.assocManyToOne);
+        }
+        if (props.assocManyToOne) {
+            props.form.addField(props.assocToMany + '.' + props.assocManyToOne + '.' + props.displayField);
+        }
+        else {
+            props.form.addField(props.assocToMany + '.' + props.displayField);
+        }
+        _this.onChange = _this.onChange.bind(_this);
+        return _this;
+    }
+    XMultiSelect.prototype.getField = function () {
+        return this.props.assocToMany;
+    };
+    XMultiSelect.prototype.isNotNull = function () {
+        return !this.xAssocToMany.isNullable;
+    };
+    XMultiSelect.prototype.getValue = function () {
+        var _this = this;
+        var optionRowList;
+        var rowList = this.getValueFromObject();
+        if (this.props.assocManyToOne) {
+            // assoc "assocToMany" contains link rows - these link rows have to be transformed to option rows
+            if (rowList !== null) {
+                optionRowList = rowList.map(function (linkRow) { return XUtilsCommon_1.XUtilsCommon.getValueByPath(linkRow, _this.props.assocManyToOne); });
+            }
+            else {
+                // this.props.form.state.object was not initialised yet
+                optionRowList = [];
+            }
+        }
+        else {
+            // assoc "assocToMany" contains option rows - no transformation needed
+            optionRowList = rowList !== null && rowList !== void 0 ? rowList : [];
+        }
+        return optionRowList;
+    };
+    XMultiSelect.prototype.onChange = function (value) {
+        var _this = this;
+        // value coming from XMultiSelectBase is list of selected option rows
+        var rowList;
+        if (this.props.assocManyToOne) {
+            // assoc "assocToMany" expects link rows - we wrap options row into link rows, id is left undefined,
+            // during save will be all old links deleted and these new links will be inserted (because id is undefined)
+            rowList = value.map(function (optionRow) {
+                var linkRow = {};
+                linkRow[_this.props.assocManyToOne] = optionRow;
+                return linkRow;
+            });
+        }
+        else {
+            // assoc "assocToMany" expects option rows - no transformation needed
+            rowList = value;
+        }
+        this.onValueChangeBase(rowList, this.props.onChange);
+    };
+    XMultiSelect.prototype.render = function () {
+        var _this = this;
+        return (react_1.default.createElement("div", { className: "field grid" },
+            react_1.default.createElement("label", { htmlFor: this.props.assocToMany, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
+            react_1.default.createElement(XMultiSelectBase_1.XMultiSelectBase, { value: this.getValue(), onChange: this.onChange, displayField: this.props.displayField, optionsQuery: { entity: this.xAssocManyToOne ? this.xAssocManyToOne.entityName : this.xAssocToMany.entityName, filter: function () { return _this.getFilterBase(_this.props.filter); }, sortField: this.props.sortField, fields: this.props.fields }, width: this.props.width, scrollHeight: this.props.scrollHeight, readOnly: this.isReadOnly(), error: this.getError() })));
+    };
+    return XMultiSelect;
+}(XFormComponent_1.XFormComponent));
+exports.XMultiSelect = XMultiSelect;

package/lib/components/XMultiSelectBase.d.ts

@@ -0,0 +1,27 @@
+import React, { Component } from "react";
+import { XQuery } from "./XUtils";
+import { DataTableSortMeta } from "primereact/datatable";
+import { XDropdownForEntityProps } from "./XDropdownForEntity";
+export interface XMultiSelectBaseProps {
+    value: any[];
+    onChange: (value: any[]) => void;
+    optionsQuery?: XQuery;
+    displayField: string;
+    maxSelectedLabels?: number;
+    width?: string;
+    scrollHeight?: string;
+    readOnly?: boolean;
+    error?: string;
+}
+export declare class XMultiSelectBase extends Component<XMultiSelectBaseProps> {
+    static defaultProps: {};
+    protected idField: string;
+    state: {
+        options: any[];
+    };
+    constructor(props: XDropdownForEntityProps);
+    componentDidMount(): void;
+    loadOptions(): Promise<void>;
+    getSortField(): string | DataTableSortMeta[] | undefined;
+    render(): React.JSX.Element;
+}

package/lib/components/XMultiSelectBase.js

@@ -0,0 +1,145 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __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 };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XMultiSelectBase = void 0;
+var react_1 = __importStar(require("react"));
+var XUtils_1 = require("./XUtils");
+var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
+var multiselect_1 = require("primereact/multiselect");
+var XMultiSelectBase = /** @class */ (function (_super) {
+    __extends(XMultiSelectBase, _super);
+    function XMultiSelectBase(props) {
+        var _this = _super.call(this, props) || this;
+        if (!_this.props.optionsQuery) {
+            throw "XMultiSelectBase.optionsQuery: unexpected error - prop optionsQuery is undefined";
+        }
+        _this.idField = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(_this.props.optionsQuery.entity).idField;
+        _this.state = {
+            options: []
+        };
+        return _this;
+    }
+    XMultiSelectBase.prototype.componentDidMount = function () {
+        this.loadOptions();
+    };
+    XMultiSelectBase.prototype.loadOptions = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var options;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!this.props.optionsQuery) {
+                            throw "XMultiSelectBase.optionsQuery: unexpected error - prop optionsQuery is undefined";
+                        }
+                        return [4 /*yield*/, XUtils_1.XUtils.fetchRows(this.props.optionsQuery.entity, XUtils_1.XUtils.evalFilter(this.props.optionsQuery.filter), this.getSortField(), this.props.optionsQuery.fields)];
+                    case 1:
+                        options = _a.sent();
+                        this.setState({ options: options });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    XMultiSelectBase.prototype.getSortField = function () {
+        var sortField = this.props.optionsQuery.sortField;
+        if (!sortField) {
+            // ako default pouzivame displayField
+            sortField = this.props.displayField;
+        }
+        return sortField;
+    };
+    XMultiSelectBase.prototype.render = function () {
+        var _this = this;
+        // propertiesy na Dropdown-e: readOnly vyseduje, disabled znemoznuje vyber polozky
+        return (react_1.default.createElement(multiselect_1.MultiSelect, __assign({ options: this.state.options, optionLabel: this.props.displayField, dataKey: this.idField, maxSelectedLabels: this.props.maxSelectedLabels, display: "chip", value: this.props.value, onChange: function (e) { return _this.props.onChange(e.value); }, readOnly: this.props.readOnly, disabled: this.props.readOnly }, XUtils_1.XUtils.createTooltipOrErrorProps(this.props.error))));
+    };
+    XMultiSelectBase.defaultProps = {
+    //scrollHeight: '15rem'   // primereact has 200px
+    };
+    return XMultiSelectBase;
+}(react_1.Component));
+exports.XMultiSelectBase = XMultiSelectBase;