@zeedhi/common 1.106.1 → 1.107.1

package/dist/zd-common.esm.js

@@ -1,4 +1,4 @@
-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, Messages, Cookie, VersionService } from '@zeedhi/core';
+import { AccessorManager, Event, KeyMap, MethodNotAssignedError, Metadata, Accessor, I18n, FormatterParserProvider, Validation, Mask, DatasourceFactory, Loader, Config, dayjs, Utils, DateHelper, Router, Messages, 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';
@@ -1900,7 +1900,9 @@ class Input extends ComponentRender {
         /**
          * Input validations.
          */
-        this.validations = {};
+        this.validations = {
+            required: false,
+        };
         /**
          * Defines if the input should be automatically registered in the closest parent Form
          */
@@ -1983,7 +1985,10 @@ class Input extends ComponentRender {
      * @param validations Field validations
      */
     parseValidations(validations) {
-        Object.keys(validations).forEach((name) => this.addValidation(name, validations[name]));
+        Object.keys(validations).forEach((name) => {
+            if (validations[name])
+                this.addValidation(name, validations[name]);
+        });
     }
     /**
      * Adds input validation.
@@ -4373,6 +4378,7 @@ class DateRange extends TextInput {
         this.helperValue = this.getInitValue('helperValue', props.helperValue, this.helperValue);
         this.min = this.getInitValue('min', props.min, this.min);
         this.max = this.getInitValue('max', props.max, this.max);
+        this.rules.push(this.dateValidation);
         this.createAccessors();
         this.unitMask = this.mask;
         this.initialMask = this.getInitialMask();
@@ -4472,8 +4478,14 @@ class DateRange extends TextInput {
         }
         this.value = this.internalValue; // forces value accessor to be called if necessary
     }
+    /**
+     * Faz a validação do array de datas
+     * @param format o formato da data
+     * @param values o array de datas
+     * @returns true se todos os valores forem validados
+     * */
     isValidDateArray(format, values) {
-        if (!values || values.length === 0)
+        if (!values || values.length < 2)
             return false;
         return values.every((value) => this.isValidDate(value, format));
     }
@@ -6374,9 +6386,107 @@ class Grid extends Iterable {
             });
         }
     }
