cronapp-framework-js 2.9.1-SNAPSHOT.2 → 2.9.1

package/js/directives.js

@@ -349,7 +349,7 @@
             var content = element.html();
             var templateDyn    =
                 '<div ngf-drop="" ngf-drag-over-class="dragover">\
-           <img alt="$picture$" style="width: 100%;" ng-if="$ngModel$" data-ng-src="{{$ngModel$.startsWith(\'http\') || ($ngModel$.startsWith(\'/\') && $ngModel$.length < 1000)? $ngModel$ : \'data:image/png;base64,\' + $ngModel$}}">\
+           <img alt="$picture$" style="width: 86%;" ng-if="$ngModel$" data-ng-src="{{$ngModel$.startsWith(\'http\') || ($ngModel$.startsWith(\'/\') && $ngModel$.length < 1000)? $ngModel$ : \'data:image/png;base64,\' + $ngModel$}}">\
            <input id="$id$" aria-label="$userHtml$" ng-if="!$ngModel$" autocomplete="off" tabindex="-1" class="uiSelectRequired ui-select-offscreen" style="top: inherit !important; margin-left: 85px !important;margin-top: 50px !important; display: none;" type=text ng-model="$ngModel$" $required$>\
            <button id="$idbutton$" class="btn" ng-if="!$ngModel$" ngf-drop="" ngf-select="" ngf-change="cronapi.internal.setFile(\'$ngModel$\', $file)" ngf-pattern="\'image/*\'" ngf-max-size="$maxFileSize$">\
              $userHtml$\
@@ -403,6 +403,7 @@
             var content = element.html();
 
             var maxFileSize = "";
+            var acceptFile = attr.acceptFile || "'*.*'";
             if (attr.maxFileSize)
               maxFileSize = attr.maxFileSize;
             let fileInfo = attr.fileInfo ? `'${attr.fileInfo}'`: 'undefined';
@@ -410,7 +411,7 @@
             var templateDyn    = '\
                                 <div ng-show="!$ngModel$" ngf-drop="" ngf-drag-over-class="dragover">\
                                   <input id="$id$" aria-label="$userHtml$" ng-if="!$ngModel$" autocomplete="off" tabindex="-1" class="uiSelectRequired ui-select-offscreen" style="top: inherit !important;margin-left: 85px !important;margin-top: 50px !important; display: none;" type=text ng-model="$ngModel$" $required$>\
-                                  <button id="$idbutton$" class="btn" ngf-drop="" ngf-select="" ngf-change="cronapi.internal.uploadFile(\'$ngModel$\', $file, \'uploadprogress$number$\', $fileInfo$, $invalidFiles)" ngf-max-size="$maxFileSize$">\
+                                  <button id="$idbutton$" class="btn" ngf-drop="" ngf-select="" ngf-change="cronapi.internal.uploadFile(\'$ngModel$\', $file, \'uploadprogress$number$\', $fileInfo$, $invalidFiles)" ngf-max-size="$maxFileSize$" ngf-pattern="$acceptPattern$" ngf-accept="$acceptFile$">\
                                     $userHtml$\
                                   </button>\
                                   <div class="progress" data-type="bootstrapProgress" id="uploadprogress$number$" style="display:none">\
@@ -442,6 +443,8 @@
                 .split('$maxFileSize$').join(maxFileSize)
                 .split('$lblDownload$').join($translate.instant('download'))
                 .split('$fileInfo$').join(fileInfo)
+                .split('$acceptPattern$').join(acceptFile)
+                .split('$acceptFile$').join(acceptFile)
             );
 
             element.html(templateDyn);
