@zeedhi/common 1.111.0 → 1.112.0

package/dist/zd-common.esm.js

@@ -3990,7 +3990,6 @@ class Date$1 extends TextInput {
         this.parserFn = FormatterParserProvider.getParser('ZdDate');
         this.previousHint = '';
         this.previousPersistentHint = false;
-        this.lastChangeValue = null;
         this.allowedDates = this.getInitValue('allowedDates', props.allowedDates, this.allowedDates);
         this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'calendar');
         this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
@@ -5448,6 +5447,8 @@ class Column extends Component {
         this.defaultData = [];
         /* Column search mode */
         this.searchMode = 'any';
+        /* Column can be used to search */
+        this.searchable = true;
         this.lookup = debounce((lookupColumn) => {
             this.loading = true;
             const dataToLookup = Array.from(new Set(this.dataToLookup)); // remove duplicates
@@ -5479,7 +5480,9 @@ class Column extends Component {
         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.searchable = this.getInitValue('searchable', props.searchable, this.searchable);
         this.helperText = this.getInitValue('', props.helperText, this.helperText);
+        this.valueIn = this.getInitValue('valueIn', props.valueIn, this.name);
         this.createConditions();
         this.createActionConditions();
         if (this.componentProps.datasource) {
@@ -5511,7 +5514,7 @@ class Column extends Component {
         throw new MethodNotAssignedError('viewGetWidth');
     }
     formatterByRow(row, cellProps) {
-        const value = row[this.name];
+        const value = row[this.valueIn];
         const formatterFn = FormatterParserProvider.getFormatter(`column_${this.componentProps.component}`);
         if (formatterFn) {
             return formatterFn({
@@ -5846,7 +5849,9 @@ class Iterable extends ComponentRender {
         });
     }
     isColumnSearchable(column) {
-        return (!this.searchVisibleOnly || column.isVisible) && (this.searchIn === undefined || this.searchIn === column.name);
+        return column.searchable
+            && (!this.searchVisibleOnly || column.isVisible)
+            && (this.searchIn === undefined || this.searchIn === column.name);
     }
 }
 
@@ -7049,10 +7054,10 @@ class GridEditable extends Grid {
     }
     getVisibleValue(row, column) {
         const key = row[this.datasource.uniqueKey];
-        if (this.editedRows[key] && Object.prototype.hasOwnProperty.call(this.editedRows[key], column.name)) {
-            return this.editedRows[key][column.name];
+        if (this.editedRows[key] && Object.prototype.hasOwnProperty.call(this.editedRows[key], column.valueIn)) {
+            return this.editedRows[key][column.valueIn];
         }
-        return row[column.name];
+        return row[column.valueIn];
     }
     /**
      * Returns editable component properties based on the column definition
@@ -7111,13 +7116,13 @@ class GridEditable extends Grid {
      * If the row[column.name] has a selected value, pushes it
      */
     checkLookupData(column, row, componentProps) {
-        if (!row[column.name] || !column.lookupData || !componentProps.datasource)
+        if (!row[column.valueIn] || !column.lookupData || !componentProps.datasource)
             return;
         componentProps.datasource.data = componentProps.datasource.data || [];
         // prevent pushing lookup values when using accessor in data
         if (!Array.isArray(componentProps.datasource.data))
             return;
-        const colValue = row[column.name];
+        const colValue = row[column.valueIn];
         if (Array.isArray(colValue)) {
             colValue.forEach((item) => {
                 const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
@@ -7154,7 +7159,7 @@ class GridEditable extends Grid {
      */
     changeEditableComponent(column, row, value, component) {
         const key = row[this.datasource.uniqueKey];
-        const columnName = column.name;
+        const columnName = column.valueIn;
         if (!Utils.isEqual(value, row[columnName])) {
             const newRow = {};
             newRow[key] = Object.assign({}, this.editedRows[key]);
@@ -7201,7 +7206,7 @@ class GridEditable extends Grid {
     isEdited(column, row) {
         const key = row[this.datasource.uniqueKey];
         return this.editedRows[key]
-            && this.editedRows[key][column.name] !== this.editedRows[key][`${column.name}_original`];
+            && this.editedRows[key][column.valueIn] !== this.editedRows[key][`${column.valueIn}_original`];
     }
     /**
      * Checks if row is an added row
@@ -7385,7 +7390,7 @@ class GridEditable extends Grid {
             const key = row[this.datasource.uniqueKey];
             editableColumns.forEach((column) => {
                 const instance = componentInstances[column.name];
-                if (!instance.isValid(row[column.name])) {
+                if (!instance.isValid(row[column.valueIn])) {
                     invalidCompNames.push(this.getCompName(key, column.name));
                 }
             });
@@ -7478,7 +7483,7 @@ class GridEditable extends Grid {
             throw new RowNotFoundError(newRow[uniqueKey], this.name);
         }
         this.columns.forEach((column) => {
-            const columnName = column.name;
+            const columnName = column.valueIn;
             this.changeCell(newRow[uniqueKey], rowIdx, column, newRow[columnName]);
         });
     }
@@ -7895,27 +7900,45 @@ class Increment extends Number$1 {
         super.change(event, element);
     }
     /**
-     * Method to increment the value
+     * Increases the component's value by the step amount.
      */
     increment() {
-        this.value = this.value ? Number(this.value) : this.value;
-        if ((this.value === null || Number.isNaN(this.value)) && this.minValue) {
-            this.value = this.minValue;
+        const currentValue = Number(this.value);
+        const isValueInvalid = this.value === null || this.value === '' || Number.isNaN(currentValue);
+        // First, handle the case where the input is empty or not a number.
+        if (isValueInvalid) {
+            // Determine the starting value. Default to `minValue` if it's positive, otherwise start from `step`.
+            const startValue = (this.minValue !== undefined && this.minValue > 0) ? this.minValue : this.step;
+            // Set the value, but clamp it to the maximum limit if one exists.
+            this.value = (this.maxValue !== undefined) ? Math.min(startValue, this.maxValue) : startValue;
+            return;
         }
-        else if (this.value !== this.maxValue) {
-            this.value += this.step;
+        // If the input is a valid number, calculate the next value.
+        const nextValue = currentValue + this.step;
+        // Only update if the new value does not exceed the maximum boundary.
+        if (this.maxValue === undefined || nextValue <= this.maxValue) {
+            this.value = nextValue;
         }
     }
     /**
-     * Method to decrement the value
+     * Decreases the component's value by the step amount.
      */
     decrement() {
-        this.value = this.value ? Number(this.value) : this.value;
-        if ((this.value === null || Number.isNaN(this.value)) && this.maxValue) {
-            this.value = this.maxValue;
+        const currentValue = Number(this.value);
+        const isValueInvalid = this.value === null || this.value === '' || Number.isNaN(currentValue);
+        // First, handle the case where the input is empty or not a number.
+        if (isValueInvalid) {
+            // Determine the starting value. Handles the edge case where the max value is negative.
+            const startValue = (this.maxValue !== undefined && this.maxValue < 0) ? this.maxValue : -this.step;
+            // Set the value, but clamp it to the minimum limit if one exists.
+            this.value = (this.minValue !== undefined) ? Math.max(startValue, this.minValue) : startValue;
+            return;
         }
-        else if (this.value !== this.minValue) {
-            this.value -= this.step;
+        // If the input is a valid number, calculate the next value.
+        const nextValue = currentValue - this.step;
+        // Only update if the new value does not go below the minimum boundary.
+        if (this.minValue === undefined || nextValue >= this.minValue) {
+            this.value = nextValue;
         }
     }
 }
@@ -10433,7 +10456,7 @@ class Select extends TextInput {
                             component: 'ZdGrid',
                             cssClass: 'zd-my-2 zd-pa-0 zd-select-modal-selection-grid',
                             columns: this.modalSelectionColumns,
-                            datasource: Object.assign(Object.assign({}, this.datasource.clone()), { lazyLoad: false, searchIn: undefined }),
+                            datasource: Object.assign(Object.assign({}, this.datasource.clone()), { limit: this.defaultDatasource.limit, lazyLoad: false, searchIn: undefined }),
                             toolbarSlot: [
                                 {
                                     name: `${this.name}-modal-selection-title`,
@@ -10706,6 +10729,10 @@ class Search extends TextInput {
     constructor(props) {
         super(props);
         this.lazyAttach = false;
+        /**
+         *  * hide the option to select search field
+         */
+        this.hideSearchField = false;
         this.debounceSetSearch = debounce(this.setSearch, 500);
         this.iterableComponentName = this.getInitValue('iterableComponentName', props.iterableComponentName, this.iterableComponent);
         this.showHelper = this.getInitValue('showHelper', props.showHelper, false);
@@ -10714,6 +10741,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.hideSearchField = this.getInitValue('hideSearchField', props.hideSearchField, this.hideSearchField);
         this.debounceSetSearch = this.debounceSetSearch.bind(this);
         if (!this.lazyAttach)
             this.setIterableComponent();
@@ -15561,10 +15589,10 @@ class TreeGridEditable extends TreeGrid {
     }
     getVisibleValue(row, column) {
         const key = row[this.datasource.uniqueKey];
-        if (this.editedRows[key] && Object.prototype.hasOwnProperty.call(this.editedRows[key], column.name)) {
-            return this.editedRows[key][column.name];
+        if (this.editedRows[key] && Object.prototype.hasOwnProperty.call(this.editedRows[key], column.valueIn)) {
+            return this.editedRows[key][column.valueIn];
         }
-        return row[column.name];
+        return row[column.valueIn];
     }
     /**
      * Returns editable component properties based on the column definition
@@ -15618,13 +15646,13 @@ class TreeGridEditable extends TreeGrid {
      * If the row[column.name] has a selected value, pushes it
      */
     checkLookupData(column, row, componentProps) {
-        if (!row[column.name] || !column.lookupData || !componentProps.datasource)
+        if (!row[column.valueIn] || !column.lookupData || !componentProps.datasource)
             return;
         componentProps.datasource.data = componentProps.datasource.data || [];
         // prevent pushing lookup values when using accessor in data
         if (!Array.isArray(componentProps.datasource.data))
             return;
-        const colValue = row[column.name];
+        const colValue = row[column.valueIn];
         if (Array.isArray(colValue)) {
             colValue.forEach((item) => {
                 const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
@@ -15661,7 +15689,7 @@ class TreeGridEditable extends TreeGrid {
      */
     changeEditableComponent(column, row, value, component) {
         const key = row[this.datasource.uniqueKey];
-        const columnName = column.name;
+        const columnName = column.valueIn;
         if (!Utils.isEqual(value, row[columnName])) {
             const newRow = {};
             newRow[key] = Object.assign({}, this.editedRows[key]);
@@ -15696,7 +15724,7 @@ class TreeGridEditable extends TreeGrid {
     isEdited(column, row) {
         const key = row[this.datasource.uniqueKey];
         return this.editedRows[key]
-            && this.editedRows[key][column.name] !== this.editedRows[key][`${column.name}_original`];
+            && this.editedRows[key][column.valueIn] !== this.editedRows[key][`${column.valueIn}_original`];
     }
     /**
      * Checks if column is valid
@@ -15833,7 +15861,7 @@ class TreeGridEditable extends TreeGrid {
             throw new RowNotFoundError(newRow[uniqueKey], this.name);
         }
         this.columns.forEach((column) => {
-            const columnName = column.name;
+            const columnName = column.valueIn;
             this.changeCell(newRow[uniqueKey], rowIdx, column, newRow[columnName]);
         });
     }
@@ -15918,7 +15946,7 @@ const getForeignLookupRow = (column, row, dataValue, dataTextColumns, foreignCol
         const dataTextName = typeof item === 'string' ? item : item.name;
         lookupRow[dataTextName] = row[foreignColumns[dataTextName] || dataTextName];
     });
-    lookupRow[dataValue] = row[column.name];
+    lookupRow[dataValue] = row[column.valueIn];
     return lookupRow;
 };
 const getFormatterLookupRow = (column, row, dataValue, formatterDataTextColumns, dataTextColumns) => {
@@ -15929,7 +15957,7 @@ const getFormatterLookupRow = (column, row, dataValue, formatterDataTextColumns,
         const formatterDataTextColumn = typeof item === 'string' ? item : item.name;
         lookupRow[dataTextName] = row[formatterDataTextColumn];
     });
-    lookupRow[dataValue] = row[column.name];
+    lookupRow[dataValue] = row[column.valueIn];
     return lookupRow;
 };
 /**
@@ -15943,7 +15971,7 @@ const storeOrRetrieveLookup = (column, row, value, dataValue, 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);
+        column.lookupData[row[column.valueIn]] = getForeignLookupRow(column, row, dataValue, dataTextColumns, foreignColumns);
         return row;
     }
     // when not using formatterDataText, should fetch data from datasource to be able to format this cell
@@ -15953,7 +15981,7 @@ const storeOrRetrieveLookup = (column, row, value, dataValue, componentProps) =>
     const formatterDataTextColumns = asArray(formatterDataText);
     // when using formatterDataText, should store dataText information in lookupData
     if (formatterDataTextColumns.length === dataTextColumns.length) {
-        const rowColumn = row[column.name];
+        const rowColumn = row[column.valueIn];
         column.lookupData[rowColumn] = getFormatterLookupRow(column, row, dataValue, formatterDataTextColumns, dataTextColumns);
         return row;
     }

package/dist/zd-common.umd.js

@@ -3997,7 +3997,6 @@
           this.parserFn = core.FormatterParserProvider.getParser('ZdDate');
           this.previousHint = '';
           this.previousPersistentHint = false;
-          this.lastChangeValue = null;
           this.allowedDates = this.getInitValue('allowedDates', props.allowedDates, this.allowedDates);
           this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'calendar');
           this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
@@ -5455,6 +5454,8 @@
           this.defaultData = [];
           /* Column search mode */
           this.searchMode = 'any';
+          /* Column can be used to search */
+          this.searchable = true;
           this.lookup = debounce__default["default"]((lookupColumn) => {
               this.loading = true;
               const dataToLookup = Array.from(new Set(this.dataToLookup)); // remove duplicates
@@ -5486,7 +5487,9 @@
           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.searchable = this.getInitValue('searchable', props.searchable, this.searchable);
           this.helperText = this.getInitValue('', props.helperText, this.helperText);
+          this.valueIn = this.getInitValue('valueIn', props.valueIn, this.name);
           this.createConditions();
           this.createActionConditions();
           if (this.componentProps.datasource) {
@@ -5518,7 +5521,7 @@
           throw new core.MethodNotAssignedError('viewGetWidth');
       }
       formatterByRow(row, cellProps) {
-          const value = row[this.name];
+          const value = row[this.valueIn];
           const formatterFn = core.FormatterParserProvider.getFormatter(`column_${this.componentProps.component}`);
           if (formatterFn) {
               return formatterFn({
@@ -5853,7 +5856,9 @@
           });
       }
       isColumnSearchable(column) {
-          return (!this.searchVisibleOnly || column.isVisible) && (this.searchIn === undefined || this.searchIn === column.name);
+          return column.searchable
+              && (!this.searchVisibleOnly || column.isVisible)
+              && (this.searchIn === undefined || this.searchIn === column.name);
       }
   }
 
@@ -7056,10 +7061,10 @@
       }
       getVisibleValue(row, column) {
           const key = row[this.datasource.uniqueKey];
-          if (this.editedRows[key] && Object.prototype.hasOwnProperty.call(this.editedRows[key], column.name)) {
-              return this.editedRows[key][column.name];
+          if (this.editedRows[key] && Object.prototype.hasOwnProperty.call(this.editedRows[key], column.valueIn)) {
+              return this.editedRows[key][column.valueIn];
           }
-          return row[column.name];
+          return row[column.valueIn];
       }
       /**
        * Returns editable component properties based on the column definition
@@ -7118,13 +7123,13 @@
        * If the row[column.name] has a selected value, pushes it
        */
       checkLookupData(column, row, componentProps) {
-          if (!row[column.name] || !column.lookupData || !componentProps.datasource)
+          if (!row[column.valueIn] || !column.lookupData || !componentProps.datasource)
               return;
           componentProps.datasource.data = componentProps.datasource.data || [];
           // prevent pushing lookup values when using accessor in data
           if (!Array.isArray(componentProps.datasource.data))
               return;
-          const colValue = row[column.name];
+          const colValue = row[column.valueIn];
           if (Array.isArray(colValue)) {
               colValue.forEach((item) => {
                   const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
@@ -7161,7 +7166,7 @@
        */
       changeEditableComponent(column, row, value, component) {
           const key = row[this.datasource.uniqueKey];
-          const columnName = column.name;
+          const columnName = column.valueIn;
           if (!core.Utils.isEqual(value, row[columnName])) {
               const newRow = {};
               newRow[key] = Object.assign({}, this.editedRows[key]);
@@ -7208,7 +7213,7 @@
       isEdited(column, row) {
           const key = row[this.datasource.uniqueKey];
           return this.editedRows[key]
-              && this.editedRows[key][column.name] !== this.editedRows[key][`${column.name}_original`];
+              && this.editedRows[key][column.valueIn] !== this.editedRows[key][`${column.valueIn}_original`];
       }
       /**
        * Checks if row is an added row
@@ -7392,7 +7397,7 @@
               const key = row[this.datasource.uniqueKey];
               editableColumns.forEach((column) => {
                   const instance = componentInstances[column.name];
-                  if (!instance.isValid(row[column.name])) {
+                  if (!instance.isValid(row[column.valueIn])) {
                       invalidCompNames.push(this.getCompName(key, column.name));
                   }
               });
@@ -7485,7 +7490,7 @@
               throw new RowNotFoundError(newRow[uniqueKey], this.name);
           }
           this.columns.forEach((column) => {
-              const columnName = column.name;
+              const columnName = column.valueIn;
               this.changeCell(newRow[uniqueKey], rowIdx, column, newRow[columnName]);
           });
       }
@@ -7902,27 +7907,45 @@
           super.change(event, element);
       }
       /**
-       * Method to increment the value
+       * Increases the component's value by the step amount.
        */
       increment() {
-          this.value = this.value ? Number(this.value) : this.value;
-          if ((this.value === null || Number.isNaN(this.value)) && this.minValue) {
-              this.value = this.minValue;
+          const currentValue = Number(this.value);
+          const isValueInvalid = this.value === null || this.value === '' || Number.isNaN(currentValue);
+          // First, handle the case where the input is empty or not a number.
+          if (isValueInvalid) {
+              // Determine the starting value. Default to `minValue` if it's positive, otherwise start from `step`.
+              const startValue = (this.minValue !== undefined && this.minValue > 0) ? this.minValue : this.step;
+              // Set the value, but clamp it to the maximum limit if one exists.
+              this.value = (this.maxValue !== undefined) ? Math.min(startValue, this.maxValue) : startValue;
+              return;
           }
-          else if (this.value !== this.maxValue) {
-              this.value += this.step;
+          // If the input is a valid number, calculate the next value.
+          const nextValue = currentValue + this.step;
+          // Only update if the new value does not exceed the maximum boundary.
+          if (this.maxValue === undefined || nextValue <= this.maxValue) {
+              this.value = nextValue;
           }
       }
       /**
-       * Method to decrement the value
+       * Decreases the component's value by the step amount.
        */
       decrement() {
-          this.value = this.value ? Number(this.value) : this.value;
-          if ((this.value === null || Number.isNaN(this.value)) && this.maxValue) {
-              this.value = this.maxValue;
+          const currentValue = Number(this.value);
+          const isValueInvalid = this.value === null || this.value === '' || Number.isNaN(currentValue);
+          // First, handle the case where the input is empty or not a number.
+          if (isValueInvalid) {
+              // Determine the starting value. Handles the edge case where the max value is negative.
+              const startValue = (this.maxValue !== undefined && this.maxValue < 0) ? this.maxValue : -this.step;
+              // Set the value, but clamp it to the minimum limit if one exists.
+              this.value = (this.minValue !== undefined) ? Math.max(startValue, this.minValue) : startValue;
+              return;
           }
-          else if (this.value !== this.minValue) {
-              this.value -= this.step;
+          // If the input is a valid number, calculate the next value.
+          const nextValue = currentValue - this.step;
+          // Only update if the new value does not go below the minimum boundary.
+          if (this.minValue === undefined || nextValue >= this.minValue) {
+              this.value = nextValue;
           }
       }
   }
@@ -10440,7 +10463,7 @@
                               component: 'ZdGrid',
                               cssClass: 'zd-my-2 zd-pa-0 zd-select-modal-selection-grid',
                               columns: this.modalSelectionColumns,
-                              datasource: Object.assign(Object.assign({}, this.datasource.clone()), { lazyLoad: false, searchIn: undefined }),
+                              datasource: Object.assign(Object.assign({}, this.datasource.clone()), { limit: this.defaultDatasource.limit, lazyLoad: false, searchIn: undefined }),
                               toolbarSlot: [
                                   {
                                       name: `${this.name}-modal-selection-title`,
@@ -10713,6 +10736,10 @@
       constructor(props) {
           super(props);
           this.lazyAttach = false;
+          /**
+           *  * hide the option to select search field
+           */
+          this.hideSearchField = false;
           this.debounceSetSearch = debounce__default["default"](this.setSearch, 500);
           this.iterableComponentName = this.getInitValue('iterableComponentName', props.iterableComponentName, this.iterableComponent);
           this.showHelper = this.getInitValue('showHelper', props.showHelper, false);
@@ -10721,6 +10748,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.hideSearchField = this.getInitValue('hideSearchField', props.hideSearchField, this.hideSearchField);
           this.debounceSetSearch = this.debounceSetSearch.bind(this);
           if (!this.lazyAttach)
               this.setIterableComponent();
@@ -15568,10 +15596,10 @@
       }
       getVisibleValue(row, column) {
           const key = row[this.datasource.uniqueKey];
-          if (this.editedRows[key] && Object.prototype.hasOwnProperty.call(this.editedRows[key], column.name)) {
-              return this.editedRows[key][column.name];
+          if (this.editedRows[key] && Object.prototype.hasOwnProperty.call(this.editedRows[key], column.valueIn)) {
+              return this.editedRows[key][column.valueIn];
           }
-          return row[column.name];
+          return row[column.valueIn];
       }
       /**
        * Returns editable component properties based on the column definition
@@ -15625,13 +15653,13 @@
        * If the row[column.name] has a selected value, pushes it
        */
       checkLookupData(column, row, componentProps) {
-          if (!row[column.name] || !column.lookupData || !componentProps.datasource)
+          if (!row[column.valueIn] || !column.lookupData || !componentProps.datasource)
               return;
           componentProps.datasource.data = componentProps.datasource.data || [];
           // prevent pushing lookup values when using accessor in data
           if (!Array.isArray(componentProps.datasource.data))
               return;
-          const colValue = row[column.name];
+          const colValue = row[column.valueIn];
           if (Array.isArray(colValue)) {
               colValue.forEach((item) => {
                   const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
@@ -15668,7 +15696,7 @@
        */
       changeEditableComponent(column, row, value, component) {
           const key = row[this.datasource.uniqueKey];
-          const columnName = column.name;
+          const columnName = column.valueIn;
           if (!core.Utils.isEqual(value, row[columnName])) {
               const newRow = {};
               newRow[key] = Object.assign({}, this.editedRows[key]);
@@ -15703,7 +15731,7 @@
       isEdited(column, row) {
           const key = row[this.datasource.uniqueKey];
           return this.editedRows[key]
-              && this.editedRows[key][column.name] !== this.editedRows[key][`${column.name}_original`];
+              && this.editedRows[key][column.valueIn] !== this.editedRows[key][`${column.valueIn}_original`];
       }
       /**
        * Checks if column is valid
@@ -15840,7 +15868,7 @@
               throw new RowNotFoundError(newRow[uniqueKey], this.name);
           }
           this.columns.forEach((column) => {
-              const columnName = column.name;
+              const columnName = column.valueIn;
               this.changeCell(newRow[uniqueKey], rowIdx, column, newRow[columnName]);
           });
       }
@@ -15925,7 +15953,7 @@
           const dataTextName = typeof item === 'string' ? item : item.name;
           lookupRow[dataTextName] = row[foreignColumns[dataTextName] || dataTextName];
       });
-      lookupRow[dataValue] = row[column.name];
+      lookupRow[dataValue] = row[column.valueIn];
       return lookupRow;
   };
   const getFormatterLookupRow = (column, row, dataValue, formatterDataTextColumns, dataTextColumns) => {
@@ -15936,7 +15964,7 @@
           const formatterDataTextColumn = typeof item === 'string' ? item : item.name;
           lookupRow[dataTextName] = row[formatterDataTextColumn];
       });
-      lookupRow[dataValue] = row[column.name];
+      lookupRow[dataValue] = row[column.valueIn];
       return lookupRow;
   };
   /**
@@ -15950,7 +15978,7 @@
       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);
+          column.lookupData[row[column.valueIn]] = getForeignLookupRow(column, row, dataValue, dataTextColumns, foreignColumns);
           return row;
       }
       // when not using formatterDataText, should fetch data from datasource to be able to format this cell
@@ -15960,7 +15988,7 @@
       const formatterDataTextColumns = asArray(formatterDataText);
       // when using formatterDataText, should store dataText information in lookupData
       if (formatterDataTextColumns.length === dataTextColumns.length) {
-          const rowColumn = row[column.name];
+          const rowColumn = row[column.valueIn];
           column.lookupData[rowColumn] = getFormatterLookupRow(column, row, dataValue, formatterDataTextColumns, dataTextColumns);
           return row;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.111.0",
+  "version": "1.112.0",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -43,5 +43,5 @@
     "lodash.times": "4.3.*",
     "mockdate": "3.0.*"
   },
-  "gitHead": "f75c602a03ad29224ec2058a01a9b02f2e37cc6f"
+  "gitHead": "bcf25802928f8264bc7810b19a903364f3e371c9"
 }

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

@@ -149,7 +149,7 @@ export declare class Date extends TextInput implements IDate {
     private previousHint;
     private previousPersistentHint;
     updateHelperHint(): void;
-    private lastChangeValue;
+    private lastChangeValue?;
     changeEvent(event?: Event, element?: any): void;
     change(event?: Event, element?: any, callEvent?: boolean): void;
 }

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

@@ -119,7 +119,7 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * @param element DOM Element
      */
     selectAllClick(isSelected: boolean, event: Event, element: any): void;
-    getVisibleValue(row: IDictionary, column: IGridColumnEditable): any;
+    getVisibleValue(row: IDictionary, column: GridColumnEditable): any;
     /**
      * Returns editable component properties based on the column definition
      * @param column Column definition
@@ -127,10 +127,10 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * @param cellProps Column conditional props
      * @param events Component events
      */
-    getEditableComponent(column: IGridColumnEditable, row: IDictionary<any>, cellProps: IDictionary<any> | null, events: any): {
+    getEditableComponent(column: GridColumnEditable, row: IDictionary<any>, cellProps: IDictionary<any> | null, events: any): {
         name: string;
         parent: GridEditable;
-        align: "left" | "center" | "right" | undefined;
+        align: import("..").ColumnAlign;
         showLabel: boolean;
         showHelper: boolean;
         dense: boolean;
@@ -150,14 +150,14 @@ export declare class GridEditable extends Grid implements IGridEditable {
     /**
      * change event of editable components
      */
-    protected changeEditableComponent(column: IGridColumnEditable, row: IDictionary<any>, value: any, component?: Input): void;
+    protected changeEditableComponent(column: GridColumnEditable, row: IDictionary<any>, value: any, component?: Input): void;
     private updateOriginalRow;
     /**
      * Checks if column is edited
      * @param column Column
      * @param row Row
      */
-    isEdited(column: IGridColumnEditable, row: IDictionary): boolean;
+    isEdited(column: GridColumnEditable, row: IDictionary): boolean;
     /**
      * Checks if row is an added row
      * @param row Row

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

@@ -43,11 +43,11 @@ export declare class Increment extends ZdNumber implements IIncrement {
      */
     plusClick(event: Event, element: any): void;
     /**
-     * Method to increment the value
+     * Increases the component's value by the step amount.
      */
     increment(): void;
     /**
-     * Method to decrement the value
+     * Decreases the component's value by the step amount.
      */
     decrement(): void;
 }

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

@@ -43,6 +43,8 @@ export declare class Column extends Component implements IColumn {
     helperText: string;
     protected defaultData: IDictionary[];
     searchMode: ColumnSearchMode;
+    searchable: boolean;
+    valueIn: string;
     /**
      * Creates a new Column.
      * @param props Column properties

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

@@ -28,6 +28,8 @@ export interface IColumn extends IComponent {
     events?: IIterableEvents;
     xlsType?: string;
     searchMode?: ColumnSearchMode;
+    searchable?: boolean;
+    valueIn?: string;
 }
 export interface IIterable extends IComponentRender {
     columns?: IColumn[];
@@ -65,6 +67,7 @@ export interface ISearch extends ITextInput {
     showHelper?: boolean;
     appendIcon?: string;
     lazyAttach?: boolean;
+    hideSearchField?: boolean;
 }
 export interface IIterableColumnsButton extends IButton {
     iterableComponentName?: string;

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

@@ -14,6 +14,10 @@ export declare class Search extends TextInput implements ISearch {
      */
     iterableComponent: Iterable;
     lazyAttach: boolean;
+    /**
+     *  * hide the option to select search field
+     */
+    hideSearchField: boolean;
     /**
      * Creates a new Iterable Page component.
      * @param props Iterable page component properties

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

@@ -91,7 +91,7 @@ export declare class TreeGridEditable extends TreeGrid implements ITreeGridEdita
      * @param element DOM Element
      */
     selectAllClick(isSelected: boolean, event?: Event, element?: any): void;
-    getVisibleValue(row: IDictionary, column: IGridColumnEditable): any;
+    getVisibleValue(row: IDictionary, column: GridColumnEditable): any;
     /**
      * Returns editable component properties based on the column definition
      * @param column Column definition
@@ -99,10 +99,10 @@ export declare class TreeGridEditable extends TreeGrid implements ITreeGridEdita
      * @param cellProps Column conditional props
      * @param events Component events
      */
-    getEditableComponent(column: IGridColumnEditable, row: IDictionary<any>, cellProps: IDictionary<any>, events: any): {
+    getEditableComponent(column: GridColumnEditable, row: IDictionary<any>, cellProps: IDictionary<any>, events: any): {
         name: string;
         parent: TreeGridEditable;
-        align: "left" | "center" | "right" | undefined;
+        align: import("..").ColumnAlign;
         showLabel: boolean;
         showHelper: boolean;
         dense: boolean;
@@ -128,7 +128,7 @@ export declare class TreeGridEditable extends TreeGrid implements ITreeGridEdita
      * @param column Column
      * @param row Row
      */
-    isEdited(column: IGridColumnEditable, row: IDictionary): boolean;
+    isEdited(column: GridColumnEditable, row: IDictionary): boolean;
     /**
      * Checks if column is valid
      * @param column Column