@syncfusion/ej2-image-editor 22.2.8 → 22.2.10

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.2.8
+*  version : 22.2.10
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@22.2.5",
+  "_id": "@syncfusion/ej2-image-editor@22.2.9",
   "_inBundle": false,
-  "_integrity": "sha512-sor/6/3oqRiPiTr/G1l7iwiiL0g9iTfMVuLSoEC6vBk/PkySa+J2tARLRQJCYAhYwcNkszv8MShP9be8tL719w==",
+  "_integrity": "sha512-byeXp0fLE66PUgjKarMW4FVTjOpV/zZk4T5T8JRYWDFPi4C9VnWTFGMWC/WJ00MwSfX5ze+eDmbECivdY+t+Sg==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-22.2.5.tgz",
-  "_shasum": "f71e3ab4f343ae4eea0e58e5bb2ba85bed46bab2",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-22.2.9.tgz",
+  "_shasum": "8a1070884013eb0d3d27201d843223e9e19a2bfc",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -32,11 +32,11 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~22.2.5",
-    "@syncfusion/ej2-buttons": "~22.2.8",
-    "@syncfusion/ej2-inputs": "~22.2.7",
+    "@syncfusion/ej2-base": "~22.2.10",
+    "@syncfusion/ej2-buttons": "~22.2.9",
+    "@syncfusion/ej2-inputs": "~22.2.9",
     "@syncfusion/ej2-navigations": "~22.2.8",
-    "@syncfusion/ej2-popups": "~22.2.7",
+    "@syncfusion/ej2-popups": "~22.2.9",
     "@syncfusion/ej2-splitbuttons": "~22.2.8"
   },
   "deprecated": false,
@@ -67,7 +67,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "22.2.8",
+  "version": "22.2.10",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/image-editor/action/selection.js

