@zeedhi/common 1.106.1 → 1.107.0

package/dist/zd-common.esm.js

@@ -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.
@@ -9677,7 +9682,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 +9738,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 +9776,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 +9791,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 +10194,7 @@ class Select extends TextInput {
                 this.viewCloseMenu();
         }, 200);
     }
-    openModalSelection() {
+    getModalSelectionDef() {
         const modalSelectionDef = {
             name: `${this.name}-modal-selection`,
             persistent: true,
@@ -10203,7 +10210,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 +10278,10 @@ class Select extends TextInput {
                 },
             },
         };
+        return modalSelectionDef;
+    }
+    openModalSelection() {
+        const modalSelectionDef = this.getModalSelectionDef();
         if (this.modalSelectionObj)
             this.modalSelectionObj.destroy();
         ViewService.nextTick(() => {
@@ -10623,7 +10634,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 +10647,8 @@ class IterableComponentRender extends Iterable {
                     return `"${value}"`;
                 return value;
             }
+            if (value === undefined)
+                return '""';
             return value;
         });
         return JSON.parse(metadata);
@@ -12599,6 +12613,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.
@@ -9684,7 +9689,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 +9745,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 +9783,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 +9798,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 +10201,7 @@
                   this.viewCloseMenu();
           }, 200);
       }
-      openModalSelection() {
+      getModalSelectionDef() {
           const modalSelectionDef = {
               name: `${this.name}-modal-selection`,
               persistent: true,
@@ -10210,7 +10217,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 +10285,10 @@
                   },
               },
           };
+          return modalSelectionDef;
+      }
+      openModalSelection() {
+          const modalSelectionDef = this.getModalSelectionDef();
           if (this.modalSelectionObj)
               this.modalSelectionObj.destroy();
           core.ViewService.nextTick(() => {
@@ -10630,7 +10641,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 +10654,8 @@
                       return `"${value}"`;
                   return value;
               }
+              if (value === undefined)
+                  return '""';
               return value;
           });
           return JSON.parse(metadata);
@@ -12606,6 +12620,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.0",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -43,5 +43,5 @@
     "lodash.times": "4.3.*",
     "mockdate": "3.0.*"
   },
-  "gitHead": "466f25f5bf00183a2c22ef94eecb47d997ac4bab"
+  "gitHead": "de37eeff43ce90aa7d0fb08ca85c6706aced0927"
 }

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