@zeedhi/common 1.96.0 → 1.96.1

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, MemoryDatasource, Cookie, Http, URL as URL$1, VersionService } from '@zeedhi/core';
+import { AccessorManager, Event, KeyMap, Metadata, Accessor, I18n, FormatterParserProvider, Validation, Mask, DatasourceFactory, MethodNotAssignedError, Loader, Config, dayjs, Utils, DateHelper, Router, InstanceNotFoundError, ViewService, MemoryDatasource, Cookie, Http, URL as URL$1, VersionService } from '@zeedhi/core';
 import merge from 'lodash.merge';
 import cloneDeep from 'lodash.clonedeep';
 import debounce from 'lodash.debounce';
@@ -2003,7 +2003,10 @@ class Input extends ComponentRender {
      */
     updateRules() {
         this.rules = Object.values(this.parsedValidations)
-            .map((validation) => () => validation(this.value));
+            .map((validation) => (value) => {
+            const testValue = value !== undefined ? value : this.value;
+            return validation(testValue);
+        });
     }
     /**
      * Input value.
@@ -2056,8 +2059,11 @@ class Input extends ComponentRender {
      * Checks the input value are valid to all applied rules.
      * @returns Input is valid
      */
-    isValid() {
-        return this.rules.every((rule) => typeof rule(this.value) !== 'string');
+    isValid(value) {
+        return this.rules.every((rule) => {
+            const testValue = value !== undefined ? value : this.value;
+            return typeof rule(testValue) !== 'string';
+        });
     }
     /**
      * Triggered when the input value changes.
@@ -2142,6 +2148,19 @@ class Toggleable extends Input {
     }
 }
 
+class InputFactory {
+    static register(className, inputClass) {
+        if (!this.inputClasses[className])
+            this.inputClasses[className] = inputClass;
+    }
+    static factory(props) {
+        if (!this.inputClasses[props.component])
+            return undefined;
+        return new this.inputClasses[props.component](props);
+    }
+}
+InputFactory.inputClasses = {};
+
 /**
  * Base class for Checkbox component.
  */
@@ -2156,7 +2175,8 @@ class Checkbox extends Toggleable {
         this.showHelper = false;
         this.createAccessors();
     }
-}
+}
+InputFactory.register('ZdCheckbox', Checkbox);
 
 /**
  * Base class for Checkbox multiple component.
@@ -2209,7 +2229,8 @@ class CheckboxMultiple extends Input {
         super.onBeforeDestroy();
         this.datasource.destroy();
     }
-}
+}
+InputFactory.register('ZdCheckboxMultiple', CheckboxMultiple);
 
 /**
  * Base class for Chip component.
@@ -2696,10 +2717,15 @@ class TextInput extends Input {
          * Defines text input value should concat the suffix text.
          */
         this.valueWithSuffix = textInputDefaults.valueWithSuffix;
+        /**
+         * Defines clicks on outer icon should focus the component.
+         */
+        this.focusOnOuterIconClick = true;
         this.formatterFn = FormatterParserProvider.getFormatter('ZdTextInput');
         this.parserFn = FormatterParserProvider.getParser('ZdTextInput');
         this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, this.appendIcon);
         this.appendOuterIcon = this.getInitValue('appendOuterIcon', props.appendOuterIcon, this.appendOuterIcon);
+        this.focusOnOuterIconClick = this.getInitValue('focusOnOuterIconClick', props.focusOnOuterIconClick, this.focusOnOuterIconClick);
         this.prefix = this.getInitValue('prefix', props.prefix, this.prefix);
         this.prependIcon = this.getInitValue('prependIcon', props.prependIcon, this.prependIcon);
         this.prependOuterIcon = this.getInitValue('prependOuterIcon', props.prependOuterIcon, this.prependOuterIcon);
