@zeedhi/common 1.67.0 → 1.68.0

package/dist/zd-common.esm.js

@@ -23,6 +23,10 @@ class Component {
      * @param props Components properties
      */
     constructor(props) {
+        /**
+         * Automatically add focus to input when it's created.
+         */
+        this.autofocus = false;
         /**
          * Children component structure if the component has children.
          */
@@ -77,6 +81,7 @@ class Component {
         this.parent = props.parent;
         this.name = props.name;
         this.events = Event.factory(props.events || this.events);
+        this.autofocus = this.getInitValue('autofocus', props.autofocus, this.autofocus);
         this.cssClass = this.getInitValue('cssClass', props.cssClass, this.cssClass);
         this.cssStyle = this.getInitValue('cssStyle', props.cssStyle, this.cssStyle);
         this.directives = this.getInitValue('directives', props.directives, this.directives);
@@ -1612,10 +1617,6 @@ class Input extends ComponentRender {
          * Input auto complete.
          */
         this.autofill = true;
-        /**
-         * Automatically add focus to input when it's created.
-         */
-        this.autofocus = false;
         /**
          * Add input clear functionality if the input isn't readonly or disabled.
          */
@@ -1704,7 +1705,6 @@ class Input extends ComponentRender {
         this.align = this.getInitValue('align', props.align, this.align);
         this.alwaysShowError = this.getInitValue('alwaysShowError', props.alwaysShowError, this.alwaysShowError);
         this.autofill = this.getInitValue('autofill', props.autofill, this.autofill);
-        this.autofocus = this.getInitValue('autofocus', props.autofocus, this.autofocus);
         this.clearable = this.getInitValue('clearable', props.clearable, this.clearable);
         this.color = this.getInitValue('color', props.color, this.color);
         this.dense = this.getInitValue('dense', props.dense, this.dense);
@@ -4073,19 +4073,25 @@ class DateRange extends TextInput {
         const chars = replaced.split('');
         return chars.length ? chars.every((char) => Mask.isMaskDelimiter(char)) : true;
     }
-    updateHelperHint() {
-        if (this.helperValue) {
+    updateHelperHint(helperValue) {
+        const previousHelperHint = this.helperValue ? DateHelper.getLabel(this.helperValue) : '';
+        if (!this.hint || previousHelperHint !== this.hint) {
             this.previousHint = this.hint;
             this.previousPersistentHint = this.persistentHint;
-            this.hint = DateHelper.getLabel(this.helperValue);
-            this.persistentHint = true;
         }
+        this.helperValue = helperValue;
+        const label = DateHelper.getLabel(helperValue);
+        if (!helperValue || !label) {
+            this.hint = this.previousHint;
+            this.persistentHint = this.previousPersistentHint;
+            return;
+        }
+        this.hint = label;
+        this.persistentHint = true;
     }
     change(event, element) {
         super.change(event, element);
-        this.helperValue = '';
-        this.hint = this.previousHint;
-        this.persistentHint = this.previousPersistentHint;
+        this.updateHelperHint('');
     }
     getMaskValue() {
         let mask = '';
@@ -7914,6 +7920,10 @@ class Menu extends ComponentRender {
          * Defines if the menu is an application menu
          */
         this.app = false;
+        /**
+         * Defines if the menu must be rendered inside an absolute div
+         */
+        this.absolute = false;
         /**
          * Defines if the menu should rests under the application toolbar
          */
@@ -8007,6 +8017,7 @@ class Menu extends ComponentRender {
         /** Store the current item focused */
         this.currentItem = null;
         this.app = this.getInitValue('app', props.app, this.app);
+        this.absolute = this.getInitValue('absolute', props.absolute, this.absolute);
         this.clipped = this.getInitValue('clipped', props.clipped, this.clipped);
         this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
         this.floating = this.getInitValue('floating', props.floating, this.floating);
@@ -9273,6 +9284,7 @@ class TreeDataStructure {
         this.parentField = tree.parentField;
         this.fetchOnDemand = tree.fetchOnDemand;
         this.openLevelOnLoad = tree.openLevelOnLoad;
+        this.tree = tree;
         this.init();
     }
     /**
@@ -9292,20 +9304,20 @@ class TreeDataStructure {
             this.searchValue = this.originalDatasource.search;
             this.searchHasNoData = false;
             if (this.fetchOnDemand) {
-                if (this.originalDatasource.search) {
+                if (this.tree.detach || this.originalDatasource.search) {
                     delete this.originalDatasource.filter[this.parentField];
                 }
                 else if (!this.originalDatasource.filter[this.parentField]) {
                     this.originalDatasource.filter[this.parentField] = 'NULL';
                 }
             }
-            if (!this.fetchOnDemand && this.searchValue) {
+            if (!this.tree.detach && !this.fetchOnDemand && this.searchValue) {
                 this.searchAllData();
                 return Promise.resolve(this.originalDatasource.data);
             }
             return originalGet.call(this.originalDatasource).then((data) => {
                 if (this.searchValue) {
-                    this.searchOnDemand();
+                    this.buildDetached();
                 }
                 else {
                     this.buildTree();
@@ -9318,7 +9330,10 @@ class TreeDataStructure {
      * search data
      */
     buildTree() {
-        if (this.fetchOnDemand) {
+        if (this.tree.detach) {
+            this.buildDetached();
+        }
+        else if (this.fetchOnDemand) {
             this.buildOnDemand();
         }
         else {
@@ -9571,13 +9586,12 @@ class TreeDataStructure {
         });
     }
     /**
-     * Search tree with fetchOnDemand
-     * @param data datasource data
+     * Arrange treeData in a uniform structure
      */
-    searchOnDemand() {
+    buildDetached() {
         this.treeData = [];
         this.treeStructure = {};
-        const childData = this.originalDatasource.data.map((row) => (Object.assign(Object.assign({}, row), { tree__children: [], tree__opened: false, tree__searched: true, tree__level: 1, tree__parent: undefined })));
+        const childData = this.originalDatasource.data.map((row) => (Object.assign(Object.assign({}, row), { tree__children: [], tree__opened: false, tree__searched: !!this.searchValue, tree__level: 1, tree__parent: undefined })));
         this.treeData = childData;
         this.treeStructure['no-parent'] = childData;
     }
@@ -11042,11 +11056,15 @@ class Tooltip extends ComponentRender {
          */
         this.nudge = 0;
         /**
-         * Nudge the content to the top
+         * Open the tooltip on activator click
          */
         this.openOnClick = false;
         /**
-         * Nudge the content to the top
+         * Open the tooltip on activator focus
+         */
+        this.openOnFocus = true;
+        /**
+         * Open the tooltip on activator hover
          */
         this.openOnHover = true;
         /**
@@ -11066,6 +11084,7 @@ class Tooltip extends ComponentRender {
         this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
         this.nudge = this.getInitValue('nudge', props.nudge, this.nudge);
         this.openOnClick = this.getInitValue('openOnClick', props.openOnClick, this.openOnClick);
+        this.openOnFocus = this.getInitValue('openOnFocus', props.openOnFocus, this.openOnFocus);
         this.openOnHover = this.getInitValue('openOnHover', props.openOnHover, this.openOnHover);
         this.right = this.getInitValue('right', props.right, this.right);
         this.top = this.getInitValue('top', props.top, this.top);
@@ -11495,6 +11514,10 @@ class TreeGrid extends Grid {
          * Even though all children are selected, the parent node is not
          */
         this.flat = false;
+        /**
+         * Display the rows detached from their parents
+         */
+        this.detach = false;
         this.navigationTreeKeyMapping = {
             right: {
                 event: this.navigateToggle.bind(this, false),
@@ -11512,6 +11535,7 @@ class TreeGrid extends Grid {
         this.parentField = this.getInitValue('parentField', props.parentField, this.parentField);
         this.fetchOnDemand = this.getInitValue('fetchOnDemand', props.fetchOnDemand, this.fetchOnDemand);
         this.flat = this.getInitValue('flat', props.flat, this.flat);
+        this.detach = this.getInitValue('detach', props.detach, this.detach);
         this.treeDataStructure = new TreeDataStructure(this);
         this.createAccessors();
     }
@@ -11526,17 +11550,15 @@ class TreeGrid extends Grid {
      * Build tree data
      */
     buildTree(doGet = true) {
-        if (doGet) {
-            if (this.fetchOnDemand) {
-                this.datasource.addFilter(this.parentField, 'NULL');
-            }
-            else {
-                this.datasource.get();
-            }
-        }
-        else {
+        if (!doGet) {
             this.treeDataStructure.buildTree();
+            return;
+        }
+        if (!this.fetchOnDemand) {
+            this.datasource.get();
+            return;
         }
+        this.datasource.addFilter(this.parentField, 'NULL');
     }
     /**
      * This function takes an array of objects and updates the data in the tree.

package/dist/zd-common.umd.js

@@ -30,6 +30,10 @@
        * @param props Components properties
        */
       constructor(props) {
+          /**
+           * Automatically add focus to input when it's created.
+           */
+          this.autofocus = false;
           /**
            * Children component structure if the component has children.
            */
@@ -84,6 +88,7 @@
           this.parent = props.parent;
           this.name = props.name;
           this.events = core.Event.factory(props.events || this.events);
+          this.autofocus = this.getInitValue('autofocus', props.autofocus, this.autofocus);
           this.cssClass = this.getInitValue('cssClass', props.cssClass, this.cssClass);
           this.cssStyle = this.getInitValue('cssStyle', props.cssStyle, this.cssStyle);
           this.directives = this.getInitValue('directives', props.directives, this.directives);
@@ -1619,10 +1624,6 @@
            * Input auto complete.
            */
           this.autofill = true;
-          /**
-           * Automatically add focus to input when it's created.
-           */
-          this.autofocus = false;
           /**
            * Add input clear functionality if the input isn't readonly or disabled.
            */
@@ -1711,7 +1712,6 @@
           this.align = this.getInitValue('align', props.align, this.align);
           this.alwaysShowError = this.getInitValue('alwaysShowError', props.alwaysShowError, this.alwaysShowError);
           this.autofill = this.getInitValue('autofill', props.autofill, this.autofill);
-          this.autofocus = this.getInitValue('autofocus', props.autofocus, this.autofocus);
           this.clearable = this.getInitValue('clearable', props.clearable, this.clearable);
           this.color = this.getInitValue('color', props.color, this.color);
           this.dense = this.getInitValue('dense', props.dense, this.dense);
@@ -4080,19 +4080,25 @@
           const chars = replaced.split('');
           return chars.length ? chars.every((char) => core.Mask.isMaskDelimiter(char)) : true;
       }
-      updateHelperHint() {
-          if (this.helperValue) {
+      updateHelperHint(helperValue) {
+          const previousHelperHint = this.helperValue ? core.DateHelper.getLabel(this.helperValue) : '';
+          if (!this.hint || previousHelperHint !== this.hint) {
               this.previousHint = this.hint;
               this.previousPersistentHint = this.persistentHint;
-              this.hint = core.DateHelper.getLabel(this.helperValue);
-              this.persistentHint = true;
           }
+          this.helperValue = helperValue;
+          const label = core.DateHelper.getLabel(helperValue);
+          if (!helperValue || !label) {
+              this.hint = this.previousHint;
+              this.persistentHint = this.previousPersistentHint;
+              return;
+          }
+          this.hint = label;
+          this.persistentHint = true;
       }
       change(event, element) {
           super.change(event, element);
-          this.helperValue = '';
-          this.hint = this.previousHint;
-          this.persistentHint = this.previousPersistentHint;
+          this.updateHelperHint('');
       }
       getMaskValue() {
           let mask = '';
@@ -7921,6 +7927,10 @@
            * Defines if the menu is an application menu
            */
           this.app = false;
+          /**
+           * Defines if the menu must be rendered inside an absolute div
+           */
+          this.absolute = false;
           /**
            * Defines if the menu should rests under the application toolbar
            */
@@ -8014,6 +8024,7 @@
           /** Store the current item focused */
           this.currentItem = null;
           this.app = this.getInitValue('app', props.app, this.app);
+          this.absolute = this.getInitValue('absolute', props.absolute, this.absolute);
           this.clipped = this.getInitValue('clipped', props.clipped, this.clipped);
           this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
           this.floating = this.getInitValue('floating', props.floating, this.floating);
@@ -9280,6 +9291,7 @@
           this.parentField = tree.parentField;
           this.fetchOnDemand = tree.fetchOnDemand;
           this.openLevelOnLoad = tree.openLevelOnLoad;
+          this.tree = tree;
           this.init();
       }
       /**
@@ -9299,20 +9311,20 @@
               this.searchValue = this.originalDatasource.search;
               this.searchHasNoData = false;
               if (this.fetchOnDemand) {
-                  if (this.originalDatasource.search) {
+                  if (this.tree.detach || this.originalDatasource.search) {
                       delete this.originalDatasource.filter[this.parentField];
                   }
                   else if (!this.originalDatasource.filter[this.parentField]) {
                       this.originalDatasource.filter[this.parentField] = 'NULL';
                   }
               }
-              if (!this.fetchOnDemand && this.searchValue) {
+              if (!this.tree.detach && !this.fetchOnDemand && this.searchValue) {
                   this.searchAllData();
                   return Promise.resolve(this.originalDatasource.data);
               }
               return originalGet.call(this.originalDatasource).then((data) => {
                   if (this.searchValue) {
-                      this.searchOnDemand();
+                      this.buildDetached();
                   }
                   else {
                       this.buildTree();
@@ -9325,7 +9337,10 @@
        * search data
        */
       buildTree() {
-          if (this.fetchOnDemand) {
+          if (this.tree.detach) {
+              this.buildDetached();
+          }
+          else if (this.fetchOnDemand) {
               this.buildOnDemand();
           }
           else {
@@ -9578,13 +9593,12 @@
           });
       }
       /**
-       * Search tree with fetchOnDemand
-       * @param data datasource data
+       * Arrange treeData in a uniform structure
        */
-      searchOnDemand() {
+      buildDetached() {
           this.treeData = [];
           this.treeStructure = {};
-          const childData = this.originalDatasource.data.map((row) => (Object.assign(Object.assign({}, row), { tree__children: [], tree__opened: false, tree__searched: true, tree__level: 1, tree__parent: undefined })));
+          const childData = this.originalDatasource.data.map((row) => (Object.assign(Object.assign({}, row), { tree__children: [], tree__opened: false, tree__searched: !!this.searchValue, tree__level: 1, tree__parent: undefined })));
           this.treeData = childData;
           this.treeStructure['no-parent'] = childData;
       }
@@ -11049,11 +11063,15 @@
            */
           this.nudge = 0;
           /**
-           * Nudge the content to the top
+           * Open the tooltip on activator click
            */
           this.openOnClick = false;
           /**
-           * Nudge the content to the top
+           * Open the tooltip on activator focus
+           */
+          this.openOnFocus = true;
+          /**
+           * Open the tooltip on activator hover
            */
           this.openOnHover = true;
           /**
@@ -11073,6 +11091,7 @@
           this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
           this.nudge = this.getInitValue('nudge', props.nudge, this.nudge);
           this.openOnClick = this.getInitValue('openOnClick', props.openOnClick, this.openOnClick);
+          this.openOnFocus = this.getInitValue('openOnFocus', props.openOnFocus, this.openOnFocus);
           this.openOnHover = this.getInitValue('openOnHover', props.openOnHover, this.openOnHover);
           this.right = this.getInitValue('right', props.right, this.right);
           this.top = this.getInitValue('top', props.top, this.top);
@@ -11502,6 +11521,10 @@
            * Even though all children are selected, the parent node is not
            */
           this.flat = false;
+          /**
+           * Display the rows detached from their parents
+           */
+          this.detach = false;
           this.navigationTreeKeyMapping = {
               right: {
                   event: this.navigateToggle.bind(this, false),
@@ -11519,6 +11542,7 @@
           this.parentField = this.getInitValue('parentField', props.parentField, this.parentField);
           this.fetchOnDemand = this.getInitValue('fetchOnDemand', props.fetchOnDemand, this.fetchOnDemand);
           this.flat = this.getInitValue('flat', props.flat, this.flat);
+          this.detach = this.getInitValue('detach', props.detach, this.detach);
           this.treeDataStructure = new TreeDataStructure(this);
           this.createAccessors();
       }
@@ -11533,17 +11557,15 @@
        * Build tree data
        */
       buildTree(doGet = true) {
-          if (doGet) {
-              if (this.fetchOnDemand) {
-                  this.datasource.addFilter(this.parentField, 'NULL');
-              }
-              else {
-                  this.datasource.get();
-              }
-          }
-          else {
+          if (!doGet) {
               this.treeDataStructure.buildTree();
+              return;
+          }
+          if (!this.fetchOnDemand) {
+              this.datasource.get();
+              return;
           }
+          this.datasource.addFilter(this.parentField, 'NULL');
       }
       /**
        * This function takes an array of objects and updates the data in the tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.67.0",
+  "version": "1.68.0",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -39,5 +39,5 @@
     "lodash.times": "^4.3.2",
     "mockdate": "^3.0.2"
   },
-  "gitHead": "e073bdc1515fa3ab9da439f984a2a8f8fd572c9e"
+  "gitHead": "84cc6c01ee3c9aab7566b333f73e2aac50ad5c4f"
 }

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

@@ -4,6 +4,10 @@ import { IComponent, IComponentDirectives, IComponentEvents } from './interfaces
  * Base class for all Zeedhi components.
  */
 export declare class Component implements IComponent {
+    /**
+     * Automatically add focus to input when it's created.
+     */
+    autofocus: boolean;
     /**
      * Children component structure if the component has children.
      */

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

@@ -7,6 +7,7 @@ export interface IPropAccessor {
     };
 }
 export interface IComponent {
+    autofocus?: boolean;
     children?: IComponent[];
     componentId?: number;
     cssClass?: string;

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

@@ -127,7 +127,7 @@ export declare class DateRange extends TextInput implements IDateRange {
     protected isSimpleFormat(format: string): boolean;
     private previousHint;
     private previousPersistentHint;
-    updateHelperHint(): void;
+    updateHelperHint(helperValue: string): void;
     change(event?: Event, element?: any): void;
     getMaskValue(): any;
 }

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

@@ -71,12 +71,16 @@ export declare class Form extends ComponentRender implements IForm {
         [key: string]: any;
         children?: import("..").IComponentRender[] | undefined;
         component: string;
+        autofocus?: boolean | undefined;
         componentId?: number | undefined;
         cssClass?: string | undefined;
         cssStyle?: string | object | undefined;
         events?: import("..").IComponentEvents<import("@zeedhi/core").IEventParam<any>> | undefined;
         directives?: import("..").IComponentDirectives | undefined;
-        isVisible?: string | boolean | undefined;
+        isVisible?: string | boolean | undefined; /**
+         * Applies the align-items css property.
+         * Available options are start, center, end, space-between, space-around and stretch.
+         */
         dark?: boolean | undefined;
         light?: boolean | undefined;
         keyMap?: import("@zeedhi/core").IKeyMap<import("@zeedhi/core").IEventParam<any>> | undefined;

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

@@ -18,6 +18,7 @@ export declare class GridColumn extends Column implements IGridColumn {
         [key: string]: any;
         children?: import("..").IComponentRender[] | undefined;
         component: string;
+        autofocus?: boolean | undefined;
         componentId?: number | undefined;
         cssClass?: string | undefined;
         cssStyle?: string | object | undefined;
@@ -27,10 +28,7 @@ export declare class GridColumn extends Column implements IGridColumn {
         dark?: boolean | undefined;
         light?: boolean | undefined;
         keyMap?: import("@zeedhi/core").IKeyMap<import("@zeedhi/core").IEventParam<any>> | undefined;
-        name: string; /**
-         * Creates a new Grid Column.
-         * @param props Grid column properties
-         */
+        name: string;
         parent?: import("..").Component | undefined;
         tabStop?: boolean | undefined;
     }[];

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

@@ -17,10 +17,6 @@ export declare class Input extends ComponentRender implements IInput {
      * Input auto complete.
      */
     autofill: boolean;
-    /**
-     * Automatically add focus to input when it's created.
-     */
-    autofocus: boolean;
     /**
      * Add input clear functionality if the input isn't readonly or disabled.
      */

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

@@ -12,7 +12,6 @@ export interface IInput extends IComponentRender {
     align?: string;
     alwaysShowError?: boolean;
     autofill?: boolean;
-    autofocus?: boolean;
     clearable?: boolean;
     color?: string;
     dark?: boolean;

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

@@ -9,6 +9,7 @@ export declare type IMenuLinkEvents = IComponentEvents<IMenuLinkEvent>;
  */
 export interface IMenu extends IComponentRender {
     app?: boolean | string;
+    absolute?: boolean | string;
     clipped?: boolean | string;
     dense?: boolean | string;
     fixed?: boolean | string;

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

@@ -9,6 +9,10 @@ export declare class Menu extends ComponentRender implements IMenu {
      * Defines if the menu is an application menu
      */
     app: boolean | string;
+    /**
+     * Defines if the menu must be rendered inside an absolute div
+     */
+    absolute: boolean | string;
     /**
      * Defines if the menu should rests under the application toolbar
      */

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

@@ -12,6 +12,7 @@ export interface ITooltip extends IComponentRender {
     minWidth?: number | string;
     nudge?: number | string;
     openOnClick?: boolean;
+    openOnFocus?: boolean;
     openOnHover?: boolean;
     right?: boolean;
     top?: boolean;

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

@@ -34,11 +34,15 @@ export declare class Tooltip extends ComponentRender implements ITooltip {
      */
     nudge: number | string;
     /**
-     * Nudge the content to the top
+     * Open the tooltip on activator click
      */
     openOnClick: boolean;
     /**
-     * Nudge the content to the top
+     * Open the tooltip on activator focus
+     */
+    openOnFocus: boolean;
+    /**
+     * Open the tooltip on activator hover
      */
     openOnHover: boolean;
     /**

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

@@ -6,6 +6,7 @@ export interface ITreeGrid extends IGrid {
     openLevelOnLoad?: number | boolean;
     fetchOnDemand?: boolean;
     flat?: boolean;
+    detach?: boolean;
 }
 export interface ITreeGridEditable extends ITreeGrid {
     columns?: IGridColumnEditable[];

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

@@ -35,6 +35,10 @@ export declare class TreeGrid extends Grid implements ITreeGrid {
      * Even though all children are selected, the parent node is not
      */
     flat: boolean;
+    /**
+     * Display the rows detached from their parents
+     */
+    detach: boolean;
     viewUpdateScrollData?: () => void;
     /**
      * Creates a new Tree Grid.

package/types/utils/tree-data-structure/interfaces.d.ts

@@ -4,4 +4,5 @@ export interface ITreeDataStructure {
     parentField: string;
     openLevelOnLoad: number | boolean;
     fetchOnDemand: boolean;
+    detach?: boolean;
 }

package/types/utils/tree-data-structure/tree-data-structure.d.ts

@@ -29,6 +29,10 @@ export declare class TreeDataStructure {
      * Stores tree structure
      */
     private treeStructure;
+    /**
+     * Tree component
+     */
+    private tree;
     constructor(tree: ITreeDataStructure);
     /**
      * Creates properties and methods
@@ -122,10 +126,9 @@ export declare class TreeDataStructure {
      */
     private reloadAndUpdateSelectedRows;
     /**
-     * Search tree with fetchOnDemand
-     * @param data datasource data
+     * Arrange treeData in a uniform structure
      */
-    private searchOnDemand;
+    buildDetached(): void;
     /**
      * Search value against a memory datasource
      */