@zeedhi/common 1.112.0 → 1.114.0

package/dist/zd-common.esm.js

@@ -1916,6 +1916,7 @@ class Input extends ComponentRender {
         this.internalDisplayValue = '';
         this.internalValue = null;
         this.formParent = this.getFormParent();
+        this.grid = {};
         this.lastInputValue = '';
         this.callInputEvent = debounce(({ event, element, component }) => {
             this.callEvent('input', { event, element, component });
@@ -1943,6 +1944,7 @@ class Input extends ComponentRender {
         this.value = this.getInitValue('value', props.value, this.value);
         this.validations = this.getInitValue('validations', props.validations, this.validations);
         this.autoRegister = this.getInitValue('autoRegister', props.autoRegister, this.autoRegister);
+        this.grid = this.getInitValue('grid', props.grid, this.grid);
         this.parseValidations(props.validations || {});
         if (this.autoRegister && this.formParent) {
             this.formParent.registerInput(this);
@@ -2831,7 +2833,7 @@ class TextInput extends Input {
         return mask;
     }
 }
-FormatterParserProvider.registerFormatter('ZdTextInput', (value, { valueWithPrefix = textInputDefaults.valueWithPrefix, prefix = textInputDefaults.prefix, valueWithSuffix = textInputDefaults.valueWithSuffix, suffix = textInputDefaults.suffix, mask = textInputDefaults.mask, } = {}) => {
+FormatterParserProvider.registerFormatter('ZdTextInput', (value, { valueWithPrefix = textInputDefaults.valueWithPrefix, prefix = textInputDefaults.prefix, valueWithSuffix = textInputDefaults.valueWithSuffix, suffix = textInputDefaults.suffix, mask = textInputDefaults.mask, eagerMask, } = {}) => {
     let formatted = value;
     if (formatted) {
         formatted = valueWithPrefix ? formatted.substring(prefix.length) : formatted;
@@ -2842,7 +2844,10 @@ FormatterParserProvider.registerFormatter('ZdTextInput', (value, { valueWithPref
             maskDef = Loader.getInstance(controller)[accessor];
         }
         const maskValue = typeof (maskDef) === 'function' ? maskDef(Mask.getValueWithoutMask(formatted)) : maskDef;
-        formatted = maskValue ? Mask.getValueWithMask(Mask.getValueWithoutMask(formatted), maskValue) : formatted;
+        if (maskValue) {
+            const valueWithoutMask = Mask.getValueWithoutMask(formatted);
+            formatted = Mask.getValueWithMask(valueWithoutMask, maskValue, false, eagerMask);
+        }
     }
     return formatted;
 });
@@ -3138,8 +3143,10 @@ class AlertService {
      * Hides alert by index. Default index is 0
      */
     static hide(index = 0) {
-        this.alertsManager.visibleInstances[index].hide();
-        this.remove(index);
+        if (this.alertsManager.visibleInstances[index]) {
+            this.alertsManager.visibleInstances[index].hide();
+            this.remove(index);
+        }
     }
     /**
      * Hides alert by alert id (returned by the `show` method)
@@ -5853,7 +5860,24 @@ class Iterable extends ComponentRender {
             && (!this.searchVisibleOnly || column.isVisible)
             && (this.searchIn === undefined || this.searchIn === column.name);
     }
-}
+}
+Messages.add({
+    'pt-BR': {
+        translation: {
+            gridPageText: '{{firstRow}} - {{lastRow}} de {{total}}',
+        },
+    },
+    'en-US': {
+        translation: {
+            gridPageText: '{{firstRow}} - {{lastRow}} of {{total}}',
+        },
+    },
+    'es-CL': {
+        translation: {
+            gridPageText: '{{firstRow}} - {{lastRow}} de {{total}}',
+        },
+    },
+});
 
 /**
  * Delete rows error
@@ -7052,6 +7076,9 @@ class GridEditable extends Grid {
             });
         }
     }
+    /**
+     * Retrieves the visible value of a cell, which is the corresponding cell in edited row or in the default row
+     */
     getVisibleValue(row, column) {
         const key = row[this.datasource.uniqueKey];
         if (this.editedRows[key] && Object.prototype.hasOwnProperty.call(this.editedRows[key], column.valueIn)) {
@@ -7059,6 +7086,18 @@ class GridEditable extends Grid {
         }
         return row[column.valueIn];
     }
+    /**
+     * Retrieves the visible values of a row
+     * @param row
+     * @returns
+     */
+    getVisibleRow(row) {
+        const visibleRow = Object.assign({}, row);
+        this.columns.forEach((column) => {
+            visibleRow[column.valueIn] = this.getVisibleValue(row, column);
+        });
+        return visibleRow;
+    }
     /**
      * Returns editable component properties based on the column definition
      * @param column Column definition
@@ -7154,6 +7193,15 @@ class GridEditable extends Grid {
             delete this.invalidComponents[component.name];
         }
     }
+    clearInvalidComponentsForRow(rowKey) {
+        const cloneInvalidComponents = Object.assign({}, this.invalidComponents);
+        Object.keys(cloneInvalidComponents).forEach((compName) => {
+            if (compName.includes(`_editable_${rowKey}`)) {
+                delete cloneInvalidComponents[compName];
+            }
+        });
+        this.invalidComponents = cloneInvalidComponents;
+    }
     /**
      * change event of editable components
      */
@@ -7265,6 +7313,7 @@ class GridEditable extends Grid {
             delete cloneAddedRows[key];
             this.editedRows = cloneEditedRows;
             this.addedRows = cloneAddedRows;
+            this.clearInvalidComponentsForRow(key);
             const { data, uniqueKey } = this.datasource;
             const index = data.findIndex((row) => row[uniqueKey] === key);
             data.splice(index, 1);
@@ -7278,6 +7327,8 @@ class GridEditable extends Grid {
             for (let index = allData.length - 1; index >= 0; index -= 1) {
                 const row = allData[index];
                 if (this.addedRows[row[this.datasource.uniqueKey]]) {
+                    const key = row[this.datasource.uniqueKey];
+                    this.clearInvalidComponentsForRow(key);
                     allData.splice(index, 1);
                 }
             }
@@ -7298,13 +7349,17 @@ class GridEditable extends Grid {
     saveEditedRows(revalidate = false) {
         return __awaiter(this, void 0, void 0, function* () {
             const { page } = this.datasource;
+            // Verificar se o grid é válido antes de tentar salvar
+            if (!this.isGridValid(revalidate)) {
+                throw new Error('Invalid rows');
+            }
+            // Só cancelar as linhas adicionadas se todas forem válidas
             yield this.cancelAddedRows();
-            const response = yield Promise.all(this.getEditedRows(revalidate).map((row) => this.addDataRow(row)));
+            const response = yield Promise.all(this.getEditedRows(revalidate, true).map((row) => this.addDataRow(row)));
             this.editing = false;
             this.editedRows = {};
             this.addedRows = {};
             this.invalidComponents = {};
-            this.addedRows = {};
             yield this.datasource.setPage(page);
             return response;
         });
@@ -7555,6 +7610,8 @@ class GridEditable extends Grid {
         const rows = Object.assign({}, this.editedRows);
         delete rows[foundRow[uniqueKey]];
         this.editedRows = rows;
+        const key = foundRow[uniqueKey];
+        this.clearInvalidComponentsForRow(key);
     }
     /**
      * Makes the cell enter edit mode
@@ -8527,18 +8584,26 @@ class BaseReport {
             SUM: 'SUM',
         };
         this.colunmXLS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        this.labelFormatter = labelFormatter;
         this.reportColumnTransformer = this.getReportColumnTransformer(labelFormatter);
     }
     getReportColumnTransformer(labelFormatter) {
         return new ReportColumnTransformer({ labelFormatter, fileType: this.getFileType() });
     }
+    getColumnLabel(key, column) {
+        if (!column)
+            return key;
+        if (!this.labelFormatter)
+            return column.label || key;
+        return this.labelFormatter({ column, fileType: this.getFileType() });
+    }
     buildFilter(filter, columns) {
         return Object.keys(filter).map((key) => {
-            var _a;
-            return ({
-                label: ((_a = columns.find((col) => col.name === key)) === null || _a === void 0 ? void 0 : _a.label) || key,
+            const column = columns.find((col) => col.name === key);
+            return {
+                label: this.getColumnLabel(key, column),
                 value: I18n.translate('IS_EQUAL', { value: filter[key] }),
-            });
+            };
         });
     }
     formatLangCode(lang) {
@@ -8547,6 +8612,12 @@ class BaseReport {
         }
         return lang.toLowerCase().replace('-', '_');
     }
+    filterColumns(columns) {
+        return columns.filter((item) => (item.type !== 'action' && item.isVisible !== false));
+    }
+    buildCols(columns) {
+        return this.reportColumnTransformer.transform(this.filterColumns(columns));
+    }
 }
 
 class CSVReport extends BaseReport {
@@ -8557,8 +8628,9 @@ class CSVReport extends BaseReport {
     getFileType() {
         return 'csv';
     }
-    buildDataset(data, columns) {
-        const columnNames = columns.map((col) => col.name);
+    buildDataset({ data, columns }) {
+        const filteredColumns = this.filterColumns(columns);
+        const columnNames = filteredColumns.map((col) => col.name);
         const result = data.reduce((reduced, row) => {
             const values = columnNames.map((col) => row[col] || '');
             return [...reduced, values];
@@ -8566,7 +8638,7 @@ class CSVReport extends BaseReport {
         return JSON.stringify(result);
     }
     buildMetadata(name, title, columns, filter) {
-        const builtCols = this.reportColumnTransformer.transform(columns);
+        const builtCols = this.buildCols(columns);
         const builtFilters = this.buildFilter(filter || {}, columns);
         const lang = this.formatLangCode(I18n.instance.language);
         const clientLogo = '';
@@ -8610,7 +8682,7 @@ class PDFReport extends BaseReport {
         const fileType = this.getFileType();
         return new ReportColumnTransformer({ getFormatFn, labelFormatter, fileType });
     }
-    buildDataset(data) {
+    buildDataset({ data }) {
         return JSON.stringify(data);
     }
     getFormatOfColumn(column) {
@@ -8660,7 +8732,7 @@ class PDFReport extends BaseReport {
     }
     buildMetadata(name, title, columns, filter, portrait = true) {
         return __awaiter(this, void 0, void 0, function* () {
-            const builtCols = this.reportColumnTransformer.transform(columns);
+            const builtCols = this.buildCols(columns);
             const builtFilters = this.buildFilter(filter || {}, columns);
             const lang = this.formatLangCode(I18n.instance.language);
             let clientLogo = '';
@@ -8748,8 +8820,8 @@ class XLSReport extends BaseReport {
     getFileType() {
         return 'xls';
     }
-    buildDataset(data, columns) {
-        const result = this.formatRawDataSet(data, columns);
+    buildDataset({ data, columns }) {
+        const result = this.formatRawDataSet(data, this.filterColumns(columns));
         return JSON.stringify(result);
     }
     // formata o dataset para o formato "cru" xls
@@ -8762,7 +8834,7 @@ class XLSReport extends BaseReport {
         return result;
     }
     buildMetadata(name, title, columns, filter) {
-        const builtCols = this.reportColumnTransformer.transform(columns);
+        const builtCols = this.buildCols(columns);
         const builtFilters = this.buildFilter(filter || {}, columns);
         const lang = this.formatLangCode(I18n.instance.language);
         const clientLogo = '';
@@ -8805,12 +8877,12 @@ class XLS2Report extends BaseReport {
     getFileType() {
         return 'xls';
     }
-    buildDataset(data, metadata) {
+    buildDataset({ data, metadata }) {
         const result = this.formatDataSet(metadata, data);
         return JSON.stringify(result);
     }
     buildMetadata(name, title, columns, filter) {
-        const builtCols = this.reportColumnTransformer.transform(columns);
+        const builtCols = this.buildCols(columns);
         const builtFilters = this.buildFilter(filter || {}, columns);
         const lang = this.formatLangCode(I18n.instance.language);
         const clientLogo = '';
@@ -9005,12 +9077,12 @@ class XLS3Report extends BaseReport {
     getFileType() {
         return 'xls';
     }
-    buildDataset(data, metadata) {
+    buildDataset({ data, metadata }) {
         const result = this.formatDataSet(metadata, data);
         return JSON.stringify(result);
     }
     buildMetadata(name, title, columns, filter) {
-        const builtCols = this.reportColumnTransformer.transform(columns);
+        const builtCols = this.buildCols(columns);
         const builtFilters = this.buildFilter(filter || {}, columns);
         const lang = this.formatLangCode(I18n.instance.language);
         const clientLogo = '';
@@ -9330,21 +9402,20 @@ class Report {
             const { route } = reportType;
             const { name, columns, datasource } = this.iterable;
             const { groupedData } = Object.assign({}, this.iterable);
-            const formattedColumns = this.filterColumns(columns);
-            const metadataObj = yield reportType.buildMetadata(name, this.title, formattedColumns, datasource.filter, portrait);
+            const metadataObj = yield reportType.buildMetadata(name, this.title, columns, datasource.filter, portrait);
             let dataset;
             if ((reportType instanceof XLS2Report || reportType instanceof XLS3Report) && groupedData) {
                 const rowMetadata = rowObj.metaData;
                 const metadataObjClone = merge(rowMetadata, JSON.parse(metadataObj));
-                dataset = reportType.buildDataset(groupedData, metadataObjClone);
+                dataset = reportType.buildDataset({ data: groupedData, metadata: metadataObjClone });
             }
             else if (reportType instanceof PDFReport && groupedData && groupedData.length > 0) {
                 const formatter = new GroupedPDFFormatter();
                 const pdfGroupedData = formatter.format(groupedData);
-                dataset = reportType.buildDataset(pdfGroupedData);
+                dataset = reportType.buildDataset({ data: pdfGroupedData });
             }
             else {
-                dataset = reportType.buildDataset(data, formattedColumns);
+                dataset = reportType.buildDataset({ data, metadata: metadataObj, columns });
             }
             const filter = '[]';
             let row = {
@@ -9373,9 +9444,6 @@ class Report {
             return new URL(reportFile, this.fileEndPoint).href;
         });
     }
-    filterColumns(columns) {
-        return columns.filter((item) => (item.type !== 'action' && item.isVisible));
-    }
 }
 
 class TreeDataStructure {
@@ -9831,6 +9899,77 @@ class DataValueOutHelper {
     }
 }
 
+class DatasourceSearcher {
+    constructor() {
+        this.dsSearch = {
+            SEARCH: (value, searchIn) => ({
+                searchIn: [searchIn],
+                search: String(value || ''),
+            }),
+            FILTER: (value, searchIn) => ({
+                filter: {
+                    [searchIn]: value,
+                },
+            }),
+            FIND: (value, searchIn) => ({
+                find: {
+                    [searchIn]: value,
+                },
+            }),
+            DYNAMIC_FILTER: (value, search_in) => {
+                const arrayValue = Array.isArray(value) ? value : Array.of(value);
+                const filter = arrayValue.map((item) => ({ operation: 'EQUALS', relation: 'OR', value: item }));
+                const dynamicFilter = { [search_in]: filter };
+                return { dynamicFilter };
+            },
+        };
+    }
+    search(datasource, searchValue, searchIn, searchParam) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // using filter/find/dynamicFilter should make only 1 request
+            // using normal search should make one request per search value
+            if (!Array.isArray(searchValue)) {
+                return this.searchRequest(datasource, searchValue, searchIn, searchParam);
+            }
+            if (searchParam !== 'SEARCH') {
+                const items = yield this.searchRequest(datasource, searchValue, searchIn, searchParam);
+                return items;
+            }
+            const searchedItems = [];
+            const promises = searchValue.map((value) => __awaiter(this, void 0, void 0, function* () {
+                const [item] = yield this.searchRequest(datasource, value, searchIn, searchParam);
+                searchedItems.push(item);
+            }));
+            yield Promise.all(promises);
+            return searchedItems;
+        });
+    }
+    searchRequest(datasource, searchValue, searchIn, searchParam) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const config = Object.assign(Object.assign(Object.assign({}, datasource.clone()), this.dsSearch[searchParam](searchValue, searchIn)), { lazyLoad: true, loadAll: Array.isArray(searchValue) });
+            const cloneDatasource = DatasourceFactory.factory(config);
+            const items = yield cloneDatasource.get();
+            cloneDatasource.destroy();
+            if (Array.isArray(searchValue)) {
+                return items.filter((item) => searchValue.includes(item[searchIn]));
+            }
+            return items.filter((row) => row[searchIn] === searchValue);
+        });
+    }
+}
+
+const uniqueBy = (a, key) => {
+    const seen = {};
+    return a.filter((item) => {
+        const k = item[key] || JSON.stringify(item);
+        if (!seen[k]) {
+            seen[k] = true;
+            return true;
+        }
+        return false;
+    });
+};
+
 /**
  * Base class for Select component.
  */
@@ -10121,18 +10260,13 @@ class Select extends TextInput {
      * Finds and retrieves items searching by value
      * @param value Default value
      */
-    getItemsBySearchValue(value, searchIn) {
+    getItemsBySearchValue(value) {
         return __awaiter(this, void 0, void 0, function* () {
-            const config = Object.assign(Object.assign(Object.assign({}, this.datasource.clone()), this.dsSearch[this.searchParam](value, searchIn)), { lazyLoad: true, loadAll: Array.isArray(value) });
             this.datasource.loading = true;
-            const datasource = DatasourceFactory.factory(config);
-            const items = yield datasource.get();
+            const datasourceSearcher = new DatasourceSearcher();
+            const result = yield datasourceSearcher.search(this.datasource, value, this.dataValue, this.searchParam);
             this.datasource.loading = false;
-            datasource.destroy();
-            if (Array.isArray(value)) {
-                return items.filter((item) => value.includes(item[this.dataValue]));
-            }
-            return items.filter(this.getCondition(value));
+            return result;
         });
     }
     getCondition(filterValue) {
@@ -10157,17 +10291,6 @@ class Select extends TextInput {
             this.updateSearch(this.dirtySearchValue);
         });
     }
-    uniqueBy(a, key) {
-        const seen = {};
-        return a.filter((item) => {
-            const k = item[key] || JSON.stringify(item);
-            if (!seen[k]) {
-                seen[k] = true;
-                return true;
-            }
-            return false;
-        });
-    }
     afterLoad() {
         if (this.manualMode)
             return;
@@ -10233,11 +10356,10 @@ class Select extends TextInput {
             else {
                 filterValue = value;
             }
-            const searchIn = this.dataValue;
             const foundInData = this.datasource.data.find(this.getCondition(filterValue));
             let searchValue = foundInData;
             if (!foundInData && !this.manualMode) {
-                [searchValue] = yield this.getItemsBySearchValue(filterValue, searchIn);
+                [searchValue] = yield this.getItemsBySearchValue(filterValue);
             }
             if (!searchValue) {
                 this.setFieldRowValue(null);
@@ -10535,7 +10657,7 @@ class Select extends TextInput {
         });
     }
 }
-FormatterParserProvider.registerFormatter('ZdSelect', (value, { dataText, dataTextSeparator = ' | ', }) => {
+FormatterParserProvider.registerFormatter('ZdSelect', (value, { dataText, dataTextSeparator = ' | ', eagerMask, }) => {
     if (value === null || value === undefined) {
         return null;
     }
@@ -10567,7 +10689,7 @@ FormatterParserProvider.registerFormatter('ZdSelect', (value, { dataText, dataTe
             let masked = value[column];
             if (masks[index]) {
                 const maskValue = typeof masks[index] === 'function' ? masks[index](value[column]) : masks[index];
-                masked = Mask.getValueWithMask(value[column], maskValue);
+                masked = Mask.getValueWithMask(value[column], maskValue, false, eagerMask);
             }
             return result + separator + masked;
         }
@@ -10870,15 +10992,12 @@ class IterableComponentRender extends Iterable {
         this.createAccessors();
     }
     addSlashes(value) {
-        if (typeof value === 'string') {
-            return value.replace(/\\/g, '\\\\')
-                .replace(/\t/g, '\\t')
-                .replace(/\n/g, '\\n')
-                .replace(/\f/g, '\\f')
-                .replace(/\r/g, '\\r')
-                .replace(/"/g, '\\"');
-        }
-        return value;
+        return value.replace(/\\/g, '\\\\')
+            .replace(/\t/g, '\\t')
+            .replace(/\n/g, '\\n')
+            .replace(/\f/g, '\\f')
+            .replace(/\r/g, '\\r')
+            .replace(/"/g, '\\"');
     }
     /**
      * Returns the iterable component metadata based on row data
@@ -10891,14 +11010,13 @@ class IterableComponentRender extends Iterable {
             .replace(rowExp, JSON.stringify(row))
             .replace(exp, (match) => {
             const propPath = match.replace(/<<|>>|"/g, '').split('.').splice(1).join('.');
-            const value = this.addSlashes(get(row, propPath));
+            let value = get(row, propPath);
+            if (value === undefined || value === null)
+                value = '';
             if (typeof value === 'string') {
-                if (match.startsWith('"') && match.endsWith('"'))
-                    return `"${value}"`;
-                return value;
+                const escaped = this.addSlashes(value);
+                return match.startsWith('"') && match.endsWith('"') ? `"${escaped}"` : escaped;
             }
-            if (value === undefined)
-                return '""';
             return value;
         });
         return JSON.parse(metadata);
@@ -12178,7 +12296,8 @@ FormatterParserProvider.registerParser('ZdMonth', (value, { dateFormat = Config.
         }
     }
     return value;
-});
+});
+InputFactory.register('ZdMonth', Month);
 
 /**
  * Base class for Password component.
@@ -12575,19 +12694,10 @@ class SelectMultiple extends Select {
                 this.insertedValues.push(item);
                 pushed = true;
             });
-            // using filter/find/dynamicFilter should make only 1 request
-            // using normal search should make one request per search value
-            if (this.searchParam !== 'SEARCH') {
-                const items = yield this.getItemsBySearchValue(searchedValues, this.dataValue);
+            if (searchedValues.length) {
+                const items = yield this.getItemsBySearchValue(searchedValues);
                 items.forEach(insertItem);
             }
-            else {
-                const promises = searchedValues.map((searchedValue) => __awaiter(this, void 0, void 0, function* () {
-                    const [item] = yield this.getItemsBySearchValue(searchedValue, this.dataValue);
-                    insertItem(item);
-                }));
-                yield Promise.all(promises);
-            }
             if (foundValues.length > 0) {
                 this.setFieldRowValue(foundValues);
             }
@@ -12825,7 +12935,7 @@ class SelectMultiple extends Select {
         if (this.manualMode)
             return;
         if (this.insertedValues.length) {
-            this.datasource.data = this.uniqueBy(this.insertedValues.concat(this.datasource.data), this.datasource.uniqueKey);
+            this.datasource.data = uniqueBy(this.insertedValues.concat(this.datasource.data), this.datasource.uniqueKey);
             const values = this.insertedValues.map((inserted) => inserted[this.dataValue]);
             // prevent caching insertedValues
             this.cachedData = this.datasource.data.filter((row) => !values.includes(row[this.dataValue]));
@@ -12968,7 +13078,8 @@ FormatterParserProvider.registerFormatter('ZdSelectMultiple', (value, props) =>
         return formattedRow;
     });
     return formattedValue;
-});
+});
+InputFactory.register('ZdSelectMultiple', SelectMultiple);
 
 /**
  * Base class for Select Tree  component.
@@ -13059,6 +13170,7 @@ 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
          */
@@ -13080,6 +13192,10 @@ class SelectTree extends TextInput {
          */
         this.dataValueOutFormName = '';
         this.formatterFn = FormatterParserProvider.getFormatter('ZdSelectTree');
+        /**
+         * Defines if data handling should be manual or automatic
+         */
+        this.searchParam = 'SEARCH';
         this.savedNodes = undefined;
         this.search = '';
         this.debounceSearch = debounce(this.searchChange, 500);
@@ -13107,6 +13223,7 @@ class SelectTree extends TextInput {
         this.autoSelection = this.getInitValue('autoSelection', props.autoSelection, this.autoSelection);
         this.dataValueOut = this.getInitValue('dataValueOut', props.dataValueOut, this.dataValueOut);
         this.dataValueOutFormName = this.getInitValue('dataValueOutFormName', props.dataValueOutFormName, this.dataValueOutFormName);
+        this.searchParam = this.getInitValue('searchParam', props.searchParam, this.searchParam);
         if (props.datasource && Object.keys(props.datasource).length) {
             this.lazyLoad = props.datasource.lazyLoad !== false;
             const searchFields = Array.isArray(this.dataText) ? this.dataText : [this.dataText];
@@ -13176,6 +13293,9 @@ class SelectTree extends TextInput {
             this.nodes = this.createChildrenNodes(firstLevelNodes);
         }
     }
+    /**
+     * Creates a Tree Node from a datasource row
+     */
     createNodeFromRow(row) {
         let children;
         if (this.fetchOnDemand && !this.datasource.search) {
@@ -13315,31 +13435,71 @@ class SelectTree extends TextInput {
         });
         return result;
     }
+    clearNodeRow(row) {
+        return this.clearRow(row.row || row);
+    }
+    /**
+     * Finds and retrieves items searching by value
+     * @param value Default value
+     */
+    getItemsBySearchValue(value) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.datasource.loading = true;
+            const datasourceSearcher = new DatasourceSearcher();
+            const result = yield datasourceSearcher.search(this.datasource, value, this.dataValue, this.searchParam);
+            this.datasource.loading = false;
+            return result;
+        });
+    }
     get value() {
         if (!this.selectValue)
             return this.selectValue;
         if (this.returnObject) {
-            return this.clearRow(this.selectValue.row || this.selectValue);
+            return this.clearNodeRow(this.selectValue);
         }
-        return this.selectValue;
+        const key = this.datasource ? this.dataValue : 'id';
+        return this.selectValue[key];
     }
     set value(value) {
         this.setValue(value);
     }
     setValue(value) {
-        let val = value;
-        const key = this.datasource ? this.dataValue : 'id';
-        if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
-            val = value[key];
-        }
-        else if (!value && value !== 0) {
-            val = null;
-        }
-        if (this.returnObject) {
-            this.selectValue = val ? { id: val } : null;
-            return;
-        }
-        this.selectValue = val;
+        return __awaiter(this, void 0, void 0, function* () {
+            let val = null;
+            const key = this.datasource ? this.dataValue : 'id';
+            if (!value && value !== 0) {
+                val = null;
+            }
+            else if (typeof value === 'object') {
+                val = value[key];
+            }
+            else {
+                val = value;
+            }
+            if (!val) {
+                this.selectValue = null;
+                return;
+            }
+            if (!this.datasource) {
+                this.selectValue = { id: val };
+                return;
+            }
+            const searchIn = this.dataValue;
+            const foundInData = this.datasource.data.find((row) => row[searchIn] === val);
+            let foundValue = foundInData;
+            if (!foundInData) {
+                [foundValue] = yield this.getItemsBySearchValue(val);
+            }
+            if (!foundValue) {
+                if (typeof value === 'object') {
+                    this.selectValue = Object.assign({ id: val }, value);
+                    return;
+                }
+                this.selectValue = { id: val };
+                return;
+            }
+            this.selectValue = foundValue;
+        });
     }
     loadChildren(parentNode) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -13392,6 +13552,7 @@ 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
          */
@@ -13410,7 +13571,9 @@ class SelectTreeMultiple extends SelectTree {
      * Triggered after selected nodes change
      */
     changeSelectedNodes(selectedNodes, element) {
-        this.callEvent('onChangeSelectedNodes', { element, component: this, selectedNodes });
+        const selection = this.returnObject
+            ? selectedNodes.map((value) => this.clearNodeRow(value)) : selectedNodes.map((node) => node.id);
+        this.callEvent('onChangeSelectedNodes', { element, component: this, selectedNodes: selection });
     }
     /**
      * Triggered deselecting an node
@@ -13422,34 +13585,58 @@ class SelectTreeMultiple extends SelectTree {
         if (!this.selectValue)
             return [];
         if (this.returnObject) {
-            return this.selectValue.map((value) => this.clearRow(value.row || value));
+            return this.selectValue.map((value) => this.clearNodeRow(value));
         }
-        return this.selectValue;
+        const key = this.datasource ? this.dataValue : 'id';
+        return this.selectValue.map((item) => item[key]);
     }
     set value(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.selectValue = arrValue.map((item) => {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!value) {
+                this.selectValue = [];
+                return;
+            }
+            const arrValue = Array.isArray(value) ? value : [value];
+            const key = this.datasource ? this.dataValue : 'id';
+            if (!this.datasource) {
+                this.selectValue = arrValue.map((item) => {
+                    if (item && typeof item === 'object') {
+                        return item;
+                    }
+                    return { [key]: item };
+                });
+                return;
+            }
+            const valuesToSearch = [];
+            const foundValues = [];
+            const insertItem = (item) => __awaiter(this, void 0, void 0, function* () {
+                if (!item)
+                    return;
+                foundValues.push(item);
+            });
+            arrValue.forEach((item) => __awaiter(this, void 0, void 0, function* () {
+                const searchIn = this.dataValue;
+                if (!item)
+                    return;
                 if (typeof item === 'object') {
-                    return item[key];
+                    insertItem(item);
+                    return;
                 }
-                return item;
-            });
-            return;
-        }
-        this.selectValue = arrValue.map((item) => {
-            if (typeof item !== 'object') {
-                return { id: item };
+                const foundInData = this.datasource.data.find((row) => row[searchIn] === item);
+                if (!foundInData) {
+                    valuesToSearch.push(item);
+                    return;
+                }
+                insertItem(foundInData);
+            }));
+            if (valuesToSearch.length) {
+                const items = yield this.getItemsBySearchValue(valuesToSearch);
+                items.forEach(insertItem);
             }
-            return { id: item[key] };
+            this.selectValue = foundValues;
         });
     }
     /**
@@ -13497,16 +13684,18 @@ class SelectTreeMultiple extends SelectTree {
      */
     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);
+        return __awaiter(this, void 0, void 0, function* () {
+            if (((_a = this.datasource) === null || _a === void 0 ? void 0 : _a.data) && this.fetchOnDemand) {
+                yield 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());
+            yield this.setValue(uniqueArray);
+        });
     }
     /**
      * Unelects all items in the tree \
@@ -13518,21 +13707,23 @@ class SelectTreeMultiple extends SelectTree {
      */
     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);
+        return __awaiter(this, void 0, void 0, function* () {
+            if (((_a = this.datasource) === null || _a === void 0 ? void 0 : _a.data) && this.fetchOnDemand) {
+                yield 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());
+            yield this.setValue(uniqueArray);
         });
-        const uniqueArray = Array.from(nodeMap.values());
-        this.setValue(uniqueArray);
     }
     /**
      * Takes two arrays and creates a map of the unique values
@@ -13554,15 +13745,15 @@ class SelectTreeMultiple extends SelectTree {
         return this.value;
     }
     getValueAsObject() {
-        return this.value.map((row) => {
-            if (this.returnObject)
-                return row;
-            return { id: row };
+        return this.selectValue.map((row) => {
+            const key = this.datasource ? this.dataValue : 'id';
+            return Object.assign({ id: row[key] }, row);
         });
     }
 }
 const selectFormatterFn = FormatterParserProvider.getFormatter('ZdSelectMultiple');
-FormatterParserProvider.registerFormatter('ZdSelectTreeMultiple', selectFormatterFn);
+FormatterParserProvider.registerFormatter('ZdSelectTreeMultiple', selectFormatterFn);
+InputFactory.register('ZdSelectTreeMultiple', SelectTreeMultiple);
 
 /**
  * Base class for SelectableList component.
@@ -15987,7 +16178,7 @@ const storeOrRetrieveLookup = (column, row, value, dataValue, componentProps) =>
     }
     return row;
 };
-const formatter$1 = ({ column, value, row, componentProps, }) => {
+const formatter$2 = ({ column, value, row, componentProps, }) => {
     if (value === null || value === undefined)
         return '';
     const { dataText, formatterDataText, dataTextSeparator, dataValue, dataTextDiscrete, foreignColumns, } = componentProps;
@@ -16018,12 +16209,12 @@ const formatter$1 = ({ column, value, row, componentProps, }) => {
         return currentRow[textColumn] || value;
     }
     const formatterFn = FormatterParserProvider.getFormatter('ZdSelect');
-    return formatterFn(currentRow, { dataText: textColumn, dataTextSeparator });
+    return formatterFn(currentRow, { dataText: textColumn, dataTextSeparator, eagerMask: false });
 };
-FormatterParserProvider.registerFormatter('column_ZdSelect', formatter$1);
-FormatterParserProvider.registerFormatter('column_ZdSelectTree', formatter$1);
+FormatterParserProvider.registerFormatter('column_ZdSelect', formatter$2);
+FormatterParserProvider.registerFormatter('column_ZdSelectTree', formatter$2);
 
-const formatter = ({ column, value, row, componentProps, }) => {
+const formatter$1 = ({ column, value, row, componentProps, }) => {
     if (!value || !Array.isArray(value) || value.length === 0)
         return '';
     const { formatterDataText, foreignColumns, dataText } = componentProps;
@@ -16061,11 +16252,15 @@ const formatter = ({ column, value, row, componentProps, }) => {
     });
     return result.join(', ');
 };
-FormatterParserProvider.registerFormatter('column_ZdSelectMultiple', formatter);
-FormatterParserProvider.registerFormatter('column_ZdSelectTreeMultiple', formatter);
+FormatterParserProvider.registerFormatter('column_ZdSelectMultiple', formatter$1);
+FormatterParserProvider.registerFormatter('column_ZdSelectTreeMultiple', formatter$1);
+
+const defaultFormatter = FormatterParserProvider.getFormatter('ZdTextInput');
+const formatter = ({ value, componentProps, }) => defaultFormatter(value, Object.assign(Object.assign({}, componentProps), { eagerMask: false }));
+FormatterParserProvider.registerFormatter('column_ZdTextInput', formatter);
 
 const AutoNumeric = require('@zeedhi/autonumeric/dist/autoNumeric');
 const packageContent = require('../package.json');
 VersionService.addPackageVersion(packageContent.name, packageContent.version);
 
-export { Alert, AlertService, ApexChart, AutoNumeric, Badge, Breadcrumbs, Button, ButtonGroup, CSVReport, Card, Carousel, Checkbox, CheckboxMultiple, ChildNotFoundError, Chip, CodeEditor, Col, CollapseCard, Column, ColumnNotFoundError, Component, ComponentRender, Container, Currency, Dashboard, DataValueOutHelper, Date$1 as Date, DateRange, Dialog, DialogService, Divider, Dropdown, EmptyDataError, FileInput, Footer, Form, Frame, FramePage, Grid, GridColumn, GridColumnEditable, GridEditable, GroupedPDFFormatter, Header, Icon, Icons, Image, Increment, Input, InputFactory, Iterable, IterableColumnsButton, IterableColumnsButtonController, IterableComponentRender, IterablePageComponent, IterablePageInfo, IterablePageSize, IterablePagination, List, ListGroup, ListItem, Loading, LoadingService, Login, LoginButton, MasterDetail, Menu, MenuButton, MenuGroup, MenuLink, MenuSeparator, Modal, ModalCloseButton, ModalService, Month, Number$1 as Number, PDFReport, Password, Progress, Radio, RangeSlider, Report, Row, Search, Select, SelectMultiple, SelectTree, SelectTreeMultiple, SelectableList, SpeedDial, Steppers, SvgMap, Switch, Tab, Table, Tabs, Tag, Text, TextInput, Textarea, Time, Toggleable, Tooltip, Tree, TreeDataStructure, TreeGrid, TreeGridEditable, WatchURL, XLS2Report, XLS3Report, XLSReport, initTheme };
+export { Alert, AlertService, ApexChart, AutoNumeric, Badge, Breadcrumbs, Button, ButtonGroup, CSVReport, Card, Carousel, Checkbox, CheckboxMultiple, ChildNotFoundError, Chip, CodeEditor, Col, CollapseCard, Column, ColumnNotFoundError, Component, ComponentRender, Container, Currency, Dashboard, DataValueOutHelper, DatasourceSearcher, Date$1 as Date, DateRange, Dialog, DialogService, Divider, Dropdown, EmptyDataError, FileInput, Footer, Form, Frame, FramePage, Grid, GridColumn, GridColumnEditable, GridEditable, GroupedPDFFormatter, Header, Icon, Icons, Image, Increment, Input, InputFactory, Iterable, IterableColumnsButton, IterableColumnsButtonController, IterableComponentRender, IterablePageComponent, IterablePageInfo, IterablePageSize, IterablePagination, List, ListGroup, ListItem, Loading, LoadingService, Login, LoginButton, MasterDetail, Menu, MenuButton, MenuGroup, MenuLink, MenuSeparator, Modal, ModalCloseButton, ModalService, Month, Number$1 as Number, PDFReport, Password, Progress, Radio, RangeSlider, Report, Row, Search, Select, SelectMultiple, SelectTree, SelectTreeMultiple, SelectableList, SpeedDial, Steppers, SvgMap, Switch, Tab, Table, Tabs, Tag, Text, TextInput, Textarea, Time, Toggleable, Tooltip, Tree, TreeDataStructure, TreeGrid, TreeGridEditable, WatchURL, XLS2Report, XLS3Report, XLSReport, initTheme, uniqueBy };