cronapp-framework-js 2.8.29 → 2.9.0-SNAPSHOT.2

package/js/directives.js

@@ -1379,6 +1379,38 @@
           }
         };
       })
+      .directive('cronDashboardViewer', function ($compile) {
+        return {
+          restrict: 'E',
+          replace: true,
+          require: 'ngModel',
+          link: function (scope, element, attrs, ngModelCtrl) {
+
+            function executeDashboard(attrsOptions) {
+              var config = JSON.parse(attrsOptions);
+              var contextVars = { 'element': element };
+              scope.$eval(config.dashboardCommand, contextVars);
+            }
+
+            executeDashboard(attrs.options);
+
+            var filterTimeout = null;
+            scope.$watch(function(){ return attrs.options }, function(value, old){
+              if (value !== old) {
+
+                if (filterTimeout) {
+                  clearInterval(filterTimeout);
+                  filterTimeout = null;
+                }
+
+                filterTimeout = setTimeout(function() {
+                  executeDashboard(value);
+                }.bind(this), 500);
+              }
+            });
+          }
+        };
+      })
       .directive('cronReportViewer', function ($compile) {
         return {
           restrict: 'E',
@@ -1413,7 +1445,105 @@
           }
         };
       })
+      .directive('cronTimeline', ['$compile', '$parse', function($compile, $parse){
+        'use strict';
+    
+       var defaultAdvancedTemplate = "<ul class=\"timeline\">\r\n   <timeline-event side=\"\" class=\"ng-scope\" ng-repeat=\"rowData in datasource\">\r\n      <li class=\"timeline-event {{rowData[options.fields.field4] == '2' ? 'timeline-inverted' : ''}}\">\r\n         <timeline-badge class=\"{{$odd ? 'info' : 'warning'}} bounce-in\">\r\n            <div class=\"timeline-badge\">\r\n               <i class=\"glyphicon {{rowData[options.fields.field3] ? rowData[options.fields.field3] : 'glyphicon-check'}}\"><\/i>\r\n            <\/div>\r\n         <\/timeline-badge>\r\n         <timeline-panel class=\"info bounce-in\">\r\n            <div class=\"timeline-panel\">\r\n               <timeline-heading class=\"ng-scope\">\r\n                  <div class=\"timeline-heading\">\r\n                     <h4 class=\"ng-binding ng-scope\">{{rowData[options.fields.field0]}}<\/h4>\r\n                     <p class=\"ng-scope\">\r\n                        <small class=\"text-muted ng-binding\"><i class=\"glyphicon glyphicon-time\"><\/i>{{rowData[options.fields.field1]|mask:options.fields.mask2:options.fields.type1}}<\/small>\r\n                     <\/p>\r\n                  <\/div>\r\n               <\/timeline-heading>\r\n               <p ng-if=\"rowData[options.fields.field2]\" class=\"ng-binding ng-scope\">{{rowData[options.fields.field2]}}<\/p>\r\n            <\/div>\r\n         <\/timeline-panel>\r\n      <\/li>\r\n   <\/timeline-event>\r\n<\/ul>";
+
+        var getExpression = function(dataSourceName) {
+          return 'rowData in '.concat(dataSourceName).concat('.data');
+        }
+
+        return {
+          restrict: 'E',
+          require: '?ngModel',
+          scope: true,
+          priority: 9999998,
+          terminal: true,
+          link: function(scope, element, attrs, ngModelCtrl) {
 
+            scope.hasValue = value => value !== null && value !== undefined;
+            var optionsList = {};
+            var dataSourceName = '';
+    
+            try {
+              optionsList = JSON.parse(attrs.options);
+              dataSourceName = optionsList.dataSourceScreen.name;
+              var dataSource = eval(optionsList.dataSourceScreen.name);
+
+              scope.options = optionsList;
+    
+              if(attrs['ngModel']){
+                scope.changeRowDataField = function(rowData){
+                  rowData = dataSource.getKeyValues(rowData);
+                  var keys = Object.keys(rowData);
+                  if(keys.length === 1){
+                    rowData = rowData[keys];
+                  }
+                  return rowData;
+                }
+              }
+
+              scope.options = optionsList;
+              scope.options.fields = {};
+              scope.options.randomModel = Math.floor(Math.random() * (9000)) + 1000;
+
+              var visibleColumns = [];
+    
+              for (var i = 0; i < optionsList.columns.length; i++) {
+                var column = optionsList.columns[i];
+                if (column.visible) {
+                  visibleColumns.push(optionsList.columns[i]);
+                }
+              }
+
+              for (var i = 0; i < visibleColumns.length; i++) {
+                var column = visibleColumns[i];
+                if (column.field && column.dataType == 'Database') {
+                  scope.options.fields["security" + i] = column.security;
+                  scope.options.fields["field" + i] = column.field;
+                  scope.options.fields["type" + i] = column.type;
+                  scope.options.fields["mask" + i] = column.format;
+                }
+              }
+            } catch(err) {
+              console.log('CronTimeline invalid configuration! ' + err);
+            }
+    
+            if(scope.options.fields.image && scope.options.imageType != 'do-not-show'){
+              scope.options.imageClassPosition = "item-" + scope.options.imageType + '-' + scope.options.imagePosition;
+            }
+
+            if(!scope.options.advancedTemplate){
+              scope.options.advancedTemplate = defaultAdvancedTemplate;
+            }
+           
+            var templateDyn = scope.options.advancedTemplate;
+    
+            for (let index = 0; index < visibleColumns.length; index++) {
+              let column = visibleColumns[index];
+              if (column.field && column.dataType === 'Database' && scope.options.fields[`security${index}`]) {
+                let find = `ng-if="rowData[options.fields.field${index}]"`;
+                let toReplace = `${find} cronapp-security="${scope.options.fields['security' + index]}"`;
+                templateDyn = templateDyn.replace(find, toReplace);
+              }
+            }
+            templateDyn = $(templateDyn);
+    
+            scope.options.xattrTextPosition = attrs.xattrTextPosition;
+
+            $(element).replaceWith(templateDyn);
+            var $element = templateDyn;
+
+            var eventItem = $element.find('timeline-event');
+            if($(eventItem).attr('ng-repeat') === "rowData in datasource"){
+                eventItem.attr('ng-repeat', getExpression(dataSourceName));
+            }
+    
+            $compile(templateDyn, null, 9999998)(scope);
+          }
+        }
+      }])
       .directive('cronScheduler', ['$compile', '$translate', function($compile, $translate) {
         return {
           estrict: 'E',
@@ -1906,6 +2036,8 @@
               var template;
               if (buttonType == 'save')
                 template = '<button id="#BUTTONID#" aria-label="#ARIALABELSAVE#" class="btn btn-primary btn-fab ng-binding grid-save-button-modal k-button" data-component="crn-button" ng-click="#FUNCTIONCALL#" onclick="(!#DATASOURCENAME#.missingRequiredField(true)?$(\'##MODALID#\').modal(\'hide\'):void(0))"><span class="k-icon k-i-check"></span></button>';
+              else if (buttonType == 'saveAdd')
+                template = '<button id="#BUTTONID#" aria-label="#ARIALABELSAVEADD#" class="btn btn-primary btn-fab ng-binding grid-save-add-button-modal k-button" data-component="crn-button" ng-click="#FUNCTIONCALL#"><span class="k-icon k-i-plus"></span></button>';
               else
                 template = '<button id="#BUTTONID#" aria-label="#ARIALABELCANCEL#" type="button" class="btn btn-default btn-fab ng-binding k-button" data-component="crn-button" data-dismiss="modal"><span class="k-icon k-i-cancel"></span></button>'
               template = template
@@ -1913,6 +2045,7 @@
                   .split('#FUNCTIONCALL#').join(functionToCall)
                   .split('#DATASOURCENAME#').join(datasourceName)
                   .split('#ARIALABELSAVE#').join($translate.instant('SaveChanges'))
+                  .split('#ARIALABELSAVEADD#').join($translate.instant('SaveAddChanges'))
                   .split('#ARIALABELCANCEL#').join($translate.instant('CancelChanges'))
                   .split('#MODALID#').join(modalId);
 
@@ -1931,12 +2064,18 @@
             buttonCall = compileTemplateAngular(buttonType, functionToCall, datasourceName, modalId);
             return buttonCall;
           },
-          addButtonsInModal: function(modal, datasourceName, scope) {
+          addButtonsInModal: function(modal, datasourceName, scope, saveAdd) {
             var $footerModal = $('#' + modal).find('.modal-footer');
             if (!$footerModal.find('.grid-save-button-modal').length) {
               var functionToCall = datasourceName + '.post();'
               var buttonSave = this.generateModalSaveOrCancelButtonCall('save', functionToCall, datasourceName, modal, scope);
               $footerModal.append(buttonSave);
+              
+              if (saveAdd) {
+                let buttonSaveAdd = this.generateModalSaveOrCancelButtonCall('saveAdd', functionToCall + datasourceName + '.startInserting();', datasourceName, modal, scope);
+                $footerModal.append(buttonSaveAdd);
+              }
+                            
               var buttonCancel = this.generateModalSaveOrCancelButtonCall('cancel', null, null, null, scope);
               $footerModal.append(buttonCancel);
             }
@@ -2231,7 +2370,7 @@
                     var cronappDatasource = this.dataSource.transport.options.cronappDatasource;
                     scope.safeApply(function() {
                       if (!options.hideModalButtons) {
-                        helperDirective.addButtonsInModal(options.popupEdit, cronappDatasource.name, scope);
+                        helperDirective.addButtonsInModal(options.popupEdit, cronappDatasource.name, scope, false);
                       }
 
                       var currentItem = cronappDatasource.goTo(item);
@@ -2571,7 +2710,7 @@
                     toolbar.push(button);
 
                     if (!options.hideModalButtons) {
-                      this.addButtonsInModal(popupInsert, datasourceName, scope);
+                      this.addButtonsInModal(popupInsert, datasourceName, scope, options.enableModalSaveAdd);
                     }
                   }
                   else {
@@ -3373,7 +3512,7 @@
             var parent = element.parent();
             $(parent).append('<input style="width: 100%;" '+ id + name + ' class="cronSelect"/>');
             var $element = $(parent).find('input.cronSelect');
-
+            var cronDisabled = attrs.cronDisabled ? attrs.cronDisabled : 'true';
             var options = await app.kendoHelper.getConfigCombobox(select, scope);
             options.close = attrs.ngClose ? function (){scope.$eval(attrs.ngClose)}: undefined;
             options.dataBound = attrs.ngDataBound ? function (){scope.$eval(attrs.ngDataBound)}: undefined;
@@ -3423,7 +3562,11 @@
               }
             };
             initializeAttrAndEvents();
-            combobox.enable(true);
+            if (cronDisabled) {
+              combobox.enable(false);
+            } else {
+              combobox.enable(true);
+            }
 
             var _scope = scope;
             var _ngModelCtrl = ngModelCtrl;
@@ -3524,6 +3667,7 @@
             var self = this;
             var parentDS = {};
             var textField = null;
+            var cronDisabled = attrs.cronDisabled ? attrs.cronDisabled : 'true';
             try {
               select = JSON.parse(attrs.options);
               parentDS = this.getActive(attrs.ngModel);
@@ -3887,7 +4031,13 @@
             _compileAngular(scope, combobox.ul);
 
             $(element).remove();
-            combobox.enable(true);
+
+            if(cronDisabled){
+              combobox.enable(false);
+            } else {
+              combobox.enable(true);
+            }
+
             $("[aria-owns='" + `${attrs.id}_listbox` + "']").attr('aria-label', $translate.instant('template.crud.search'));
           }
         };
@@ -3901,6 +4051,7 @@
             var modelGetter = $parse(attrs['ngModel']);
             var modelSetter = modelGetter.assign;
             var model = attrs['ngModel'];
+            var cronDisabled = attrs.cronDisabled ? attrs.cronDisabled : 'true';
 
             var _self = this;
             var select = {};
@@ -4037,7 +4188,11 @@
             deselect = attrs.ngDeselect ? function (){_scope.$eval(attrs.ngDeselect)}: undefined;
 
             var combobox = $element.kendoMultiSelect(options).data('kendoMultiSelect');
-            combobox.enable(true);
+            if(cronDisabled){
+              combobox.enable(false);
+            }else {
+              combobox.enable(true);
+            }
             app.kendoHelper.receivePushData(combobox);
 
             $("[aria-describedby='" + `${attrs.id}_taglist` + "']").attr('id', `${attrs.id}-container`);
@@ -4107,6 +4262,7 @@
             options.select = attrs.ngSelect ? function (){scope.$eval(attrs.ngSelect);}: undefined;
             var parent = element.parent();
             var id = attrs.id ? ' id="' + attrs.id + '"' : '';
+            var cronDisabled = attrs.cronDisabled ? attrs.cronDisabled : 'true';
             var name = attrs.name ? ' name="' + attrs.name + '"' : '';
             var validationmessage = attrs.validationmessage ? ' validationmessage="' + attrs.validationmessage + '"' : '';
             var required = '';
@@ -4138,7 +4294,12 @@
             }
 
             var autoComplete = $element.kendoAutoComplete(options).data('kendoAutoComplete');
-            autoComplete.enable(true);
+
+            if(cronDisabled){
+              autoComplete.enable(false);
+            } else {
+              autoComplete.enable(true);
+            }            
 
             if (ngModelCtrl) {
               ngModelCtrl.$formatters.push(function (value) {
@@ -4652,7 +4813,7 @@
               //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' : '') + ' " style="float:left"></ul>';
+              var TEMPLATE_MAIN = '<ul  class="nav navbar-nav ' + (isVertical ? 'col-md-12 padding-0' : '') + ' "></ul>';
               var options = {};
               try {
                 options = JSON.parse(attrs.options);
@@ -4707,6 +4868,140 @@
         }
       }])
 
+      .directive('cronBreadcrumbs', function () {
+      'use strict';
+      return {
+        restrict: 'E',
+        replace: true,
+        link: function (scope, element, attrs) {
+          let crnDelimiterIcon = attrs.crnDelimiterIcon;
+          let crnTypeMenu = attrs.typeMenu;
+          let idMenu = attrs.idMenu ? attrs.idMenu : null;
+          let breadcrumb = [];
+          let actionBlockly = attrs.ngInit ? attrs.ngInit : null;
+          let idBreadcrumb = attrs.id;
+          let arrayPaiBreadcrumb = [];
+
+          let iconRoot = attrs.breadcrumbIcon ? attrs.breadcrumbIcon : null;
+
+          async function functionActionBlockly() {
+            let shortVersion = actionBlockly.replace("cronapi.client('js.", 'blockly.js.');
+            actionBlockly = shortVersion.replace("').run()", '');
+            actionBlockly = scope.$eval(actionBlockly);
+            breadcrumb = await actionBlockly();
+
+            $(`#${idBreadcrumb}`).kendoBreadcrumb({
+              items: breadcrumb,
+              delimiterIcon: crnDelimiterIcon,
+              navigational: true
+            });
+          }
+
+          if (actionBlockly && crnTypeMenu === "idBloco") {
+            functionActionBlockly()
+
+          } else {
+            setTimeout(() => {
+              // Capturar o  json do menu
+              let menuOptions = $(`#${idMenu}`)[0].children[0].attributes['options'];
+              menuOptions = JSON.parse(menuOptions.value);
+              let subMenuOptions = menuOptions.subMenuOptions;
+
+              // Capturar a url da pagina
+              let page = document.location.hash;
+              page = page.split("/");
+
+              inicio(subMenuOptions);
+
+              function inicio(items) {
+                let x = false;
+
+                for (let i in items) {
+
+                  let action = items[i].action;
+                  if (action && action != "") {
+                    action = action.replace("cronapi.screen.changeView('", '');
+                    action = action.replace("', [])", '')
+                    action = action.split("/");
+                  } else {
+                    action = null
+                  }
+
+                  if (items[i].level === 1) {
+                    arrayPaiBreadcrumb = []
+                  }
+                  if (!action) {
+                    arrayPaiBreadcrumb.push({
+                      level: items[i].level,
+                      title: items[i].title,
+                      href: '#'
+                    });
+                  } else if (action) {
+                    arrayPaiBreadcrumb.push({
+                      level: items[i].level,
+                      title: items[i].title,
+                      href: document.location.origin + '/' + action.join("/")
+                    });
+                  }
+
+                  if (items[i].menuItems.length > 0) {
+                    inicio(items[i].menuItems);
+
+                  } else {
+                    if (action) {
+                      if (action[action.length - 1] === page[page.length - 1]) {
+                        x = true
+                      }
+                    }
+                  }
+
+                  if (x) {
+                    for (let y in arrayPaiBreadcrumb) {
+
+                      if (y == 0 && arrayPaiBreadcrumb[y].level == 1) {
+                        breadcrumb.push({
+                          type: "rootitem",
+                          href: arrayPaiBreadcrumb[y].href,
+                          text: arrayPaiBreadcrumb[y].title,
+                          showText: true,
+                          showIcon: false
+                        })
+                      } else if (y == 0 && arrayPaiBreadcrumb[y].level != 1) {
+                        breadcrumb.push({
+                          type: "rootitem",
+                          href: arrayPaiBreadcrumb[y].href,
+                          text: arrayPaiBreadcrumb[y].title,
+                          showText: true,
+                          showIcon: false
+                        })
+                      } else {
+                        breadcrumb.push({
+                          type: "item",
+                          href: arrayPaiBreadcrumb[y].href,
+                          text: arrayPaiBreadcrumb[y].title,
+                          showText: true,
+                          showIcon: false
+                        })
+                      }
+                    }
+
+                    return breadcrumb
+                  }
+                }
+              }
+
+              $(`#${idBreadcrumb}`).kendoBreadcrumb({
+                items: breadcrumb,
+                delimiterIcon: crnDelimiterIcon,
+                navigational: true
+              });
+
+            }, 800);
+          }
+        }
+      }
+    })
+
       .directive('ngInitialValue', function($parse) {
         return {
           restrict: 'A',
@@ -4754,84 +5049,178 @@
         }
       })
 
-      .directive('crnAllowNullValues', [function () {
-        return {
-          restrict: 'A',
-          require: '?ngModel',
-          link: function (scope, el, attrs, ctrl) {
-            ctrl.$formatters = [];
-            ctrl.$parsers = [];
-
-            let falseValue = attrs.ngFalseValue ? attrs.ngFalseValue.split("'").join("") : false;
-            let trueValue = attrs.ngTrueValue ? attrs.ngTrueValue.split("'").join("") : true;
-
-            if (attrs.crnAllowNullValues == 'true') {
-              ctrl.$render = function () {
-                let viewValue = ctrl.$viewValue;
-                el.data('checked', viewValue);
-                switch (viewValue) {
-                  case true:
-                  case trueValue:
-                    el.prop('indeterminate', false);
-                    el.prop('checked', true);
-                    viewValue = trueValue;
-                    break;
-                  case false:
-                  case falseValue:
-                    el.prop('indeterminate', false);
-                    el.prop('checked', false);
-                    viewValue = falseValue;
-                    break;
-                  default:
-                    viewValue = null;
-                    el.prop('indeterminate', true);
+          .directive('crnAllowNullValues', [function () {
+              return {
+                restrict: 'A',
+                require: '?ngModel',
+                link: function (scope, el, attrs, ctrl) {
+                  ctrl.$formatters = [];
+                  ctrl.$parsers = [];
+
+                  let falseValue = attrs.ngFalseValue ? attrs.ngFalseValue.split("'").join("") : false;
+                  let trueValue = attrs.ngTrueValue ? attrs.ngTrueValue.split("'").join("") : true;
+
+                  if (attrs.crnAllowNullValues == 'false') {
+                    ctrl.$render = function () {
+                      let viewValue = ctrl.$viewValue;
+                      if (ctrl.$viewValue === undefined || ctrl.$viewValue === null) {
+                        ctrl.$setViewValue(false);
+                        viewValue = false;
+                      }
+                      if (viewValue === falseValue) {
+                        let modelForEval = `${el.attr('ng-model')}=${attrs.ngFalseValue}`;
+                        scope.$eval(modelForEval);
+                      }
+                      el.data('checked', viewValue);
+                      switch (viewValue) {
+                        case true:
+                        case trueValue:
+                          el.prop('indeterminate', false);
+                          el.prop('checked', true);
+                          viewValue = trueValue;
+                          break;
+                        default:
+                          el.prop('indeterminate', false);
+                          el.prop('checked', false);
+                          viewValue = falseValue;
+                          break;
+                      }
+                      setTimeout(() => ctrl.$setViewValue(viewValue));
+                    };
+                  } else { // true é padrão
+                    ctrl.$render = function () {
+                      let viewValue = ctrl.$viewValue;
+                      el.data('checked', viewValue);
+                      switch (viewValue) {
+                        case true:
+                        case trueValue:
+                          el.prop('indeterminate', false);
+                          el.prop('checked', true);
+                          viewValue = trueValue;
+                          break;
+                        case false:
+                        case falseValue:
+                          el.prop('indeterminate', false);
+                          el.prop('checked', false);
+                          viewValue = falseValue;
+                          break;
+                        default:
+                          viewValue = null;
+                          el.prop('indeterminate', true);
+                      }
+                      setTimeout(() => ctrl.$setViewValue(viewValue));
+                    };
+                  }
+                  el.bind('click', function () {
+                    let checked;
+                    switch (el.data('checked')) {
+                      case false:
+                      case falseValue:
+                        checked = attrs.ngTrueValue ? trueValue : true;
+                        break;
+                      default:
+                        checked = attrs.ngFalseValue ? falseValue : false;
+                    }
+                    ctrl.$setViewValue(checked);
+                    scope.$apply(ctrl.$render);
+                  });
                 }
-                setTimeout(() => ctrl.$setViewValue(viewValue));
               };
-            } else if (attrs.crnAllowNullValues == 'false') {
-              ctrl.$render = function () {
-                let viewValue = ctrl.$viewValue;
-                if (ctrl.$viewValue === undefined || ctrl.$viewValue === null) {
-                  ctrl.$setViewValue(false);
-                  viewValue = false;
-                }
-                if (viewValue === falseValue) {
-                  let modelForEval = `${el.attr('ng-model')}=${attrs.ngFalseValue}`;
-                  scope.$eval(modelForEval);
+            }])
+
+      .directive('signaturePad', function($compile, $window) {
+        'use strict';
+    
+        var signaturePad, 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>',
+            scope: {
+                clear: '=',
+                dataurl: '=',
+                height: '@',
+                width: '@',
+                ngClick: '@',
+                ngModel: '='
+            },
+            controller: [
+                '$scope',
+                function($scope) {
+    
+                    $scope.mouseup = function() {
+    
+                        var signature = {};
+    
+                        if (!$scope.signaturePad.isEmpty()) {
+                            signature.dataUrl = $scope.signaturePad.toDataURL();
+                            signature.isEmpty = false;
+    
+                        } else {
+                            signature.dataUrl = EMPTY_IMAGE;
+                            signature.isEmpty = true;
+                        }
+    
+                        if (signature.dataUrl == null) {
+                            return;
+                        }
+                        var binary = signature.dataUrl.split(',')[1];
+                        $scope.ngModel = binary;
+                    };
+    
+                    $scope.$watch('ngModel', function(value, old) {
+    
+                        var signature = $scope.signaturePad;
+                        var data = $scope.ngModel;
+    
+                        if (value !== old) {
+                            signaturePad.clear();
+                            signature.fromDataURL("data:image/png;base64," + value, {
+                                ratio: 1
+                            });
+                            $scope.ngModel = value;
+                        }
+                    }, true);
+    
+                    $scope.clear = function() {
+                        $scope.signaturePad.clear();
+                        $scope.ngModel = null;
+                    };
+    
                 }
-                el.data('checked', viewValue);
-                switch (viewValue) {
-                  case true:
-                  case trueValue:
-                    el.prop('indeterminate', false);
-                    el.prop('checked', true);
-                    viewValue = trueValue;
-                    break;
-                  default:
-                    el.prop('indeterminate', false);
-                    el.prop('checked', false);
-                    viewValue = falseValue;
-                    break;
+            ],
+            link: function(scope, element, attrs, ngModelCtrl) {
+    
+                canvas = element.find('canvas')[0];
+    
+                scope.onResize = function() {
+    
+                    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);
                 }
-                setTimeout(() => ctrl.$setViewValue(viewValue));
-              };
+    
+                scope.onResize();
+    
+                scope.signaturePad = new SignaturePad(canvas);
+    
+                angular.element($window).bind('resize', function() {
+                    scope.onResize();
+                });
+    
+                $compile(element)(element.scope());                  
             }
-            el.bind('click', function () {
-              let checked;
-              switch (el.data('checked')) {
-                case false:
-                case falseValue:
-                  checked = attrs.ngTrueValue ? trueValue : true;
-                  break;
-                default:
-                  checked = attrs.ngFalseValue ? falseValue : false;
-              }
-              ctrl.$setViewValue(checked);
-              scope.$apply(ctrl.$render);
-            });
-          }
         };
-      }])
+    })
 
       .directive('cronChat',  ['$compile', '$translate', function($compile, $translate) {
         return {
@@ -4873,6 +5262,35 @@
         };
       })
 
+      .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("fromGrid", ($compile) => {
         return {
           restrict: 'A',
@@ -4936,6 +5354,42 @@
         }
       })
 
+      .directive('cronOrderedList', function ($compile, $sce, $parse) {
+        'use strict';
+        return {
+          restrict: 'EA',
+          replace: true,
+          link: function (scope, element, attrs, ngModelCtrl) {
+  
+            let attributeValue = attrs.attributeValue;
+            let orderedAttributeValue = attrs.orderedAttributeValue
+            let listType = attrs.listType;
+            let content = element[0].children[0].children;
+            content = $(content);
+            let templateDyn = '';
+            let contentUL = '';
+  
+            $.each(content, function (i, item) {
+              contentUL = contentUL + item.outerHTML;
+            });
+  
+            switch (listType) {
+              case 'numbered-list':
+                templateDyn = `<ol style="list-style-type: ${attributeValue}">${contentUL}</ol>`
+                break
+  
+              case 'ordered-list':
+                templateDyn = `<ul style="list-style-type: ${orderedAttributeValue}">${contentUL}</ul>`
+                break
+            }
+  
+            templateDyn = $(templateDyn);
+            $(element).replaceWith(templateDyn);
+            $compile(templateDyn)(scope);
+          }
+        }
+      })
+
 }(app));
 
 function maskDirectiveAsDate($compile, $translate, $parse) {