@syncfusion/ej2-image-editor 27.2.3 → 28.1.33

package/dist/es6/ej2-image-editor.es2015.js

@@ -971,6 +971,7 @@ class Draw {
         this.tempPointColl = {};
         this.imageBackgroundColor = '';
         this.allowRedactStraighten = true;
+        this.isNullExtension = true;
         this.parent = parent;
         this.addEventListener();
     }
@@ -1248,6 +1249,9 @@ class Draw {
             case 'setTempStrokeWidth':
                 this.tempStrokeWidth = args.value['strokeWidth'];
                 break;
+            case 'setNullExtension':
+                this.isNullExtension = args.value['extension'];
+                break;
         }
     }
     getModuleName() {
@@ -1272,6 +1276,7 @@ class Draw {
         this.isInitialLoading = this.isErrorImage = this.isNewPath = this.isResizeSelect = false;
         this.isShapeTextInserted = false;
         this.isImageApply = false;
+        this.isNullExtension = true;
         this.initZoomValue = null;
         this.tempFilter = '';
         this.origDim = { width: 0, height: 0 };
@@ -2453,8 +2458,8 @@ class Draw {
         const angle = Math.atan2(this.dy, this.dx);
         const isStartArrowSolid = actObj.start === 'arrowSolid';
         const isEndArrowSolid = actObj.end === 'arrowSolid';
-        const isStartCircleOrSquare = actObj.start === 'circle' || actObj.start === 'square';
         const isEndCircleOrSquare = actObj.end === 'circle' || actObj.end === 'square';
+        const isStartCircleOrSquare = actObj.start === 'circle' || actObj.start === 'square';
         if ((start && (isStartArrowSolid && actObj.end === 'none') || (isStartArrowSolid && !isEndCircleOrSquare && !isStartCircleOrSquare)) ||
             (!start && (isEndArrowSolid && actObj.start === 'none' || !isStartArrowSolid && !isEndCircleOrSquare && !isStartCircleOrSquare))) {
             this.shapeLine(canvasDraw, startX, startY, endX, endY);
@@ -4782,7 +4787,7 @@ class Draw {
         }
         const obj = { defToolbarItems: null };
         parent.notify('toolbar', { prop: 'getDefToolbarItems', value: { obj: obj } });
-        if (obj['defToolbarItems'].length === 0 &&
+        if (obj['defToolbarItems'] && obj['defToolbarItems'].length === 0 &&
             (isNullOrUndefined(document.getElementById(id + '_toolbar'))) &&
             parent.element.querySelector('#' + id + '_toolbarArea')) {
             const height = parent.element.querySelector('#' + id + '_toolbarArea').clientHeight;
@@ -4812,7 +4817,7 @@ class Draw {
                     this.fileType = 'Jpeg';
                     fileType = 'jpeg';
                 }
-                if (fileType !== 'jpeg' && fileType !== 'png' && fileType !== 'svg') {
+                if (fileType !== 'jpeg' && fileType !== 'png' && fileType !== 'svg' && fileType !== 'webp') {
                     this.fileType = null;
                 }
             }
@@ -4908,19 +4913,95 @@ class Draw {
         dialog.appendTo('#' + parent.element.id + '_dialog');
     }
     restoreOldImage() {
-        if (this.parent.isImageLoaded) {
-            this.reset();
-            this.openNewImage();
+        const parent = this.parent;
+        const dropArea = document.getElementById(this.parent.element.id + '_dropArea');
+        const extension = parent.getExtensionArray();
+        const openURLType = typeof this.openURL;
+        if (openURLType !== 'string') {
+            this.openImageData(dropArea);
+            return;
+        }
+        let fileType = this.getFileExtensionFromURL(this.openURL).toLowerCase();
+        if (fileType) {
+            fileType = (fileType === 'jpg' || fileType === 'jpeg') ? 'jpeg' : fileType;
+        }
+        const isAllowedFileType = (fileType ? (extension.indexOf(fileType) > -1 ||
+            (fileType === 'jpeg' && (parent.uploadSettings.allowedExtensions.indexOf('jpg') > -1 ||
+                parent.uploadSettings.allowedExtensions.indexOf('jpeg') > -1))) : false) || this.isNullExtension;
+        if (this.openURL.indexOf('data:image/') > -1 && this.openURL.indexOf('base64') > -1) {
+            this.openImageData(dropArea, true);
+        }
+        else if (parent.uploadSettings.minFileSize || parent.uploadSettings.maxFileSize) {
+            this.getImageSizeFromURL(this.openURL.toString(), (imageSizeMB) => {
+                const isInvalidSize = (parent.uploadSettings.minFileSize && imageSizeMB < parent.uploadSettings.minFileSize) ||
+                    (parent.uploadSettings.maxFileSize && imageSizeMB > parent.uploadSettings.maxFileSize);
+                this.handleFileSize(!isAllowedFileType || isInvalidSize, dropArea, !isAllowedFileType);
+            });
+        }
+        else {
+            this.handleFileSize(!isAllowedFileType, dropArea, !isAllowedFileType);
+        }
+    }
+    handleFileSize(isError, dropArea, fileTypeError) {
+        const parent = this.parent;
+        if (isError) {
+            this.errorLoading();
+            parent.showDialogPopup('unsupported', fileTypeError);
+            if (dropArea && !parent.isImageLoaded) {
+                dropArea.style.display = 'block';
+            }
         }
         else {
+            if (dropArea) {
+                dropArea.style.display = 'none';
+            }
+            if (this.parent.isImageLoaded) {
+                this.reset();
+            }
             this.openNewImage();
         }
     }
-    open(data) {
-        const dropArea = document.getElementById(this.parent.element.id + '_dropArea');
-        if (dropArea) {
-            dropArea.style.display = 'none';
+    openImageData(dropArea, isBase64) {
+        const parent = this.parent;
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const proxy = this;
+        const canvas = parent.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        if (!parent.uploadSettings.minFileSize && !parent.uploadSettings.maxFileSize) {
+            this.handleFileSize(false, dropArea, false);
+            return;
         }
+        if (isBase64) {
+            const img = new Image();
+            img.src = this.openURL;
+            img.onload = () => {
+                ctx.canvas.width = img.width;
+                ctx.canvas.height = img.height;
+                ctx.drawImage(img, 0, 0);
+                proxy.getImageSize(canvas, dropArea);
+            };
+        }
+        else {
+            canvas.width = this.openURL.width;
+            canvas.height = this.openURL.height;
+            ctx.putImageData(this.openURL, 0, 0);
+            this.getImageSize(canvas, dropArea);
+        }
+    }
+    getImageSize(canvas, dropArea) {
+        const parent = this.parent;
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        canvas.toBlob((function (blob) {
+            if ((parent.uploadSettings.minFileSize && blob.size < parent.uploadSettings.minFileSize) ||
+                (parent.uploadSettings.maxFileSize && blob.size > parent.uploadSettings.maxFileSize)) {
+                this.handleFileSize(true, dropArea, false);
+            }
+            else {
+                this.handleFileSize(false, dropArea, false);
+            }
+        }).bind(this), 'image/jpeg', 1);
+    }
+    open(data) {
         if (!this.parent.disabled) {
             this.openURL = data;
             this.restoreOldImage();
@@ -4963,7 +5044,11 @@ class Draw {
                 const fileExtensionArray = fileData.name.split('.');
                 fileExtension = fileExtensionArray[fileExtensionArray.length - 1].toLowerCase();
             }
-            if (fileExtension && ['jpg', 'jpeg', 'png', 'svg'].indexOf(fileExtension) === -1) {
+            const extension = parent.getExtensionArray();
+            const isJPG = ((fileExtension === 'jpg' || fileExtension === 'jpeg') && (parent.uploadSettings.allowedExtensions.indexOf('jpg') > -1 || parent.uploadSettings.allowedExtensions.indexOf('jpeg') > -1));
+            if ((fileExtension && (extension.indexOf(fileExtension) === -1 && !isJPG)) ||
+                ((parent.uploadSettings.minFileSize && fileData.size < parent.uploadSettings.minFileSize) ||
+                    (parent.uploadSettings.maxFileSize && fileData.size > parent.uploadSettings.maxFileSize))) {
                 this.errorLoading();
                 return;
             }
@@ -6280,7 +6365,7 @@ class Export {
             this.imageQuality = imgQuality ? imgQuality : null;
         }
         const tempCanvas = this.exportToCanvas();
-        const imagetype = type !== 'jpeg' ? 'image/png' : 'image/jpeg';
+        const imagetype = (type === 'jpeg' ? 'image/jpeg' : (type === 'webp' ? 'image/webp' : 'image/png'));
         // eslint-disable-next-line @typescript-eslint/tslint/config
         tempCanvas.toBlob(function (blob) {
             const blobUrl = URL.createObjectURL(blob);
@@ -15003,20 +15088,6 @@ class Shape {
             parent.isPublicMethod = false;
         }
     }
-    setTransformColl(transformCollection) {
-        const parent = this.parent;
-        parent.activeObj.rotateFlipColl = [];
-        if (transformCollection) {
-            for (let i = 0; i < transformCollection.length; i++) {
-                if (transformCollection[i].degree) {
-                    parent.activeObj.rotateFlipColl.push(transformCollection[i].degree);
-                }
-                else {
-                    parent.activeObj.rotateFlipColl.push(transformCollection[i].flip.toLowerCase());
-                }
-            }
-        }
-    }
     drawShapeImageEvent(shapeChangingArgs, isSelect) {
         const parent = this.parent;
         this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings, shapeChangingArgs.allowShapeOverflow);
@@ -15040,6 +15111,20 @@ class Shape {
         }
         parent.notify('selection', { prop: 'isShapeInserted', onPropertyChange: false, value: { bool: true } });
     }
+    setTransformColl(transformCollection) {
+        const parent = this.parent;
+        parent.activeObj.rotateFlipColl = [];
+        if (transformCollection) {
+            for (let i = 0; i < transformCollection.length; i++) {
+                if (transformCollection[i].degree) {
+                    parent.activeObj.rotateFlipColl.push(transformCollection[i].degree);
+                }
+                else {
+                    parent.activeObj.rotateFlipColl.push(transformCollection[i].flip.toLowerCase());
+                }
+            }
+        }
+    }
     drawShapeTextEvent(shapeChangingArgs) {
         const parent = this.parent;
         this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings, shapeChangingArgs.allowShapeOverflow);
@@ -16051,6 +16136,13 @@ class Shape {
     }
     renderTextArea(x, y, actObj) {
         const parent = this.parent;
+        const shapeObj = { shapeSettingsObj: {} };
+        parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: shapeObj } });
+        const shapeSettings = shapeObj['shapeSettingsObj'];
+        const shapeChangingArgs = { cancel: false, action: 'text-edit', previousShapeSettings: shapeSettings,
+            currentShapeSettings: shapeSettings };
+        parent.trigger('shapeChanging', shapeChangingArgs);
+        this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings, shapeChangingArgs.allowShapeOverflow);
         const degree = this.getRotDegOfShape(parent.activeObj);
         this.transformTextArea();
         parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
@@ -16649,7 +16741,7 @@ class Shape {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         const fileData = filesData;
         const fileExtension = fileData.name && fileData.name.split('.').pop().toLowerCase();
-        if (fileExtension && ['jpg', 'jpeg', 'png', 'svg'].indexOf(fileExtension) === -1) {
+        if (fileExtension && ['jpg', 'jpeg', 'png', 'svg', 'webp'].indexOf(fileExtension) === -1) {
             this.refreshActiveObj();
             return;
         }
@@ -19898,6 +19990,7 @@ class Transform {
                 parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
             }
         }
+        parent.updateDropInfoContent(parent.element.querySelector('.e-ie-drop-info'));
         const tempFilter = this.lowerContext.filter;
         const canvasWrapper = parent.element.querySelector('#' + parent.element.id + '_canvasWrapper');
         if (canvasWrapper) {
@@ -21730,6 +21823,20 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var ImageEditor_1;
+/**
+ * Defines the settings for restricting uploaded images.
+ */
+class UploadSettings extends ChildProperty {
+}
+__decorate([
+    Property(null)
+], UploadSettings.prototype, "allowedExtensions", void 0);
+__decorate([
+    Property(null)
+], UploadSettings.prototype, "minFileSize", void 0);
+__decorate([
+    Property(null)
+], UploadSettings.prototype, "maxFileSize", void 0);
 /**
  * This interface is used to specify settings for finetuning operations on images, including brightness, contrast, hue, saturation, exposure, opacity, and blur. It includes properties for setting minimum and maximum values for each of these options, as well as a default value.
  */
@@ -22180,6 +22287,24 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         this.quickAccessToolbarTemplateFn();
                     }
                     break;
+                case 'uploadSettings':
+                    if (newProperties.uploadSettings) {
+                        this.uploadSettings = newProperties.uploadSettings;
+                        if (!this.uploadSettings.allowedExtensions) {
+                            this.uploadSettings.allowedExtensions = '.jpg, .jpeg, .png, .svg, .webp';
+                            this.notify('draw', { prop: 'setNullExtension', value: { extension: true } });
+                        }
+                        else {
+                            this.notify('draw', { prop: 'setNullExtension', value: { extension: false } });
+                        }
+                        this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                    }
+                    else {
+                        this.notify('draw', { prop: 'setNullExtension', value: { extension: true } });
+                    }
+                    this.updateDropInfoContent(this.element.querySelector('.e-ie-drop-info'));
+                    break;
             }
         }
     }
@@ -22214,6 +22339,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.notify('toolbar', { prop: 'create-toolbar', onPropertyChange: false });
             this.notify('toolbar', { prop: 'create-contextual-toolbar', onPropertyChange: false });
         }
+        if (!this.uploadSettings.allowedExtensions) {
+            this.uploadSettings.allowedExtensions = '.jpg, .jpeg, .png, .svg, .webp';
+        }
+        else {
+            this.notify('draw', { prop: 'setNullExtension', value: { extension: false } });
+        }
         this.createCanvas();
         if (this.element.offsetWidth > 359 && this.element.querySelector('.e-ie-min-drop-content') && this.element.querySelector('.e-ie-drop-content')) {
             this.element.querySelector('.e-ie-min-drop-content').style.display = 'none';
@@ -22262,17 +22393,28 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         }
     }
     createDropUploader() {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const proxy = this;
         const uploadObj = new Uploader({
             dropArea: this.element.getElementsByClassName('e-canvas-wrapper')[0],
-            allowedExtensions: '.jpg, .jpeg, .png,.svg',
+            allowedExtensions: this.uploadSettings.allowedExtensions,
             multiple: false,
             selected: (args) => {
                 if (args.event.type === 'change' || args.event.type === 'drop') {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     const type = args.filesData[0].type;
                     let errType = 'unsupported';
+                    const extension = this.getExtensionArray();
+                    const isAllowedFileType = (extension.indexOf(type) > -1 ||
+                        (type === 'jpeg' && (proxy.uploadSettings.allowedExtensions.indexOf('jpg') > -1 ||
+                            proxy.uploadSettings.allowedExtensions.indexOf('jpeg') > -1)));
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                    const size = args.filesData[0].size;
+                    const isInvalidSize = (proxy.uploadSettings.minFileSize && size < proxy.uploadSettings.minFileSize) ||
+                        (proxy.uploadSettings.maxFileSize && size > proxy.uploadSettings.maxFileSize);
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    if ((args.event.type === 'change' || (args.event.type === 'drop' && args.event.dataTransfer.files.length === 1)) && (type === 'png' || type === 'jpg' || type === 'jpeg' || type === 'svg')) {
+                    if ((args.event.type === 'change' || (args.event.type === 'drop' && args.event.dataTransfer.files.length === 1)) && isAllowedFileType &&
+                        !isInvalidSize) {
                         this.notify('draw', { prop: 'fileSelect', value: { inputElement: this.element.querySelector('#' + this.element.id + '_dropfileUpload'), args: args } });
                     }
                     else {
@@ -22280,7 +22422,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         if (args.event.type === 'drop' && args.event.dataTransfer.files.length > 1) {
                             errType = 'multi-select-image';
                         }
-                        this.showDialogPopup(errType);
+                        this.showDialogPopup(errType, !isAllowedFileType);
                     }
                 }
             }
@@ -22294,10 +22436,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * Show dialog popup for unsupported files.
      *
      * @param { string } type - Specifies the type of error.
+     * @param { boolean } fileTypeError - Specifies the error is due to file type.
      * @hidden
      * @returns {void}.
      */
-    showDialogPopup(type) {
+    showDialogPopup(type, fileTypeError) {
         let content = '';
         this.element.querySelector('#' + this.element.id + '_dialog').style.display = 'block';
         let headerObj;
@@ -22317,16 +22460,38 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: contentObj } });
             const supportObj = { key: 'SupportText' };
             this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: supportObj } });
+            const extension = this.getExtensionString();
+            const fileSizeObj = { key: 'MinMaxSizeAlert' };
+            this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: fileSizeObj } });
             const andObj = { key: 'And' };
             this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: andObj } });
