@zeedhi/common 1.44.0 → 1.46.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.
@@ -490,7 +495,7 @@ class ApexChart extends ComponentRender {
      * @param options New options
      */
     updateChart(options) {
-        this.options = Object.assign(Object.assign({}, this.options), options);
+        merge(this.options, options);
         if (options.series) {
             this.series = this.options.series;
         }
@@ -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.
          */
@@ -1749,7 +1757,8 @@ class Input extends ComponentRender {
      * Removes all input validation.
      */
     clearValidations() {
-        Object.keys(this.validations).forEach((name) => this.removeValidation(name));
+        this.validations = {};
+        this.rules = [];
     }
     /**
      * Updates input rules.
@@ -1792,6 +1801,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 +2815,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 +3449,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 +3799,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 +4174,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();
@@ -4962,6 +4948,9 @@ class Grid extends Iterable {
         this.toolbarSlot = [
             { name: '<<NAME>>_gridSearch', component: 'ZdSearch' },
         ];
+        this.loadingText = 'LOADING';
+        this.noDataText = 'NO_DATA';
+        this.noResultsText = 'NO_RESULT';
         /**
          * Components that will be rendered in no-data case
          */
@@ -4970,7 +4959,7 @@ class Grid extends Iterable {
                 name: '<<NAME>>_no-data',
                 component: 'ZdText',
                 cssClass: 'no-data',
-                text: 'NO_DATA',
+                text: this.noDataText,
             },
         ];
         /**
@@ -4981,7 +4970,7 @@ class Grid extends Iterable {
                 name: '<<NAME>>_no-result',
                 component: 'ZdText',
                 cssClass: 'no-result',
-                text: 'NO_RESULT',
+                text: this.noResultsText,
             },
         ];
         /**
@@ -5085,6 +5074,7 @@ class Grid extends Iterable {
         this.headerCellTextColor = this.getInitValue('headerCellTextColor', props.headerCellTextColor, this.headerCellTextColor);
         this.dragColumns = this.getInitValue('dragColumns', props.dragColumns, this.dragColumns);
         this.resizeColumns = this.getInitValue('resizeColumns', props.resizeColumns, this.resizeColumns);
+        this.loadingText = this.getInitValue('loadingText', props.loadingText, this.loadingText);
         this.toolbarSlot = props.toolbarSlot || this.toolbarSlot;
         this.footerSlot = props.footerSlot || this.footerSlot;
         this.noDataSlot = props.noDataSlot || this.noDataSlot;
@@ -5094,6 +5084,8 @@ class Grid extends Iterable {
         this.footerSlot = this.changeDefaultSlotNames(this.footerSlot);
         this.toolbarSlot = this.changeDefaultSlotNames(this.toolbarSlot);
         this.noResultSlot = this.changeDefaultSlotNames(this.noResultSlot);
+        this.noDataText = this.getInitValue('noDataText', props.noDataText, this.noDataText);
+        this.noResultsText = this.getInitValue('noResultsText', props.noResultsText, this.noResultsText);
         this.createAccessors();
     }
     onMounted(element) {
@@ -7039,6 +7031,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 +7699,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 +7787,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();
     }
@@ -8241,6 +8274,12 @@ class RangeSlider extends Input {
         this.vertical = this.getInitValue('vertical', props.vertical, this.vertical);
         this.createAccessors();
     }
+    get value() {
+        return this.rangeSliderValue === null ? undefined : this.rangeSliderValue;
+    }
+    set value(value) {
+        this.rangeSliderValue = value;
+    }
 }
 
 /**
@@ -8284,11 +8323,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() {
@@ -8464,6 +8508,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
      */
@@ -10130,8 +10189,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,21 +10319,36 @@ 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 */
         this.titleField = '';
         /** Datasource data field */
         this.dataField = '';
+        /** Datasource checked field */
+        this.checkedField = 'checked';
         /**
          * Defines if the tree will be opened or not (true/false) or if it should open only until a specific level
          */
         this.openLevelOnLoad = false;
+        /**
+         * Allow row check
+         */
+        this.checkbox = false;
         /**
          * Defines if should wait and not execute GET method when Datasource is created
          */
         this.lazyLoad = true;
-        this.nodes = props.nodes || this.nodes;
+        /**
+         * Dictionary of nodePath ponting to Dictionary of path pointing to the condition (applied) return value
+         */
+        this.appliedConditions = {};
+        /* Conditions of tree */
+        this.factoredConditions = {};
         this.itemIconName = this.getInitValue('itemIconName', props.itemIconName, this.itemIconName);
         this.groupIconName = this.getInitValue('groupIconName', props.groupIconName, this.groupIconName);
         this.openedIconName = this.getInitValue('openedIconName', props.openedIconName, this.openedIconName);
@@ -10281,25 +10358,67 @@ class Tree extends ComponentRender {
         this.parentField = this.getInitValue('parentField', props.parentField, this.parentField);
         this.titleField = this.getInitValue('titleField', props.titleField, this.titleField);
         this.dataField = this.getInitValue('dataField', props.dataField, this.dataField);
+        this.checkedField = this.getInitValue('checkedField', props.checkedField, this.checkedField);
         this.openLevelOnLoad = this.getInitValue('openLevelOnLoad', props.openLevelOnLoad, this.openLevelOnLoad);
+        this.checkbox = this.getInitValue('checkbox', props.checkbox, this.checkbox);
         this.afterTitleSlot = props.afterTitleSlot || this.afterTitleSlot;
         this.toolbarSlot = props.toolbarSlot || this.toolbarSlot;
+        this.titleSlot = props.titleSlot || this.titleSlot;
+        if (props.afterTitleSlot) {
+            this.createConditions([props.afterTitleSlot]);
+        }
+        if (props.titleSlot) {
+            this.createConditions(props.titleSlot);
+        }
         if (props.datasource && Object.keys(props.datasource).length) {
             this.lazyLoad = props.datasource.lazyLoad !== false;
             this.datasource = DatasourceFactory.factory(Object.assign(Object.assign({}, props.datasource), { searchIn: props.datasource.searchIn || [this.titleField, this.dataField].filter(Boolean), lazyLoad: true, loadAll: true }));
             this.createDataStructure();
         }
         this.createAccessors();
+        this.nodes = props.nodes || this.nodes;
+    }
+    /**
+     * Initialize all the properties of the declared nodes (reactivity)
+     */
+    initNodes(nodes, override) {
+        return nodes.map((node) => {
+            let newNode = {
+                title: '',
+                isLeaf: false,
+                isExpanded: true,
+                isSelected: false,
+                isDraggable: true,
+                isSelectable: true,
+                data: {
+                    [this.checkedField]: false,
+                },
+                children: [],
+            };
+            newNode = merge(newNode, node, override);
+            newNode.children = this.initNodes(node.children || [], override);
+            return newNode;
+        });
     }
     /** Nodes */
     get nodes() {
         return this.nodesValue;
     }
     set nodes(value) {
+        let override = {};
         if (!this.allowDragDrop) {
-            this.removeDraggable(value);
+            override = { isDraggable: false };
         }
-        this.nodesValue = value;
+        this.nodesValue = this.initNodes(value, override);
+    }
+    getCheckedNodes() {
+        const selectedNodes = [];
+        this.tree.traverse((node) => {
+            if (node.data && node.data[this.checkedField]) {
+                selectedNodes.push(node);
+            }
+        });
+        return selectedNodes;
     }
     /** Returns the selected nodes */
     get selectedNodes() {
@@ -10349,15 +10468,16 @@ class Tree extends ComponentRender {
     }
     /** Insert nodes by the current cursor position */
     insertNode(newNode) {
+        const initNode = this.initNodes([newNode])[0];
         if (this.selectedNodes.length) {
             const cursorPosition = {
                 node: this.selectedNodes[0],
                 placement: 'inside',
             };
-            this.tree.insert(cursorPosition, newNode);
+            this.tree.insert(cursorPosition, initNode);
         }
         else {
-            this.nodes.push(newNode);
+            this.nodes.push(initNode);
         }
     }
     importNodes(nodes) {
@@ -10387,28 +10507,90 @@ class Tree extends ComponentRender {
     updateNodeData(node, value) {
         this.tree.updateNode(node.path, value);
     }
-    removeDraggable(items) {
-        items.forEach((item) => {
-            var _a;
-            item.isDraggable = false;
-            if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
-                this.removeDraggable(item.children);
+    setTree(tree) {
+        this.tree = tree;
+    }
+    /**
+     * Return plain conditions object
+     * @param conditions Conditions object
+     * @param parentPath Path to parent property
+     */
+    getPlainConditions(conditions, parentPath = '') {
+        let plainData = {};
+        Object.keys(conditions).forEach((key) => {
+            const fullKey = parentPath ? [parentPath, key].join('.') : key;
+            if (typeof conditions[key] === 'object') {
+                plainData = Object.assign(Object.assign({}, plainData), this.getPlainConditions(conditions[key], fullKey));
+            }
+            else {
+                plainData[fullKey] = conditions[key];
             }
         });
+        return plainData;
     }
-    setTree(tree) {
-        this.tree = tree;
+    createConditions(children, parentPath = '') {
+        children.forEach((child) => {
+            const path = parentPath ? `${parentPath}.${child.name}` : child.name;
+            if (child.conditions) {
+                const plainConditions = this.getPlainConditions(child.conditions);
+                this.factoredConditions[path] = Event.factory(plainConditions);
+            }
+            if (child.children) {
+                this.createConditions(child.children, path);
+            }
+        });
     }
-    /** Get the conditions function to be applied to each column depending on the node */
-    getConditions(conditions) {
-        const cond = Event.factory(conditions);
-        return (node) => {
-            const appliedConditions = {};
-            Object.keys(conditions).forEach((condition) => {
-                appliedConditions[condition] = cond[condition](node);
-            });
-            return appliedConditions;
-        };
+    applyCondition(node, factoredConditions) {
+        const appliedConditions = {};
+        Object.keys(factoredConditions).forEach((condition) => {
+            const conditionFunction = factoredConditions[condition];
+            set(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 +10618,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 +10633,19 @@ class Tree extends ComponentRender {
             }
         });
     }
+    getNode(path) {
+        return this.searchPath(this.nodes, path);
+    }
+    getParentNode(node) {
+        var _a;
+        return this.tree.getNode(((_a = node.path) === null || _a === void 0 ? void 0 : _a.slice(0, -1)) || []);
+    }
+    searchPath(nodes, path) {
+        const currentNode = (path[0] > -1 && path[0] < nodes.length) ? nodes[path[0]] : undefined;
+        if (currentNode && path.length > 1)
+            return this.searchPath(currentNode.children || [], path.slice(1));
+        return currentNode;
+    }
 }
 
 /**
@@ -10632,6 +10833,7 @@ class TreeGridEditable extends TreeGrid {
             },
         };
         this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
+        this.noDataSlot = this.changeDefaultSlotNames(this.noDataSlot);
         this.createAccessors();
     }
     onMounted(element) {
@@ -11182,15 +11384,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 +11418,6 @@ const defaultTheme = {
             'font-body4-weight': '500',
             'font-caption-size': '11px',
             'font-caption-weight': '400',
-            'badge-background-color': '#f44336',
-            'badge-text-color': '#fff',
         },
     },
 };