@boldreports/javascript-reporting-extensions - npm Package Compare versions

Comparing version 6.3.29 to 6.3.30

package.json

 {
   "name": "@boldreports/javascript-reporting-extensions",
-  "version": "6.3.29",
+  "version": "6.3.30",
   "description": "The Bold Reports Extensions by Syncfusion contains scripts and themes for barcode report item to be integrated in JavaScript Report Viewer and JavaScript Report Designer for enterprise web development(HTML5)",
@@ -5,0 +5,0 @@ "repository": {

signature.dialog.js

@@ -84,3 +84,3 @@ var SignatureDialog = (function () {
         this.renderBody();
-        this.wiredDesignerEvents();
+        this.wiredEvents();
         this.dlgInstance.show();
@@ -113,7 +113,3 @@ this.setSign(dialogInfo.imageData);
     SignatureDialog.prototype.appendCropButton = function (target) {
-        var cropBtn = this.buildElement('div', 'e-signDialog-cropIconDiv', '', {}, {});
-        var cropDiv = this.buildElement('div', 'e-signDialog-cropIconChildDiv e-signDialog-cropIcon-disable', '', {}, {});
-        var cropText = this.buildElement('span', 'e-signDialog-cropIcon', '', {}, { 'title': this.getLocale('crop') });
-        cropDiv.append(cropText);
-        cropBtn.append(cropDiv);
+        var cropBtn = this.buildElement('div', 'e-signDialog-cropIconDiv e-signDialog-cropIcon-disable', '', {}, { 'title': this.getLocale('crop'), 'aria-label': this.getLocale('arialabelcrop'), 'tabindex': '0', 'role': 'button', 'aria-disabled': 'true' });
         cropBtn.bind('click', $.proxy(this.updateCropState, this));
@@ -124,4 +120,4 @@ target.append(cropBtn);
         var strokeColorDiv = this.buildElement('div', 'e-signDialog-strokeColorDiv', '', {}, {});
-        var strokeColorLabel = this.buildElement('span', 'e-rptdesigner-add-label e-signDialog-text-span', this.getLocale('strokeColor'), {}, { type: 'label', 'title': this.getLocale('strokeColor') });
-        var strokeColorTag = this.buildElement('div', 'e-signDialog-strokeColorTag', '', {}, {});
+        var strokeColorLabel = this.buildElement('span', 'e-rptdesigner-add-label e-signDialog-text-span', this.getLocale('strokeColor'), {}, { 'id': this.id + '_stroke_color_label', type: 'label', 'title': this.getLocale('strokeColor'), 'aria-label': this.getLocale('strokeColor') });
+        var strokeColorTag = this.buildElement('div', 'e-signDialog-strokeColorTag', '', {}, { 'aria-labelledby': this.id + '_stroke_color_label', 'tabindex': '0' });
         var strokeColor = this.buildElement('input', 'e-signDialog-strokeColor', '', null, {});
@@ -144,3 +140,3 @@ this.strokeColorObj = new ejs.inputs.ColorPicker({
         var strokeWidth = this.buildElement('div', 'e-signDialog-strokeWidthDiv', '', {}, {});
-        var drpdwnLbl = this.buildElement('span', 'e-rptdesigner-add-label e-signDialog-text-span', this.getLocale('strokeWidth'), {}, { type: 'label', 'title': this.getLocale('strokeWidth') });
+        var drpdwnLbl = this.buildElement('span', 'e-rptdesigner-add-label e-signDialog-text-span', this.getLocale('strokeWidth'), {}, { 'id': this.id + '_stroke_width_label', type: 'label', 'title': this.getLocale('strokeWidth'), 'aria-label': this.getLocale('strokeWidth') });
         var drpdwnTag = this.buildElement('div', 'e-signDialog-drpDwnTag', '', {}, {});
@@ -155,6 +151,6 @@ var dropDown = this.buildElement('input', 'e-field', '', {}, { type: 'text' });
             placeHolder: '2',
-            cssClass: 'e-rptdesigner-param-assign e-designer-ejwidgets e-rptdesigner-filter e-designer-dropdownlist e-standard',
-            allowFiltering: true,
+            cssClass: 'e-rptdesigner-param-assign e-designer-ejwidgets e-designer-dropdownlist',
             popupHeight: '180px',
-            change: $.proxy(this.onLineWidthChange, this)
+            change: $.proxy(this.onLineWidthChange, this),
+            htmlAttributes: { 'aria-labelledby': this.id + '_stroke_width_label' }
         });
@@ -167,5 +163,3 @@ drpdwnTag.append(dropDown);
     SignatureDialog.prototype.appendClearBtn = function (target) {
-        var clearBtn = this.buildElement('div', 'e-signDialog-btn-clear', '', {}, {});
-        var textSpan = this.buildElement('span', 'e-btntxt e-rptdesigner-add-btn e-signDialog-text-span', this.getLocale('clear'), {}, { 'title': this.getLocale('clear') });
-        clearBtn.append(textSpan);
+        var clearBtn = this.buildElement('div', 'e-rptdesigner-add-btn e-signDialog-btn-clear e-signDialog-text-span', this.getLocale('clear'), {}, { 'title': this.getLocale('clear'), 'aria-label': this.getLocale('arialabelclear'), 'tabindex': '0', 'role': 'button' });
         clearBtn.bind('click', $.proxy(this.clearSignature, this));
@@ -187,2 +181,4 @@ target.append(clearBtn);
         canvas.height = this.initialHgt;
+        canvas.setAttribute('tabindex', '0');
+        canvas.setAttribute('aria-label', this.getLocale('arialabelcanvas'));
         context.lineWidth = 2;
@@ -247,3 +243,3 @@ context.strokeStyle = '#000000';
         var cropBox = this.container.find('.e-signDialog-cropBox');
-        var cropDiv = this.container.find('.e-signDialog-cropIconChildDiv');
+        var cropDiv = this.container.find('.e-signDialog-cropIconDiv');
         if (cropBox.hasClass('crop-disable')) {
@@ -253,2 +249,3 @@ cropBox.removeClass('crop-disable');
             cropDiv.removeClass('e-signDialog-cropIcon-disable');
+            cropDiv.attr('aria-disabled', 'false');
             cropDiv.addClass('e-signDialog-cropIcon-enable');
@@ -264,3 +261,3 @@ var canvas = this.container.find('#' + this.id + '_signDialog_canvas')[0];
         var canvas = this.container.find('#' + this.id + '_signDialog_canvas')[0];
-        var cropDiv = this.container.find('.e-signDialog-cropIconChildDiv');
+        var cropDiv = this.container.find('.e-signDialog-cropIconDiv');
         var cropBox = this.container.find('.e-signDialog-cropBox');
@@ -272,2 +269,3 @@ if (cropBox.hasClass('crop-enable')) {
             cropDiv.removeClass('e-signDialog-cropIcon-enable');
+            cropDiv.attr('aria-disabled', 'true');
         }
@@ -388,3 +386,4 @@ cropBox.css({ width: '0px', height: '0px', display: 'none' });
                 left: this.cropStartX + "px",
-                top: this.cropStartY + "px"
+                top: this.cropStartY + "px",
+                pointerEvents: 'none'
             });
@@ -423,3 +422,4 @@ }
             left: Math.min(this.cropStartX, currentX) + "px",
-            top: Math.min(this.cropStartY, currentY) + "px"
+            top: Math.min(this.cropStartY, currentY) + "px",
+            pointerEvents: 'none'
         });
@@ -456,3 +456,3 @@ };
     SignatureDialog.prototype.resetValues = function () {
-        this.unwiredDesignerEvents();
+        this.unwiredEvents();
         if (this.hasViewerInstance(this.instance)) {
@@ -475,3 +475,3 @@ this.instance._destroyEJ2Objects(this.container.find('.e-dlg-content .e-signDialog-root-container'));
     };
-    SignatureDialog.prototype.wiredDesignerEvents = function () {
+    SignatureDialog.prototype.wiredEvents = function () {
         var canvas = this.container.find('#' + this.id + '_signDialog_canvas')[0];
@@ -487,3 +487,3 @@ canvas.addEventListener('mousedown', $.proxy(this.onMouseDown, this));
     };
-    SignatureDialog.prototype.unwiredDesignerEvents = function () {
+    SignatureDialog.prototype.unwiredEvents = function () {
         var canvas = this.container.find('#' + this.id + '_signDialog_canvas')[0];
@@ -546,2 +546,17 @@ canvas.removeEventListener('mousedown', $.proxy(this.onMouseDown, this));
                 return defaultLocale.crop;
+            case 'arialabelcanvas':
+                if (locale && locale.ariaLabelCanvas) {
+                    return locale.ariaLabelCanvas;
+                }
+                return defaultLocale.ariaLabelCanvas;
+            case 'arialabelcrop':
+                if (locale && locale.ariaLabelCrop) {
+                    return locale.ariaLabelCrop;
+                }
+                return defaultLocale.ariaLabelCrop;
+            case 'arialabelclear':
+                if (locale && locale.ariaLabelClear) {
+                    return locale.ariaLabelClear;
+                }
+                return defaultLocale.ariaLabelClear;
         }
@@ -653,3 +668,6 @@ return text;
     strokeWidth: 'Stroke Width',
-    crop: 'Crop'
+    crop: 'Crop',
+    ariaLabelCanvas: 'Canvas area to draw your signature',
+    ariaLabelCrop: 'Crop the signature',
+    ariaLabelClear: 'Clear the signature'
 };
@@ -664,3 +682,6 @@ SignatureDialog.Locale['ar-AE'] = {
     strokeWidth: 'عرض الخط',
-    crop: 'اقتصاص'
+    crop: 'اقتصاص',
+    ariaLabelCanvas: 'منطقة اللوحة لرسم توقيعك',
+    ariaLabelCrop: 'قص التوقيع',
+    ariaLabelClear: 'مسح التوقيع'
 };
@@ -675,3 +696,6 @@ SignatureDialog.Locale['fr-FR'] = {
     strokeWidth: 'Épaisseur du trait',
-    crop: 'Recadrer'
+    crop: 'Recadrer',
+    ariaLabelCanvas: 'Zone de toile pour dessiner votre signature',
+    ariaLabelCrop: 'Rogner la signature',
+    ariaLabelClear: 'Effacer la signature'
 };
@@ -686,3 +710,6 @@ SignatureDialog.Locale['de-DE'] = {
     strokeWidth: 'Strichstärke',
-    crop: 'Zuschneiden'
+    crop: 'Zuschneiden',
+    ariaLabelCanvas: 'Leinwandbereich zum Zeichnen Ihrer Unterschrift',
+    ariaLabelCrop: 'Unterschrift zuschneiden',
+    ariaLabelClear: 'Unterschrift löschen'
 };
@@ -697,3 +724,6 @@ SignatureDialog.Locale['en-AU'] = {
     strokeWidth: 'Stroke Width',
-    crop: 'Crop'
+    crop: 'Crop',
+    ariaLabelCanvas: 'Canvas area to draw your signature',
+    ariaLabelCrop: 'Crop the signature',
+    ariaLabelClear: 'Clear the signature'
 };
@@ -708,3 +738,6 @@ SignatureDialog.Locale['en-CA'] = {
     strokeWidth: 'Stroke Width',
-    crop: 'Crop'
+    crop: 'Crop',
+    ariaLabelCanvas: 'Canvas area to draw your signature',
+    ariaLabelCrop: 'Crop the signature',
+    ariaLabelClear: 'Clear the signature'
 };
@@ -719,3 +752,6 @@ SignatureDialog.Locale['it-IT'] = {
     strokeWidth: 'Spessore tratto',
-    crop: 'Ritaglia'
+    crop: 'Ritaglia',
+    ariaLabelCanvas: 'Area della tela per disegnare la tua firma',
+    ariaLabelCrop: 'Ritaglia la firma',
+    ariaLabelClear: 'Cancella la firma'
 };
@@ -730,3 +766,6 @@ SignatureDialog.Locale['es-ES'] = {
     strokeWidth: 'Ancho del trazo',
-    crop: 'Recortar'
+    crop: 'Recortar',
+    ariaLabelCanvas: 'Área de lienzo para dibujar tu firma',
+    ariaLabelCrop: 'Recortar la firma',
+    ariaLabelClear: 'Borrar la firma'
 };
@@ -741,3 +780,6 @@ SignatureDialog.Locale['fr-CA'] = {
     strokeWidth: 'Épaisseur du trait',
-    crop: 'Recadrer'
+    crop: 'Recadrer',
+    ariaLabelCanvas: 'Zone de canevas pour dessiner votre signature',
+    ariaLabelCrop: 'Recadrer la signature',
+    ariaLabelClear: 'Effacer la signature'
 };
@@ -752,3 +794,6 @@ SignatureDialog.Locale['tr-TR'] = {
     strokeWidth: 'Çizgi Kalınlığı',
-    crop: 'Kırp'
+    crop: 'Kırp',
+    ariaLabelCanvas: 'İmzanızı çizmek için tuval alanı',
+    ariaLabelCrop: 'İmzayı kırp',
+    ariaLabelClear: 'İmzayı temizle'
 };
@@ -763,3 +808,6 @@ SignatureDialog.Locale['zh-CN'] = {
     strokeWidth: '笔触宽度',
-    crop: '裁剪'
+    crop: '裁剪',
+    ariaLabelCanvas: '签名绘制区域',
+    ariaLabelCrop: '裁剪签名',
+    ariaLabelClear: '清除签名'
 };

signature.reportitem.js

@@ -25,8 +25,8 @@ var EJSignature = (function () {
     EJSignature.prototype.renderSignature = function () {
-        this.customItemDiv = this.buildElement('div', 'customitem e-rptdesigner-customItem-sign', '', {}, {});
-        this.canvasTag = this.buildElement('canvas', '', '', { id: this.customJSON.Name + '_customItem_canvas' }, { width: '100%', height: '100%' });
+        var bgColor = (this.customJSON && this.customJSON.Style) ? (this.customJSON.Style.BackgroundColor === 'Transparent' ?
+            'white' : this.customJSON.Style.BackgroundColor) : 'white';
+        this.customItemDiv = this.buildElement('div', 'customitem e-rptdesigner-customItem-sign', '', { 'id': this.customJSON.Name + '_customItem' }, { 'background-color': bgColor });
+        this.canvasTag = this.buildElement('canvas', '', '', { 'id': this.customJSON.Name + '_customItem_canvas' }, { width: '100%', height: '100%' });
         this.customItemDiv.append(this.canvasTag);
         this.rootElement.append(this.customItemDiv);
-        var bgColor = (this.customJSON && this.customJSON.Style) ? (this.customJSON.Style.BackgroundColor === 'Transparent' ?
-            'white' : this.customJSON.Style.BackgroundColor) : 'white';
         var imgData = this.getPropertyVal('SignatureValue');
@@ -43,3 +43,5 @@ imgData = imgData && imgData.length > 0 ? 'data:image/png;base64,' + imgData : imgData;
             case 'backgroundcolor':
-                this.canvasTag.css('background-color', newValue === 'Transparent' ? 'white' : newValue);
+                var bgColor = newValue === 'Transparent' ? 'white' : newValue;
+                this.customItemDiv.css('background-color', bgColor);
+                this.canvasTag.css('background-color', bgColor);
                 break;
@@ -67,6 +69,2 @@ }
             });
-            this.canvasTag.css({
-                width: width,
-                height: height
-            });
         }
@@ -77,5 +75,2 @@ else if (!ej.isNullOrUndefined(height) && ej.isNullOrUndefined(width)) {
             });
-            this.canvasTag.css({
-                height: height
-            });
         }
