cronapp-framework-js 3.2.0 → 3.2.1

package/js/directives.js

@@ -2484,7 +2484,8 @@
               };
 
               var column = this.getColumnByField(options, opt.field);
-              if (column.visibleCrud != undefined && !column.visibleCrud) {
+              var visibleCrud = (column.visibleCrud == undefined || column.visibleCrud);
+              if (!visibleCrud && !column.visible) {
                 container.parent().find('.k-edit-label [for='+ column.field +']').parent().remove();
                 container.remove();
               }
@@ -2495,8 +2496,13 @@
               var $input = $(`<input ${required} name="${opt.field}" id="${buttonId}" from-grid=true ng-model="${ngModel}" />`); //
               $input.data('change-grid-model', changeGridModel);
               $input.data('column-type', column.type);
-
-              if (column.inputType == 'dynamicComboBox' || column.inputType == 'comboBox') {
+              
+              if (!visibleCrud) {
+                var valueModel = scope.$eval(`${ngModel}`);
+                if (valueModel) {
+                  container.text(valueModel);
+                }
+              } else if (column.inputType == 'dynamicComboBox' || column.inputType == 'comboBox') {
                 var kendoConfig = app.kendoHelper.getConfigComboboxSync(column.comboboxOptions, scope);
                 kendoConfig.autoBind = true;
                 kendoConfig.optionLabel = undefined;
@@ -2575,11 +2581,12 @@
               }, 200);
             }
 
