@zeedhi/common 1.58.0 → 1.59.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
@@ -7167,6 +7176,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 +9072,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 +13182,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
@@ -7174,6 +7183,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 +9079,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 +13238,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.59.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": "1994ad253bafc3190adf1dd0db028b2825a2f16e"
 }

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-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;
+}