@zeedhi/common 1.58.0 → 1.60.0

package/dist/zd-common.esm.js

@@ -1,8 +1,9 @@
-import { AccessorManager, Event, KeyMap, Metadata, FormatterParserProvider, Validation, Mask, Accessor, DatasourceFactory, I18n, MethodNotAssignedError, Loader, Config, dayjs, DateHelper, Utils, Router, InstanceNotFoundError, Http, Cookie, URL as URL$1, VersionService } from '@zeedhi/core';
+import { AccessorManager, Event, KeyMap, Metadata, FormatterParserProvider, Validation, Mask, Accessor, DatasourceFactory, I18n, MethodNotAssignedError, Loader, Config, dayjs, DateHelper, Utils, Router, InstanceNotFoundError, Cookie, Http, URL as URL$1, VersionService } from '@zeedhi/core';
 import merge from 'lodash.merge';
 import debounce from 'lodash.debounce';
 import isUndefined from 'lodash.isundefined';
 import set from 'lodash.set';
+import get from 'lodash.get';
 
 /**
  * Child not found error
@@ -1474,6 +1475,14 @@ class Form extends ComponentRender {
             }
         });
     }
+    /**
+     * Clear all form inputs
+     */
+    clearForm() {
+        Object.keys(this.value).forEach((item) => {
+            this.value[item] = null;
+        });
+    }
     /**
      * Saves input instance and defines property on form value.
      * @param component Children component
@@ -3097,34 +3106,38 @@ class Dashboard extends ComponentRender {
         };
         /* ----- end modal functions ----- */
         /* Edit header */
