@zeedhi/common 1.44.0 → 1.46.0

package/dist/zd-common.umd.js

@@ -199,6 +199,7 @@
        * @param element Element mounted reference
        */
       onMounted(element) {
+          this.element = element;
           if (Object.keys(this.keyMap).length) {
               core.KeyMap.bind(this.keyMap, this, element);
           }
@@ -226,7 +227,11 @@
        * @param element Element clicked
        */
       click(event, element) {
-          this.callEvent('click', { event, element, component: this });
+          this.callEvent('click', {
+              event: (event || new MouseEvent('click')),
+              element: (element || this.element),
+              component: this,
+          });
       }
       /**
        * Triggered when the component is focused.
@@ -497,7 +502,7 @@
        * @param options New options
        */
       updateChart(options) {
-          this.options = Object.assign(Object.assign({}, this.options), options);
+          merge__default["default"](this.options, options);
           if (options.series) {
               this.series = this.options.series;
           }
@@ -559,7 +564,10 @@
        */
       clickEvent(event, chartContext, config) {
           this.callEvent('chartClick', {
-              event, component: this, chartContext, config,
+              event: (event || new MouseEvent('click')),
+              component: this,
+              chartContext,
+              config,
           });
       }
       /**
@@ -1649,9 +1657,9 @@
            */
           this.storePath = '';
           /**
-           * Input value.
-           */
-          this.value = undefined;
+          * Internal input value.
+          */
+          this.value = null;
           /**
            * Input validations.
            */
@@ -1756,7 +1764,8 @@
        * Removes all input validation.
        */
       clearValidations() {
-          Object.keys(this.validations).forEach((name) => this.removeValidation(name));
+          this.validations = {};
+          this.rules = [];
       }
       /**
        * Updates input rules.
@@ -1799,6 +1808,8 @@
        * @param element Element clicked
        */
       change(event, element) {
+          if (this.value === '')
+              this.value = null;
           if (this.events.change && typeof this.events.change === 'function') {
               this.events.change({ event, element, component: this });
           }
@@ -2811,61 +2822,34 @@
    */
   ModalService.modals = [];
 
-  class Loading extends Component {
-      /*
-       * Creates a new Loading Overlay
-       * @param props Modal structure
-       */
-      constructor(props) {
-          super(props);
-          /**
-           * text to show in Loader Overlay
-           */
-          this.text = 'Loading';
-          this.isVisible = false;
-          this.zIndex = 999;
-          this.text = this.getInitValue('text', props.text, this.text);
-          this.zIndex = this.getInitValue('zIndex', props.zIndex, this.zIndex);
-          this.defaultText = this.text;
-      }
-      /**
-       * Displays overlay
-       */
-      show(text) {
-          if (text)
-              this.text = text;
-          else
-              this.text = this.defaultText;
-          this.isVisible = true;
-      }
-      /**
-       * Close overlay
-       */
-      hide() {
-          this.isVisible = false;
-      }
-  }
-
   /**
    * Loading Service Class
    */
   class LoadingService {
+      /**
+       * Creates a new loading instance
+       * @param loading loading structure
+       */
+      static create(CreateLoading, props) {
+          const instance = new CreateLoading(props);
+          this.loading = instance;
+          return instance;
+      }
       /**
        * Displays a Loading.
        * If has an opened Loading it will be closed.
        * @param Loading loading structure
        */
       static show(text) {
-          this.instance.show(text);
+          this.loading.show(text);
       }
       /**
        * Hides current Loading
        */
       static hide() {
-          this.instance.hide();
+          this.loading.hide();
       }
-  }
-  LoadingService.instance = new Loading({ name: 'loading-instance' });
+  }
 
   /**
    * Base class for Dashboard component.
@@ -3472,8 +3456,9 @@
           return !this.dateError || core.I18n.translate('VALIDATION_INVALID_DATE');
       }
       click(event, element) {
-          super.click(event, element);
-          if (!event.defaultPrevented) {
+          const clickEvent = event || new MouseEvent('click');
+          super.click(clickEvent, element);
+          if (!clickEvent.defaultPrevented) {
               this.showDatePicker = !this.showDatePicker;
           }
       }
@@ -3821,8 +3806,9 @@
           return !this.dateError || core.I18n.translate('VALIDATION_INVALID_DATE');
       }
       click(event, element) {
-          super.click(event, element);
-          if (!event.defaultPrevented) {
+          const clickEvent = event || new MouseEvent('click');
+          super.click(clickEvent, element);
+          if (!clickEvent.defaultPrevented) {
               this.showDatePicker = !this.showDatePicker;
           }
       }
@@ -4195,7 +4181,7 @@
        * Triggered when a removable chip is clicked
        * @param event DOM event
        * @param index Chip index
-       * @param element HTMLElement
+       * @param element any
        */
       chipClick(event, index, element) {
           event.stopImmediatePropagation();
@@ -4969,6 +4955,9 @@
           this.toolbarSlot = [
               { name: '<<NAME>>_gridSearch', component: 'ZdSearch' },
           ];
+          this.loadingText = 'LOADING';
+          this.noDataText = 'NO_DATA';
+          this.noResultsText = 'NO_RESULT';
           /**
            * Components that will be rendered in no-data case
            */
@@ -4977,7 +4966,7 @@
                   name: '<<NAME>>_no-data',
                   component: 'ZdText',
                   cssClass: 'no-data',
-                  text: 'NO_DATA',
+                  text: this.noDataText,
               },
           ];
           /**
@@ -4988,7 +4977,7 @@
                   name: '<<NAME>>_no-result',
                   component: 'ZdText',
                   cssClass: 'no-result',
-                  text: 'NO_RESULT',
+                  text: this.noResultsText,
               },
           ];
           /**
@@ -5092,6 +5081,7 @@
           this.headerCellTextColor = this.getInitValue('headerCellTextColor', props.headerCellTextColor, this.headerCellTextColor);
           this.dragColumns = this.getInitValue('dragColumns', props.dragColumns, this.dragColumns);
           this.resizeColumns = this.getInitValue('resizeColumns', props.resizeColumns, this.resizeColumns);
+          this.loadingText = this.getInitValue('loadingText', props.loadingText, this.loadingText);
           this.toolbarSlot = props.toolbarSlot || this.toolbarSlot;
           this.footerSlot = props.footerSlot || this.footerSlot;
           this.noDataSlot = props.noDataSlot || this.noDataSlot;
@@ -5101,6 +5091,8 @@
           this.footerSlot = this.changeDefaultSlotNames(this.footerSlot);
           this.toolbarSlot = this.changeDefaultSlotNames(this.toolbarSlot);
           this.noResultSlot = this.changeDefaultSlotNames(this.noResultSlot);
+          this.noDataText = this.getInitValue('noDataText', props.noDataText, this.noDataText);
+          this.noResultsText = this.getInitValue('noResultsText', props.noResultsText, this.noResultsText);
           this.createAccessors();
       }
       onMounted(element) {
@@ -7046,6 +7038,41 @@
       }
   }
 
+  class Loading extends Component {
+      /*
+       * Creates a new Loading Overlay
+       * @param props Modal structure
+       */
+      constructor(props) {
+          super(props);
+          /**
+           * text to show in Loader Overlay
+           */
+          this.text = 'Loading';
+          this.isVisible = false;
+          this.zIndex = 999;
+          this.text = this.getInitValue('text', props.text, this.text);
+          this.zIndex = this.getInitValue('zIndex', props.zIndex, this.zIndex);
+          this.defaultText = this.text;
+      }
+      /**
+       * Displays overlay
+       */
+      show(text) {
+          if (text)
+              this.text = text;
+          else
+              this.text = this.defaultText;
+          this.isVisible = true;
+      }
+      /**
+       * Close overlay
+       */
+      hide() {
+          this.isVisible = false;
+      }
+  }
+
   /**
    * Base class for Login component.
    */