@@ -2805,7 +2831,8 @@ FormatterParserProvider.registerParser('ZdTextInput', (value, { valueWithPrefix
         formatted = prefixValue + formatted + suffixValue;
     }
     return formatted;
-});
+});
+InputFactory.register('ZdTextInput', TextInput);
 
 /**
  * Base class for Number component
@@ -2915,7 +2942,8 @@ FormatterParserProvider.registerParser('ZdNumber', (value, { mask = {}, } = {})
     let maskValue = typeof (maskDef) === 'function' ? maskDef(AutoNumeric.format(value)) : maskDef;
     maskValue = Object.assign(Object.assign({}, Config.masks.numberMask), maskValue);
     return value === '' ? null : AutoNumeric.unformat(value, maskValue);
-});
+});
+InputFactory.register('ZdNumber', Number$1);
 
 /**
  * Base class for Currency component
@@ -2951,7 +2979,8 @@ FormatterParserProvider.registerParser('ZdCurrency', (value, { mask = {}, } = {}
     let maskValue = typeof (maskDef) === 'function' ? maskDef(AutoNumeric.format(value)) : maskDef;
     maskValue = Object.assign(Object.assign(Object.assign({}, Config.masks.numberMask), Config.masks.currencyMask), maskValue);
     return value === '' ? null : AutoNumeric.unformat(value, maskValue);
-});
+});
+InputFactory.register('ZdCurrency', Currency);
 
 class AlertQueue {
     constructor() {
@@ -4209,7 +4238,8 @@ FormatterParserProvider.registerParser('ZdDateTime', (value, { dateTimeFormat =
         return dayjs(value, displayFormat).format(dateTimeFormat);
     }
     return value;
-});
+});
+InputFactory.register('ZdDate', Date$1);
 
 class DateRange extends TextInput {
     /* istanbul ignore next */
@@ -4673,7 +4703,8 @@ FormatterParserProvider.registerParser('ZdDateRange', (value, { dateFormat = Con
         }
     });
     return formattedValue;