@@ -86,5 +81,2 @@ else if (ej.isNullOrUndefined(height) && !ej.isNullOrUndefined(width)) {
             });
-            this.canvasTag.css({
-                width: width
-            });
         }
@@ -160,3 +152,3 @@ this.setSign(imgData, document.getElementById(this.customJSON.Name + '_customItem_canvas'), this.customJSON.Style.BackgroundColor === 'Transparent' ? 'white' : this.customJSON.Style.BackgroundColor);
     EJSignature.prototype.getPropertyVal = function (name) {
-        if (this.customJSON.CustomProperties && this.customJSON.CustomProperties.length > 0) {
+        if (this.customJSON && this.customJSON.CustomProperties && this.customJSON.CustomProperties.length > 0) {
             for (var index = 0; index < this.customJSON.CustomProperties.length; index++) {
@@ -171,3 +163,3 @@ if (this.customJSON.CustomProperties[index].Name === name) {
     EJSignature.prototype.updatePropertyVal = function (propertyName, value) {
-        if (this.customJSON.CustomProperties && this.customJSON.CustomProperties.length > 0) {
+        if (this.customJSON && this.customJSON.CustomProperties && this.customJSON.CustomProperties.length > 0) {
             for (var index = 0; index < this.customJSON.CustomProperties.length; index++) {
@@ -174,0 +166,0 @@ if (this.customJSON.CustomProperties[index].Name === propertyName) {

No alert changes

Improved metrics

Total package byte prevSize

106365

increased by2.22%

Lines of code

2261

increased by1.48%

No dependency changes