@michalrakus/x-react-web-lib 1.32.4 → 1.32.6

package/lib/components/XCalendar.js

@@ -76,7 +76,13 @@ var XCalendar = function (props) {
     var onSelect = function (e) {
         // musime tu zavolat props.onChange lebo event select zavola aj onChange ale my umyselne v onChange nevolame props.onChange
         // (cakame na event blur, ktory po selecte nepride)
-        props.onChange(e.value); // vzdycky Date
+        //props.onChange(e.value as any); // vzdycky Date
+        // <- bolo takto ale vytvaralo Tue Feb 04 2025 00:00:00 GMT+0100 (Central European Standard Time) a cez onBlur (a ked prisiel string z DB)
+        //               tak vytvaralo Tue Feb 04 2025 01:00:00 GMT+0100 (Central European Standard Time)
+        //               a potom nefungoval XUtilsCommon.dateEquals (cez date1.getTime() === date2.getTime())
+        // aby bol onSelect aj onBlur jednotne, tak dame:
+        var value = (0, XUtilsConversions_1.dateFromUI)((0, XUtilsConversions_1.dateAsUI)(e.value, props.scale), props.scale); // e.value je vzdy Date
+        props.onChange(value !== null && value !== void 0 ? value : null);
         // pre poriadok resetneme stav
         setInputChanged(false);
         setInputValueState(undefined);

package/lib/components/XEditorBase.js

@@ -49,11 +49,59 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XEditorBase = void 0;
 var react_1 = __importStar(require("react"));
 var XUtils_1 = require("./XUtils");
 var editor_1 = require("primereact/editor");
+var quill_1 = __importDefault(require("quill"));
+// bez tohto kodu size options nefunguju
+var Size = quill_1.default.import('attributors/style/size');
+Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '24px', '32px', '48px'];
+quill_1.default.register(Size, true);
+var Font = quill_1.default.import('formats/font');
+Font.whitelist = [
+    'sans-serif', 'serif', 'monospace',
+    'times-new-roman', 'comic-sans',
+];
+quill_1.default.register(Font, true);
+var headerTemplate = function () {
+    // poznamka - k tomuto layout-u sa este viazu css styly umiestnene v App.css
+    var styleMarginRight = { marginRight: '0.7rem' };
+    return (react_1.default.createElement("span", { className: "ql-formats" },
+        react_1.default.createElement("select", { className: "ql-font", "aria-label": "Font" },
+            react_1.default.createElement("option", { value: "sans-serif", selected: true }, "Sans-Serif"),
+            react_1.default.createElement("option", { value: "serif" }, "Serif"),
+            react_1.default.createElement("option", { value: "monospace" }, "Monospace"),
+            react_1.default.createElement("option", { value: "times-new-roman" }, "TimesNewRoman"),
+            react_1.default.createElement("option", { value: "comic-sans" }, "Comic Sans")),
+        react_1.default.createElement("select", { className: "ql-size", "aria-label": "Font Size", style: styleMarginRight },
+            react_1.default.createElement("option", { value: "10px" }, "10"),
+            react_1.default.createElement("option", { value: "12px", selected: true }, "12"),
+            react_1.default.createElement("option", { value: "14px" }, "14"),
+            react_1.default.createElement("option", { value: "16px" }, "16"),
+            react_1.default.createElement("option", { value: "18px" }, "18"),
+            react_1.default.createElement("option", { value: "24px" }, "24"),
+            react_1.default.createElement("option", { value: "32px" }, "32"),
+            react_1.default.createElement("option", { value: "48px" }, "48")),
+        react_1.default.createElement("button", { className: "ql-bold", "aria-label": "Bold" }),
+        react_1.default.createElement("button", { className: "ql-italic", "aria-label": "Italic" }),
+        react_1.default.createElement("button", { className: "ql-underline", "aria-label": "Underline" }),
+        react_1.default.createElement("button", { className: "ql-strike", "aria-label": "Strikethrough", style: styleMarginRight }),
+        react_1.default.createElement("select", { className: "ql-color", "aria-label": "Text Color" }),
+        react_1.default.createElement("select", { className: "ql-background", "aria-label": "Background Color", style: styleMarginRight }),
+        react_1.default.createElement("select", { className: "ql-align", "aria-label": "Text Alignment", style: styleMarginRight },
+            react_1.default.createElement("option", { selected: true }),
+            react_1.default.createElement("option", { value: "center" }),
+            react_1.default.createElement("option", { value: "right" })),
+        react_1.default.createElement("button", { className: "ql-list", value: "ordered", "aria-label": "Ordered List" }),
+        react_1.default.createElement("button", { className: "ql-list", value: "bullet", "aria-label": "Bullet List" }),
+        react_1.default.createElement("button", { className: "ql-indent", value: "-1", "aria-label": "Indent to the left" }),
+        react_1.default.createElement("button", { className: "ql-indent", value: "+1", "aria-label": "Indent to the right" })));
+};
 // koli optimalizacii - typovany text si zapisuje do svojej stavovej premennej a onChange zavola az z onBlur
 // pri velkych formularoch je totiz volanie zmeny stavu this.setState({object: this.state.object, errorMap: this.state.errorMap}); pomale
 var XEditorBase = function (props) {
@@ -86,6 +134,6 @@ var XEditorBase = function (props) {
         }
         return htmlValue !== null ? htmlValue : undefined; // value v Editor nechce null, chce undefined
     };
-    return (react_1.default.createElement(editor_1.Editor, __assign({ id: props.id, value: getValue(), onTextChange: onTextChange, onBlur: onBlur, readOnly: props.readOnly, style: props.style }, XUtils_1.XUtils.createTooltipOrErrorProps(props.error))));
+    return (react_1.default.createElement(editor_1.Editor, __assign({ id: props.id, value: getValue(), onTextChange: onTextChange, onBlur: onBlur, readOnly: props.readOnly, pt: { root: { style: props.style } } }, XUtils_1.XUtils.createTooltipOrErrorProps(props.error), { headerTemplate: headerTemplate() })));
 };
 exports.XEditorBase = XEditorBase;