@@ -1691,30 +1694,100 @@
               dataSource: {
                 batch: false, // Enable batch updates
                 transport: {
+                  isComponentInDocument: function(component) {
+                    if (!component) return false;
+                    return ($(document).has(component.element[0]).length);
+                  },
+                  getCurrentCallbackForPush: function(callback, component) {
+                    return callback || component;
+                  },
+                  pushAction: function(type, callback) {
+                    return (data) => {
+                      let cantRemoveDsEvents = ["read", "memorydelete", "overRideRefresh"];
+                      if (this.isComponentInDocument(options.refComponent)) {
+                        let current = this.getCurrentCallbackForPush(callback, options.refComponent);
+                        let acceptedMethod = current[type];
+
+                        if (acceptedMethod) {
+                          acceptedMethod(data);
+                        }
+                        else {
+                          options.fromRead = type === "read";
+                          options.refComponent.dataSource.read();
+                        }
+                      }
+                      else if (!cantRemoveDsEvents.includes(type)) {
+                        datasource.removeDataSourceEvents(this.options.dataSourceEventsPush);
+                      }
+                    }
+                  },
+                  push: function(callback) {
+                    if (!this.dataSourceEventsPush && datasource) {
+                      this.dataSourceEventsPush = {
+                        create: this.pushAction.bind(this)('pushUpdate', callback),
+                        update: this.pushAction.bind(this)('pushUpdate', callback),
+                        delete: this.pushAction.bind(this)('pushDestroy', callback),
+                        read: this.pushAction.bind(this)('read', callback),
+                        memorycreate: this.pushAction.bind(this)('pushUpdate', callback),
+                        memoryupdate: this.pushAction.bind(this)('pushUpdate', callback),
+                        memorydelete: this.pushAction.bind(this)('pushDestroy', callback)
+                      };
+
+                      datasource.addDataSourceEvents(this.dataSourceEventsPush);
+                    }
+                  },
                   read: function(read) {
                     read.data = read.data || {};
-                    // verify if lastSearchedPeriod is the same searched now. If so ignore search.
-                    if(needsToFetchData(read.data)) {
-                      lastSearchedPeriod = read.data;
 
-                      if(jQuery.isEmptyObject(read.data)) {
-                        read.data[options.schedulerDataModel.start.name] = schedulerStartDate;
+                    let doFetch = false;
+                    try {
+                      if (!options.kendoCallback) {
+                        options.kendoCallback = read;
+                        doFetch = true;
                       }
-                      let paramsOData = kendo.data.transports.odata.parameterMap(read.data, 'read');
-                      let orderBy = '';
-                      let fetchData = {};
-                      fetchData.params = paramsOData;
-                      datasource.fetch(fetchData, {
-                        success: function(data) {
-                          read.success(angular.copy(data));
-                        },
-                        canceled: function(data) {
-                          // notify the data source that the request failed
-                          read.error(angular.copy(data));
+                      else {
+                        if (options.fromRead) {
+                          if (!options.isReading) {
+                            options.isReading = true;
+                            options.kendoCallback.success(datasource.data);
+                          }
+                          else {
+                            read.error();
+                          }
                         }
-                      }, false);
-                    } else {
-                      read.error();
+                        else {
+                          doFetch = true;
+                        }
+                      }
+                    } finally {
+                      options.fromRead = false;
+                      options.isReading = false;
+                    }
+
+                    if (doFetch) {
+                      // verify if lastSearchedPeriod is the same searched now. If so ignore search.
+                      if(needsToFetchData(read.data)) {
+                        lastSearchedPeriod = read.data;
+
+                        if(jQuery.isEmptyObject(read.data)) {
+                          read.data[options.schedulerDataModel.start.name] = schedulerStartDate;
+                        }
+                        let paramsOData = kendo.data.transports.odata.parameterMap(read.data, 'read');
+                        let orderBy = '';
+                        let fetchData = {};
+                        fetchData.params = paramsOData;
+                        datasource.fetch(fetchData, {
+                          success: function(data) {
+                            read.success(angular.copy(data));
+                          },
+                          canceled: function(data) {
+                            // notify the data source that the request failed
+                            read.error(angular.copy(data));
+                          }
+                        }, false);
+                      } else {
+                        read.error();
+                      }
                     }
                   }.bind(this),
                   update: (update) => {
@@ -1854,6 +1927,7 @@
 
               // Get reference to the kendo.ui.Scheduler instance
               let scheduler = schedulerElement.data("kendoScheduler");
+              options.refComponent = scheduler;
               let lastView;
 
               scheduler.bind('navigate', function(e) {
@@ -1916,40 +1990,50 @@
             }
             return obj;
           },
-          generateToolbarButtonCall: function(toolbarButton, scope, options) {
+          removeSpecialChar: function(value) {
+            return value.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
+          },
+          getModelName: function(attrs) {
+            return attrs ? this.removeSpecialChar(attrs.ngModel) : 'subgrid';
+          },
+          generateToolbarButtonCall: function(toolbarButton, scope, options, attrs) {
             var buttonCall;
             var generateObjTemplate = function(functionToCall, title, iconClass) {
               var obj = {
                 template: function() {
-                  var buttonId = app.common.generateId();
-                  return createTemplateButton(buttonId, functionToCall, title, iconClass);
+                  return createTemplateButton(functionToCall, title, iconClass);
                 }.bind(this)
               };
               return obj;
             }.bind(this);
 
-            var createTemplateButton = function(buttonId, functionToCall, title, iconClass) {
+            var createTemplateButton = function(functionToCall, title, iconClass) {
               var template = '';
 
               let security = toolbarButton.security ? `cronapp-security="${toolbarButton.security}"` : "";
 
+              let modelName = this.getModelName(attrs);
+              let buttonType = this.removeSpecialChar(toolbarButton.type);
+              let buttonDesc = toolbarButton.title ? this.removeSpecialChar(toolbarButton.title): this.removeSpecialChar(toolbarButton.iconClass);
+              let buttonId = `${modelName}-${buttonType}-${buttonDesc}`;
+
               if (toolbarButton.type == "SaveOrCancelChanges") {
                 if (toolbarButton.saveButton)
-                  template = '<a #SECURITY# role="button" class="saveorcancelchanges k-button k-button-icontext k-grid-save-changes" id="#BUTTONID#" href="javascript:void(0)"><span class="k-icon k-i-check"></span>#TITLE#</a>';
+                  template = '<a #SECURITY# role="button" class="saveorcancelchanges k-button k-button-icontext k-grid-save-changes" data-id="#BUTTONID#" href="javascript:void(0)"><span class="k-icon k-i-check"></span>#TITLE#</a>';
                 else
-                  template = '<a #SECURITY# role="button" class="saveorcancelchanges k-button k-button-icontext k-grid-cancel-changes" id="#BUTTONID#" href="javascript:void(0)"><span class="k-icon k-i-cancel" ></span>#TITLE#</a>';
+                  template = '<a #SECURITY# role="button" class="saveorcancelchanges k-button k-button-icontext k-grid-cancel-changes" data-id="#BUTTONID#" href="javascript:void(0)"><span class="k-icon k-i-cancel" ></span>#TITLE#</a>';
               }
               else if (toolbarButton.type == "Blockly" || toolbarButton.type == "Customized") {
-                template = '<a #SECURITY# class="k-button k-grid-custom" id="#BUTTONID#" href="javascript:void(0)"><span class="#ICONCLASS#" ></span>#TITLE#</a>';
+                template = '<a #SECURITY# class="k-button k-grid-custom" data-id="#BUTTONID#" href="javascript:void(0)"><span class="#ICONCLASS#" ></span>#TITLE#</a>';
               }
               else if (toolbarButton.type == "Native" && toolbarButton.title == 'create') {
-                template = '<a #SECURITY# role="button" id="#BUTTONID#" class="k-button k-button-icontext k-grid-add" href="javascript:void(0)"><span class="k-icon k-i-plus"></span>{{"Add" | translate}}</a>';
+                template = '<a #SECURITY# role="button" data-id="#BUTTONID#" class="k-button k-button-icontext k-grid-add" href="javascript:void(0)"><span class="k-icon k-i-plus"></span>{{"Add" | translate}}</a>';
               }
               else if (toolbarButton.type == "Native" && toolbarButton.title == 'excel') {
-                template = '<a #SECURITY# role="button" id="#BUTTONID#" class="k-button k-button-icontext k-grid-excel" href="javascript:void(0)"><span class="k-icon k-i-file-excel"></span>{{"exportExcel" | translate}}</a>';
+                template = '<a #SECURITY# role="button" data-id="#BUTTONID#" class="k-button k-button-icontext k-grid-excel" href="javascript:void(0)"><span class="k-icon k-i-file-excel"></span>{{"exportExcel" | translate}}</a>';
               }
               else if (toolbarButton.type == "Native" && toolbarButton.title == 'pdf') {
-                template = '<a #SECURITY# role="button" id="#BUTTONID#" class="k-button k-button-icontext k-grid-pdf" href="javascript:void(0)"><span class="k-icon k-i-file-pdf"></span>{{"exportPDF" | translate}}</a>';
+                template = '<a #SECURITY# role="button" data-id="#BUTTONID#" class="k-button k-button-icontext k-grid-pdf" href="javascript:void(0)"><span class="k-icon k-i-file-pdf"></span>{{"exportPDF" | translate}}</a>';
               }
 
               template = template
@@ -1962,13 +2046,14 @@
               var cronappDatasource = eval(options.dataSourceScreen.entityDataSource.name);
 
               var waitRender = setInterval(function() {
-                if ($('#' + buttonId).length > 0) {
+                if ($(`[data-id=${buttonId}]`).length > 0) {
                   scope.safeApply(function() {
-                    var x = angular.element($('#' + buttonId ));
+                    var x = angular.element($(`[data-id=${buttonId}]`));
                     $compile(x)(scope);
+                    $(`[data-id=${buttonId}]`).attr('id', buttonId);
                   });
 
-                  $('#' + buttonId).click(function() {
+                  $(`[data-id=${buttonId}]`).click(function() {
 
                     var currentGrid = options.refComponent;
                     var selectedRows = [];
@@ -2187,7 +2272,7 @@
             return widthDevice;
           },
 
-          getColumns: function(options, datasource, scope, tooltips) {
+          getColumns: function(options, datasource, scope, tooltips, attrs) {
             var helperDirective = this;
 
             function getTemplate(column) {
@@ -2353,6 +2438,28 @@
 
             }
 
+            function setIdCommandButton(idForCommand, command) {
+              let waitRender = setInterval(() => {
+                if ($(`.k-grid-${idForCommand}`).is(":visible")) {
+                  clearInterval(waitRender);
+                  var currentGrid = options.refComponent;
+
+                  $(`.k-grid-${idForCommand}`).each((idx,elem) => {
+                    let $elem = $(elem);
+                    if (!$elem.attr('id')) {
+                      let item = currentGrid.dataItem($elem.closest('tr'));
+
+                      let modelName = this.getModelName(attrs);
+                      let key = item["_objectKey"];
+                      let id = `${modelName}-${command}-${key}`;
+                      $elem.attr('id', id);
+                    }
+                  });
+
+                }
+              }, 200);
+            }
+
             function getCommandForEditButtonDatabase(opt, command) {
               var cmd;
               let idForCommand = app.common.generateId();
@@ -2393,6 +2500,7 @@
                   text: { edit: " ", update: " ", cancel: " " },
                 };
               }
+              setIdCommandButton.bind(this)(idForCommand, command);
               return cmd;
             }
 
@@ -2424,6 +2532,7 @@
                   template: template
                 };
               }
+              setIdCommandButton.bind(this)(idForCommand, command);
               return cmd;
             }
 
@@ -2644,7 +2753,9 @@
                           'selectedRows': selectedRowsKeyOrObj
                         };
 
-                        cronappDatasource.goTo(itemAsObj);
+                        if (this.element.find('input[type=checkbox]').length === 0) {
+                          cronappDatasource.goTo(itemAsObj);
+                        }
                         scope.$eval(call, contextVars);
                         return;
                       }
@@ -2655,6 +2766,7 @@
                     attributes: getAttributes(column)
                   };
                   columns.push(addColumn);
+                  setIdCommandButton.bind(this)(idForCommand, column.dataType);
                 }
                 else if (column.dataType == "Selectable") {
                   var checkColumn = {
@@ -2680,7 +2792,7 @@
 
             return pageable;
           },
-          getToolbar: function(options, scope) {
+          getToolbar: function(options, scope, attrs) {
 
             function generateToolbarTemplate(toolbarButton) {
               let security = toolbarButton.security ? `cronapp-security="${toolbarButton.security}" class` : "class";
@@ -2706,7 +2818,7 @@
                     else {
                       toolbarButton.methodCall += "cronapi.internal.focusFormInput();"
                     }
-                    var button = this.generateToolbarButtonCall(toolbarButton, scope, options);
+                    var button = this.generateToolbarButtonCall(toolbarButton, scope, options, attrs);
                     toolbar.push(button);
 
                     if (!options.hideModalButtons) {
@@ -2714,7 +2826,7 @@
                     }
                   }
                   else {
-                    let toolbarOp = this.generateToolbarButtonCall(toolbarButton, scope, options);
+                    let toolbarOp = this.generateToolbarButtonCall(toolbarButton, scope, options, attrs);
                     toolbar.push(toolbarOp);
                   }
                 }
@@ -2726,12 +2838,12 @@
                 }
               }
               else if (toolbarButton.type == "Blockly" || toolbarButton.type == "Customized") {
-                var buttonBlockly = this.generateToolbarButtonCall(toolbarButton, scope, options);
+                var buttonBlockly = this.generateToolbarButtonCall(toolbarButton, scope, options, attrs);
                 toolbar.push(buttonBlockly);
               }
               else if (toolbarButton.type == "SaveOrCancelChanges") {
                 if (options.editable != 'no') {
-                  var buttonSaveOrCancel = this.generateToolbarButtonCall(toolbarButton, scope, options);
+                  var buttonSaveOrCancel = this.generateToolbarButtonCall(toolbarButton, scope, options, attrs);
                   toolbar.push(buttonSaveOrCancel);
                 }
               }
@@ -2955,9 +3067,9 @@
 
             var datasource = app.kendoHelper.getDataSource(options.dataSourceScreen.entityDataSource, scope, options.allowPaging, options.pageCount, options.columns, options.groupings);
 
-            var columns = this.getColumns(options, datasource, scope, tooltips);
+            var columns = this.getColumns(options, datasource, scope, tooltips, attrs);
             var pageAble = this.getPageAble(options);
-            var toolbar = this.getToolbar(options, scope);
+            var toolbar = this.getToolbar(options, scope, attrs);
             var editable = this.getEditable(options);
             var filterable = anyFilterableColumn(options);
 
@@ -3021,7 +3133,10 @@
               },
               change: function(e) {
                 var item = this.dataItem(this.select());
-                setToActiveInCronappDataSource.bind(this)(item);
+                let manyHiddenSelect = $('[data-component="crn-enterprise-dynamic-combobox"]').length > 1 && !$('[data-component="crn-enterprise-dynamic-combobox"]').is(':visible');
+                if (!manyHiddenSelect) {
+                  setToActiveInCronappDataSource.bind(this)(item);
+                }
                 var cronappDatasource = this.dataSource.transport.options.cronappDatasource;
                 if(options.fieldType && options.fieldType === 'key'){
                   cronappDatasource.active = helperDirective.changeObjectField(cronappDatasource, cronappDatasource.active);
@@ -3057,6 +3172,30 @@
                 }
 
                 compileListing(e);
+
+                $(".k-command-cell a[class*='k-grid-']").each((idx, elem) => {
+                  let $elem = $(elem);
+                  if (!$elem.attr('id')) {
+                    let item = this.dataItem($elem.closest('tr'));
+                    let command = 'destroy';
+                    if ($elem.hasClass('k-grid-update')) {
+                      command = 'update';
+                    }
+                    else if ($elem.hasClass('k-grid-cancel')) {
+                      command = 'cancel';
+                    }
+                    else if ($elem.hasClass('k-grid-edit')) {
+                      command = 'edit';
+                    }
+
+                      let modelName = helperDirective.getModelName(attrs);
+                      if (item && item["_objectKey"]) {
+                      let key = item["_objectKey"];
+                      let id = `${modelName}-${command}-${key}`;
+                      $elem.attr('id', id);
+                    }
+                  }
+                });
               },
               cancel: function(e) {
                 var cronappDatasource = this.dataSource.transport.options.cronappDatasource;
@@ -3247,6 +3386,35 @@
         }
       })
 
+      .directive('crnSkin', function($compile, $http) {
+        return {
+          restrict: 'A',
+          link: function(scope, element, attrs, ctrl) {
+            if (attrs.crnSkin) {
+              $http.get(attrs.crnSkin, {cache: true}).then((response) => {
+                if (response.data) {
+                  let data = response.data;
+                  if (data.startsWith(":root{")) {
+                    data = data.substring(6);
+                  }
+                  if (data.endsWith("}")) {
+                    data = data.substring(0,data.length-2);
+                  }
+
+                  $element = $(element);
+                  let style = $element.attr("style")||"";
+                  if (style) {
+                    style += ", ";
+                  }
+                  style += data;
+                  $element.attr("style", style);
+                }
+              });
+            }
+          }
+        }
+      })
+
       .directive('cronTreeView', ['$compile', '$translate', function($compile, $translate) {
         return {
           restrict: 'E',
@@ -3308,9 +3476,10 @@
             let waitingPromise = false;
             let datasource = new kendo.data.HierarchicalDataSource({
               transport: {
-                push: function(callback) {
+                push: async function(callback) {
+                  let cronappDatasource = await this.options.cronappDatasource();
 
-                  if (!helperDirective.dataSourceEventsPush && this.options.cronappDatasource) {
+                  if (!helperDirective.dataSourceEventsPush && cronappDatasource) {
                     helperDirective.dataSourceEventsPush = {
                       create: function(data) {
 
@@ -3345,11 +3514,13 @@
                       }.bind(this)
                     };
 
-                    this.options.cronappDatasource.addDataSourceEvents(helperDirective.dataSourceEventsPush);
+                    cronappDatasource.addDataSourceEvents(helperDirective.dataSourceEventsPush);
                   }
                 },
 
-                read:  function (e) {
+                read: async function (e) {
+
+                  let cronappDatasource = await this.options.cronappDatasource();
 
                   let conditionIsEmpty = (condition) => {
                     let result = true;
@@ -3365,9 +3536,6 @@
                     return result;
                   };
 
-
-                  let cronappDatasource = this.options.cronappDatasource;
-
                   for (key in e.data)
                     if(e.data[key] == undefined)
                       delete e.data[key];
@@ -3446,7 +3614,7 @@
                 },
                 options: {
                   fromRead: false,
-                  cronappDatasource: app.kendoHelper.getCorrectlyDS(options.dataSourceScreen.name, scope)
+                  cronappDatasource: async () => await app.kendoHelper.getCorrectlyDSPromise(options.dataSourceScreen.name, scope)
                 }
               },
               schema: schema
@@ -3473,10 +3641,10 @@
               dataSource: helperDirective.getDataSource(options, scope, ngModelCtrl),
               dataTextField: options.textField,
               dataImageUrlField: options.imageUrlField,
-              change: function(e) {
+              change: async function(e) {
                 let item = this.dataItem(this.select());
 
-                let cronappDatasource = this.dataSource.transport.options.cronappDatasource;
+                let cronappDatasource = await this.dataSource.transport.options.cronappDatasource();
                 scope.safeApply(cronappDatasource.goTo(item));
 
                 if(options.fieldType && options.fieldType === 'key')
@@ -3527,6 +3695,8 @@
             var combobox;
             if (select.dontAllowOutsideList === true) {
               combobox = $element.kendoDropDownList(options).data('kendoDropDownList');
+              let $span = parent.find('span').first();
+              $span.on('focus', () => cronapi.internal.selectContent($span.find('.k-input')[0]));
             }
             else {
               combobox = $element.kendoComboBox(options).data('kendoComboBox');
@@ -3604,7 +3774,7 @@
         };
       })
 
-      .directive('cronDynamicSelect', function ($compile, $timeout, $parse, $translate) {
+      .directive('cronDynamicSelect', function ($compile, $timeout, $parse, $translate, $log) {
         return {
           restrict: 'E',
           replace: true,
@@ -3659,10 +3829,75 @@
               return null;
             }
           },
+          toComboType: function (attrs, parent, select, combobox) {
+            let $span = parent.find('span').first();
+            $span.on('focus', () => cronapi.internal.selectContent($span.find('span.ng-scope')[0]));
+
+            switch (select.type) {
+              case "autoComplete":
+                let ignoreKeysForClick = ['Tab', 'Shift', 'CapsLock', 'Control', 'Alt', 'Escape', 'PageDown', 'PageUp',
+                    'Backspace', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Delete', 'Insert', 'Enter', ' '];
+                let ignoreKeysForSearch = ['Tab', 'Shift', 'CapsLock', 'Control', 'Alt', 'Escape', 'PageDown', 'PageUp',
+                    'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Insert'];
+                $span.attr("contenteditable", "true");
+                let $inputSearch = $(`input[aria-owns=${attrs.id}_listbox]`);
+                let $divOfInputSearch = $inputSearch.parent();
+                let $bodySearchDropdown = $(`#${attrs.id}-list`);
+
+                $divOfInputSearch.hide();
+
+                $span.on('keyup', (e) => {
+                  if (document.activeElement === $span[0] && !ignoreKeysForSearch.includes(e.originalEvent.key)) {
+                    $inputSearch.val($span.find('span.ng-scope').text());
+                  }
+
+                  if (!$span.hasClass('k-state-border-down') && !ignoreKeysForClick.includes(e.originalEvent.key)) {
+                    $span.trigger('click');
+                  }
+                });
+
+                $span.on('focusout', ()=> {
+                  if (!$bodySearchDropdown.is(':visible')) {
+                    focusoutSpanForced();
+                  }
+                });
+
+                $span.on('click', () => verifyDropdownSearchOff());
+
+                let focusoutSpanForced = () => {
+                  $span.find('span.ng-scope').text(combobox.dataItem()[select["dataTextField"]]);
+                  combobox.search();
+                };
+
+                let verifyDropdownSearchOff = () => {
+                  let verifyInterval = setInterval(() => {
+                    if (!$bodySearchDropdown.is(':visible')) {
+                      clearInterval(verifyInterval);
+                      if(document.activeElement !== $span[0]) {
+                        focusoutSpanForced();
+                      }
+                    }
+                  });
+                }
+                break;
+              default:
+                $span.on('keydown', (e) => {
+                  if (e.originalEvent.key === 'ArrowDown' || e.originalEvent.key === 'ArrowUp') {
+                    e.stopImmediatePropagation();
+                    $span.trigger('click');
+                    return;
+                  }
+                });
+                break;
+            }
+          },
           link: async function (scope, element, attrs, ngModelCtrl) {
             await cronapi.internal.skipIterationLoop();
             var modelGetter = $parse(attrs['ngModel']);
-            var modelSetter = modelGetter.assign;
+            var modelSetter = (scope, value) => {
+              $log.debug("modelSetter | " + attrs['id'] + " | " + value);
+              modelGetter.assign(scope, value);
+            }
             var select = {};
             var self = this;
             var parentDS = {};
@@ -3701,6 +3936,8 @@
             var _compileAngular = this.compileAngular;
             options.virtual = {};
             options.virtual.itemHeight = 26;
+            let lastValueMapper;
+
             if (options.dataSource.pageSize && options.dataSource.pageSize > 0) {
               options.height = (options.dataSource.pageSize) * options.virtual.itemHeight / 4;
               options.virtual.mapValueTo = 'dataItem';
@@ -3708,60 +3945,113 @@
               /**
                * O método ValueMapper é utilizado para buscar um valor que não esteja em cache.
                */
-              options.virtual.valueMapper = async function(options) {
-                let waitRenderCombo = setInterval(() => {
-                  var _combobox = _options.combobox;
-                  if (_combobox) {
-                    clearInterval(waitRenderCombo);
-                    if (options.value || options.value === "") {
-                      if(_combobox.options.optionLabel[_combobox.options.dataValueField] !== null && options.value === ""){
-                        options.success(null);
+
+              let waitRender = ()=> {
+                return new Promise((resolve) => {
+                  let waitRenderCombo;
+                  if (!_options.combobox) {
+                    waitRenderCombo = setInterval(()=> {
+                      if (_options.combobox) {
+                        clearInterval(waitRenderCombo);
+                        resolve();
                       }
-                      else{
-                        _combobox.isEvaluating = true;
-                        var _dataSource = _options.dataSource.transport.options.cronappDatasource;
-                        if (options.value === undefined || options.value === null || options.value === "") {
-                          options.success(null);
+                    });
+                  } else {
+                    resolve();
+                  }
+                });
+              }
+
+              options.virtual.valueMapper = async function(options) {
+                await waitRender();
+
+                $log.debug("valueMapper | " + attrs['id'] + " | " + options.value);
+
+                if (lastValueMapper && !lastValueMapper.completed) {
+                  $log.debug("valueMapper Canceling | " + lastValueMapper.value);
+                  lastValueMapper.canceled = true;
+                }
+
+                lastValueMapper = options;
+
+                var _combobox = _options.combobox;
+                if (options.canceled) {
+                  $log.debug("valueMapper CANCELED | " + options.value);
+                  return;
+                }
+
+                if (options.value || options.value === "") {
+                  if(_combobox.options.optionLabel[_combobox.options.dataValueField] !== null && options.value === ""){
+                    options.completed = true;
+                    $log.debug("valueMapper.success | " + attrs['id'] + " | NULL");
+                    options.success(null);
+                  }
+                  else{
+                    _combobox.isEvaluating = true;
+                    var _dataSource = _options.dataSource.transport.options.cronappDatasource;
+                    if (options.value === undefined || options.value === null || options.value === "") {
+                      options.completed = true;
+                      $log.debug("valueMapper.success | " + attrs['id'] + " | NULL");
+                      options.success(null);
+                      _combobox.isEvaluating = false;
+                    } else {
+                      $log.debug("valueMapper.findObj | " + attrs['id'] + " | " + options.value);
+                      _dataSource.findObj([options.value], false, function(data) {
+                        options.completed = true;
+
+                        if (options.canceled) {
+                          $log.debug("valueMapper CANCELED | " + options.value);
                           _combobox.isEvaluating = false;
-                        } else {
-                          _dataSource.findObj([options.value], false, function(data) {
-                            if (Array.isArray(data)) {
-                              data = data[0];
+                          return;
+                        }
+                        if (Array.isArray(data)) {
+                          data = data[0];
+                        }
+                        $log.debug("valueMapper.success | " + attrs['id'] + " | " + data);
+                        options.success(data);
+                        _combobox.isEvaluating = false;
+
+                        if (select.changeCursor) {
+                          scope.safeApply(function() {
+                            if (options.canceled) {
+                              $log.debug("valueMapper CANCELED | " + options.value);
+                              return;
                             }
-                            options.success(data);
-                            _combobox.isEvaluating = false;
-
-                            if (select.changeCursor) {
-                              scope.safeApply(function() {
-                                if (data != null) {
-                                  var found = _goTo(_scope, _combobox, data);
-                                  if (!found) {
-                                    _dataSource.data.push(data);
-                                    found = _goTo(_scope, _combobox, data);
-                                  }
-                                  if (found) {
-                                    modelSetter(_scope, found[select.dataValueField]);
-                                  }
-                                } else {
-                                  modelSetter(_scope, null);
-                                }
-                              });
-                            } else {
-                              if (data == null) {
-                                modelSetter(_scope, null);
+                            if (data != null) {
+                              var found = _goTo(_scope, _combobox, data);
+                              if (!found) {
+                                _dataSource.data.push(data);
+                                found = _goTo(_scope, _combobox, data);
+                              }
+                              if (found) {
+                                modelSetter(_scope, found[select.dataValueField]);
                               }
+                            } else {
+                              modelSetter(_scope, null);
                             }
-                          }, function() {
-                            options.success(null);
-                            _combobox.isEvaluating = false;
-                          }, [combobox.options.dataValueField]);
+                          });
+                        } else {
+                          if (data == null) {
+                            modelSetter(_scope, null);
+                          }
                         }
-                      }
-                    } else {
-                      options.success(null);
+                      }, function() {
+                        options.completed = true;
+                        if (options.canceled) {
+                          $log.debug("valueMapper CANCELED | " + options.value);
+                          _combobox.isEvaluating = false;
+                          return;
+                        }
+                        $log.debug("valueMapper.success | " + attrs['id'] + " | NULL");
+                        options.success(null);
+                        _combobox.isEvaluating = false;
+                      }, [combobox.options.dataValueField]);
                     }
                   }
-                });
+                } else {
+                  $log.debug("valueMapper.success | " + attrs['id'] + " | NULL");
+                  options.success(null);
+                }
               };
             }
 
@@ -3813,44 +4103,29 @@
 
             $(combobox.wrapper).children('.k-dropdown-wrap').children('.k-select').before(inputSelect);
 
-            var forceChangeModel = function(value) {
-              if (combobox.isEvaluating) {
-                setTimeout(function() {
-                  forceChangeModel(value);
-                }, 100);
-                return;
-              }
+            this.toComboType(attrs, parent, select, combobox);
+
+            var forceChangeModel = async function(value) {
+
+              $log.debug("forceChangeModel | " + attrs['id'] + " | " + value);
 
               if (value === undefined) {
                 value = null;
               }
 
-              combobox.value(value);
+              await combobox.value(value);
 
               if (select.changeCursor) {
-                if (!combobox.isEvaluating) {
+                scope.safeApply(() => {
                   if (value == null || value == undefined) {
                     dataSourceScreen.active = {};
                     dataSourceScreen.cursor = -1;
                     modelSetter(_scope, null);
-                  } else {
-                    var found = _goTo(_scope, combobox, combobox.dataItem());
-
-                    if (!found) {
-                      dataSourceScreen.findObj([value], false, (dataresult) => {
-                        if (Array.isArray(dataresult)) {
-                          dataresult = dataresult[0];
-                        }
-                        if (dataresult) {
-                          dataSourceScreen.data.push(dataresult);
-                          _goTo(_scope, combobox, dataresult);
-                          modelSetter(_scope, value);
-                        }
-                      });
-                    }
                   }
-                }
-
+                  else {
+                    _goTo(_scope, combobox, combobox.dataItem());
+                  }
+                });
               }
             }
 
@@ -3967,13 +4242,19 @@
              */
             if (ngModelCtrl) {
               ngModelCtrl.$formatters.push(function (value) {
+                $log.debug("$formatters | " + attrs['id'] + " | " + value);
                 var x = combobox.value();
-                if (value === undefined)
+                if (value === undefined || (value === "" && select.optionLabelValue === undefined)) {
                   value = null;
-                return forceChangeModel(value);
+                  modelSetter(_scope, value);
+                }
+                forceChangeModel(value);
+
+                return value;
               });
 
               ngModelCtrl.$parsers.push(function (value) {
+                $log.debug("$parsers | " + attrs['id'] + " | " + value);
                 if ((typeof value === 'boolean') || value) {
                   if (combobox.options.valuePrimitive === true) {
                     if (typeof value == 'string') {
@@ -4018,7 +4299,9 @@
               combobox.dataSource.transport.options.initRead = true;
 
               if (select.initValue != undefined && select.initValue != null) {
-                modelSetter(_scope, select.initValue);
+                setTimeout(()=> {
+                  modelSetter(_scope, select.initValue);
+                },0);
                 combobox.options.lazyFirstInitialValue = true;
               }
               else if (select.firstValue) {
@@ -4464,6 +4747,8 @@
 
             config.slide = attrs.ngSlide ? function (){scope.$eval(attrs.ngSlide)}: undefined;
             var slider = $(element).kendoSlider(config).data("kendoSlider");
+            slider._drag.element[0].title = config.dragHandleTitle;
+            slider._drag.element[1].title = config.dragHandleTitle;
 
             const resizeObserver = new ResizeObserver(entries => {
               slider.resize();
@@ -4649,7 +4934,9 @@
           require: 'ngModel',
           link: function(scope, elem, attrs, ngModelCtrl) {
 
-            attrs.theme = $(elem).find('i').attr('xattr-theme');
+            attrs.theme = $(elem).find('i').attr('icon-theme');
+            attrs.classElem = $(elem).find('i').attr('class');
+            attrs.iconSize = $(elem).find('i').attr('icon-size');
             attrs.iconOn = $(elem).find('i').attr('class');
 
             var $elem = $(elem);
@@ -4689,14 +4976,14 @@
             function changeStars(value) {
               for (var i=1;i<=5;i++) {
                 stars[i-1].removeClass(attrs.iconOff || 'fa fa-star-o');
-                stars[i-1].removeClass(attrs.iconOn);
-                stars[i-1].removeClass(attrs.theme);
+                stars[i-1].removeClass(attrs.classElem);
+                stars[i-1].removeClass(attrs.iconTheme);
                 if (i <= value) {
-                  stars[i-1].addClass(attrs.iconOn);
-                  stars[i-1].addClass(attrs.theme);
+                  stars[i-1].addClass(attrs.classElem);
                 } else {
                   stars[i-1].addClass(attrs.iconOff || 'fa fa-star-o');
                   stars[i-1].addClass(attrs.theme);
+                  stars[i-1].addClass(attrs.iconSize);
                 }
               }
               return value;
@@ -4710,79 +4997,42 @@
 
       .directive('cronDynamicMenu', ['$compile', '$translate', function ($compile, $translate) {
         'use strict';
-        const populateSubitems = (item) => {
-          var subitem = item.menuItems;
-          var templateSubitens = '';
-
-          subitem.forEach((subitem) => {
-            var securitySubitem = (subitem.security && subitem.security != null) ? ' cronapp-security="' + subitem.security + '" ' : '';
-            var actionSubitem = (subitem.action && subitem.action != null) ? ' ng-click="' + subitem.action + '" ' : '';
-            var hideSubitem = (subitem.hide && subitem.hide != null) ? ' ng-hide="' + subitem.hide + '" ' : '';
-            var iconClassSubitem = (subitem.iconClass && subitem.iconClass != null) ? '<i class="' + subitem.iconClass + '"></i>&nbsp;' : '';
-            var titleSubitem = '<span></span>';
-            var caretSubitem = (subitem.menuItems && Array.isArray(subitem.menuItems) && (subitem.menuItems.length > 0)) ? '<span class="caret submenu"></span>' : '';
-
-            if (subitem.title) {
-              titleSubitem = '<span>' + $translate.instant(subitem.title) + '</span>';
-            }
-
-            if (subitem.menuItems.length > 0) {
-              templateSubitens = templateSubitens + '<li class="dropdown-submenu">\
-                      <a class="dropdown-item dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" href=""' + securitySubitem + actionSubitem + '>' + iconClassSubitem + titleSubitem + caretSubitem + '</a>\
-                      ' + populateItems(subitem.menuItems) + '\
-                    </li>';
-
-            } else {
-              templateSubitens = templateSubitens + '<li class="dropdown-submenu">\
-                      <a  role="button" aria-haspopup="true" aria-expanded="false" href=""' + securitySubitem + actionSubitem + '>' + iconClassSubitem + titleSubitem + caretSubitem + '</a>\
-                    </li>';
-            }
-          });
-
-          if (templateSubitens != '') {
-            templateSubitens = '<ul class="dropdown-menu">' + templateSubitens + '</ul>';
-          }
-
-          return templateSubitens;
-        };
-
         const populateItems = (items) => {
           var templateItens = '';
 
           if (items && items.length > 0 && Array.isArray(items)) {
             items.forEach(function (item) {
 
-              var security = (item.security && item.security != null) ? ' cronapp-security="' + item.security + '" ' : '';
-              var action = (item.action && item.action != null) ? ' ng-click="' + item.action + '" ' : '';
-              var hide = (item.hide && item.hide != null) ? ' ng-hide="' + item.hide + '" ' : '';
-              var iconClass = (item.iconClass && item.iconClass != null) ? '<i class="' + item.iconClass + '"></i>&nbsp;' : '';
-              var title = '<span></span>';
-              var caret = (item.menuItems && Array.isArray(item.menuItems) && (item.menuItems.length > 0)) ? '<span class="caret submenu"></span>' : '';
+              var security = (item.security && item.security != null) ? ` cronapp-security="${item.security }" ` : '';
+              var action = (item.action && item.action != null) ? ` ng-click="${item.action}" ` : '';
+              var hide = (item.hide && item.hide != null) ? ` ng-hide="${item.hide}"  ` : '';
+              var iconClass = (item.iconClass && item.iconClass != null) ? `<i class="${item.iconClass}" id="menu-tag-i-${item.id}"></i>&nbsp;` : '';
+              var title = `<span id="menu-tag-span-${item.id}"></span>`;
+              var caret = (item.menuItems && Array.isArray(item.menuItems) && (item.menuItems.length > 0)) ? `<span class="caret submenu" id="menu-tag-span-sub-${item.id}"></span>` : '';
 
               if (item.title) {
-                title = '<span>' + $translate.instant(item.title) + '</span>';
+                title =  `<span id="menu-tag-span-${item.id}">${$translate.instant(item.title)}</span>`;
               }
 
               if (item.menuItems.length > 0) {
-                templateItens = templateItens + '\
-                        <li class="dropdown-submenu" ' + security + hide + '> \
-                          <a  href="" ' + action + ' class="dropdown-item dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">' + iconClass + title + caret + ' </a> \
-                            ' + populateSubitems(item) + '\
-                        </li>';
+                templateItens = templateItens + `
+                <li class="dropdown-submenu" ${security}${hide} id="menu-tag-li-sub-${item.id}"> \
+                  <a  href="" ${action} id="menu-tag-a-sub-${item.id}" class="dropdown-item dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> ${iconClass} ${title} ${caret} </a> \
+                    ${populateItems(item.menuItems)}\
+                </li>`;
               } else {
-                templateItens = templateItens + '\
-                        <li class="dropdown-submenu" ' + security + hide + '> \
-                          <a  href="" ' + action + ' class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">' + iconClass + title + caret + ' </a> \
-                        </li>';
+                templateItens = templateItens + `
+                <li class="dropdown-submenu" ${security} ${hide} id="menu-tag-li-${item.id}"> \
+                  <a  href="" ${action} id="menu-tag-a-${item.id}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">${iconClass} ${title} ${caret} </a> 
+                </li>`;
               }
 
             });
 
             if (templateItens != '') {
-              templateItens = '<ul class="dropdown-menu">' + templateItens + '</ul>';
+              templateItens = `<ul class="dropdown-menu" id="menu-tag-ul-${items[0].id}">${templateItens}</ul>`;
             }
           }
-
           return templateItens;
         }
         return {
@@ -4794,24 +5044,24 @@
 
               menuOptions.subMenuOptions.forEach(function (menu) {
 
-                var security = (menu.security && menu.security != null) ? ' cronapp-security="' + menu.security + '" ' : '';
-                var action = (menu.action && menu.action != null) ? ' ng-click="' + menu.action + '" ' : '';
-                var caret = (menu.menuItems && Array.isArray(menu.menuItems) && (menu.menuItems.length > 0)) ? '<span class="caret"></span>' : '';
-                var hide = (menu.hide && menu.hide != null) ? ' ng-hide="' + menu.hide + '" ' : '';
-                var iconClass = (menu.iconClass && menu.iconClass != null) ? '<i class="' + menu.iconClass + '"></i>&nbsp;' : '';
-                var title = '<span></span>'
+                var security = (menu.security && menu.security != null) ? ` cronapp-security="${menu.security}" ` : '';
+                var action = (menu.action && menu.action != null) ? ` ng-click="${menu.action }" ` : '';
+                var caret = (menu.menuItems && Array.isArray(menu.menuItems) && (menu.menuItems.length > 0)) ? `<span class="caret" id="menu-tag-span-sub-${menu.id}"></span>` : '';
+                var hide = (menu.hide && menu.hide != null) ? ` ng-hide="${menu.hide}" ` : '';
+                var iconClass = (menu.iconClass && menu.iconClass != null) ? `<i class="${menu.iconClass}"></i>&nbsp;` : '';
+                var title = `<span id="menu-tag-span-${menu.id}"></span>`;
 
                 if (menu.title) {
-                  title = '<span>' + $translate.instant(menu.title) + '</span>';
+                  title = `<span id="menu-tag-span-${menu.id}">${$translate.instant(menu.title)}</span>`;
                 }
 
-                template = template + '\
-                      <li class="dropdown nav-item '+ (isVertical ? 'col-md-12 padding-0' : '') + '"' + security + hide + '>\
-                        <a href="" ' + action + ' class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">\
-                        ' + iconClass + title + caret + '\
-                        </a> \
-                        ' + populateItems(menu.menuItems) + '\
-                      </li>';
+                template = template + `
+                <li class="dropdown nav-item ${(isVertical ? 'col-md-12 padding-0' : '')}" ${security} ${hide} id="menu-tag-li-sub-${menu.id}">
+                  <a href="" ${action} id="menu-tag-a-sub-${menu.id}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">\
+                  ${iconClass} ${title} ${caret}
+                  </a>
+                  ${populateItems(menu.menuItems)}
+                </li>`;
 
               })
             }
@@ -4819,63 +5069,66 @@
             return template;
           },
           link: function (scope, element, attrs) {
-            $translate.onReady(() => {
-              //Somente fica na vertical se for o menu principal da IDE (E estiver configurado para isso)
-              let isVertical = element.closest('.crn-navigator-vertical').length;
-
-              var TEMPLATE_MAIN = '<ul  class="nav navbar-nav ' + (isVertical ? 'col-md-12 padding-0' : '') + ' "></ul>';
-              var options = {};
-              try {
-                options = JSON.parse(attrs.options);
-              } catch (e) {
-                console.log('CronDynamicMenu: Invalid configuration!')
-              }
-
-              var main = $(TEMPLATE_MAIN);
-              main.attr('id', attrs.id);
+            var populateMenu = this.populateMenu;
+            attrs.$observe('options', function(attrOptions) {
+              $translate.onReady(() => {
+                //Somente fica na vertical se for o menu principal da IDE (E estiver configurado para isso)
+                let isVertical = element.closest('.crn-navigator-vertical').length;
+
+                var options = {};
+                try {
+                  options = JSON.parse(attrOptions);
+                } catch (e) {
+                  console.log('CronDynamicMenu: Invalid configuration!');
+                }
 
-              var menus = this.populateMenu(options, isVertical);
-              main.append(menus);
-              if (isVertical) {
-                main.append($('#navbar2 li:first').addClass('col-md-12 padding-0'));
-              }
+                let baseId = options && options.subMenuOptions && options.subMenuOptions.length ? options.subMenuOptions[0].id : "first";
+                var TEMPLATE_MAIN = `<ul id="menu-tag-ul-base-${baseId}" class="nav navbar-nav ${(isVertical ? 'col-md-12 padding-0' : '')}" ></ul>`;
+                var main = $(TEMPLATE_MAIN);
+                main.attr('id', attrs.id);
 
-              var newElement = angular.element(main);
-              element.html('');
-              element.append(main);
-              element.attr('id', null);
-              $compile(newElement)(scope);
+                var menus = populateMenu(options, isVertical);
+                main.append(menus);
+                if (isVertical) {
+                  main.append($('#navbar2 li:first').addClass('col-md-12 padding-0'));
+                }
 
-              var multilevelAction = attrs.multilevelAction;
+                var newElement = angular.element(main);
+                element.html('');
+                element.append(main);
+                element.attr('id', null);
+                $compile(newElement)(scope);
 
-              if (multilevelAction === 'hover') {
-                $('.dropdown-menu .dropdown-submenu').on('mouseover', function () {
-                  var subMenu = $(this).children('ul.dropdown-menu');
-                  subMenu.addClass('displayBlock');
-                });
+                var multilevelAction = attrs.multilevelAction;
 
-                $('.dropdown-menu .dropdown-submenu').on('mouseout', function () {
-                  var subMenu = $(this).children('ul.dropdown-menu');
-                  subMenu.removeClass('displayBlock');
-                });
-              }
-              if (multilevelAction === 'click') {
-                $('.dropdown-menu a.dropdown-toggle').on('click', function (e) {
-                  if (!$(this).next().hasClass('show')) {
-                    $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
-                  }
-                  var $subMenu = $(this).next(".dropdown-menu");
-                  $subMenu.toggleClass('show');
-                  $(this).parents('li.nav-item.dropdown').on('hidden.bs.dropdown', function (e) {
-                    $('.dropdown-submenu .show').removeClass("show");
+                if (multilevelAction === 'hover') {
+                  $('.dropdown-menu .dropdown-submenu').on('mouseover', function () {
+                    var subMenu = $(this).children('ul.dropdown-menu');
+                    subMenu.addClass('displayBlock');
                   });
-                  return false;
-                });
-              }
 
+                  $('.dropdown-menu .dropdown-submenu').on('mouseout', function () {
+                    var subMenu = $(this).children('ul.dropdown-menu');
+                    subMenu.removeClass('displayBlock');
+                  });
+                }
+                if (multilevelAction === 'click') {
+                  $('.dropdown-menu a.dropdown-toggle').on('click', function (e) {
+                    if (!$(this).next().hasClass('show')) {
+                      $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
+                    }
+                    var $subMenu = $(this).next(".dropdown-menu");
+                    $subMenu.toggleClass('show');
+                    $(this).parents('li.nav-item.dropdown').on('hidden.bs.dropdown', function (e) {
+                      $('.dropdown-submenu .show').removeClass("show");
+                    });
+                    return false;
+                  });
+                }
+              });
             });
           }
-        }
+        };
       }])
 
       .directive('cronBreadcrumbs', function () {
@@ -4884,6 +5137,7 @@
         restrict: 'E',
         replace: true,
         link: function (scope, element, attrs) {
+
           let crnDelimiterIcon = attrs.crnDelimiterIcon;
           let crnTypeMenu = attrs.typeMenu;
           let idMenu = attrs.idMenu ? attrs.idMenu : null;
@@ -4900,20 +5154,28 @@
             actionBlockly = scope.$eval(actionBlockly);
             breadcrumb = await actionBlockly();
 
+            var onclick = async (e) => {
+              if (e.item.action)  {
+                e.item.action();
+              }
+            };
+
             $(`#${idBreadcrumb}`).kendoBreadcrumb({
               items: breadcrumb,
               delimiterIcon: crnDelimiterIcon,
-              navigational: true
+              navigational: true,
+              click : onclick
             });
           }
 
+
           if (actionBlockly && crnTypeMenu === "idBloco") {
             functionActionBlockly()
 
           } else {
             setTimeout(() => {
               // Capturar o  json do menu
-              let menuOptions = $(`#${idMenu}`)[0].children[0].attributes['options'];
+              let menuOptions = $(`#${idMenu}`)[0].parentElement.attributes['options'];
               menuOptions = JSON.parse(menuOptions.value);
               let subMenuOptions = menuOptions.subMenuOptions;
 
@@ -5166,94 +5428,96 @@
       .directive('signaturePad', function($compile, $window) {
         'use strict';
 
-        var signaturePad, canvas, element, EMPTY_IMAGE = null;
+        var canvas, element, EMPTY_IMAGE = null;
         return {
             restrict: 'E',
             require: "ngModel",
             scope: true,
             replace: true,
-            template: '<div>' +
-                '<canvas style="width:100%" ng-click="mouseup()" ng-mouseup="mouseup()"></canvas>' +
-                '<div>' +
-                '<button type="button" class="btn btn-warning" style="margin-right:5px;margin-bottom:5px;" ng-click="clear()">{{"clear"|translate}}</button>' +
-                '</div>' +
-                '</div>',
+            transclude: true,
+            template: '<div style="height: 100%; width: 100%;">                                                                                                   \
+                          <canvas style="width:100%; height: 100%;" ng-click="mouseup()" ng-mouseup="mouseup()"></canvas>                                         \
+                          <div class="component-holder ng-scope  col-md-2" style="bottom: 0; position: absolute; padding-left: 5px;" data-component="crn-button"> \
+                              <button class="btn k-button btn-warning" ng-click="clear()" xattr-fullsize="" xattr-theme="btn-warning" xattr-disabled="">          \
+                                  <i class="glyphicon glyphicon-erase" icon-theme=""></i> <span class="" text-theme="">{{\'clear\'|translate}}</span>             \
+                              </button>                                                                                                                           \
+                          </div>                                                                                                                                  \
+                      </div>',
             scope: {
-                clear: '=',
                 dataurl: '=',
-                height: '@',
-                width: '@',
                 ngClick: '@',
                 ngModel: '='
             },
             controller: [
-                '$scope',
-                function($scope) {
-
-                    $scope.mouseup = function() {
+              '$scope',
+              function($scope) {
 
-                        var signature = {};
+                  $scope.mouseup = function() {
 
-                        if (!$scope.signaturePad.isEmpty()) {
-                            signature.dataUrl = $scope.signaturePad.toDataURL();
-                            signature.isEmpty = false;
+                      var signature = {};
 
-                        } else {
-                            signature.dataUrl = EMPTY_IMAGE;
-                            signature.isEmpty = true;
-                        }
+                      if (!$scope.signaturePad.isEmpty()) {
+                          signature.dataUrl = $scope.signaturePad.toDataURL();
+                          signature.isEmpty = false;
 
-                        if (signature.dataUrl == null) {
-                            return;
-                        }
-                        var binary = signature.dataUrl.split(',')[1];
-                        $scope.ngModel = binary;
-                    };
+                      } else {
+                          signature.dataUrl = EMPTY_IMAGE;
+                          signature.isEmpty = true;
+                      }
 
-                    $scope.$watch('ngModel', function(value, old) {
+                      if (signature.dataUrl == null) {
+                          return;
+                      }
+                      var binary = signature.dataUrl.split(',')[1];
+                      $scope.ngModel = binary;
+                  };
 
-                        var signature = $scope.signaturePad;
-                        var data = $scope.ngModel;
+                  $scope.$watch('ngModel', function(value, old) {
 
-                        if (value !== old) {
-                            signaturePad.clear();
-                            signature.fromDataURL("data:image/png;base64," + value, {
-                                ratio: 1
-                            });
-                            $scope.ngModel = value;
-                        }
-                    }, true);
+                      if (value !== old) {
+                        $scope.signaturePad.fromDataURL("data:image/png;base64," + value, {
+                              ratio: 1
+                          });
+                          $scope.ngModel = value;
+                      }
+                  }, true);
 
-                    $scope.clear = function() {
-                        $scope.signaturePad.clear();
-                        $scope.ngModel = null;
-                    };
+                  $scope.clear = function() {
+                      $scope.signaturePad.clear();
+                      $scope.ngModel = null;
+                  };
 
-                }
-            ],
-            link: function(scope, element, attrs, ngModelCtrl) {
+              }
+          ],
+          link: function(scope, element, attrs, ngModelCtrl) {
+            canvas = element.find('canvas')[0];
 
-                canvas = element.find('canvas')[0];
+            scope.onResize = function() {
+              var ratio = Math.max($window.devicePixelRatio || 1, 1);
+              var canvas = element.find('canvas')[0];
 
-                scope.onResize = function() {
+              var refCanvas = document.createElement('canvas');
+              refCanvas.width = canvas.width;
+              refCanvas.height = canvas.height;
+              var refCtx = refCanvas.getContext('2d');
+              refCtx.drawImage(canvas, 0, 0);
 
-                    var canvas = element.find('canvas')[0];
-                    var ratio = Math.max($window.devicePixelRatio || 1, 1);
-                    canvas.width = canvas.offsetWidth * ratio;
-                    canvas.height = canvas.offsetHeight * ratio;
-                    canvas.getContext("2d").scale(ratio, ratio);
-                }
+              canvas.width = canvas.offsetWidth * ratio;
+              canvas.height = canvas.offsetHeight * ratio;
+              canvas.getContext("2d").drawImage(refCanvas, 0, 0);
+              canvas.getContext("2d").scale(ratio, ratio);
+            }
 
-                scope.onResize();
+            scope.onResize();
 
-                scope.signaturePad = new SignaturePad(canvas);
+            scope.signaturePad = new SignaturePad(canvas);
 
-                angular.element($window).bind('resize', function() {
-                    scope.onResize();
-                });
+            angular.element($window).on('resize', function() {
+                scope.onResize();
+            });
 
-                $compile(element)(element.scope());
-            }
+            $compile(element)(element.scope());
+          }
         };
     })
 
@@ -5297,34 +5561,9 @@
         };
       })
 
-      .directive('cronFrame', function($compile, $sce, $parse) {
-        'use strict';
-        return {
-          restrict: 'AE',
-          require: 'ngModel',
-          link: function (scope, element, attrs, ngModelCtrl) {
-            if (ngModelCtrl) {
-              scope.$watch(attrs.ngModel, function(newVal) {
-                if (newVal !== attrs.origin) {
-                  attrs.$set("origin", newVal == undefined ? attrs.origin : newVal);
-                  const modelGetter = $parse(attrs['ngModel']);
-                  let modelSetter = modelGetter.assign;
-                  let template = "";
-                  if (attrs.type == 'include') {
-                    template = $(`<div class="cronframeOption" ng-include="'${attrs.origin}'"></div>`);
-                  } else if (attrs.type == 'frame') {
-                    var url = $sce.trustAsResourceUrl(attrs.origin);
-                    template = $(`<iframe class="cronframeOption" ng-src="${url}" width="100%" height="100%" loading="lazy"></iframe>`);
-                  }
-                  modelSetter(scope, attrs.origin);
-                  element.html(template);
-                  $compile(template)(scope);
-                }
-              })
-            }
-          }
-        }
-      })
+      .directive('cronFrame', cronFrame)
+
+      .directive('crnComponent', cronFrame)
 
       .directive("fromGrid", ($compile) => {
         return {
@@ -5731,6 +5970,11 @@ function maskDirective($compile, $translate, $parse, attrName) {
         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};
+        mask = verifyMaskDateForText(mask);
+
         if(!attrs.maskPlaceholder){
           $element.mask(mask);
           useMaskPlugin(element, ngModelCtrl, scope, modelSetter, removeMask);
@@ -5896,7 +6140,7 @@ function transformText() {
 
 app.kendoHelper = {
   getCorrectlyDS: (name, scope) => {
-    if (scope[name].apiVersion) {
+    if (scope[name] && scope[name].apiVersion) {
       return scope[name];
     }
     else {
@@ -5905,6 +6149,32 @@ app.kendoHelper = {
       return ds;
     }
   },
+  getCorrectlyDSPromise: async (name, scope) => {
+    return new Promise((resolve, reject) => {
+      let findDs = () => {
+        let datasource = null;
+        if (scope[name] && scope[name].apiVersion) {
+          datasource = scope[name];
+        }
+        else {
+          let ds = scope.$parent[name];
+          scope[name] = ds;
+          datasource = ds;
+        }
+
+        if (datasource) {
+          resolve(datasource);
+        }
+        else if ($(`datasource[name="${name}"]`).length) {
+          setTimeout(() => findDs(), 100);
+        }
+        else {
+          reject(null);
+        }
+      }
+      findDs();
+    });
+  },
   receivePushData: comp => !comp || !comp.dataSource || (comp.dataSource.transport.options.refComponent = comp),
   getSchema: function(dataSource) {
     var parseAttribute = [
@@ -6104,6 +6374,10 @@ app.kendoHelper = {
               }
               else {
                 this.options.fromRead = type === "read";
+                if (this.options.cronappDatasource.reloadedFromCronapi) {
+                  this.options.fromRead = false;
+                  delete this.options.cronappDatasource.reloadedFromCronapi;
+                }
                 this.options.refComponent.dataSource.read();
               }
             }
@@ -6274,7 +6548,7 @@ app.kendoHelper = {
                     }
                   }
                   if (idxSelected >-1 && !this.refComponent.selectable.options.multiple)
-                    this.refComponent.select(this.refComponent.table.find('tr')[idxSelected]);
+                    this.refComponent.select(this.refComponent.table.find('tr')[idxSelected + 1]);
                 }
               }
             }
@@ -6357,7 +6631,7 @@ app.kendoHelper = {
       }
     }
 
-    if (this.options.fromRead) {
+    if (this.options.fromRead || (this.options.combobox && this.options.combobox.options.firstLazyRead === undefined)) {
       this.options.fromRead = false;
       this.options.kendoCallback.success(cronappDatasource.data);
       doFetch = false;
@@ -6769,4 +7043,33 @@ window.formatWithMomentAs = function (mask, useUTC, value, as) {
     return momentDate.format(mask);
   }
   return momentDate.toDate();
-};
+};
+
+function cronFrame($compile, $sce, $parse) {
+  'use strict';
+  return {
+    restrict: 'AE',
+    link: function (scope, element, attrs, ngModelCtrl) {
+      scope.$watch(function() {
+        return attrs.origin;
+      }, function(newVal) {
+        let template = "";
+        let style = attrs.style||"";
+        let clazz = attrs.class||"";
+        if (attrs.origin) {
+          if (!attrs.type) {
+            attrs.type = 'include';
+          }
+          if (attrs.type == 'include') {
+            template = $(`<div style="${style}" class="${clazz}" ng-include="'${attrs.origin}'"></div>`);
+          } else if (attrs.type == 'frame') {
+            var url = $sce.trustAsResourceUrl(attrs.origin);
+            template = $(`<iframe style="${style}" class="${clazz}" ng-src="${url}" width="100%" height="100%" loading="lazy"></iframe>`);
+          }
+        }
+        element.html(template);
+        $compile(template)(scope);
+      })
+    }
+  }
+}