@@ -7679,9 +7706,12 @@
        */
       click(event) {
           let preventDefault = false;
-          preventDefault = this.callEvent('click', { event, component: this });
+          preventDefault = this.callEvent('click', {
+              event: (event || new MouseEvent('click')),
+              component: this,
+          });
           if (preventDefault) {
-              event.preventDefault();
+              event === null || event === void 0 ? void 0 : event.preventDefault();
           }
           this.setFocus();
       }
@@ -7764,9 +7794,12 @@
        */
       click(event) {
           let preventDefault = false;
-          preventDefault = this.callEvent('click', { event, component: this });
+          preventDefault = this.callEvent('click', {
+              event: (event || new MouseEvent('click')),
+              component: this,
+          });
           if (preventDefault) {
-              event.preventDefault();
+              event === null || event === void 0 ? void 0 : event.preventDefault();
           }
           this.setFocus();
       }
@@ -8248,6 +8281,12 @@
           this.vertical = this.getInitValue('vertical', props.vertical, this.vertical);
           this.createAccessors();
       }
+      get value() {
+          return this.rangeSliderValue === null ? undefined : this.rangeSliderValue;
+      }
+      set value(value) {
+          this.rangeSliderValue = value;
+      }
   }
 
   /**
@@ -8291,11 +8330,16 @@
            * Number of hidden items
            */
           this.moreChip = 0;
