@zeedhi/common 1.109.0 → 1.110.0

package/dist/zd-common.esm.js

@@ -1,4 +1,4 @@
-import { AccessorManager, Event, KeyMap, MethodNotAssignedError, Metadata, Accessor, I18n, FormatterParserProvider, Validation, Mask, DatasourceFactory, Loader, Config, dayjs, Utils, DateHelper, Router, Messages, InstanceNotFoundError, ViewService, MemoryDatasource, URL as URL$1, Http, Cookie, VersionService } from '@zeedhi/core';
+import { AccessorManager, Event, KeyMap, MethodNotAssignedError, Metadata, Accessor, I18n, FormatterParserProvider, Validation, Mask, DatasourceFactory, Loader, Config, dayjs, Utils, DateHelper, Router, Messages, InstanceNotFoundError, ViewService, URL as URL$1, Http, Cookie, VersionService } from '@zeedhi/core';
 import merge from 'lodash.merge';
 import cloneDeep from 'lodash.clonedeep';
 import debounce from 'lodash.debounce';
@@ -5625,6 +5625,18 @@ class Column extends Component {
         super.onBeforeDestroy();
         (_a = this.lookupDatasource) === null || _a === void 0 ? void 0 : _a.destroy();
     }
+    /**
+     * Retrieves a row from lookup using its key
+     * @returns the row object when found, null when it is not found or empty
+     */
+    getLookupRow(value) {
+        const row = this.lookupData[value];
+        if (!row)
+            return null;
+        if (Object.keys(row).length === 0)
+            return null;
+        return row;
+    }
 }
 
 /**
@@ -5924,98 +5936,6 @@ class GridColumn extends Column {
         }
     }
 }
-FormatterParserProvider.registerFormatter('column_ZdSelect', ({ column, value, row, componentProps, }) => {
-    if (value === null || value === undefined)
-        return '';
-    const { dataText, formatterDataText, dataTextSeparator, dataValue, dataTextDiscrete, foreignColumns, } = componentProps;
-    let currentRow = row;
-    const dataTextColumns = Array.isArray(dataText) ? dataText : [dataText];
-    if (dataValue) {
-        const columns = Array.isArray(formatterDataText) ? formatterDataText : [formatterDataText];
-        if (foreignColumns) {
-            const loopkupRow = {};
-            dataTextColumns.forEach((item) => {
-                const dataTextName = typeof item === 'string' ? item : item.name;
-                loopkupRow[dataTextName] = currentRow[foreignColumns[dataTextName] || dataTextName];
-            });
-            loopkupRow[dataValue] = currentRow[column.name];
-            column.lookupData[currentRow[column.name]] = loopkupRow;
-        }
-        else if (!formatterDataText) {
-            currentRow = column.getLookupData(dataValue, value[dataValue] || value);
-        }
-        else if (columns.length === dataTextColumns.length) {
-            const loopkupRow = {};
-            columns.forEach((item, index) => {
-                const dataTextValue = dataTextColumns[index];
-                const dataTextName = typeof dataTextValue === 'string' ? dataTextValue : dataTextValue.name;
-                loopkupRow[dataTextName] = currentRow[typeof item === 'string' ? item : item.name];
-            });
-            loopkupRow[dataValue] = currentRow[column.name];
-            column.lookupData[currentRow[column.name]] = loopkupRow;
-        }
-    }
-    if (!Object.keys(currentRow).length)
-        return typeof value === 'object' ? '' : value;
-    let dataTextForeign = dataText;
-    if (dataText && foreignColumns) {
-        if (typeof dataText === 'string') {
-            dataTextForeign = foreignColumns[dataText] || dataText;
-        }
-        else {
-            dataTextForeign = dataTextColumns.map((item) => {
-                const itemName = typeof item === 'string' ? item : item.name;
-                return foreignColumns[itemName] || itemName;
-            });
-        }
-    }
-    const textColumn = dataTextDiscrete || formatterDataText || dataTextForeign;
-    if (!textColumn)
-        return value;
-    if (typeof textColumn === 'string') {
-        return currentRow[textColumn] || value;
-    }
-    const formatterFn = FormatterParserProvider.getFormatter('ZdSelect');
-    return formatterFn(currentRow, { dataText: textColumn, dataTextSeparator });
-});
-FormatterParserProvider.registerFormatter('column_ZdSelectMultiple', ({ column, value, row, componentProps, }) => {
-    if (!value || !Array.isArray(value) || value.length === 0)
-        return '';
-    const { formatterDataText, foreignColumns, dataText } = componentProps;
-    const formatterFn = FormatterParserProvider.getFormatter('column_ZdSelect');
-    const result = value.map((item, index) => {
-        let formatterRow = Object.assign({}, row);
-        const rowOverride = {};
-        if (formatterDataText && formatterDataText.length > 0) {
-            const columns = Array.isArray(formatterDataText) ? formatterDataText : [formatterDataText];
-            columns.forEach((col) => {
-                const textName = typeof col === 'string' ? col : col.name;
-                rowOverride[textName] = row[textName][index];
-            });
-            formatterRow = Object.assign(Object.assign({}, row), rowOverride);
-        }
-        else if (foreignColumns && dataText) {
-            let dataTextForeign = dataText;
-            if (typeof dataText === 'string') {
-                dataTextForeign = [foreignColumns[dataText] || dataText];
-            }
-            else {
-                dataTextForeign = dataText.map((col) => {
-                    const colName = typeof col === 'string' ? col : col.name;
-                    return foreignColumns[colName] || colName;
-                });
-            }
-            dataTextForeign.forEach((col) => {
-                rowOverride[col] = row[col][index];
-            });
-            formatterRow = Object.assign(Object.assign({}, row), rowOverride);
-        }
-        return formatterFn({
-            column, value: item, row: formatterRow, componentProps,
-        });
-    });
-    return result.join(', ');
-});
 const toggleableFormatter = ({ value, componentProps }) => {
     const { trueValue, falseValue, trueIcon, falseIcon, trueDisplayValue, falseDisplayValue, } = componentProps;
     const trueDefined = isUndefined(trueValue) ? true : trueValue;
@@ -6901,6 +6821,8 @@ class GridEditable extends Grid {
         this.viewEnterEdit = null;
         this.showCancelColumn = false;
         this.newRowIdentifier = '__added_row';
+        this.positionIdentifier = '__position';
+        this.pageIdentifier = '__page';
         this.createGridController();
         this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
         this.canEditRow = this.getInitValue('canEditRow', props.canEditRow, this.canEditRow);
@@ -6909,6 +6831,7 @@ class GridEditable extends Grid {
         this.showCancelColumn = this.getInitValue('showCancelColumn', props.showCancelColumn, this.showCancelColumn);
         this.createAccessors();
         this.addCancelColumn();
+        this.registerDatasourceCallback();
     }
     setViewEnterEdit(viewEnterEdit) {
         this.viewEnterEdit = viewEnterEdit;
@@ -6964,6 +6887,35 @@ class GridEditable extends Grid {
     instantiateCancelColumn() {
         return new GridColumnEditable(this.getCancelColumnProps());
     }
+    registerDatasourceCallback() {
+        const callback = () => {
+            const addedRows = Object.keys(this.addedRows).map((key) => this.addedRows[key]);
+            if (addedRows.length === 0)
+                return;
+            let dataWithNewRow = null;
+            const { page } = this.datasource;
+            addedRows.forEach((row) => {
+                const { originalRow } = row;
+                const rowToInsert = originalRow || row;
+                const rowPage = rowToInsert[this.pageIdentifier];
+                const lastPage = this.datasource.getLastPage() || 1;
+                // if the row's page is greater than the last page, should insert the row in the last page
+                // if the row's page is not greater than the last page, should insert the row in the correct page
+                if (rowPage > lastPage) {
+                    if (page !== lastPage)
+                        return;
+                }
+                else if (rowPage !== page) {
+                    return;
+                }
+                dataWithNewRow = this.insertRowInDatasource(rowToInsert, rowToInsert[this.positionIdentifier]);
+            });
+            if (dataWithNewRow) {
+                this.datasource.updatePageData(dataWithNewRow);
+            }
+        };
+        this.datasource.registerGetCallback(callback);
+    }
     createGridController() {
         const controller = new GridEditableController(this);
         Loader.addController(`GridEditableController_${this.name}`, controller);
@@ -7155,23 +7107,23 @@ class GridEditable extends Grid {
         if (Array.isArray(colValue)) {
             colValue.forEach((item) => {
                 const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
-                if (column.lookupData[value]) {
-                    componentProps.datasource.data.push(column.lookupData[value]);
-                }
+                this.pushLookupRow(column, componentProps, value);
             });
             return;
         }
         if (colValue && typeof colValue === 'object'
             && Object.prototype.hasOwnProperty.call(colValue, componentProps.dataValue)) {
             const value = colValue[componentProps.dataValue];
-            if (column.lookupData[value]) {
-                componentProps.datasource.data.push(column.lookupData[value]);
-            }
+            this.pushLookupRow(column, componentProps, value);
             return;
         }
-        if (column.lookupData[colValue]) {
-            componentProps.datasource.data.push(column.lookupData[colValue]);
-        }
+        this.pushLookupRow(column, componentProps, colValue);
+    }
+    pushLookupRow(column, componentProps, value) {
+        const lookupRow = column.getLookupRow(value);
+        if (!lookupRow)
+            return;
+        componentProps.datasource.data.push(lookupRow);
     }
     checkCompValidity(component) {
         if (!component.isValid()) {
@@ -7276,6 +7228,7 @@ class GridEditable extends Grid {
         return __awaiter(this, void 0, void 0, function* () {
             const { page } = this.datasource;
             yield this.cancelAddedRows();
+            this.addedRows = {};
             yield this.datasource.setPage(page);
             this.editing = false;
             this.editedRows = {};
@@ -7293,14 +7246,10 @@ class GridEditable extends Grid {
             delete cloneAddedRows[key];
             this.editedRows = cloneEditedRows;
             this.addedRows = cloneAddedRows;
-            let { data } = this.datasource;
-            if (this.datasource instanceof MemoryDatasource) {
-                data = this.datasource.allData;
-            }
-            const { uniqueKey } = this.datasource;
+            const { data, uniqueKey } = this.datasource;
             const index = data.findIndex((row) => row[uniqueKey] === key);
             data.splice(index, 1);
-            return this.datasource.updateData(data);
+            return this.datasource.updatePageData(data);
         });
     }
     cancelAddedRows() {
@@ -7313,7 +7262,7 @@ class GridEditable extends Grid {
                     allData.splice(index, 1);
                 }
             }
-            yield this.datasource.updateData(allData);
+            yield this.datasource.updatePageData(allData);
         });
     }
     addDataRow(row) {
@@ -7352,6 +7301,8 @@ class GridEditable extends Grid {
             const row = Object.assign(Object.assign({}, this.editedRows[key].originalRow), this.editedRows[key]);
             delete row.originalRow;
             delete row[this.newRowIdentifier];
+            delete row[this.positionIdentifier];
+            delete row[this.pageIdentifier];
             Object.keys(row).forEach((attr) => {
                 if (Object.prototype.hasOwnProperty.call(row, `${attr}_original`)) {
                     delete row[`${attr}_original`];
@@ -7373,6 +7324,8 @@ class GridEditable extends Grid {
             const row = Object.assign(Object.assign({}, this.addedRows[key].originalRow), this.addedRows[key]);
             delete row.originalRow;
             delete row[this.newRowIdentifier];
+            delete row[this.positionIdentifier];
+            delete row[this.pageIdentifier];
             Object.keys(row).forEach((attr) => {
                 if (Object.prototype.hasOwnProperty.call(row, `${attr}_original`)) {
                     delete row[`${attr}_original`];
@@ -7443,10 +7396,14 @@ class GridEditable extends Grid {
         return __awaiter(this, void 0, void 0, function* () {
             const data = this.insertRowInDatasource(row, position);
             this.saveRowReference(row);
-            yield this.datasource.updateData(data);
+            yield this.datasource.updatePageData(data);
             this.editing = true;
         });
     }
+    /**
+     * Saves a row reference in editedRows and addedRows
+     * @param row Row to be saved
+     */
     saveRowReference(row) {
         const id = row[this.datasource.uniqueKey];
         if (id) {
@@ -7454,15 +7411,18 @@ class GridEditable extends Grid {
             this.addedRows = Object.assign(Object.assign({}, this.addedRows), { [id]: Object.assign({}, row) });
         }
     }
+    /**
+     * Inserts a row in datasource depending on the position
+     * @param row Row to be inserted
+     * @param position Position, 'end' or 'start'
+     * @returns the data containing the newly added row
+     */
     insertRowInDatasource(row, position) {
-        let data;
-        if (this.datasource instanceof MemoryDatasource) {
-            data = this.datasource.allData;
-        }
-        else {
-            data = this.datasource.data;
-        }
+        const { data } = this.datasource;
         row[this.newRowIdentifier] = true;
+        row[this.positionIdentifier] = position;
+        if (!row[this.pageIdentifier])
+            row[this.pageIdentifier] = this.datasource.page;
         if (position === 'start') {
             data.unshift(row);
         }
@@ -8473,16 +8433,11 @@ class WatchURL {
 WatchURL.watchers = {};
 WatchURL.originalEvents = new Map();
 
-class BaseReport {
-    constructor() {
-        this.expressionZeedhiToXls = {
-            AVG: 'AVERAGE',
-            COUNT: 'COUNTA',
-            MAX: 'MAX',
-            MIN: 'MIN',
-            SUM: 'SUM',
-        };
-        this.colunmXLS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+class ReportColumnTransformer {
+    constructor({ getFormatFn, labelFormatter, fileType }) {
+        this.getFormatFn = getFormatFn;
+        this.labelFormatter = labelFormatter;
+        this.fileType = fileType;
     }
     getColumnsWidth(columns) {
         const widths = {};
@@ -8500,7 +8455,7 @@ class BaseReport {
         }
         return { widths, totalWidth };
     }
-    buildColumns(columns) {
+    transform(columns) {
         const { widths, totalWidth } = this.getColumnsWidth(columns);
         return columns.reduce((result, col, index) => {
             let size;
@@ -8510,18 +8465,36 @@ class BaseReport {
             else {
                 size = Math.floor((widths[col.name] * 100) / totalWidth);
             }
+            const description = this.labelFormatter ? this.labelFormatter({ column: col, fileType: this.fileType }) : col.label;
+            const format = this.getFormatFn ? this.getFormatFn(col) : undefined;
             const row = {
+                format,
+                description,
                 align: col.align || 'left',
-                description: col.label,
                 sequence: index,
                 size: `${size}%`,
+                xlsType: col.xlsType,
             };
-            if (col.xlsType) {
-                row.xlsType = col.xlsType;
-            }
             return Object.assign(Object.assign({}, result), { [col.name]: row });
         }, {});
     }
+}
+
+class BaseReport {
+    constructor(labelFormatter) {
+        this.expressionZeedhiToXls = {
+            AVG: 'AVERAGE',
+            COUNT: 'COUNTA',
+            MAX: 'MAX',
+            MIN: 'MIN',
+            SUM: 'SUM',
+        };
+        this.colunmXLS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        this.reportColumnTransformer = this.getReportColumnTransformer(labelFormatter);
+    }
+    getReportColumnTransformer(labelFormatter) {
+        return new ReportColumnTransformer({ labelFormatter, fileType: this.getFileType() });
+    }
     buildFilter(filter, columns) {
         return Object.keys(filter).map((key) => {
             var _a;
@@ -8544,6 +8517,9 @@ class CSVReport extends BaseReport {
         super(...arguments);
         this.route = '/generateCSV';
     }
+    getFileType() {
+        return 'csv';
+    }
     buildDataset(data, columns) {
         const columnNames = columns.map((col) => col.name);
         const result = data.reduce((reduced, row) => {
@@ -8553,7 +8529,7 @@ class CSVReport extends BaseReport {
         return JSON.stringify(result);
     }
     buildMetadata(name, title, columns, filter) {
-        const builtCols = this.buildColumns(columns);
+        const builtCols = this.reportColumnTransformer.transform(columns);
         const builtFilters = this.buildFilter(filter || {}, columns);
         const lang = this.formatLangCode(I18n.instance.language);
         const clientLogo = '';
@@ -8589,30 +8565,17 @@ class PDFReport extends BaseReport {
         super(...arguments);
         this.route = '/generateReport';
     }
+    getFileType() {
+        return 'pdf';
+    }
+    getReportColumnTransformer(labelFormatter) {
+        const getFormatFn = this.getFormatOfColumn.bind(this);
+        const fileType = this.getFileType();
+        return new ReportColumnTransformer({ getFormatFn, labelFormatter, fileType });
+    }
     buildDataset(data) {
         return JSON.stringify(data);
     }
-    buildColumns(columns) {
-        const { widths, totalWidth } = this.getColumnsWidth(columns);
-        return columns.reduce((result, col, index) => {
-            let size;
-            if (!totalWidth) {
-                size = Math.floor(100 / columns.length);
-            }
-            else {
-                size = Math.floor((widths[col.name] * 100) / totalWidth);
-            }
-            const row = {
-                align: col.align || 'left',
-                description: col.label,
-                sequence: index,
-                format: this.getFormatOfColumn(col),
-                size: `${size}%`,
-                xlsType: col.xlsType,
-            };
-            return Object.assign(Object.assign({}, result), { [col.name]: row });
-        }, {});
-    }
     getFormatOfColumn(column) {
         let format;
         let { mask } = column;
@@ -8660,7 +8623,7 @@ class PDFReport extends BaseReport {
     }
     buildMetadata(name, title, columns, filter, portrait = true) {
         return __awaiter(this, void 0, void 0, function* () {
-            const builtCols = this.buildColumns(columns);
+            const builtCols = this.reportColumnTransformer.transform(columns);
             const builtFilters = this.buildFilter(filter || {}, columns);
             const lang = this.formatLangCode(I18n.instance.language);
             let clientLogo = '';
@@ -8745,6 +8708,9 @@ class XLSReport extends BaseReport {
         super(...arguments);
         this.route = '/generateXLS';
     }
+    getFileType() {
+        return 'xls';
+    }
     buildDataset(data, columns) {
         const result = this.formatRawDataSet(data, columns);
         return JSON.stringify(result);
@@ -8759,7 +8725,7 @@ class XLSReport extends BaseReport {
         return result;
     }
     buildMetadata(name, title, columns, filter) {
-        const builtCols = this.buildColumns(columns);
+        const builtCols = this.reportColumnTransformer.transform(columns);
         const builtFilters = this.buildFilter(filter || {}, columns);
         const lang = this.formatLangCode(I18n.instance.language);
         const clientLogo = '';
@@ -8799,12 +8765,15 @@ class XLS2Report extends BaseReport {
         super(...arguments);
         this.route = '/generateXLS';
     }
+    getFileType() {
+        return 'xls';
+    }
     buildDataset(data, metadata) {
         const result = this.formatDataSet(metadata, data);
         return JSON.stringify(result);
     }
     buildMetadata(name, title, columns, filter) {
-        const builtCols = this.buildColumns(columns);
+        const builtCols = this.reportColumnTransformer.transform(columns);
         const builtFilters = this.buildFilter(filter || {}, columns);
         const lang = this.formatLangCode(I18n.instance.language);
         const clientLogo = '';
@@ -8996,12 +8965,15 @@ class XLS3Report extends BaseReport {
         super(...arguments);
         this.route = '/generateXLS';
     }
+    getFileType() {
+        return 'xls';
+    }
     buildDataset(data, metadata) {
         const result = this.formatDataSet(metadata, data);
         return JSON.stringify(result);
     }
     buildMetadata(name, title, columns, filter) {
-        const builtCols = this.buildColumns(columns);
+        const builtCols = this.reportColumnTransformer.transform(columns);
         const builtFilters = this.buildFilter(filter || {}, columns);
         const lang = this.formatLangCode(I18n.instance.language);
         const clientLogo = '';
@@ -9288,25 +9260,25 @@ class Report {
             return formattedData;
         });
     }
-    getReportType(type) {
+    getReportType(type, labelFormatter) {
         if (type === 'csv') {
-            return new CSVReport();
+            return new CSVReport(labelFormatter);
         }
         if (type === 'pdf') {
-            return new PDFReport();
+            return new PDFReport(labelFormatter);
         }
         if (type === 'xls') {
-            return new XLSReport();
+            return new XLSReport(labelFormatter);
         }
         if (type === 'xls2') {
-            return new XLS2Report();
+            return new XLS2Report(labelFormatter);
         }
         if (type === 'xls3') {
-            return new XLS3Report();
+            return new XLS3Report(labelFormatter);
         }
         throw new Error(`Invalid report type: ${type}`);
     }
-    getReport(type, portrait = true, rowObj, beforeReportEvent) {
+    getReport(type, portrait = true, rowObj, beforeReportEvent, labelFormatter) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
             const data = (_a = this.data) !== null && _a !== void 0 ? _a : yield this.getData();
@@ -9317,7 +9289,7 @@ class Report {
                 containerLabel: this.title,
                 widgetLabel: this.title,
             };
-            const reportType = this.getReportType(type);
+            const reportType = this.getReportType(type, labelFormatter);
             const { route } = reportType;
             const { name, columns, datasource } = this.iterable;
             const { groupedData } = Object.assign({}, this.iterable);
@@ -12475,6 +12447,7 @@ class SelectMultiple extends Select {
         this.limit = null;
         this.showSelectAll = false;
         this.showCheckboxAll = false;
+        this.formatterFn = FormatterParserProvider.getFormatter('ZdSelectMultiple');
         this.checkboxAllValue = false;
         if (!this.selectedValue) {
             this.selectedValue = [];
@@ -12691,22 +12664,6 @@ class SelectMultiple extends Select {
         });
         this.insertsRemoved = [];
     }
-    /**
-     * Return formatted dataText and values
-     */
-    formatter(value) {
-        if (!value || value.length === 0) {
-            return [];
-        }
-        const selectFormatter = FormatterParserProvider.getFormatter('ZdSelect');
-        const formattedValue = value.map((row) => {
-            const isDisabled = this.dataDisabled && row[this.dataDisabled];
-            const formattedRow = { value: row[this.dataValue], disabled: isDisabled, originalRow: row };
-            formattedRow.text = selectFormatter(row, this);
-            return formattedRow;
-        });
-        return formattedValue;
-    }
     /**
      * Returns the text shown when there's one or more selected items that doesn't fit in the input
      */
@@ -12952,7 +12909,21 @@ class SelectMultiple extends Select {
         };
         return modalSelectionDef;
     }
-}
+}
+FormatterParserProvider.registerFormatter('ZdSelectMultiple', (value, props) => {
+    const { dataDisabled, dataValue } = props;
+    if (!value || value.length === 0) {
+        return [];
+    }
+    const selectFormatter = FormatterParserProvider.getFormatter('ZdSelect');
+    const formattedValue = value.map((row) => {
+        const isDisabled = dataDisabled && row[dataDisabled];
+        const formattedRow = { value: row[dataValue], disabled: isDisabled, originalRow: row };
+        formattedRow.text = selectFormatter(row, props);
+        return formattedRow;
+    });
+    return formattedValue;
+});
 
 /**
  * Base class for Select Tree  component.
@@ -13043,7 +13014,6 @@ class SelectTree extends TextInput {
          * Defines if should wait and not execute GET method when Datasource is created
          */
         this.lazyLoad = true;
-        this.selectValue = null;
         /**
          * Uses delayed loading to load tree branches
          */
@@ -13064,7 +13034,9 @@ class SelectTree extends TextInput {
          * Defines the name of the form target to set using dataValueOut
          */
         this.dataValueOutFormName = '';
+        this.formatterFn = FormatterParserProvider.getFormatter('ZdSelectTree');
         this.savedNodes = undefined;
+        this.search = '';
         this.debounceSearch = debounce(this.searchChange, 500);
         this.nodes = this.getInitValue('nodes', props.nodes, this.nodes);
         this.alwaysOpen = this.getInitValue('alwaysOpen', props.alwaysOpen, this.alwaysOpen);
@@ -13084,7 +13056,6 @@ class SelectTree extends TextInput {
         this.dataValue = this.getInitValue('dataValue', props.dataValue, this.dataValue);
         this.dataDisabled = this.getInitValue('dataDisabled', props.dataDisabled, this.dataDisabled);
         this.disabledItems = this.getInitValue('disabledItems', props.disabledItems, this.disabledItems);
-        this.preventLoadOnFocus = this.getInitValue('preventLoadOnFocus', props.preventLoadOnFocus, this.preventLoadOnFocus);
         this.fetchOnDemand = this.getInitValue('fetchOnDemand', props.fetchOnDemand, this.fetchOnDemand);
         this.fieldHasChild = this.getInitValue('fieldHasChild', props.fieldHasChild, this.fieldHasChild);
         this.menuMaxWidth = this.getInitValue('menuMaxWidth', props.menuMaxWidth, this.menuMaxWidth);
@@ -13102,8 +13073,21 @@ class SelectTree extends TextInput {
             this.datasource = DatasourceFactory.factory(Object.assign(Object.assign({}, props.datasource), { searchIn: props.datasource.searchIn || searchFieldNames, lazyLoad: true, loadAll: true }));
             this.createDataStructure();
         }
+        if (this.dataTextDiscrete && !Array.isArray(this.dataTextDiscrete))
+            this.dataTextDiscrete = [this.dataTextDiscrete];
+        this.discreteProps = {
+            dataText: this.dataTextDiscrete,
+            dataTextSeparator: this.dataTextSeparator,
+        };
+        this.preventLoadOnFocus = !this.datasource || !this.lazyLoad;
+        this.preventLoadOnFocus = this.getInitValue('preventLoadOnFocus', props.preventLoadOnFocus, this.preventLoadOnFocus);
+        this.value = this.getInitValue('value', props.value, this.value);
         this.createAccessors();
     }
+    /**
+     * Returns the currentRow in the dataText key
+     */
+    formatter(value, props) { return this.formatterFn(value, props !== null && props !== void 0 ? props : this); }
     focus(event, element) {
         const _super = Object.create(null, {
             focus: { get: () => super.focus }
@@ -13158,8 +13142,8 @@ class SelectTree extends TextInput {
                 children = undefined;
             }
         }
-        const dataText = this.formatRow(this.dataText, row);
-        const dataTextDiscrete = this.formatRow(this.dataTextDiscrete, row);
+        const dataText = this.formatter(row);
+        const dataTextDiscrete = this.formatter(row, this.discreteProps);
         return {
             id: row[this.dataValue],
             label: dataText,
@@ -13179,40 +13163,6 @@ class SelectTree extends TextInput {
         });
         return newNodes;
     }
-    formatRow(dataText, row) {
-        const dataTextArr = Array.isArray(dataText) ? dataText : [dataText];
-        const dataTextNames = [];
-        const masks = [];
-        dataTextArr.forEach((text) => {
-            if (typeof text === 'string') {
-                dataTextNames.push(text);
-                masks.push('');
-            }
-            else {
-                dataTextNames.push(text.name);
-                if (Accessor.isAccessorDefinition(text.mask)) {
-                    const [controller, accessor] = Accessor.getAccessor(text.mask);
-                    masks.push(Loader.getInstance(controller)[accessor]);
-                }
-                else {
-                    masks.push(text.mask);
-                }
-            }
-        });
-        const rowText = dataTextNames.reduce((result, column, index) => {
-            if (row[column]) {
-                const separator = index > 0 ? this.dataTextSeparator : '';
-                let masked = row[column];
-                if (masks[index]) {
-                    const maskValue = typeof masks[index] === 'function' ? masks[index](row[column]) : masks[index];
-                    masked = Mask.getValueWithMask(row[column], maskValue);
-                }
-                return result + separator + masked;
-            }
-            return result;
-        }, '');
-        return rowText;
-    }
     /**
      * Triggered when the menu opens
      */
@@ -13236,6 +13186,7 @@ class SelectTree extends TextInput {
      * Triggered after the search query changes
      */
     searchChange(searchQuery, element) {
+        this.search = searchQuery;
         if (this.fetchOnDemand) {
             if (!searchQuery && this.savedNodes) {
                 this.nodes = this.savedNodes;
@@ -13323,7 +13274,7 @@ class SelectTree extends TextInput {
         if (!this.selectValue)
             return this.selectValue;
         if (this.returnObject) {
-            return this.clearRow(this.selectValue.row);
+            return this.clearRow(this.selectValue.row || this.selectValue);
         }
         return this.selectValue;
     }
@@ -13370,6 +13321,8 @@ class SelectTree extends TextInput {
         }
     }
 }
+const selectFormatterFn$1 = FormatterParserProvider.getFormatter('ZdSelect');
+FormatterParserProvider.registerFormatter('ZdSelectTree', selectFormatterFn$1);
 InputFactory.register('ZdSelectTree', SelectTree);
 
 /**
@@ -13394,7 +13347,6 @@ class SelectTreeMultiple extends SelectTree {
          * Selected Nodes
          */
         this.selectedNodes = [];
-        this.selectValue = [];
         /**
          * Changes the behavior of checked nodes that will be displayed in the array of values
          */
@@ -13422,19 +13374,25 @@ class SelectTreeMultiple extends SelectTree {
         this.callEvent('onDeselect', { element, component: this, node });
     }
     get value() {
+        if (!this.selectValue)
+            return [];
         if (this.returnObject) {
-            return this.selectValue.map((value) => this.clearRow(value.row));
+            return this.selectValue.map((value) => this.clearRow(value.row || value));
         }
         return this.selectValue;
     }
     set value(value) {
-        this.selectValue = value;
+        this.setValue(value);
     }
     setValue(value) {
+        if (!value) {
+            this.selectValue = [];
+            return;
+        }
         const arrValue = Array.isArray(value) ? value : [value];
         const key = this.datasource ? this.dataValue : 'id';
         if (!this.returnObject) {
-            this.value = arrValue.map((item) => {
+            this.selectValue = arrValue.map((item) => {
                 if (typeof item === 'object') {
                     return item[key];
                 }
@@ -13442,19 +13400,27 @@ class SelectTreeMultiple extends SelectTree {
             });
             return;
         }
-        this.value = arrValue.map((item) => {
+        this.selectValue = arrValue.map((item) => {
             if (typeof item !== 'object') {
                 return { id: item };
             }
             return { id: item[key] };
         });
     }
-    getAllNodes(nodes = this.nodes) {
-        let result = nodes;
+    /**
+     * Retrieves all nodes in the tree as a flat array. Nodes that are not matched are excluded
+     * Nodes that are not matched but whose parent is matched are included
+     * @param nodes
+     * @param matched defines whether the parent of the current node branch is matched
+     * @returns all nodes in the tree as a flat array, filtering unmatched nodes
+     */
+    getAllNodes(nodes = this.nodes, matched = true) {
+        let result = [...nodes];
+        result = result.filter((node) => node.isMatched || matched);
         nodes.forEach((node) => {
             if (!node.children)
                 return;
-            const childNodes = this.getAllNodes(node.children);
+            const childNodes = this.getAllNodes(node.children, node.isMatched || matched);
             result = [...result, ...childNodes];
         });
         return result;
@@ -13462,28 +13428,96 @@ class SelectTreeMultiple extends SelectTree {
     /**
      * Dispatches select/unselect event
      */
-    onSelectAll(isSelected, event, element) {
+    onSelectAll(isSelected, event, element, nodes = this.nodes) {
         if (isSelected) {
             this.callEvent('selectedAll', { event, element, component: this });
             if (!event.defaultPrevented) {
-                this.selectAllItems();
+                this.selectAllItems(nodes);
             }
         }
         else {
             this.callEvent('unselectedAll', { event, element, component: this });
             if (!event.defaultPrevented) {
-                this.unSelectAllItems();
+                this.unSelectAllItems(nodes);
             }
         }
     }
-    selectAllItems() {
-        const allNodes = this.datasource ? this.datasource.data : this.getAllNodes();
-        this.setValue(allNodes);
+    /**
+     * Selects all items in the tree \
+     * If the component is fetchOnDemand, it will select all values from datasource.data \
+     * If not, it will select all nodes from the tree, unless the nodes to be selected are specified
+     * @param nodes nodes to be selected. These are the nodes that are currently visible in the tree
+     * (if the user is searching, selects only the searched nodes)
+     * @returns
+     */
+    selectAllItems(nodes = this.nodes) {
+        var _a;
+        if (((_a = this.datasource) === null || _a === void 0 ? void 0 : _a.data) && this.fetchOnDemand) {
+            this.setValue(this.datasource.data);
+            return;
+        }
+        const allNodes = this.getAllNodes(nodes, !this.search);
+        // merge all nodes with the current value before setting it
+        const currentValue = this.getValueAsObject();
+        const nodeMap = this.createMergeMap(currentValue, allNodes);
+        const uniqueArray = Array.from(nodeMap.values());
+        this.setValue(uniqueArray);
     }
-    unSelectAllItems() {
-        this.setValue([]);
+    /**
+     * Unelects all items in the tree \
+     * If the component is fetchOnDemand, it will select all values from datasource.data \
+     * If not, it will select all nodes from the tree, unless the nodes to be selected are specified
+     * @param nodes nodes to be selected. These are the nodes that are currently visible in the tree
+     * (if the user is searching, selects only the searched nodes)
+     * @returns
+     */
+    unSelectAllItems(nodes = this.nodes) {
+        var _a;
+        if (((_a = this.datasource) === null || _a === void 0 ? void 0 : _a.data) && this.fetchOnDemand) {
+            this.setValue([]);
+            return;
+        }
+        const allNodes = this.getAllNodes(nodes, !this.search);
+        // merge all nodes with the current value before setting it
+        const currentValue = this.getValueAsObject();
+        const nodeMap = this.createMergeMap(currentValue);
+        // remove the current visible nodes from the array
+        const valuesToRemove = allNodes.map((node) => node.id);
+        valuesToRemove.forEach((value) => {
+            nodeMap.delete(value);
+        });
+        const uniqueArray = Array.from(nodeMap.values());
+        this.setValue(uniqueArray);
     }
-}
+    /**
+     * Takes two arrays and creates a map of the unique values
+     * @returns map of a merge between the two arrays, removing duplicates
+     */
+    createMergeMap(arr1, arr2 = []) {
+        const mergedNodes = arr1.concat(arr2);
+        // filter out duplicate nodes
+        const uniqueMap = new Map();
+        mergedNodes.forEach((node) => {
+            uniqueMap.set(node.id, node);
+        });
+        return uniqueMap;
+    }
+    getValueIds() {
+        if (this.returnObject) {
+            return this.value.map((item) => item.id);
+        }
+        return this.value;
+    }
+    getValueAsObject() {
+        return this.value.map((row) => {
+            if (this.returnObject)
+                return row;
+            return { id: row };
+        });
+    }
+}
+const selectFormatterFn = FormatterParserProvider.getFormatter('ZdSelectMultiple');
+FormatterParserProvider.registerFormatter('ZdSelectTreeMultiple', selectFormatterFn);
 
 /**
  * Base class for SelectableList component.
@@ -15860,6 +15894,131 @@ class TreeGridEditable extends TreeGrid {
     }
 }
 
+const asArray = (value) => (Array.isArray(value) ? value : [value]);
+const getForeignLookupRow = (column, row, dataValue, dataTextColumns, foreignColumns) => {
+    const lookupRow = {};
+    dataTextColumns.forEach((item) => {
+        const dataTextName = typeof item === 'string' ? item : item.name;
+        lookupRow[dataTextName] = row[foreignColumns[dataTextName] || dataTextName];
+    });
+    lookupRow[dataValue] = row[column.name];
+    return lookupRow;
+};
+const getFormatterLookupRow = (column, row, dataValue, formatterDataTextColumns, dataTextColumns) => {
+    const lookupRow = {};
+    formatterDataTextColumns.forEach((item, index) => {
+        const dataTextValue = dataTextColumns[index];
+        const dataTextName = typeof dataTextValue === 'string' ? dataTextValue : dataTextValue.name;
+        const formatterDataTextColumn = typeof item === 'string' ? item : item.name;
+        lookupRow[dataTextName] = row[formatterDataTextColumn];
+    });
+    lookupRow[dataValue] = row[column.name];
+    return lookupRow;
+};
+/**
+ * Stores data in column.lookupData when using foreignColumns or formatterDataText.
+ * Makes a lookup when not using foreignColumns or formatterDataText
+ * @returns the row from grid's datasource when using foreignColumns or formatterDataText. Otherwise,
+ * returns the row from the column's component datasource
+ */
+const storeOrRetrieveLookup = (column, row, value, dataValue, componentProps) => {
+    const { dataText, foreignColumns, formatterDataText, } = componentProps;
+    const dataTextColumns = asArray(dataText);
+    // when using foreignColumns, should store foreign keys information in lookupData
+    if (foreignColumns) {
+        column.lookupData[row[column.name]] = getForeignLookupRow(column, row, dataValue, dataTextColumns, foreignColumns);
+        return row;
+    }
+    // when not using formatterDataText, should fetch data from datasource to be able to format this cell
+    if (!formatterDataText) {
+        return column.getLookupData(dataValue, value[dataValue] || value);
+    }
+    const formatterDataTextColumns = asArray(formatterDataText);
+    // when using formatterDataText, should store dataText information in lookupData
+    if (formatterDataTextColumns.length === dataTextColumns.length) {
+        const rowColumn = row[column.name];
+        column.lookupData[rowColumn] = getFormatterLookupRow(column, row, dataValue, formatterDataTextColumns, dataTextColumns);
+        return row;
+    }
+    return row;
+};
+const formatter$1 = ({ column, value, row, componentProps, }) => {
+    if (value === null || value === undefined)
+        return '';
+    const { dataText, formatterDataText, dataTextSeparator, dataValue, dataTextDiscrete, foreignColumns, } = componentProps;
+    let currentRow = row;
+    const dataTextColumns = asArray(dataText);
+    // when dataValue is defined, should try to store or retrieve row data from lookupData
+    if (dataValue) {
+        currentRow = storeOrRetrieveLookup(column, row, value, dataValue, componentProps);
+    }
+    if (!Object.keys(currentRow).length)
+        return typeof value === 'object' ? '' : value;
+    let dataTextForeign = dataText;
+    if (dataText && foreignColumns) {
+        if (typeof dataText === 'string') {
+            dataTextForeign = foreignColumns[dataText] || dataText;
+        }
+        else {
+            dataTextForeign = dataTextColumns.map((item) => {
+                const itemName = typeof item === 'string' ? item : item.name;
+                return foreignColumns[itemName] || itemName;
+            });
+        }
+    }
+    const textColumn = dataTextDiscrete || formatterDataText || dataTextForeign;
+    if (!textColumn)
+        return value;
+    if (typeof textColumn === 'string') {
+        return currentRow[textColumn] || value;
+    }
+    const formatterFn = FormatterParserProvider.getFormatter('ZdSelect');
+    return formatterFn(currentRow, { dataText: textColumn, dataTextSeparator });
+};
+FormatterParserProvider.registerFormatter('column_ZdSelect', formatter$1);
+FormatterParserProvider.registerFormatter('column_ZdSelectTree', formatter$1);
+
+const formatter = ({ column, value, row, componentProps, }) => {
+    if (!value || !Array.isArray(value) || value.length === 0)
+        return '';
+    const { formatterDataText, foreignColumns, dataText } = componentProps;
+    const formatterFn = FormatterParserProvider.getFormatter('column_ZdSelect');
+    const result = value.map((item, index) => {
+        let formatterRow = Object.assign({}, row);
+        const rowOverride = {};
+        if (formatterDataText && formatterDataText.length > 0) {
+            const columns = Array.isArray(formatterDataText) ? formatterDataText : [formatterDataText];
+            columns.forEach((col) => {
+                const textName = typeof col === 'string' ? col : col.name;
+                rowOverride[textName] = row[textName][index];
+            });
+            formatterRow = Object.assign(Object.assign({}, row), rowOverride);
+        }
+        else if (foreignColumns && dataText) {
+            let dataTextForeign = dataText;
+            if (typeof dataText === 'string') {
+                dataTextForeign = [foreignColumns[dataText] || dataText];
+            }
+            else {
+                dataTextForeign = dataText.map((col) => {
+                    const colName = typeof col === 'string' ? col : col.name;
+                    return foreignColumns[colName] || colName;
+                });
+            }
+            dataTextForeign.forEach((col) => {
+                rowOverride[col] = row[col][index];
+            });
+            formatterRow = Object.assign(Object.assign({}, row), rowOverride);
+        }
+        return formatterFn({
+            column, value: item, row: formatterRow, componentProps,
+        });
+    });
+    return result.join(', ');
+};
+FormatterParserProvider.registerFormatter('column_ZdSelectMultiple', formatter);
+FormatterParserProvider.registerFormatter('column_ZdSelectTreeMultiple', formatter);
+
 const AutoNumeric = require('@zeedhi/autonumeric/dist/autoNumeric');
 const packageContent = require('../package.json');
 VersionService.addPackageVersion(packageContent.name, packageContent.version);