@zeedhi/common 1.52.0 → 1.55.0

package/dist/zd-common.umd.js

@@ -2915,8 +2915,6 @@
           this.moveMode = false;
           /* Cards */
           this.cards = [];
-          /* Card ID to be deleted */
-          this.deleteCardId = '';
           this.overrideNamedProps = {};
           /* Remove the paddings of the dashboard */
           this.removePadding = false;
@@ -3009,7 +3007,9 @@
               persistent: true,
               title: 'EDIT_CARD',
               grid: {
-                  md: 4,
+                  cols: 10,
+                  sm: 8,
+                  lg: 6,
               },
               children: [
                   {
@@ -3031,7 +3031,12 @@
                               minValue: 1,
                               clearable: false,
                               hint: 'Min: 1, Max: 12',
-                              cssStyle: 'width: 100px',
+                              grid: {
+                                  cols: 6,
+                                  sm: 6,
+                                  md: 4,
+                                  lg: 3,
+                              },
                               mask: {
                                   decimalPlaces: 0,
                               },
@@ -3040,19 +3045,33 @@
                               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,
+                              },
                           },
                       ],
                   },
@@ -3087,40 +3106,30 @@
           /* 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);
@@ -3130,6 +3139,7 @@
           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) {
@@ -3159,17 +3169,19 @@
           }
       }
       /* 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`,
@@ -3191,7 +3203,7 @@
                       component: 'ZdButton',
                       label: 'YES',
                       events: {
-                          click: this.deleteCard.bind(this),
+                          click: this.deleteAndCloseDialog.bind(this, cardId),
                       },
                   },
               ],
@@ -3263,6 +3275,8 @@
       }
       /* Return footer rightSlot props for view layer */
       getFooterRightSlot(cardId) {
+          if (this.cardFooterSlot)
+              return this.cardFooterSlot;
           const rightSlot = [
               {
                   name: `tooltipDelete${cardId}`,
@@ -3306,6 +3320,9 @@
       getCardId() {
           return Math.random().toString(36).substr(2, 9);
       }
+      selectCard(cardId) {
+          this.currentCardId = cardId;
+      }
   }
 
   /**
@@ -3402,9 +3419,6 @@
           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();
@@ -5210,6 +5224,7 @@
            * @public
            */
           this.resizeColumns = false;
+          this.showSelectAll = true;
           this.navigationKeyMapping = {
               up: {
                   event: this.navigateUp.bind(this),
@@ -5259,6 +5274,8 @@
           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) {
@@ -5448,6 +5465,10 @@
           });
           return slot;
       }
+      callDisableSelection(row) {
+          return !!this.disableSelection && typeof this.disableSelection === 'function'
+              && this.disableSelection({ row, component: this });
+      }
   }
 
   /**
@@ -5525,6 +5546,7 @@
           };
           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) {
@@ -5577,10 +5599,10 @@
        * @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;
@@ -5929,6 +5951,9 @@
               throw e;
           }
       }
+      callCanEditRow(row) {
+          return !this.canEditRow || typeof this.canEditRow !== 'function' || this.canEditRow({ row, component: this });
+      }
   }
 
   /**
@@ -8165,6 +8190,7 @@
            * Defines the month input format.
            */
           this.inputFormat = core.Config.monthInputFormat;
+          this.isoFormat = 'YYYY-MM';
           /**
            * Determines the type of the picker - month for month picker.
            */
@@ -8174,19 +8200,11 @@
           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('');
-      }
   }
