@zeedhi/common 1.43.1 → 1.45.1

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.
@@ -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.
            */
@@ -1799,6 +1807,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 +2821,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 +3455,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 +3805,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 +4180,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();
@@ -4483,6 +4468,8 @@
           this.componentProps = {};
           /** column style property */
           this.style = {};
+          /** Type of XLS */
+          this.xlsType = '';
           /* Stores lookup data to prevent unnecessary requests */
           this.lookupData = {};
           /* Stores lookup data count (only to be reactive and force column update)  */
@@ -4525,6 +4512,7 @@
           this.loading = this.getInitValue('loading', props.loading, this.loading);
           this.style = this.getInitValue('style', props.style, this.style);
           this.componentProps = this.getInitValue('componentProps', props.componentProps, this.componentProps);
+          this.xlsType = this.getInitValue('xlsType', props.xlsType, this.xlsType);
           this.conditions = this.getInitValue('conditions', props.conditions, this.conditions);
           this.createConditions();
           this.createActionConditions();
@@ -7043,6 +7031,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.
    */
@@ -7399,6 +7422,8 @@
           this.filteredMenuItems = [];
           /** Search value */
           this.searchValue = '';
+          /** Store the current item focused */
+          this.currentItem = null;
           this.app = this.getInitValue('app', props.app, this.app);
           this.clipped = this.getInitValue('clipped', props.clipped, this.clipped);
           this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
@@ -7674,9 +7699,21 @@
        */
       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();
+      }
+      /**
+       * Event triggered when this item is focus
+       */
+      focus() {
+          if (this.parentMenu) {
+              this.parentMenu.currentItem = this;
           }
       }
       /**
@@ -7745,6 +7782,29 @@
       close() {
           this.opened = false;
       }
+      /**
+       * Event triggered when this item is clicked
+       */
+      click(event) {
+          let preventDefault = false;
+          preventDefault = this.callEvent('click', {
+              event: (event || new MouseEvent('click')),
+              component: this,
+          });
+          if (preventDefault) {
+              event === null || event === void 0 ? void 0 : event.preventDefault();
+          }
+          this.setFocus();
+      }
+      /**
+       * Event triggered when this item is focus
+       */
+      focus(event) {
+          this.callEvent('focus', { event, component: this });
+          if (this.parentMenu) {
+              this.parentMenu.currentItem = this;
+          }
+      }
   }
 
   /**
@@ -7822,10 +7882,20 @@
            * If true the modal won't close when overlay is clicked
            */
           this.persistent = false;
+          /**
+           * Allows modal to be dragged around in the screen
+           */
+          this.draggable = false;
+          /**
+           * Css selector of the drag handle
+           */
+          this.dragHandle = '';
           this.title = this.getInitValue('title', props.title, this.title);
           this.fullscreen = this.getInitValue('fullscreen', props.fullscreen, this.fullscreen);
           this.grid = this.getInitValue('grid', props.grid, this.grid);
           this.persistent = this.getInitValue('persistent', props.persistent, this.persistent);
+          this.draggable = this.getInitValue('draggable', props.draggable, this.draggable);
+          this.dragHandle = this.getInitValue('dragHandle', props.dragHandle, this.dragHandle);
           this.isVisible = false;
           this.createAccessors();
       }
@@ -8247,11 +8317,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() {
@@ -8427,6 +8502,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
        */
@@ -9267,8 +9357,13 @@
            */
           this.selectedNodes = [];
           this.selectValue = [];
+          /**
+           * Changes the behavior of checked nodes that will be displayed in the array of values
+           */
+          this.valueConsistsOf = 'LEAF_PRIORITY';
           this.flat = this.getInitValue('flat', props.flat, this.flat);
           this.limit = this.getInitValue('limit', props.limit, this.limit);
+          this.valueConsistsOf = this.getInitValue('valueConsistsOf', props.valueConsistsOf, this.valueConsistsOf);
           this.createAccessors();
       }
       /**
@@ -10088,8 +10183,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;
           }
       }
@@ -10215,6 +10313,10 @@
            * 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 */
@@ -10225,11 +10327,21 @@
            * 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.nodes = this.initNodes(props.nodes || this.nodes);
           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);
@@ -10240,8 +10352,16 @@
           this.titleField = this.getInitValue('titleField', props.titleField, this.titleField);
           this.dataField = this.getInitValue('dataField', props.dataField, this.dataField);
           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 }));
