@zeedhi/common 1.105.0 → 1.106.0

package/dist/zd-common.esm.js

@@ -1,4 +1,4 @@
-import { AccessorManager, Event, KeyMap, MethodNotAssignedError, Metadata, Accessor, I18n, FormatterParserProvider, Validation, Mask, DatasourceFactory, Loader, Config, dayjs, Utils, DateHelper, Router, InstanceNotFoundError, ViewService, MemoryDatasource, URL as URL$1, Http, Cookie, VersionService } from '@zeedhi/core';
+import { AccessorManager, Event, KeyMap, MethodNotAssignedError, Metadata, Accessor, I18n, FormatterParserProvider, Validation, Mask, DatasourceFactory, Loader, Config, dayjs, Utils, DateHelper, Router, InstanceNotFoundError, ViewService, MemoryDatasource, URL as URL$1, Http, Messages, Cookie, VersionService } from '@zeedhi/core';
 import merge from 'lodash.merge';
 import cloneDeep from 'lodash.clonedeep';
 import debounce from 'lodash.debounce';
@@ -1914,7 +1914,7 @@ class Input extends ComponentRender {
         this.internalDisplayValue = '';
         this.internalValue = null;
         this.formParent = this.getFormParent();
-        this.lastInputValue = undefined;
+        this.lastInputValue = '';
         this.callInputEvent = debounce(({ event, element, component }) => {
             this.callEvent('input', { event, element, component });
         }, 50);
@@ -5396,6 +5396,8 @@ class Column extends Component {
         this.actionFactoredConditions = {};
         this.helperText = '';
         this.defaultData = [];
+        /* Column search mode */
+        this.searchMode = 'any';
         this.lookup = debounce((lookupColumn) => {
             this.loading = true;
             const dataToLookup = Array.from(new Set(this.dataToLookup)); // remove duplicates
@@ -5426,6 +5428,7 @@ class Column extends Component {
         this.componentProps = this.getInitValue('componentProps', props.componentProps, this.componentProps);
         this.xlsType = this.getInitValue('xlsType', props.xlsType, this.xlsType);
         this.conditions = this.getInitValue('conditions', props.conditions, this.conditions);
+        this.searchMode = this.getInitValue('searchMode', props.searchMode, this.searchMode);
         this.helperText = this.getInitValue('', props.helperText, this.helperText);
         this.createConditions();
         this.createActionConditions();
@@ -5586,6 +5589,7 @@ class ColumnNotFoundError extends Error {
 class IterableController {
     constructor(iterable) {
         this.searchInValue = undefined;
+        this.searchInParamsValue = undefined;
         this.iterable = iterable;
     }
     get searchIn() {
@@ -5598,6 +5602,16 @@ class IterableController {
     set searchIn(value) {
         this.searchInValue = value;
     }
+    get searchInParams() {
+        return this.searchInParamsValue || this.iterable.columns.reduce((result, column) => {
+            if (!!column.searchMode && column.searchMode !== 'any')
+                result[column.name] = column.searchMode;
+            return result;
+        }, {});
+    }
+    set searchInParams(value) {
+        this.searchInParamsValue = value;
+    }
 }
 
 /**
@@ -5646,12 +5660,13 @@ class Iterable extends ComponentRender {
         this.searchVisibleOnly = this.getInitValue('searchVisibleOnly', props.searchVisibleOnly, this.defaultSearchVisibleOnly);
         this.virtualScroll = this.getInitValue('virtualScroll', props.virtualScroll, this.virtualScroll);
         this.virtualScrollCache = this.getInitValue('virtualScrollCache', props.virtualScrollCache, this.virtualScrollCache);
+        this.searchIn = this.getInitValue('searchIn', props.searchIn, this.searchIn);
     }
     getDatasourceDefaults() {
         return {};
     }
     initializeDatasource(props) {
-        var _a;
+        var _a, _b;
         let datasourceProps = props.datasource;
         // if using accessor, get props from the controller
         if (typeof props.datasource === 'string' && Accessor.isAccessorDefinition(props.datasource)) {
@@ -5659,7 +5674,7 @@ class Iterable extends ComponentRender {
             const instance = Loader.getInstance(controller);
             datasourceProps = instance[accessor];
         }
-        this.datasource = DatasourceFactory.factory(Object.assign(Object.assign(Object.assign({}, datasourceProps), this.getDatasourceDefaults()), { searchIn: ((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.searchIn) || `{{IterableController_${this.name}.searchIn}}` }));
+        this.datasource = DatasourceFactory.factory(Object.assign(Object.assign(Object.assign({}, datasourceProps), this.getDatasourceDefaults()), { searchIn: ((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.searchIn) || `{{IterableController_${this.name}.searchIn}}`, searchInParams: ((_b = props.datasource) === null || _b === void 0 ? void 0 : _b.searchInParams) || `{{IterableController_${this.name}.searchInParams}}` }));
     }
     createController() {
         const controller = new IterableController(this);
@@ -5762,7 +5777,7 @@ class Iterable extends ComponentRender {
         });
     }
     isColumnSearchable(column) {
-        return !this.searchVisibleOnly || column.isVisible;
+        return (!this.searchVisibleOnly || column.isVisible) && (this.searchIn === undefined || this.searchIn === column.name);
     }
 }
 
@@ -5897,7 +5912,7 @@ FormatterParserProvider.registerFormatter('column_ZdSelect', ({ column, value, r
             });
         }
     }
-    const textColumn = formatterDataText || dataTextDiscrete || dataTextForeign;
+    const textColumn = dataTextDiscrete || formatterDataText || dataTextForeign;
     if (!textColumn)
         return value;
     if (typeof textColumn === 'string') {
@@ -7175,10 +7190,7 @@ class GridEditable extends Grid {
         }
         let allValid = true;
         this.datasource.data.forEach((row) => this.columns.forEach((column) => {
-            const rowKey = row[this.datasource.uniqueKey];
-            const cellsApplied = (this.cellsApplied[rowKey] || {})[column.name];
-            const columnWithConditions = Object.assign(Object.assign({}, column), cellsApplied);
-            if (!column.isVisible || !columnWithConditions.editable)
+            if (!this.isColumnEditable(column, row))
                 return;
             if (!this.isValid(column, row, true))
                 allValid = false;
@@ -7304,6 +7316,12 @@ class GridEditable extends Grid {
         const column = this.getColumn(columnName);
         this.changeCell(rowKey, rowIdx, column, value);
     }
+    isColumnEditable(column, row) {
+        const rowKey = row[this.datasource.uniqueKey];
+        const cellsApplied = (this.cellsApplied[rowKey] || {})[column.name];
+        const columnWithConditions = Object.assign(Object.assign({}, column), cellsApplied);
+        return column.isVisible && columnWithConditions.editable && this.callCanEditRow(row);
+    }
     /**
      * Changes a cell value in editedRows
      * @param rowKey Cell's row key
@@ -7314,7 +7332,7 @@ class GridEditable extends Grid {
     changeCell(rowKey, rowIdx, column, value) {
         const originalRow = this.datasource.data[rowIdx];
         // Column doesn't have component
-        if (!column.editable || !column.isVisible) {
+        if (!this.isColumnEditable(column, originalRow)) {
             this.changeEditableComponent(column, originalRow, value);
             return;
         }
@@ -7890,6 +7908,7 @@ Icons.mdiIcons = {
     success: 'mdi-check-circle',
     tableConfig: 'mdi-table-cog',
     tableColumns: 'mdi-table-headers-eye',
+    tableSearch: 'mdi-table-search',
     unfold: 'mdi-unfold-more-horizontal',
     warning: 'mdi-exclamation',
     zoom: 'mdi-magnify',
@@ -7948,6 +7967,7 @@ Icons.faIcons = {
     success: 'fa fa-check-circle',
     tableConfig: 'fa fa-columns',
     tableColumns: 'fa fa-columns',
+    tableSearch: 'fa fa-search',
     unfold: 'fa fa-sort',
     warning: 'fa fa-exclamation',
     zoom: 'fa fa-search',
@@ -9641,6 +9661,10 @@ class Select extends TextInput {
          */
         this.dataValueOutFormName = '';
         this.closeOnScroll = true;
+        /* Defines if should open modal with grid to make the selection */
+        this.modalSelection = false;
+        /* Defines fields to show on modal */
+        this.modalSelectionFields = [];
         this.dsSearch = {
             SEARCH: (value, searchIn) => ({
                 searchIn: [searchIn],
@@ -9676,6 +9700,7 @@ class Select extends TextInput {
         this.pushedValue = null;
         this.loadMoreQtty = 0;
         this.debounceSearch = debounce(this.doSearch, 500);
+        this.modalSelectionObj = undefined;
         this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'expand');
         this.dataText = this.getInitValue('dataText', props.dataText, this.dataText);
         this.dataTextDiscrete = this.getInitValue('dataTextDiscrete', props.dataTextDiscrete, this.dataTextDiscrete);
@@ -9694,6 +9719,8 @@ class Select extends TextInput {
         this.dataValueOut = this.getInitValue('dataValueOut', props.dataValueOut, this.dataValueOut);
         this.dataValueOutFormName = this.getInitValue('dataValueOutFormName', props.dataValueOutFormName, this.dataValueOutFormName);
         this.closeOnScroll = this.getInitValue('closeOnScroll', props.closeOnScroll, this.closeOnScroll);
+        this.modalSelection = this.getInitValue('modalSelection', props.modalSelection, this.modalSelection);
+        this.modalSelectionFields = this.getInitValue('modalSelectionFields', props.modalSelectionFields, this.modalSelectionFields);
         if (((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.type) === 'simple') {
             this.dataValue = 'value';
             this.dataText = this.dataText || this.dataValue;
@@ -9706,8 +9733,8 @@ class Select extends TextInput {
             dataText: this.dataTextDiscrete,
             dataTextSeparator: this.dataTextSeparator,
         };
-        const defaultDatasource = this.getDefaultDatasource(props);
-        this.datasource = DatasourceFactory.factory(defaultDatasource);
+        this.defaultDatasource = this.getDefaultDatasource(props);
+        this.datasource = DatasourceFactory.factory(this.defaultDatasource);
         this.overrideGet();
         let defaultValue = props.value;
         if (Accessor.isAccessorDefinition(props.value)) {
@@ -9715,7 +9742,7 @@ class Select extends TextInput {
             this.getInitValue('value', props.value, this.value);
         }
         this.setDefaultValue(defaultValue, (_b = props.datasource) === null || _b === void 0 ? void 0 : _b.lazyLoad);
-        this.preventLoadOnFocus = !defaultDatasource.lazyLoad;
+        this.preventLoadOnFocus = !this.defaultDatasource.lazyLoad;
         this.preventLoadOnFocus = this.getInitValue('preventLoadOnFocus', props.preventLoadOnFocus, this.preventLoadOnFocus);
         this.loadMoreQtty = this.datasource.limit;
         this.itemAfterSlot = props.itemAfterSlot || this.itemAfterSlot;
@@ -9729,6 +9756,31 @@ class Select extends TextInput {
         const instance = Loader.getInstance(controller);
         return instance[accessor];
     }
+    onMounted(element) {
+        super.onMounted(element);
+        if (this.modalSelection && this.modalSelectionFields.length) {
+            KeyMap.bind({
+                'shift+enter': {
+                    active: true,
+                    input: true,
+                    stop: true,
+                    prevent: true,
+                    event: this.openModalSelection.bind(this),
+                },
+            }, this, element);
+        }
+    }
+    onBeforeDestroy() {
+        super.onBeforeDestroy();
+        this.datasource.destroy();
+        if (this.modalSelection && this.modalSelectionFields.length) {
+            KeyMap.unbind({
+                'shift+enter': {
+                    event: this.openModalSelection.bind(this),
+                },
+            }, this);
+        }
+    }
     /**
      * Retrieves datasource structure applying infinity scroll
      * @param field Field structure
@@ -10103,10 +10155,6 @@ class Select extends TextInput {
             && !this.datasource.loadAll
             && this.datasource.data.length - (this.pushedValue ? 1 : 0) < this.datasource.total;
     }
-    onBeforeDestroy() {
-        super.onBeforeDestroy();
-        this.datasource.destroy();
-    }
     indexOf(search) {
         const value = search && typeof search === 'object' ? search[this.dataValue] : search;
         return this.datasource.data.findIndex((row) => row[this.dataValue] === value);
@@ -10114,6 +10162,105 @@ class Select extends TextInput {
     isFilledObj(obj) {
         return obj && typeof obj === 'object' && !Array.isArray(obj) && Object.keys(obj).length;
     }
+    hideModalSelection() {
+        if (this.modalSelectionObj)
+            this.modalSelectionObj.hide();
+    }
+    modalSelectionGridClick({ row }) {
+        this.setValue(row);
+        this.hideModalSelection();
+        setTimeout(() => {
+            if (this.viewCloseMenu)
+                this.viewCloseMenu();
+        }, 200);
+    }
+    openModalSelection() {
+        const modalSelectionDef = {
+            name: `${this.name}-modal-selection`,
+            persistent: true,
+            children: [
+                {
+                    name: `${this.name}-modal-selection-content-container`,
+                    component: 'ZdContainer',
+                    scrollView: true,
+                    cssClass: 'zd-my-2 zd-pa-0 zd-select-modal-selection-content-container',
+                    children: [
+                        {
+                            name: `${this.name}-modal-selection-grid`,
+                            component: 'ZdGrid',
+                            cssClass: 'zd-my-2 zd-pa-0 zd-select-modal-selection-grid',
+                            columns: this.modalSelectionFields,
+                            datasource: Object.assign(Object.assign({}, this.defaultDatasource), { lazyLoad: false, searchIn: undefined }),
+                            toolbarSlot: [
+                                {
+                                    name: `${this.name}-modal-selection-title`,
+                                    component: 'ZdText',
+                                    cssStyle: `color: ${'var(--v-primary-base);'}`,
+                                    text: this.label,
+                                    tag: 'h3',
+                                },
+                                {
+                                    name: `${this.name}-modal-selection-spacer`,
+                                    component: 'VSpacer',
+                                },
+                                {
+                                    name: `${this.name}-modal-selection_gridSearch`,
+                                    component: 'ZdSearch',
+                                    cssClass: 'zd-grid-search',
+                                    autofocus: true,
+                                },
+                            ],
+                            events: {
+                                rowClick: this.modalSelectionGridClick.bind(this),
+                            },
+                        },
+                    ],
+                },
+                {
+                    name: `${this.name}-modal-selection-footer-container`,
+                    component: 'ZdContainer',
+                    cssClass: 'zd-pa-0',
+                    children: [
+                        {
+                            name: `${this.name}-modal-selection-footer`,
+                            component: 'ZdFooter',
+                            color: 'transparent',
+                            padless: true,
+                            rightSlot: [
+                                {
+                                    name: `${this.name}-modal-selection-cancelButton`,
+                                    component: 'ZdButton',
+                                    label: 'CANCEL',
+                                    keyMap: {
+                                        esc: {
+                                            event: this.hideModalSelection.bind(this),
+                                            focus: true,
+                                            visible: true,
+                                            input: true,
+                                            stop: true,
+                                        },
+                                    },
+                                    outline: true,
+                                    events: {
+                                        click: this.hideModalSelection.bind(this),
+                                    },
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+            events: {
+                onShow: () => {
+                    const grid = Metadata.getInstance(`${this.name}-modal-selection-grid`);
+                    grid.datasource.currentRow = {};
+                },
+            },
+        };
+        if (!this.modalSelectionObj)
+            this.modalSelectionObj = ModalService.create(modalSelectionDef);
+        this.modalSelectionObj.show();
+    }
 }
 FormatterParserProvider.registerFormatter('ZdSelect', (value, { dataText, dataTextSeparator = ' | ', }) => {
     if (value === null || value === undefined) {
@@ -10154,7 +10301,24 @@ FormatterParserProvider.registerFormatter('ZdSelect', (value, { dataText, dataTe
         return result;
     }, '');
 });
-InputFactory.register('ZdSelect', Select);
+InputFactory.register('ZdSelect', Select);
+Messages.add({
+    'pt-BR': {
+        translation: {
+            SELECT_MODAL_KEYMAP: '(shift+enter) para abrir modal',
+        },
+    },
+    'en-US': {
+        translation: {
+            SELECT_MODAL_KEYMAP: '(shift+enter) to open modal',
+        },
+    },
+    'es-ES': {
+        translation: {
+            SELECT_MODAL_KEYMAP: '(shift+enter) para abrir el modal',
+        },
+    },
+});
 
 /**
  * Base class for Iterable Page Size component
@@ -10300,6 +10464,7 @@ class Search extends TextInput {
         this.placeholder = this.getInitValue('placeholder', props.placeholder, 'SEARCH');
         this.cssClass = this.getInitValue('cssClass', props.cssClass, 'zd-float-right');
         this.lazyAttach = this.getInitValue('lazyAttach', props.lazyAttach, this.lazyAttach);
+        this.debounceSetSearch = this.debounceSetSearch.bind(this);
         if (!this.lazyAttach)
             this.setIterableComponent();
         this.createAccessors();
@@ -10318,7 +10483,7 @@ class Search extends TextInput {
     }
     setSearch(search) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.iterableComponent.setSearch(search);
+            yield this.iterableComponent.setSearch(search.component.internalValue);
         });
     }
 }
@@ -10441,7 +10606,7 @@ class IterableComponentRender extends Iterable {
      * Returns the iterable component metadata based on row data
      */
     getComponentMetadata(row) {
-        const exp = new RegExp(`<<${this.rowPropName}.(.[A-z]+?)>>|"<<${this.rowPropName}.(.[A-z]+?)>>"`, 'g');
+        const exp = new RegExp(`<<${this.rowPropName}\\.([A-z_.]+?)>>|"<<${this.rowPropName}.(.[A-z_.]+?)>>"`, 'g');
         const rowExp = new RegExp(`"<<${this.rowPropName}>>"`, 'g');
         const metadata = JSON.stringify(this.componentMetadata)
             .replace(rowExp, JSON.stringify(row))

package/dist/zd-common.umd.js

@@ -1921,7 +1921,7 @@
           this.internalDisplayValue = '';
           this.internalValue = null;
           this.formParent = this.getFormParent();
-          this.lastInputValue = undefined;
+          this.lastInputValue = '';
           this.callInputEvent = debounce__default["default"](({ event, element, component }) => {
               this.callEvent('input', { event, element, component });
           }, 50);
@@ -5403,6 +5403,8 @@
           this.actionFactoredConditions = {};
           this.helperText = '';
           this.defaultData = [];
+          /* Column search mode */
+          this.searchMode = 'any';
           this.lookup = debounce__default["default"]((lookupColumn) => {
               this.loading = true;
               const dataToLookup = Array.from(new Set(this.dataToLookup)); // remove duplicates
@@ -5433,6 +5435,7 @@
           this.componentProps = this.getInitValue('componentProps', props.componentProps, this.componentProps);
           this.xlsType = this.getInitValue('xlsType', props.xlsType, this.xlsType);
           this.conditions = this.getInitValue('conditions', props.conditions, this.conditions);
+          this.searchMode = this.getInitValue('searchMode', props.searchMode, this.searchMode);
           this.helperText = this.getInitValue('', props.helperText, this.helperText);
           this.createConditions();
           this.createActionConditions();
@@ -5593,6 +5596,7 @@
   class IterableController {
       constructor(iterable) {
           this.searchInValue = undefined;
+          this.searchInParamsValue = undefined;
           this.iterable = iterable;
       }
       get searchIn() {
@@ -5605,6 +5609,16 @@
       set searchIn(value) {
           this.searchInValue = value;
       }
+      get searchInParams() {
+          return this.searchInParamsValue || this.iterable.columns.reduce((result, column) => {
+              if (!!column.searchMode && column.searchMode !== 'any')
+                  result[column.name] = column.searchMode;
+              return result;
+          }, {});
+      }
+      set searchInParams(value) {
+          this.searchInParamsValue = value;
+      }
   }
 
   /**
@@ -5653,12 +5667,13 @@
           this.searchVisibleOnly = this.getInitValue('searchVisibleOnly', props.searchVisibleOnly, this.defaultSearchVisibleOnly);
           this.virtualScroll = this.getInitValue('virtualScroll', props.virtualScroll, this.virtualScroll);
           this.virtualScrollCache = this.getInitValue('virtualScrollCache', props.virtualScrollCache, this.virtualScrollCache);
+          this.searchIn = this.getInitValue('searchIn', props.searchIn, this.searchIn);
       }
       getDatasourceDefaults() {
           return {};
       }
       initializeDatasource(props) {
-          var _a;
+          var _a, _b;
           let datasourceProps = props.datasource;
           // if using accessor, get props from the controller
           if (typeof props.datasource === 'string' && core.Accessor.isAccessorDefinition(props.datasource)) {
@@ -5666,7 +5681,7 @@
               const instance = core.Loader.getInstance(controller);
               datasourceProps = instance[accessor];
           }
-          this.datasource = core.DatasourceFactory.factory(Object.assign(Object.assign(Object.assign({}, datasourceProps), this.getDatasourceDefaults()), { searchIn: ((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.searchIn) || `{{IterableController_${this.name}.searchIn}}` }));
+          this.datasource = core.DatasourceFactory.factory(Object.assign(Object.assign(Object.assign({}, datasourceProps), this.getDatasourceDefaults()), { searchIn: ((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.searchIn) || `{{IterableController_${this.name}.searchIn}}`, searchInParams: ((_b = props.datasource) === null || _b === void 0 ? void 0 : _b.searchInParams) || `{{IterableController_${this.name}.searchInParams}}` }));
       }
       createController() {
           const controller = new IterableController(this);
@@ -5769,7 +5784,7 @@
           });
       }
       isColumnSearchable(column) {
-          return !this.searchVisibleOnly || column.isVisible;
+          return (!this.searchVisibleOnly || column.isVisible) && (this.searchIn === undefined || this.searchIn === column.name);
       }
   }
 
@@ -5904,7 +5919,7 @@
               });
           }
       }
-      const textColumn = formatterDataText || dataTextDiscrete || dataTextForeign;
+      const textColumn = dataTextDiscrete || formatterDataText || dataTextForeign;
       if (!textColumn)
           return value;
       if (typeof textColumn === 'string') {
@@ -7182,10 +7197,7 @@
           }
           let allValid = true;
           this.datasource.data.forEach((row) => this.columns.forEach((column) => {
-              const rowKey = row[this.datasource.uniqueKey];
-              const cellsApplied = (this.cellsApplied[rowKey] || {})[column.name];
-              const columnWithConditions = Object.assign(Object.assign({}, column), cellsApplied);
-              if (!column.isVisible || !columnWithConditions.editable)
+              if (!this.isColumnEditable(column, row))
                   return;
               if (!this.isValid(column, row, true))
                   allValid = false;
@@ -7311,6 +7323,12 @@
           const column = this.getColumn(columnName);
           this.changeCell(rowKey, rowIdx, column, value);
       }
+      isColumnEditable(column, row) {
+          const rowKey = row[this.datasource.uniqueKey];
+          const cellsApplied = (this.cellsApplied[rowKey] || {})[column.name];
+          const columnWithConditions = Object.assign(Object.assign({}, column), cellsApplied);
+          return column.isVisible && columnWithConditions.editable && this.callCanEditRow(row);
+      }
       /**
        * Changes a cell value in editedRows
        * @param rowKey Cell's row key
@@ -7321,7 +7339,7 @@
       changeCell(rowKey, rowIdx, column, value) {
           const originalRow = this.datasource.data[rowIdx];
           // Column doesn't have component
-          if (!column.editable || !column.isVisible) {
+          if (!this.isColumnEditable(column, originalRow)) {
               this.changeEditableComponent(column, originalRow, value);
               return;
           }
@@ -7897,6 +7915,7 @@
       success: 'mdi-check-circle',
       tableConfig: 'mdi-table-cog',
       tableColumns: 'mdi-table-headers-eye',
+      tableSearch: 'mdi-table-search',
       unfold: 'mdi-unfold-more-horizontal',
       warning: 'mdi-exclamation',
       zoom: 'mdi-magnify',
@@ -7955,6 +7974,7 @@
       success: 'fa fa-check-circle',
       tableConfig: 'fa fa-columns',
       tableColumns: 'fa fa-columns',
+      tableSearch: 'fa fa-search',
       unfold: 'fa fa-sort',
       warning: 'fa fa-exclamation',
       zoom: 'fa fa-search',
@@ -9648,6 +9668,10 @@
            */
           this.dataValueOutFormName = '';
           this.closeOnScroll = true;
+          /* Defines if should open modal with grid to make the selection */
+          this.modalSelection = false;
+          /* Defines fields to show on modal */
+          this.modalSelectionFields = [];
           this.dsSearch = {
               SEARCH: (value, searchIn) => ({
                   searchIn: [searchIn],
@@ -9683,6 +9707,7 @@
           this.pushedValue = null;
           this.loadMoreQtty = 0;
           this.debounceSearch = debounce__default["default"](this.doSearch, 500);
+          this.modalSelectionObj = undefined;
           this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'expand');
           this.dataText = this.getInitValue('dataText', props.dataText, this.dataText);
           this.dataTextDiscrete = this.getInitValue('dataTextDiscrete', props.dataTextDiscrete, this.dataTextDiscrete);
@@ -9701,6 +9726,8 @@
           this.dataValueOut = this.getInitValue('dataValueOut', props.dataValueOut, this.dataValueOut);
           this.dataValueOutFormName = this.getInitValue('dataValueOutFormName', props.dataValueOutFormName, this.dataValueOutFormName);
           this.closeOnScroll = this.getInitValue('closeOnScroll', props.closeOnScroll, this.closeOnScroll);
+          this.modalSelection = this.getInitValue('modalSelection', props.modalSelection, this.modalSelection);
+          this.modalSelectionFields = this.getInitValue('modalSelectionFields', props.modalSelectionFields, this.modalSelectionFields);
           if (((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.type) === 'simple') {
               this.dataValue = 'value';
               this.dataText = this.dataText || this.dataValue;
@@ -9713,8 +9740,8 @@
               dataText: this.dataTextDiscrete,
               dataTextSeparator: this.dataTextSeparator,
           };
-          const defaultDatasource = this.getDefaultDatasource(props);
-          this.datasource = core.DatasourceFactory.factory(defaultDatasource);
+          this.defaultDatasource = this.getDefaultDatasource(props);
+          this.datasource = core.DatasourceFactory.factory(this.defaultDatasource);
           this.overrideGet();
           let defaultValue = props.value;
           if (core.Accessor.isAccessorDefinition(props.value)) {
@@ -9722,7 +9749,7 @@
               this.getInitValue('value', props.value, this.value);
           }
           this.setDefaultValue(defaultValue, (_b = props.datasource) === null || _b === void 0 ? void 0 : _b.lazyLoad);
-          this.preventLoadOnFocus = !defaultDatasource.lazyLoad;
+          this.preventLoadOnFocus = !this.defaultDatasource.lazyLoad;
           this.preventLoadOnFocus = this.getInitValue('preventLoadOnFocus', props.preventLoadOnFocus, this.preventLoadOnFocus);
           this.loadMoreQtty = this.datasource.limit;
           this.itemAfterSlot = props.itemAfterSlot || this.itemAfterSlot;
@@ -9736,6 +9763,31 @@
           const instance = core.Loader.getInstance(controller);
           return instance[accessor];
       }
+      onMounted(element) {
+          super.onMounted(element);
+          if (this.modalSelection && this.modalSelectionFields.length) {
+              core.KeyMap.bind({
+                  'shift+enter': {
+                      active: true,
+                      input: true,
+                      stop: true,
+                      prevent: true,
+                      event: this.openModalSelection.bind(this),
+                  },
+              }, this, element);
+          }
+      }
+      onBeforeDestroy() {
+          super.onBeforeDestroy();
+          this.datasource.destroy();
+          if (this.modalSelection && this.modalSelectionFields.length) {
+              core.KeyMap.unbind({
+                  'shift+enter': {
+                      event: this.openModalSelection.bind(this),
+                  },
+              }, this);
+          }
+      }
       /**
        * Retrieves datasource structure applying infinity scroll
        * @param field Field structure
@@ -10110,10 +10162,6 @@
               && !this.datasource.loadAll
               && this.datasource.data.length - (this.pushedValue ? 1 : 0) < this.datasource.total;
       }
-      onBeforeDestroy() {
-          super.onBeforeDestroy();
-          this.datasource.destroy();
-      }
       indexOf(search) {
           const value = search && typeof search === 'object' ? search[this.dataValue] : search;
           return this.datasource.data.findIndex((row) => row[this.dataValue] === value);
@@ -10121,6 +10169,105 @@
       isFilledObj(obj) {
           return obj && typeof obj === 'object' && !Array.isArray(obj) && Object.keys(obj).length;
       }
+      hideModalSelection() {
+          if (this.modalSelectionObj)
+              this.modalSelectionObj.hide();
+      }
+      modalSelectionGridClick({ row }) {
+          this.setValue(row);
+          this.hideModalSelection();
+          setTimeout(() => {
+              if (this.viewCloseMenu)
+                  this.viewCloseMenu();
+          }, 200);
+      }
+      openModalSelection() {
+          const modalSelectionDef = {
+              name: `${this.name}-modal-selection`,
+              persistent: true,
+              children: [
+                  {
+                      name: `${this.name}-modal-selection-content-container`,
+                      component: 'ZdContainer',
+                      scrollView: true,
+                      cssClass: 'zd-my-2 zd-pa-0 zd-select-modal-selection-content-container',
+                      children: [
+                          {
+                              name: `${this.name}-modal-selection-grid`,
+                              component: 'ZdGrid',
+                              cssClass: 'zd-my-2 zd-pa-0 zd-select-modal-selection-grid',
+                              columns: this.modalSelectionFields,
+                              datasource: Object.assign(Object.assign({}, this.defaultDatasource), { lazyLoad: false, searchIn: undefined }),
+                              toolbarSlot: [
+                                  {
+                                      name: `${this.name}-modal-selection-title`,
+                                      component: 'ZdText',
+                                      cssStyle: `color: ${'var(--v-primary-base);'}`,
+                                      text: this.label,
+                                      tag: 'h3',
+                                  },
+                                  {
+                                      name: `${this.name}-modal-selection-spacer`,
+                                      component: 'VSpacer',
+                                  },
+                                  {
+                                      name: `${this.name}-modal-selection_gridSearch`,
+                                      component: 'ZdSearch',
+                                      cssClass: 'zd-grid-search',
+                                      autofocus: true,
+                                  },
+                              ],
+                              events: {
+                                  rowClick: this.modalSelectionGridClick.bind(this),
+                              },
+                          },
+                      ],
+                  },
+                  {
+                      name: `${this.name}-modal-selection-footer-container`,
+                      component: 'ZdContainer',
+                      cssClass: 'zd-pa-0',
+                      children: [
+                          {
+                              name: `${this.name}-modal-selection-footer`,
+                              component: 'ZdFooter',
+                              color: 'transparent',
+                              padless: true,
+                              rightSlot: [
+                                  {
+                                      name: `${this.name}-modal-selection-cancelButton`,
+                                      component: 'ZdButton',
+                                      label: 'CANCEL',
+                                      keyMap: {
+                                          esc: {
+                                              event: this.hideModalSelection.bind(this),
+                                              focus: true,
+                                              visible: true,
+                                              input: true,
+                                              stop: true,
+                                          },
+                                      },
+                                      outline: true,
+                                      events: {
+                                          click: this.hideModalSelection.bind(this),
+                                      },
+                                  },
+                              ],
+                          },
+                      ],
+                  },
+              ],
+              events: {
+                  onShow: () => {
+                      const grid = core.Metadata.getInstance(`${this.name}-modal-selection-grid`);
+                      grid.datasource.currentRow = {};
+                  },
+              },
+          };
+          if (!this.modalSelectionObj)
+              this.modalSelectionObj = ModalService.create(modalSelectionDef);
+          this.modalSelectionObj.show();
+      }
   }
   core.FormatterParserProvider.registerFormatter('ZdSelect', (value, { dataText, dataTextSeparator = ' | ', }) => {
       if (value === null || value === undefined) {
@@ -10161,7 +10308,24 @@
           return result;
       }, '');
   });
-  InputFactory.register('ZdSelect', Select);
+  InputFactory.register('ZdSelect', Select);
+  core.Messages.add({
+      'pt-BR': {
+          translation: {
+              SELECT_MODAL_KEYMAP: '(shift+enter) para abrir modal',
+          },
+      },
+      'en-US': {
+          translation: {
+              SELECT_MODAL_KEYMAP: '(shift+enter) to open modal',
+          },
+      },
+      'es-ES': {
+          translation: {
+              SELECT_MODAL_KEYMAP: '(shift+enter) para abrir el modal',
+          },
+      },
+  });
 
   /**
    * Base class for Iterable Page Size component
@@ -10307,6 +10471,7 @@
           this.placeholder = this.getInitValue('placeholder', props.placeholder, 'SEARCH');
           this.cssClass = this.getInitValue('cssClass', props.cssClass, 'zd-float-right');
           this.lazyAttach = this.getInitValue('lazyAttach', props.lazyAttach, this.lazyAttach);
+          this.debounceSetSearch = this.debounceSetSearch.bind(this);
           if (!this.lazyAttach)
               this.setIterableComponent();
           this.createAccessors();
@@ -10325,7 +10490,7 @@
       }
       setSearch(search) {
           return __awaiter(this, void 0, void 0, function* () {
-              yield this.iterableComponent.setSearch(search);
+              yield this.iterableComponent.setSearch(search.component.internalValue);
           });
       }
   }
@@ -10448,7 +10613,7 @@
        * Returns the iterable component metadata based on row data
        */
       getComponentMetadata(row) {
-          const exp = new RegExp(`<<${this.rowPropName}.(.[A-z]+?)>>|"<<${this.rowPropName}.(.[A-z]+?)>>"`, 'g');
+          const exp = new RegExp(`<<${this.rowPropName}\\.([A-z_.]+?)>>|"<<${this.rowPropName}.(.[A-z_.]+?)>>"`, 'g');
           const rowExp = new RegExp(`"<<${this.rowPropName}>>"`, 'g');
           const metadata = JSON.stringify(this.componentMetadata)
               .replace(rowExp, JSON.stringify(row))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.105.0",
+  "version": "1.106.0",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -43,5 +43,5 @@
     "lodash.times": "4.3.*",
     "mockdate": "3.0.*"
   },
-  "gitHead": "bac0dd5514d2a2e47f68c9e3b950e3041cf4aad4"
+  "gitHead": "58e22407f4dc955b797447dafc639d59358e0e16"
 }

package/types/components/zd-grid/grid-editable.d.ts

@@ -233,6 +233,7 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * @throws RowNotFoundError If the row is not present in datasource
      */
     updateCell(rowKey: string, columnName: string, value: any): void;
+    private isColumnEditable;
     /**
      * Changes a cell value in editedRows
      * @param rowKey Cell's row key

package/types/components/zd-iterable/column.d.ts

@@ -1,5 +1,5 @@
 import { IDictionary, Datasource, IEvents } from '@zeedhi/core';
-import { IColumn, ColumnAlign, ColumnType } from './interfaces';
+import { IColumn, ColumnAlign, ColumnType, ColumnSearchMode } from './interfaces';
 import { Component } from '../zd-component/component';
 /**
  * Base class for Column.
@@ -42,6 +42,7 @@ export declare class Column extends Component implements IColumn {
     private viewGetWidth?;
     helperText: string;
     protected defaultData: IDictionary[];
+    searchMode: ColumnSearchMode;
     /**
      * Creates a new Column.
      * @param props Column properties

package/types/components/zd-iterable/interfaces.d.ts

@@ -8,6 +8,7 @@ export interface IIterableEvents<T = IEventParam<any>> extends IComponentEvents<
 }
 export declare type ColumnAlign = 'left' | 'center' | 'right';
 export declare type ColumnType = 'action';
+export declare type ColumnSearchMode = 'beginning' | 'end' | 'any';
 export interface IColumn extends IComponent {
     align?: ColumnAlign;
     label?: string;
@@ -26,6 +27,7 @@ export interface IColumn extends IComponent {
     style?: IDictionary;
     events?: IIterableEvents;
     xlsType?: string;
+    searchMode?: ColumnSearchMode;
 }
 export interface IIterable extends IComponentRender {
     columns?: IColumn[];
@@ -34,6 +36,7 @@ export interface IIterable extends IComponentRender {
     virtualScroll?: boolean;
     virtualScrollCache?: number;
     searchVisibleOnly?: boolean;
+    searchIn?: string | undefined;
 }
 export interface IIterablePageComponent extends IComponentRender {
     iterableComponentName?: string;

package/types/components/zd-iterable/iterable-controller.d.ts

@@ -1,8 +1,12 @@
+import { IDictionary } from '@zeedhi/core';
 import { Iterable } from './iterable';
 export declare class IterableController {
     private iterable;
     private searchInValue?;
+    private searchInParamsValue?;
     constructor(iterable: Iterable);
     get searchIn(): string[] | undefined;
     set searchIn(value: string[] | undefined);
+    get searchInParams(): IDictionary<any> | undefined;
+    set searchInParams(value: IDictionary<any> | undefined);
 }

package/types/components/zd-iterable/iterable.d.ts

@@ -44,6 +44,7 @@ export declare class Iterable extends ComponentRender implements IIterable {
      * Defines if searchIn should consider only visible columns or not
      */
     searchVisibleOnly: boolean;
+    searchIn: string | undefined;
     defaultSearchVisibleOnly: boolean;
     /**
      * Creates a new Iterable.

package/types/components/zd-iterable/search.d.ts

@@ -20,6 +20,6 @@ export declare class Search extends TextInput implements ISearch {
      */
     constructor(props: ISearch);
     setIterableComponent(name?: string): void;
-    protected setSearch(search: string): Promise<void>;
+    protected setSearch(search: any): Promise<void>;
     debounceSetSearch: (search: string) => void;
 }

package/types/components/zd-select/interfaces.d.ts

@@ -2,6 +2,7 @@ import { IDatasource } from '@zeedhi/core';
 import { ITextInput } from '../zd-text-input/interfaces';
 import { IComponentRender } from '../zd-component/interfaces';
 import { ISelectDataValueOut } from '../../utils';
+import { IColumn } from '../zd-iterable/interfaces';
 export declare type SearchParam = 'SEARCH' | 'FILTER' | 'FIND' | 'DYNAMIC_FILTER';
 export interface ISelect extends ITextInput, ISelectDataValueOut {
     autocomplete?: boolean;
@@ -23,4 +24,6 @@ export interface ISelect extends ITextInput, ISelectDataValueOut {
     attach?: boolean;
     searchParam?: string;
     closeOnScroll?: boolean;
+    modalSelection?: boolean;
+    modalSelectionFields?: IColumn[];
 }

package/types/components/zd-select/select.d.ts

@@ -1,8 +1,9 @@
-import { Datasource, IDictionary } from '@zeedhi/core';
+import { Datasource, IDictionary, IDatasource } from '@zeedhi/core';
 import { IComponentRender } from '../zd-component/interfaces';
 import { ISelect, SearchParam } from './interfaces';
 import { TextInput } from '../zd-text-input/text-input';
 import { ISelectDataValueOutItem } from '../../utils';
+import { IColumn } from '../zd-iterable/interfaces';
 /**
  * Base class for Select component.
  */
@@ -92,6 +93,8 @@ export declare class Select extends TextInput implements ISelect {
      */
     dataValueOutFormName: string;
     closeOnScroll: boolean;
+    modalSelection?: boolean | undefined;
+    modalSelectionFields: IColumn[];
     protected dsSearch: {
         SEARCH: (value: any, searchIn: string) => {
             searchIn: string[];
@@ -128,14 +131,18 @@ export declare class Select extends TextInput implements ISelect {
     protected cachedTotal: number;
     protected formatterFn: Function;
     private pushedValue;
+    viewCloseMenu?: () => void;
     private discreteProps?;
     protected loadMoreQtty: number;
+    protected defaultDatasource: IDatasource;
     /**
      * Create a new Select.
      * @param props Select properties
      */
     constructor(props: ISelect);
     private getAccessorValue;
+    onMounted(element: any): void;
+    onBeforeDestroy(): void;
     /**
      * Retrieves datasource structure applying infinity scroll
      * @param field Field structure
@@ -230,7 +237,10 @@ export declare class Select extends TextInput implements ISelect {
     blur(event: Event, element: any): void;
     protected checkValueOnBlur(): void;
     showLoadMore(): boolean;
-    onBeforeDestroy(): void;
     indexOf(search: IDictionary | string | number): number;
     protected isFilledObj(obj: any): number | false;
+    private modalSelectionObj?;
+    private hideModalSelection;
+    private modalSelectionGridClick;
+    openModalSelection(): void;
 }