@zeedhi/common 1.108.1 → 1.109.1

package/dist/zd-common.umd.js

@@ -2883,11 +2883,20 @@
           this.formatterFn = core.FormatterParserProvider.getFormatter('ZdNumber');
           this.parserFn = core.FormatterParserProvider.getParser('ZdNumber');
           this.maskValid = false;
-          const newMask = Object.assign(Object.assign({}, this.defaultMask), props.mask);
+          const newMask = this.mergeMasks(this.defaultMask, props.mask);
           this.align = this.getInitValue('align', props.align, this.align);
           this.mask = this.getInitValue('mask', newMask, this.defaultMask);
           this.createAccessors();
           this.validateMask();
+          this.initializeMaskProxy();
+      }
+      /**
+       * Merges two masks
+       */
+      mergeMasks(maskA, maskB) {
+          if (typeof maskB !== 'object')
+              return Object.assign({}, maskA);
+          return Object.assign(Object.assign({}, maskA), maskB);
       }
       validateMask() {
           AutoNumeric.validate(this.mask, true);
@@ -2941,6 +2950,35 @@
               this.localValue = parsed;
           }
       }
+      /**
+       * initializes a mask proxy to call update when the mask is changed
+       */
+      initializeMaskProxy() {
+          this.internalMask = new Proxy(Object.assign({}, this.mask), {
+              set: (target, prop, newValue) => {
+                  target[prop] = newValue;
+                  setTimeout(() => {
+                      var _a;
+                      (_a = this.autoNumericObj) === null || _a === void 0 ? void 0 : _a.update(this.mask);
+                  });
+                  return true;
+              },
+          });
+      }
+      get mask() {
+          return this.internalMask;
+      }
+      set mask(value) {
+          this.internalMask = value;
+          if (typeof value !== 'object')
+              return;
+          // when the mask is replaced, should reinitialize the mask Proxy
+          setTimeout(() => {
+              var _a;
+              this.initializeMaskProxy();
+              (_a = this.autoNumericObj) === null || _a === void 0 ? void 0 : _a.update(this.mask);
+          });
+      }
       /**
        * Retrieves a formatted value with mask
        * @param value Any value
@@ -5594,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;
+      }
   }
 
   /**
@@ -5893,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;
@@ -7124,23 +7082,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()) {
@@ -12444,6 +12402,7 @@
           this.limit = null;
           this.showSelectAll = false;
           this.showCheckboxAll = false;
+          this.formatterFn = core.FormatterParserProvider.getFormatter('ZdSelectMultiple');
           this.checkboxAllValue = false;
           if (!this.selectedValue) {
               this.selectedValue = [];
@@ -12660,22 +12619,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
        */
@@ -12921,7 +12864,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.
@@ -13012,7 +12969,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
            */
@@ -13033,7 +12989,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);
@@ -13053,7 +13011,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);
@@ -13071,8 +13028,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 }
@@ -13127,8 +13097,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,
@@ -13148,40 +13118,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
        */
@@ -13205,6 +13141,7 @@
        * Triggered after the search query changes
        */
       searchChange(searchQuery, element) {
+          this.search = searchQuery;
           if (this.fetchOnDemand) {
               if (!searchQuery && this.savedNodes) {
                   this.nodes = this.savedNodes;
@@ -13292,7 +13229,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;
       }
@@ -13339,6 +13276,8 @@
           }
       }
   }
+  const selectFormatterFn$1 = core.FormatterParserProvider.getFormatter('ZdSelect');
+  core.FormatterParserProvider.registerFormatter('ZdSelectTree', selectFormatterFn$1);
   InputFactory.register('ZdSelectTree', SelectTree);
 
   /**
@@ -13363,7 +13302,6 @@
            * Selected Nodes
            */
           this.selectedNodes = [];
-          this.selectValue = [];
           /**
            * Changes the behavior of checked nodes that will be displayed in the array of values
            */
@@ -13391,19 +13329,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];
                   }
@@ -13411,19 +13355,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;
@@ -13431,28 +13383,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.
@@ -15829,6 +15849,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);