-            content = '<span>' + contentObj['value'] + ' ' + supportObj['value'] + '<b> JPG, PNG, ' + andObj['value'] + ' SVG</b></span>';
+            let size;
+            if (this.uploadSettings.minFileSize && this.uploadSettings.maxFileSize) {
+                size = ' ' + fileSizeObj['value'] + ' <b> ' + this.formatSizeUnits(this.uploadSettings.minFileSize) + ' </b> ' + andObj['value'] + ' <b> ' + this.formatSizeUnits(this.uploadSettings.maxFileSize) + ' </b> ';
+            }
+            else if (this.uploadSettings.minFileSize) {
+                fileSizeObj['key'] = 'MinSizeAlert';
+                this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: fileSizeObj } });
+                size = ' ' + fileSizeObj['value'] + ' <b> ' + this.formatSizeUnits(this.uploadSettings.minFileSize) + ' </b> ';
+            }
+            else if (this.uploadSettings.maxFileSize) {
+                fileSizeObj['key'] = 'MaxSizeAlert';
+                this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: fileSizeObj } });
+                size = ' ' + fileSizeObj['value'] + ' <b> ' + this.formatSizeUnits(this.uploadSettings.maxFileSize) + ' </b> ';
+            }
+            if (fileTypeError) {
+                content = '<span>' + contentObj['value'] + ' ' + supportObj['value'] + '<b>' + extension + '</b>' + '</span>';
+            }
+            else if (size) {
+                content = '<span>' + contentObj['value'] + ' ' + supportObj['value'] + size + '</span>';
+            }
         }
         const dialog = new Dialog({
             header: headerObj['value'],
             closeOnEscape: true,
             content: content,
             target: document.getElementById('target'),
-            width: '285px',
+            width: Browser.isDevice ? '285px' : '400px',
             isModal: true,
             animationSettings: { effect: 'Zoom' },
             close: this.dlgCloseBtnClick.bind(this),
@@ -22338,6 +22503,97 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         });
         dialog.appendTo('#' + this.element.id + '_dialog');
     }