-});
+});
+InputFactory.register('ZdDateRange', DateRange);
 
 /**
  * Base class for Divider component.
@@ -4943,7 +4974,10 @@ class FileInput extends TextInput {
             .map((key) => {
             const validation = this.parsedValidations[key];
             if (key !== 'maxFileSize')
-                return () => validation(this.value);
+                return (value) => {
+                    const testValue = value !== undefined ? value : this.value;
+                    return validation(testValue);
+                };
             return () => {
                 if (this.viewGetFileSizes) {
                     const fileSizes = this.viewGetFileSizes();
@@ -4965,7 +4999,8 @@ Validation.register('maxFileSize', (config) => (fileSizes) => {
     });
     const message = I18n.translate((config.message || 'VALIDATION_FILE_SIZE'), { fileError });
     return (fileError === '') || message;
-});
+});
+InputFactory.register('ZdFileInput', FileInput);
 
 /**
  * Base class for Footer component.
@@ -6008,7 +6043,7 @@ class Grid extends Iterable {
             },
             tab: {
                 event: this.navigateRight.bind(this),
-                prevent: true,
+                prevent: false,
                 active: true,
                 index: 99,
                 input: true,
@@ -6016,7 +6051,7 @@ class Grid extends Iterable {
             },
             'shift+tab': {
                 event: this.navigateLeft.bind(this),
-                prevent: true,
+                prevent: false,
                 active: true,
                 index: 99,
                 input: true,
@@ -6267,51 +6302,58 @@ class Grid extends Iterable {
             arrSelection.splice(index, 1);
         }
     }
-    navigateLeft() {
+    navigateLeft({ event }) {
         if (!this.viewNavigate)
             return;
-        this.viewNavigate('left');
+        this.viewNavigate('left', event);
     }
-    navigateRight() {
+    navigateRight({ event }) {
         if (!this.viewNavigate)
             return;
-        this.viewNavigate('right');
+        this.viewNavigate('right', event);
     }
     navigateUp() {
-        if (this.cellSelection && this.viewNavigate) {
-            this.viewNavigate('up');
-            return;
-        }
-        const { uniqueKey, currentRow } = this.datasource;
-        const rowIndex = this.datasource.data.findIndex((row) => row[uniqueKey] === currentRow[uniqueKey]);
-        if (rowIndex === -1) {
-            this.datasource.currentRow = this.datasource.data[this.datasource.data.length - 1];
-            [this.currentColumn] = this.columns;
-            return;
-        }
-        if (rowIndex === 0) {
-            this.navigatePageDown();
+        if (!this.viewNavigate)
             return;
-        }
-        this.datasource.currentRow = this.datasource.data[rowIndex - 1];
+        this.viewNavigate('up');
     }
     navigateDown() {
-        if (this.cellSelection && this.viewNavigate) {
-            this.viewNavigate('down');
+        if (!this.viewNavigate)
             return;
-        }
+        this.viewNavigate('down');
+    }
+    navigateDatasource(up) {
         const { uniqueKey, currentRow } = this.datasource;
         const rowIndex = this.datasource.data.findIndex((row) => row[uniqueKey] === currentRow[uniqueKey]);
         if (rowIndex === -1) {
-            [this.datasource.currentRow] = this.datasource.data;
-            [this.currentColumn] = this.columns;
-            return;
+            return this.navigateInitial(up);
         }
-        if (rowIndex === this.datasource.data.length - 1) {
-            this.navigatePageUp();
+        if (up && rowIndex === 0) {
+            return this.navigatePageDown();
+        }
+        if (!up && rowIndex === this.datasource.data.length - 1) {
+            return this.navigatePageUp();
+        }
+        return this.navigateCurrentRow(up, rowIndex);
+    }
+    navigateCurrentRow(up, rowIndex) {
+        const addIndex = up ? -1 : 1;
+        this.datasource.currentRow = this.datasource.data[rowIndex + addIndex];
+    }
+    navigateInitial(up) {
+        if (up) {
+            this.navigateLast();
             return;
         }
-        this.datasource.currentRow = this.datasource.data[rowIndex + 1];
+        this.navigateFirst();
+    }
+    navigateFirst() {
+        [this.datasource.currentRow] = this.datasource.data;
+        [this.currentColumn] = this.columns;
+    }
+    navigateLast() {
+        this.datasource.currentRow = this.datasource.data[this.datasource.data.length - 1];
+        [this.currentColumn] = this.columns;
     }
     navigatePageUp() {
         if (this.datasource.page < Math.ceil(this.datasource.total / this.datasource.limit)) {
@@ -6846,6 +6888,9 @@ class GridEditable extends Grid {
         if (!revalidate) {
             return Object.keys(this.invalidComponents).length === 0;
         }
+        if (!this.editing) {
+            return this.isViewGridValid();
+        }
         let allValid = true;
         this.datasource.data.forEach((row) => this.columns.forEach((column) => {
             if (!column.isVisible || !column.editable)
@@ -6855,6 +6900,38 @@ class GridEditable extends Grid {
         }));
         return allValid;
     }
+    /**
+     * Checks whether the grid is valid while not in editing mode
+     */
+    isViewGridValid(forceEditing = true) {
+        const invalidCompNames = [];
+        const componentInstances = {};
+        const editableColumns = this.columns.filter((column) => column.editable && column.isVisible);
+        editableColumns.forEach((column) => {
+            const compName = this.getCompName('temp', column.name);
+            const componentProps = Object.assign(Object.assign({}, column.componentProps), { name: compName });
+            componentInstances[column.name] = InputFactory.factory(componentProps);
+        });
+        this.datasource.data.forEach((row) => {
+            const key = row[this.datasource.uniqueKey];
+            editableColumns.forEach((column) => {
+                const instance = componentInstances[column.name];
+                if (!instance.isValid(row[column.name])) {
+                    invalidCompNames.push(this.getCompName(key, column.name));
+                }
+            });
+        });
+        if (invalidCompNames.length > 0 && forceEditing) {
+            this.editing = true;
+            ViewService.nextTick(() => {
+                invalidCompNames.forEach((compName) => {
+                    const invalidComponent = Metadata.getInstance(compName);
+                    invalidComponent.validate();
+                });
+            });
+        }
+        return invalidCompNames.length === 0;
+    }
     /**
      * Adds new row to the datasource data and pushes it to the editedRows
      * @param row Row
@@ -7340,7 +7417,8 @@ class Increment extends Number$1 {
             this.value -= this.step;
         }
     }
-}
+}
+InputFactory.register('ZdIncrement', Increment);
 
 class IterableColumnsButtonController {
     constructor(iterableComponent) {
@@ -8025,7 +8103,8 @@ FormatterParserProvider.registerFormatter('ZdSelect', (value, { dataText, dataTe
         }
         return result;
     }, '');
-});
+});
+InputFactory.register('ZdSelect', Select);
 
 /**
  * Base class for Iterable Page Size component
@@ -8192,7 +8271,8 @@ class Search extends TextInput {
             yield this.iterableComponent.setSearch(search);
         });
     }
-}
+}
+InputFactory.register('ZdSearch', Search);
 
 /**
  * Base class for IterableComponentRender component.
@@ -9450,12 +9530,14 @@ class Modal extends Component {
      */
     show() {
         this.isVisible = true;
+        ViewService.nextTick(() => this.callEvent('onShow', { component: this }));
     }
     /**
      * Closes modal
      */
     hide() {
         this.isVisible = false;
+        ViewService.nextTick(() => this.callEvent('onHide', { component: this }));
     }
 }
 
