@zeedhi/common 1.100.0 → 1.101.0

package/dist/zd-common.esm.js

@@ -1,4 +1,4 @@
-import { AccessorManager, Event, KeyMap, Metadata, Accessor, I18n, FormatterParserProvider, Validation, Mask, DatasourceFactory, MethodNotAssignedError, 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, Cookie, VersionService } from '@zeedhi/core';
 import merge from 'lodash.merge';
 import cloneDeep from 'lodash.clonedeep';
 import debounce from 'lodash.debounce';
@@ -112,7 +112,7 @@ class Component {
         if (this.viewFocus) {
             return this.viewFocus();
         }
-        throw new Error('viewFocus method not assigned');
+        throw new MethodNotAssignedError('viewFocus');
     }
     /**
      * Retrieves initial value for the attribute and if it is an accessor,
@@ -1403,6 +1403,18 @@ class Carousel extends ComponentRender {
         this.nextButton = this.changeDefaultButtonName(this.nextButton);
         this.createAccessors();
     }
+    setViewUpdate(viewFn) {
+        this.viewUpdate = viewFn;
+    }
+    /**
+     * Updates the Carousel rendered elements
+     */
+    update() {
+        if (!this.viewUpdate) {
+            throw new MethodNotAssignedError('viewUpdate');
+        }
+        this.viewUpdate();
+    }
     /**
      * After the transitionDuration time, set isSliding to false
      */
@@ -1789,7 +1801,7 @@ class Form extends ComponentRender {
         if (this.viewResetValidation) {
             return this.viewResetValidation();
         }
-        throw new Error('viewResetValidation method not assigned');
+        throw new MethodNotAssignedError('viewResetValidation');
     }
 }
 
