@zeedhi/common 1.109.0 → 1.110.0

package/dist/zd-common.umd.js

@@ -5632,6 +5632,18 @@
           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;
+      }
   }
 
   /**
@@ -5931,98 +5943,6 @@
           }
       }
   }
-  core.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 = core.FormatterParserProvider.getFormatter('ZdSelect');
-      return formatterFn(currentRow, { dataText: textColumn, dataTextSeparator });
-  });
-  core.FormatterParserProvider.registerFormatter('column_ZdSelectMultiple', ({ column, value, row, componentProps, }) => {
-      if (!value || !Array.isArray(value) || value.length === 0)
-          return '';
-      const { formatterDataText, foreignColumns, dataText } = componentProps;
-      const formatterFn = core.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__default["default"](trueValue) ? true : trueValue;
@@ -6908,6 +6828,8 @@
           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);
@@ -6916,6 +6838,7 @@
           this.showCancelColumn = this.getInitValue('showCancelColumn', props.showCancelColumn, this.showCancelColumn);
           this.createAccessors();
           this.addCancelColumn();
+          this.registerDatasourceCallback();
       }
       setViewEnterEdit(viewEnterEdit) {
           this.viewEnterEdit = viewEnterEdit;
@@ -6971,6 +6894,35 @@
       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);
           core.Loader.addController(`GridEditableController_${this.name}`, controller);
@@ -7162,23 +7114,23 @@
           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()) {
@@ -7283,6 +7235,7 @@
           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 = {};
@@ -7300,14 +7253,10 @@
               delete cloneAddedRows[key];
               this.editedRows = cloneEditedRows;
               this.addedRows = cloneAddedRows;
-              let { data } = this.datasource;
-              if (this.datasource instanceof core.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() {
@@ -7320,7 +7269,7 @@
                       allData.splice(index, 1);
                   }
               }
-              yield this.datasource.updateData(allData);
+              yield this.datasource.updatePageData(allData);
           });
       }
       addDataRow(row) {
@@ -7359,6 +7308,8 @@
               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`];
@@ -7380,6 +7331,8 @@
               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`];
@@ -7450,10 +7403,14 @@
           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) {
@@ -7461,15 +7418,18 @@
               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 core.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);
           }
@@ -8480,16 +8440,11 @@
   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 = {};
@@ -8507,7 +8462,7 @@
           }
           return { widths, totalWidth };
       }
-      buildColumns(columns) {
+      transform(columns) {
           const { widths, totalWidth } = this.getColumnsWidth(columns);
           return columns.reduce((result, col, index) => {
               let size;
@@ -8517,18 +8472,36 @@
               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;
@@ -8551,6 +8524,9 @@
           super(...arguments);
           this.route = '/generateCSV';
       }
+      getFileType() {
+          return 'csv';
+      }
       buildDataset(data, columns) {
           const columnNames = columns.map((col) => col.name);
           const result = data.reduce((reduced, row) => {
@@ -8560,7 +8536,7 @@
           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(core.I18n.instance.language);
           const clientLogo = '';
@@ -8596,30 +8572,17 @@
           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;
@@ -8667,7 +8630,7 @@
       }
       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(core.I18n.instance.language);
               let clientLogo = '';
@@ -8752,6 +8715,9 @@
           super(...arguments);
           this.route = '/generateXLS';
       }
+      getFileType() {
+          return 'xls';
+      }
       buildDataset(data, columns) {
           const result = this.formatRawDataSet(data, columns);
           return JSON.stringify(result);
@@ -8766,7 +8732,7 @@
           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(core.I18n.instance.language);
           const clientLogo = '';
@@ -8806,12 +8772,15 @@
           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(core.I18n.instance.language);
           const clientLogo = '';
@@ -9003,12 +8972,15 @@
           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(core.I18n.instance.language);
           const clientLogo = '';
@@ -9295,25 +9267,25 @@
               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();
@@ -9324,7 +9296,7 @@
                   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);
@@ -12482,6 +12454,7 @@
           this.limit = null;
           this.showSelectAll = false;
           this.showCheckboxAll = false;
+          this.formatterFn = core.FormatterParserProvider.getFormatter('ZdSelectMultiple');
           this.checkboxAllValue = false;
           if (!this.selectedValue) {
               this.selectedValue = [];
@@ -12698,22 +12671,6 @@
           });
           this.insertsRemoved = [];
       }
-      /**
-       * Return formatted dataText and values
-       */
-      formatter(value) {
-          if (!value || value.length === 0) {
-              return [];
-          }
-          const selectFormatter = core.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
        */
@@ -12959,7 +12916,21 @@
           };
           return modalSelectionDef;
       }
