@zeedhi/common 1.44.0 → 1.45.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.
@@ -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();
@@ -7046,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.
    */
@@ -7679,9 +7699,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 +7787,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();
       }
@@ -10137,8 +10163,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,6 +10293,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 */
@@ -10274,11 +10307,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);
@@ -10289,8 +10332,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 }));
@@ -10298,6 +10349,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;
@@ -10308,6 +10365,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;
@@ -10406,16 +10473,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) {
@@ -10443,6 +10581,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 +10596,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;
+      }
   }
 
   /**
@@ -11189,15 +11346,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 +11380,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.45.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": "b5841549f61c539c52f2438b72e21ccd72156f73"
 }

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

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

@@ -63,6 +63,7 @@ export declare class Component implements IComponent {
      * Properties accessors to controller.
      */
     private accessorManager;
+    private element?;
     /**
      * Sets view focus method.
      */
@@ -128,7 +129,7 @@ export declare class Component implements IComponent {
      * Triggered when the component is mounted.
      * @param element Element mounted reference
      */
-    onMounted(element: HTMLElement): void;
+    onMounted(element: any): void;
     /**
      * Triggered before the component is destroyed.
      */
@@ -142,17 +143,17 @@ export declare class Component implements IComponent {
      * @param event DOM event
      * @param element Element clicked
      */
-    click(event: Event, element: HTMLElement): void;
+    click(event?: Event, element?: any): void;
     /**
      * Triggered when the component is focused.
      * @param event DOM event
      * @param element Element focused
      */
-    focus(event: Event, element: HTMLElement): void;
+    focus(event: Event, element: any): void;
     /**
      * Triggered when the component loses focus.
      * @param event DOM event
      * @param element Element that lost the focus
      */
-    blur(event: Event, element: HTMLElement): void;
+    blur(event: Event, element: any): void;
 }

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

@@ -24,7 +24,7 @@ export declare class Dashboard extends ComponentRender implements IDashboard {
      * @param props Dashboard properties
      */
     constructor(props: IDashboard);
-    onMounted(element: HTMLElement): void;
+    onMounted(element: any): void;
     onBeforeDestroy(): void;
     addCard(): void;
     deleteCard(): void;

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

@@ -89,9 +89,9 @@ export declare class DateRange extends TextInput implements IDateRange {
     parseISODateRangeValue(values: string[]): any;
     private sortDates;
     dateValidation(): boolean | string;
-    click(event: Event, element: HTMLElement): void;
-    blur(event: Event, element: HTMLElement): void;
-    focus(event: Event, element: HTMLElement): void;
+    click(event?: Event, element?: any): void;
+    blur(event: Event, element: any): void;
+    focus(event: Event, element: any): void;
     /**
       * Add date mask
       */
@@ -109,7 +109,7 @@ export declare class DateRange extends TextInput implements IDateRange {
       * @param event DOM event
       * @param element Text input
       */
-    iconClick(event: Event, element: HTMLElement): void;
+    iconClick(event: Event, element: any): void;
     /**
      * Checks if a date format is simple.
      * Simple date formats are the ones that consists only of 'DD', 'MM' or 'YYYY', and mask delimiters

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

@@ -79,7 +79,7 @@ export declare class Date extends TextInput implements IDate {
      * @param event
      * @param element
      */
-    selectDate(date: string, event?: Event, element?: HTMLElement): void;
+    selectDate(date: string, event?: Event, element?: any): void;
     get displayValue(): string;
     set displayValue(newValue: string);
     /**
@@ -98,9 +98,9 @@ export declare class Date extends TextInput implements IDate {
     formatISODateValue(value: string): string;
     parseISODateValue(value: string): any;
     dateValidation(): boolean | string;
-    click(event: Event, element: HTMLElement): void;
-    blur(event: Event, element: HTMLElement): void;
-    focus(event: Event, element: HTMLElement): void;
+    click(event?: Event, element?: any): void;
+    blur(event: Event, element: any): void;
+    focus(event: Event, element: any): void;
     /**
      * Add date mask
      */
@@ -118,7 +118,7 @@ export declare class Date extends TextInput implements IDate {
      * @param event DOM event
      * @param element Text input
      */
-    iconClick(event: Event, element: HTMLElement): void;
+    iconClick(event: Event, element: any): void;
     /**
      * Checks if a date format is simple.
      * Simple date formats are the ones that consists only of 'DD', 'MM' or 'YYYY', and mask delimiters

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

@@ -77,14 +77,14 @@ export declare class FileInput extends TextInput implements IFileInput {
      * @param event DOM event
      * @param element Element clicked
      */
-    change(event?: Event, element?: HTMLElement): void;
+    change(event?: Event, element?: any): void;
     /**
      * Triggered when a removable chip is clicked
      * @param event DOM event
      * @param index Chip index
-     * @param element HTMLElement
+     * @param element any
      */
-    chipClick(event: Event, index: number, element?: HTMLElement): void;
+    chipClick(event: Event, index: number, element: any): void;
     /**
      * Check if File type is valid using accept attribute
      * @param file File