@zeedhi/common 1.85.1 → 1.86.1

package/dist/zd-common.esm.js

@@ -1895,6 +1895,7 @@ class Input extends ComponentRender {
         this.parserFn = FormatterParserProvider.getParser('ZdInput');
         this.internalDisplayValue = '';
         this.internalValue = null;
+        this.formParent = this.getFormParent();
         this.lastInputValue = undefined;
         this.callInputEvent = debounce(({ event, element, component }) => {
             this.callEvent('input', { event, element, component });
@@ -1922,8 +1923,8 @@ class Input extends ComponentRender {
         this.value = this.getInitValue('value', props.value, this.value);
         this.validations = this.getInitValue('validations', props.validations, this.validations);
         this.parseValidations(props.validations || {});
-        if (this.parent instanceof Form) {
-            this.parent.registerInput(this);
+        if (this.formParent) {
+            this.formParent.registerInput(this);
         }
         this.createAccessors();
     }
@@ -2093,6 +2094,13 @@ class Input extends ComponentRender {
     keydown(event, element) {
         this.callEvent('keydown', { event, element, component: this });
     }
+    getFormParent() {
+        let { parent } = this;
+        while (parent && !(parent instanceof Form)) {
+            parent = parent.parent;
+        }
+        return parent;
+    }
 }
 FormatterParserProvider.registerFormatter('ZdInput', (value) => value);
 FormatterParserProvider.registerParser('ZdInput', (value) => value);
@@ -6882,7 +6890,7 @@ class Header extends ComponentRender {
         /**
          * Sets the height for header.
          */
-        this.height = 'auto';
+        this.height = '';
         /**
          * Render components on the left of header.
          */
@@ -7313,6 +7321,10 @@ class Select extends TextInput {
          * Enables search input
          */
         this.autocomplete = true;
+        /**
+         * Automatically select option if only one is filtered
+         */
+        this.autoSelection = true;
         /**
          * Prevents load select data when the input is focused
          */
@@ -7391,6 +7403,7 @@ class Select extends TextInput {
         this.menuMaxWidth = this.getInitValue('menuMaxWidth', props.menuMaxWidth, this.menuMaxWidth);
         this.returnObject = this.getInitValue('returnObject', props.returnObject, this.returnObject);
         this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
+        this.autoSelection = this.getInitValue('autoSelection', props.autoSelection, this.autoSelection);
         this.disabledItems = this.getInitValue('disabledItems', props.disabledItems, this.disabledItems);
         this.manualMode = this.getInitValue('manualMode', props.manualMode, this.manualMode);
         this.attach = this.getInitValue('attach', props.attach, this.attach);
@@ -7739,6 +7752,9 @@ class Select extends TextInput {
      */
     blur(event, element) {
         if (this.autocomplete) {
+            if (this.search && this.autoSelection && this.datasource.data.length === 1) {
+                this.setValue(this.datasource.data[0]);
+            }
             this.datasource.search = '';
             this.dirtySearchValue = '';
             if (!this.manualMode) {
@@ -9697,33 +9713,7 @@ class SelectMultiple extends Select {
             this.dataText = [this.dataText];
         this.internalDisplayValue = this.getDisplayValue();
         this.createAccessors();
-    }
-    afterFocus() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.preventLoadOnFocus) {
-                yield this.datasource.get();
-                const values = this.datasource.data.map((row) => row[this.dataValue]);
-                // remove inserted items that are already in datasource
-                this.insertedValues = this.insertedValues.filter((inserted) => !values.includes(inserted[this.dataValue]));
-                this.preventLoadOnFocus = true;
-            }
-            this.setCache();
-            this.updateSearch(this.dirtySearchValue);
-        });
-    }
-    setCache() {
-        if (this.manualMode)
-            return;
-        if (this.insertedValues.length) {
-            this.datasource.data = this.uniqueBy(this.insertedValues.concat(this.datasource.data), this.datasource.uniqueKey);
-            const values = this.insertedValues.map((inserted) => inserted[this.dataValue]);
-            // prevent caching insertedValues
-            this.cachedData = this.datasource.data.filter((row) => !values.includes(row[this.dataValue]));
-        }
-        else {
-            this.cachedData = this.datasource.data;
-        }
-        this.cachedTotal = this.datasource.total;
+        this.autoSelection = false;
     }
     /**
      * Field selected rows
@@ -10031,6 +10021,33 @@ class SelectMultiple extends Select {
         });
     }
     checkValueOnBlur() { }
+    afterFocus() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.preventLoadOnFocus) {
+                yield this.datasource.get();
+                const values = this.datasource.data.map((row) => row[this.dataValue]);
+                // remove inserted items that are already in datasource
+                this.insertedValues = this.insertedValues.filter((inserted) => !values.includes(inserted[this.dataValue]));
+                this.preventLoadOnFocus = true;
+            }
+            this.setCache();
+            this.updateSearch(this.dirtySearchValue);
+        });
+    }
+    setCache() {
+        if (this.manualMode)
+            return;
+        if (this.insertedValues.length) {
+            this.datasource.data = this.uniqueBy(this.insertedValues.concat(this.datasource.data), this.datasource.uniqueKey);
+            const values = this.insertedValues.map((inserted) => inserted[this.dataValue]);
+            // prevent caching insertedValues
+            this.cachedData = this.datasource.data.filter((row) => !values.includes(row[this.dataValue]));
+        }
+        else {
+            this.cachedData = this.datasource.data;
+        }
+        this.cachedTotal = this.datasource.total;
+    }
 }
 
 class TreeDataStructure {
@@ -12573,6 +12590,8 @@ class TreeGrid extends Grid {
         this.flat = this.getInitValue('flat', props.flat, this.flat);
         this.fieldHasChild = this.getInitValue('fieldHasChild', props.fieldHasChild, this.fieldHasChild);
         this.detach = this.getInitValue('detach', props.detach, this.detach);
+        this.footerSlot = props.footerSlot || this.footerSlot;
+        this.footerSlot = this.changeDefaultSlotNames(this.footerSlot);
         this.treeDataStructure = new TreeDataStructure(this);
         this.createAccessors();
     }

package/dist/zd-common.umd.js

@@ -1902,6 +1902,7 @@
           this.parserFn = core.FormatterParserProvider.getParser('ZdInput');
           this.internalDisplayValue = '';
           this.internalValue = null;
+          this.formParent = this.getFormParent();
           this.lastInputValue = undefined;
           this.callInputEvent = debounce__default["default"](({ event, element, component }) => {
               this.callEvent('input', { event, element, component });
@@ -1929,8 +1930,8 @@
           this.value = this.getInitValue('value', props.value, this.value);
           this.validations = this.getInitValue('validations', props.validations, this.validations);
           this.parseValidations(props.validations || {});
-          if (this.parent instanceof Form) {
-              this.parent.registerInput(this);
+          if (this.formParent) {
+              this.formParent.registerInput(this);
           }
           this.createAccessors();
       }
@@ -2100,6 +2101,13 @@
       keydown(event, element) {
           this.callEvent('keydown', { event, element, component: this });
       }
+      getFormParent() {
+          let { parent } = this;
+          while (parent && !(parent instanceof Form)) {
+              parent = parent.parent;
+          }
+          return parent;
+      }
   }
   core.FormatterParserProvider.registerFormatter('ZdInput', (value) => value);
   core.FormatterParserProvider.registerParser('ZdInput', (value) => value);
@@ -6889,7 +6897,7 @@
           /**
            * Sets the height for header.
            */
-          this.height = 'auto';
+          this.height = '';
           /**
            * Render components on the left of header.
            */
@@ -7320,6 +7328,10 @@
            * Enables search input
            */
           this.autocomplete = true;
+          /**
+           * Automatically select option if only one is filtered
+           */
+          this.autoSelection = true;
           /**
            * Prevents load select data when the input is focused
            */
@@ -7398,6 +7410,7 @@
           this.menuMaxWidth = this.getInitValue('menuMaxWidth', props.menuMaxWidth, this.menuMaxWidth);
           this.returnObject = this.getInitValue('returnObject', props.returnObject, this.returnObject);
           this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
+          this.autoSelection = this.getInitValue('autoSelection', props.autoSelection, this.autoSelection);
           this.disabledItems = this.getInitValue('disabledItems', props.disabledItems, this.disabledItems);
           this.manualMode = this.getInitValue('manualMode', props.manualMode, this.manualMode);
           this.attach = this.getInitValue('attach', props.attach, this.attach);
@@ -7746,6 +7759,9 @@
        */
       blur(event, element) {
           if (this.autocomplete) {
+              if (this.search && this.autoSelection && this.datasource.data.length === 1) {
+                  this.setValue(this.datasource.data[0]);
+              }
               this.datasource.search = '';
               this.dirtySearchValue = '';
               if (!this.manualMode) {
@@ -9704,33 +9720,7 @@
               this.dataText = [this.dataText];
           this.internalDisplayValue = this.getDisplayValue();
           this.createAccessors();
-      }
-      afterFocus() {
-          return __awaiter(this, void 0, void 0, function* () {
-              if (!this.preventLoadOnFocus) {
-                  yield this.datasource.get();
-                  const values = this.datasource.data.map((row) => row[this.dataValue]);
-                  // remove inserted items that are already in datasource
-                  this.insertedValues = this.insertedValues.filter((inserted) => !values.includes(inserted[this.dataValue]));
-                  this.preventLoadOnFocus = true;
-              }
-              this.setCache();
-              this.updateSearch(this.dirtySearchValue);
-          });
-      }
-      setCache() {
-          if (this.manualMode)
-              return;
-          if (this.insertedValues.length) {
-              this.datasource.data = this.uniqueBy(this.insertedValues.concat(this.datasource.data), this.datasource.uniqueKey);
-              const values = this.insertedValues.map((inserted) => inserted[this.dataValue]);
-              // prevent caching insertedValues
-              this.cachedData = this.datasource.data.filter((row) => !values.includes(row[this.dataValue]));
-          }
-          else {
-              this.cachedData = this.datasource.data;
-          }
-          this.cachedTotal = this.datasource.total;
+          this.autoSelection = false;
       }
       /**
        * Field selected rows
@@ -10038,6 +10028,33 @@
           });
       }
       checkValueOnBlur() { }
+      afterFocus() {
+          return __awaiter(this, void 0, void 0, function* () {
+              if (!this.preventLoadOnFocus) {
+                  yield this.datasource.get();
+                  const values = this.datasource.data.map((row) => row[this.dataValue]);
+                  // remove inserted items that are already in datasource
+                  this.insertedValues = this.insertedValues.filter((inserted) => !values.includes(inserted[this.dataValue]));
+                  this.preventLoadOnFocus = true;
+              }
+              this.setCache();
+              this.updateSearch(this.dirtySearchValue);
+          });
+      }
+      setCache() {
+          if (this.manualMode)
+              return;
+          if (this.insertedValues.length) {
+              this.datasource.data = this.uniqueBy(this.insertedValues.concat(this.datasource.data), this.datasource.uniqueKey);
+              const values = this.insertedValues.map((inserted) => inserted[this.dataValue]);
+              // prevent caching insertedValues
+              this.cachedData = this.datasource.data.filter((row) => !values.includes(row[this.dataValue]));
+          }
+          else {
+              this.cachedData = this.datasource.data;
+          }
+          this.cachedTotal = this.datasource.total;
+      }
   }
 
   class TreeDataStructure {
@@ -12580,6 +12597,8 @@
           this.flat = this.getInitValue('flat', props.flat, this.flat);
           this.fieldHasChild = this.getInitValue('fieldHasChild', props.fieldHasChild, this.fieldHasChild);
           this.detach = this.getInitValue('detach', props.detach, this.detach);
+          this.footerSlot = props.footerSlot || this.footerSlot;
+          this.footerSlot = this.changeDefaultSlotNames(this.footerSlot);
           this.treeDataStructure = new TreeDataStructure(this);
           this.createAccessors();
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.85.1",
+  "version": "1.86.1",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -43,5 +43,5 @@
     "lodash.times": "4.3.*",
     "mockdate": "3.0.*"
   },
-  "gitHead": "13bfb6936e5027a14c02d4ecde838100992a57d0"
+  "gitHead": "96c1d8fad419409f16c17a3ec72f0bca1748002c"
 }

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

@@ -1,6 +1,6 @@
-import { IHeader, IHeaderEvents } from './interfaces';
 import { ComponentRender } from '../zd-component/component-render';
 import { IComponentRender } from '../zd-component/interfaces';
+import { IHeader, IHeaderEvents } from './interfaces';
 /**
  * Base class for Header component.
  */

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

@@ -1,6 +1,7 @@
 import { IDictionary } from '@zeedhi/core';
-import { IInput, IInputEvents } from './interfaces';
 import { ComponentRender } from '../zd-component/component-render';
+import { Form } from '../zd-form/form';
+import { IInput, IInputEvents } from './interfaces';
 /**
  * Base class for Input component.
  */
@@ -114,6 +115,7 @@ export declare class Input extends ComponentRender implements IInput {
     protected parserFn: Function;
     protected internalDisplayValue: string;
     protected internalValue: any;
+    protected formParent?: Form;
     /**
      * Creates a new Input.
      * @param props Input properties
@@ -213,4 +215,5 @@ export declare class Input extends ComponentRender implements IInput {
      * @param element Element that lost the focus
      */
     keydown(event?: Event, element?: any): void;
+    private getFormParent;
 }

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

@@ -3,6 +3,8 @@ import { ITextInput } from '../zd-text-input/interfaces';
 import { IComponentRender } from '../zd-component/interfaces';
 export declare type SearchParam = 'SEARCH' | 'FILTER' | 'FIND';
 export interface ISelect extends ITextInput {
+    autocomplete?: boolean;
+    autoSelection?: boolean;
     datasource?: IDatasource;
     dataText?: string | any[];
     dataTextSeparator?: string;

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

@@ -34,6 +34,10 @@ export declare class Select extends TextInput implements ISelect {
      * Enables search input
      */
     autocomplete: boolean;
+    /**
+     * Automatically select option if only one is filtered
+     */
+    autoSelection: boolean;
     /**
      * Prevents load select data when the input is focused
      */

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

@@ -23,8 +23,6 @@ export declare class SelectMultiple extends Select implements ISelectMultiple {
      * Limit the display of selected options. The rest will be hidden within the 'limitText' string
      */
     limit: number | null;
-    protected afterFocus(): Promise<void>;
-    private setCache;
     showSelectAll: boolean;
     /**
      * Create a new Select.
@@ -104,4 +102,6 @@ export declare class SelectMultiple extends Select implements ISelectMultiple {
     selectAllItems(): Promise<void>;
     unSelectAllItems(): Promise<void>;
     protected checkValueOnBlur(): void;
+    protected afterFocus(): Promise<void>;
+    private setCache;
 }