package/lib/components/XFormDataTable2.js

@@ -408,11 +408,11 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         }
         else if (columnProps.type === "searchButton") {
             var columnPropsSearchButton = columnProps;
-            body = react_1.default.createElement(XSearchButtonDT_1.XSearchButtonDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsSearchButton.assocField, displayField: columnPropsSearchButton.displayField, searchBrowse: columnPropsSearchButton.searchBrowse, rowData: rowData, readOnly: columnPropsSearchButton.readOnly });
+            body = react_1.default.createElement(XSearchButtonDT_1.XSearchButtonDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsSearchButton.assocField, displayField: columnPropsSearchButton.displayField, searchBrowse: columnPropsSearchButton.searchBrowse, rowData: rowData, readOnly: readOnly });
         }
         else if (columnProps.type === "textarea") {
             var columnPropsTextarea = columnProps;
-            body = react_1.default.createElement(XInputTextareaDT_1.XInputTextareaDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsTextarea.field, rows: columnPropsTextarea.rows, autoResize: columnPropsTextarea.autoResize, rowData: rowData, readOnly: columnPropsTextarea.readOnly });
+            body = react_1.default.createElement(XInputTextareaDT_1.XInputTextareaDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsTextarea.field, rows: columnPropsTextarea.rows, autoResize: columnPropsTextarea.autoResize, rowData: rowData, readOnly: readOnly });
         }
         else {
             throw "Unknown prop type = " + columnProps.type;

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

@@ -1,5 +1,5 @@
 import React, { ReactChild } from 'react';
-import { DataTableFilterMeta, DataTableFilterMetaData, DataTableOperatorFilterMetaData, DataTableSortMeta } from 'primereact/datatable';
+import { DataTableFilterMeta, DataTableFilterMetaData, DataTableOperatorFilterMetaData, DataTableRowExpansionTemplate, DataTableSortMeta } from 'primereact/datatable';
 import { ColumnBodyOptions, ColumnFilterElementTemplateOptions } from 'primereact/column';
 import { XViewStatusOrBoolean } from "../XUtils";
 import { XSearchBrowseParams } from "../XSearchBrowseParams";
@@ -41,6 +41,8 @@ export interface XLazyDataTableProps {
     entity: string;
     label?: string;
     dataKey?: string;
+    rowExpansionTemplate?: (row: any, options: DataTableRowExpansionTemplate) => React.ReactNode;
+    showExpandedRow?: (row: any, multilineSwitchValue: XMultilineRenderType) => boolean;
     paginator: boolean;
     rows: number;
     filterDisplay: "menu" | "row";
@@ -68,6 +70,8 @@ export interface XLazyDataTableProps {
     multilineSwitch: boolean;
     multilineSwitchInitValue: XMultilineRenderType;
     multilineSwitchFewLinesCount: number;
+    multilineSwitchValue?: [XMultilineRenderType, React.Dispatch<React.SetStateAction<XMultilineRenderType>>];
+    headerElementRight?: React.ReactNode;
     searchBrowseParams?: XSearchBrowseParams;
     width?: string;
     rowClassName?: (data: any) => object | string | undefined;

package/lib/components/XLazyDataTable/XLazyDataTable.js

@@ -135,7 +135,7 @@ var XFieldSetBase_1 = require("../XFieldSet/XFieldSetBase");
 var XAutoCompleteBase_1 = require("../XAutoCompleteBase");
 var XInputTextBase_1 = require("../XInputTextBase");
 var XLazyDataTable = function (props) {
-    var _a;
+    var _a, _b;
     // must be here, is used in createInitFilters()
     var xEntity = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(props.entity);
     var createAggregateItems = function () {
@@ -263,11 +263,12 @@ var XLazyDataTable = function (props) {
     // ak mame fieldSet stlpce (stlpce ktore maju zadany fieldSetId a zobrazuju hodnoty podla fieldSet-u),
     // tak sem nacitame mapy umoznujuce ziskanie labelov zakliknutych field-ov
     // poznamka: uz by sa zislo mat vytvorene objekty (instancie) pre stlpce a do nich zapisovat pripadny XFieldSetMap, filter (teraz je vo "filters")
-    var _b = __read((0, react_1.useState)({}), 2), xFieldSetMaps = _b[0], setXFieldSetMaps = _b[1];
-    var _c = __read((0, react_1.useState)({ rowList: [], totalRecords: 0, aggregateValues: [] }), 2), value = _c[0], setValue = _c[1];
-    var _d = __read((0, react_1.useState)(false), 2), loading = _d[0], setLoading = _d[1];
-    var _e = __read((0, react_1.useState)(0), 2), first = _e[0], setFirst = _e[1];
-    var _f = __read((0, react_1.useState)(props.paginator ? props.rows : undefined), 2), rows = _f[0], setRows = _f[1];
+    var _c = __read((0, react_1.useState)({}), 2), xFieldSetMaps = _c[0], setXFieldSetMaps = _c[1];
+    var _d = __read((0, react_1.useState)({ rowList: [], totalRecords: 0, aggregateValues: [] }), 2), value = _d[0], setValue = _d[1];
+    var _e = __read((0, react_1.useState)(undefined), 2), expandedRows = _e[0], setExpandedRows = _e[1];
+    var _f = __read((0, react_1.useState)(false), 2), loading = _f[0], setLoading = _f[1];
+    var _g = __read((0, react_1.useState)(0), 2), first = _g[0], setFirst = _g[1];
+    var _h = __read((0, react_1.useState)(props.paginator ? props.rows : undefined), 2), rows = _h[0], setRows = _h[1];
     var filtersInit = createInitFilters();
     if (props.filters) {
         filtersInit = __assign(__assign({}, filtersInit), props.filters); // items from props.filters will replace existing items in filtersInit
@@ -282,19 +283,19 @@ var XLazyDataTable = function (props) {
             customFilterItems = XUtilsCommon_1.XUtilsCommon.filterAnd(customFilterItems, XUtils_1.XUtils.evalFilter(props.searchBrowseParams.customFilter));
         }
     }
-    var _g = __read((0, react_1.useState)(filtersInit), 2), filters = _g[0], setFilters = _g[1]; // filtrovanie na "controlled manner" (moze sa sem nainicializovat nejaka hodnota)
+    var _j = __read((0, react_1.useState)(filtersInit), 2), filters = _j[0], setFilters = _j[1]; // filtrovanie na "controlled manner" (moze sa sem nainicializovat nejaka hodnota)
     var initFtsInputValue = props.fullTextSearch ? createInitFtsInputValue() : undefined;
-    var _h = __read((0, react_1.useState)(initFtsInputValue), 2), ftsInputValue = _h[0], setFtsInputValue = _h[1];
-    var _j = __read((0, react_1.useState)(undefined), 2), optionalCustomFilter = _j[0], setOptionalCustomFilter = _j[1];
-    var _k = __read((0, react_1.useState)(props.multilineSwitchInitValue), 2), multilineSwitchValue = _k[0], setMultilineSwitchValue = _k[1];
-    var _l = __read((0, react_1.useState)(XUtilsCommon_1.XUtilsCommon.createMultiSortMeta(props.sortField)), 2), multiSortMeta = _l[0], setMultiSortMeta = _l[1];
-    var _m = __read((0, react_1.useState)(null), 2), selectedRow = _m[0], setSelectedRow = _m[1];
-    var _o = __read((_a = props.dataLoadedState) !== null && _a !== void 0 ? _a : (0, react_1.useState)(false), 2), dataLoaded = _o[0], setDataLoaded = _o[1]; // priznak kde si zapiseme, ci uz sme nacitali data
-    var _p = __read((0, react_1.useState)({ dialogOpened: false }), 2), exportRowsDialogState = _p[0], setExportRowsDialogState = _p[1];
+    var _k = __read((0, react_1.useState)(initFtsInputValue), 2), ftsInputValue = _k[0], setFtsInputValue = _k[1];
+    var _l = __read((0, react_1.useState)(undefined), 2), optionalCustomFilter = _l[0], setOptionalCustomFilter = _l[1];
+    var _m = __read((_a = props.multilineSwitchValue) !== null && _a !== void 0 ? _a : (0, react_1.useState)(props.multilineSwitchInitValue), 2), multilineSwitchValue = _m[0], setMultilineSwitchValue = _m[1];
+    var _o = __read((0, react_1.useState)(XUtilsCommon_1.XUtilsCommon.createMultiSortMeta(props.sortField)), 2), multiSortMeta = _o[0], setMultiSortMeta = _o[1];
+    var _p = __read((0, react_1.useState)(null), 2), selectedRow = _p[0], setSelectedRow = _p[1];
+    var _q = __read((_b = props.dataLoadedState) !== null && _b !== void 0 ? _b : (0, react_1.useState)(false), 2), dataLoaded = _q[0], setDataLoaded = _q[1]; // priznak kde si zapiseme, ci uz sme nacitali data
+    var _r = __read((0, react_1.useState)({ dialogOpened: false }), 2), exportRowsDialogState = _r[0], setExportRowsDialogState = _r[1];
     //const [exportRowsDialogRowCount, setExportRowsDialogRowCount] = useState<number>(); // param pre dialog
-    var _q = __read((0, react_1.useState)(filtersInit), 2), filtersAfterFiltering = _q[0], setFiltersAfterFiltering = _q[1]; // sem si odkladame stav filtra po kliknuti na button Filter (chceme exportovat presne to co vidno vyfiltrovane)
-    var _r = __read((0, react_1.useState)(initFtsInputValue), 2), ftsInputValueAfterFiltering = _r[0], setFtsInputValueAfterFiltering = _r[1]; // tak isto ako filtersAfterFiltering
-    var _s = __read((0, react_1.useState)(undefined), 2), optionalCustomFilterAfterFiltering = _s[0], setOptionalCustomFilterAfterFiltering = _s[1]; // tak isto ako filtersAfterFiltering
+    var _s = __read((0, react_1.useState)(filtersInit), 2), filtersAfterFiltering = _s[0], setFiltersAfterFiltering = _s[1]; // sem si odkladame stav filtra po kliknuti na button Filter (chceme exportovat presne to co vidno vyfiltrovane)
+    var _t = __read((0, react_1.useState)(initFtsInputValue), 2), ftsInputValueAfterFiltering = _t[0], setFtsInputValueAfterFiltering = _t[1]; // tak isto ako filtersAfterFiltering
+    var _u = __read((0, react_1.useState)(undefined), 2), optionalCustomFilterAfterFiltering = _u[0], setOptionalCustomFilterAfterFiltering = _u[1]; // tak isto ako filtersAfterFiltering
     // parameter [] zabezpeci ze sa metoda zavola len po prvom renderingu (a nie po kazdej zmene stavu (zavolani setNieco()))
     (0, react_1.useEffect)(function () {
         // jednoduchy sposob - nepouzivame parameter props.displayed a priznak dataLoaded
@@ -449,6 +450,7 @@ var XLazyDataTable = function (props) {
                 case 1:
                     findResult = _a.sent();
                     setValue(findResult);
+                    setupExpandedRows(findResult, multilineSwitchValue);
                     setLoading(false);
                     // odlozime si filter hodnoty pre pripadny export - deep cloning vyzera ze netreba
                     setFiltersAfterFiltering(filters);
@@ -458,6 +460,34 @@ var XLazyDataTable = function (props) {
             }
         });
     }); };
+    var setupExpandedRows = function (findResult, multilineSwitchValue) {
+        var e_4, _a;
+        if (props.rowExpansionTemplate) {
+            var expandedRowsLocal = {};
+            if (findResult.rowList) {
+                try {
+                    for (var _b = __values(findResult.rowList), _c = _b.next(); !_c.done; _c = _b.next()) {
+                        var row = _c.value;
+                        var showExpandedRow = true; // default
+                        if (props.showExpandedRow) {
+                            showExpandedRow = props.showExpandedRow(row, multilineSwitchValue);
+                        }
+                        if (showExpandedRow) {
+                            expandedRowsLocal["".concat(row[dataKey])] = true;
+                        }
+                    }
+                }
+                catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                finally {
+                    try {
+                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    }
+                    finally { if (e_4) throw e_4.error; }
+                }
+            }
+            setExpandedRows(expandedRowsLocal);
+        }
+    };
     var findByFilter = function (findParam) { return __awaiter(void 0, void 0, void 0, function () {
         var findResult;
         return __generator(this, function (_a) {
@@ -488,7 +518,7 @@ var XLazyDataTable = function (props) {
     var getFields = function (addPropsFields) {
         // krasne zobrazi cely objekt!
         //console.log(dataTableEl.current);
-        var e_4, _a;
+        var e_5, _a;
         var fields = [];
         var columns = dataTableEl.current.props.children;
         try {
@@ -497,12 +527,12 @@ var XLazyDataTable = function (props) {
                 fields.push(column.props.field);
             }
         }
-        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        catch (e_5_1) { e_5 = { error: e_5_1 }; }
         finally {
             try {
                 if (columns_3_1 && !columns_3_1.done && (_a = columns_3.return)) _a.call(columns_3);
             }
-            finally { if (e_4) throw e_4.error; }
+            finally { if (e_5) throw e_5.error; }
         }
         if (addPropsFields) {
             if (props.fields) {
@@ -514,7 +544,7 @@ var XLazyDataTable = function (props) {
     var getHeaders = function () {
         // krasne zobrazi cely objekt!
         //console.log(dataTableEl.current);
-        var e_5, _a;
+        var e_6, _a;
         var headers = [];
         var columns = dataTableEl.current.props.children;
         try {
@@ -524,17 +554,17 @@ var XLazyDataTable = function (props) {
                 headers.push(column.props.header);
             }
         }
-        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+        catch (e_6_1) { e_6 = { error: e_6_1 }; }
         finally {
             try {
                 if (columns_4_1 && !columns_4_1.done && (_a = columns_4.return)) _a.call(columns_4);
             }
-            finally { if (e_5) throw e_5.error; }
+            finally { if (e_6) throw e_6.error; }
         }
         return headers;
     };
     var getWidths = function () {
-        var e_6, _a;
+        var e_7, _a;
         var _b;
         // vrati sirky stlpcov napr. ['7.75rem', '20rem', '8.5rem', '8.5rem', '6rem']
         // nevracia aktualne sirky stlpcov (po manualnom rozsireni) ale tie ktore boli nastavene/vypocitane v kode
@@ -546,17 +576,17 @@ var XLazyDataTable = function (props) {
                 widths.push((_b = column.props.headerStyle) === null || _b === void 0 ? void 0 : _b.width);
             }
         }
-        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+        catch (e_7_1) { e_7 = { error: e_7_1 }; }
         finally {
             try {
                 if (columns_5_1 && !columns_5_1.done && (_a = columns_5.return)) _a.call(columns_5);
             }
-            finally { if (e_6) throw e_6.error; }
+            finally { if (e_7) throw e_7.error; }
         }
         return widths;
     };
     var getFieldSetIds = function () {
-        var e_7, _a;
+        var e_8, _a;
         var fieldSetIds = [];
         // warning note: props.children are used to get props of XLazyColumn whereas dataTableEl.current.props.children are used to get props of Primereact DataTable
         var columns = props.children;
@@ -568,12 +598,12 @@ var XLazyDataTable = function (props) {
                 }
             }
         }
-        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+        catch (e_8_1) { e_8 = { error: e_8_1 }; }
         finally {
             try {
                 if (columns_6_1 && !columns_6_1.done && (_a = columns_6.return)) _a.call(columns_6);
             }
-            finally { if (e_7) throw e_7.error; }
+            finally { if (e_8) throw e_8.error; }
         }
         return fieldSetIds;
     };
@@ -589,11 +619,14 @@ var XLazyDataTable = function (props) {
     var onRowDoubleClick = function (event) {
         //console.log("zavolany onRowDoubleClick");
         //console.log(event.data);
+        onRowDoubleClickBase(event.data);
+    };
+    var onRowDoubleClickBase = function (row) {
         if (props.onEdit !== undefined && props.searchBrowseParams === undefined) {
-            props.onEdit(event.data);
+            props.onEdit(row);
         }
         else if (props.searchBrowseParams !== undefined) {
-            props.searchBrowseParams.onChoose(event.data);
+            props.searchBrowseParams.onChoose(row);
         }
     };
     var onClickAddRow = function () {
@@ -614,7 +647,7 @@ var XLazyDataTable = function (props) {
         }
     };
     var onClickRemoveRow = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var reread, e_8, e_9;
+        var reread, e_9, e_10;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -629,8 +662,8 @@ var XLazyDataTable = function (props) {
                     reread = _a.sent();
                     return [3 /*break*/, 4];
                 case 3:
-                    e_8 = _a.sent();
-                    XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('removeRowFailed'), e_8);
+                    e_9 = _a.sent();
+                    XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('removeRowFailed'), e_9);
                     return [3 /*break*/, 4];
                 case 4:
                     if (reread) {
@@ -652,8 +685,8 @@ var XLazyDataTable = function (props) {
                     _a.sent();
                     return [3 /*break*/, 9];
                 case 8:
-                    e_9 = _a.sent();
-                    XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('removeRowFailed'), e_9);
+                    e_10 = _a.sent();
+                    XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('removeRowFailed'), e_10);
                     return [3 /*break*/, 9];
                 case 9:
                     loadData();
@@ -861,7 +894,7 @@ var XLazyDataTable = function (props) {
         else if (xField.type === "jsonb" && fieldSetId) {
             // zatial sem dame; este by sme mohli dat hlbsie do convertValue/convertValueBase (aby fungovalo aj pre excel) ale tam je problem ze nemame k dispozicii "xFieldSetMaps"
             // poznamka: krajsie by bolo brat fieldSetId z xField ale to by sme museli vytvorit decorator na backend-e...
-            valueResult = XFieldSetBase_1.XFieldSetBase.xFieldSetValuesAsUI(value, xFieldSetMaps[fieldSetId]);
+            valueResult = react_1.default.createElement("div", { className: multilineSwitchValue === "fewLines" || multilineSwitchValue === "allLines" ? "x-multiline-content" : undefined }, XFieldSetBase_1.XFieldSetBase.xFieldSetValuesAsUI(value, xFieldSetMaps[fieldSetId]));
         }
         else {
             if (contentType === "html") {
@@ -895,6 +928,10 @@ var XLazyDataTable = function (props) {
         }
         return bodyValue;
     };
+    // in order that row expansion works like standard row, we wrap row expansion into div
+    var rowExpansionTemplate = function (row, options) {
+        return (react_1.default.createElement("div", { onClick: function () { return setSelectedRow(row); }, onDoubleClick: function () { return onRowDoubleClickBase(row); } }, props.rowExpansionTemplate(row, options)));
+    };
     // ak mame scrollWidth/scrollHeight = viewport (default), vyratame scrollWidth/scrollHeight tak aby tabulka "sadla" do okna (viewport-u)
     var isMobile = XUtils_1.XUtils.isMobile();
     var scrollWidth = undefined; // vypnute horizontalne scrollovanie
@@ -1221,10 +1258,11 @@ var XLazyDataTable = function (props) {
             props.showFilterButtons ? react_1.default.createElement(XButton_1.XButton, { key: "filter", icon: isMobile ? "pi pi-search" : undefined, label: !isMobile ? (0, XLocale_1.xLocaleOption)('filter') : undefined, onClick: onClickFilter }) : null,
             props.showFilterButtons ? react_1.default.createElement(XButton_1.XButton, { key: "clearFilter", icon: isMobile ? "pi pi-ban" : undefined, label: !isMobile ? (0, XLocale_1.xLocaleOption)('clearFilter') : undefined, onClick: onClickClearFilter }) : null,
             props.optionalCustomFilters ? react_1.default.createElement(XOcfDropdown_1.XOcfDropdown, { optionalCustomFilters: props.optionalCustomFilters, value: optionalCustomFilter, onChange: function (value) { return setOptionalCustomFilter(value); }, className: "m-1" }) : null,
-            props.multilineSwitch ? react_1.default.createElement(XMultilineSwitch_1.XMultilineSwitch, { value: multilineSwitchValue, onChange: function (value) { return setMultilineSwitchValue(value); }, className: "m-1" }) : null,
+            props.multilineSwitch ? react_1.default.createElement(XMultilineSwitch_1.XMultilineSwitch, { value: multilineSwitchValue, onChange: function (switchValue) { setMultilineSwitchValue(switchValue); setupExpandedRows(value, switchValue); }, className: "m-1" }) : null,
+            props.headerElementRight,
             props.label && !isMobile ? react_1.default.createElement("div", { className: "x-lazy-datatable-label-right-compensation" }) : null),
         react_1.default.createElement("div", { className: "flex justify-content-center" },
-            react_1.default.createElement(datatable_1.DataTable, { value: value.rowList, dataKey: dataKey, paginator: props.paginator, pageLinkSize: pageLinkSize, rows: rows, totalRecords: value.totalRecords, lazy: true, first: first, onPage: onPage, loading: loading, filterDisplay: props.filterDisplay, filters: filters, onFilter: onFilter, sortMode: "multiple", removableSort: true, multiSortMeta: multiSortMeta, onSort: onSort, selectionMode: "single", selection: selectedRow, onSelectionChange: onSelectionChange, onRowDoubleClick: onRowDoubleClick, rowClassName: props.rowClassName, ref: dataTableEl, className: "p-datatable-sm x-lazy-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, paginatorLeft: paginatorLeft, paginatorRight: paginatorRight, scrollable: props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
+            react_1.default.createElement(datatable_1.DataTable, { value: value.rowList, dataKey: dataKey, expandedRows: expandedRows, rowExpansionTemplate: props.rowExpansionTemplate ? rowExpansionTemplate : undefined, paginator: props.paginator, pageLinkSize: pageLinkSize, rows: rows, totalRecords: value.totalRecords, lazy: true, first: first, onPage: onPage, loading: loading, filterDisplay: props.filterDisplay, filters: filters, onFilter: onFilter, sortMode: "multiple", removableSort: true, multiSortMeta: multiSortMeta, onSort: onSort, selectionMode: "single", selection: selectedRow, onSelectionChange: onSelectionChange, onRowDoubleClick: onRowDoubleClick, rowClassName: props.rowClassName, ref: dataTableEl, className: "p-datatable-sm x-lazy-datatable", resizableColumns: true, columnResizeMode: "expand", tableStyle: tableStyle, paginatorLeft: paginatorLeft, paginatorRight: paginatorRight, scrollable: props.scrollable, scrollHeight: scrollHeight, style: style }, columnElemList)),
         react_1.default.createElement("div", { className: "flex justify-content-center" },
             props.onAddRow !== undefined && props.searchBrowseParams === undefined ? react_1.default.createElement(XButton_1.XButton, { key: "addRow", icon: "pi pi-plus", label: (0, XLocale_1.xLocaleOption)('addRow'), onClick: onClickAddRow }) : null,
             props.onEdit !== undefined && props.searchBrowseParams === undefined ? react_1.default.createElement(XButton_1.XButton, { key: "editRow", icon: "pi pi-pencil", label: (0, XLocale_1.xLocaleOption)('editRow'), onClick: onClickEdit }) : null,

package/lib/components/XUtils.d.ts

@@ -55,6 +55,8 @@ export declare class XUtils {
     static toPX(size: string | undefined): number | undefined;
     static toPX0(size: string | undefined): number;
     static getRemSize(): number;
+    static getViewWidth(): number;
+    static getViewHeight(): number;
     static processGridBreakpoints(breakpointExp: string): string | undefined;
     static processPropWidth(widthProp: string | undefined): string | undefined;
     static addCssPropIfNotExists(cssProps: React.CSSProperties, newCssProps: React.CSSProperties): void;

package/lib/components/XUtils.js

@@ -135,6 +135,14 @@ var XUtils = /** @class */ (function () {
         }
         return XUtils.remSize;
     };
+    // alternative to 100vw, if 100vw can not be used because of technical reasons
+    XUtils.getViewWidth = function () {
+        return Math.max(document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document.documentElement.offsetWidth, document.documentElement.clientWidth);
+    };
+    // alternative to 100vh, if 100vh can not be used because of technical reasons
+    XUtils.getViewHeight = function () {
+        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight);
+    };
     // param example: "3rem md:4rem xl:6rem"
     // (in general: "<exp1> sm:<exp2> md:<exp3> lg:<exp4> xl:<exp5>")
     // according to device width returns "exp(n)"

package/lib/serverApi/XUtilsCommon.js

@@ -485,6 +485,11 @@ var XUtilsCommon = /** @class */ (function () {
         }
         else if (date1 !== null && date2 !== null) {
             result = (date1.getTime() === date2.getTime());
+            // mali sme problem - funkcia dateFromModel() konvertovala string "2025-02-04" na Tue Feb 04 2025 01:00:00 GMT+0100 (Central European Standard Time)
+            // a XCalendar pri vykliknuti datumu vracal Tue Feb 04 2025 00:00:00 GMT+0100 (Central European Standard Time) -> opravili sme XCalendar
+            //result = date1.getFullYear() === date2.getFullYear()
+            //    && date1.getMonth() === date2.getMonth()
+            //    && date1.getDate() === date2.getDate();
         }
         return result;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michalrakus/x-react-web-lib",
-  "version": "1.32.4",
+  "version": "1.32.6",
   "description": "",
   "scripts": {
     "clean": "rimraf lib",
@@ -30,8 +30,8 @@
     "@types/jest": "^29.5.0",
     "@types/lodash": "^4.14.202",
     "@types/node": "^18.15.3",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
     "@types/react-transition-group": "^4.4.5",
     "gulp": "^4.0.2",
     "rimraf": "^4.4.0",
@@ -40,10 +40,10 @@
   "peerDependencies": {
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
-    "primereact": "~10.8.2",
-    "quill": "^2.0.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "primereact": "10.9.2",
+    "quill": "^2.0.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-transition-group": "^4.4.5"
   },
   "files": [