cronapi-js 2.8.15 → 2.8.19

package/cronapi.js

@@ -33,6 +33,14 @@ if (!window.fixedTimeZone) {
 
   this.cronapi = {};
 
+  this.cronapi.getRequestData = data => {
+    let result = data || {};
+    if (data.data && typeof data.data === 'object') {
+      result = data.data;
+    }
+    return result;
+  };
+
   this.cronapi.toDate = function(value) {
     return new Date(value);
   }
@@ -1252,6 +1260,7 @@ if (!window.fixedTimeZone) {
   };
 
   /**
+   * @deprecated true
    * @type function
    * @name {{screenNotifyName}}
    * @description {{screenNotifyDescription}}
@@ -1631,8 +1640,8 @@ if (!window.fixedTimeZone) {
     return null;
   };
 
-
   /**
+   * @deprecated true
    * @type function
    * @name {{confirmDialogName}}
    * @nameTags confirmDialog|Confirmar
@@ -1645,7 +1654,7 @@ if (!window.fixedTimeZone) {
     var value = confirm(msg);
     return value;
   };
-
+  
   /**
    * @type function
    * @name {{createDefaultModalName}}
@@ -3467,6 +3476,8 @@ if (!window.fixedTimeZone) {
     let barCodeOneD = "UPC_A|UPC_E|EAN_8|EAN_13|CODE_39|CODE_128|ITF|RSS14|RSS_EXPANDED";
     let codeReader;
 
+    navigator.mediaDevices.getUserMedia({audio: false, video: true}).then(stream => {
+
     switch (scanOptions.formats) {
       case "AZTEC":
         codeReader = new ZXing.BrowserAztecCodeReader();
@@ -3488,43 +3499,84 @@ if (!window.fixedTimeZone) {
       codeReader = new ZXing.BrowserBarcodeReader();
     }
 
-    codeReader.listVideoInputDevices()
+     codeReader.listVideoInputDevices()
     .then((videoInputDevices) => {
         selectedDeviceId = videoInputDevices[0].deviceId
-        var cameraContainer = '<div style="position: fixed; display: flex; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: \
-              rgb(0 0 0 / 72%); z-index: 9999999; cursor: pointer; justify-content: center; align-items: center;">\
-              <div style="position: absolute">\
-                <video id="video" style="width: 100%; max-width: 600px; border-radius: 5px;"></video>\
-                <button class="btn btn-danger button button-assertive" id="cronapiBarCodeCancel" style="position: absolute; right: 0; z-index: 999999999;">\
-                    <span class="glyphicon glyphicon-remove icon ion-android-close"></span>\
-                    <span class="sr-only">{{"Cancel" | translate}}</span>\
-                </button>\
-              </div>\
-            </div>';
-        var cronappVideoBarCode = $(cameraContainer);
+        let cameraContainer = `<div style="position: fixed; display: flex; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color:
+                              rgb(0 0 0 / 72%); z-index: 9999999; cursor: pointer; justify-content: center; align-items: center;">
+                              <div style="position: absolute">
+                                <div class="row" style="position: absolute; bottom 50px; z-index: 999999999;">
+                                    <div class="col-xs-8">
+                                    <select style="width: 100%; position: absolute; bottom: 10px;  left: 0; z-index: 999999999;" id="videoSource"></select>
+                                    </div>
+                                    <div class="col-xs-2">
+                                        <button class="btn btn-danger button button-dark" id="cronapiBarCodeChangeCam" >
+                                            <span class="glyphicon glyphicon-remove icon ion ion-ios-reverse-camera"></span>
+                                            <span class="sr-only">{{"ChangeCam" | translate}}</span>
+                                        </button>
+                                    </div>
+                                    <div class="col-xs-2">
+                                        <button class="btn btn-danger button button-assertive" id="cronapiBarCodeCancel" >
+                                            <span class="glyphicon glyphicon-remove icon ion-android-close"></span>
+                                            <span class="sr-only">{{"Cancel" | translate}}</span>
+                                        </button>
+                                    </div>
+                                </div>
+                                <video id="video" style="width: 100%; max-width: 600px; border-radius: 5px;"></video>
+                              </div>
+                            </div>`;
+        let cronappVideoBarCode = $(cameraContainer);
         cronappVideoBarCode.prependTo("body");
-        cronappVideoBarCode.find('#cronapiBarCodeCancel').on('click', function() {
+         videoInputDevices.map((device, index)=>{
+                             if (device.kind === 'videoinput') {
+                                 let option = document.createElement('option');
+                                 option.value = device.deviceId;
+                                 option.text = device.label || 'Câmera ' + (index + 1);
+                                 if (index === 0) {
+                                     option.selected = true;
+                                 }
+                                 document.querySelector('select#videoSource').appendChild(option);
+                             }
+                         });
+        cronappVideoBarCode.find('#cronapiBarCodeCancel').on('click', (() => {
             codeReader.reset();
             $(cronappVideoBarCode).remove();
-            fail();
-        }.bind(this));
-
+        }).bind(this));
+        cronappVideoBarCode.find('#cronapiBarCodeChangeCam').on('click', (() => {
+           let selectedIndex = $("#videoSource").prop("selectedIndex");
+           let itemsInDropDownList = $("#videoSource option").length;
+
+           if (selectedIndex < (itemsInDropDownList - 1)) {
+               $("#videoSource").prop("selectedIndex", selectedIndex + 1);
+           } else {
+               $("#videoSource").prop("selectedIndex", 0);
+           }
+           $("#videoSource").trigger('change');
+        }).bind(this));
+        cronappVideoBarCode.find('#videoSource').on('change', (() => {
+            codeReader.decodeOnceFromVideoDevice($("#videoSource").val(), 'video').then((result) => {
+            if (result) {
+                success(result.text);
+                $(cronappVideoBarCode).remove();
+                codeReader.reset();
+            }
+        });
+        }).bind(this));
         codeReader.decodeOnceFromVideoDevice(selectedDeviceId, 'video').then((result) => {
             if (result) {
                 success(result.text);
                 $(cronappVideoBarCode).remove();
                 codeReader.reset();
             }
-        }).catch((err) => {
-            fail(err);
-            $(cronappVideoBarCode).remove();
-            codeReader.reset();
         });
 
     }).catch((err) => {
         fail(err);
         codeReader.reset();
     });
+    }).catch(function(err) {
+         fail(err);
+    });
   }
 
   this.cronapi.internal.castBinaryStringToByteArray = function(binary_string) {
@@ -3774,8 +3826,10 @@ if (!window.fixedTimeZone) {
             'Content-Type': 'application/json',
             'X-AUTH-TOKEN': _u.token,
           }
-        }).success(function(data, status, headers, config) {
+        }).then(function(data, status, headers, config) {
+          headers = headers || data.headers;
           headers = headers();
+          data = this.cronapi.getRequestData(data);
           var filename = headers['x-filename'] || 'download.bin';
           var urlCreator = window.URL || window.webkitURL || window.mozURL || window.msURL;
           try
@@ -3786,7 +3840,7 @@ if (!window.fixedTimeZone) {
             console.log('Error downloading file');
             console.log(ex);
           }
-        }.bind(this)).error(function(data, status, headers, config) {
+        }.bind(this)).catch(function(data, status, headers, config) {
           console.log('Error downloading file');
         }.bind(this));
       }
@@ -3834,9 +3888,10 @@ if (!window.fixedTimeZone) {
 
         }
       }
-    }).success(function(data, status, headers, config) {
+    }).then(function(data, status, headers, config) {
+      data = this.cronapi.getRequestData(data);
       this.cronapi.screen.changeValueOfField(field, data.jsonString);
-    }.bind(this)).error(function(data, status, headers, config) {
+    }.bind(this)).catch(function(data, status, headers, config) {
       alert('Error uploading file');
     }.bind(this));
 
@@ -4268,8 +4323,13 @@ if (!window.fixedTimeZone) {
     let options = { destinationType: Number(destinationType) , sourceType : Number(pictureSourceType) , mediaType: Number(mediaType) , allowEdit: allowEdit};
     if(window.cordova && window.cordova.platformId && window.cordova.platformId !== 'browser') {
 
-      let resultWithData = (data) => {
-        if (data && !data.startsWith("data:image")) data = "data:image/jpeg;base64, " + data;
+      let resultWithData = async (data) => {
+        if (data.startsWith("file://")) {
+          data = Ionic.WebView.convertFileSrc(data);
+        }
+        else if (data && !data.startsWith("data:image")) {
+          data = "data:image/jpeg;base64, " + data;
+        }
         !success || success(data);
       };
       navigator.camera.getPicture(this.cronapi.util.handleCallback(resultWithData), this.cronapi.util.handleCallback(error), options);
@@ -4716,26 +4776,6 @@ if (!window.fixedTimeZone) {
   this.cronapi.event = {};
 
 
-  /**
-   * @type function
-   * @name {itemContextMenu}
-   * @nameTags contextMenu | menu | contexto | context | item
-   * @description {contextMenuDescription}
-   * @param {ObjectType.STRING} text {{text}}
-   * @param {ObjectType.STRING} cssClass {{cssClass}}
-   * @param {ObjectType.STATEMENT} action {{kendoContextMenuActionItem}}
-   * @param {ObjectType.OBJECT} subItens {{kendoDatasource}}
-   * @returns {ObjectType.OBJECT}
-   */
-  this.cronapi.event.itemContextMenu = function (/** @type{ObjectType.STRING} */ text, /** @type{ObjectType.STRING} */ cssClass, /** @type {ObjectType.STATEMENT} @description {kendoContextMenuActionItem} */action, subItens) {
-
-    let jsonItem = { text: text }
-    if (subItens) { jsonItem.items = (Array.isArray(subItens) ? subItens : [subItens]) };
-    if (!subItens) { jsonItem.select = action }
-    if (cssClass) { jsonItem.cssClass = cssClass };
-    return jsonItem;
-  };
-
   /**
   * @type function
   * @name {{contextMenu}}
@@ -4786,16 +4826,16 @@ if (!window.fixedTimeZone) {
 
   /**
    * @type function
-   * @name {itemContextMenu}
+   * @name {{itemContextMenu}}
    * @nameTags contextMenu | menu | contexto | context | item
-   * @description {contextMenuDescription}
+   * @description {{contextMenuDescription}}
    * @param {ObjectType.STRING} text {{text}}
    * @param {ObjectType.STRING} cssClass {{cssClass}}
-   * @param {ObjectType.STATEMENT} action {{kendoContextMenuActionItem}}
+   * @param {ObjectType.STATEMENT} action {{contextMenuItemActionDescription}}
    * @param {ObjectType.OBJECT} subItens {{kendoDatasource}}
    * @returns {ObjectType.OBJECT}
    */
-  this.cronapi.event.itemContextMenu = function (/** @type{ObjectType.STRING} */ text, /** @type{ObjectType.STRING} */ cssClass, /** @type {ObjectType.STATEMENT} @description {kendoContextMenuActionItem} */action, subItens) {
+  this.cronapi.event.itemContextMenu = function (/** @type{ObjectType.STRING} */ text, /** @type{ObjectType.STRING} */ cssClass, /** @type {ObjectType.STATEMENT} */ action, subItens) {
 
     let jsonItem = { text: text }
     if (subItens) { jsonItem.items = (Array.isArray(subItens) ? subItens : [subItens]) };
@@ -4806,7 +4846,7 @@ if (!window.fixedTimeZone) {
 
   /**
   * @type function
-  * @name {{changeValueAccordion}}
+  * @name {{accordionChangeValue}}
   * @nameTags accordion | acordeão | abrir | fechar | colapse
   * @description {{accordionChangeValueDescription}}
   * @param {ObjectType.STRING} idAccordion {{accordionIdParamDescription}}
@@ -4817,9 +4857,11 @@ if (!window.fixedTimeZone) {
   
     switch (action) {
       case "collapseAll":
+        $('#' + idAccordion + ' .panel-collapse').data("bs.collapse", null);
         $('#' + idAccordion + ' .panel-collapse').collapse('hide');
         break;
       case "expandAll":
+        $('#' + idAccordion + ' .panel-collapse').data("bs.collapse", null);
         $('#' + idAccordion + ' .panel-collapse').collapse('show');
         break;
       case "collapseOne":
@@ -5055,6 +5097,7 @@ if (!window.fixedTimeZone) {
     return message;
   };
 
+
   /**
    * @type internal
    */
@@ -5086,8 +5129,9 @@ if (!window.fixedTimeZone) {
    * @description {{createChartDescription}}
    * @arbitraryParams true
    */
-  this.cronapi.chart.createChart = function(/** @type {ObjectType.OBJECT} @description {{createChartId}} @blockType ids_from_screen*/ chartId,  /** @type {ObjectType.STRING} @description {{createChartType}} @blockType util_dropdown @keys line|bar|horizontalBar|doughnut|pie|polarArea  @values line|bar|horizontalBar|doughnut|pie|polarArea  */ type, /** @type {ObjectType.LIST} @description {{createChartLegends}} */  chartLegends, /** @type {ObjectType.LIST} @description {{createChartOptions}} */ options, /** @type {ObjectType.LIST}  @description {{createChartSeries}}  */ series) {
+  this.cronapi.chart.createChart = function(/** @type {ObjectType.OBJECT} @description {{createChartId}} @blockType ids_from_screen*/ chartId, /** @type {ObjectType.STRING} @description {{createChartType}} @blockType util_dropdown @keys line|bar|horizontalBar|doughnut|pie|polarArea @values line|bar|horizontalBar|doughnut|pie|polarArea */ type, /** @type {ObjectType.LIST} @description {{createChartLegends}} */ chartLegends, /** @type {ObjectType.LIST} @description {{createChartOptions}} */ options, /** @type {ObjectType.LIST} @description {{createChartSeries}} */ series) {
 
+    var colors = options && options.colors ? options.colors : [];
     var CSS_COLOR_NAMES = ["#FF5C00","#0E53A7","#48DD00","#FFD500","#7309AA","#CD0074","#00AF64","#BF8230","#F16D95","#A65000","#A65000","#AF66D5"];
     var colorIndex = 0;
 
@@ -5192,7 +5236,7 @@ if (!window.fixedTimeZone) {
         //Applying configs in Datasets
         $.each(json.data.datasets, function(index,value){
           value.fill = false;
-          value.backgroundColor = CSS_COLOR_NAMES[nextColor()];
+          value.backgroundColor = colors[index] ? colors[index] : CSS_COLOR_NAMES[nextColor()];
           value.borderColor = value.backgroundColor;
           beginAtZero();
           displayLegend();
@@ -5205,7 +5249,11 @@ if (!window.fixedTimeZone) {
         json.data.datasets = getDataset(arguments);
         //Applying configs in Datasets
         $.each(json.data.datasets, function(index,value){
-          value.backgroundColor = CSS_COLOR_NAMES[nextColor()];
+          if(json.data.datasets.length === 1 && colors.length > 1){
+            value.backgroundColor = colors;
+          }else{
+            value.backgroundColor = colors[index] ? colors[index] : CSS_COLOR_NAMES[nextColor()];
+          }
           value.borderColor = value.backgroundColor;
         });
         beginAtZero();
@@ -5223,8 +5271,7 @@ if (!window.fixedTimeZone) {
           dtset.backgroundColor = [];
           dtset.borderColor = [];
           $.each(dtset.data, function(indexx,valuee){
-            dtset.backgroundColor.push( CSS_COLOR_NAMES[nextColor()] );
-
+            dtset.backgroundColor.push( colors[indexx] ? colors[indexx] : CSS_COLOR_NAMES[nextColor()] );
           });
           dtset.borderColor =  dtset.backgroundColor;
           json.data.datasets.push(dtset);
@@ -5413,7 +5460,324 @@ if (!window.fixedTimeZone) {
    */
   this.cronapi.screen.back = function() {
     history.back();
-  }
+  };
+
+  /**
+   * @category {{notificationCategory}}
+   * @categoryTags notification | notification
+   */
+  this.cronapi.notification = {};
+
+  /**
+   * @type function
+   * @name {{confirmDialogAlertName}}
+   * @nameTags confirmDialog | Confirmar | alert | modal | alerta
+   * @description {{confirmDialogAlertDescription}}
+   * @param {ObjectType.STRING} icon {{icon}
+   * @param {ObjectType.STRING} title {{title}}
+   * @param {ObjectType.STRING} subtitle {{subtitle}}
+   * @param {ObjectType.OBJECT} buttonConfirmDialogAlert {{confimDialogAlert.listButton}}
+   * @platform W
+   * @multilayer true
+   */
+  this.cronapi.notification.confirmDialogAlert = function(/** @type {ObjectType.STRING} @description {{icon}} @blockType util_dropdown @keys error|success|warning|info @values {{error}}|{{success}}|{{warning}}|{{info}} */ icon, title, subtitle, /** @type {ObjectType.OBJECT} */ buttonConfirmDialogAlert) {
+
+    let idDialog = 'cronapp-dialog-' + Math.random();
+    let dialog = $(`<span id="${idDialog}"></span>`);
+    $('body').append(dialog);
+
+    let dataDialog = {
+      width: "450px",
+      title: false,
+      closable: false,
+      modal: true,
+      content: "",
+      animation: {
+        open: {
+          effects: "zoom:in"
+        },
+        close: {
+          effects: "zoom:out"
+        }
+      },
+      buttonLayout: "normal",
+      actions: [],
+      close: function(e) {
+        setInterval(() => {
+          $(`#${idDialog}`).data("kendoDialog").destroy();
+        }, 3000);
+      }
+    };
+
+    setIcon(icon, title, subtitle);
+    setButton(buttonConfirmDialogAlert);
+
+    dialog.kendoDialog(dataDialog);
+    dialog.data("kendoDialog").open();
+
+    async function setIcon(icon, title, subtitle){
+      switch (icon){
+        case "error":
+          icon = '<div class="cronapp-icon cronapp-error" style="display: flex;"> <span class="cronapp-x-mark"><span class="cronapp-x-mark-line-left"></span><span class="cronapp-x-mark-line-right"></span></span></div>';
+          break;
+
+        case "success":
+          icon = '<div class="cronapp-icon cronapp-success"><div class="cronapp-success-circular-line-left"></div><span class="cronapp-success-line-tip"></span> <span class="cronapp-success-line-long"></span><div class="cronapp-success-ring"></div><div class="cronapp-success-fix"></div> <div class="cronapp-success-circular-line-right"></div></div>';
+          break;
+
+        case "warning":
+          icon = '<div class="cronapp-icon cronapp-warning"><div class="cronapp-icon-content">!</div></div>';
+          break;
+
+        case "info":
+          icon = '<div class="cronapp-icon cronapp-info"><div class="cronapp-icon-content">i</div></div>';
+          break;
+      }
+      await setContent(icon, title, subtitle);
+    }
+
+    function setContent(icon, title, subtitle){
+      dataDialog.content = '<div id="modalBodyConfirmDialog"> <div class="icon">'+ icon +'</div> <h2 class="title">'+ title +'</h2> <h3 class="subtitle">'+ subtitle +'</h3> </div>';
+    }
+
+    function setButton(buttonConfirmDialogAlert){
+      let buttons = (Array.isArray(buttonConfirmDialogAlert) ? buttonConfirmDialogAlert : [buttonConfirmDialogAlert]);
+
+      let hasButton = false;
+
+      for (let i = 0; i < buttons.length; i++) {
+        let button = buttons[i];
+        if(button){
+          dataDialog.actions.push({
+            text: button.title,
+            action: button.value,
+            primary: button.primaryValue == 'true' ? true : null
+          });
+
+          hasButton = true;
+
+        }
+      };
+
+      // If you have not added a button to the modal. Add to be able to close the modal.
+      if(!hasButton){
+        dataDialog.actions.push({
+          text: "OK",
+          primary: true
+        });
+      };
+
+    }
+
+  };
+
+  /**
+   * @type function
+   * @name {{buttonConfirmDialogAlert}}
+   * @nameTags confirmDialog | botão | button | alert | modal | alerta
+   * @description {{buttonConfirmDialogAlertDescription}}
+   * @platform W
+   * @param {ObjectType.BOOLEAN} primaryButton {{buttonConfirmDialogAlert.primaryButton}}
+   * @param {ObjectType.STRING} title {{title}}
+   * @param {ObjectType.STRING} value {{buttonConfirmDialogAlert.value}}
+   * @returns {ObjectType.OBJECT}
+   */
+  this.cronapi.notification.buttonConfirmDialogAlert = function (/** @type {ObjectType.STRING}  @description {{buttonConfirmDialogAlert.primaryButton}}  @blockType util_dropdown  @keys true|false  @values {{yes}}|{{no}}  */ primaryButton, title, /** @type {ObjectType.STATEMENT} @description {{buttonConfirmDialogAlert.value}} */ value) {
+    return {
+      title: title,
+      value: value,
+      primaryValue: primaryButton
+    };
+  };
+
+  /**
+   * @type function
+   * @name {{screenNotifySimpleName}}
+   * @description {{screenNotifySimpleDescription}}
+   * @nameTags show | exibir | exibe | notification | notificação
+   * @param {ObjectType.STRING} status {{screenNotifySimpleParam0}}
+   * @param {ObjectType.STRING} message {{screenNotifySimpleParam1}}
+   * @param {ObjectType.STRING} animation {{screenNotifySimpleParam2}}
+   * @param {ObjectType.STRING} verticalPosition {{screenNotifySimpleParam3}}
+   * @param {ObjectType.STRING} horizontalPosition {{screenNotifySimpleParam4}}
+   * @param {ObjectType.STRING} autoHide {{screenNotifySimpleParam5}}
+   */
+  this.cronapi.notification.customNotify = function(/** @type {ObjectType.STRING} @description {{status}} @blockType util_dropdown @keys error|success|warning|info @values {{error}}|{{success}}|{{warning}}|{{info}} */ status, /** @type {ObjectType.STRING} */  message, /** @type {ObjectType.STRING} @description {{animation}} @blockType util_dropdown @keys fade|slide|zoom @values {{fade}}|{{slide}}|{{zoom}}  */ animation, /** @type {ObjectType.STRING} @description {{verticalPosition}} @blockType util_dropdown @keys top|bottom @values {{top}}|{{bottom}} */ verticalPosition, /** @type {ObjectType.STRING} @description {{horizontalPosition}} @blockType util_dropdown @keys left|center|right @values {{left}}|{{center}}|{{right}} */ horizontalPosition, /** @type {ObjectType.STRING} @description {{autoHide}} @blockType util_dropdown @keys true|false @values {{yes}}|{{no}} */ autoHide) {
+
+    let idCustomNotification = "customNotification" ;
+
+    let dataNotification = {
+      stacking: "default",
+      autoHideAfter: 5000,
+      position: {
+        pinned: true
+      },
+      animation: {
+        open: {
+          effects: null
+        },
+        close: {
+          effects: null
+        }
+      }
+    };
+
+    if (animation || verticalPosition || horizontalPosition || autoHide) {
+      customNotification(message, status, animation, verticalPosition, horizontalPosition, autoHide);
+    } else {
+      defaultNotification(message, status);
+    }
+
+    async function defaultNotification(message, status) {
+
+      let cronappConfig = {
+        id: "CronappNotification",
+        verticalPosition: "top",
+        horizontalPosition: "left",
+        animation: "slide",
+        autoHide: "false"
+      };
+
+      setVerticalPosition(cronappConfig.verticalPosition);
+      setHorizontalPosition(cronappConfig.horizontalPosition);
+      setAnimation(cronappConfig.animation);
+      setAutoHide(cronappConfig.autoHide);
+
+      if (!isNotificationInitialized(cronappConfig.id)) {
+        initializeNotification(cronappConfig.id, dataNotification);
+      }
+
+      showNotification(cronappConfig.id, message, status);
+
+    }
+
+    async function customNotification(message, status, animation, verticalPosition, horizontalPosition, autoHide) {
+
+      setVerticalPosition(verticalPosition);
+      setHorizontalPosition(horizontalPosition);
+      setAnimation(animation);
+      setAutoHide(autoHide);
+
+      initializeNotification(idCustomNotification, dataNotification);
+      showNotification(idCustomNotification, message, status);
+
+    }
+
+    function setVerticalPosition(verticalPosition){
+      switch (verticalPosition) {
+        case "bottom":
+          dataNotification.position.bottom = 20;
+          idCustomNotification = idCustomNotification.concat('-bottom');
+          break;
+
+        default:
+          dataNotification.position.top = 60;
+          idCustomNotification = idCustomNotification.concat('-top');
+
+      }
+    }
+
+    function setHorizontalPosition(horizontalPosition){
+      switch (horizontalPosition) {
+        case "right":
+          dataNotification.position.right = 20;
+          idCustomNotification = idCustomNotification.concat('-right');
+          break;
+
+        case "center":
+          dataNotification.show = centerElementScreen;
+          idCustomNotification = idCustomNotification.concat('-center');
+          break;
+
+        default:
+          dataNotification.position.left = 20;
+          idCustomNotification = idCustomNotification.concat('-left');
+
+      }
+    }
+
+    function centerElementScreen(e){
+      if (e.sender.getNotifications().length == 1) {
+        var element = e.element.parent(),
+            eWidth = element.width(),
+            wWidth = $(window).width()
+        var newLeft;
+
+        newLeft = Math.floor(wWidth / 2 - eWidth / 2);
+
+        e.element.parent().css({ left: newLeft });
+      }
+    }
+
+    function setAnimation(animation){
+      switch (animation) {
+        case "slide":
+          if (dataNotification.show && dataNotification.position.bottom != null) {
+            dataNotification.animation.open.effects = "slideIn:up";
+            idCustomNotification = idCustomNotification.concat('-slideIn-up');
+
+          } else if (dataNotification.show && dataNotification.position.top != null) {
+            dataNotification.animation.open.effects = "slideIn:down";
+            idCustomNotification = idCustomNotification.concat('-slideIn-dow');
+
+          } else if (dataNotification.position.left != null) {
+            dataNotification.animation.open.effects = "slideIn:right";
+            idCustomNotification = idCustomNotification.concat('-slideIn-right');
+
+          } else if (dataNotification.position.left == null) {
+            dataNotification.animation.open.effects = "slideIn:left";
+            idCustomNotification = idCustomNotification.concat('-slideIn-left');
+          }
+
+          dataNotification.animation.close.effects = "slideOut";
+          break;
+
+        case "zoom":
+          dataNotification.animation.open.effects = "zoomIn";
+          dataNotification.animation.close.effects = "zoomOut";
+          idCustomNotification = idCustomNotification.concat('-zoom');
+          break;
+
+        default:
+          dataNotification.animation.open.effects = "fadeIn";
+          dataNotification.animation.close.effects = "fadeOut";
+          idCustomNotification = idCustomNotification.concat('-fade');
+      }
+    }
+
+    function setAutoHide(autoHide){
+      if(autoHide == "false"){
+        dataNotification.autoHideAfter = 0;
+        idCustomNotification = idCustomNotification.concat('-autoHideAfter');
+      }
+    }
+
+    async function initializeNotification(id, options) {
+      if (!hasHTMLElement(id)) {
+        let idNotification = $(`<span id="${id}"></span>`);
+        $('body').append(idNotification);
+
+        await $(`#${id}`).kendoNotification(options);
+
+        if(horizontalPosition == "center"){
+          centerElementScreen(e)
+        }
+      }
+    }
+
+    function isNotificationInitialized(id) {
+      return $(`#${id}`).getKendoNotification();
+    }
+
+    function showNotification(id, message, status) {
+      $(`#${id}`).getKendoNotification().show(message, status);
+    }
+
+    function hasHTMLElement(id) {
+      return document.getElementById(id);
+    }
+
+  };
 
   /**
    * @category CategoryType.REGEX