@@ -3125,8 +3125,10 @@ var Selection = /** @class */ (function () {
                                 isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                     }
                     else if (parent.activeObj.shape === 'text') {
-                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
-                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        if (parent.textArea.style.display === 'none') {
+                            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
+                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        }
                     }
                     else if (this.isFhdEditing) {
                         parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
@@ -3143,7 +3145,7 @@ var Selection = /** @class */ (function () {
                         || (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path')) {
                         parent.updateToolbar(parent.element, parent.activeObj.shape);
                     }
-                    else if (parent.activeObj.shape === 'text') {
+                    else if (parent.activeObj.shape === 'text' && parent.textArea.style.display === 'none') {
                         parent.updateToolbar(parent.element, 'text');
                     }
                 }
@@ -3458,23 +3460,24 @@ var Selection = /** @class */ (function () {
             parent.activeObj = extend({}, activeObj, null, true);
             parent.textArea.value = obj.keyHistory;
             parent.textArea.style.display = 'block';
-            var strokeColor = obj.strokeSettings.strokeColor.split('(')[0] === 'rgb' ?
+            var strokeColor = obj.strokeSettings && obj.strokeSettings.strokeColor ? obj.strokeSettings.strokeColor.split('(')[0] === 'rgb' ?
                 this.rgbToHex(parseFloat(obj.strokeSettings.strokeColor.split('(')[1].split(',')[0]), parseFloat(obj.strokeSettings.strokeColor.split('(')[1].split(',')[1]), parseFloat(obj.strokeSettings.strokeColor.split('(')[1].split(',')[2])) :
-                obj.strokeSettings.strokeColor;
-            if (strokeColor === '#ffffff') {
+                obj.strokeSettings.strokeColor : null;
+            if (strokeColor && strokeColor === '#ffffff') {
                 strokeColor = '#fff';
             }
-            if (this.tempActiveObj.strokeSettings.strokeColor === '#ffffff') {
+            if (this.tempActiveObj.strokeSettings && this.tempActiveObj.strokeSettings.strokeColor &&
+                this.tempActiveObj.strokeSettings.strokeColor === '#ffffff') {
                 this.tempActiveObj.strokeSettings.strokeColor = '#fff';
             }
             if (obj.keyHistory !== this.tempActiveObj.keyHistory ||
-                strokeColor !== this.tempActiveObj.strokeSettings.strokeColor ||
-                obj.textSettings.fontFamily !== this.tempActiveObj.textSettings.fontFamily ||
-                Math.round(obj.textSettings.fontSize) !== Math.round(this.tempActiveObj.textSettings.fontSize) ||
-                Math.round(obj.textSettings.fontRatio) !== Math.round(this.tempActiveObj.textSettings.fontRatio) ||
-                obj.textSettings.bold !== this.tempActiveObj.textSettings.bold ||
-                obj.textSettings.italic !== this.tempActiveObj.textSettings.italic ||
-                obj.textSettings.underline !== this.tempActiveObj.textSettings.underline) {
+                (strokeColor && (strokeColor !== this.tempActiveObj.strokeSettings.strokeColor)) ||
+                (obj.textSettings && obj.textSettings.fontFamily !== this.tempActiveObj.textSettings.fontFamily) ||
+                (obj.textSettings && Math.round(obj.textSettings.fontSize) !== Math.round(this.tempActiveObj.textSettings.fontSize)) ||
+                (obj.textSettings && Math.round(obj.textSettings.fontRatio) !== Math.round(this.tempActiveObj.textSettings.fontRatio)) ||
+                (obj.textSettings && obj.textSettings.bold !== this.tempActiveObj.textSettings.bold) ||
+                (obj.textSettings && obj.textSettings.italic !== this.tempActiveObj.textSettings.italic) ||
+                (obj.textSettings && obj.textSettings.underline !== this.tempActiveObj.textSettings.underline)) {
                 isApply = true;
             }
             if (this.isInitialTextEdited && !isApply) {
@@ -4222,6 +4225,9 @@ var Selection = /** @class */ (function () {
                 isInside = true;
             }
         }
+        else if (parent.textArea.style.display === 'block') {
+            isInside = true;
+        }
         if (!isInside) {
             if (isNullOrUndefined(parent.activeObj.currIndex)) {
                 parent.activeObj.currIndex = 'shape_' + (parent.objColl.length + 1);

package/src/image-editor/action/shape.js

@@ -606,6 +606,7 @@ var Shape = /** @class */ (function () {
                     parent.textArea.style.transform = '';
                     parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
                 }
+                this.refreshActiveObj();
             }
             else {
                 this.applyActObj(isMouseDown);

package/src/image-editor/renderer/toolbar.js

@@ -718,26 +718,36 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.renderAnnotationBtn = function (isContextualToolbar) {
         var _this = this;
         var parent = this.parent;
+        var isCustomized = false;
         var items = [];
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Pen') > -1)) {
+        var defItems = ['Ellipse', 'Arrow', 'Line', 'Rectangle', 'Pen', 'Path', 'Text'];
+        if (parent.toolbar) {
+            for (var i = 0; i < defItems.length; i++) {
+                if (parent.toolbar.indexOf(defItems[i]) !== -1) {
+                    isCustomized = true;
+                    break;
+                }
+            }
+        }
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Pen') > -1)) {
             items.push({ text: this.l10n.getConstant('Pen'), id: 'pen', iconCss: 'e-icons e-free-pen' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Line') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Line') > -1)) {
             items.push({ text: this.l10n.getConstant('Line'), id: 'line', iconCss: 'e-icons e-line' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Rectangle') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Rectangle') > -1)) {
             items.push({ text: this.l10n.getConstant('Rectangle'), id: 'rectangle', iconCss: 'e-icons e-rectangle' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Ellipse') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Ellipse') > -1)) {
             items.push({ text: this.l10n.getConstant('Ellipse'), id: 'ellipse', iconCss: 'e-icons e-circle' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Arrow') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Arrow') > -1)) {
             items.push({ text: this.l10n.getConstant('Arrow'), id: 'arrow', iconCss: 'e-icons e-arrow-right-up' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Path') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Path') > -1)) {
             items.push({ text: this.l10n.getConstant('Path'), id: 'path', iconCss: 'e-icons e-critical-path' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Text') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Text') > -1)) {
             items.push({ text: this.l10n.getConstant('Text'), id: 'text', iconCss: 'e-icons e-add-text' });
         }
         var obj = { freehandDrawSelectedId: null };
@@ -842,16 +852,26 @@ var ToolbarModule = /** @class */ (function () {
         var _this = this;
         var parent = this.parent;
         var items = [];
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('CustomSelection') > -1)) {
+        var isCustomized = false;
+        var defItems = ['CustomSelection', 'CircleSelection', 'SquareSelection', 'RatioSelection'];
+        if (parent.toolbar) {
+            for (var i = 0; i < defItems.length; i++) {
+                if (parent.toolbar.indexOf(defItems[i]) !== -1) {
+                    isCustomized = true;
+                    break;
+                }
+            }
+        }
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('CustomSelection') > -1)) {
             items.push({ text: this.l10n.getConstant('Custom'), id: 'custom', iconCss: 'e-icons e-custom' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('CircleSelection') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('CircleSelection') > -1)) {
             items.push({ text: this.l10n.getConstant('Circle'), id: 'circle', iconCss: 'e-icons e-circle' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('SquareSelection') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('SquareSelection') > -1)) {
             items.push({ text: this.l10n.getConstant('Square'), id: 'square', iconCss: 'e-icons e-square' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('RatioSelection') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('RatioSelection') > -1)) {
             items.push({ text: '3:2', id: '3:2', iconCss: 'e-icons e-custom-a' });
             items.push({ text: '4:3', id: '4:3', iconCss: 'e-icons e-custom-b' });
             items.push({ text: '5:4', id: '5:4', iconCss: 'e-icons e-custom-c' });
@@ -869,8 +889,8 @@ var ToolbarModule = /** @class */ (function () {
             shape = parent.currSelectionPoint.shape;
         }
         else {
-            iconCss = 'e-custom';
-            shape = 'custom';
+            iconCss = items[0].iconCss;
+            shape = items[0].id;
         }
         var drpDownBtn = new DropDownButton({
             open: function (args) {
@@ -952,15 +972,29 @@ var ToolbarModule = /** @class */ (function () {
             template: '<button id="' + parent.element.id + '_cropBtn"></button>'
         });
         toolbarItems.push({ align: 'Center', type: 'Separator' });
-        toolbarItems.push({ id: parent.element.id + '_rotateLeft', prefixIcon: 'e-icons e-anti-clock-wise',
-            tooltipText: this.l10n.getConstant('RotateLeft'), align: 'Center' });
-        toolbarItems.push({ id: parent.element.id + '_rotateRight', prefixIcon: 'e-icons e-clock-wise',
-            tooltipText: this.l10n.getConstant('RotateRight'), align: 'Center' });
-        toolbarItems.push({ align: 'Center', type: 'Separator' });
-        toolbarItems.push({ id: parent.element.id + '_horizontalFlip', prefixIcon: 'e-icons e-horizontal-flip',
-            tooltipText: this.l10n.getConstant('HorizontalFlip'), align: 'Center' });
-        toolbarItems.push({ id: parent.element.id + '_verticalFlip', prefixIcon: 'e-icons e-vertical-flip',
-            tooltipText: this.l10n.getConstant('VerticalFlip'), align: 'Center' });
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && (parent.toolbar.indexOf('Transform') > -1 ||
+            parent.toolbar.indexOf('RotateLeft') > -1))) {
+            toolbarItems.push({ id: parent.element.id + '_rotateLeft', prefixIcon: 'e-icons e-anti-clock-wise',
+                tooltipText: this.l10n.getConstant('RotateLeft'), align: 'Center' });
+        }
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && (parent.toolbar.indexOf('Transform') > -1 ||
+            parent.toolbar.indexOf('RotateRight') > -1))) {
+            toolbarItems.push({ id: parent.element.id + '_rotateRight', prefixIcon: 'e-icons e-clock-wise',
+                tooltipText: this.l10n.getConstant('RotateRight'), align: 'Center' });
+        }
+        if (toolbarItems.length > 2) {
+            toolbarItems.push({ align: 'Center', type: 'Separator' });
+        }
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && (parent.toolbar.indexOf('Transform') > -1 ||
+            parent.toolbar.indexOf('HorizontalFlip') > -1))) {
+            toolbarItems.push({ id: parent.element.id + '_horizontalFlip', prefixIcon: 'e-icons e-horizontal-flip',
+                tooltipText: this.l10n.getConstant('HorizontalFlip'), align: 'Center' });
+        }
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && (parent.toolbar.indexOf('Transform') > -1 ||
+            parent.toolbar.indexOf('VerticalFlip') > -1))) {
+            toolbarItems.push({ id: parent.element.id + '_verticalFlip', prefixIcon: 'e-icons e-vertical-flip',
+                tooltipText: this.l10n.getConstant('VerticalFlip'), align: 'Center' });
+        }
         if (!Browser.isDevice) {
             toolbarItems.push({ id: parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                 tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
@@ -1066,7 +1100,9 @@ var ToolbarModule = /** @class */ (function () {
                         toolbar.refreshOverflow();
                     }
                 }
-                parent.select('custom');
+                if (document.getElementById(parent.element.id + '_cropBtn')) {
+                    parent.select(document.getElementById(parent.element.id + '_cropBtn').textContent.toLowerCase());
+                }
             }
         });
         if (Browser.isDevice) {
@@ -1700,31 +1736,41 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.getAdjustmentToolbarItem = function () {
         var toolbarItems = [];
         var parent = this.parent;
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Brightness') > -1)) {
+        var isCustomized = false;
+        var defItems = ['Brightness', 'Contrast', 'Hue', 'Saturation', 'Exposure', 'Opacity', 'Blur'];
+        if (parent.toolbar) {
+            for (var i = 0; i < defItems.length; i++) {
+                if (parent.toolbar.indexOf(defItems[i]) !== -1) {
+                    isCustomized = true;
+                    break;
+                }
+            }
+        }
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Brightness') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_brightness', prefixIcon: 'e-icons e-brightness', cssClass: 'top-icon e-brightness',
                 tooltipText: this.l10n.getConstant('Brightness'), align: 'Center' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Contrast') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Contrast') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_contrast', prefixIcon: 'e-icons e-contrast', cssClass: 'top-icon e-contrast',
                 tooltipText: this.l10n.getConstant('Contrast'), align: 'Center' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Hue') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Hue') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_hue', prefixIcon: 'e-icons e-fade', cssClass: 'top-icon e-fade',
                 tooltipText: this.l10n.getConstant('Hue'), align: 'Center' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Saturation') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Saturation') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_saturation', prefixIcon: 'e-icons e-saturation', cssClass: 'top-icon e-saturation',
                 tooltipText: this.l10n.getConstant('Saturation'), align: 'Center' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Exposure') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Exposure') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_exposure', prefixIcon: 'e-icons e-grain', cssClass: 'top-icon e-grain',
                 tooltipText: this.l10n.getConstant('Exposure'), align: 'Center' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Opacity') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Opacity') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_opacity', prefixIcon: 'e-icons e-opacity', cssClass: 'top-icon e-opacity',
                 tooltipText: this.l10n.getConstant('Opacity'), align: 'Center' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Blur') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Blur') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_blur', prefixIcon: 'e-icons e-tint', cssClass: 'top-icon e-tint',
                 tooltipText: this.l10n.getConstant('Blur'), align: 'Center' });
         }
@@ -1743,37 +1789,47 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.getFilterToolbarItem = function () {
         var toolbarItems = [];
         var parent = this.parent;
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Default') > -1)) {
+        var isCustomized = false;
+        var defItems = ['Default', 'Chrome', 'Cold', 'Warm', 'Grayscale', 'Sepia', 'Invert'];
+        if (parent.toolbar) {
+            for (var i = 0; i < defItems.length; i++) {
+                if (parent.toolbar.indexOf(defItems[i]) !== -1) {
+                    isCustomized = true;
+                    break;
+                }
+            }
+        }
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Default') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_default', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Default'), align: 'Center',
                 template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_defaultCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Default') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Chrome') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Chrome') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_chrome', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Chrome'), align: 'Center',
                 template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_chromeCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Chrome') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Cold') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Cold') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_cold', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Cold'), align: 'Center',
                 template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_coldCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Cold') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Warm') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Warm') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_warm', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Warm'), align: 'Center',
                 template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_warmCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Warm') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Grayscale') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Grayscale') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_grayscale', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Grayscale'), align: 'Center',
                 template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_grayscaleCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Grayscale') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Sepia') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Sepia') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_sepia', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Sepia'), align: 'Center',
                 template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_sepiaCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Sepia') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Invert') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Invert') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_invert', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Invert'), align: 'Center',
                 template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_invertCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Invert') + '</span></div></div>' });