+          /**
+           * Max number of rows the component can have
+           */
+          this.maxRows = undefined;
           this.showSelectAll = false;
           if (!this.selectedValue) {
               this.selectedValue = [];
           }
           this.showSelectAll = this.getInitValue('showSelectAll', props.showSelectAll, this.showSelectAll);
+          this.maxRows = this.getInitValue('maxRows', props.maxRows, this.maxRows);
           this.createAccessors();
       }
       afterFocus() {
@@ -8471,6 +8515,21 @@
       removePushedValue() {
           this.removeInserts();
       }
+      doSearch(value) {
+          return __awaiter(this, void 0, void 0, function* () {
+              if (this.manualMode || value) {
+                  yield this.updateSearch(value);
+              }
+              else {
+                  if (!this.manualMode) {
+                      this.datasource.data = [...this.cachedData];
+                      this.datasource.total = this.cachedTotal;
+                  }
+                  this.removeInserts();
+                  this.insertSelected();
+              }
+          });
+      }
       /**
        * Removes unselected inserts from datasource
        */
@@ -10137,8 +10196,11 @@
               || core.I18n.translate('VALIDATION_TIME_NOT_ALLOWED');
       }
       click(event) {
-          this.callEvent('click', { event, component: this });
-          if (!event.defaultPrevented) {
+          this.callEvent('click', {
+              event: (event || new MouseEvent('click')),
+              component: this,
+          });
+          if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
               this.showTimePicker = !this.showTimePicker;
           }
       }
@@ -10264,21 +10326,36 @@
            * Components that will be rendered on toolbar slot
            */
           this.toolbarSlot = [];
+          /**
+           * Components that will be rendered on title slot
+           */
+          this.titleSlot = [];
           /** Datasource parent field */
           this.parentField = '';
           /** Datasource title field */
           this.titleField = '';
           /** Datasource data field */
           this.dataField = '';
+          /** Datasource checked field */
+          this.checkedField = 'checked';
           /**
            * Defines if the tree will be opened or not (true/false) or if it should open only until a specific level
            */
           this.openLevelOnLoad = false;
+          /**
+           * Allow row check
+           */
+          this.checkbox = false;
           /**
            * Defines if should wait and not execute GET method when Datasource is created
            */
           this.lazyLoad = true;
-          this.nodes = props.nodes || this.nodes;
+          /**
+           * Dictionary of nodePath ponting to Dictionary of path pointing to the condition (applied) return value
+           */
+          this.appliedConditions = {};
+          /* Conditions of tree */
+          this.factoredConditions = {};
           this.itemIconName = this.getInitValue('itemIconName', props.itemIconName, this.itemIconName);
           this.groupIconName = this.getInitValue('groupIconName', props.groupIconName, this.groupIconName);
           this.openedIconName = this.getInitValue('openedIconName', props.openedIconName, this.openedIconName);
@@ -10288,25 +10365,67 @@
           this.parentField = this.getInitValue('parentField', props.parentField, this.parentField);
           this.titleField = this.getInitValue('titleField', props.titleField, this.titleField);
           this.dataField = this.getInitValue('dataField', props.dataField, this.dataField);
+          this.checkedField = this.getInitValue('checkedField', props.checkedField, this.checkedField);
           this.openLevelOnLoad = this.getInitValue('openLevelOnLoad', props.openLevelOnLoad, this.openLevelOnLoad);
+          this.checkbox = this.getInitValue('checkbox', props.checkbox, this.checkbox);
           this.afterTitleSlot = props.afterTitleSlot || this.afterTitleSlot;
           this.toolbarSlot = props.toolbarSlot || this.toolbarSlot;
+          this.titleSlot = props.titleSlot || this.titleSlot;
+          if (props.afterTitleSlot) {
+              this.createConditions([props.afterTitleSlot]);
+          }
+          if (props.titleSlot) {
+              this.createConditions(props.titleSlot);
+          }
           if (props.datasource && Object.keys(props.datasource).length) {
               this.lazyLoad = props.datasource.lazyLoad !== false;
               this.datasource = core.DatasourceFactory.factory(Object.assign(Object.assign({}, props.datasource), { searchIn: props.datasource.searchIn || [this.titleField, this.dataField].filter(Boolean), lazyLoad: true, loadAll: true }));
               this.createDataStructure();
           }
           this.createAccessors();