@@ -9626,7 +9708,8 @@ class Password extends TextInput {
         }
     }
 }
-FormatterParserProvider.registerFormatter('ZdPassword', (value) => (value || '').replace(/./g, '*'));
+FormatterParserProvider.registerFormatter('ZdPassword', (value) => (value || '').replace(/./g, '*'));
+InputFactory.register('ZdPassword', Password);
 
 /**
  * Base class for Progress component
@@ -9721,7 +9804,8 @@ class Radio extends Input {
         super.onBeforeDestroy();
         this.datasource.destroy();
     }
-}
+}
+InputFactory.register('ZdRadio', Radio);
 
 /**
  * Base class for Range Slider component
@@ -9818,7 +9902,8 @@ class RangeSlider extends Input {
     set value(value) {
         this.rangeSliderValue = value;
     }
-}
+}
+InputFactory.register('ZdRangeSlider', RangeSlider);
 
 /**
  * Base class for Row component.
@@ -10245,11 +10330,12 @@ class SelectMultiple extends Select {
      */
     updateRules() {
         this.rules = Object.keys(this.parsedValidations)
-            .map((key) => () => {
+            .map((key) => (value) => {
+            const testValue = value !== undefined ? value : this.value;
             const validation = this.parsedValidations[key];
             if (key !== 'required')
-                return validation(this.value);
-            return validation((this.checkboxAll && 'all') || this.value);
+                return validation(testValue);
+            return validation((this.checkboxAll && 'all') || testValue);
         });
     }
 }
@@ -11079,7 +11165,8 @@ class SelectTree extends TextInput {
             this.setValue(filteredNode.id);
         }
     }