@@ -1889,6 +1901,10 @@ class Input extends ComponentRender {
          * Input validations.
          */
         this.validations = {};
+        /**
+         * Defines if the input should be automatically registered in the closest parent Form
+         */
+        this.autoRegister = true;
         /**
          * Parsed field rules.
          */
@@ -1924,8 +1940,9 @@ class Input extends ComponentRender {
         this.storePath = this.getInitValue('storePath', props.storePath, this.storePath);
         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.parseValidations(props.validations || {});
-        if (this.formParent) {
+        if (this.autoRegister && this.formParent) {
             this.formParent.registerInput(this);
         }
         this.createAccessors();
@@ -1959,7 +1976,7 @@ class Input extends ComponentRender {
         if (this.viewResetValidation) {
             return this.viewResetValidation();
         }
-        throw new Error('viewResetValidation method not assigned');
+        throw new MethodNotAssignedError('viewResetValidation');
     }
     /**
      * Adds parsed validations based on field validations.
@@ -5816,7 +5833,7 @@ class GridColumn extends Column {
 FormatterParserProvider.registerFormatter('column_ZdSelect', ({ column, value, row, componentProps, }) => {
     if (value === null || value === undefined)
         return '';
-    const { dataText, formatterDataText, dataTextSeparator, dataValue, } = componentProps;
+    const { dataText, formatterDataText, dataTextSeparator, dataValue, dataTextDiscrete, } = componentProps;
     let currentRow = row;
     if (dataValue) {
         const dataTextColumns = Array.isArray(dataText) ? dataText : [dataText];
@@ -5837,7 +5854,7 @@ FormatterParserProvider.registerFormatter('column_ZdSelect', ({ column, value, r
     }
     if (!Object.keys(currentRow).length)
         return typeof value === 'object' ? '' : value;
-    const textColumn = formatterDataText || dataText;
+    const textColumn = formatterDataText || dataTextDiscrete || dataText;
     if (!textColumn)
         return value;
     if (typeof textColumn === 'string') {
@@ -6433,6 +6450,7 @@ class Grid extends Iterable {
         props.children = newChildren;
         props.name = instanceName;
         props.allowDuplicate = true;
+        props.autoRegister = false;
         let instance = null;
         try {
             instance = this.updateActionInstance(instanceName, props);
@@ -6455,8 +6473,15 @@ class Grid extends Iterable {
         }
         return { props, instance };
     }
+    filterObject(obj, callback) {
+        return Object.fromEntries(Object.entries(obj).filter(([key, value]) => callback(key, value)));
+    }
+    deleteAccessorProps(newComponent) {
+        const filteredProps = this.filterObject(newComponent, (_key, value) => !Accessor.isAccessorDefinition(value));
+        return filteredProps;
+    }
     updateActionInstance(instanceName, newComponent) {
-        const updatedComponent = Object.assign({}, newComponent);
+        const updatedComponent = this.deleteAccessorProps(newComponent);
         delete updatedComponent.datasource;
         delete updatedComponent.events;
         const instance = Metadata.updateInstance(instanceName, updatedComponent);
@@ -6537,6 +6562,18 @@ class NotEditingError extends Error {
     }
 }
 
+class GridEditableController {
+    constructor(grid) {
+        this.grid = grid;
+    }
+    get hasAddedRows() {
+        return this.grid.getAddedRows().length > 0;
+    }
+    isAddedRow({ row }) {
+        return this.grid.isAdded(row);
+    }
+}
+
 /**
  * Base class for Grid component
  */
@@ -6578,12 +6615,16 @@ class GridEditable extends Grid {
             },
         };
         this.viewEnterEdit = null;
+        this.showCancelColumn = false;
         this.newRowIdentifier = '__added_row';
+        this.createGridController();
         this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
         this.canEditRow = this.getInitValue('canEditRow', props.canEditRow, this.canEditRow);
         this.editingNewRows = this.getInitValue('editingNewRows', props.editingNewRows, this.editingNewRows);
         this.singleEdit = this.getInitValue('singleEdit', props.singleEdit, this.singleEdit);
+        this.showCancelColumn = this.getInitValue('showCancelColumn', props.showCancelColumn, this.showCancelColumn);
         this.createAccessors();
+        this.addCancelColumn();
     }
     setViewEnterEdit(viewEnterEdit) {
         this.viewEnterEdit = viewEnterEdit;
@@ -6603,6 +6644,46 @@ class GridEditable extends Grid {
     getColumns(columns) {
         return columns.map((column) => new GridColumnEditable(column));
     }
+    addCancelColumn() {
+        if (!this.showCancelColumn)
+            return;
+        const deleteColumn = this.instantiateCancelColumn();
+        this.columns.push(deleteColumn);
+    }
+    getCancelColumnProps() {
+        return {
+            name: `cancel_action_${this.name}`,
+            type: 'action',
+            align: 'center',
+            actionFixed: true,
+            isVisible: `{{GridEditableController_${this.name}.hasAddedRows}}`,
+            children: [
+                {
+                    name: 'cancel_btn',
+                    component: 'ZdButton',
+                    icon: true,
+                    iconName: 'clear',
+                    small: true,
+                    conditions: {
+                        isVisible: `{{GridEditableController_${this.name}.isAddedRow}}`,
+                    },
+                    events: {
+                        click: ({ row }) => {
+                            const { uniqueKey } = this.datasource;
+                            this.cancelAddedRow(row[uniqueKey]);
+                        },
+                    },
+                },
+            ],
+        };
+    }
+    instantiateCancelColumn() {
+        return new GridColumnEditable(this.getCancelColumnProps());
+    }
+    createGridController() {
+        const controller = new GridEditableController(this);
+        Loader.addController(`GridEditableController_${this.name}`, controller);
+    }
     /**
      * Changes column order
      * @async
@@ -6647,6 +6728,22 @@ class GridEditable extends Grid {
         }
         this.cellClickEvent(row, column, event, element);
     }
+    /**
+     * Dispatches cellDoubleClick event
+     * @param row Grid row
+     * @param column Grid column
+     * @param event DOM event
+     * @param element DOM Element
+     */
+    cellDoubleClick(row, column, event, element, canEdit = true) {
+        if (column.editable && canEdit) {
+            this.preventRowDoubleClick = true;
+            this.datasource.currentRow = row;
+            this.inlineEdit(row, column, event, element);
+            return;
+        }
+        this.cellDoubleClickEvent(row, column, event, element);
+    }
     /**
      * Enables editing mode
      * @param row Grid row
@@ -6667,6 +6764,11 @@ class GridEditable extends Grid {
             event, element, row, column, component: this,
         });
     }
+    cellDoubleClickEvent(row, column, event, element) {
+        this.preventRowDoubleClick = this.callEvent('cellDoubleClick', {
+            event, element, row, column, component: this,
+        });
+    }
     /**
      * Dispatches select/unselect event
      * @param row Grid row
@@ -6752,32 +6854,39 @@ class GridEditable extends Grid {
                 }
             } });
         this.updateOriginalRow(key, row);
-        return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false, allowDuplicate: true });
+        return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false, allowDuplicate: true, autoRegister: false });
     }
+    /**
+     * Pushes lookup values into the column's datasource
+     * If the row[column.name] has a selected value, pushes it
+     */
     checkLookupData(column, row, componentProps) {
-        if (row[column.name] && column.lookupData && componentProps.datasource) {
-            componentProps.datasource.data = componentProps.datasource.data || [];
-            const colValue = row[column.name];
-            if (Array.isArray(colValue)) {
-                colValue.forEach((item) => {
-                    const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
-                    if (column.lookupData[value]) {
-                        componentProps.datasource.data.push(column.lookupData[value]);
-                    }
-                });
-                return;
-            }
-            if (colValue && typeof colValue === 'object'
-                && Object.prototype.hasOwnProperty.call(colValue, componentProps.dataValue)) {
-                const value = colValue[componentProps.dataValue];
+        if (!row[column.name] || !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];
+        if (Array.isArray(colValue)) {
+            colValue.forEach((item) => {
+                const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
                 if (column.lookupData[value]) {
                     componentProps.datasource.data.push(column.lookupData[value]);
                 }
-                return;
-            }
-            if (column.lookupData[colValue]) {
-                componentProps.datasource.data.push(column.lookupData[colValue]);
+            });
+            return;
+        }
+        if (colValue && typeof colValue === 'object'
+            && Object.prototype.hasOwnProperty.call(colValue, componentProps.dataValue)) {
+            const value = colValue[componentProps.dataValue];
+            if (column.lookupData[value]) {
+                componentProps.datasource.data.push(column.lookupData[value]);
             }
+            return;
+        }
+        if (column.lookupData[colValue]) {
+            componentProps.datasource.data.push(column.lookupData[colValue]);
         }
     }
     checkCompValidity(component) {
@@ -6805,17 +6914,24 @@ class GridEditable extends Grid {
             if (component)
                 column.checkOutValues(component, row, newRow[key]);
             this.editedRows = Object.assign(Object.assign({}, this.editedRows), newRow);
+            if (this.isAdded(row)) {
+                this.addedRows = Object.assign(Object.assign({}, this.addedRows), newRow);
+            }
         }
         else if (this.editedRows[key]) {
             const rows = Object.assign({}, this.editedRows);
-            delete rows[key][columnName];
-            delete rows[key][`${columnName}_original`];
+            const newRow = rows[key];
+            delete newRow[columnName];
+            delete newRow[`${columnName}_original`];
             if (component)
-                column.checkOutValues(component, row, rows[key]);
-            if (Object.keys(rows[key]).length === 1 && rows[key].originalRow) {
+                column.checkOutValues(component, row, newRow);
+            if (Object.keys(newRow).length === 1 && newRow.originalRow) {
                 delete rows[key];
             }
             this.editedRows = rows;
+            if (this.isAdded(row)) {
+                this.addedRows = Object.assign(Object.assign({}, this.addedRows), { [key]: newRow });
+            }
         }
     }
     updateOriginalRow(key, row) {
@@ -6833,6 +6949,14 @@ class GridEditable extends Grid {
         return this.editedRows[key]
             && this.editedRows[key][column.name] !== this.editedRows[key][`${column.name}_original`];
     }
+    /**
+     * Checks if row is an added row
+     * @param row Row
+     */
+    isAdded(row) {
+        const key = row[this.datasource.uniqueKey];
+        return !!this.addedRows[key];
+    }
     /**
      * Checks if column is valid
      * @param column Column
@@ -6870,6 +6994,27 @@ class GridEditable extends Grid {
             this.invalidComponents = {};
         });
     }
+    /**
+     * cancelAddedRow
+     */
+    cancelAddedRow(key) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const cloneEditedRows = Object.assign({}, this.editedRows);
+            const cloneAddedRows = Object.assign({}, this.addedRows);
+            delete cloneEditedRows[key];
+            delete cloneAddedRows[key];
+            this.editedRows = cloneEditedRows;
+            this.addedRows = cloneAddedRows;
+            let { data } = this.datasource;
+            if (this.datasource instanceof MemoryDatasource) {
+                data = this.datasource.allData;
+            }
+            const { uniqueKey } = this.datasource;
+            const index = data.findIndex((row) => row[uniqueKey] === key);
+            data.splice(index, 1);
+            return this.datasource.updateData(data);
+        });
+    }
     cancelAddedRows() {
         return __awaiter(this, void 0, void 0, function* () {
             const { data } = this.datasource;
@@ -6932,6 +7077,24 @@ class GridEditable extends Grid {
         });
         return editedRows;
     }
+    /**
+     * getAddedRows
+     */
+    getAddedRows() {
+        const addedRows = [];
+        Object.keys(this.addedRows).forEach((key) => {
+            const row = Object.assign(Object.assign({}, this.addedRows[key].originalRow), this.addedRows[key]);
+            delete row.originalRow;
+            delete row[this.newRowIdentifier];
+            Object.keys(row).forEach((attr) => {
+                if (Object.prototype.hasOwnProperty.call(row, `${attr}_original`)) {
+                    delete row[`${attr}_original`];
+                }
+            });
+            addedRows.push(row);
+        });
+        return addedRows;
+    }
     /**
      * Checks whether the grid is valid or not
      * @param revalidate Defines if the fields should be revalidated
@@ -7122,7 +7285,7 @@ class GridEditable extends Grid {
      */
     enterEdit(rowKey, columnName) {
         if (!this.viewEnterEdit) {
-            throw new Error('viewEnterEdit method not assigned');
+            throw new MethodNotAssignedError('viewEnterEdit');
         }
         this.viewEnterEdit(rowKey, columnName);
     }
@@ -11357,6 +11520,18 @@ class Modal extends Component {
         this.isVisible = false;
         ViewService.nextTick(() => this.callEvent('onHide', { component: this }));
     }
+    /**
+     * transitionStart event
+     */
+    transitionStart(event) {
+        this.callEvent('onTransitionStart', { event, component: this });
+    }
+    /**
+     * transitionEnd event
+     */
+    transitionEnd(event) {
+        this.callEvent('onTransitionEnd', { event, component: this });
+    }
 }
 
 /**
@@ -14775,36 +14950,43 @@ class TreeGridEditable extends TreeGrid {
                 }
             } });
         this.updateOriginalRow(key, row);
-        return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false, allowDuplicate: true });
+        return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false, allowDuplicate: true, autoRegister: false });
     }
     updateOriginalRow(key, row) {
         if (this.editedRows[key] !== undefined)
             this.editedRows[key].originalRow = omit(row, 'originalRow');
     }
+    /**
+     * Pushes lookup values into the column's datasource
+     * If the row[column.name] has a selected value, pushes it
+     */
     checkLookupData(column, row, componentProps) {
-        if (row[column.name] && column.lookupData && componentProps.datasource) {
-            componentProps.datasource.data = componentProps.datasource.data || [];
-            const colValue = row[column.name];
-            if (Array.isArray(colValue)) {
-                colValue.forEach((item) => {
-                    const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
-                    if (column.lookupData[value]) {
-                        componentProps.datasource.data.push(column.lookupData[value]);
-                    }
-                });
-                return;
-            }
-            if (colValue && typeof colValue === 'object'
-                && Object.prototype.hasOwnProperty.call(colValue, componentProps.dataValue)) {
-                const value = colValue[componentProps.dataValue];
+        if (!row[column.name] || !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];
+        if (Array.isArray(colValue)) {
+            colValue.forEach((item) => {
+                const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
                 if (column.lookupData[value]) {
                     componentProps.datasource.data.push(column.lookupData[value]);
                 }
-                return;
-            }
-            if (column.lookupData[colValue]) {
-                componentProps.datasource.data.push(column.lookupData[colValue]);
+            });
+            return;
+        }
+        if (colValue && typeof colValue === 'object'
+            && Object.prototype.hasOwnProperty.call(colValue, componentProps.dataValue)) {
+            const value = colValue[componentProps.dataValue];
+            if (column.lookupData[value]) {
+                componentProps.datasource.data.push(column.lookupData[value]);
             }
+            return;
+        }
+        if (column.lookupData[colValue]) {
+            componentProps.datasource.data.push(column.lookupData[colValue]);
         }
     }
     checkCompValidity(component) {
@@ -15059,7 +15241,7 @@ class TreeGridEditable extends TreeGrid {
      */
     enterEdit(rowKey, columnName) {
         if (!this.viewEnterEdit) {
-            throw new Error('viewEnterEdit method not assigned');
+            throw new MethodNotAssignedError('viewEnterEdit');
         }
         this.viewEnterEdit(rowKey, columnName);
     }

package/dist/zd-common.umd.js

@@ -119,7 +119,7 @@
           if (this.viewFocus) {
               return this.viewFocus();
           }
-          throw new Error('viewFocus method not assigned');
+          throw new core.MethodNotAssignedError('viewFocus');
       }
       /**
        * Retrieves initial value for the attribute and if it is an accessor,
@@ -1410,6 +1410,18 @@
           this.nextButton = this.changeDefaultButtonName(this.nextButton);
           this.createAccessors();
       }
+      setViewUpdate(viewFn) {
+          this.viewUpdate = viewFn;
+      }
+      /**
+       * Updates the Carousel rendered elements
+       */
+      update() {
+          if (!this.viewUpdate) {
+              throw new core.MethodNotAssignedError('viewUpdate');
+          }
+          this.viewUpdate();
+      }
       /**
        * After the transitionDuration time, set isSliding to false
        */
@@ -1796,7 +1808,7 @@
           if (this.viewResetValidation) {
               return this.viewResetValidation();
           }
-          throw new Error('viewResetValidation method not assigned');
+          throw new core.MethodNotAssignedError('viewResetValidation');
       }
   }
 
@@ -1896,6 +1908,10 @@
            * Input validations.
            */
           this.validations = {};
+          /**
+           * Defines if the input should be automatically registered in the closest parent Form
+           */
+          this.autoRegister = true;
           /**
            * Parsed field rules.
            */
@@ -1931,8 +1947,9 @@
           this.storePath = this.getInitValue('storePath', props.storePath, this.storePath);
           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.parseValidations(props.validations || {});
-          if (this.formParent) {
+          if (this.autoRegister && this.formParent) {
               this.formParent.registerInput(this);
           }
           this.createAccessors();
@@ -1966,7 +1983,7 @@
           if (this.viewResetValidation) {
               return this.viewResetValidation();
           }
-          throw new Error('viewResetValidation method not assigned');
+          throw new core.MethodNotAssignedError('viewResetValidation');
       }
       /**
        * Adds parsed validations based on field validations.
@@ -5823,7 +5840,7 @@
   core.FormatterParserProvider.registerFormatter('column_ZdSelect', ({ column, value, row, componentProps, }) => {
       if (value === null || value === undefined)
           return '';
-      const { dataText, formatterDataText, dataTextSeparator, dataValue, } = componentProps;
+      const { dataText, formatterDataText, dataTextSeparator, dataValue, dataTextDiscrete, } = componentProps;
       let currentRow = row;
       if (dataValue) {
           const dataTextColumns = Array.isArray(dataText) ? dataText : [dataText];
@@ -5844,7 +5861,7 @@
       }
       if (!Object.keys(currentRow).length)
           return typeof value === 'object' ? '' : value;
-      const textColumn = formatterDataText || dataText;
+      const textColumn = formatterDataText || dataTextDiscrete || dataText;
       if (!textColumn)
           return value;
       if (typeof textColumn === 'string') {
@@ -6440,6 +6457,7 @@
           props.children = newChildren;
           props.name = instanceName;
           props.allowDuplicate = true;
+          props.autoRegister = false;
           let instance = null;
           try {
               instance = this.updateActionInstance(instanceName, props);
@@ -6462,8 +6480,15 @@
           }
           return { props, instance };
       }
+      filterObject(obj, callback) {
+          return Object.fromEntries(Object.entries(obj).filter(([key, value]) => callback(key, value)));
+      }
+      deleteAccessorProps(newComponent) {
+          const filteredProps = this.filterObject(newComponent, (_key, value) => !core.Accessor.isAccessorDefinition(value));
+          return filteredProps;
+      }
       updateActionInstance(instanceName, newComponent) {
-          const updatedComponent = Object.assign({}, newComponent);
+          const updatedComponent = this.deleteAccessorProps(newComponent);
           delete updatedComponent.datasource;
           delete updatedComponent.events;
           const instance = core.Metadata.updateInstance(instanceName, updatedComponent);
@@ -6544,6 +6569,18 @@
       }
   }
 
+  class GridEditableController {
+      constructor(grid) {
+          this.grid = grid;
+      }
+      get hasAddedRows() {
+          return this.grid.getAddedRows().length > 0;
+      }
+      isAddedRow({ row }) {
+          return this.grid.isAdded(row);
+      }
+  }
+
   /**
    * Base class for Grid component
    */
@@ -6585,12 +6622,16 @@
               },
           };
           this.viewEnterEdit = null;
+          this.showCancelColumn = false;
           this.newRowIdentifier = '__added_row';
+          this.createGridController();
           this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
           this.canEditRow = this.getInitValue('canEditRow', props.canEditRow, this.canEditRow);
           this.editingNewRows = this.getInitValue('editingNewRows', props.editingNewRows, this.editingNewRows);
           this.singleEdit = this.getInitValue('singleEdit', props.singleEdit, this.singleEdit);
+          this.showCancelColumn = this.getInitValue('showCancelColumn', props.showCancelColumn, this.showCancelColumn);
           this.createAccessors();
+          this.addCancelColumn();
       }
       setViewEnterEdit(viewEnterEdit) {
           this.viewEnterEdit = viewEnterEdit;
@@ -6610,6 +6651,46 @@
       getColumns(columns) {
           return columns.map((column) => new GridColumnEditable(column));
       }
+      addCancelColumn() {
+          if (!this.showCancelColumn)
+              return;
+          const deleteColumn = this.instantiateCancelColumn();
+          this.columns.push(deleteColumn);
+      }
+      getCancelColumnProps() {
+          return {
+              name: `cancel_action_${this.name}`,
+              type: 'action',
+              align: 'center',
+              actionFixed: true,
+              isVisible: `{{GridEditableController_${this.name}.hasAddedRows}}`,
+              children: [
+                  {
+                      name: 'cancel_btn',
+                      component: 'ZdButton',
+                      icon: true,
+                      iconName: 'clear',
+                      small: true,
+                      conditions: {
+                          isVisible: `{{GridEditableController_${this.name}.isAddedRow}}`,
+                      },
+                      events: {
+                          click: ({ row }) => {
+                              const { uniqueKey } = this.datasource;
+                              this.cancelAddedRow(row[uniqueKey]);
+                          },
+                      },
+                  },
+              ],
+          };
+      }
+      instantiateCancelColumn() {
+          return new GridColumnEditable(this.getCancelColumnProps());
+      }
+      createGridController() {
+          const controller = new GridEditableController(this);
+          core.Loader.addController(`GridEditableController_${this.name}`, controller);
+      }
       /**
        * Changes column order
        * @async
@@ -6654,6 +6735,22 @@
           }
           this.cellClickEvent(row, column, event, element);
       }
+      /**
+       * Dispatches cellDoubleClick event
+       * @param row Grid row
+       * @param column Grid column
+       * @param event DOM event
+       * @param element DOM Element
+       */
+      cellDoubleClick(row, column, event, element, canEdit = true) {
+          if (column.editable && canEdit) {
+              this.preventRowDoubleClick = true;
+              this.datasource.currentRow = row;
+              this.inlineEdit(row, column, event, element);
+              return;
+          }
+          this.cellDoubleClickEvent(row, column, event, element);
+      }
       /**
        * Enables editing mode
        * @param row Grid row
@@ -6674,6 +6771,11 @@
               event, element, row, column, component: this,
           });
       }
+      cellDoubleClickEvent(row, column, event, element) {
+          this.preventRowDoubleClick = this.callEvent('cellDoubleClick', {
+              event, element, row, column, component: this,
+          });
+      }
       /**
        * Dispatches select/unselect event
        * @param row Grid row
@@ -6759,32 +6861,39 @@
                   }
               } });
           this.updateOriginalRow(key, row);
-          return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false, allowDuplicate: true });
+          return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false, allowDuplicate: true, autoRegister: false });
       }
+      /**
+       * Pushes lookup values into the column's datasource
+       * If the row[column.name] has a selected value, pushes it
+       */
       checkLookupData(column, row, componentProps) {
-          if (row[column.name] && column.lookupData && componentProps.datasource) {
-              componentProps.datasource.data = componentProps.datasource.data || [];
-              const colValue = row[column.name];
-              if (Array.isArray(colValue)) {
-                  colValue.forEach((item) => {
-                      const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
-                      if (column.lookupData[value]) {
-                          componentProps.datasource.data.push(column.lookupData[value]);
-                      }
-                  });
-                  return;
-              }
-              if (colValue && typeof colValue === 'object'
-                  && Object.prototype.hasOwnProperty.call(colValue, componentProps.dataValue)) {
-                  const value = colValue[componentProps.dataValue];
+          if (!row[column.name] || !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];
+          if (Array.isArray(colValue)) {
+              colValue.forEach((item) => {
+                  const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
                   if (column.lookupData[value]) {
                       componentProps.datasource.data.push(column.lookupData[value]);
                   }
-                  return;
-              }
-              if (column.lookupData[colValue]) {
-                  componentProps.datasource.data.push(column.lookupData[colValue]);
+              });
+              return;
+          }
+          if (colValue && typeof colValue === 'object'
+              && Object.prototype.hasOwnProperty.call(colValue, componentProps.dataValue)) {
+              const value = colValue[componentProps.dataValue];
+              if (column.lookupData[value]) {
+                  componentProps.datasource.data.push(column.lookupData[value]);
               }
+              return;
+          }
+          if (column.lookupData[colValue]) {
+              componentProps.datasource.data.push(column.lookupData[colValue]);
           }
       }
       checkCompValidity(component) {
@@ -6812,17 +6921,24 @@
               if (component)
                   column.checkOutValues(component, row, newRow[key]);
               this.editedRows = Object.assign(Object.assign({}, this.editedRows), newRow);
+              if (this.isAdded(row)) {
+                  this.addedRows = Object.assign(Object.assign({}, this.addedRows), newRow);
+              }
           }
           else if (this.editedRows[key]) {
               const rows = Object.assign({}, this.editedRows);
-              delete rows[key][columnName];
-              delete rows[key][`${columnName}_original`];
+              const newRow = rows[key];
+              delete newRow[columnName];
+              delete newRow[`${columnName}_original`];
               if (component)
-                  column.checkOutValues(component, row, rows[key]);
-              if (Object.keys(rows[key]).length === 1 && rows[key].originalRow) {
+                  column.checkOutValues(component, row, newRow);
+              if (Object.keys(newRow).length === 1 && newRow.originalRow) {
                   delete rows[key];
               }
               this.editedRows = rows;
+              if (this.isAdded(row)) {
+                  this.addedRows = Object.assign(Object.assign({}, this.addedRows), { [key]: newRow });
+              }
           }
       }
       updateOriginalRow(key, row) {
@@ -6840,6 +6956,14 @@
           return this.editedRows[key]
               && this.editedRows[key][column.name] !== this.editedRows[key][`${column.name}_original`];
       }
+      /**
+       * Checks if row is an added row
+       * @param row Row
+       */
+      isAdded(row) {
+          const key = row[this.datasource.uniqueKey];
+          return !!this.addedRows[key];
+      }
       /**
        * Checks if column is valid
        * @param column Column
@@ -6877,6 +7001,27 @@
               this.invalidComponents = {};
           });
       }
+      /**
+       * cancelAddedRow
+       */
+      cancelAddedRow(key) {
+          return __awaiter(this, void 0, void 0, function* () {
+              const cloneEditedRows = Object.assign({}, this.editedRows);
+              const cloneAddedRows = Object.assign({}, this.addedRows);
+              delete cloneEditedRows[key];
+              delete cloneAddedRows[key];
+              this.editedRows = cloneEditedRows;
+              this.addedRows = cloneAddedRows;
+              let { data } = this.datasource;
+              if (this.datasource instanceof core.MemoryDatasource) {
+                  data = this.datasource.allData;
+              }
+              const { uniqueKey } = this.datasource;
+              const index = data.findIndex((row) => row[uniqueKey] === key);
+              data.splice(index, 1);
+              return this.datasource.updateData(data);
+          });
+      }
       cancelAddedRows() {
           return __awaiter(this, void 0, void 0, function* () {
               const { data } = this.datasource;
@@ -6939,6 +7084,24 @@
           });
           return editedRows;
       }
+      /**
+       * getAddedRows
+       */
+      getAddedRows() {
+          const addedRows = [];
+          Object.keys(this.addedRows).forEach((key) => {
+              const row = Object.assign(Object.assign({}, this.addedRows[key].originalRow), this.addedRows[key]);
+              delete row.originalRow;
+              delete row[this.newRowIdentifier];
+              Object.keys(row).forEach((attr) => {
+                  if (Object.prototype.hasOwnProperty.call(row, `${attr}_original`)) {
+                      delete row[`${attr}_original`];
+                  }
+              });
+              addedRows.push(row);
+          });
+          return addedRows;
+      }
       /**
        * Checks whether the grid is valid or not
        * @param revalidate Defines if the fields should be revalidated
@@ -7129,7 +7292,7 @@
        */
       enterEdit(rowKey, columnName) {
           if (!this.viewEnterEdit) {
-              throw new Error('viewEnterEdit method not assigned');
+              throw new core.MethodNotAssignedError('viewEnterEdit');
           }
           this.viewEnterEdit(rowKey, columnName);
       }
@@ -11364,6 +11527,18 @@
           this.isVisible = false;
           core.ViewService.nextTick(() => this.callEvent('onHide', { component: this }));
       }
+      /**
+       * transitionStart event
+       */
+      transitionStart(event) {
+          this.callEvent('onTransitionStart', { event, component: this });
+      }
+      /**
+       * transitionEnd event
+       */
+      transitionEnd(event) {
+          this.callEvent('onTransitionEnd', { event, component: this });
+      }
   }
 
   /**
@@ -14782,36 +14957,43 @@
                   }
               } });
           this.updateOriginalRow(key, row);
-          return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false, allowDuplicate: true });
+          return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false, allowDuplicate: true, autoRegister: false });
       }
       updateOriginalRow(key, row) {
           if (this.editedRows[key] !== undefined)
               this.editedRows[key].originalRow = omit__default["default"](row, 'originalRow');
       }
+      /**
+       * Pushes lookup values into the column's datasource
+       * If the row[column.name] has a selected value, pushes it
+       */
       checkLookupData(column, row, componentProps) {
-          if (row[column.name] && column.lookupData && componentProps.datasource) {
-              componentProps.datasource.data = componentProps.datasource.data || [];
-              const colValue = row[column.name];
-              if (Array.isArray(colValue)) {
-                  colValue.forEach((item) => {
-                      const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
-                      if (column.lookupData[value]) {
-                          componentProps.datasource.data.push(column.lookupData[value]);
-                      }
-                  });
-                  return;
-              }
-              if (colValue && typeof colValue === 'object'
-                  && Object.prototype.hasOwnProperty.call(colValue, componentProps.dataValue)) {
-                  const value = colValue[componentProps.dataValue];
+          if (!row[column.name] || !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];
+          if (Array.isArray(colValue)) {
+              colValue.forEach((item) => {
+                  const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
                   if (column.lookupData[value]) {
                       componentProps.datasource.data.push(column.lookupData[value]);
                   }
-                  return;
-              }
-              if (column.lookupData[colValue]) {
-                  componentProps.datasource.data.push(column.lookupData[colValue]);
+              });
+              return;
+          }
+          if (colValue && typeof colValue === 'object'
+              && Object.prototype.hasOwnProperty.call(colValue, componentProps.dataValue)) {
+              const value = colValue[componentProps.dataValue];
+              if (column.lookupData[value]) {
+                  componentProps.datasource.data.push(column.lookupData[value]);
               }
+              return;
+          }
+          if (column.lookupData[colValue]) {
+              componentProps.datasource.data.push(column.lookupData[colValue]);
           }
       }
       checkCompValidity(component) {
@@ -15066,7 +15248,7 @@
        */
       enterEdit(rowKey, columnName) {
           if (!this.viewEnterEdit) {
-              throw new Error('viewEnterEdit method not assigned');
+              throw new core.MethodNotAssignedError('viewEnterEdit');
           }
           this.viewEnterEdit(rowKey, columnName);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.100.0",
+  "version": "1.101.0",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -43,5 +43,5 @@
     "lodash.times": "4.3.*",
     "mockdate": "3.0.*"
   },
-  "gitHead": "f387e52dc26f20fbd8dfa61b3881a096f32c68ad"
+  "gitHead": "04d65b589020380fe76f9dbbbed3e4106b3f20fe"
 }

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

@@ -131,11 +131,17 @@ export declare class Carousel extends ComponentRender implements ICarousel {
      * Carousel's left side button
      */
     prevButton: IButton;
+    viewUpdate?: () => void;
     /**
      * Creates a new Carousel
      * @param props Carousel properties
      */
     constructor(props: ICarousel);
+    setViewUpdate(viewFn: () => void): void;
+    /**
+     * Updates the Carousel rendered elements
+     */
+    update(): void;
     /**
      * After the transitionDuration time, set isSliding to false
      */

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

@@ -0,0 +1,8 @@
+import { IDictionary } from '@zeedhi/core';
+import { GridEditable } from './grid-editable';
+export declare class GridEditableController {
+    private grid;
+    constructor(grid: GridEditable);
+    get hasAddedRows(): boolean;
+    isAddedRow({ row }: IDictionary): boolean;
+}

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

@@ -47,6 +47,7 @@ export declare class GridEditable extends Grid implements IGridEditable {
     protected cancelEditedRowsKeyMapping: IKeyMap;
     protected viewEnterEdit: ((rowKey: string, columnName: string) => void) | null;
     setViewEnterEdit(viewEnterEdit: (rowKey: string, columnName: string) => void): void;
+    showCancelColumn: boolean;
     constructor(props: IGridEditable);
     onMounted(element: any): void;
     onBeforeDestroy(): void;
@@ -55,6 +56,10 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * @param columns Grid columns parameter
      */
     protected getColumns(columns: IGridColumnEditable[]): GridColumnEditable[];
+    protected addCancelColumn(): void;
+    protected getCancelColumnProps(): IGridColumnEditable;
+    protected instantiateCancelColumn(): GridColumnEditable;
+    protected createGridController(): void;
     /**
      * Changes column order
      * @async
@@ -76,6 +81,14 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * @param element DOM Element
      */
     cellClick(row: IDictionary<any>, column: GridColumnEditable, event: Event, element: any, canEdit?: boolean): void;
+    /**
+     * Dispatches cellDoubleClick event
+     * @param row Grid row
+     * @param column Grid column
+     * @param event DOM event
+     * @param element DOM Element
+     */
+    cellDoubleClick(row: IDictionary<any>, column: GridColumnEditable, event: Event, element: any, canEdit?: boolean): void;
     /**
      * Enables editing mode
      * @param row Grid row
@@ -85,6 +98,7 @@ export declare class GridEditable extends Grid implements IGridEditable {
      */
     inlineEdit(row: IDictionary, column: GridColumnEditable, event: Event, element: any): void;
     cellClickEvent(row: IDictionary<any>, column: GridColumnEditable, event: Event, element: any): void;
+    cellDoubleClickEvent(row: IDictionary<any>, column: GridColumnEditable, event: Event, element: any): void;
     /**
      * Dispatches select/unselect event
      * @param row Grid row
@@ -119,7 +133,12 @@ export declare class GridEditable extends Grid implements IGridEditable {
         events: any;
         autofill: boolean;
         allowDuplicate: boolean;
+        autoRegister: boolean;
     };
+    /**
+     * Pushes lookup values into the column's datasource
+     * If the row[column.name] has a selected value, pushes it
+     */
     private checkLookupData;
     private checkCompValidity;
     /**
@@ -133,6 +152,11 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * @param row Row
      */
     isEdited(column: IGridColumnEditable, row: IDictionary): boolean;
+    /**
+     * Checks if row is an added row
+     * @param row Row
+     */
+    isAdded(row: IDictionary): boolean;
     /**
      * Checks if column is valid
      * @param column Column
@@ -144,6 +168,10 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * Cancels all edited rows and enable grid components
      */
     cancelEditedRows(): Promise<void>;
+    /**
+     * cancelAddedRow
+     */
+    cancelAddedRow(key: string | number): Promise<any>;
     private cancelAddedRows;
     private addDataRow;
     /**
@@ -158,6 +186,10 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * @throws Will throw when it finds an invalid row
      */
     getEditedRows(revalidate?: boolean, silent?: boolean): IDictionary<any>[];
+    /**
+     * getAddedRows
+     */
+    getAddedRows(): IDictionary<any>[];
     /**
      * Checks whether the grid is valid or not
      * @param revalidate Defines if the fields should be revalidated

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

@@ -225,6 +225,8 @@ export declare class Grid extends Iterable implements IGrid {
         props: IComponent;
         instance: Component | null;
     };
+    private filterObject;
+    private deleteAccessorProps;
     protected updateActionInstance(instanceName: string, newComponent: IComponent): Component;
     getActionComponent(actionComponent: IComponent, column: GridColumn, row: IDictionary, parentPath?: string): IComponent;
     protected changeDefaultSlotNames(slot: IComponentRender[]): any;

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

@@ -70,4 +70,5 @@ export interface IGridEditable extends IGrid {
         row: IDictionary<any>;
         component: GridEditable;
     }) => boolean;
+    showCancelColumn?: boolean;
 }

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

@@ -99,6 +99,10 @@ export declare class Input extends ComponentRender implements IInput {
      * Input validations.
      */
     validations: IDictionary<IDictionary<string | number>>;
+    /**
+     * Defines if the input should be automatically registered in the closest parent Form
+     */
+    autoRegister: boolean;
     /**
      * Optional validation method assigned by view layer.
      */

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

@@ -35,4 +35,5 @@ export interface IInput extends IComponentRender {
     storePath?: string;
     validations?: IDictionary<IDictionary<string | number>>;
     value?: any;
+    autoRegister?: boolean;
 }

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

@@ -6,6 +6,8 @@ export declare type IModalEvent = IEventParam<Modal>;
 export interface IModalEvents<T = IEventParam<any>> extends IComponentEvents<T> {
     onShow?: EventDef<T>;
     onHide?: EventDef<T>;
+    onTransitionStart?: EventDef<T>;
+    onTransitionEnd?: EventDef<T>;
 }
 export interface IModalGrid {
     cols?: number | string;

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

@@ -50,4 +50,12 @@ export declare class Modal extends Component implements IModal {
      * Closes modal
      */
     hide(): void;
+    /**
+     * transitionStart event
+     */
+    transitionStart(event: Event): void;
+    /**
+     * transitionEnd event
+     */
+    transitionEnd(event: Event): void;
 }

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

@@ -110,8 +110,13 @@ export declare class TreeGridEditable extends TreeGrid implements ITreeGridEdita
         events: any;
         autofill: boolean;
         allowDuplicate: boolean;
+        autoRegister: boolean;
     };
     private updateOriginalRow;
+    /**
+     * Pushes lookup values into the column's datasource
+     * If the row[column.name] has a selected value, pushes it
+     */
     private checkLookupData;
     private checkCompValidity;
     /**