+          this.nodes = props.nodes || this.nodes;
+      }
+      /**
+       * Initialize all the properties of the declared nodes (reactivity)
+       */
+      initNodes(nodes, override) {
+          return nodes.map((node) => {
+              let newNode = {
+                  title: '',
+                  isLeaf: false,
+                  isExpanded: true,
+                  isSelected: false,
+                  isDraggable: true,
+                  isSelectable: true,
+                  data: {
+                      [this.checkedField]: false,
+                  },
+                  children: [],
+              };
+              newNode = merge__default["default"](newNode, node, override);
+              newNode.children = this.initNodes(node.children || [], override);
+              return newNode;
+          });
       }
       /** Nodes */
       get nodes() {
           return this.nodesValue;
       }
       set nodes(value) {
+          let override = {};
           if (!this.allowDragDrop) {
-              this.removeDraggable(value);
+              override = { isDraggable: false };
           }
-          this.nodesValue = value;
+          this.nodesValue = this.initNodes(value, override);
+      }
+      getCheckedNodes() {
+          const selectedNodes = [];
+          this.tree.traverse((node) => {
+              if (node.data && node.data[this.checkedField]) {
+                  selectedNodes.push(node);
+              }
+          });
+          return selectedNodes;
       }
       /** Returns the selected nodes */
       get selectedNodes() {
@@ -10356,15 +10475,16 @@
       }
       /** Insert nodes by the current cursor position */
       insertNode(newNode) {
+          const initNode = this.initNodes([newNode])[0];
           if (this.selectedNodes.length) {
               const cursorPosition = {
                   node: this.selectedNodes[0],
                   placement: 'inside',
               };
-              this.tree.insert(cursorPosition, newNode);
+              this.tree.insert(cursorPosition, initNode);
           }
           else {
-              this.nodes.push(newNode);
+              this.nodes.push(initNode);
           }
       }
       importNodes(nodes) {
@@ -10394,28 +10514,90 @@
       updateNodeData(node, value) {
           this.tree.updateNode(node.path, value);
       }
-      removeDraggable(items) {
-          items.forEach((item) => {
-              var _a;
-              item.isDraggable = false;
-              if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
-                  this.removeDraggable(item.children);
+      setTree(tree) {
+          this.tree = tree;
+      }
+      /**
+       * Return plain conditions object
+       * @param conditions Conditions object
+       * @param parentPath Path to parent property
+       */
+      getPlainConditions(conditions, parentPath = '') {
+          let plainData = {};
+          Object.keys(conditions).forEach((key) => {
+              const fullKey = parentPath ? [parentPath, key].join('.') : key;
+              if (typeof conditions[key] === 'object') {
+                  plainData = Object.assign(Object.assign({}, plainData), this.getPlainConditions(conditions[key], fullKey));
+              }
+              else {
+                  plainData[fullKey] = conditions[key];
               }
           });
+          return plainData;
       }
-      setTree(tree) {
-          this.tree = tree;
+      createConditions(children, parentPath = '') {
+          children.forEach((child) => {
+              const path = parentPath ? `${parentPath}.${child.name}` : child.name;
+              if (child.conditions) {
+                  const plainConditions = this.getPlainConditions(child.conditions);
+                  this.factoredConditions[path] = core.Event.factory(plainConditions);
+              }
+              if (child.children) {
+                  this.createConditions(child.children, path);
+              }
+          });
       }
-      /** Get the conditions function to be applied to each column depending on the node */
-      getConditions(conditions) {
-          const cond = core.Event.factory(conditions);
-          return (node) => {
-              const appliedConditions = {};
-              Object.keys(conditions).forEach((condition) => {
-                  appliedConditions[condition] = cond[condition](node);
-              });
-              return appliedConditions;
-          };
+      applyCondition(node, factoredConditions) {
+          const appliedConditions = {};
+          Object.keys(factoredConditions).forEach((condition) => {
+              const conditionFunction = factoredConditions[condition];
+              set__default["default"](appliedConditions, condition, conditionFunction(node));
+          });
+          return appliedConditions;
+      }
+      applyChildCondition(node, factoredConditions = this.factoredConditions) {
+          const appliedConditions = {};
+          Object.keys(factoredConditions).forEach((comp) => {
+              const conditions = this.factoredConditions[comp];
+              appliedConditions[comp] = Object.assign({}, this.applyCondition(node, conditions));
+          });
+          return appliedConditions;
+      }
+      reapplyConditions(node) {
+          const nodePath = node.pathStr;
+          if (!nodePath)
+              return {};
+          const appliedConditions = Object.assign({}, this.appliedConditions);
+          appliedConditions[nodePath] = this.applyChildCondition(node);
+          this.appliedConditions = appliedConditions;
+          return this.appliedConditions[nodePath];
+      }
+      getSlotComponent(slot, node, parentPath = '') {
+          const slotArr = Array.isArray(slot) ? slot : [slot];
+          const newComponents = [];
+          slotArr.forEach((component) => {
+              var _a;
+              if (!component)
+                  return;
+              const nodePath = node.pathStr;
+              if (!nodePath)
+                  return;
+              const compName = component.name;
+              const instanceName = `${compName}_${nodePath}`;
+              const path = parentPath ? `${parentPath}.${compName}` : compName;
+              const newComponent = merge__default["default"]({}, component, (_a = this.appliedConditions[nodePath]) === null || _a === void 0 ? void 0 : _a[path]);
+              const newChildren = this.getSlotComponent(newComponent.children || [], node, path);
+              newComponent.name = instanceName;
+              newComponent.children = newChildren;
+              try {
+                  core.Metadata.updateInstance(instanceName, newComponent);
+              }
+              catch (e) {
+                  // do nothing
+              }
+              newComponents.push(newComponent);
+          });
+          return newComponents;
       }
       /** Triggers when dragging nodes have been dropped */
       nodeDrop(nodes, position, event, element) {
@@ -10443,6 +10625,12 @@
               event, element, component: this, node,
           });
       }
+      /** Triggers when a node has been checked/unchecked */
+      nodeCheck(node, event, element) {
+          this.callEvent('onNodeCheck', {
+              event, element, component: this, node,
+          });
+      }
       clearSelection(nodes) {
           const nodesArray = nodes || this.nodes;
           nodesArray.forEach((node) => {
@@ -10452,6 +10640,19 @@
               }
           });
       }
+      getNode(path) {
+          return this.searchPath(this.nodes, path);
+      }
+      getParentNode(node) {
+          var _a;
+          return this.tree.getNode(((_a = node.path) === null || _a === void 0 ? void 0 : _a.slice(0, -1)) || []);
+      }
+      searchPath(nodes, path) {
+          const currentNode = (path[0] > -1 && path[0] < nodes.length) ? nodes[path[0]] : undefined;
+          if (currentNode && path.length > 1)
+              return this.searchPath(currentNode.children || [], path.slice(1));
+          return currentNode;
+      }
   }
 
   /**
@@ -10639,6 +10840,7 @@
               },
           };
           this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
+          this.noDataSlot = this.changeDefaultSlotNames(this.noDataSlot);
           this.createAccessors();
       }
       onMounted(element) {
@@ -11189,15 +11391,23 @@
       zeedhi: {
           light: {
               'font-color': 'var(--v-grey-darken2)',
-              'background-base': '#F6F6F6',
+              'background-base': '#FDFDFD',
+              'background-base-2': '#F6F6F6',
+              'background-base-3': '#EEE',
               'scrollbar-track': 'var(--v-grey-lighten5)',
               'scrollbar-thumb': 'var(--v-grey-lighten4)',
+              'badge-background-color': '#f44336',
+              'badge-text-color': '#fff',
           },
           dark: {
               'font-color': 'var(--v-grey-lighten3)',
-              'background-base': '#121212',
+              'background-base': '#1E1E1E',
+              'background-base-2': 'var(--v-grey-darken2)',
+              'background-base-3': 'var(--v-grey-darken4)',
               'scrollbar-track': 'var(--v-grey-darken3)',
               'scrollbar-thumb': 'var(--v-grey-base)',
+              'badge-background-color': '#f44336',
+              'badge-text-color': '#fff',
           },
           variables: {
               'default-padding': '16px',
@@ -11215,8 +11425,6 @@
               'font-body4-weight': '500',
               'font-caption-size': '11px',
               'font-caption-weight': '400',
-              'badge-background-color': '#f44336',
-              'badge-text-color': '#fff',
           },
       },
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.44.0",
+  "version": "1.46.0",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -37,5 +37,5 @@
     "lodash.times": "^4.3.2",
     "mockdate": "^3.0.2"
   },
-  "gitHead": "cfe94f85ab62e7e30d7bb09ea8178edf2b75fd59"
+  "gitHead": "0133e8028e0b9b5876c2bb24b9a8c4d687d22dd8"
 }

package/types/components/zd-button-group/button-group.d.ts

@@ -71,5 +71,5 @@ export declare class ButtonGroup extends ComponentRender implements IButtonGroup
        * @param event DOM event
        * @param element Element clicked
        */
-    change(event?: Event, element?: HTMLElement): void;
+    change(event?: Event, element?: any): void;
 }