-}
+}
+InputFactory.register('ZdSelectTree', SelectTree);
 
 /**
  * Base class for Select Tree Multiple component.
@@ -11529,7 +11616,8 @@ class Switch extends Toggleable {
         this.inset = this.getInitValue('inset', props.inset, this.inset);
         this.createAccessors();
     }
-}
+}
+InputFactory.register('ZdSwitch', Switch);
 
 /**
  * Base class for Table component.
@@ -11867,7 +11955,8 @@ class Textarea extends TextInput {
             this.addValidation('maxLength', { limit: parseInt(this.counter.toString(), 10) });
         }
     }
-}
+}
+InputFactory.register('ZdTextarea', Textarea);
 
 /**
  * Selects the time format by the rule:
@@ -12255,7 +12344,8 @@ FormatterParserProvider.registerParser('ZdTime', (value, { displayFormat = Confi
         }
     }
     return value;
-});
+});
+InputFactory.register('ZdTime', Time);
 
 /**
  * Base class for Tooltip component.
@@ -12900,45 +12990,28 @@ class TreeGrid extends Grid {
     navigateToggle(collapse) {
         this.treeDataStructure.navigateToggle(collapse);
     }
-    /**
-     * Navigate upwards
-     */
-    navigateUp() {
-        if (this.cellSelection && this.viewNavigate) {
-            this.viewNavigate('up');
-            return;
-        }
+    navigateDatasource(up) {
         const { uniqueKey, currentRow } = this.datasource;
         const rowIndex = this.treeDataStructure.findDataIndex(this.datasource.data, currentRow[uniqueKey]);
-        if (rowIndex === -1) {
-            const lastOpenedRowIdx = this.treeDataStructure.previousOpenedRow(this.datasource.data.length);
-            this.datasource.currentRow = this.datasource.data[lastOpenedRowIdx];
-        }
-        else {
+        if (up) {
+            if (rowIndex === -1) {
+                const lastOpenedRowIdx = this.treeDataStructure.previousOpenedRow(this.datasource.data.length);
+                this.datasource.currentRow = this.datasource.data[lastOpenedRowIdx];
+                return;
+            }
             const previousRowIdx = this.treeDataStructure.previousOpenedRow(rowIndex);
             if (previousRowIdx > -1) {
                 this.datasource.currentRow = this.datasource.data[previousRowIdx];
             }
-        }
-    }
-    /**
-     * Navigate downwards
-     */
-    navigateDown() {
-        if (this.cellSelection && this.viewNavigate) {
-            this.viewNavigate('down');
             return;
         }
-        const { uniqueKey, currentRow } = this.datasource;
-        const rowIndex = this.treeDataStructure.findDataIndex(this.datasource.data, currentRow[uniqueKey]);
         if (rowIndex === -1) {
             [this.datasource.currentRow] = this.datasource.data;
+            return;
         }
-        else {
-            const nextRowIdx = this.treeDataStructure.nextOpenedRow(rowIndex);
-            if (nextRowIdx > -1) {
-                this.datasource.currentRow = this.datasource.data[nextRowIdx];
-            }
+        const nextRowIdx = this.treeDataStructure.nextOpenedRow(rowIndex);
+        if (nextRowIdx > -1) {
+            this.datasource.currentRow = this.datasource.data[nextRowIdx];
         }
     }
     removeDuplicates(arr, key) {
@@ -14665,6 +14738,52 @@ class XLS3Report extends BaseReport {
     }
 }
 
+/**
+ * Class used to format grouped data into the ZhReports format
+ */
+class GroupedPDFFormatter {
+    format(data) {
+        return data.map((item) => {
+            if (this.isGroupHeader(item)) {
+                return {
+                    __group: item.group,
+                    __groupHeader: item.groupHeader,
+                    __groupFooter: false,
+                    __groupIndex: item.groupIndex,
+                    __groupLabel: item.groupLabel,
+                    __groupValue: item.groupValue,
+                    __groupOpened: item.groupOpened,
+                };
+            }
+            if (this.isGroupFooter(item)) {
+                const groupKeys = ['groupFooter', 'groupIndex', 'groupHeaders', 'groupLabel', 'groupValue', 'groupSummary'];
+                const totalColumnNames = Object.keys(item).filter((key) => !groupKeys.includes(key));
+                const result = {
+                    __group: true,
+                    __groupFooter: item.groupFooter,
+                    __groupIndex: item.groupIndex,
+                    __groupLabel: item.groupLabel,
+                    __groupValue: item.groupValue,
+                    __groupSummary: !!item.groupSummary,
+                };
+                totalColumnNames.forEach((name) => {
+                    result[name] = item[name];
+                });
+                return result;
+            }
+            const dataItem = Object.assign({}, item);
+            delete dataItem.groupHeaders;
+            return dataItem;
+        });
+    }
+    isGroupHeader(entry) {
+        return entry.groupHeader === true;
+    }
+    isGroupFooter(entry) {
+        return entry.groupFooter === true;
+    }
+}
+
 class Report {
     constructor(iterable, title) {
         this.endPoint = Config.reportsEndPoint;
@@ -14721,7 +14840,7 @@ class Report {
             const { route } = reportType;
             const { name, columns, datasource } = this.iterable;
             const { groupedData } = Object.assign({}, this.iterable);
-            const formattedColumns = this.removeColumns(columns);
+            const formattedColumns = this.filterColumns(columns);
             const metadataObj = yield reportType.buildMetadata(name, this.title, formattedColumns, datasource.filter, portrait);
             let dataset;
             if ((reportType instanceof XLS2Report || reportType instanceof XLS3Report) && groupedData) {
@@ -14729,6 +14848,11 @@ class Report {
                 const metadataObjClone = merge(rowMetadata, JSON.parse(metadataObj));
                 dataset = reportType.buildDataset(groupedData, metadataObjClone);
             }
+            else if (reportType instanceof PDFReport && groupedData && groupedData.length > 0) {
+                const formatter = new GroupedPDFFormatter();
+                const pdfGroupedData = formatter.format(groupedData);
+                dataset = reportType.buildDataset(pdfGroupedData);
+            }
             else {
                 dataset = reportType.buildDataset(data, formattedColumns);
             }
@@ -14759,7 +14883,7 @@ class Report {
             return new URL(reportFile, this.fileEndPoint).href;
         });
     }
-    removeColumns(columns) {
+    filterColumns(columns) {
         return columns.filter((item) => (item.type !== 'action' && item.isVisible));
     }
 }
@@ -14768,4 +14892,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, 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 };
+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, GroupedPDFFormatter, Header, Icon, Icons, Image, Increment, Input, InputFactory, 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 };