@zeedhi/common 1.52.0 → 1.55.0

package/dist/zd-common.esm.js

@@ -2908,8 +2908,6 @@ class Dashboard extends ComponentRender {
         this.moveMode = false;
         /* Cards */
         this.cards = [];
-        /* Card ID to be deleted */
-        this.deleteCardId = '';
         this.overrideNamedProps = {};
         /* Remove the paddings of the dashboard */
         this.removePadding = false;
@@ -3002,7 +3000,9 @@ class Dashboard extends ComponentRender {
             persistent: true,
             title: 'EDIT_CARD',
             grid: {
-                md: 4,
+                cols: 10,
+                sm: 8,
+                lg: 6,
             },
             children: [
                 {
@@ -3024,7 +3024,12 @@ class Dashboard extends ComponentRender {
                             minValue: 1,
                             clearable: false,
                             hint: 'Min: 1, Max: 12',
-                            cssStyle: 'width: 100px',
+                            grid: {
+                                cols: 6,
+                                sm: 6,
+                                md: 4,
+                                lg: 3,
+                            },
                             mask: {
                                 decimalPlaces: 0,
                             },
@@ -3033,19 +3038,33 @@ class Dashboard extends ComponentRender {
                             name: 'inputHeight',
                             component: 'ZdTextInput',
                             label: 'HEIGHT',
-                            cssStyle: 'width: 80px',
+                            grid: {
+                                cols: 6,
+                                sm: 6,
+                                md: 4,
+                                lg: 3,
+                            },
                         },
                         {
                             name: 'inputPath',
                             component: 'ZdTextInput',
                             label: 'PATH',
-                            cssStyle: 'width: 250px',
+                            grid: {
+                                cols: 7,
+                                sm: 7,
+                                md: 9,
+                            },
                         },
                         {
                             name: 'inputLocal',
                             component: 'ZdSwitch',
                             label: 'PATH_LOCAL',
                             cssClass: 'zd-mt-4',
+                            grid: {
+                                cols: 5,
+                                sm: 5,
+                                md: 3,
+                            },
                         },
                     ],
                 },
@@ -3080,40 +3099,30 @@ class Dashboard extends ComponentRender {
         /* Edit header */
         this.headerLeftSlot = [
             {
-                name: `tooltipAddCard${this.name}`,
-                component: 'ZdTooltip',
-                bottom: true,
+                name: `addDashboard${this.name}`,
+                component: 'ZdButton',
                 label: 'ADD',
-                children: [
-                    {
-                        name: `addDashboard${this.name}`,
-                        component: 'ZdButton',
-                        icon: true,
-                        iconName: 'plus',
-                        color: 'white',
-                        events: {
-                            click: this.openModalAddCard.bind(this),
-                        },
-                    },
-                ],
+                iconName: 'plus',
+                color: 'white',
+                small: true,
+                cssClass: 'zd-my-2',
+                outline: true,
+                events: {
+                    click: this.openModalAddCard.bind(this),
+                },
             },
             {
-                name: `tooltipSaveCard${this.name}`,
-                component: 'ZdTooltip',
-                bottom: true,
+                name: `saveDashboard${this.name}`,
+                component: 'ZdButton',
                 label: 'SAVE',
-                children: [
-                    {
-                        name: `saveDashboard${this.name}`,
-                        component: 'ZdButton',
-                        icon: true,
-                        iconName: 'complete',
-                        color: 'white',
-                        events: {
-                            click: this.onSave.bind(this),
-                        },
-                    },
-                ],
+                iconName: 'complete',
+                color: 'white',
+                small: true,
+                cssClass: 'zd-my-2',
+                outline: true,
+                events: {
+                    click: this.onSave.bind(this),
+                },
             },
         ];
         this.editingMode = this.getInitValue('editingMode', props.editingMode, this.editingMode);
@@ -3123,6 +3132,7 @@ class Dashboard extends ComponentRender {
         this.removePadding = this.getInitValue('removePadding', props.removePadding, this.removePadding);
         this.height = this.getInitValue('height', props.height, this.height);
         this.heightAdjust = this.getInitValue('heightAdjust', props.heightAdjust, this.heightAdjust);
+        this.cardFooterSlot = this.getInitValue('cardFooterSlot', props.cardFooterSlot, this.cardFooterSlot);
         this.createAccessors();
     }
     onMounted(element) {
@@ -3152,17 +3162,19 @@ class Dashboard extends ComponentRender {
         }
     }
     /* Delete a card */
-    deleteCard() {
+    deleteCard(cardId) {
         this.cards.forEach((card, index) => {
-            if (this.deleteCardId === card.cardId) {
+            if (cardId === card.cardId) {
                 this.cards.splice(index, 1);
             }
         });
+    }
+    deleteAndCloseDialog(cardId) {
+        this.deleteCard(cardId);
         DialogService.hide();
     }
     /* Show delete card dialog */
     showDeleteCardDialog(cardId) {
-        this.deleteCardId = cardId;
         this.hideDialog();
         DialogService.show({
             name: `${this.name}-delete-dialog`,
@@ -3184,7 +3196,7 @@ class Dashboard extends ComponentRender {
                     component: 'ZdButton',
                     label: 'YES',
                     events: {
-                        click: this.deleteCard.bind(this),
+                        click: this.deleteAndCloseDialog.bind(this, cardId),
                     },
                 },
             ],
@@ -3256,6 +3268,8 @@ class Dashboard extends ComponentRender {
     }
     /* Return footer rightSlot props for view layer */
     getFooterRightSlot(cardId) {
+        if (this.cardFooterSlot)
+            return this.cardFooterSlot;
         const rightSlot = [
             {
                 name: `tooltipDelete${cardId}`,
@@ -3299,6 +3313,9 @@ class Dashboard extends ComponentRender {
     getCardId() {
         return Math.random().toString(36).substr(2, 9);
     }
+    selectCard(cardId) {
+        this.currentCardId = cardId;
+    }
 }
 
 /**
@@ -3395,9 +3412,6 @@ class Date$1 extends TextInput {
         this.pickerType = this.getInitValue('pickerType', props.pickerType, this.pickerType);
         this.helperOptions = this.getInitValue('helperOptions', props.helperOptions, this.helperOptions);
         this.helperValue = this.getInitValue('helperValue', props.helperValue, this.helperValue);
-        if (this.pickerType === 'month') {
-            this.isoFormat = 'YYYY-MM';
-        }
         this.width = this.getInitValue('width', props.width, this.width);
         this.mask = this.getInitValue('mask', props.mask, undefined);
         this.createAccessors();
@@ -5203,6 +5217,7 @@ class Grid extends Iterable {
          * @public
          */
         this.resizeColumns = false;
+        this.showSelectAll = true;
         this.navigationKeyMapping = {
             up: {
                 event: this.navigateUp.bind(this),
@@ -5252,6 +5267,8 @@ class Grid extends Iterable {
         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.disableSelection = this.getInitValue('disableSelection', props.disableSelection, this.disableSelection);
+        this.showSelectAll = this.getInitValue('showSelectAll', props.showSelectAll, this.showSelectAll);
         this.createAccessors();
     }
     onMounted(element) {
@@ -5441,6 +5458,10 @@ class Grid extends Iterable {
         });
         return slot;
     }
+    callDisableSelection(row) {
+        return !!this.disableSelection && typeof this.disableSelection === 'function'
+            && this.disableSelection({ row, component: this });
+    }
 }
 
 /**
@@ -5518,6 +5539,7 @@ class GridEditable extends Grid {
         };
         this.newRowIdentifier = '__added_row';
         this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
+        this.canEditRow = this.getInitValue('canEditRow', props.canEditRow, this.canEditRow);
         this.createAccessors();
     }
     onMounted(element) {
@@ -5570,10 +5592,10 @@ class GridEditable extends Grid {
      * @param event DOM event
      * @param element DOM Element
      */
-    cellClick(row, column, event, element) {
+    cellClick(row, column, event, element, canEdit = true) {
         if (this.editing)
             return;
-        if (column.editable) {
+        if (column.editable && canEdit) {
             this.editing = true;
             this.preventRowClick = true;
             this.datasource.currentRow = row;
@@ -5922,6 +5944,9 @@ class GridEditable extends Grid {
             throw e;
         }
     }
+    callCanEditRow(row) {
+        return !this.canEditRow || typeof this.canEditRow !== 'function' || this.canEditRow({ row, component: this });
+    }
 }
 
 /**
@@ -8158,6 +8183,7 @@ class Month extends Date$1 {
          * Defines the month input format.
          */
         this.inputFormat = Config.monthInputFormat;
+        this.isoFormat = 'YYYY-MM';
         /**
          * Determines the type of the picker - month for month picker.
          */
@@ -8167,19 +8193,11 @@ class Month extends Date$1 {
         this.dateFormat = this.getInitValue('dateFormat', props.dateFormat, this.dateFormat);
         this.displayFormat = this.getInitValue('displayFormat', props.displayFormat, this.displayFormat);
         this.inputFormat = this.getInitValue('inputFormat', props.inputFormat, this.inputFormat);
+        this.pickerType = this.getInitValue('pickerType', undefined, this.pickerType);
         this.createAccessors();
     }
-    maskFormat(format) {
-        const monthIndex = format.indexOf('MMM');
-        const replaced = format.replace(/[A-Za-z]/gi, '#');
-        if (monthIndex === -1)
-            return replaced;
-        const arrFormat = replaced.split('');
-        arrFormat.splice(monthIndex, 3, ...'CCC');
-        return arrFormat.join('');
-    }
 }
-FormatterParserProvider.registerFormatter('ZdMonth', (value, { dateFormat = Config.monthFormat, displayFormat = Config.monthDisplayFormat, inputFormat = Config.monthInputFormat, mask = '', initialMask, } = {}) => {
+FormatterParserProvider.registerFormatter('ZdMonth', (value, { dateFormat = Config.monthFormat, displayFormat = Config.monthDisplayFormat, inputFormat = Config.monthInputFormat, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
     if (!value) {
         return '';
     }
@@ -8191,14 +8209,17 @@ FormatterParserProvider.registerFormatter('ZdMonth', (value, { dateFormat = Conf
         if (inputFormat) {
             return dayjs(value, dateFormat).format(inputFormat);
         }
-        const valueToUnmask = value;
+        let valueToUnmask = value;
+        if (isSimpleDisplay) {
+            valueToUnmask = dayjs(value, dateFormat).format(displayFormat);
+        }
         const unmasked = Mask.getValueWithoutMask(valueToUnmask);
         const masked = Mask.getValueWithMask(unmasked, mask);
         return masked;
     }
     return dayjs(value, dateFormat).format(displayFormat);
 });
-FormatterParserProvider.registerParser('ZdMonth', (value, { dateFormat = Config.monthFormat, displayFormat = Config.monthDisplayFormat, inputFormat = Config.monthInputFormat, mask = '', maskFormat, } = {}) => {
+FormatterParserProvider.registerParser('ZdMonth', (value, { dateFormat = Config.monthFormat, displayFormat = Config.monthDisplayFormat, inputFormat = Config.monthInputFormat, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
     if (!value) {
         return null;
     }
@@ -8214,12 +8235,14 @@ FormatterParserProvider.registerParser('ZdMonth', (value, { dateFormat = Config.
         }
         const unmasked = Mask.getValueWithoutMask(value);
         let masked;
-        const displayFmtMask = maskFormat(displayFormat);
-        masked = Mask.getValueWithMask(unmasked, displayFmtMask);
-        if (dayjs(masked, displayFormat, true).format(displayFormat) === masked) {
-            return dayjs(masked, displayFormat).format(dateFormat);
+        if (!initialMask || isSimpleDisplay) {
+            const displayFmtMask = displayFormat.replace(/[A-Za-z]/gi, '#');
+            masked = Mask.getValueWithMask(unmasked, displayFmtMask);
+            if (dayjs(masked, displayFormat, true).format(displayFormat) === masked) {
+                return dayjs(masked, displayFormat).format(dateFormat);
+            }
         }
-        const dateFmtMask = maskFormat(dateFormat);
+        const dateFmtMask = dateFormat.replace(/[A-Za-z]/gi, '#');
         masked = Mask.getValueWithMask(unmasked, dateFmtMask);
         if (dayjs(masked, dateFormat, true).format(dateFormat) === masked) {
             return masked;
@@ -10229,7 +10252,7 @@ class Time extends TextInput {
         /**
          * Defines the format of a time displayed in picker. Available options are ampm and 24hr.
          */
-        this.timeFormat = Config.timeFormat || 'ampm';
+        this.timeFormat = Config.timeFormat || 'ampm'; // change props to pickerFormat
         /**
          * Forces 100% width.
          */
@@ -10260,29 +10283,18 @@ class Time extends TextInput {
         this.width = 290;
         this.formatterFn = FormatterParserProvider.getFormatter('ZdTime');
         this.parserFn = FormatterParserProvider.getParser('ZdTime');
+        this.isoFormatValue = 'HH:mm';
+        this.valueFormatInternal = Config.valueTimeFormat;
+        this.displayFormatInternal = Config.displayTimeFormat;
         /**
-         * Map of the mask functions
-         */
-        this.maskFunctions = {
-            ampm: () => this.ampmMask(),
-            '24hr': (value) => this.fullTimeMask(value),
-        };
-        /**
-         * Format used in time value
+         * Defines the time input format.
          */
-        this.valueFormat = Config.valueTimeFormat;
-        /**
-         * Format used to display the value
-         */
-        this.displayFormat = Config.displayTimeFormat;
+        this.inputFormat = Config.timeInputFormat;
         /**
          * True when displayValue is valid
          */
         this.isDisplayValid = true;
-        /**
-         * Last invalid value passed to formatter
-         */
-        this.lastInvalid = '';
+        this.timeError = false;
         this.allowedHours = this.getInitValue('allowedHours', props.allowedHours, this.allowedHours);
         this.allowedMinutes = this.getInitValue('allowedMinutes', props.allowedMinutes, this.allowedMinutes);
         this.allowedSeconds = this.getInitValue('allowedSeconds', props.allowedSeconds, this.allowedSeconds);
@@ -10296,40 +10308,40 @@ class Time extends TextInput {
         this.useSeconds = this.getInitValue('useSeconds', props.useSeconds, this.useSeconds);
         this.width = this.getInitValue('width', props.width, this.width);
         this.autofill = this.getInitValue('autofill', props.autofill, this.autofill);
-        this.mask = this.getInitValue('mask', props.mask, this.getMask);
         this.timeValidation = this.timeValidation.bind(this);
+        this.valueFormat = this.getInitValue('valueFormat', props.valueFormat, this.valueFormatInternal);
+        this.displayFormat = this.getInitValue('displayFormat', props.displayFormat, this.displayFormatInternal);
+        this.inputFormat = this.getInitValue('inputFormat', props.inputFormat, this.inputFormat);
         this.timeAllowedValidation = this.timeAllowedValidation.bind(this);
         this.rules.push(this.timeValidation, this.timeAllowedValidation);
-        this.valueFormat = this.getInitValue('valueFormat', props.valueFormat, this.valueFormat);
-        this.displayFormat = this.getInitValue('displayFormat', props.displayFormat, this.displayFormat);
+        this.mask = this.getInitValue('mask', props.mask, undefined);
         this.createAccessors();
-        this.createFormatAccessors();
-    }
-    createFormatAccessors() {
-        if (!this.valueFormat) {
-            Object.defineProperty(this, 'valueFormat', {
-                get: () => this.defaultValueFmt,
-                set: (valueFormat) => {
-                    delete this.valueFormat;
-                    this.valueFormat = valueFormat;
-                },
-            });
+        this.initialMask = this.getInitialMask();
+        this.isSimpleDisplay = this.isSimpleFormat(this.displayFormat);
+    }
+    get displayFormat() {
+        const commonsDisplay = ['hh:mm A', 'hh:mm:ss A', 'HH:mm:ss', 'HH:mm'];
+        if (commonsDisplay.includes(this.displayFormatInternal)) {
+            this.displayFormatInternal = this.defaultFormats[this.timeFormat];
         }
-        if (!this.displayFormat) {
-            Object.defineProperty(this, 'displayFormat', {
-                get: () => this.defaultDisplayFmt,
-                set: (displayFormat) => {
-                    delete this.displayFormat;
-                    this.displayFormat = displayFormat;
-                },
-            });
+        return this.displayFormatInternal;
+    }
+    set displayFormat(value) {
+        this.displayFormatInternal = value;
+    }
+    get valueFormat() {
+        const commonsDisplay = ['hh:mm A', 'hh:mm:ss A', 'HH:mm:ss', 'HH:mm'];
+        if (commonsDisplay.includes(this.valueFormatInternal)) {
+            this.valueFormatInternal = this.defaultFormats['24hr'];
         }
+        return this.valueFormatInternal;
     }
-    get defaultValueFmt() {
-        return this.defaultFormats['24hr'];
+    set valueFormat(value) {
+        this.valueFormatInternal = value;
     }
-    get defaultDisplayFmt() {
-        return this.defaultFormats[this.timeFormat];
+    get isoFormat() {
+        this.isoFormatValue = this.useSeconds ? 'HH:mm:ss' : 'HH:mm';
+        return this.isoFormatValue;
     }
     get defaultFormats() {
         const seconds = this.useSeconds ? ':ss' : '';
@@ -10338,59 +10350,172 @@ class Time extends TextInput {
             '24hr': `HH:mm${seconds}`,
         };
     }
-    ampmMask() {
-        const ampmValue = this.displayValue || '';
-        const hours = [/[0-1]/];
-        if (ampmValue[0] === '1') {
-            hours.push(/[0-2]/);
+    getInitialMask() {
+        if (isUndefined(this.mask)) {
+            this.mask = this.inputFormat && this.maskFormat(this.inputFormat);
+        }
+        return this.mask;
+    }
+    formatter(value) { return this.formatterFn(value, this); }
+    parser(value) { return this.parserFn(value, this); }
+    /**
+     * Triggered when date is clicked.
+     * @param event
+     * @param element
+     */
+    selectTime(time, event, element) {
+        if (this.events.onSelectTime && typeof this.events.onSelectTime === 'function') {
+            this.events.onSelectTime({
+                time, event, element, component: this,
+            });
+        }
+    }
+    get displayValue() {
+        return this.internalDisplayValue;
+    }
+    set displayValue(newValue) {
+        this.timeError = false;
+        this.internalDisplayValue = newValue;
+        this.internalValue = this.parser(newValue);
+        this.value = this.internalValue; // forces value accessor to be called if necessary
+    }
+    /**
+     * Assign the updated mask to mask property
+     */
+    updateMask() {
+        this.isSimpleDisplay = this.isSimpleFormat(this.displayFormat);
+        this.mask = this.getUpdatedMask();
+        return this.mask;
+    }
+    /**
+     * Gets the updated masked, based on displayFormat if the initial mask is undefined
+     */
+    getUpdatedMask() {
+        if (isUndefined(this.initialMask)) {
+            return this.maskFormat(this.displayFormat);
         }
-        else if (ampmValue[0] === '0') {
-            hours.push(/[1-9]/);
+        return this.mask;
+    }
+    maskFormat(format) {
+        return format.replace(/[A-Za-z]/gi, '#');
+    }
+    setTimeValue(displayValue) {
+        const lastValue = this.displayValue;
+        if (this.isValidTime(displayValue, this.displayFormat)) {
+            this.internalDisplayValue = displayValue;
+            this.internalValue = this.parser(displayValue);
+            this.timeError = false;
+            if (lastValue !== this.displayValue)
+                this.change(this.value);
         }
         else {
-            hours.push(/[0-9]/);
+            if (!displayValue) {
+                this.internalDisplayValue = displayValue;
+                this.internalValue = null;
+                if (lastValue !== this.displayValue)
+                    this.change(this.value);
+            }
+            this.timeError = !!displayValue;
         }
-        const minutes = [/[0-5]/, /[0-9]/];
-        const seconds = this.useSeconds ? [':', ...minutes] : [];
-        const ampm = /(A|P)/;
-        return [...hours, ':', ...minutes, ...seconds, ' ', ampm, 'M'];
+        this.value = this.internalValue; // forces value accessor to be called if necessary
     }
-    fullTimeMask(value) {
-        const hours = [
-            /[0-2]/,
-            value[0] === '2' ? /[0-3]/ : /[0-9]/,
-        ];
-        const minutes = [/[0-5]/, /[0-9]/];
-        const seconds = this.useSeconds ? [':', ...minutes] : [];
-        return [...hours, ':', ...minutes, ...seconds];
+    isValidTime(value, format, strict = true) {
+        return dayjs(value, format, strict).isValid();
+    }
+    get isoValue() {
+        return this.formatISOTimeValue(this.value);
+    }
+    set isoValue(newValue) {
+        const lastValue = this.value;
+        this.timeError = false;
+        this.value = this.parseISOTimeValue(newValue);
+        if (lastValue !== this.value)
+            this.change(this.value);
     }
-    getMask(value) {
-        return this.maskFunctions[this.timeFormat](value);
+    formatISOTimeValue(value) {
+        if (value && this.isValidTime(value, this.valueFormat)) {
+            return dayjs(value, this.valueFormat).format(this.isoFormat);
+        }
+        return '';
+    }
+    parseISOTimeValue(value) {
+        if (value && this.isValidTime(value, this.valueFormat)) {
+            return dayjs(value, this.isoFormat).format(this.valueFormat);
+        }
+        return null;
     }
     /**
-     * Checks if value is valid according to valueFormat and if displayValue
-     * is true
-     */
-    isFullyValid(value = this.value) {
-        return this.isValidTime(value) && this.isDisplayValid;
+   * Checks if a time format is simple.
+   * Simple time formats are the ones that consists only of 'HH', 'mm', 'mm' or 'YYYY', and mask delimiters
+   * @param format The format to be checked
+   * @returns true if it is simple, false otherwise
+   */
+    isSimpleFormat(format) {
+        const simpleTokens = ['HH', 'mm', 'ss', 'hh', 'A', 'a', 'p', 'P'];
+        // remove the simple tokens from the string
+        const replaced = simpleTokens.reduce((result, token) => result.replace(token, ''), format);
+        const chars = replaced.split('');
+        return chars.length ? chars.every((char) => Mask.isMaskDelimiter(char)) : true;
     }
-    formatter(value) {
-        const eq = this.lastInvalid === value;
-        if (eq || !this.isFullyValid(value)) {
-            this.isDisplayValid = true;
-            this.lastInvalid = value;
-            return value;
+    timeValidation() {
+        if (this.isValidTime(this.displayValue, this.displayFormat) || !this.displayValue) {
+            return true;
+        }
+        return I18n.translate('VALIDATION_INVALID_TIME');
+    }
+    timeAllowedValidation() {
+        return !this.displayValue
+            || (this.isValidTime(this.displayValue, this.displayFormat)
+                && this.isTimeAllowed())
+            || I18n.translate('VALIDATION_TIME_NOT_ALLOWED');
+    }
+    click(event, element) {
+        const clickEvent = event || new MouseEvent('click');
+        super.click(clickEvent, element);
+        if (!clickEvent.defaultPrevented) {
+            this.showTimePicker = !this.showTimePicker;
         }
-        return this.formatterFn(value, this);
     }
-    parser(value) {
-        const parsed = this.parserFn(value, this);
-        this.isDisplayValid = value === null || value === '' || this.isValidTime(value, this.displayFormat);
-        return parsed;
+    blur(event, element) {
+        this.removeTimeMask();
+        this.setTimeValue(this.formatter(this.value));
+        super.blur(event, element);
+        this.showTimePicker = false;
     }
-    isValidTime(value, format = this.valueFormat) {
-        return dayjs(value, format, true).isValid();
+    focus(event, element) {
+        this.addTimeMask();
+        super.focus(event, element);
+    }
+    /**
+     * Add date mask
+     */
+    addTimeMask() {
+        if (!this.value)
+            return;
+        this.mask = this.initialMask;
+        this.internalDisplayValue = dayjs(this.value, this.valueFormat).format(this.inputFormat || this.displayFormat);
     }
+    /**
+     * Removes the component mask if value is valid
+     */
+    removeTimeMask() {
+        if (isUndefined(this.initialMask) || !this.value || this.timeError
+            || !this.isValidTime(this.value, this.valueFormat)) {
+            return;
+        }
+        this.mask = '';
+    }
+    /**
+     * Checks if value is valid according to valueFormat and if displayValue
+     * is true
+     */
+    isFullyValid(value = this.value) {
+        return this.isValidTime(value, this.valueFormat, true) && this.isDisplayValid;
+    }
+    /**
+     * Last invalid value passed to formatter
+     */
+    // private lastInvalid: string = '';
     isTimeAllowed(value = this.value) {
         return this.isSameOrAfterMin(value) && this.isSameOrBeforeMax(value)
             && this.isHourAllowed(value) && this.isMinuteAllowed(value)
@@ -10426,49 +10551,54 @@ class Time extends TextInput {
         const second = dayjs(value, this.valueFormat).second();
         return this.allowedSeconds.includes(second);
     }
-    timeValidation() {
-        return !this.displayValue
-            || this.isValidTime(this.displayValue, this.displayFormat)
-            || I18n.translate('VALIDATION_INVALID_TIME');
-    }
-    timeAllowedValidation() {
-        return !this.displayValue
-            || (this.isValidTime(this.displayValue, this.displayFormat)
-                && this.isTimeAllowed())
-            || I18n.translate('VALIDATION_TIME_NOT_ALLOWED');
-    }
-    click(event) {
-        this.callEvent('click', {
-            event: (event || new MouseEvent('click')),
-            component: this,
-        });
-        if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
-            this.showTimePicker = !this.showTimePicker;
-        }
-    }
     clear() {
         this.value = null;
         this.change(this.value);
     }
 }
-FormatterParserProvider.registerFormatter('ZdTime', (value, { displayFormat = Config.displayFormat, valueFormat = Config.valueTimeFormat, } = {}) => {
+FormatterParserProvider.registerFormatter('ZdTime', (value, { valueFormat = Config.valueTimeFormat, displayFormat = Config.displayTimeFormat, inputFormat = Config.timeInputFormat, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
     if (!value) {
         return '';
     }
-    if (dayjs(value, valueFormat, true).isValid()) {
-        return dayjs(value, valueFormat).format(displayFormat);
+    const isTimeValid = dayjs(value, valueFormat, true).isValid();
+    if (!isTimeValid) {
+        return value;
     }
-    return value;
+    if (mask && initialMask) {
+        if (inputFormat) {
+            return dayjs(value, valueFormat).format(inputFormat);
+        }
+        let valueToUnmask = value;
+        if (isSimpleDisplay) {
+            valueToUnmask = dayjs(value, valueFormat).format(displayFormat);
+        }
+        const unmasked = Mask.getValueWithoutMask(valueToUnmask);
+        const masked = Mask.getValueWithMask(unmasked, mask);
+        return masked;
+    }
+    return dayjs(value, valueFormat).format(displayFormat);
 });
-FormatterParserProvider.registerParser('ZdTime', (value, { displayFormat = Config.displayFormat, valueFormat = Config.valueTimeFormat, } = {}) => {
+FormatterParserProvider.registerParser('ZdTime', (value, { displayFormat = Config.displayTimeFormat, valueFormat = Config.valueTimeFormat, mask = '', initialMask, } = {}) => {
     if (!value) {
         return null;
     }
-    const uppecaseValue = value.toUpperCase();
-    if (dayjs(uppecaseValue, displayFormat, true).isValid()) {
-        return dayjs(uppecaseValue, displayFormat).format(valueFormat);
+    if (dayjs(value, displayFormat, true).isValid()) {
+        return dayjs(value, displayFormat).format(valueFormat);
+    }
+    if (mask && Mask.checkMask(value, mask)) {
+        const unmasked = Mask.getValueWithoutMask(value);
+        let masked;
+        if (!initialMask) {
+            const displayFmtMask = displayFormat.replace(/[A-Za-z]/gi, '#');
+            masked = Mask.getValueWithMask(unmasked, displayFmtMask);
+        }
+        const timeFmtMask = valueFormat.replace(/[A-Za-z]/gi, '#');
+        masked = Mask.getValueWithMask(unmasked, timeFmtMask);
+        if (dayjs(masked, valueFormat, true).format(valueFormat) === masked) {
+            return masked;
+        }
     }
-    return uppecaseValue;
+    return value;
 });
 
 /**
@@ -10610,6 +10740,7 @@ class Tree extends ComponentRender {
         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.disableCheckbox = this.getInitValue('disableCheckbox', props.disableCheckbox, this.disableCheckbox);
         this.afterTitleSlot = props.afterTitleSlot || this.afterTitleSlot;
         this.toolbarSlot = props.toolbarSlot || this.toolbarSlot;
         this.titleSlot = props.titleSlot || this.titleSlot;
@@ -10845,16 +10976,13 @@ class Tree extends ComponentRender {
             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 newInstances = Metadata.getInstances(instanceName);
+            const newInstance = newInstances[0];
+            const appliedConditions = (_a = this.appliedConditions[nodePath]) === null || _a === void 0 ? void 0 : _a[path];
+            const newComponent = merge({}, component, newInstance, appliedConditions);
             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;
@@ -10916,6 +11044,10 @@ class Tree extends ComponentRender {
             return this.searchPath(currentNode.children || [], path.slice(1));
         return currentNode;
     }
+    callDisableCheckbox(node) {
+        return !!this.disableCheckbox && typeof this.disableCheckbox === 'function'
+            && this.disableCheckbox({ node, component: this });
+    }
 }
 
 /**
@@ -11062,6 +11194,8 @@ class TreeGrid extends Grid {
         const rows = [row, ...this.treeDataStructure.getChildren(row)];
         if (isSelected) {
             this.selectedRows = Array.from(new Set(this.selectedRows.concat(rows))); // remove duplicates
+            // check if all the children of the parent are selected.
+            this.selectParents(rows, row);
         }
         else {
             rows.forEach((item) => {
@@ -11069,6 +11203,31 @@ class TreeGrid extends Grid {
                 if (index > -1)
                     this.selectedRows.splice(index, 1);
             });
+            this.unselectParents(row);
+        }
+    }
+    selectParents(rows, row) {
+        if (row[this.parentField]) {
+            const parentRow = this.treeDataStructure.getRowData(row).tree__parent;
+            const every = this.treeDataStructure.getChildren(parentRow).every((item) => {
+                const index = this.treeDataStructure.findDataIndex(this.selectedRows, item[this.datasource.uniqueKey]);
+                if (index > -1)
+                    return true;
+                return false;
+            });
+            if (every)
+                rows.push(parentRow);
+            this.selectedRows = Array.from(new Set(this.selectedRows.concat(rows))); // remove duplicates
+            this.selectParents(rows, parentRow);
+        }
+    }
+    unselectParents(row) {
+        if (row[this.parentField]) {
+            const index = this.treeDataStructure.findDataIndex(this.selectedRows, row[this.parentField]);
+            if (index > -1)
+                this.selectedRows.splice(index, 1);
+            const parentRow = this.treeDataStructure.getRowData(row).tree__parent;
+            this.unselectParents(parentRow);
         }
     }
 }
@@ -11103,6 +11262,7 @@ class TreeGridEditable extends TreeGrid {
             },
         };
         this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
+        this.canEditRow = this.getInitValue('canEditRow', props.canEditRow, this.canEditRow);
         this.noDataSlot = this.changeDefaultSlotNames(this.noDataSlot);
         this.createAccessors();
     }
@@ -11156,10 +11316,10 @@ class TreeGridEditable extends TreeGrid {
      * @param event DOM event
      * @param element DOM Element
      */
-    cellClick(row, column, event, element) {
+    cellClick(row, column, event, element, canEdit = true) {
         if (this.editing)
             return;
-        if (column.editable) {
+        if (column.editable && canEdit) {
             this.editing = true;
             this.preventRowClick = true;
             this.datasource.currentRow = row;
@@ -11476,6 +11636,9 @@ class TreeGridEditable extends TreeGrid {
             throw e;
         }
     }
+    callCanEditRow(row) {
+        return !this.canEditRow || typeof this.canEditRow !== 'function' || this.canEditRow({ row, component: this });
+    }
 }
 
 class Icons {
@@ -11919,9 +12082,9 @@ class BaseReport {
         };
         this.colunmXLS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
     }
-    buildColumns(columns) {
+    getColumnsWidth(columns) {
         const widths = {};
-        let totalWidth;
+        let totalWidth = 0;
         try {
             totalWidth = columns.reduce((sum, col) => {
                 widths[col.name] = col.getWidth();
@@ -11933,6 +12096,10 @@ class BaseReport {
                 throw e;
             }
         }
+        return { widths, totalWidth };
+    }
+    buildColumns(columns) {
+        const { widths, totalWidth } = this.getColumnsWidth(columns);
         return columns.reduce((result, col, index) => {
             let size;
             if (!totalWidth) {
@@ -11945,63 +12112,20 @@ class BaseReport {
                 align: col.align || 'left',
                 description: col.label,
                 sequence: index,
-                format: this.getFormatOfColumn(col),
                 size: `${size}%`,
                 xlsType: col.xlsType,
             };
             return Object.assign(Object.assign({}, result), { [col.name]: row });
         }, {});
     }
-    isNumberComponent(component) {
-        return ['ZdNumber', 'ZdCurrency', 'ZdIncrement'].indexOf(component) !== -1;
-    }
-    checkAccessor(value) {
-        if (Accessor.isAccessorDefinition(value)) {
-            const [controller, accessor] = Accessor.getAccessor(value);
-            return Loader.getInstance(controller)[accessor];
-        }
-        return value;
-    }
-    getFormatOfColumn(column) {
-        let format;
-        let { mask } = column;
-        if (mask) {
-            format = {
-                type: 'fix',
-                params: {
-                    mask,
-                },
-            };
-        }
-        else if (column.componentProps && Object.keys(column.componentProps).length) {
-            const { component } = column.componentProps;
-            if (this.isNumberComponent(component)) {
-                format = { type: 'float' };
-                mask = this.checkAccessor(column.componentProps.mask);
-                if (mask) {
-                    format.params = {};
-                    if (mask.currencySymbol) {
-                        format.type = 'currency';
-                        format.symbol = mask.currencySymbol;
-                        format.decimal = mask.decimalCharacter;
-                        format.thousands = mask.digitGroupSeparator;
-                        format.precision = mask.decimalPlaces;
-                    }
-                    else {
-                        format.params.decimal = mask.decimalCharacter;
-                        format.params.thousands = mask.digitGroupSeparator;
-                        format.params.precision = mask.decimalPlaces;
-                    }
-                }
-            }
-        }
-        return format;
-    }
-    buildFilter(filter) {
-        return Object.keys(filter).map((key) => ({
-            label: key,
-            value: I18n.translate('IS_EQUAL', { value: filter[key] }),
-        }));
+    buildFilter(filter, columns) {
+        return Object.keys(filter).map((key) => {
+            var _a;
+            return ({
+                label: ((_a = columns.find((col) => col.name === key)) === null || _a === void 0 ? void 0 : _a.label) || key,
+                value: I18n.translate('IS_EQUAL', { value: filter[key] }),
+            });
+        });
     }
     formatLangCode(lang) {
         if (!lang) {
@@ -12026,7 +12150,7 @@ class CSVReport extends BaseReport {
     }
     buildMetadata(name, title, columns, filter) {
         const builtCols = this.buildColumns(columns);
-        const builtFilters = this.buildFilter(filter || {});
+        const builtFilters = this.buildFilter(filter || {}, columns);
         const lang = this.formatLangCode(I18n.instance.language);
         const clientLogo = '';
         const enterpriseLogo = '';
@@ -12064,10 +12188,76 @@ class PDFReport extends BaseReport {
     buildDataset(data) {
         return JSON.stringify(data);
     }
+    buildColumns(columns) {
+        const { widths, totalWidth } = this.getColumnsWidth(columns);
+        return columns.reduce((result, col, index) => {
+            let size;
+            if (!totalWidth) {
+                size = Math.floor(100 / columns.length);
+            }
+            else {
+                size = Math.floor((widths[col.name] * 100) / totalWidth);
+            }
+            const row = {
+                align: col.align || 'left',
+                description: col.label,
+                sequence: index,
+                format: this.getFormatOfColumn(col),
+                size: `${size}%`,
+                xlsType: col.xlsType,
+            };
+            return Object.assign(Object.assign({}, result), { [col.name]: row });
+        }, {});
+    }
+    getFormatOfColumn(column) {
+        let format;
+        let { mask } = column;
+        if (mask) {
+            format = {
+                type: 'fix',
+                params: {
+                    mask,
+                },
+            };
+        }
+        else if (column.componentProps && Object.keys(column.componentProps).length) {
+            const { component } = column.componentProps;
+            if (this.isNumberComponent(component)) {
+                format = { type: 'float' };
+                mask = this.checkAccessor(column.componentProps.mask);
+                if (mask) {
+                    format.params = {};
+                    if (mask.currencySymbol) {
+                        format.type = 'currency';
+                        format.symbol = mask.currencySymbol;
+                        format.decimal = mask.decimalCharacter;
+                        format.thousands = mask.digitGroupSeparator;
+                        format.precision = mask.decimalPlaces;
+                    }
+                    else {
+                        format.params.decimal = mask.decimalCharacter;
+                        format.params.thousands = mask.digitGroupSeparator;
+                        format.params.precision = mask.decimalPlaces;
+                    }
+                }
+            }
+        }
+        return format;
+    }
+    isNumberComponent(component) {
+        return ['ZdNumber', 'ZdCurrency', 'ZdIncrement'].indexOf(component) !== -1;
+    }
+    checkAccessor(value) {
+        if (Accessor.isAccessorDefinition(value)) {
+            const [controller, accessor] = Accessor.getAccessor(value);
+            return Loader.getInstance(controller)[accessor];
+        }
+        return value;
+    }
     buildMetadata(name, title, columns, filter, portrait = true) {
         return __awaiter(this, void 0, void 0, function* () {
             const builtCols = this.buildColumns(columns);
-            const builtFilters = this.buildFilter(filter || {});
+            const builtFilters = this.buildFilter(filter || {}, columns);
             const lang = this.formatLangCode(I18n.instance.language);
             let clientLogo = '';
             let enterpriseLogo = '';
@@ -12145,6 +12335,7 @@ class PDFReport extends BaseReport {
     }
 }
 
+// XLS without groups (formatXLS = 'F3')
 class XLSReport extends BaseReport {
     constructor() {
         super(...arguments);
@@ -12165,7 +12356,7 @@ class XLSReport extends BaseReport {
     }
     buildMetadata(name, title, columns, filter) {
         const builtCols = this.buildColumns(columns);
-        const builtFilters = this.buildFilter(filter || {});
+        const builtFilters = this.buildFilter(filter || {}, columns);
         const lang = this.formatLangCode(I18n.instance.language);
         const clientLogo = '';
         const enterpriseLogo = '';
@@ -12191,13 +12382,14 @@ class XLSReport extends BaseReport {
             columns: builtCols,
             filter: builtFilters,
             reportXLS: true,
+            formatXLS: 'F3',
             xlsMergedCell: [],
         };
         return Promise.resolve(JSON.stringify(metadataObj));
     }
 }
 
-// XLS with groups
+// XLS with groups (formatXLS = 'F1')
 class XLS2Report extends BaseReport {
     constructor() {
         super(...arguments);
@@ -12209,7 +12401,7 @@ class XLS2Report extends BaseReport {
     }
     buildMetadata(name, title, columns, filter) {
         const builtCols = this.buildColumns(columns);
-        const builtFilters = this.buildFilter(filter || {});
+        const builtFilters = this.buildFilter(filter || {}, columns);
         const lang = this.formatLangCode(I18n.instance.language);
         const clientLogo = '';
         const enterpriseLogo = '';
@@ -12235,6 +12427,7 @@ class XLS2Report extends BaseReport {
             columns: builtCols,
             filter: builtFilters,
             reportXLS: true,
+            formatXLS: 'F1',
             xlsMergedCell: [],
         };
         return Promise.resolve(JSON.stringify(metadataObj));
@@ -12393,7 +12586,7 @@ class XLS2Report extends BaseReport {
     }
 }
 
-// Grid mirror (with groups)
+// Grid mirror (with groups) (formatXLS = 'F2')
 class XLS3Report extends BaseReport {
     constructor() {
         super(...arguments);
@@ -12405,7 +12598,7 @@ class XLS3Report extends BaseReport {
     }
     buildMetadata(name, title, columns, filter) {
         const builtCols = this.buildColumns(columns);
-        const builtFilters = this.buildFilter(filter || {});
+        const builtFilters = this.buildFilter(filter || {}, columns);
         const lang = this.formatLangCode(I18n.instance.language);
         const clientLogo = '';
         const enterpriseLogo = '';
@@ -12431,6 +12624,7 @@ class XLS3Report extends BaseReport {
             columns: builtCols,
             filter: builtFilters,
             reportXLS: true,
+            formatXLS: 'F2',
             xlsMergedCell: [],
         };
         return Promise.resolve(JSON.stringify(metadataObj));
@@ -12635,7 +12829,7 @@ class Report {
             const { route } = reportType;
             const { name, columns, datasource } = this.iterable;
             const { groupedData } = Object.assign({}, this.iterable);
-            const formattedColumns = this.removeActionColumns(columns);
+            const formattedColumns = this.removeColumns(columns);
             const metadataObj = yield reportType.buildMetadata(name, this.title, formattedColumns, datasource.filter, portrait);
             let dataset;
             if ((reportType instanceof XLS2Report || reportType instanceof XLS3Report) && groupedData) {
@@ -12677,11 +12871,11 @@ class Report {
             return new URL(reportFile, this.fileEndPoint).href;
         });
     }
-    removeActionColumns(columns) {
-        return columns.filter((item) => item.type !== 'action');
+    removeColumns(columns) {
+        return columns.filter((item) => (item.type !== 'action' && item.isVisible));
     }
 }
 
 const AutoNumeric = require('@zeedhi/autonumeric/dist/autoNumeric');
 
-export { Alert, AlertService, ApexChart, AutoNumeric, Badge, Breadcrumbs, Button, ButtonGroup, CSVReport, Card, Carousel, Checkbox, CheckboxMultiple, ChildNotFoundError, Chip, CodeEditor, Col, CollapseCard, Column, Component, ComponentRender, Container, Currency, Dashboard, Date$1 as Date, DateRange, Dialog, DialogService, Divider, Dropdown, FileInput, Footer, Form, Frame, FramePage, Grid, GridColumn, GridColumnEditable, GridEditable, Header, Icon, Icons, Image, Increment, Input, Iterable, IterableColumnsButton, IterableColumnsButtonController, IterablePageComponent, IterablePageInfo, IterablePageSize, IterablePagination, List, ListGroup, ListItem, Loading, LoadingService, Login, LoginButton, MasterDetail, Menu, MenuButton, MenuGroup, MenuLink, MenuSeparator, Modal, ModalCloseButton, ModalService, Month, Number$1 as Number, PDFReport, Password, Progress, Radio, RangeSlider, Report, Row, Search, Select, SelectMultiple, SelectTree, SelectTreeMultiple, SelectableList, SpeedDial, Steppers, SvgMap, Switch, Tab, Table, Tabs, Tag, Text, TextInput, Textarea, Time, Toggleable, Tooltip, Tree, TreeDataStructure, TreeGrid, TreeGridEditable, WatchURL, XLS2Report, XLS3Report, XLSReport, initTheme };
+export { Alert, AlertService, ApexChart, AutoNumeric, Badge, Breadcrumbs, Button, ButtonGroup, CSVReport, Card, Carousel, Checkbox, CheckboxMultiple, ChildNotFoundError, Chip, CodeEditor, Col, CollapseCard, Column, ColumnNotFoundError, Component, ComponentRender, Container, Currency, Dashboard, Date$1 as Date, DateRange, Dialog, DialogService, Divider, Dropdown, FileInput, Footer, Form, Frame, FramePage, Grid, GridColumn, GridColumnEditable, GridEditable, Header, Icon, Icons, Image, Increment, Input, Iterable, IterableColumnsButton, IterableColumnsButtonController, IterablePageComponent, IterablePageInfo, IterablePageSize, IterablePagination, List, ListGroup, ListItem, Loading, LoadingService, Login, LoginButton, MasterDetail, Menu, MenuButton, MenuGroup, MenuLink, MenuSeparator, Modal, ModalCloseButton, ModalService, Month, Number$1 as Number, PDFReport, Password, Progress, Radio, RangeSlider, Report, Row, Search, Select, SelectMultiple, SelectTree, SelectTreeMultiple, SelectableList, SpeedDial, Steppers, SvgMap, Switch, Tab, Table, Tabs, Tag, Text, TextInput, Textarea, Time, Toggleable, Tooltip, Tree, TreeDataStructure, TreeGrid, TreeGridEditable, WatchURL, XLS2Report, XLS3Report, XLSReport, initTheme };