@zeedhi/common 1.44.0 → 1.45.0

package/dist/zd-common.esm.js

@@ -192,6 +192,7 @@ class Component {
      * @param element Element mounted reference
      */
     onMounted(element) {
+        this.element = element;
         if (Object.keys(this.keyMap).length) {
             KeyMap.bind(this.keyMap, this, element);
         }
@@ -219,7 +220,11 @@ class Component {
      * @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.
@@ -552,7 +557,10 @@ class ApexChart extends ComponentRender {
      */
     clickEvent(event, chartContext, config) {
         this.callEvent('chartClick', {
-            event, component: this, chartContext, config,
+            event: (event || new MouseEvent('click')),
+            component: this,
+            chartContext,
+            config,
         });
     }
     /**
@@ -1642,9 +1650,9 @@ class Input extends ComponentRender {
          */
         this.storePath = '';
         /**
-         * Input value.
-         */
-        this.value = undefined;
+        * Internal input value.
+        */
+        this.value = null;
         /**
          * Input validations.
          */
@@ -1792,6 +1800,8 @@ class Input extends ComponentRender {
      * @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 });
         }
@@ -2804,61 +2814,34 @@ class ModalService {
  */
 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.
@@ -3465,8 +3448,9 @@ class Date$1 extends TextInput {
         return !this.dateError || 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;
         }
     }
@@ -3814,8 +3798,9 @@ class DateRange extends TextInput {
         return !this.dateError || 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;
         }
     }
@@ -4188,7 +4173,7 @@ class FileInput extends TextInput {
      * 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();
@@ -7039,6 +7024,41 @@ class ListGroup extends ListItem {
     }
 }
 
+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.
  */
@@ -7672,9 +7692,12 @@ class MenuLink extends ComponentRender {
      */
     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();
     }
@@ -7757,9 +7780,12 @@ class MenuGroup extends ComponentRender {
      */
     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();
     }
@@ -10130,8 +10156,11 @@ class Time extends TextInput {
             || 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;
         }
     }
@@ -10257,6 +10286,10 @@ class Tree extends ComponentRender {
          * 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 */
@@ -10267,11 +10300,21 @@ class Tree extends ComponentRender {
          * 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);
@@ -10282,8 +10325,16 @@ class Tree extends ComponentRender {
         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 = DatasourceFactory.factory(Object.assign(Object.assign({}, props.datasource), { searchIn: props.datasource.searchIn || [this.titleField, this.dataField].filter(Boolean), lazyLoad: true, loadAll: true }));
@@ -10291,6 +10342,12 @@ class Tree extends ComponentRender {
         }
         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;
@@ -10301,6 +10358,16 @@ class Tree extends ComponentRender {
         }
         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;
@@ -10399,16 +10466,87 @@ class Tree extends ComponentRender {
     setTree(tree) {
         this.tree = tree;
     }
-    /** Get the conditions function to be applied to each column depending on the node */
-    getConditions(conditions) {
-        const cond = 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] = 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(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({}, 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 {
+                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) {
@@ -10436,6 +10574,12 @@ class Tree extends ComponentRender {
             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) => {
@@ -10445,6 +10589,19 @@ class Tree extends ComponentRender {
             }
         });
     }
+    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;
+    }
 }
 
 /**
@@ -11182,15 +11339,23 @@ const defaultTheme = {
     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',
@@ -11208,8 +11373,6 @@ const defaultTheme = {
             'font-body4-weight': '500',
             'font-caption-size': '11px',
             'font-caption-weight': '400',
-            'badge-background-color': '#f44336',
-            'badge-text-color': '#fff',
         },
     },
 };