@michalrakus/x-react-web-lib 1.32.3 → 1.32.5

package/lib/components/XButton.d.ts

@@ -6,4 +6,5 @@ export declare const XButton: (props: {
     icon?: IconType<ButtonProps>;
     onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     disabled?: boolean | undefined;
+    style?: React.CSSProperties | undefined;
 }) => React.JSX.Element;

package/lib/components/XButton.js

@@ -8,6 +8,6 @@ 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" (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" }));
+    return (react_1.default.createElement(button_1.Button, { label: props.label, icon: props.icon, onClick: props.onClick, disabled: props.disabled, className: "m-1", style: props.style }));
 };
 exports.XButton = XButton;

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/XFormBase.d.ts

@@ -31,6 +31,7 @@ export declare abstract class XFormBase extends Component<XFormProps> {
         assoc: string;
         sortField: string;
     }>;
+    tabViewUsed: boolean;
     constructor(props: XFormProps);
     componentDidMount(): Promise<void>;
     getEntity(): string;
@@ -38,6 +39,8 @@ export declare abstract class XFormBase extends Component<XFormProps> {
     getObject(): any;
     isAddRow(): boolean;
     isInDialog(): boolean;
+    isTabViewUsed(): boolean;
+    setTabViewUsed(tabViewUsed: boolean): void;
     onFieldChange(field: string, value: any, error?: string | undefined, onChange?: XFieldOnChange, assocObjectChange?: OperationType): void;
     onTableFieldChange(rowData: any, field: string, value: any, error?: string | undefined, onChange?: XTableFieldOnChange, assocObjectChange?: OperationType): void;
     /**

package/lib/components/XFormBase.js

@@ -141,6 +141,7 @@ var XFormBase = /** @class */ (function (_super) {
         _this.xFormDataTableList = [];
         _this.assocToValidateList = [];
         _this.assocToSortList = [];
+        _this.tabViewUsed = false; // default
         _this.onClickSave = _this.onClickSave.bind(_this);
         _this.onClickCancel = _this.onClickCancel.bind(_this);
         return _this;
@@ -236,6 +237,13 @@ var XFormBase = /** @class */ (function (_super) {
     XFormBase.prototype.isInDialog = function () {
         return this.props.onSaveOrCancel !== undefined;
     };
+    // helper method
+    XFormBase.prototype.isTabViewUsed = function () {
+        return this.tabViewUsed;
+    };
+    XFormBase.prototype.setTabViewUsed = function (tabViewUsed) {
+        this.tabViewUsed = tabViewUsed;
+    };
     XFormBase.prototype.onFieldChange = function (field, value, error, onChange, assocObjectChange) {
         // field moze byt aj na asociovanom objekte (field length > 1, napr.: <assocX>.<fieldY>)
         // v takom pripade sa do errorMap zapise ako key cely field <assocX>.<fieldY>

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;
@@ -559,7 +559,12 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             if (this.props.scrollWidth !== "none") {
                 scrollWidth = this.props.scrollWidth;
                 if (scrollWidth === "viewport") {
-                    scrollWidth = "calc(100vw - ".concat(XUtils_1.XUtils.isMobile() ? 1.2 : 2.2, "rem)"); // desktop - povodne bolo 1.4rem (20px okraje) namiesto 2.2 ale pri vela stlpcoch vznikal horizontalny scrollbar
+                    var marginsWidth = XUtils_1.XUtils.isMobile() ? 1.2 : 2.2; // desktop - povodne bolo 1.4rem (20px okraje) namiesto 2.2 ale pri vela stlpcoch vznikal horizontalny scrollbar
+                    // mobil - padding 0.5rem body element, ale este bola tabulka moc siroka, tak sme dali 1.2
+                    if (this.props.form.isTabViewUsed()) {
+                        marginsWidth += 1; // TabPanel has padding 0.5rem (in css file) -> 1rem both margins
+                    }
+                    scrollWidth = "calc(100vw - ".concat(marginsWidth, "rem)");
                 }
             }
             if (this.props.scrollHeight !== "none") {

package/lib/components/XInputTextarea.d.ts

@@ -10,9 +10,9 @@ export interface XInputTextareaProps extends XInputProps<string> {
 export declare class XInputTextarea extends XInput<string, XInputTextareaProps> {
     static defaultProps: {
         cols: string;
-        labelOnTop: boolean;
     };
     xInputTextareaBaseRef: any;
+    labelOnTop: boolean;
     constructor(props: XInputTextareaProps);
     getValue(): string | null;
     onValueChange(value: string | null): void;

package/lib/components/XInputTextarea.js

@@ -29,6 +29,12 @@ var XInputTextarea = /** @class */ (function (_super) {
     function XInputTextarea(props) {
         var _this = _super.call(this, props) || this;
         _this.xInputTextareaBaseRef = react_1.default.createRef();
+        if (props.labelOnTop !== undefined) {
+            _this.labelOnTop = props.labelOnTop;
+        }
+        else {
+            _this.labelOnTop = XUtils_1.XUtils.isMobile();
+        }
         _this.onValueChange = _this.onValueChange.bind(_this);
         return _this;
     }
@@ -40,7 +46,7 @@ var XInputTextarea = /** @class */ (function (_super) {
     };
     XInputTextarea.prototype.getLabelStyle = function () {
         var _a;
-        return this.props.labelOnTop ? ((_a = this.props.labelStyle) !== null && _a !== void 0 ? _a : {}) : _super.prototype.getLabelStyle.call(this);
+        return this.labelOnTop ? ((_a = this.props.labelStyle) !== null && _a !== void 0 ? _a : {}) : _super.prototype.getLabelStyle.call(this);
     };
     // api method - can be called through "ref" from parent if needed to adjust the height of the input textarea according to the (changed) content
     XInputTextarea.prototype.autoResize = function () {
@@ -59,7 +65,7 @@ var XInputTextarea = /** @class */ (function (_super) {
             // pridame width:100%
             //fieldStyle = {width: '100%'};
             var widthValue = void 0;
-            if (this.props.labelOnTop) {
+            if (this.labelOnTop) {
                 widthValue = '100%';
             }
             else {
@@ -89,16 +95,15 @@ var XInputTextarea = /** @class */ (function (_super) {
             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', style: fieldStyle },
-            react_1.default.createElement("label", { id: labelElemId, htmlFor: this.props.field, className: !this.props.labelOnTop ? 'col-fixed' : undefined, style: labelStyle }, this.getLabel()),
+        return (react_1.default.createElement("div", { className: !this.labelOnTop ? 'field grid' : 'field grid x-inputtextarea-label-on-top', style: fieldStyle },
+            react_1.default.createElement("label", { id: labelElemId, htmlFor: this.props.field, className: !this.labelOnTop ? 'col-fixed' : undefined, style: labelStyle }, 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, { ref: this.xInputTextareaBaseRef, 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 = {
-        cols: "full",
-        labelOnTop: false
+        cols: "full"
     };
     return XInputTextarea;
 }(XInput_1.XInput));

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";
@@ -14,6 +14,7 @@ export interface XAppButtonForRow {
     icon?: IconType<ButtonProps>;
     label: string;
     onClick: (selectedRow: any) => void;
+    style?: React.CSSProperties;
 }
 export interface XOptionalCustomFilter {
     label: string;
@@ -40,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";
@@ -67,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
@@ -903,7 +940,8 @@ var XLazyDataTable = function (props) {
         if (props.scrollWidth !== "none") {
             scrollWidth = props.scrollWidth;
             if (scrollWidth === "viewport") {
-                scrollWidth = "calc(100vw - ".concat(isMobile ? 1.2 : 2.2, "rem)"); // desktop - povodne bolo 1.4rem (20px okraje) namiesto 2.2 ale pri vela stlpcoch vznikal horizontalny scrollbar
+                scrollWidth = "calc(100vw - ".concat(isMobile ? 1 : 2.2, "rem)"); // desktop - povodne bolo 1.4rem (20px okraje) namiesto 2.2 ale pri vela stlpcoch vznikal horizontalny scrollbar
+                // mobil - padding 0.5rem body element
             }
         }
         if (props.scrollHeight !== "none") {
@@ -1220,16 +1258,17 @@ 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,
             props.removeRow !== undefined && props.removeRow !== false && props.searchBrowseParams === undefined ? react_1.default.createElement(XButton_1.XButton, { key: "removeRow", icon: "pi pi-times", label: (0, XLocale_1.xLocaleOption)('removeRow'), onClick: onClickRemoveRow }) : null,
             exportRows ? react_1.default.createElement(XButton_1.XButton, { key: "exportRows", icon: "pi pi-file-export", label: (0, XLocale_1.xLocaleOption)('exportRows'), onClick: onClickExport }) : null,
-            props.appButtonsForRow ? props.appButtonsForRow.map(function (xAppButton) { return react_1.default.createElement(XButton_1.XButton, { key: xAppButton.key, icon: xAppButton.icon, label: xAppButton.label, onClick: function () { return onClickAppButtonForRow(xAppButton.onClick); } }); }) : null,
+            props.appButtonsForRow ? props.appButtonsForRow.map(function (xAppButton) { return react_1.default.createElement(XButton_1.XButton, { key: xAppButton.key, icon: xAppButton.icon, label: xAppButton.label, onClick: function () { return onClickAppButtonForRow(xAppButton.onClick); }, style: xAppButton.style }); }) : null,
             props.appButtons,
             props.searchBrowseParams !== undefined ? react_1.default.createElement(XButton_1.XButton, { key: "choose", label: (0, XLocale_1.xLocaleOption)('chooseRow'), onClick: onClickChoose }) : null,
             exportRows ? react_1.default.createElement(XExportRowsDialog_1.XExportRowsDialog, { key: "exportRowsDialog", dialogState: exportRowsDialogState, hideDialog: function () { return setExportRowsDialogState({ dialogOpened: false }); } }) : 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.3",
+  "version": "1.32.5",
   "description": "",
   "scripts": {
     "clean": "rimraf lib",