-        this.headerLeftSlot = [
-            {
-                name: `addDashboard${this.name}`,
-                component: 'ZdButton',
-                label: 'ADD',
-                iconName: 'plus',
-                color: 'white',
-                small: true,
-                cssClass: 'zd-my-2',
-                outline: true,
-                events: {
-                    click: this.openModalAddCard.bind(this),
+        this.editHeader = {
+            component: 'ZdHeader',
+            name: `edit-header-${this.name}`,
+            leftSlot: [
+                {
+                    name: `addDashboard${this.name}`,
+                    component: 'ZdButton',
+                    label: 'ADD',
+                    iconName: 'plus',
+                    color: 'white',
+                    small: true,
+                    cssClass: 'zd-my-2',
+                    outline: true,
+                    events: {
+                        click: this.openModalAddCard.bind(this),
+                    },
                 },
-            },
-            {
-                name: `saveDashboard${this.name}`,
-                component: 'ZdButton',
-                label: 'SAVE',
-                iconName: 'complete',
-                color: 'white',
-                small: true,
-                cssClass: 'zd-my-2',
-                outline: true,
-                events: {
-                    click: this.onSave.bind(this),
+                {
+                    name: `saveDashboard${this.name}`,
+                    component: 'ZdButton',
+                    label: 'SAVE',
+                    iconName: 'complete',
+                    color: 'white',
+                    small: true,
+                    cssClass: 'zd-my-2',
+                    outline: true,
+                    events: {
+                        click: this.onSave.bind(this),
+                    },
                 },
-            },
-        ];
+            ],
+        };
         this.editingMode = this.getInitValue('editingMode', props.editingMode, this.editingMode);
         this.moveMode = this.getInitValue('moveMode', props.moveMode, this.moveMode);
         this.cards = this.getInitValue('cards', props.cards, this.cards);
@@ -3133,6 +3146,7 @@ class Dashboard extends ComponentRender {
         this.height = this.getInitValue('height', props.height, this.height);
         this.heightAdjust = this.getInitValue('heightAdjust', props.heightAdjust, this.heightAdjust);
         this.cardFooterSlot = this.getInitValue('cardFooterSlot', props.cardFooterSlot, this.cardFooterSlot);
+        this.editHeader = this.getInitValue('editHeader', props.editHeader, this.editHeader);
         this.createAccessors();
     }
     onMounted(element) {
@@ -3311,7 +3325,7 @@ class Dashboard extends ComponentRender {
     }
     /* Generate unique ids */
     getCardId() {
-        return Math.random().toString(36).substr(2, 9);
+        return Math.random().toString(36).substring(2, 9);
     }
     selectCard(cardId) {
         this.currentCardId = cardId;
@@ -5109,7 +5123,7 @@ FormatterParserProvider.registerFormatter('column_ZdSelect', ({ column, value, r
     return value;
 });
 FormatterParserProvider.registerFormatter('column_ZdSelectMultiple', ({ column, value, row, componentProps, }) => {
-    if (!value || value.length === 0)
+    if (!value || !Array.isArray(value) || value.length === 0)
         return '';
     const { formatterDataText } = componentProps;
     const formatterFn = FormatterParserProvider.getFormatter('column_ZdSelect');
@@ -7167,6 +7181,119 @@ class Search extends TextInput {
     }
 }
 
+/**
+ * Base class for IterableComponentRender component.
+ * This component uses every row returned by Iterable.datasource to render
+ * components defined by componentMetadata property.
+ * If the data inside the datasource is changed you should perform
+ * a datasource.get() to force updating the rendered components.
+ */
+class IterableComponentRender extends Iterable {
+    constructor(props) {
+        super(props);
+        /**
+         * Components that will be rendered on toolbar slot
+         */
+        this.toolbarSlot = [];
+        /**
+         * Components that will be rendered on footer slot
+         */
+        this.footerSlot = [];
+        /**
+         * Row property name
+         */
+        this.rowPropName = 'row';
+        /**
+         * Components that will be rendered in no-data case
+         */
+        this.noDataSlot = [
+            {
+                name: '<<NAME>>_no-data',
+                component: 'ZdText',
+                cssClass: 'no-data',
+                text: 'NO_DATA',
+            },
+        ];
+        /**
+         * Components that will be rendered in no-result case
+         */
+        this.noResultSlot = [
+            {
+                name: '<<NAME>>_no-result',
+                component: 'ZdText',
+                cssClass: 'no-result',
+                text: 'NO_RESULT',
+            },
+        ];
+        /**
+         * Sets the height for the component.
+         */
+        this.height = 'auto';
+        /**
+         * Sets the maximum height for the component.
+         */
+        this.maxHeight = 'none';
+        /**
+         * Sets the minimum height for the component.
+         */
+        this.minHeight = 'none';
+        /**
+         * Components that will be rendered in error case
+         */
+        this.errorSlot = [];
+        this.toolbarSlot = props.toolbarSlot || this.toolbarSlot;
+        this.footerSlot = props.footerSlot || this.footerSlot;
+        this.componentMetadata = this.getInitValue('componentMetadata', props.componentMetadata, this.componentMetadata);
+        this.rowPropName = this.getInitValue('rowPropName', props.rowPropName, this.rowPropName);
+        this.noDataSlot = props.noDataSlot || this.noDataSlot;
+        this.noResultSlot = props.noResultSlot || this.noResultSlot;
+        this.errorSlot = props.errorSlot || this.errorSlot;
+        this.noDataSlot = this.changeDefaultSlotNames(this.noDataSlot);
+        this.noResultSlot = this.changeDefaultSlotNames(this.noResultSlot);
+        this.height = this.getInitValue('height', props.height, this.height);
+        this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+        this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
+        this.createAccessors();
+    }
+    addSlashes(value) {
+        if (typeof value === 'string') {
+            return value.replace(/\\/g, '\\\\')
+                .replace(/\t/g, '\\t')
+                .replace(/\n/g, '\\n')
+                .replace(/\f/g, '\\f')
+                .replace(/\r/g, '\\r')
+                .replace(/"/g, '\\"');
+        }
+        return value;
+    }
+    /**
+     * 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 rowExp = new RegExp(`"<<${this.rowPropName}>>"`, 'g');
+        const metadata = JSON.stringify(this.componentMetadata)
+            .replace(rowExp, JSON.stringify(row))
+            .replace(exp, (match) => {
+            const propPath = match.replace(/<<|>>|"/g, '').split('.').splice(1).join('.');
+            const value = this.addSlashes(get(row, propPath));
+            if (typeof value === 'string') {
+                if (match.startsWith('"') && match.endsWith('"'))
+                    return `"${value}"`;
+                return value;
+            }
+            return value;
+        });
+        return JSON.parse(metadata);
+    }
+    changeDefaultSlotNames(slot) {
+        slot.forEach((item) => {
+            item.name = item.name.replace('<<NAME>>', this.name);
+        });
+        return slot;
+    }
+}
+
 /**
  * Item not found error
  */
@@ -8950,7 +9077,17 @@ class SelectMultiple extends Select {
     }
     unSelectAllItems() {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.setValue([]);
+            if (!this.datasource.search) {
+                this.removeInserts();
+                this.insertSelected();
+                yield this.setValue([]);
+            }
+            else {
+                const newData = this.insertedValues;
+                yield this.setValue(newData);
+                this.removeInserts();
+                this.insertSelected();
+            }
         });
     }
     checkValueOnBlur() { }
@@ -13050,4 +13187,4 @@ const AutoNumeric = require('@zeedhi/autonumeric/dist/autoNumeric');
 const packageContent = require('../package.json');
 VersionService.addPackageVersion(packageContent.name, packageContent.version);
 
-export { Alert, AlertService, ApexChart, AutoNumeric, Badge, Breadcrumbs, Button, ButtonGroup, CSVReport, Card, Carousel, Checkbox, CheckboxMultiple, ChildNotFoundError, Chip, CodeEditor, Col, CollapseCard, Column, ColumnNotFoundError, Component, ComponentRender, Container, Currency, Dashboard, Date$1 as Date, DateRange, Dialog, DialogService, Divider, Dropdown, FileInput, Footer, Form, Frame, FramePage, Grid, GridColumn, GridColumnEditable, GridEditable, Header, Icon, Icons, Image, Increment, Input, Iterable, IterableColumnsButton, IterableColumnsButtonController, IterablePageComponent, IterablePageInfo, IterablePageSize, IterablePagination, List, ListGroup, ListItem, Loading, LoadingService, Login, LoginButton, MasterDetail, Menu, MenuButton, MenuGroup, MenuLink, MenuSeparator, Modal, ModalCloseButton, ModalService, Month, Number$1 as Number, PDFReport, Password, Progress, Radio, RangeSlider, Report, Row, Search, Select, SelectMultiple, SelectTree, SelectTreeMultiple, SelectableList, SpeedDial, Steppers, SvgMap, Switch, Tab, Table, Tabs, Tag, Text, TextInput, Textarea, Time, Toggleable, Tooltip, Tree, TreeDataStructure, TreeGrid, TreeGridEditable, WatchURL, XLS2Report, XLS3Report, XLSReport, initTheme };
+export { Alert, AlertService, ApexChart, AutoNumeric, Badge, Breadcrumbs, Button, ButtonGroup, CSVReport, Card, Carousel, Checkbox, CheckboxMultiple, ChildNotFoundError, Chip, CodeEditor, Col, CollapseCard, Column, ColumnNotFoundError, Component, ComponentRender, Container, Currency, Dashboard, Date$1 as Date, DateRange, Dialog, DialogService, Divider, Dropdown, FileInput, Footer, Form, Frame, FramePage, Grid, GridColumn, GridColumnEditable, GridEditable, Header, Icon, Icons, Image, Increment, Input, Iterable, IterableColumnsButton, IterableColumnsButtonController, IterableComponentRender, IterablePageComponent, IterablePageInfo, IterablePageSize, IterablePagination, List, ListGroup, ListItem, Loading, LoadingService, Login, LoginButton, MasterDetail, Menu, MenuButton, MenuGroup, MenuLink, MenuSeparator, Modal, ModalCloseButton, ModalService, Month, Number$1 as Number, PDFReport, Password, Progress, Radio, RangeSlider, Report, Row, Search, Select, SelectMultiple, SelectTree, SelectTreeMultiple, SelectableList, SpeedDial, Steppers, SvgMap, Switch, Tab, Table, Tabs, Tag, Text, TextInput, Textarea, Time, Toggleable, Tooltip, Tree, TreeDataStructure, TreeGrid, TreeGridEditable, WatchURL, XLS2Report, XLS3Report, XLSReport, initTheme };

package/dist/zd-common.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/core'), require('lodash.merge'), require('lodash.debounce'), require('lodash.isundefined'), require('lodash.set')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/core', 'lodash.merge', 'lodash.debounce', 'lodash.isundefined', 'lodash.set'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/common"] = {}, global.core, global.merge, global.debounce, global.isUndefined, global.set));
-})(this, (function (exports, core, merge, debounce, isUndefined, set) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/core'), require('lodash.merge'), require('lodash.debounce'), require('lodash.isundefined'), require('lodash.set'), require('lodash.get')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/core', 'lodash.merge', 'lodash.debounce', 'lodash.isundefined', 'lodash.set', 'lodash.get'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/common"] = {}, global.core, global.merge, global.debounce, global.isUndefined, global.set, global.get));
+})(this, (function (exports, core, merge, debounce, isUndefined, set, get) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -10,6 +10,7 @@
   var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
   var isUndefined__default = /*#__PURE__*/_interopDefaultLegacy(isUndefined);
   var set__default = /*#__PURE__*/_interopDefaultLegacy(set);
+  var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
 
   /**
    * Child not found error
@@ -1481,6 +1482,14 @@
               }
           });
       }
+      /**
+       * Clear all form inputs
+       */
+      clearForm() {
+          Object.keys(this.value).forEach((item) => {
+              this.value[item] = null;
+          });
+      }
       /**
        * Saves input instance and defines property on form value.
        * @param component Children component
@@ -3104,34 +3113,38 @@
           };
           /* ----- end modal functions ----- */
           /* Edit header */
-          this.headerLeftSlot = [
-              {
-                  name: `addDashboard${this.name}`,
-                  component: 'ZdButton',
-                  label: 'ADD',
-                  iconName: 'plus',
-                  color: 'white',
-                  small: true,
-                  cssClass: 'zd-my-2',
-                  outline: true,
-                  events: {
-                      click: this.openModalAddCard.bind(this),
+          this.editHeader = {
+              component: 'ZdHeader',
+              name: `edit-header-${this.name}`,
+              leftSlot: [
+                  {
+                      name: `addDashboard${this.name}`,
+                      component: 'ZdButton',
+                      label: 'ADD',
+                      iconName: 'plus',
+                      color: 'white',
+                      small: true,
+                      cssClass: 'zd-my-2',
+                      outline: true,
+                      events: {
+                          click: this.openModalAddCard.bind(this),
+                      },
                   },
-              },
-              {
-                  name: `saveDashboard${this.name}`,
-                  component: 'ZdButton',
-                  label: 'SAVE',
-                  iconName: 'complete',
-                  color: 'white',
-                  small: true,
-                  cssClass: 'zd-my-2',
-                  outline: true,
-                  events: {
-                      click: this.onSave.bind(this),
+                  {
+                      name: `saveDashboard${this.name}`,
+                      component: 'ZdButton',
+                      label: 'SAVE',
+                      iconName: 'complete',
+                      color: 'white',
+                      small: true,
+                      cssClass: 'zd-my-2',
+                      outline: true,
+                      events: {
+                          click: this.onSave.bind(this),
+                      },
                   },
-              },
-          ];
+              ],
+          };
           this.editingMode = this.getInitValue('editingMode', props.editingMode, this.editingMode);
           this.moveMode = this.getInitValue('moveMode', props.moveMode, this.moveMode);
           this.cards = this.getInitValue('cards', props.cards, this.cards);
@@ -3140,6 +3153,7 @@
           this.height = this.getInitValue('height', props.height, this.height);
           this.heightAdjust = this.getInitValue('heightAdjust', props.heightAdjust, this.heightAdjust);
           this.cardFooterSlot = this.getInitValue('cardFooterSlot', props.cardFooterSlot, this.cardFooterSlot);
+          this.editHeader = this.getInitValue('editHeader', props.editHeader, this.editHeader);
           this.createAccessors();
       }
       onMounted(element) {
@@ -3318,7 +3332,7 @@
       }
       /* Generate unique ids */
       getCardId() {
-          return Math.random().toString(36).substr(2, 9);
+          return Math.random().toString(36).substring(2, 9);
       }
       selectCard(cardId) {
           this.currentCardId = cardId;
@@ -5116,7 +5130,7 @@
       return value;
   });
   core.FormatterParserProvider.registerFormatter('column_ZdSelectMultiple', ({ column, value, row, componentProps, }) => {
-      if (!value || value.length === 0)
+      if (!value || !Array.isArray(value) || value.length === 0)
           return '';
       const { formatterDataText } = componentProps;
       const formatterFn = core.FormatterParserProvider.getFormatter('column_ZdSelect');
@@ -7174,6 +7188,119 @@
       }
   }
 
+  /**
+   * Base class for IterableComponentRender component.
+   * This component uses every row returned by Iterable.datasource to render
+   * components defined by componentMetadata property.
+   * If the data inside the datasource is changed you should perform
+   * a datasource.get() to force updating the rendered components.
+   */
+  class IterableComponentRender extends Iterable {
+      constructor(props) {
+          super(props);
+          /**
+           * Components that will be rendered on toolbar slot
+           */
+          this.toolbarSlot = [];
+          /**
+           * Components that will be rendered on footer slot
+           */
+          this.footerSlot = [];
+          /**
+           * Row property name
+           */
+          this.rowPropName = 'row';
+          /**
+           * Components that will be rendered in no-data case
+           */
+          this.noDataSlot = [
+              {
+                  name: '<<NAME>>_no-data',
+                  component: 'ZdText',
+                  cssClass: 'no-data',
+                  text: 'NO_DATA',
+              },
+          ];
+          /**
+           * Components that will be rendered in no-result case
+           */
+          this.noResultSlot = [
+              {
+                  name: '<<NAME>>_no-result',
+                  component: 'ZdText',
+                  cssClass: 'no-result',
+                  text: 'NO_RESULT',
+              },
+          ];
+          /**
+           * Sets the height for the component.
+           */
+          this.height = 'auto';
+          /**
+           * Sets the maximum height for the component.
+           */
+          this.maxHeight = 'none';
+          /**
+           * Sets the minimum height for the component.
+           */
+          this.minHeight = 'none';
+          /**
+           * Components that will be rendered in error case
+           */
+          this.errorSlot = [];
+          this.toolbarSlot = props.toolbarSlot || this.toolbarSlot;
+          this.footerSlot = props.footerSlot || this.footerSlot;
+          this.componentMetadata = this.getInitValue('componentMetadata', props.componentMetadata, this.componentMetadata);
+          this.rowPropName = this.getInitValue('rowPropName', props.rowPropName, this.rowPropName);
+          this.noDataSlot = props.noDataSlot || this.noDataSlot;
+          this.noResultSlot = props.noResultSlot || this.noResultSlot;
+          this.errorSlot = props.errorSlot || this.errorSlot;
+          this.noDataSlot = this.changeDefaultSlotNames(this.noDataSlot);
+          this.noResultSlot = this.changeDefaultSlotNames(this.noResultSlot);
+          this.height = this.getInitValue('height', props.height, this.height);
+          this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+          this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
+          this.createAccessors();
+      }
+      addSlashes(value) {
+          if (typeof value === 'string') {
+              return value.replace(/\\/g, '\\\\')
+                  .replace(/\t/g, '\\t')
+                  .replace(/\n/g, '\\n')
+                  .replace(/\f/g, '\\f')
+                  .replace(/\r/g, '\\r')
+                  .replace(/"/g, '\\"');
+          }
+          return value;
+      }
+      /**
+       * 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 rowExp = new RegExp(`"<<${this.rowPropName}>>"`, 'g');
+          const metadata = JSON.stringify(this.componentMetadata)
+              .replace(rowExp, JSON.stringify(row))
+              .replace(exp, (match) => {
+              const propPath = match.replace(/<<|>>|"/g, '').split('.').splice(1).join('.');
+              const value = this.addSlashes(get__default["default"](row, propPath));
+              if (typeof value === 'string') {
+                  if (match.startsWith('"') && match.endsWith('"'))
+                      return `"${value}"`;
+                  return value;
+              }
+              return value;
+          });
+          return JSON.parse(metadata);
+      }
+      changeDefaultSlotNames(slot) {
+          slot.forEach((item) => {
+              item.name = item.name.replace('<<NAME>>', this.name);
+          });
+          return slot;
+      }
+  }
+
   /**
    * Item not found error
    */
@@ -8957,7 +9084,17 @@
       }
       unSelectAllItems() {
           return __awaiter(this, void 0, void 0, function* () {
-              yield this.setValue([]);
+              if (!this.datasource.search) {
+                  this.removeInserts();
+                  this.insertSelected();
+                  yield this.setValue([]);
+              }
+              else {
+                  const newData = this.insertedValues;
+                  yield this.setValue(newData);
+                  this.removeInserts();
+                  this.insertSelected();
+              }
           });
       }
       checkValueOnBlur() { }
@@ -13106,6 +13243,7 @@
   exports.Iterable = Iterable;
   exports.IterableColumnsButton = IterableColumnsButton;
   exports.IterableColumnsButtonController = IterableColumnsButtonController;
+  exports.IterableComponentRender = IterableComponentRender;
   exports.IterablePageComponent = IterablePageComponent;
   exports.IterablePageInfo = IterablePageInfo;
   exports.IterablePageSize = IterablePageSize;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.58.0",
+  "version": "1.60.0",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -21,6 +21,7 @@
   "dependencies": {
     "@zeedhi/autonumeric": "^4.6.0",
     "lodash.debounce": "^4.0.8",
+    "lodash.get": "^4.4.2",
     "lodash.isundefined": "^3.0.1",
     "lodash.merge": "^4.6.2",
     "lodash.set": "^4.3.2"
@@ -30,6 +31,7 @@
   },
   "devDependencies": {
     "@types/lodash.debounce": "^4.0.6",
+    "@types/lodash.get": "^4.4.6",
     "@types/lodash.isundefined": "^3.0.6",
     "@types/lodash.merge": "^4.6.6",
     "@types/lodash.set": "^4.3.6",
@@ -37,5 +39,5 @@
     "lodash.times": "^4.3.2",
     "mockdate": "^3.0.2"
   },
-  "gitHead": "8d8d49f8a582b003f4c86d0c7849e839f88f1c13"
+  "gitHead": "70326c57b4ab9d895495ee1a05045060a09cc41a"
 }

package/types/components/index.d.ts

@@ -81,6 +81,8 @@ export * from './zd-iterable/iterable-page-info';
 export * from './zd-iterable/iterable-pagination';
 export * from './zd-iterable/search';
 export * from './zd-iterable/interfaces';
+export * from './zd-iterable-component-render/iterable-component-render';
+export * from './zd-iterable-component-render/interfaces';
 export * from './zd-list/list';
 export * from './zd-list/list-item';
 export * from './zd-list/list-group';

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

@@ -1,9 +1,9 @@
 import { IDashboard, IDashboardEvents, IDashboardCard } from './interfaces';
 import { ComponentRender } from '../zd-component/component-render';
-import { IButton } from '../zd-button/interfaces';
 import { Modal } from '../zd-modal/modal';
 import { IModal } from '../zd-modal/interfaces';
 import { IComponentRender } from '../zd-component/interfaces';
+import { IHeader } from '../zd-header/interfaces';
 /**
  * Base class for Dashboard component.
  */
@@ -38,7 +38,7 @@ export declare class Dashboard extends ComponentRender implements IDashboard {
     openModalAddCard(): void;
     modalCancelClick(): void;
     openModalEditCard(cardId: string): void;
-    headerLeftSlot: IButton[];
+    editHeader: IHeader;
     onSave(): void;
     getFrameProps(cardId: string): {
         name?: undefined;

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

@@ -1,8 +1,8 @@
 import { IEventParam } from '@zeedhi/core';
 import { Dashboard } from './dashboard';
 import { IComponentRender, IComponentEvents } from '../zd-component/interfaces';
-import { IButton } from '../zd-button/interfaces';
 import { ICard } from '../zd-card/interfaces';
+import { IHeader } from '../zd-header/interfaces';
 export declare type IDashboardEventParam = IEventParam<Dashboard>;
 export declare type IDashboardLoadEvent<T> = (event: T) => Promise<any>;
 export interface IDashboardEvents<T = IEventParam<any>> extends IComponentEvents<T> {
@@ -14,7 +14,7 @@ export interface IDashboard extends IComponentRender {
     cards?: IDashboardCard[];
     editingMode?: boolean;
     moveMode?: boolean;
-    headerLeftSlot?: IButton[];
+    editHeader?: IHeader;
     removePadding?: boolean;
     height?: string | number;
     heightAdjust?: string | number;

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

@@ -55,6 +55,10 @@ export declare class Form extends ComponentRender implements IForm {
      */
     get value(): IDictionary;
     set value(value: IDictionary);
+    /**
+     * Clear all form inputs
+     */
+    clearForm(): void;
     /**
      * Saves input instance and defines property on form value.
      * @param component Children component

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

@@ -0,0 +1,14 @@
+import { IComponentRender } from '../zd-component/interfaces';
+import { IIterable } from '../zd-iterable/interfaces';
+export interface IIterableComponentRender extends IIterable {
+    rowPropName?: string;
+    componentMetadata?: IComponentRender;
+    footerSlot?: IComponentRender[];
+    toolbarSlot?: IComponentRender[];
+    errorSlot?: IComponentRender[];
+    noDataSlot?: IComponentRender[];
+    noResultSlot?: IComponentRender[];
+    height?: number | string;
+    maxHeight?: number | string;
+    minHeight?: number | string;
+}

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

@@ -0,0 +1,60 @@
+import { IDictionary } from '@zeedhi/core';
+import { IComponentRender } from '../zd-component/interfaces';
+import { IIterableComponentRender } from './interfaces';
+import { Iterable } from '../zd-iterable/iterable';
+/**
+ * Base class for IterableComponentRender component.
+ * This component uses every row returned by Iterable.datasource to render
+ * components defined by componentMetadata property.
+ * If the data inside the datasource is changed you should perform
+ * a datasource.get() to force updating the rendered components.
+ */
+export declare class IterableComponentRender extends Iterable implements IIterableComponentRender {
+    /**
+     * Components that will be rendered on toolbar slot
+     */
+    toolbarSlot: IComponentRender[];
+    /**
+     * Components that will be rendered on footer slot
+     */
+    footerSlot: IComponentRender[];
+    /**
+     * Component item definition
+     */
+    componentMetadata: IComponentRender;
+    /**
+     * Row property name
+     */
+    rowPropName: string;
+    /**
+     * Components that will be rendered in no-data case
+     */
+    noDataSlot: IComponentRender[];
+    /**
+     * Components that will be rendered in no-result case
+     */
+    noResultSlot: IComponentRender[];
+    /**
+     * Sets the height for the component.
+     */
+    height: number | string;
+    /**
+     * Sets the maximum height for the component.
+     */
+    maxHeight: number | string;
+    /**
+     * Sets the minimum height for the component.
+     */
+    minHeight: number | string;
+    /**
+     * Components that will be rendered in error case
+     */
+    errorSlot: IComponentRender[];
+    constructor(props: IIterableComponentRender);
+    private addSlashes;
+    /**
+     * Returns the iterable component metadata based on row data
+     */
+    getComponentMetadata(row: IDictionary<any>): any;
+    private changeDefaultSlotNames;
+}