-            function getCommandForEditButtonDatabase(opt, command) {
+            function getCommandForEditButtonDatabase(opt, command, iconClass) {
               var cmd;
               let idForCommand = app.common.generateId();
               let ariaLabel = $translate.instant('Edit');
-              let template = `<a href class='k-button k-grid-edit k-grid-${idForCommand}' aria-label='${ariaLabel}'><span class='k-icon k-i-edit'></span></a>`;
+              let iconEditClass = iconClass ? iconClass : "k-icon k-i-edit";
+              let template = `<a href class='k-button k-grid-edit k-grid-${idForCommand}' aria-label='${ariaLabel}'><span class='${iconEditClass}'></span></a>`;
               if ((opt.editable == 'popupCustom') || (opt.editable == 'datasource')) {
                 cmd = {
                   name: idForCommand,
@@ -2619,11 +2626,12 @@
               return cmd;
             }
 
-            function getCommandForRemoveButtonDatabase(opt, command) {
+            function getCommandForRemoveButtonDatabase(opt, command, iconClass) {
               var cmd;
               let idForCommand = app.common.generateId();
               let ariaLabel = $translate.instant('Remove');
-              let template = `<a href class='k-button k-grid-delete k-grid-${idForCommand}' aria-label='${ariaLabel}'><span class='k-icon k-i-close'></span></a>`;
+              let iconDeleteClass = iconClass ? iconClass : "k-icon k-i-close";
+              let template = `<a href class='k-button k-grid-delete k-grid-${idForCommand}' aria-label='${ariaLabel}'><span class='${iconDeleteClass}'></span></a>`;
 
               if ((opt.editable == 'popupCustom') || (opt.editable == 'datasource')) {
                 cmd = {
@@ -2818,10 +2826,10 @@
                     command.forEach(function(f) {
                       var cmd;
                       if ( f == "edit") {
-                        cmd = getCommandForEditButtonDatabase.bind(this)(options, f);
+                        cmd = getCommandForEditButtonDatabase.bind(this)(options, f, column.iconEditClass);
                       }
                       else {
-                        cmd = getCommandForRemoveButtonDatabase.bind(this)(options, f);
+                        cmd = getCommandForRemoveButtonDatabase.bind(this)(options, f, column.iconDeleteClass);
                       }
                       commands.push(cmd);
                     }.bind(this));
@@ -4221,29 +4229,31 @@
               }
 
               options.virtual.valueMapper = async function (options) {
-                if (!combobox || combobox.isEvaluating) return;
-                combobox.isEvaluating = true;
-              
-                var _dataSource = _options.dataSource.transport.options.cronappDatasource;
-                $log.debug("valueMapper.findObj | " + attrs['id'] + " | " + options.value);
-              
-                try {
-                  let currentValue = combobox.value();
-              
-                  let data = await _dataSource.findObj([options.value], false);
-                  if (Array.isArray(data)) data = data[0];
-                  
-                  if (currentValue === combobox.value()) {
-                    options.success(data);
-                  }
-                } catch (e) {
-                  options.success(null);
-                } finally {
-                  combobox.isEvaluating = false;
+                await waitRender();
+                $log.debug(`valueMapper | ${attrs['id']} | ${options.value}`);
+                
+                if (lastValueMapper && lastValueMapper.completed === false) lastValueMapper.canceled = true;
+                lastValueMapper = options;
+                
+                const { optionLabel, dataValueField } = _options.combobox.options;
+                const dataSource = _options.dataSource.transport.options.cronappDatasource;
+                
+                if (options.canceled || !options.value || (optionLabel[dataValueField] && options.value === "")) {
+                  return options.success(null);
                 }
-              }; 
+                
+                _options.combobox.isEvaluating = true;
+                
+                dataSource.findObj([options.value], false, (data) => {
+                  if (options.canceled) return;
+                  options.success(Array.isArray(data) ? data[0] : data);
+                  $log.debug(`valueMapper.success | ${attrs['id']} | ${data}`);
+                }, () => options.success(null), [dataValueField]);
+                
+                options.completed = _options.combobox.isEvaluating = false;
+              };
             }
-
+            
             options.messages =  {
               noData: attrs.noResultsMessage ? attrs.noResultsMessage : "NO DATA FOUND"
             };
@@ -4270,13 +4280,20 @@
                 _compileAngular(scope, combobox.element[0]);
               }
             };
-
             
             options.filtering = attrs.ngFiltering ? function () {
               scope.$eval(attrs.ngFiltering);
             } : undefined;
             
             options.open = function (e) {
+              if (!combobox._originalClose) {
+                combobox._originalClose = combobox.close;
+              }
+              combobox.close = () => {};
+              setTimeout(() => {
+                combobox.close = combobox._originalClose;
+              }, 500);
+              
               if (!dataSourceScreen.fetched || (dataSourceScreen.lastLoadedTime !== combobox.dataSource.lastLoadedTime)) {
                 combobox.options.firstLazyRead = true;
                 combobox.dataSource.read();
@@ -4287,6 +4304,7 @@
               if (!combobox.dataSource.data().some(item => item[combobox.options.dataValueField] === "")) {
                 combobox.dataSource.add(emptyOption);
               }
+              forceEmptyLineSelected();
             };
             
             options.select = attrs.ngSelect ? function (e) { 
@@ -4339,6 +4357,8 @@
               setTimeout(() => {
                 scrolling = false;
               }, 300);
+
+              forceEmptyLineSelected();
             });
             
             combobox.bind("change", function () {
@@ -4490,11 +4510,13 @@
              */
             if (ngModelCtrl) {
               ngModelCtrl.$formatters.push(function (value) {
-                if (value === undefined || value === "") {
+                $log.debug("$formatters | " + attrs['id'] + " | " + value);
+                if (value === undefined || (value === "" && select.optionLabelValue === undefined)) {
                   value = "";
                   modelSetter(scope, value);
                 }
-                return value;
+              forceChangeModel(value);
+              return value;
               });
               
               ngModelCtrl.$parsers.push(function (value) {
@@ -4538,12 +4560,6 @@
               select.initValue = null;
             }
 
-            if (select.initValue === null || select.initValue === "" || !select.initValue) {
-              combobox.value("");
-              modelSetter(_scope, "");
-            }
-            
-
             if (combobox.dataSource.transport && combobox.dataSource.transport.options) {
               combobox.dataSource.transport.options.combobox = combobox;
               combobox.dataSource.transport.options.$compile = $compile;
@@ -5498,101 +5514,134 @@
       }])
 
       .directive('cronBreadcrumbs', function ($rootScope) {
-      'use strict';
-      return {
-        restrict: 'E',
-        replace: true,
-        link: function (scope, element, attrs) {
-
-          var bcAction = attrs.ngInit ? attrs.ngInit : null;
-          const bcDelimiterIcon = attrs.crnDelimiterIcon;
-          const bcTypeMenu = attrs.typeMenu;
-          const bcMenuId = attrs.idMenu ? attrs.idMenu : null;
-          const bcId = attrs.id;
-          const bcIconRoot = attrs.breadcrumbIcon ? attrs.breadcrumbIcon : null;
-          const bcList = [];
-
-          const fillAction = async () => {
+        'use strict';
+        return {
+          restrict: 'E',
+          replace: true,
+          link: function (scope, element, attrs) {
+
+            let bcAction = attrs.ngInit ? attrs.ngInit : null;
+            let bcList = [];
+            const bcDelimiterIcon = attrs.crnDelimiterIcon;
+            const bcTypeMenu = attrs.typeMenu;
+            const bcMenuId = attrs.idMenu ? attrs.idMenu : null;
+            const bcId = attrs.id;
+            const bcIconRoot = attrs.breadcrumbIcon ? attrs.breadcrumbIcon : null;
+
+
+            const destroyBreadcrumb = () => {
+              const $bcElement = $(`#${bcId}`);
+              if ($bcElement.data('kendoBreadcrumb')) {
+                $bcElement.data('kendoBreadcrumb').destroy();
+                $bcElement.empty();
+              }
+            };
+
+
+            const fillAction = async () => {
               const shortVersion = bcAction.replace("cronapi.client('js.", 'blockly.js.');
               bcAction = shortVersion.replace("').run()", '');
               bcAction = scope.$eval(bcAction);
               bcList = await bcAction();
 
               const onclick = async (e) => {
-                if (e.item.action)  {
+                if (e.item.action) {
                   e.item.action();
                 }
               };
 
+
+              destroyBreadcrumb();
+
+
               $(`#${bcId}`).kendoBreadcrumb({
                 items: bcList,
                 delimiterIcon: bcDelimiterIcon,
                 navigational: true,
-                click : onclick
+                click: onclick
               });
-          }
+            };
 
-          const clearAction = (action) => {
-           if (action) {
-            return action.replace("cronapi.screen.changeView('", '').replace("', [])", '');
-           }
-           return "#/home";
-          }
 
-          if (bcAction && bcTypeMenu === "idBloco") {
-            fillAction();
-          } else {
-            var observer = new MutationObserver((mutation, observer) => {
+            const clearAction = (action) => {
+              if (action) {
+                return action.replace("cronapi.screen.changeView('", '').replace("', [])", '');
+              }
+              return "#/home";
+            };
+
+
+            if (bcAction && bcTypeMenu === "idBloco") {
+              fillAction();
+            }
+
+            else {
+              var observer = new MutationObserver((mutation, obs) => {
                 const $parent = $(`#${bcMenuId}`).parent();
                 const attrOptions = $parent.attr('options');
+
                 if (attrOptions) {
-                    observer.disconnect(); // stop observing
 
-                    const options = JSON.parse(attrOptions);
-                    const page = document.location.hash || 'home';
+                  obs.disconnect();
 
-                    const findTrace = (array, action, path = []) => {
-                      for (let i = 0; i < array.length; i++) {
-                        var item = array[i];
-                        item.action = clearAction(item.action);
-                        if (item.action === action) {
-                          return [...path, item];
-                        }
-                        if (item.menuItems) {
-                          const result = findTrace(item.menuItems, action, [...path, item]);
-                          if (result) {
-                            return result;
-                          }
+                  const options = JSON.parse(attrOptions);
+                  const page = document.location.hash || 'home';
+
+                  const findTrace = (array, action, path = []) => {
+                    for (let i = 0; i < array.length; i++) {
+                      var item = array[i];
+                      item.action = clearAction(item.action);
+                      if (item.action === action) {
+                        return [...path, item];
+                      }
+                      if (item.menuItems) {
+                        const result = findTrace(item.menuItems, action, [...path, item]);
+                        if (result) {
+                          return result;
                         }
                       }
-                      return null;
                     }
+                    return null;
+                  };
 
-                    const trace = findTrace(options.subMenuOptions, page);
-                    if (trace) {
-                        for (var index in trace) {
-                            const item = trace[index];
-                            bcList.push({
-                              type: index == 0 ? 'rootitem' : 'item',
-                              href: item.action,
-                              text: item.title,
-                              showText: true,
-                              showIcon: false
-                            });
-                        }
-                        $(`#${bcId}`).kendoBreadcrumb({
-                            items: bcList,
-                            delimiterIcon: bcDelimiterIcon,
-                            navigational: true
-                        });
+
+                  const trace = findTrace(options.subMenuOptions, page);
+                  if (trace) {
+                    bcList = [];
+                    for (var index in trace) {
+                      const item = trace[index];
+                      bcList.push({
+                        type: index == 0 ? 'rootitem' : 'item',
+                        href: item.action,
+                        text: item.title,
+                        showText: true,
+                        showIcon: false
+                      });
                     }
+
+
+                    destroyBreadcrumb();
+
+
+                    $(`#${bcId}`).kendoBreadcrumb({
+                      items: bcList,
+                      delimiterIcon: bcDelimiterIcon,
+                      navigational: true
+                    });
+                  }
                 }
-            });
-            observer.observe(document.body, { childList : true});
+              });
+
+
+              observer.observe(document.body, {
+                childList: true,
+                attributes: true,
+                subtree: true
+              });
+            }
           }
-        }
-      }
-    })
+        };
+      })
 
       .directive('ngInitialValue', function($parse) {
         return {
@@ -5988,41 +6037,74 @@
     return {
       restrict: 'EA',
       link: function(scope, element, attrs) {
-        let nextPageInfinite = {
-          isVisible: false,
-          checkVisibility: function(visible) {
-            var dataSource = attrs.crnInfiniteScroll ? scope.$eval(attrs.crnInfiniteScroll) : attrs.crnDatasource ? scope.$eval(attrs.crnDatasource): undefined;
-            if (dataSource) {
-              if (nextPageInfinite.isVisible !== visible) {
-                nextPageInfinite.isVisible = visible;
-                if (nextPageInfinite.isVisible) {
-                  if (dataSource.loaded && dataSource.loadedFinish) {
-                      dataSource.nextPage();
-                  } else {
-                    let intervalNextPage = setInterval(function() {
-                      if (dataSource.loaded && dataSource.loadedFinish) {
-                        dataSource.nextPage();
-                        clearInterval(intervalNextPage);
-                      }
-                    }, 250);
-                  }
-                }
-              }
-            }
-          },
-          eventScroll: function() {
+        let infiniteScrollController = {
+          isFirstTime: true,
+          isRunning: false,
+          datasource: undefined,
+          isVisible: function() { // verifica se o fim do componente esta aparecendo 
             var topElem = element.offset().top;
             var botElem = element.offset().top + element.outerHeight();
             var botScrn = $(window).scrollTop() + $(window).innerHeight();
             var topScrn = $(window).scrollTop();
-            nextPageInfinite.checkVisibility((botScrn > topElem) && (topScrn < botElem));
+            return (botScrn > topElem) && (topScrn < botElem);
+          },
+          loadNextPage: function() {
+            if (infiniteScrollController.datasource === undefined) {
+              infiniteScrollController.datasource = attrs.crnInfiniteScroll ? scope.$eval(attrs.crnInfiniteScroll) : attrs.crnDatasource ? scope.$eval(attrs.crnDatasource): undefined;
+            }
+            if (infiniteScrollController.datasource && infiniteScrollController.datasource.loaded && infiniteScrollController.datasource.loadedFinish) {
+              infiniteScrollController.datasource.nextPage();
+              return true;
+            }
+            return false;
+          },
+          setStopped: function() {
+            infiniteScrollController.isRunning = false;
+            if (infiniteScrollController.isFirstTime) { // Foi executado pelo load, agora inclui evento do scroll
+              infiniteScrollController.isFirstTime = false;
+              $(window).scroll(infiniteScrollController.executeInfinityScroll);
+            }
+          },
+          executeInfinityScroll: function() {
+            if (!infiniteScrollController.isRunning) { // semaforo para evitar execuções simultaneas causada pelo scrolling
+              infiniteScrollController.isRunning = true;
+              let retries = 0;
+              let intervalNextPage = setInterval(function() {
+                if (infiniteScrollController.isVisible()) {
+                  // Fim do area esta visivel, carregar pagina.
+                  if (!infiniteScrollController.loadNextPage()) {
+                    // Não conseguiu carregar a pagina
+                    if (retries < 5 && infiniteScrollController.isVisible()) {
+                      // tenta de novo enquanto o componente esta visivel (maximo 5 vezes)
+                      retries = retries + 1;
+                    } else {
+                      // para de verificar, ultrapasou 5 tentativas ou o componente não esta mais visivel
+                      infiniteScrollController.setStopped();
+                      clearInterval(intervalNextPage);
+                    }
+                  } else if (!infiniteScrollController.isVisible()) {
+                    // Carregou pagina
+                    // para de verificar pois o componente não esta mais visivel
+                    infiniteScrollController.setStopped();
+                    clearInterval(intervalNextPage);
+                  } else {
+                    // Carregou pagina
+                    // zera tentativas pois o componente esta visivel e a pagina foi carregada,
+                    // tentará nova pagina (ocorre se o numero de registros carregados for menor que o tamanho da tela
+                    retries = 0;
+                  }
+                } else {
+                  // Fim do area nao esta visivel, para de verificar.
+                  infiniteScrollController.setStopped();
+                }
+              }, 250);
+            }
           }
         };
-        $(window).scroll(nextPageInfinite.eventScroll);
-        $(window).ready(nextPageInfinite.eventScroll);
+        $(window).ready(infiniteScrollController.executeInfinityScroll);
       }
     };
-  }]);
+  }])
 
 }(app));
 
@@ -6043,63 +6125,181 @@ function maskDirective($compile, $translate, $parse, attrName) {
         return;
 
       var modelGetter = $parse(attrs['ngModel']);
-
       var modelSetter = modelGetter.assign;
 
-
       var $element = $(element);
       if ($element.data('alreadycompiled'))
         return;
+
       $element.data('alreadycompiled', true);
       $element.data('$compile', $compile);
 
       var type = $element.attr("type");
+      
+      if (type === "email") {
+        $element.inputmask("email").attr("novalidate", "novalidate");
+        $element.next(".k-tooltip-validation").remove();
 
-      if (type == "checkbox" || type == "password" || type == "url"){
+        const observer = new MutationObserver(() => {
+          const tooltip = $element.next(".k-tooltip-validation");
+          if (tooltip.length) tooltip.remove();
+        });
+        
+        observer.observe($element[0].parentNode, { childList: true, subtree: true });
         return;
+      }      
+
+      if ([
+          "week",
+          "date",
+          "time",
+          "datetime-local",
+          "month",
+          "datetime",
+          "time-local",
+        ].includes(type)) {
+        const iconClass = [
+          "week",
+          "dat",
+          "month",
+          "datetime-local",
+          "datetime",
+        ].includes(type)
+          ? "fa fa-calendar-o"
+          : "fa fa-clock-o";
+
+        const iconWrapper = document.createElement("span");
+        iconWrapper.className = "input-icon-wrapper";
+        iconWrapper.innerHTML = `<i class="${iconClass}" style="cursor: pointer; font-weight: 600;"></i>`;
+
+        const auxInput = document.createElement("input");
+        auxInput.type = type;
+        auxInput.style.position = "absolute";
+        auxInput.style.opacity = "0";
+        auxInput.style.pointerEvents = "none";
+
+        $element.after(iconWrapper);
+        iconWrapper.appendChild(auxInput);
+
+        iconWrapper.addEventListener("click", () => {
+          auxInput.focus();
+        });
+
+        auxInput.addEventListener("change", () => {
+          $element.val(auxInput.value);
+          $element.trigger("input");
+        });
+
+        scope.$watch(
+          () => $element.attr("exibir-icone"),
+          (newValue) => {
+            if (newValue === "true") {
+              iconWrapper.style.display = "inline-block";
+            } else {
+              iconWrapper.style.display = "none";
+            }
+          }
+        );
       }
 
-      if(type == "color" || type == "range"){
-        $element[0].classList.remove("form-control");
-        $element[0].classList.remove("k-textbox");
+      if (["checkbox", "password", "url", "color", "range"].includes(type)) {
+        if (["color", "range"].includes(type)) {
+          $element[0].classList.remove("form-control", "k-textbox");
+        }
         return;
       }
 
-      $element.data("type", type);
-
-      $element.attr("type", "text");
+      if (!["color", "range", "checkbox"].includes(type)) {
+        $element.data("type", type);
+        $element.attr("type", "text");
+      }
 
       if (ngModelCtrl) {
         ngModelCtrl.$formatters = [];
         ngModelCtrl.$parsers = [];
       }
 
-      if (attrs.asDate !== undefined && type == 'text')
-        type = "date";
-
-      var textMask = true;
-
-      var removeMask = false;
+      var attrMask =
+        attrs.mask || attrs.format || parseMaskType(type, $translate);
+      var mask = attrMask.replace(";1", "").replace(";0", "").trim();
+
+      if (!mask) return;
+
+      const placeholder = generateCustomPlaceholder(type, mask);
+      $element.attr("placeholder", placeholder);
+
+      if ([
+          "week",
+          "date",
+          "time",
+          "datetime-local",
+          "month",
+          "datetime",
+          "time-local",
+        ].includes(type)) {
+        $element.addClass("dark-placeholder");
+      }
 
-      var attrMask = attrs.mask || attrs.format;
+      $element.on("input blur", function () {
+        if (!$element.val()) {
+          $element.attr("placeholder", placeholder);
+        } else {
+          $element.attr("placeholder", "");
+        }
+      });
 
-      if (!attrMask) {
-        attrMask = parseMaskType(type, $translate);
+      if (["date", "datetime-local", "datetime", "time", "time-local"].includes(
+          type
+        )) {
+        $element.datetimepicker({
+          format: mask,
+          locale: $translate.use(),
+        });
+      } else if (["number", "money", "integer"].includes(type)) {
+        $element.inputmask("numeric", {
+          prefix: "",
+          rightAlign: false,
+        });
       } else {
-        attrMask = parseMaskType(attrMask, $translate);
-      }
-
-      if (attrMask.endsWith(";0")) {
-        removeMask = true;
+        $element.mask(mask);
       }
 
-      var mask = attrMask.replace(';1', '').replace(';0', '').trim();
-      if (mask == undefined || mask.length == 0) {
-        return;
+      function generateCustomPlaceholder(type, mask) {
+        switch (type) {
+          case "week":
+            return "Semana --, ----";
+          case "month":
+            return "-------- de ----";
+          case "time":
+          case "time-local":
+            return "--:--";
+          case "datetime-local":
+          case "datetime":
+            return "dd/mm/aaaa --:--";
+          case "date":
+            return "dd/mm/aaaa";
+          default:
+            return mask
+              .replace(/D/g, "d")
+              .replace(/M/g, "m")
+              .replace(/Y/g, "a")
+              .replace(/H/g, "h")
+              .replace(/m/g, "m")
+              .replace(/s/g, "s")
+              .replace(/-/g, "-")
+              .replace(/:/g, ":")
+              .replace(/\//g, "/");
+        }
       }
 
-      if (type == 'date' || type == 'datetime' || type == 'datetime-local' || type == 'month' || type == 'time' || type == 'time-local' || type == 'week') {
-
+      if ([
+          "date",
+          "datetime",
+          "datetime-local",
+          "month",
+          "time",
+          "week",
+        ].includes(type)) {
         var options = {
           format: mask,
           locale: $translate.use(),
@@ -6123,27 +6323,55 @@ function maskDirective($compile, $translate, $parse, attrName) {
           }
         };
 
-        if (mask != 'DD/MM/YYYY' && mask != 'MM/DD/YYYY') {
-          options.sideBySide = true;
-        }
-
-        var useUTC = type == 'date' || type == 'datetime' || type == 'time';
-
-        if (!window.fixedTimeZone) {
-          useUTC = false;
+        if ($element.attr('from-grid')) {
+          var openPopup = function () {
+            var popup = $(this).offset();
+            var isBelowInput = true;
+            var datetimepickerShowing = $(this)
+              .parent()
+              .find(".bootstrap-datetimepicker-widget.dropdown-menu");
+            if (!datetimepickerShowing.length) {
+              isBelowInput = false;
+              datetimepickerShowing = $(this)
+                .parent()
+                .find(".bootstrap-datetimepicker-widget.dropdown-menu.top");
+            }
+            if ($(datetimepickerShowing).offset()) {
+              datetimepickerShowing.appendTo("body");
+              var popupTop = isBelowInput
+                ? popup.top + $element.outerHeight()
+                : popup.top - datetimepickerShowing.outerHeight();
+              datetimepickerShowing.css({
+                top: popupTop,
+                left: popup.left,
+                zIndex: 999999,
+              });
+            }
+          };
+          $element.on("click", openPopup);
+          $element.on("focus", function () {
+            setTimeout(openPopup.bind(this), 100);
+          });
         }
 
-        $element.data('mask', mask);
-        $element.data('useUTC', useUTC);
+        $element.datetimepicker(options);
 
         if ($element.attr('from-grid')) {
           var openPopup = function() {
             var popup = $(this).offset();
             var isBellowInput = true;
-            var datetimepickerShowing = $(this).parent().find('.bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour.bottom');
+            var datetimepickerShowing = $(this)
+              .parent()
+              .find(
+                '.bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour.bottom'
+              );
             if (!datetimepickerShowing.length) {
               isBellowInput = false;
-              datetimepickerShowing = $(this).parent().find('.bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour.top');
+              datetimepickerShowing = $(this)
+                .parent()
+                .find(
+                  '.bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour.top'
+                );
             }
             if ($(datetimepickerShowing).offset()) {
               var popupLeft = $(datetimepickerShowing).offset().left;
@@ -6151,11 +6379,10 @@ function maskDirective($compile, $translate, $parse, attrName) {
               var grid = $('body');
               datetimepickerShowing.appendTo(grid);
 
-              var popupTop = 0
+              var popupTop = 0;
               if (!isBellowInput)
                 popupTop = popup.top - ($(datetimepickerShowing).height() + 15);
-              else
-                popupTop = popup.top + 35;
+              else popupTop = popup.top + 35;
 
               datetimepickerShowing.css("top", popupTop);
               datetimepickerShowing.css("bottom", "auto");
@@ -6194,10 +6421,8 @@ function maskDirective($compile, $translate, $parse, attrName) {
             $element.val(momentDate.format(mask));
             $element.data('initial-value', null);
           }
-
-        }
-        else {
-          $element.wrap("<div style=\"position:relative\"></div>");
+        } else {
+          $element.wrap('<div style="position:relative"></div>');
         }
         $element.datetimepicker(options);
         if (attrs.fromGrid !== "true") {
@@ -6208,7 +6433,7 @@ function maskDirective($compile, $translate, $parse, attrName) {
                 var value = $element.val();
                 var momentDate = null;
                 if (useUTC) {
-                  momentDate = moment(value, mask).utcOffset(window.timeZoneOffset, true);
+                  momentDate = moment(value, mask).utcOffset( window.timeZoneOffset, true);
                 } else {
                   momentDate = moment(value, mask);
                 }
@@ -6223,48 +6448,27 @@ function maskDirective($compile, $translate, $parse, attrName) {
           });
         }
 
-        if (ngModelCtrl ) {
-          ngModelCtrl.$formatters.push(function (value) {
-            if (value) {
-              return formatWithMomentAs(mask, useUTC, value, "string");
-            }
-
-            if(value === null){
-              var dp = $element.datetimepicker(options).data('DateTimePicker');
-              dp.date(null);
-            }
+        if (ngModelCtrl) {
+          ngModelCtrl.$formatters.push((value) =>
+            value ? moment(value).format(mask) : null
+          );
 
-            return null;
+          ngModelCtrl.$parsers.push((value) => {
+            var momentDate = moment(value, mask);
+            return momentDate.isValid() ? momentDate.toDate() : null;
           });
 
-          ngModelCtrl.$parsers.push(function (value) {
-            if (value) {
-              if (value instanceof Date) {
-                return value;
-              }
-              var momentDate = null;
-              if (useUTC) {
-                momentDate = moment(value, mask).utcOffset(window.timeZoneOffset, true);
-              } else {
-                momentDate = moment(value, mask);
-              }
-              if (type == 'time' || type == 'time-local') {
-                momentDate = momentDate.year(1970).dayOfYear(1).month(0);
-              }
-              if (typeof value === "string" && (value.length < mask.length)) {
-                let tempValue = formatWithMomentAs(mask, useUTC, value, "string");
-                if (tempValue.startsWith(value) && (value.length < tempValue.length) && (isNaN(tempValue[value.length]) || tempValue[value.length] === " ")) {
-                  ngModelCtrl.$$element.val(tempValue.substring(0, value.length + 1));
-                }
-              }
-              return momentDate.toDate();
-            }
-
-            return null;
+          $element.on('dp.change', function () {
+            scope.$apply(() => {
+              var value = $element.val();
+              var momentDate = moment(value, mask);
+              if (momentDate.isValid())
+                ngModelCtrl.$setViewValue(momentDate.toDate());
+            });
           });
         }
-
-      } else if (type == 'number' || type == 'money' || type == 'integer' || type == 'money-decimal') {
+      }
+      else if (type == 'number' || type == 'money' || type == 'integer' || type == 'money-decimal') {
         removeMask = true;
 
         var currency = mask.trim().replace(/\./g, '').replace(/\,/g, '').replace(/#/g, '').replace(/0/g, '').replace(/9/g, '');
@@ -6317,45 +6521,40 @@ function maskDirective($compile, $translate, $parse, attrName) {
         }
 
         var ipOptions = {
-          'rightAlign':  (type == 'money' || type == 'money-decimal'),
-          'unmaskAsNumber': true,
-          'allowMinus': true,
-          'prefix': prefix,
-          'suffix': suffix,
-          'radixPoint': decimal,
-          'digits': precision,
-          'numericInput' :  (type == 'money-decimal')
+          rightAlign: ['money', 'money-decimal'].includes(type),
+          allowMinus: true,
+          prefix: prefix,
+          suffix: suffix,
+          radixPoint: decimal,
+          digits: precision,
+          groupSeparator: thousands,
+          autoGroup: !!thousands,
         };
 
-        if (thousands) {
-          ipOptions['autoGroup'] = true;
-          ipOptions['groupSeparator'] = thousands;
-        }
-
-        $(element).inputmask(inputmaskType, ipOptions);
-        useInputMaskPlugin(element, ngModelCtrl, scope, modelSetter, mask);
+        $element.inputmask(inputmaskType, ipOptions);
+        useInputMaskPlugin($element, ngModelCtrl, scope, modelSetter, mask);
       }
-      else if (type == 'text' || type == 'tel' || type == 'string') {
-
-        let charToNumber = ['D','M', 'Y', 'H', 'm','s'];
-        let verifyMaskDateForText = (mask) => { charToNumber.forEach((c) => mask = mask.replaceAll(c,'9')); return mask};
+      else {
+        let charToNumber = ['D', 'M', 'Y', 'H', 'm', 's'];
+        let verifyMaskDateForText = (mask) => {
+          charToNumber.forEach((c) => (mask = mask.replaceAll(c, "9")));
+          return mask;
+        };
         mask = verifyMaskDateForText(mask);
 
         if(!attrs.maskPlaceholder){
           $element.mask(mask);
-          useMaskPlugin(element, ngModelCtrl, scope, modelSetter, removeMask);
-        }
-        else{
-          options = {};
-          options['placeholder'] = attrs.maskPlaceholder;
-          $(element).inputmask(mask, options);
-          if(removeMask){
-            useInputMaskPlugin(element, ngModelCtrl, scope, modelSetter, mask);
-          }
+          useMaskPlugin($element, ngModelCtrl, scope, modelSetter, false);
+        } else {
+          var options = {
+            placeholder: attrs.maskPlaceholder,
+          };
+          $element.inputmask(mask, options);
+          useInputMaskPlugin($element, ngModelCtrl, scope, modelSetter, mask);
         }
       }
-    }
-  }
+    },
+  };
 }
 
 function useInputMaskPlugin(element, ngModelCtrl, scope, modelSetter, mask){