-  }
+  }
+  core.FormatterParserProvider.registerFormatter('ZdSelectMultiple', (value, props) => {
+      const { dataDisabled, dataValue } = props;
+      if (!value || value.length === 0) {
+          return [];
+      }
+      const selectFormatter = core.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.
@@ -13050,7 +13021,6 @@
            * 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
            */
@@ -13071,7 +13041,9 @@
            * Defines the name of the form target to set using dataValueOut
            */
           this.dataValueOutFormName = '';
+          this.formatterFn = core.FormatterParserProvider.getFormatter('ZdSelectTree');
           this.savedNodes = undefined;
+          this.search = '';
           this.debounceSearch = debounce__default["default"](this.searchChange, 500);
           this.nodes = this.getInitValue('nodes', props.nodes, this.nodes);
           this.alwaysOpen = this.getInitValue('alwaysOpen', props.alwaysOpen, this.alwaysOpen);
@@ -13091,7 +13063,6 @@
           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);
@@ -13109,8 +13080,21 @@
               this.datasource = core.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 }
@@ -13165,8 +13149,8 @@
                   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,
@@ -13186,40 +13170,6 @@
           });
           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 (core.Accessor.isAccessorDefinition(text.mask)) {
-                      const [controller, accessor] = core.Accessor.getAccessor(text.mask);
-                      masks.push(core.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 = core.Mask.getValueWithMask(row[column], maskValue);
-                  }
-                  return result + separator + masked;
-              }
-              return result;
-          }, '');
-          return rowText;
-      }
       /**
        * Triggered when the menu opens
        */
@@ -13243,6 +13193,7 @@
        * Triggered after the search query changes
        */
       searchChange(searchQuery, element) {
+          this.search = searchQuery;
           if (this.fetchOnDemand) {
               if (!searchQuery && this.savedNodes) {
                   this.nodes = this.savedNodes;
@@ -13330,7 +13281,7 @@
           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;
       }
@@ -13377,6 +13328,8 @@
           }
       }
   }
+  const selectFormatterFn$1 = core.FormatterParserProvider.getFormatter('ZdSelect');
+  core.FormatterParserProvider.registerFormatter('ZdSelectTree', selectFormatterFn$1);
   InputFactory.register('ZdSelectTree', SelectTree);
 
   /**
@@ -13401,7 +13354,6 @@
            * Selected Nodes
            */
           this.selectedNodes = [];
-          this.selectValue = [];
           /**
            * Changes the behavior of checked nodes that will be displayed in the array of values
            */
@@ -13429,19 +13381,25 @@
           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];
                   }
@@ -13449,19 +13407,27 @@
               });
               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;
@@ -13469,28 +13435,96 @@
       /**
        * 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 = core.FormatterParserProvider.getFormatter('ZdSelectMultiple');
+  core.FormatterParserProvider.registerFormatter('ZdSelectTreeMultiple', selectFormatterFn);
 
   /**
    * Base class for SelectableList component.
@@ -15867,6 +15901,131 @@
       }
   }
 
+  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 = core.FormatterParserProvider.getFormatter('ZdSelect');
+      return formatterFn(currentRow, { dataText: textColumn, dataTextSeparator });
+  };
+  core.FormatterParserProvider.registerFormatter('column_ZdSelect', formatter$1);
+  core.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 = core.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(', ');
+  };
+  core.FormatterParserProvider.registerFormatter('column_ZdSelectMultiple', formatter);
+  core.FormatterParserProvider.registerFormatter('column_ZdSelectTreeMultiple', formatter);
+
   const AutoNumeric = require('@zeedhi/autonumeric/dist/autoNumeric');
   const packageContent = require('../package.json');
   core.VersionService.addPackageVersion(packageContent.name, packageContent.version);