-  core.FormatterParserProvider.registerFormatter('ZdMonth', (value, { dateFormat = core.Config.monthFormat, displayFormat = core.Config.monthDisplayFormat, inputFormat = core.Config.monthInputFormat, mask = '', initialMask, } = {}) => {
+  core.FormatterParserProvider.registerFormatter('ZdMonth', (value, { dateFormat = core.Config.monthFormat, displayFormat = core.Config.monthDisplayFormat, inputFormat = core.Config.monthInputFormat, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
       if (!value) {
           return '';
       }
@@ -8198,14 +8216,17 @@
           if (inputFormat) {
               return core.dayjs(value, dateFormat).format(inputFormat);
           }
-          const valueToUnmask = value;
+          let valueToUnmask = value;
+          if (isSimpleDisplay) {
+              valueToUnmask = core.dayjs(value, dateFormat).format(displayFormat);
+          }
           const unmasked = core.Mask.getValueWithoutMask(valueToUnmask);
           const masked = core.Mask.getValueWithMask(unmasked, mask);
           return masked;
       }
       return core.dayjs(value, dateFormat).format(displayFormat);
   });
-  core.FormatterParserProvider.registerParser('ZdMonth', (value, { dateFormat = core.Config.monthFormat, displayFormat = core.Config.monthDisplayFormat, inputFormat = core.Config.monthInputFormat, mask = '', maskFormat, } = {}) => {
+  core.FormatterParserProvider.registerParser('ZdMonth', (value, { dateFormat = core.Config.monthFormat, displayFormat = core.Config.monthDisplayFormat, inputFormat = core.Config.monthInputFormat, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
       if (!value) {
           return null;
       }
@@ -8221,12 +8242,14 @@
           }
           const unmasked = core.Mask.getValueWithoutMask(value);
           let masked;
-          const displayFmtMask = maskFormat(displayFormat);
-          masked = core.Mask.getValueWithMask(unmasked, displayFmtMask);
-          if (core.dayjs(masked, displayFormat, true).format(displayFormat) === masked) {
-              return core.dayjs(masked, displayFormat).format(dateFormat);
+          if (!initialMask || isSimpleDisplay) {
+              const displayFmtMask = displayFormat.replace(/[A-Za-z]/gi, '#');
+              masked = core.Mask.getValueWithMask(unmasked, displayFmtMask);
+              if (core.dayjs(masked, displayFormat, true).format(displayFormat) === masked) {
+                  return core.dayjs(masked, displayFormat).format(dateFormat);
+              }
           }
-          const dateFmtMask = maskFormat(dateFormat);
+          const dateFmtMask = dateFormat.replace(/[A-Za-z]/gi, '#');
           masked = core.Mask.getValueWithMask(unmasked, dateFmtMask);
           if (core.dayjs(masked, dateFormat, true).format(dateFormat) === masked) {
               return masked;
@@ -10236,7 +10259,7 @@
           /**
            * Defines the format of a time displayed in picker. Available options are ampm and 24hr.
            */
-          this.timeFormat = core.Config.timeFormat || 'ampm';
+          this.timeFormat = core.Config.timeFormat || 'ampm'; // change props to pickerFormat
           /**
            * Forces 100% width.
            */
@@ -10267,29 +10290,18 @@
           this.width = 290;
           this.formatterFn = core.FormatterParserProvider.getFormatter('ZdTime');
           this.parserFn = core.FormatterParserProvider.getParser('ZdTime');
+          this.isoFormatValue = 'HH:mm';
+          this.valueFormatInternal = core.Config.valueTimeFormat;
+          this.displayFormatInternal = core.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 = core.Config.valueTimeFormat;
-          /**
-           * Format used to display the value
-           */
-          this.displayFormat = core.Config.displayTimeFormat;
+          this.inputFormat = core.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);
@@ -10303,40 +10315,40 @@
           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' : '';
@@ -10345,59 +10357,172 @@
               '24hr': `HH:mm${seconds}`,
           };
       }
-      ampmMask() {
-          const ampmValue = this.displayValue || '';
-          const hours = [/[0-1]/];
-          if (ampmValue[0] === '1') {
-              hours.push(/[0-2]/);
+      getInitialMask() {
+          if (isUndefined__default["default"](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__default["default"](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 core.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 core.dayjs(value, this.valueFormat).format(this.isoFormat);
+          }
+          return '';
+      }
+      parseISOTimeValue(value) {
+          if (value && this.isValidTime(value, this.valueFormat)) {
+              return core.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) => core.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 core.I18n.translate('VALIDATION_INVALID_TIME');
+      }
+      timeAllowedValidation() {
+          return !this.displayValue
+              || (this.isValidTime(this.displayValue, this.displayFormat)
+                  && this.isTimeAllowed())
+              || core.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 core.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 = core.dayjs(this.value, this.valueFormat).format(this.inputFormat || this.displayFormat);
       }
+      /**
+       * Removes the component mask if value is valid
+       */
+      removeTimeMask() {
+          if (isUndefined__default["default"](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)
@@ -10433,49 +10558,54 @@
           const second = core.dayjs(value, this.valueFormat).second();
           return this.allowedSeconds.includes(second);
       }
-      timeValidation() {
-          return !this.displayValue
-              || this.isValidTime(this.displayValue, this.displayFormat)
-              || core.I18n.translate('VALIDATION_INVALID_TIME');
-      }
-      timeAllowedValidation() {
-          return !this.displayValue
-              || (this.isValidTime(this.displayValue, this.displayFormat)
-                  && this.isTimeAllowed())
-              || core.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);
       }
   }
-  core.FormatterParserProvider.registerFormatter('ZdTime', (value, { displayFormat = core.Config.displayFormat, valueFormat = core.Config.valueTimeFormat, } = {}) => {
+  core.FormatterParserProvider.registerFormatter('ZdTime', (value, { valueFormat = core.Config.valueTimeFormat, displayFormat = core.Config.displayTimeFormat, inputFormat = core.Config.timeInputFormat, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
       if (!value) {
           return '';
       }
-      if (core.dayjs(value, valueFormat, true).isValid()) {
-          return core.dayjs(value, valueFormat).format(displayFormat);
+      const isTimeValid = core.dayjs(value, valueFormat, true).isValid();
+      if (!isTimeValid) {
+          return value;
       }
-      return value;
+      if (mask && initialMask) {
+          if (inputFormat) {
+              return core.dayjs(value, valueFormat).format(inputFormat);
+          }
+          let valueToUnmask = value;
+          if (isSimpleDisplay) {
+              valueToUnmask = core.dayjs(value, valueFormat).format(displayFormat);
+          }
+          const unmasked = core.Mask.getValueWithoutMask(valueToUnmask);
+          const masked = core.Mask.getValueWithMask(unmasked, mask);
+          return masked;
+      }
+      return core.dayjs(value, valueFormat).format(displayFormat);
   });
-  core.FormatterParserProvider.registerParser('ZdTime', (value, { displayFormat = core.Config.displayFormat, valueFormat = core.Config.valueTimeFormat, } = {}) => {
+  core.FormatterParserProvider.registerParser('ZdTime', (value, { displayFormat = core.Config.displayTimeFormat, valueFormat = core.Config.valueTimeFormat, mask = '', initialMask, } = {}) => {
       if (!value) {
           return null;
       }
-      const uppecaseValue = value.toUpperCase();
-      if (core.dayjs(uppecaseValue, displayFormat, true).isValid()) {
-          return core.dayjs(uppecaseValue, displayFormat).format(valueFormat);
+      if (core.dayjs(value, displayFormat, true).isValid()) {
+          return core.dayjs(value, displayFormat).format(valueFormat);
+      }
+      if (mask && core.Mask.checkMask(value, mask)) {
+          const unmasked = core.Mask.getValueWithoutMask(value);
+          let masked;
+          if (!initialMask) {
+              const displayFmtMask = displayFormat.replace(/[A-Za-z]/gi, '#');
+              masked = core.Mask.getValueWithMask(unmasked, displayFmtMask);
+          }
+          const timeFmtMask = valueFormat.replace(/[A-Za-z]/gi, '#');
+          masked = core.Mask.getValueWithMask(unmasked, timeFmtMask);
+          if (core.dayjs(masked, valueFormat, true).format(valueFormat) === masked) {
+              return masked;
+          }
       }
-      return uppecaseValue;
+      return value;
   });
 
   /**
@@ -10617,6 +10747,7 @@
           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;
@@ -10852,16 +10983,13 @@
               const compName = component.name;
               const instanceName = `${compName}_${nodePath}`;
               const path = parentPath ? `${parentPath}.${compName}` : compName;
-              const newComponent = merge__default["default"]({}, component, (_a = this.appliedConditions[nodePath]) === null || _a === void 0 ? void 0 : _a[path]);
+              const newInstances = core.Metadata.getInstances(instanceName);
+              const newInstance = newInstances[0];
+              const appliedConditions = (_a = this.appliedConditions[nodePath]) === null || _a === void 0 ? void 0 : _a[path];
+              const newComponent = merge__default["default"]({}, component, newInstance, appliedConditions);
               const newChildren = this.getSlotComponent(newComponent.children || [], node, path);
               newComponent.name = instanceName;
               newComponent.children = newChildren;
-              try {
-                  core.Metadata.updateInstance(instanceName, newComponent);
-              }
-              catch (e) {
-                  // do nothing
-              }
               newComponents.push(newComponent);
           });
           return newComponents;
@@ -10923,6 +11051,10 @@
               return this.searchPath(currentNode.children || [], path.slice(1));
           return currentNode;
       }
+      callDisableCheckbox(node) {
+          return !!this.disableCheckbox && typeof this.disableCheckbox === 'function'
+              && this.disableCheckbox({ node, component: this });
+      }
   }
 
   /**
@@ -11069,6 +11201,8 @@
           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) => {
@@ -11076,6 +11210,31 @@
                   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);
           }
       }
   }
@@ -11110,6 +11269,7 @@
               },
           };
           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();
       }
@@ -11163,10 +11323,10 @@
        * @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;
@@ -11483,6 +11643,9 @@
               throw e;
           }
       }
+      callCanEditRow(row) {
+          return !this.canEditRow || typeof this.canEditRow !== 'function' || this.canEditRow({ row, component: this });
+      }
   }
 
   class Icons {
@@ -11926,9 +12089,9 @@
           };
           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();
@@ -11940,6 +12103,10 @@
                   throw e;
               }
           }
+          return { widths, totalWidth };
+      }
+      buildColumns(columns) {
+          const { widths, totalWidth } = this.getColumnsWidth(columns);
           return columns.reduce((result, col, index) => {
               let size;
               if (!totalWidth) {
@@ -11952,63 +12119,20 @@
                   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 (core.Accessor.isAccessorDefinition(value)) {
-              const [controller, accessor] = core.Accessor.getAccessor(value);
-              return core.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: core.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: core.I18n.translate('IS_EQUAL', { value: filter[key] }),
+              });
+          });
       }
       formatLangCode(lang) {
           if (!lang) {
@@ -12033,7 +12157,7 @@
       }
       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(core.I18n.instance.language);
           const clientLogo = '';
           const enterpriseLogo = '';
@@ -12071,10 +12195,76 @@
       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 (core.Accessor.isAccessorDefinition(value)) {
+              const [controller, accessor] = core.Accessor.getAccessor(value);
+              return core.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(core.I18n.instance.language);
               let clientLogo = '';
               let enterpriseLogo = '';
@@ -12152,6 +12342,7 @@
       }
   }
 
+  // XLS without groups (formatXLS = 'F3')
   class XLSReport extends BaseReport {
       constructor() {
           super(...arguments);
@@ -12172,7 +12363,7 @@
       }
       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(core.I18n.instance.language);
           const clientLogo = '';
           const enterpriseLogo = '';
@@ -12198,13 +12389,14 @@
               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);
@@ -12216,7 +12408,7 @@
       }
       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(core.I18n.instance.language);
           const clientLogo = '';
           const enterpriseLogo = '';
@@ -12242,6 +12434,7 @@
               columns: builtCols,
               filter: builtFilters,
               reportXLS: true,
+              formatXLS: 'F1',
               xlsMergedCell: [],
           };
           return Promise.resolve(JSON.stringify(metadataObj));
@@ -12400,7 +12593,7 @@
       }
   }
 
-  // Grid mirror (with groups)
+  // Grid mirror (with groups) (formatXLS = 'F2')
   class XLS3Report extends BaseReport {
       constructor() {
           super(...arguments);
@@ -12412,7 +12605,7 @@
       }
       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(core.I18n.instance.language);
           const clientLogo = '';
           const enterpriseLogo = '';
@@ -12438,6 +12631,7 @@
               columns: builtCols,
               filter: builtFilters,
               reportXLS: true,
+              formatXLS: 'F2',
               xlsMergedCell: [],
           };
           return Promise.resolve(JSON.stringify(metadataObj));
@@ -12642,7 +12836,7 @@
               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) {
@@ -12684,8 +12878,8 @@
               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));
       }
   }
 
@@ -12710,6 +12904,7 @@
   exports.Col = Col;
   exports.CollapseCard = CollapseCard;
   exports.Column = Column;
+  exports.ColumnNotFoundError = ColumnNotFoundError;
   exports.Component = Component;
   exports.ComponentRender = ComponentRender;
   exports.Container = Container;