+    /**
+     * Retorna a quantidade total de linhas selecionadas caso exista
+     */
+    get pageText() {
+        let text = super.pageText;
+        if (this.selectedRows.length) {
+            let translatedText = '';
+            if (this.selectedRows.length === 1) {
+                translatedText = I18n.translate('ROW_SELECTED');
+            }
+            else {
+                translatedText = I18n.translate('ROWS_SELECTEDS');
+            }
+            text = `${this.selectedRows.length} ${translatedText}`;
+        }
+        return text;
+    }
+    /**
+     * Solicita uma confirmação se os registros nas outras páginas devem ser selecionados também.
+     * @private
+     * @returns {Promise<boolean>} Objeto Promise quando a confirmação for feita
+     *                             com parametro true se confirmado a seleção de todas páginas.
+     */
+    askToSelectAll() {
+        return new Promise((resolve) => {
+            const buttonClick = (yes) => {
+                DialogService.hide();
+                resolve(yes);
+            };
+            if (this.datasource.allData.length === this.datasource.data.length) {
+                resolve(false);
+            }
+            else {
+                DialogService.show({
+                    name: `${this.name}-selectall-dialog`,
+                    type: 'warning',
+                    title: I18n.translate('SELECTALL'),
+                    text: I18n.translate('SELECTALL_TEXT'),
+                    buttons: [
+                        {
+                            name: 'yes',
+                            component: 'ZdButton',
+                            label: 'YES',
+                            events: { click: () => { buttonClick(true); } },
+                            outline: true,
+                        },
+                        {
+                            name: 'no',
+                            component: 'ZdButton',
+                            label: 'NO',
+                            events: { click: () => { buttonClick(false); } },
+                        },
+                    ],
+                });
+            }
+        });
+    }
+    /**
+     * Solicita uma confirmação se os registros nas outras páginas precisam ser removidos também.
+     * @private
+     * @returns {Promise<void>} Objeto Promise quando a confirmação for feita.
+     */
+    askToUnselectAll() {
+        return new Promise((resolve) => {
+            const buttonClick = (yes) => {
+                if (yes)
+                    this.selectedRows = [];
+                DialogService.hide();
+                resolve();
+            };
+            DialogService.show({
+                name: `${this.name}-unselectall-dialog`,
+                type: 'warning',
+                title: I18n.translate('UNSELECTALL'),
+                text: I18n.translate('UNSELECTALL_TEXT'),
+                buttons: [
+                    {
+                        name: 'yes',
+                        component: 'ZdButton',
+                        label: 'YES',
+                        events: { click: () => { buttonClick(true); } },
+                        outline: true,
+                    },
+                    {
+                        name: 'no',
+                        component: 'ZdButton',
+                        label: 'NO',
+                        events: { click: () => { buttonClick(false); } },
+                    },
+                ],
+            });
+        });
+    }
+    /**
+     * Efetua a seleção/desseleção de todas as linhas do grid
+     * @param {boolean} isSelected Indica se as linhas foram selecionadas ou não
+     * @returns {Promise<void>} Objeto Promise quando a seleção/desseleção acabar de ser realizada
+     */
     selectAll(isSelected) {
         if (!this.selectable)
-            return;
+            return Promise.resolve();
         this.selectionState = { allSelected: isSelected, except: [] };
         if (!isSelected) {
             this.datasource.data.forEach((row) => {
@@ -6385,15 +6495,23 @@ class Grid extends Iterable {
                     this.selectedRows.splice(index, 1);
                 }
             });
-            return;
-        }
-        this.datasource.data.forEach((row) => {
-            if (this.callDisableSelection(row))
-                return;
-            const key = row[this.datasource.uniqueKey];
-            if (key && this.selectedRows.indexOf(row) === -1) {
-                this.selectedRows.push(row);
+            // se ainda existir linhas selecionadas, pergunta se deseja remover tudo.
+            if (this.selectedRows.length) {
+                return this.askToUnselectAll();
             }
+            return Promise.resolve();
+        }
+        return this.askToSelectAll().then((selectAllData) => {
+            const dataArray = selectAllData ? this.datasource.allData : this.datasource.data;
+            dataArray.forEach((row) => {
+                if (this.callDisableSelection(row))
+                    return;
+                const key = row[this.datasource.uniqueKey];
+                if (key && this.selectedRows.indexOf(row) === -1) {
+                    this.selectedRows.push(row);
+                }
+            });
+            return Promise.resolve();
         });
     }
     toggleRow(row) {
@@ -6602,7 +6720,39 @@ class Grid extends Iterable {
     getColumn(name) {
         return super.getColumn(name);
     }
-}
+}
+Messages.add({
+    'pt-BR': {
+        translation: {
+            ROW_SELECTED: 'linha selecionada',
+            ROWS_SELECTEDS: 'linhas selecionadas',
+            UNSELECTALL: 'Remover seleção',
+            UNSELECTALL_TEXT: 'Existem linhas selecionadas em outras páginas. Deseja removê-las tambem?',
+            SELECTALL: 'Adicionar seleção',
+            SELECTALL_TEXT: 'Existem linhas que podem ser selecionadas em outras páginas. Deseja selecioná-las tambem?',
+        },
+    },
+    'en-US': {
+        translation: {
+            ROW_SELECTED: 'row selected',
+            ROWS_SELECTEDS: 'rows selected',
+            UNSELECTALL: 'Remove selection',
+            UNSELECTALL_TEXT: 'There are selected rows on other pages. Do you want to remove them too?',
+            SELECTALL: 'Add selection',
+            SELECTALL_TEXT: 'There are rows that can be selected on other pages. Do you want to select them too?',
+        },
+    },
+    'es-ES': {
+        translation: {
+            ROW_SELECTED: 'línea seleccionada',
+            ROWS_SELECTEDS: 'líneas seleccionadas',
+            UNSELECTALL: 'Eliminar selección',
+            UNSELECTALL_TEXT: 'Hay líneas seleccionadas en otras páginas. ¿Quieres eliminarlas también?',
+            SELECTALL: 'Añadir selección',
+            SELECTALL_TEXT: 'Hay líneas que se pueden seleccionar en otras páginas. ¿Quieres seleccionarlas también?',
+        },
+    },
+});
 
 /**
  * Base class for Grid column
@@ -7099,8 +7249,7 @@ class GridEditable extends Grid {
     }
     cancelAddedRows() {
         return __awaiter(this, void 0, void 0, function* () {
-            const { data } = this.datasource;
-            const allData = this.datasource.allData || data;
+            const { allData } = this.datasource;
             Promise.resolve(allData);
             for (let index = allData.length - 1; index >= 0; index -= 1) {
                 const row = allData[index];
@@ -7236,29 +7385,36 @@ class GridEditable extends Grid {
      */
     addNewRow(row, position = 'end') {
         return __awaiter(this, void 0, void 0, function* () {
-            let data;
-            if (this.datasource instanceof MemoryDatasource) {
-                data = this.datasource.allData;
-            }
-            else {
-                data = this.datasource.data;
-            }
-            row[this.newRowIdentifier] = true;
-            if (position === 'start') {
-                data.unshift(row);
-            }
-            else {
-                data.push(row);
-            }
-            const id = row[this.datasource.uniqueKey];
-            if (id) {
-                this.editedRows = Object.assign(Object.assign({}, this.editedRows), { [id]: Object.assign({}, row) });
-                this.addedRows = Object.assign(Object.assign({}, this.addedRows), { [id]: Object.assign({}, row) });
-            }
+            const data = this.insertRowInDatasource(row, position);
+            this.saveRowReference(row);
             yield this.datasource.updateData(data);
             this.editing = true;
         });
     }
+    saveRowReference(row) {
+        const id = row[this.datasource.uniqueKey];
+        if (id) {
+            this.editedRows = Object.assign(Object.assign({}, this.editedRows), { [id]: Object.assign({}, row) });
+            this.addedRows = Object.assign(Object.assign({}, this.addedRows), { [id]: Object.assign({}, row) });
+        }
+    }
+    insertRowInDatasource(row, position) {
+        let data;
+        if (this.datasource instanceof MemoryDatasource) {
+            data = this.datasource.allData;
+        }
+        else {
+            data = this.datasource.data;
+        }
+        row[this.newRowIdentifier] = true;
+        if (position === 'start') {
+            data.unshift(row);
+        }
+        else {
+            data.push(row);
+        }
+        return data;
+    }
     /**
      * Gets the editable component name
      * @param key Row unique key
@@ -9677,7 +9833,7 @@ class Select extends TextInput {
         /* Defines if should open modal with grid to make the selection */
         this.modalSelection = false;
         /* Defines fields to show on modal */
-        this.modalSelectionFields = [];
+        this.modalSelectionColumns = [];
         this.dsSearch = {
             SEARCH: (value, searchIn) => ({
                 searchIn: [searchIn],
@@ -9733,7 +9889,7 @@ class Select extends TextInput {
         this.dataValueOutFormName = this.getInitValue('dataValueOutFormName', props.dataValueOutFormName, this.dataValueOutFormName);
         this.closeOnScroll = this.getInitValue('closeOnScroll', props.closeOnScroll, this.closeOnScroll);
         this.modalSelection = this.getInitValue('modalSelection', props.modalSelection, this.modalSelection);
-        this.modalSelectionFields = this.getInitValue('modalSelectionFields', props.modalSelectionFields, this.modalSelectionFields);
+        this.modalSelectionColumns = this.getInitValue('modalSelectionColumns', props.modalSelectionColumns, this.modalSelectionColumns);
         if (((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.type) === 'simple') {
             this.dataValue = 'value';
             this.dataText = this.dataText || this.dataValue;
@@ -9771,7 +9927,7 @@ class Select extends TextInput {
     }
     onMounted(element) {
         super.onMounted(element);
-        if (this.modalSelection && this.modalSelectionFields.length) {
+        if (this.modalSelection && this.modalSelectionColumns.length) {
             KeyMap.bind({
                 'shift+enter': {
                     active: true,
@@ -9786,12 +9942,14 @@ class Select extends TextInput {
     onBeforeDestroy() {
         super.onBeforeDestroy();
         this.datasource.destroy();
-        if (this.modalSelection && this.modalSelectionFields.length) {
+        if (this.modalSelection && this.modalSelectionColumns.length) {
             KeyMap.unbind({
                 'shift+enter': {
                     event: this.openModalSelection.bind(this),
                 },
             }, this);
+            if (this.modalSelectionObj)
+                this.modalSelectionObj.destroy();
         }
     }
     /**
@@ -10187,7 +10345,7 @@ class Select extends TextInput {
                 this.viewCloseMenu();
         }, 200);
     }
-    openModalSelection() {
+    getModalSelectionDef() {
         const modalSelectionDef = {
             name: `${this.name}-modal-selection`,
             persistent: true,
@@ -10203,7 +10361,7 @@ class Select extends TextInput {
                             name: `${this.name}-modal-selection-grid`,
                             component: 'ZdGrid',
                             cssClass: 'zd-my-2 zd-pa-0 zd-select-modal-selection-grid',
-                            columns: this.modalSelectionFields,
+                            columns: this.modalSelectionColumns,
                             datasource: Object.assign(Object.assign({}, this.datasource.clone()), { lazyLoad: false, searchIn: undefined }),
                             toolbarSlot: [
                                 {
@@ -10271,6 +10429,10 @@ class Select extends TextInput {
                 },
             },
         };
+        return modalSelectionDef;
+    }
+    openModalSelection() {
+        const modalSelectionDef = this.getModalSelectionDef();
         if (this.modalSelectionObj)
             this.modalSelectionObj.destroy();
         ViewService.nextTick(() => {
@@ -10623,7 +10785,8 @@ class IterableComponentRender extends Iterable {
      * 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 pattern = `${this.rowPropName}\\.([A-Za-z0-9_.]+?)`;
+        const exp = new RegExp(`<<${pattern}>>|"<<${pattern}>>"`, 'g');
         const rowExp = new RegExp(`"<<${this.rowPropName}>>"`, 'g');
         const metadata = JSON.stringify(this.componentMetadata)
             .replace(rowExp, JSON.stringify(row))
@@ -10635,6 +10798,8 @@ class IterableComponentRender extends Iterable {
                     return `"${value}"`;
                 return value;
             }
+            if (value === undefined)
+                return '""';
             return value;
         });
         return JSON.parse(metadata);
@@ -12599,6 +12764,109 @@ class SelectMultiple extends Select {
             return validation((this.checkboxAll && 'all') || testValue);
         });
     }
+    confirmModalSelection() {
+        const grid = Metadata.getInstance(`${this.name}-modal-selection-grid`);
+        this.setValue(grid.selectedRows);
+        this.hideModalSelection();
+        setTimeout(() => {
+            if (this.viewCloseMenu)
+                this.viewCloseMenu();
+        }, 200);
+    }
+    getModalSelectionDef() {
+        const modalSelectionDef = {
+            name: `${this.name}-modal-selection`,
+            persistent: true,
+            escKeydownStop: false,
+            children: [
+                {
+                    name: `${this.name}-modal-selection-content-container`,
+                    component: 'ZdContainer',
+                    scrollView: true,
+                    cssClass: 'zd-my-2 zd-pa-0 zd-select-modal-selection-content-container',
+                    children: [
+                        {
+                            name: `${this.name}-modal-selection-grid`,
+                            component: 'ZdGrid',
+                            selectable: true,
+                            cssClass: 'zd-my-2 zd-pa-0 zd-select-modal-selection-grid',
+                            columns: this.modalSelectionColumns,
+                            datasource: Object.assign(Object.assign({}, this.datasource.clone()), { lazyLoad: false, searchIn: undefined }),
+                            toolbarSlot: [
+                                {
+                                    name: `${this.name}-modal-selection-title`,
+                                    component: 'ZdText',
+                                    cssStyle: `color: ${'var(--v-primary-base);'}`,
+                                    text: this.label,
+                                    tag: 'h3',
+                                },
+                                {
+                                    name: `${this.name}-modal-selection-spacer`,
+                                    component: 'VSpacer',
+                                },
+                                {
+                                    name: `${this.name}-modal-selection_gridSearch`,
+                                    component: 'ZdSearch',
+                                    cssClass: 'zd-grid-search',
+                                    autofocus: true,
+                                },
+                            ],
+                        },
+                    ],
+                },
+                {
+                    name: `${this.name}-modal-selection-footer-container`,
+                    component: 'ZdContainer',
+                    cssClass: 'zd-pa-0',
+                    children: [
+                        {
+                            name: `${this.name}-modal-selection-footer`,
+                            component: 'ZdFooter',
+                            color: 'transparent',
+                            padless: true,
+                            rightSlot: [
+                                {
+                                    name: `${this.name}-modal-selection-cancelButton`,
+                                    component: 'ZdButton',
+                                    label: 'CANCEL',
+                                    keyMap: {
+                                        esc: {
+                                            event: this.hideModalSelection.bind(this),
+                                            focus: true,
+                                            visible: true,
+                                            input: true,
+                                            stop: true,
+                                        },
+                                    },
+                                    outline: true,
+                                    events: {
+                                        click: this.hideModalSelection.bind(this),
+                                    },
+                                },
+                                {
+                                    name: `${this.name}-modal-selection-confirmButton`,
+                                    component: 'ZdButton',
+                                    label: 'OK',
+                                    outline: false,
+                                    events: {
+                                        click: this.confirmModalSelection.bind(this),
+                                    },
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+            events: {
+                onShow: () => {
+                    const grid = Metadata.getInstance(`${this.name}-modal-selection-grid`);
+                    grid.selectedRows = this.selectedValue;
+                    grid.datasource.currentRow = {};
+                },
+            },
+        };
+        return modalSelectionDef;
+    }
 }
 
 /**

package/dist/zd-common.umd.js

@@ -1907,7 +1907,9 @@
           /**
            * Input validations.
            */
-          this.validations = {};
+          this.validations = {
+              required: false,
+          };
           /**
            * Defines if the input should be automatically registered in the closest parent Form
            */
@@ -1990,7 +1992,10 @@
        * @param validations Field validations
        */
       parseValidations(validations) {
-          Object.keys(validations).forEach((name) => this.addValidation(name, validations[name]));
+          Object.keys(validations).forEach((name) => {
+              if (validations[name])
+                  this.addValidation(name, validations[name]);
+          });
       }
       /**
        * Adds input validation.
@@ -4380,6 +4385,7 @@
           this.helperValue = this.getInitValue('helperValue', props.helperValue, this.helperValue);
           this.min = this.getInitValue('min', props.min, this.min);
           this.max = this.getInitValue('max', props.max, this.max);
+          this.rules.push(this.dateValidation);
           this.createAccessors();
           this.unitMask = this.mask;
           this.initialMask = this.getInitialMask();
@@ -4479,8 +4485,14 @@
           }
           this.value = this.internalValue; // forces value accessor to be called if necessary
       }
+      /**
+       * Faz a validação do array de datas
+       * @param format o formato da data
+       * @param values o array de datas
+       * @returns true se todos os valores forem validados
+       * */
       isValidDateArray(format, values) {
-          if (!values || values.length === 0)
+          if (!values || values.length < 2)
               return false;
           return values.every((value) => this.isValidDate(value, format));
       }
@@ -6381,9 +6393,107 @@
               });
           }
       }
+      /**
+       * Retorna a quantidade total de linhas selecionadas caso exista
+       */
+      get pageText() {
+          let text = super.pageText;
+          if (this.selectedRows.length) {
+              let translatedText = '';
+              if (this.selectedRows.length === 1) {
+                  translatedText = core.I18n.translate('ROW_SELECTED');
+              }
+              else {
+                  translatedText = core.I18n.translate('ROWS_SELECTEDS');
+              }
+              text = `${this.selectedRows.length} ${translatedText}`;
+          }
+          return text;
+      }
+      /**
+       * Solicita uma confirmação se os registros nas outras páginas devem ser selecionados também.
+       * @private
+       * @returns {Promise<boolean>} Objeto Promise quando a confirmação for feita
+       *                             com parametro true se confirmado a seleção de todas páginas.
+       */
+      askToSelectAll() {
+          return new Promise((resolve) => {
+              const buttonClick = (yes) => {
+                  DialogService.hide();
+                  resolve(yes);
+              };
+              if (this.datasource.allData.length === this.datasource.data.length) {
+                  resolve(false);
+              }
+              else {
+                  DialogService.show({
+                      name: `${this.name}-selectall-dialog`,
+                      type: 'warning',
+                      title: core.I18n.translate('SELECTALL'),
+                      text: core.I18n.translate('SELECTALL_TEXT'),
+                      buttons: [
+                          {
+                              name: 'yes',
+                              component: 'ZdButton',
+                              label: 'YES',
+                              events: { click: () => { buttonClick(true); } },
+                              outline: true,
+                          },
+                          {
+                              name: 'no',
+                              component: 'ZdButton',
+                              label: 'NO',
+                              events: { click: () => { buttonClick(false); } },
+                          },
+                      ],
+                  });
+              }
+          });
+      }
+      /**
+       * Solicita uma confirmação se os registros nas outras páginas precisam ser removidos também.
+       * @private
+       * @returns {Promise<void>} Objeto Promise quando a confirmação for feita.
+       */
+      askToUnselectAll() {
+          return new Promise((resolve) => {
+              const buttonClick = (yes) => {
+                  if (yes)
+                      this.selectedRows = [];
+                  DialogService.hide();
+                  resolve();
+              };
+              DialogService.show({
+                  name: `${this.name}-unselectall-dialog`,
+                  type: 'warning',
+                  title: core.I18n.translate('UNSELECTALL'),
+                  text: core.I18n.translate('UNSELECTALL_TEXT'),
+                  buttons: [
+                      {
+                          name: 'yes',
+                          component: 'ZdButton',
+                          label: 'YES',
+                          events: { click: () => { buttonClick(true); } },
+                          outline: true,
+                      },
+                      {
+                          name: 'no',
+                          component: 'ZdButton',
+                          label: 'NO',
+                          events: { click: () => { buttonClick(false); } },
+                      },
+                  ],
+              });
+          });
+      }
+      /**
+       * Efetua a seleção/desseleção de todas as linhas do grid
+       * @param {boolean} isSelected Indica se as linhas foram selecionadas ou não
+       * @returns {Promise<void>} Objeto Promise quando a seleção/desseleção acabar de ser realizada
+       */
       selectAll(isSelected) {
           if (!this.selectable)
-              return;
+              return Promise.resolve();
           this.selectionState = { allSelected: isSelected, except: [] };
           if (!isSelected) {
               this.datasource.data.forEach((row) => {
@@ -6392,15 +6502,23 @@
                       this.selectedRows.splice(index, 1);
                   }
               });
-              return;
-          }
-          this.datasource.data.forEach((row) => {
-              if (this.callDisableSelection(row))
-                  return;
-              const key = row[this.datasource.uniqueKey];
-              if (key && this.selectedRows.indexOf(row) === -1) {
-                  this.selectedRows.push(row);
+              // se ainda existir linhas selecionadas, pergunta se deseja remover tudo.
+              if (this.selectedRows.length) {
+                  return this.askToUnselectAll();
               }
+              return Promise.resolve();
+          }
+          return this.askToSelectAll().then((selectAllData) => {
+              const dataArray = selectAllData ? this.datasource.allData : this.datasource.data;
+              dataArray.forEach((row) => {
+                  if (this.callDisableSelection(row))
+                      return;
+                  const key = row[this.datasource.uniqueKey];
+                  if (key && this.selectedRows.indexOf(row) === -1) {
+                      this.selectedRows.push(row);
+                  }
+              });
+              return Promise.resolve();
           });
       }
       toggleRow(row) {
@@ -6609,7 +6727,39 @@
       getColumn(name) {
           return super.getColumn(name);
       }
-  }
+  }
+  core.Messages.add({
+      'pt-BR': {
+          translation: {
+              ROW_SELECTED: 'linha selecionada',
+              ROWS_SELECTEDS: 'linhas selecionadas',
+              UNSELECTALL: 'Remover seleção',
+              UNSELECTALL_TEXT: 'Existem linhas selecionadas em outras páginas. Deseja removê-las tambem?',
+              SELECTALL: 'Adicionar seleção',
+              SELECTALL_TEXT: 'Existem linhas que podem ser selecionadas em outras páginas. Deseja selecioná-las tambem?',
+          },
+      },
+      'en-US': {
+          translation: {
+              ROW_SELECTED: 'row selected',
+              ROWS_SELECTEDS: 'rows selected',
+              UNSELECTALL: 'Remove selection',
+              UNSELECTALL_TEXT: 'There are selected rows on other pages. Do you want to remove them too?',
+              SELECTALL: 'Add selection',
+              SELECTALL_TEXT: 'There are rows that can be selected on other pages. Do you want to select them too?',
+          },
+      },
+      'es-ES': {
+          translation: {
+              ROW_SELECTED: 'línea seleccionada',
+              ROWS_SELECTEDS: 'líneas seleccionadas',
+              UNSELECTALL: 'Eliminar selección',
+              UNSELECTALL_TEXT: 'Hay líneas seleccionadas en otras páginas. ¿Quieres eliminarlas también?',
+              SELECTALL: 'Añadir selección',
+              SELECTALL_TEXT: 'Hay líneas que se pueden seleccionar en otras páginas. ¿Quieres seleccionarlas también?',
+          },
+      },
+  });
 
   /**
    * Base class for Grid column
@@ -7106,8 +7256,7 @@
       }
       cancelAddedRows() {
           return __awaiter(this, void 0, void 0, function* () {
-              const { data } = this.datasource;
-              const allData = this.datasource.allData || data;
+              const { allData } = this.datasource;
               Promise.resolve(allData);
               for (let index = allData.length - 1; index >= 0; index -= 1) {
                   const row = allData[index];
@@ -7243,29 +7392,36 @@
        */
       addNewRow(row, position = 'end') {
           return __awaiter(this, void 0, void 0, function* () {
-              let data;
-              if (this.datasource instanceof core.MemoryDatasource) {
-                  data = this.datasource.allData;
-              }
-              else {
-                  data = this.datasource.data;
-              }
-              row[this.newRowIdentifier] = true;
-              if (position === 'start') {
-                  data.unshift(row);
-              }
-              else {
-                  data.push(row);
-              }
-              const id = row[this.datasource.uniqueKey];
-              if (id) {
-                  this.editedRows = Object.assign(Object.assign({}, this.editedRows), { [id]: Object.assign({}, row) });
-                  this.addedRows = Object.assign(Object.assign({}, this.addedRows), { [id]: Object.assign({}, row) });
-              }
+              const data = this.insertRowInDatasource(row, position);
+              this.saveRowReference(row);
               yield this.datasource.updateData(data);
               this.editing = true;
           });
       }
+      saveRowReference(row) {
+          const id = row[this.datasource.uniqueKey];
+          if (id) {
+              this.editedRows = Object.assign(Object.assign({}, this.editedRows), { [id]: Object.assign({}, row) });
+              this.addedRows = Object.assign(Object.assign({}, this.addedRows), { [id]: Object.assign({}, row) });
+          }
+      }
+      insertRowInDatasource(row, position) {
+          let data;
+          if (this.datasource instanceof core.MemoryDatasource) {
+              data = this.datasource.allData;
+          }
+          else {
+              data = this.datasource.data;
+          }
+          row[this.newRowIdentifier] = true;
+          if (position === 'start') {
+              data.unshift(row);
+          }
+          else {
+              data.push(row);
+          }
+          return data;
+      }
       /**
        * Gets the editable component name
        * @param key Row unique key
@@ -9684,7 +9840,7 @@
           /* Defines if should open modal with grid to make the selection */
           this.modalSelection = false;
           /* Defines fields to show on modal */
-          this.modalSelectionFields = [];
+          this.modalSelectionColumns = [];
           this.dsSearch = {
               SEARCH: (value, searchIn) => ({
                   searchIn: [searchIn],
@@ -9740,7 +9896,7 @@
           this.dataValueOutFormName = this.getInitValue('dataValueOutFormName', props.dataValueOutFormName, this.dataValueOutFormName);
           this.closeOnScroll = this.getInitValue('closeOnScroll', props.closeOnScroll, this.closeOnScroll);
           this.modalSelection = this.getInitValue('modalSelection', props.modalSelection, this.modalSelection);
-          this.modalSelectionFields = this.getInitValue('modalSelectionFields', props.modalSelectionFields, this.modalSelectionFields);
+          this.modalSelectionColumns = this.getInitValue('modalSelectionColumns', props.modalSelectionColumns, this.modalSelectionColumns);
           if (((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.type) === 'simple') {
               this.dataValue = 'value';
               this.dataText = this.dataText || this.dataValue;
@@ -9778,7 +9934,7 @@
       }
       onMounted(element) {
           super.onMounted(element);
-          if (this.modalSelection && this.modalSelectionFields.length) {
+          if (this.modalSelection && this.modalSelectionColumns.length) {
               core.KeyMap.bind({
                   'shift+enter': {
                       active: true,
@@ -9793,12 +9949,14 @@
       onBeforeDestroy() {
           super.onBeforeDestroy();
           this.datasource.destroy();
-          if (this.modalSelection && this.modalSelectionFields.length) {
+          if (this.modalSelection && this.modalSelectionColumns.length) {
               core.KeyMap.unbind({
                   'shift+enter': {
                       event: this.openModalSelection.bind(this),
                   },
               }, this);
+              if (this.modalSelectionObj)
+                  this.modalSelectionObj.destroy();
           }
       }
       /**
@@ -10194,7 +10352,7 @@
                   this.viewCloseMenu();
           }, 200);
       }
-      openModalSelection() {
+      getModalSelectionDef() {
           const modalSelectionDef = {
               name: `${this.name}-modal-selection`,
               persistent: true,
@@ -10210,7 +10368,7 @@
                               name: `${this.name}-modal-selection-grid`,
                               component: 'ZdGrid',
                               cssClass: 'zd-my-2 zd-pa-0 zd-select-modal-selection-grid',
-                              columns: this.modalSelectionFields,
+                              columns: this.modalSelectionColumns,
                               datasource: Object.assign(Object.assign({}, this.datasource.clone()), { lazyLoad: false, searchIn: undefined }),
                               toolbarSlot: [
                                   {
@@ -10278,6 +10436,10 @@
                   },
               },
           };
+          return modalSelectionDef;
+      }
+      openModalSelection() {
+          const modalSelectionDef = this.getModalSelectionDef();
           if (this.modalSelectionObj)
               this.modalSelectionObj.destroy();
           core.ViewService.nextTick(() => {
@@ -10630,7 +10792,8 @@
        * 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 pattern = `${this.rowPropName}\\.([A-Za-z0-9_.]+?)`;
+          const exp = new RegExp(`<<${pattern}>>|"<<${pattern}>>"`, 'g');
           const rowExp = new RegExp(`"<<${this.rowPropName}>>"`, 'g');
           const metadata = JSON.stringify(this.componentMetadata)
               .replace(rowExp, JSON.stringify(row))
@@ -10642,6 +10805,8 @@
                       return `"${value}"`;
                   return value;
               }
+              if (value === undefined)
+                  return '""';
               return value;
           });
           return JSON.parse(metadata);
@@ -12606,6 +12771,109 @@
               return validation((this.checkboxAll && 'all') || testValue);
           });
       }
+      confirmModalSelection() {
+          const grid = core.Metadata.getInstance(`${this.name}-modal-selection-grid`);
+          this.setValue(grid.selectedRows);
+          this.hideModalSelection();
+          setTimeout(() => {
+              if (this.viewCloseMenu)
+                  this.viewCloseMenu();
+          }, 200);
+      }
+      getModalSelectionDef() {
+          const modalSelectionDef = {
+              name: `${this.name}-modal-selection`,
+              persistent: true,
+              escKeydownStop: false,
+              children: [
+                  {
+                      name: `${this.name}-modal-selection-content-container`,
+                      component: 'ZdContainer',
+                      scrollView: true,
+                      cssClass: 'zd-my-2 zd-pa-0 zd-select-modal-selection-content-container',
+                      children: [
+                          {
+                              name: `${this.name}-modal-selection-grid`,
+                              component: 'ZdGrid',
+                              selectable: true,
+                              cssClass: 'zd-my-2 zd-pa-0 zd-select-modal-selection-grid',
+                              columns: this.modalSelectionColumns,
+                              datasource: Object.assign(Object.assign({}, this.datasource.clone()), { lazyLoad: false, searchIn: undefined }),
+                              toolbarSlot: [
+                                  {
+                                      name: `${this.name}-modal-selection-title`,
+                                      component: 'ZdText',
+                                      cssStyle: `color: ${'var(--v-primary-base);'}`,
+                                      text: this.label,
+                                      tag: 'h3',
+                                  },
+                                  {
+                                      name: `${this.name}-modal-selection-spacer`,
+                                      component: 'VSpacer',
+                                  },
+                                  {
+                                      name: `${this.name}-modal-selection_gridSearch`,
+                                      component: 'ZdSearch',
+                                      cssClass: 'zd-grid-search',
+                                      autofocus: true,
+                                  },
+                              ],
+                          },
+                      ],
+                  },
+                  {
+                      name: `${this.name}-modal-selection-footer-container`,
+                      component: 'ZdContainer',
+                      cssClass: 'zd-pa-0',
+                      children: [
+                          {
+                              name: `${this.name}-modal-selection-footer`,
+                              component: 'ZdFooter',
+                              color: 'transparent',
+                              padless: true,
+                              rightSlot: [
+                                  {
+                                      name: `${this.name}-modal-selection-cancelButton`,
+                                      component: 'ZdButton',
+                                      label: 'CANCEL',
+                                      keyMap: {
+                                          esc: {
+                                              event: this.hideModalSelection.bind(this),
+                                              focus: true,
+                                              visible: true,
+                                              input: true,
+                                              stop: true,
+                                          },
+                                      },
+                                      outline: true,
+                                      events: {
+                                          click: this.hideModalSelection.bind(this),
+                                      },
+                                  },
+                                  {
+                                      name: `${this.name}-modal-selection-confirmButton`,
+                                      component: 'ZdButton',
+                                      label: 'OK',
+                                      outline: false,
+                                      events: {
+                                          click: this.confirmModalSelection.bind(this),
+                                      },
+                                  },
+                              ],
+                          },
+                      ],
+                  },
+              ],
+              events: {
+                  onShow: () => {
+                      const grid = core.Metadata.getInstance(`${this.name}-modal-selection-grid`);
+                      grid.selectedRows = this.selectedValue;
+                      grid.datasource.currentRow = {};
+                  },
+              },
+          };
+          return modalSelectionDef;
+      }
   }
 
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.106.1",
+  "version": "1.107.1",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -43,5 +43,5 @@
     "lodash.times": "4.3.*",
     "mockdate": "3.0.*"
   },
-  "gitHead": "466f25f5bf00183a2c22ef94eecb47d997ac4bab"
+  "gitHead": "eb2c40935a4684224e9afc06a250c48955724d7d"
 }

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

@@ -100,6 +100,12 @@ export declare class DateRange extends TextInput implements IDateRange {
     protected getUpdatedMask(): string | undefined;
     protected maskFormat(format: string): string;
     setDateValue(displayValue: string): void;
+    /**
+     * Faz a validação do array de datas
+     * @param format o formato da data
+     * @param values o array de datas
+     * @returns true se todos os valores forem validados
+     * */
     isValidDateArray(format: string, values?: string[]): boolean;
     private splitValues;
     isValidDate(value: string, format: string, strict?: boolean): boolean;

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

@@ -205,6 +205,8 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * @param position whether the new Row will be inserted at the beginning or end of the data array
      */
     addNewRow(row: IDictionary, position?: 'end' | 'start'): Promise<void>;
+    protected saveRowReference(row: IDictionary<any>): void;
+    protected insertRowInDatasource(row: IDictionary<any>, position: 'end' | 'start'): IDictionary<any>[];
     /**
      * Gets the editable component name
      * @param key Row unique key

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

@@ -207,7 +207,29 @@ export declare class Grid extends Iterable implements IGrid {
      * @param element DOM Element
      */
     selectAllClick(isSelected: boolean, event: Event, element: any): void;
-    selectAll(isSelected: boolean): void;
+    /**
+     * Retorna a quantidade total de linhas selecionadas caso exista
+     */
+    get pageText(): string;
+    /**
+     * Solicita uma confirmação se os registros nas outras páginas devem ser selecionados também.
+     * @private
+     * @returns {Promise<boolean>} Objeto Promise quando a confirmação for feita
+     *                             com parametro true se confirmado a seleção de todas páginas.
+     */
+    private askToSelectAll;
+    /**
+     * Solicita uma confirmação se os registros nas outras páginas precisam ser removidos também.
+     * @private
+     * @returns {Promise<void>} Objeto Promise quando a confirmação for feita.
+     */
+    private askToUnselectAll;
+    /**
+     * Efetua a seleção/desseleção de todas as linhas do grid
+     * @param {boolean} isSelected Indica se as linhas foram selecionadas ou não
+     * @returns {Promise<void>} Objeto Promise quando a seleção/desseleção acabar de ser realizada
+     */
+    selectAll(isSelected: boolean): Promise<void>;
     toggleRow(row: IDictionary): void;
     selectRow(row: IDictionary, select: boolean): void;
     navigateLeft({ event }: IEventParam<any>): void;

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

@@ -98,7 +98,7 @@ export declare class Input extends ComponentRender implements IInput {
     /**
      * Input validations.
      */
-    validations: IDictionary<IDictionary<string | number>>;
+    validations: IDictionary<IDictionary<string | number> | boolean>;
     /**
      * Defines if the input should be automatically registered in the closest parent Form
      */

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

@@ -33,7 +33,7 @@ export interface IInput extends IComponentRender {
     showHelper?: boolean;
     showLabel?: boolean;
     storePath?: string;
-    validations?: IDictionary<IDictionary<string | number>>;
+    validations?: IDictionary<IDictionary<string | number> | boolean>;
     value?: any;
     autoRegister?: boolean;
 }

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

@@ -25,5 +25,5 @@ export interface ISelect extends ITextInput, ISelectDataValueOut {
     searchParam?: string;
     closeOnScroll?: boolean;
     modalSelection?: boolean;
-    modalSelectionFields?: IColumn[];
+    modalSelectionColumns?: IColumn[];
 }

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

@@ -4,6 +4,7 @@ import { ISelect, SearchParam } from './interfaces';
 import { TextInput } from '../zd-text-input/text-input';
 import { ISelectDataValueOutItem } from '../../utils';
 import { IColumn } from '../zd-iterable/interfaces';
+import { IModal } from '../zd-modal/interfaces';
 /**
  * Base class for Select component.
  */
@@ -94,7 +95,7 @@ export declare class Select extends TextInput implements ISelect {
     dataValueOutFormName: string;
     closeOnScroll: boolean;
     modalSelection?: boolean | undefined;
-    modalSelectionFields: IColumn[];
+    modalSelectionColumns: IColumn[];
     protected dsSearch: {
         SEARCH: (value: any, searchIn: string) => {
             searchIn: string[];
@@ -240,7 +241,8 @@ export declare class Select extends TextInput implements ISelect {
     indexOf(search: IDictionary | string | number): number;
     protected isFilledObj(obj: any): number | false;
     private modalSelectionObj?;
-    private hideModalSelection;
+    protected hideModalSelection(): void;
     private modalSelectionGridClick;
+    protected getModalSelectionDef(): IModal;
     openModalSelection(): void;
 }

package/types/components/zd-select-multiple/select-multiple.d.ts

@@ -1,6 +1,7 @@
 import { IDictionary } from '@zeedhi/core';
 import { ISelectMultiple } from './interfaces';
 import { Select } from '../zd-select/select';
+import { IModal } from '../zd-modal/interfaces';
 export declare class SelectMultiple extends Select implements ISelectMultiple {
     private selectedValue;
     /**
@@ -112,4 +113,6 @@ export declare class SelectMultiple extends Select implements ISelectMultiple {
      * Updates input rules.
      */
     protected updateRules(): void;
+    private confirmModalSelection;
+    protected getModalSelectionDef(): IModal;
 }