@zeedhi/common 1.43.1 → 1.45.1

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();
@@ -4476,6 +4461,8 @@ class Column extends Component {
         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)  */
@@ -4518,6 +4505,7 @@ class Column extends Component {
         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();
@@ -7036,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.
  */
@@ -7392,6 +7415,8 @@ class Menu extends ComponentRender {
         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);
@@ -7667,9 +7692,21 @@ 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();
+    }
+    /**
+     * Event triggered when this item is focus
+     */
+    focus() {
+        if (this.parentMenu) {
+            this.parentMenu.currentItem = this;
         }
     }
     /**
@@ -7738,6 +7775,29 @@ class MenuGroup extends ComponentRender {
     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;
+        }
+    }
 }
 
 /**
@@ -7815,10 +7875,20 @@ class Modal extends Component {
          * 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();
     }
@@ -8240,11 +8310,16 @@ class SelectMultiple extends Select {
          * 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() {
@@ -8420,6 +8495,21 @@ class SelectMultiple extends Select {
     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
      */
@@ -9260,8 +9350,13 @@ class SelectTreeMultiple extends SelectTree {
          */
         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();
     }
     /**
@@ -10081,8 +10176,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;
         }
     }
@@ -10208,6 +10306,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 */
@@ -10218,11 +10320,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);
@@ -10233,8 +10345,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 }));
@@ -10242,6 +10362,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;
@@ -10252,6 +10378,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;
@@ -10350,16 +10486,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) {
@@ -10387,6 +10594,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) => {
@@ -10396,6 +10609,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;
+    }
 }
 
 /**
@@ -11035,7 +11261,7 @@ Icons.mdiIcons = {
     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',
@@ -11133,15 +11359,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',
@@ -11159,8 +11393,6 @@ const defaultTheme = {
             'font-body4-weight': '500',
             'font-caption-size': '11px',
             'font-caption-weight': '400',
-            'badge-background-color': '#f44336',
-            'badge-text-color': '#fff',
         },
     },
 };
@@ -11415,6 +11647,7 @@ class BaseReport {
                 sequence: index,
                 format: this.getFormatOfColumn(col),
                 size: `${size}%`,
+                xlsType: col.xlsType,
             };
             return Object.assign(Object.assign({}, result), { [col.name]: row });
         }, {});