+    /**
+     * Returns bytes in string format.
+     *
+     * @param { number } bytes - Specifies the bytes.
+     *
+     * @hidden
+     * @returns {string}.
+     */
+    formatSizeUnits(bytes) {
+        let byte = '';
+        if (bytes >= 1073741824) {
+            byte = (bytes / 1073741824).toFixed(2) + ' GB';
+        }
+        else if (bytes >= 1048576) {
+            byte = (bytes / 1048576).toFixed(2) + ' MB';
+        }
+        else if (bytes >= 1024) {
+            byte = (bytes / 1024).toFixed(2) + ' KB';
+        }
+        else if (bytes > 1) {
+            byte = bytes + ' bytes';
+        }
+        else if (bytes === 1) {
+            byte = bytes + ' byte';
+        }
+        else {
+            byte = '0 bytes';
+        }
+        return byte;
+    }
+    /**
+     * Returns allowed file type extensions in string[].
+     *
+     * @hidden
+     * @returns {string[]}.
+     */
+    getExtensionArray() {
+        const validExtensions = ['jpeg', 'jpg', 'png', 'svg', 'webp'];
+        const split = this.uploadSettings.allowedExtensions.split(',');
+        const extension = [];
+        for (const ext of split) {
+            const trimmedExt = ext.trim();
+            for (const valid of validExtensions) {
+                if (trimmedExt.indexOf(valid) !== -1) {
+                    extension.push(valid);
+                    break;
+                }
+            }
+        }
+        return extension;
+    }
+    /**
+     * Returns allowed file type extensions in string.
+     *
+     * @hidden
+     * @returns {string}.
+     */
+    getExtensionString() {
+        const andObj = { key: 'And' };
+        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: andObj } });
+        const extension = this.getExtensionArray();
+        let words = '';
+        for (let i = 0; i < extension.length; i++) {
+            if (i === extension.length - 1 && extension.length > 1 &&
+                !((extension[i] === 'jpeg' || extension[i] === 'jpg') &&
+                    (words.indexOf('JPG') > -1))) {
+                words += ' ' + andObj['value'];
+            }
+            switch (extension[i]) {
+                case 'jpeg':
+                case 'jpg':
+                    if (words.indexOf('JPG') === -1) {
+                        words += ' JPG,';
+                    }
+                    break;
+                case 'png':
+                    words += ' PNG,';
+                    break;
+                case 'svg':
+                    words += ' SVG,';
+                    break;
+                case 'webp':
+                    words += ' WebP,';
+                    break;
+            }
+            if (i === extension.length - 1) {
+                words = words.slice(0, -1);
+            }
+        }
+        return words;
+    }
     /**
      *
      * This Method will add events to component (element, event, method, current reference)
@@ -22412,10 +22668,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: dropObj } });
         const browseObj = { key: 'BrowseText' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: browseObj } });
-        const supportObj = { key: 'SupportText' };
-        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: supportObj } });
-        const andObj = { key: 'And' };
-        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: andObj } });
         const dropAreaElement = this.createElement('div', { id: this.element.id + '_dropArea', className: 'e-ie-drop-area', attrs: { style: 'position: relative;' } });
         const dropIconElement = this.createElement('span', { className: 'e-ie-drop-icon e-icons e-image', attrs: { style: 'position: absolute;' } });
         const dropContentElement = this.createElement('span', { className: 'e-ie-drop-content', attrs: { style: 'position: absolute; display: none;' } });
@@ -22431,7 +22683,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         dropAnchorElement.href = '';
         minDropAnchorElem.href = '';
         const dropInfoElement = this.createElement('span', { className: 'e-ie-drop-info', attrs: { position: 'absolute' } });
-        dropInfoElement.textContent = supportObj['value'] + ' SVG, PNG, ' + andObj['value'] + ' JPG';
+        this.updateDropInfoContent(dropInfoElement);
         const dropUploader = dropAreaElement.appendChild(this.createElement('input', {
             id: this.element.id + '_dropfileUpload', className: 'e-fileUpload e-image-upload'
         }));
@@ -24364,6 +24616,45 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         }
         return items;
     }
+    /**
+     * Updates drop area content dynamically.
+     *
+     * @param { HTMLElement } dropInfoElement - Specifies the drop area element.
+     * @hidden
+     * @returns {void}.
+     */
+    updateDropInfoContent(dropInfoElement) {
+        if (!dropInfoElement) {
+            return;
+        }
+        const supportObj = { key: 'SupportText' };
+        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: supportObj } });
+        const words = this.getExtensionString();
+        const fileSizeObj = { key: 'MinMaxSize' };
+        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: fileSizeObj } });
+        const andObj = { key: 'And' };
+        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: andObj } });
+        let size;
+        if (this.uploadSettings.minFileSize && this.uploadSettings.maxFileSize) {
+            size = ' ' + fileSizeObj['value'] + ' ' + this.formatSizeUnits(this.uploadSettings.minFileSize) + ' ' + andObj['value'] + ' ' + this.formatSizeUnits(this.uploadSettings.maxFileSize);
+        }
+        else if (this.uploadSettings.minFileSize) {
+            fileSizeObj['key'] = 'MinSize';
+            this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: fileSizeObj } });
+            size = ' ' + fileSizeObj['value'] + ' ' + this.formatSizeUnits(this.uploadSettings.minFileSize);
+        }
+        else if (this.uploadSettings.maxFileSize) {
+            fileSizeObj['key'] = 'MaxSize';
+            this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: fileSizeObj } });
+            size = ' ' + fileSizeObj['value'] + ' ' + this.formatSizeUnits(this.uploadSettings.maxFileSize);
+        }
+        if (size) {
+            dropInfoElement.textContent = supportObj['value'] + words + size;
+        }
+        else {
+            dropInfoElement.textContent = supportObj['value'] + words;
+        }
+    }
     /**
      * Handles the OK button operation
      *
@@ -26019,7 +26310,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             Fluent2Dark: { primaryColor: '#115ea3', secondaryColor: '#fff' },
             Fluent2Highcontrast: { primaryColor: '#1aebff', secondaryColor: '#fff' },
             'Bootstrap5.3': { primaryColor: '#0d6efd', secondaryColor: '#fff' },
-            'Bootstrap5.3Dark': { primaryColor: '#0d6efd', secondaryColor: '#fff' }
+            'Bootstrap5.3Dark': { primaryColor: '#0d6efd', secondaryColor: '#fff' },
+            Tailwind3: { primaryColor: '#4f46e5', secondaryColor: '#ffffff' },
+            Tailwind3Dark: { primaryColor: '#6366f1', secondaryColor: '#ffffff03' }
         };
     }
     /**
@@ -26099,6 +26392,9 @@ __decorate([
 __decorate([
     Complex({}, FontFamily)
 ], ImageEditor.prototype, "fontFamily", void 0);
+__decorate([
+    Complex({}, UploadSettings)
+], ImageEditor.prototype, "uploadSettings", void 0);
 __decorate([
     Event()
 ], ImageEditor.prototype, "beforeSave", void 0);
@@ -26188,6 +26484,8 @@ var FileType;
     FileType["Jpeg"] = "Jpeg";
     /** The SVG file type. */
     FileType["Svg"] = "Svg";