@@ -2047,7 +2103,9 @@ var ToolbarModule = /** @class */ (function () {
                 if (hdrWrapper) {
                     hdrWrapper.style.display = 'none';
                 }
-                document.getElementById(parent.currentFilter + 'Canvas').parentElement.parentElement.classList.add('e-selected');
+                if (document.getElementById(parent.currentFilter + 'Canvas')) {
+                    document.getElementById(parent.currentFilter + 'Canvas').parentElement.parentElement.classList.add('e-selected');
+                }
                 _this.enableDisableTbrBtn();
                 toolbar.refreshOverflow();
             }
@@ -2838,7 +2896,7 @@ var ToolbarModule = /** @class */ (function () {
         for (var _i = 0, selectors_1 = selectors; _i < selectors_1.length; _i++) {
             var selector = selectors_1[_i];
             var element = document.querySelector(selector);
-            if (element.classList.contains('e-selected-btn')) {
+            if (element && element.classList.contains('e-selected-btn')) {
                 element.classList.remove('e-selected-btn');
                 break;
             }

package/tslint.json

@@ -0,0 +1,111 @@
+{
+  "rules": {
+    "chai-vague-errors": true,
+    "use-isnan": true,
+    "missing-jsdoc": true,
+    "missing-optional-annotation": true,
+    "no-backbone-get-set-outside-model": true,
+    "no-banned-terms": true,
+    "no-constant-condition": true,
+    "no-control-regex": true,
+    "no-cookies": true,
+    "no-delete-expression": true,
+    "no-document-write": true,
+    "no-document-domain": true,
+    "no-disable-auto-sanitization": true,
+    "no-duplicate-case": true,
+    "no-duplicate-parameter-names": true,
+    "no-empty-interfaces": true,
+    "no-exec-script": true,
+    "no-function-constructor-with-string-args": true,
+    "no-function-expression": true,
+    "no-invalid-regexp": true,
+    "no-for-in": true,
+    "member-access": true,
+    "no-multiline-string": true,
+    "no-multiple-var-decl": true,
+    "no-unnecessary-bind": true,
+    "no-unnecessary-semicolons": true,
+    "no-octal-literal": true,
+    "no-regex-spaces": true,
+    "no-sparse-arrays": true,
+    "no-string-based-set-immediate": true,
+    "no-string-based-set-interval": true,
+    "no-unused-imports": true,
+    "no-with-statement": true,
+    "prefer-array-literal": true,
+    "promise-must-complete": false,
+    "react-no-dangerous-html": true,
+    "use-named-parameter": true,
+    "valid-typeof": true,
+    "max-func-body-length": [true, 100, {
+      "ignore-parameters-to-function-regex": "describe"
+    }],
+    "class-name": true,
+    "curly": true,
+    "eofline": false,
+    "forin": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "label-position": true,       
+    "max-line-length": [true, 140],
+    "no-arg": true,
+    "no-console": [true,
+      "debug",
+      "info",
+      "log",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-parameter-properties": true,
+    "no-debugger": true,    
+    "no-duplicate-variable": true,
+    "no-empty": true,
+    "no-eval": true,
+    "no-string-literal": true,
+    "no-switch-case-fall-through": true,
+    "trailing-comma": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": false,
+    "no-var-requires": true,
+    "one-line": [true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "no-any": true,
+    "no-conditional-assignment": true,
+    "no-angle-bracket-type-assertion": false,
+    "align": [true, "parameters", "arguments", "statements"],
+    "no-empty-line-after-opening-brace": false,
+    "typedef-whitespace": [false],
+    "ban": true,
+    "quotemark": [true, "single"],
+    "semicolon": true,
+    "triple-equals": [true, "allow-null-check"],
+    "typedef": [true,
+      "call-signature",
+      "parameter",
+      "property-declaration",
+      "variable-declaration",
+      "arrow-parameter",
+      "member-variable-declaration"],    
+    "variable-name": true,
+    "whitespace": [true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+    "jsdoc-format": true,
+    "no-var-keyword": true,
+    "radix": true
+  }
+}