@@ -10249,6 +10369,12 @@
           }
           this.createAccessors();
       }
+      /**
+       * Initialize all the properties of the declared nodes (reactivity)
+       */
+      initNodes(nodes) {
+          return nodes.map((node) => (Object.assign(Object.assign({ isLeaf: false, isExpanded: true, isSelected: false, isDraggable: true, isSelectable: true, isChecked: false }, node), { children: this.initNodes(node.children || []) })));
+      }
       /** Nodes */
       get nodes() {
           return this.nodesValue;
@@ -10259,6 +10385,16 @@
           }
           this.nodesValue = value;
       }
+      getCheckedNodes() {
+          const selectedNodes = [];
+          this.tree.traverse((node) => {
+              const instanceNode = this.getNode(node.path || []);
+              if (instanceNode === null || instanceNode === void 0 ? void 0 : instanceNode.isChecked) {
+                  selectedNodes.push(instanceNode);
+              }
+          });
+          return selectedNodes;
+      }
       /** Returns the selected nodes */
       get selectedNodes() {
           var _a;
@@ -10357,16 +10493,87 @@
       setTree(tree) {
           this.tree = tree;
       }
-      /** 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;
-          };
+      /**
+       * 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;
+      }
+      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);
+              }
+          });
+      }
+      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) {
@@ -10394,6 +10601,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) => {
@@ -10403,6 +10616,19 @@
               }
           });
       }
+      getNode(path) {
+          return this.searchPath(this.nodes, path);
+      }
+      getParentNode(node) {
+          var _a;
+          return this.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;
+      }
   }
 
   /**
@@ -11042,7 +11268,7 @@
       tableColumns: 'mdi-table-headers-eye',
       unfold: 'mdi-unfold-more-horizontal',
       warning: 'mdi-exclamation',
-      zoom: 'mdi-magnify-scan',
+      zoom: 'mdi-magnify',
       zoomIn: 'mdi-plus-circle-outline',
       zoomPanning: 'mdi-hand-back-right-outline',
       zoomOut: 'mdi-minus-circle-outline',
@@ -11140,15 +11366,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',
@@ -11166,8 +11400,6 @@
               'font-body4-weight': '500',
               'font-caption-size': '11px',
               'font-caption-weight': '400',
-              'badge-background-color': '#f44336',
-              'badge-text-color': '#fff',
           },
       },
   };
@@ -11422,6 +11654,7 @@
                   sequence: index,
                   format: this.getFormatOfColumn(col),
                   size: `${size}%`,
+                  xlsType: col.xlsType,
               };
               return Object.assign(Object.assign({}, result), { [col.name]: row });
           }, {});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.43.1",
+  "version": "1.45.1",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -37,5 +37,5 @@
     "lodash.times": "^4.3.2",
     "mockdate": "^3.0.2"
   },
-  "gitHead": "dea0dcc3bb44548e97613b82580964acdc07411d"
+  "gitHead": "48ccd8cb489384bbdedb6f649504ca64d9d6fc1c"
 }

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

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

@@ -159,13 +159,13 @@ export declare class Carousel extends ComponentRender implements ICarousel {
      * @param element Carousel element
      * @param slideData Data related to the beforeSlide event
      */
-    beforeSlide(element: HTMLElement, slideData: ISlideData, event?: Event): void;
+    beforeSlide(element: any, slideData: ISlideData, event?: Event): void;
     /**
      * Event triggered when the current slide changes.
      * @param event Event that triggered the slide event
      * @param element Carousel element
      * @param slideData Data related to the slide event
      */
-    slide(element: HTMLElement, slideData: ISlideData, event?: Event): void;
+    slide(element: any, slideData: ISlideData, event?: Event): void;
     private changeDefaultButtonName;
 }

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

@@ -9,7 +9,7 @@ export interface ISlideData {
 export interface ICarouselEventParam {
     component: Carousel;
     event?: Event | undefined;
-    element?: HTMLElement;
+    element?: any;
     slideData?: ISlideData;
 }
 export declare type ICarouselEvents = IComponentEvents<ICarouselEventParam>;

package/types/components/zd-collapse-card/collapse-card.d.ts

@@ -52,5 +52,5 @@ export declare class CollapseCard extends Card implements ICollapseCard {
      * @param event DOM event
      * @param element Element changed
      */
-    change(event: Event, element: HTMLElement): void;
+    change(event: Event, element: any): void;
 }