+    /** The WebP file type. */
+    FileType["WebP"] = "WebP";
 })(FileType || (FileType = {}));
 /**
  * An enumeration representing the direction of an image editor operation.
@@ -26278,6 +26576,10 @@ var Theme;
     Theme["Fluent2"] = "Fluent2";
     /** The dark variant of the Fluent 2.0 UI theme. */
     Theme["Fluent2Dark"] = "Fluent2Dark";
+    /** The Tailwind 3 UI theme. */
+    Theme["Tailwind3"] = "Tailwind3";
+    /** The dark variant of the Tailwind 3 UI theme. */
+    Theme["Tailwind3Dark"] = "Tailwind3Dark";
 })(Theme || (Theme = {}));
 /**
  * An enum representing the available toolbar commands in the image editor.
@@ -26622,6 +26924,14 @@ class ToolbarModule {
             ConfirmDialogContent: 'Do you want to save the changes you made to the image?',
             AlertDialogHeader: 'Unsupported file',
             AlertDialogContent: 'The selected file is unsupported.',
+            MinMaxSize: 'with file size between',
+            MinMaxSizeAlert: 'File size between',
+            MinSize: 'with minimum file size of',
+            MinSizeAlert: 'A minimum file size of',
+            MaxSize: 'with maximum file size of',
+            MaxSizeAlert: 'A maximum file size of',
+            To: 'to',
+            Bytes: 'bytes',
             Yes: 'Yes',
             No: 'No',
             ImageErrorDialogHeader: 'Image Selection Error',
@@ -26864,7 +27174,7 @@ class ToolbarModule {
                 id: id + '_toolbarArea', className: 'e-toolbar-area'
             }));
             const toolbarItems = { cssClass: 'e-image-upload', align: 'Left', type: 'Input',
-                tooltipText: this.l10n.getConstant('Browse'), template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) };
+                tooltipText: this.l10n.getConstant('Browse'), template: new Uploader({ allowedExtensions: parent.uploadSettings.allowedExtensions, multiple: false }) };
             if (isNullOrUndefined(this.defToolbarItems)) {
                 this.defToolbarItems = [];
             }
@@ -26878,7 +27188,7 @@ class ToolbarModule {
                     align: 'Left', type: 'Input',
                     tooltipText: this.l10n.getConstant('Browse'),
                     template: new Uploader({
-                        allowedExtensions: '.jpg, .jpeg, .png,.svg',
+                        allowedExtensions: parent.uploadSettings.allowedExtensions,
                         multiple: false,
                         selected: () => {
                             const toolbar = document.getElementById(id + '_toolbar');
@@ -26965,7 +27275,7 @@ class ToolbarModule {
         const id = parent.element.id;
         if (parent.showQuickAccessToolbar) {
             const toolbarItems = { cssClass: 'e-image-upload', align: 'Left', type: 'Input',
-                tooltipText: this.l10n.getConstant('Browse'), template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) };
+                tooltipText: this.l10n.getConstant('Browse'), template: new Uploader({ allowedExtensions: parent.uploadSettings.allowedExtensions, multiple: false }) };
             if (isNullOrUndefined(this.defToolbarItems)) {
                 this.defToolbarItems = [];
             }
@@ -27061,11 +27371,11 @@ class ToolbarModule {
         const toolbarItems = [];
         if (!isOkBtn || isResize) {
             if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Open') > -1)) {
-                toolbarItems.push({ id: id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) });
+                toolbarItems.push({ id: id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: parent.uploadSettings.allowedExtensions, multiple: false }) });
                 toolbarItems.push({ visible: false, cssClass: 'e-image-position e-btn e-flat', tooltipText: this.l10n.getConstant('Browse'), align: 'Left' });
             }
             else if (Browser.isDevice && (parent.toolbar && parent.toolbar.indexOf('Open') === -1)) {
-                toolbarItems.push({ visible: false, id: id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) });
+                toolbarItems.push({ visible: false, id: id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: parent.uploadSettings.allowedExtensions, multiple: false }) });
                 toolbarItems.push({ visible: false, cssClass: 'e-image-position e-btn e-flat', tooltipText: this.l10n.getConstant('Browse'), align: 'Left' });
             }
         }
@@ -27615,18 +27925,30 @@ class ToolbarModule {
         }
     }
     fileSelect(inputElement, args) {
+        const parent = this.parent;
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         const type = inputElement.files[0].type.split('/')[1];
-        const filesTypes = ['png', 'jpg', 'jpeg', 'svg', 'svg+xml'];
+        const filesTypes = this.parent.getExtensionArray();
+        const isJPG = ((type === 'jpg' || type === 'jpeg') &&
+            (parent.uploadSettings.allowedExtensions.indexOf('jpg') > -1 ||
+                parent.uploadSettings.allowedExtensions.indexOf('jpeg') > -1));
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.fileName = inputElement.files[0].name.split('.')[0];
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        const size = inputElement.files[0].size;
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.parent.notify('toolbar', { prop: 'setInitialSize', value: { value: inputElement.files[0].size } });
-        if (filesTypes.indexOf(type) > -1) {
+        if ((filesTypes.indexOf(type) > -1 || isJPG || (type.indexOf('svg') > -1 && filesTypes.indexOf('svg') > -1)) &&
+            (!this.parent.uploadSettings.minFileSize || size > this.parent.uploadSettings.minFileSize) &&
+            (!this.parent.uploadSettings.maxFileSize || size < this.parent.uploadSettings.maxFileSize)) {
             this.parent.notify('draw', { prop: 'fileSelect', value: { inputElement: inputElement, args: args } });
         }
         else {
-            this.parent.showDialogPopup();
+            if (!this.parent.isImageLoaded && !Browser.isDevice) {
+                this.destroyTopToolbar();
+                this.createToolbar();
+            }
+            this.parent.showDialogPopup('unsupported', !((filesTypes.indexOf(type) > -1 || isJPG || (type.indexOf('svg') > -1 && filesTypes.indexOf('svg') > -1))));
         }
     }
     triggerTbarClickEvent(args) {
@@ -28128,7 +28450,8 @@ class ToolbarModule {
         const items = [
             { id: 'jpeg', text: 'JPEG' },
             { id: 'png', text: 'PNG' },
-            { id: 'svg', text: 'SVG' }
+            { id: 'svg', text: 'SVG' },
+            { id: 'webp', text: 'WebP' }
         ];
         const inputObj = new TextBox({
             placeholder: this.l10n.getConstant('ImageName')
@@ -28160,7 +28483,7 @@ class ToolbarModule {
         const ddbElem = document.getElementById(id + '_saveDropdownbtn');
         if (ddbElem) {
             const spanElem = document.createElement('span');
-            spanElem.innerHTML = this.fileType.toUpperCase();
+            spanElem.innerHTML = this.fileType === 'Webp' ? 'Webp' : this.fileType.toUpperCase();
             if (ddbElem) {
                 ddbElem.appendChild(spanElem);
             }
@@ -28323,8 +28646,10 @@ class ToolbarModule {
                 this.fileSize = fileSize;
             }).bind(this), 'image/jpeg', quality);
         }
-        else if (!isNullOrUndefined(fileType) && fileType.toLowerCase() === 'png') {
+        else if (!isNullOrUndefined(fileType) && (fileType.toLowerCase() === 'png' || fileType.toLowerCase() === 'webp')) {
+            const type = 'image/' + fileType.toLowerCase();
             ctx.drawImage(tempCanvas, 0, 0);
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             tempCanvas.toBlob((function (blob) {
                 fileSize = Math.floor(blob.size / 1024);
                 if (fileSize > 1000) {
@@ -28340,7 +28665,7 @@ class ToolbarModule {
                     canvas.style.display = 'none';
                 }
                 this.fileSize = fileSize;
-            }).bind(this), 'image/png', 1);
+            }).bind(this), type, 1);
         }
         else if (!isNullOrUndefined(fileType) && fileType.toLowerCase() === 'svg') {
             ctx.drawImage(tempCanvas, 0, 0);
@@ -32953,5 +33278,5 @@ class ToolbarModule {
     }
 }
 
-export { ArrowheadType, Crop, Direction, Draw, Export, FileType, Filter, FinetuneSettings, FontFamily, FrameLineStyle, FrameType, FreehandDrawing, ImageEditor, ImageEditorCommand, ImageFilterOption, ImageFinetuneOption, RedactType, Selection, SelectionSettings, Shape, ShapeType, Theme, ToolbarModule, Transform, UndoRedo, ZoomSettings, ZoomTrigger };
+export { ArrowheadType, Crop, Direction, Draw, Export, FileType, Filter, FinetuneSettings, FontFamily, FrameLineStyle, FrameType, FreehandDrawing, ImageEditor, ImageEditorCommand, ImageFilterOption, ImageFinetuneOption, RedactType, Selection, SelectionSettings, Shape, ShapeType, Theme, ToolbarModule, Transform, UndoRedo, UploadSettings, ZoomSettings, ZoomTrigger };
 //# sourceMappingURL=ej2-image-editor.es2015.js.map