lightning-base-components 1.16.4-alpha → 1.16.5-alpha

package/README.md

@@ -76,6 +76,7 @@ The npm package includes these components, along with any utilities and librarie
 
 -   lightning-accordion
 -   lightning-accordion-section
+-   LightningAlert
 -   lightning-avatar
 -   lightning-badge
 -   lightning-breadcrumb
@@ -91,6 +92,7 @@ The npm package includes these components, along with any utilities and librarie
 -   lightning-carousel-image
 -   lightning-checkbox-group
 -   lightning-combobox
+-   LightningConfirm
 -   lightning-datatable
 -   lightning-dual-listbox
 -   lightning-dynamic-icon
@@ -116,6 +118,10 @@ The npm package includes these components, along with any utilities and librarie
 -   lightning-menu-divider
 -   lightning-menu-item
 -   lightning-menu-subheader
+-   LightningModal
+-   lightning-modal-header
+-   lightning-modal-body
+-   lightning-modal-footer
 -   lightning-navigation
 -   lightning-pill
 -   lightning-pill-container
@@ -123,6 +129,7 @@ The npm package includes these components, along with any utilities and librarie
 -   lightning-progress-indicator
 -   lightning-progress-ring
 -   lightning-progress-step
+-   LightningPrompt
 -   lightning-radio-group
 -   lightning-relative-date-time
 -   lightning-slider

package/metadata/raptor.json

@@ -2376,6 +2376,9 @@
     ]
   },
   "marketingAssetcreationApi": {},
+  "mediaUtils": {
+    "minVersion": "0.0"
+  },
   "menuDivider": {
     "minVersion": "0.0",
     "slotNames": [],
@@ -3147,6 +3150,7 @@
   },
   "routingService": {},
   "salesEnablementProgramApi": {},
+  "salesPeopleApi": {},
   "select": {
     "slotNames": [],
     "properties": [

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.16.4-alpha",
+    "version": "1.16.5-alpha",
     "engines": {
         "node": ">=14.18.2"
     },
@@ -1282,6 +1282,7 @@
             "lightning/layout",
             "lightning/layoutItem",
             "lightning/lookupAddress",
+            "lightning/mediaUtils",
             "lightning/menuDivider",
             "lightning/menuItem",
             "lightning/menuSubheader",
@@ -1326,4 +1327,4 @@
         ]
     },
     "license": "MIT"
-}
+}

package/src/lightning/mediaUtils/__docs__/mediaUtils.md

@@ -0,0 +1,87 @@
+The `mediaUtils` library contains utility functions that can be used by an LWC developer to process media files. The following functions are contained in the `mediaUtils` library:
+
+## processImage
+
+You can use `processImage` function to resize and compress image files. To use this function, simply import it in your LWC first:
+```
+import { processImage } from 'lightning/mediaUtils';
+```
+
+You can then call this function by passing in an input image and a set of options to be used to process the input image, as further described below. It will return a promise that will resolve to a `Blob` object containing the output image data.
+
+#### Parameters
+
+* `input`: Defines the input image, which can either be a `File` or `Blob` object
+* `options`: An object that defines the options to be used when processing the input image. It is an optional parameter containing a number of flags. If this parameter or any of its flags are omitted, default values will be used as further described below.
+    * `resizeMode`: A string that determines how the image will be resized. It can contain one of the below values
+        * `fill`: This is default. The image will be resized to fill the target dimension. If necessary, the image will be stretched or squished to fit.
+        * `contain`: The image keeps its aspect ratio but will be resized to fit within the target dimension.
+        * `none`: The image will not be resized and will retain its original dimension.
+    * `resizeStrategy`: A string that determines how to resize the image. If `resizeMode` is set to `none` this flag will be ignored.
+        * `reduce`: Only resize if the image is larger than the target size (smaller images won't be resized).
+        * `enlarge`: Only resize if the image is smaller than the target size (larger images won't be resized).
+        * `always`: This is default. Always resize the image to the target size regardless of the original image dimensions.
+    * `targetWidth`: The target width when resizing an image. If omitted, defaults to the original image width. If `resizeMode` is set to `none` this flag will be ignored.
+    * `targetHeight`: The target height when resizing an image. If omitted, defaults to the original image height. If `resizeMode` is set to `none` this flag will be ignored.
+    * `compressionQuality`: A number between 0-1 that determines the compression quality. If omitted then the browser/webview picks a default value as it sees fit. Note that this parameter will be considered as a suggested compression quality, however the browser/webview may choose to override this value if it deems it necessary. For example if the value is larger than 1 or if it is considered to be too small by the browser/webview, then it will override the value to something that it deems more appropriate.
+    * `imageSmoothingEnabled`: A boolean that determines whether scaled images are smoothed or not. Defaults to `true`.
+    * `preserveTransparency`: A boolean that determines whether the transparency info of the input image (if any) should be preserved or not. Defaults to `true`. If the input image is a GIF/PNG and this flag is set to `true` the output image will be a PNG. For all other cases the output will be a JPEG.
+    * `backgroundColor`: A string that defines a CSS color as described [here](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Defaults to `white`. When `preserveTransparency` is set to `false`, the output image will have its background set to this color before the input image is resized and drawn on top.
+
+#### Example
+
+As an example, consider the scenario where you would like to upload files to a Salesforce org using a [`lightning-input`](bundle/lightning-input/documentation) component. In your HTML code, you may have:
+```
+.
+.
+.
+<lightning-input
+    type="file"
+    label="Select Files to Upload"
+    accept="image/*"
+    multiple
+    onchange={handleFilesSelected}>
+</lightning-input>
+.
+.
+.
+```
+
+In your Javascript file, you can now use `processImage` from `mediaUtils`, for example to reduce image sizes and hence reduce the bandwidth used to upload the images, as illustrated below:
+```
+import { processImage } from 'lightning/mediaUtils';
+.
+.
+.
+async handleFilesSelected(event) {
+    try {
+        // Using the below options we resize images to a maximum of 2048x2048 pixels
+        // while containing their aspect ratio. By setting 'resizeStrategy' to 'reduce'
+        // we ensure that only images that have either width or height larger than
+        // 2048 pixels will be resized. Moreover, we've chosen not to preserve transparency
+        // in the input images and instead convert transparent pixels to white. Lastly,
+        // the images will be compressed with a 75% compression quality to reduce their byte size.
+        let options = {
+            resizeMode: 'contain',
+            resizeStrategy: 'reduce',
+            targetWidth: 2048,
+            targetHeight: 2048,
+            compressionQuality: 0.75,
+            imageSmoothingEnabled: true,
+            preserveTransparency: false,
+            backgroundColor: 'white'
+        };
+
+        for (const file of event.target.files) {
+            let blob = await processImage(file, options);
+            // here we can upload the data contained in the blob that is returned by processImage
+        }
+    } 
+    catch (error) {
+        console.error("ERROR: ", error)
+    }
+}
+.
+.
+.
+```

package/src/lightning/mediaUtils/mediaUtils.js

@@ -0,0 +1,321 @@
+/**
+ * Given an input image (as a file handle or a blob) this method will resize
+ * and compress the image according to the specified options, and return a Blob
+ * object containing the resulting image data.
+ *
+ * @param {(File|Blob)} input the input image
+ * @param {Object} [options] the options to be used when processing the image.
+ *        It is an optional parameter containing a number of flags. If this
+ *        parameter or any of its flags are omitted, default values will be
+ *        used as described below.
+ *
+ *        resizeMode: A string that determines how the image will be resized.
+ *           fill: This is default. The image will be resized to fill the target dimension.
+ *                 If necessary, the image will be stretched or squished to fit.
+ *           contain: The image keeps its aspect ratio but will be resized to fit within the target dimension.
+ *           none: The image will not be resized and will retain its original dimension.
+ *
+ *        resizeStrategy: A string that determines how to resize the image. If resizeMode is set to 'none' this flag will be ignored.
+ *           reduce: Only resize if the image is larger than the target size (smaller images won't be resized)
+ *           enlarge: Only resize if the image is smaller than the target size (larger images won't be resized)
+ *           always: This is default. Always resize the image to the target size regardless of the original image dimensions.
+ *
+ *        targetWidth: The target width when resizing an image. If omitted, defaults to the original image width.
+ *                  If resizeMode is set to 'none' this flag will be ignored.
+ *
+ *        targetHeight: The target height when resizing an image. If omitted, defaults to the original image height.
+ *                  If resizeMode is set to 'none' this flag will be ignored.
+ *
+ *        compressionQuality: A number between 0-1 that determines the compression quality. If omitted then the browser/webview  picks
+ *                            a default value as it sees fit. Note that this parameter will be considered as a suggested/desired
+ *                            compression quality however the browser/webview may choose to override this value if it deems it necessary.
+ *                            For example if the value is larger than 1 or if it is considered to be too small by the browser/webview,
+ *                            then it will override the value to something that it deems more appropriate.
+ *
+ *        imageSmoothingEnabled: A boolean that determines whether scaled images are smoothed or not. Defaults to true.
+ *
+ *        preserveTransparency: A boolean that determines whether the transparency info of the input image (if any) should
+ *                              be preserved or not. Defaults to true. If the input image is a GIF/PNG and this flag is set to true
+ *                              the output image will be a PNG. For all other cases the output will be a JPEG.
+ *
+ *        backgroundColor: A string that defines a CSS color as described here: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+ *                         Defaults to white. When preserveTransparency is set to false, the output image will have its background set to
+ *                         this color before the input image is resized and drawn on top.
+ *
+ * @returns {Promise} a promise that resolves to a Blob object containing the output image data.
+ */
+export function processImage(input, options = null) {
+    return readInputData(input)
+        .then((dataURL) => loadInputDataIntoImage(dataURL))
+        .then((image) => resizeAndCompressImage(image, input.type, options));
+}
+
+function readInputData(input) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = (event) => {
+            resolve(event.target.result);
+        };
+
+        reader.onerror = () => {
+            reject(new Error('Unable to read the input data.'));
+        };
+
+        try {
+            reader.readAsDataURL(input);
+        } catch (err) {
+            reject(new Error('Unable to read the input data.'));
+        }
+    });
+}
+
+function loadInputDataIntoImage(dataUrl) {
+    return new Promise((resolve, reject) => {
+        let image = new Image();
+
+        image.onload = function () {
+            resolve(image);
+        };
+
+        image.onerror = function () {
+            reject(new Error('Unable to load the input as an image.'));
+        };
+
+        image.src = dataUrl;
+    });
+}
+
+function getResizeMode(defaultValue, options) {
+    let resizeMode = defaultValue;
+    if (options && options.resizeMode) {
+        resizeMode = `${options.resizeMode}`.toLowerCase().trim();
+    }
+
+    if (
+        resizeMode === 'fill' ||
+        resizeMode === 'contain' ||
+        resizeMode === 'none'
+    ) {
+        return resizeMode;
+    }
+
+    throw new Error('Invalid parameter value for resizeMode.');
+}
+
+function getResizeStrategy(defaultValue, options) {
+    let resizeStrategy = defaultValue;
+    if (options && options.resizeStrategy) {
+        resizeStrategy = `${options.resizeStrategy}`.toLowerCase().trim();
+    }
+
+    if (
+        resizeStrategy === 'reduce' ||
+        resizeStrategy === 'enlarge' ||
+        resizeStrategy === 'always'
+    ) {
+        return resizeStrategy;
+    }
+
+    throw new Error('Invalid parameter value for resizeStrategy.');
+}
+
+function getTargetWidth(defaultValue, options) {
+    let targetWidth = defaultValue;
+
+    if (options && options.targetWidth) {
+        targetWidth = parseFloat(options.targetWidth);
+        if (isNaN(targetWidth)) {
+            throw new Error('Invalid parameter value for targetWidth.');
+        }
+    }
+
+    return Math.round(targetWidth);
+}
+
+function getTargetHeight(defaultValue, options) {
+    let targetHeight = defaultValue;
+
+    if (options && options.targetHeight) {
+        targetHeight = parseFloat(options.targetHeight);
+        if (isNaN(targetHeight)) {
+            throw new Error('Invalid parameter value for targetHeight.');
+        }
+    }
+
+    return Math.round(targetHeight);
+}
+
+function getCompressionQuality(defaultValue, options) {
+    let compressionQuality = defaultValue;
+
+    if (options && options.compressionQuality) {
+        compressionQuality = parseFloat(options.compressionQuality);
+        if (isNaN(compressionQuality)) {
+            throw new Error('Invalid parameter value for compressionQuality.');
+        }
+    }
+
+    return compressionQuality;
+}
+
+function getPreserveTransparency(defaultValue, options) {
+    if (
+        options &&
+        options.preserveTransparency !== undefined &&
+        options.preserveTransparency !== null
+    ) {
+        let strVal = `${options.preserveTransparency}`.toLowerCase().trim();
+
+        if (strVal === `true`) {
+            return true;
+        } else if (strVal === `false`) {
+            return false;
+        }
+
+        throw new Error('Invalid parameter value for preserveTransparency.');
+    }
+
+    return defaultValue;
+}
+
+function getImageSmoothingEnabled(defaultValue, options) {
+    if (
+        options &&
+        options.imageSmoothingEnabled !== undefined &&
+        options.imageSmoothingEnabled !== null
+    ) {
+        let strVal = `${options.imageSmoothingEnabled}`.toLowerCase().trim();
+
+        if (strVal === `true`) {
+            return true;
+        } else if (strVal === `false`) {
+            return false;
+        }
+
+        throw new Error('Invalid parameter value for imageSmoothingEnabled.');
+    }
+
+    return defaultValue;
+}
+
+function getBackgroundColor(defaultValue, options) {
+    if (options && options.backgroundColor) {
+        let strVal = `${options.backgroundColor}`;
+        if (CSS.supports('color', strVal)) {
+            return strVal;
+        }
+
+        throw new Error('Invalid parameter value for backgroundColor.');
+    }
+
+    return defaultValue;
+}
+
+function computeFinalDimensions(
+    originalWidth,
+    originalHeight,
+    targetWidth,
+    targetHeight,
+    resizeMode,
+    resizeStrategy
+) {
+    let finalWidth = originalWidth;
+    let finalHeight = originalHeight;
+
+    // first check to see if we even need to resize at all
+    if (
+        resizeMode !== 'none' &&
+        (resizeStrategy === 'always' ||
+            (resizeStrategy === 'reduce' &&
+                (originalWidth > targetWidth ||
+                    originalHeight > targetHeight)) ||
+            (resizeStrategy === 'enlarge' &&
+                (originalWidth < targetWidth || originalHeight < targetHeight)))
+    ) {
+        // if resizing is needed then compute the final size
+        if (resizeMode === 'fill') {
+            finalWidth = targetWidth;
+            finalHeight = targetHeight;
+        } else if (resizeMode === 'contain') {
+            let ratio = Math.min(
+                targetWidth / originalWidth,
+                targetHeight / originalHeight
+            );
+            finalWidth = Math.round(originalWidth * ratio);
+            finalHeight = Math.round(originalHeight * ratio);
+        }
+    }
+
+    return { finalWidth, finalHeight };
+}
+
+function resizeAndCompressImage(image, mimeType, options) {
+    return new Promise((resolve, reject) => {
+        let resizeMode;
+        let resizeStrategy;
+        let targetWidth;
+        let targetHeight;
+        let compressionQuality;
+        let imageSmoothingEnabled;
+        let preserveTransparency;
+        let backgroundColor;
+
+        // parse the options
+        try {
+            resizeMode = getResizeMode('fill', options);
+            resizeStrategy = getResizeStrategy('always', options);
+            targetWidth = getTargetWidth(image.width, options);
+            targetHeight = getTargetHeight(image.height, options);
+            compressionQuality = getCompressionQuality(null, options);
+            imageSmoothingEnabled = getImageSmoothingEnabled(true, options);
+            preserveTransparency = getPreserveTransparency(true, options);
+            backgroundColor = getBackgroundColor('white', options);
+        } catch (error) {
+            reject(error);
+            return;
+        }
+
+        let { finalWidth, finalHeight } = computeFinalDimensions(
+            image.width,
+            image.height,
+            targetWidth,
+            targetHeight,
+            resizeMode,
+            resizeStrategy
+        );
+
+        // Render the image into a canvas at the calculated final size
+        let canvas = document.createElement('canvas');
+        canvas.width = finalWidth;
+        canvas.height = finalHeight;
+        canvas.imageSmoothingEnabled = imageSmoothingEnabled;
+
+        let ctx = canvas.getContext('2d');
+
+        if (!preserveTransparency) {
+            ctx.fillStyle = backgroundColor;
+            ctx.fillRect(0, 0, finalWidth, finalHeight);
+        }
+
+        ctx.drawImage(image, 0, 0, finalWidth, finalHeight);
+
+        let targetType = 'image/jpeg';
+        if (
+            preserveTransparency &&
+            (mimeType === 'image/gif' || mimeType === 'image/png')
+        ) {
+            targetType = 'image/png';
+        }
+
+        let resultFunc = function (blob) {
+            resolve(blob);
+        };
+
+        // Compress at the specified compression quality and return the final result
+        if (compressionQuality) {
+            canvas.toBlob(resultFunc, targetType, compressionQuality);
+        } else {
+            canvas.toBlob(resultFunc, targetType);
+        }
+    });
+}

package/src/lightning/mediaUtils/mediaUtils.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <isExposed>true</isExposed>
+    <minApiVersion>0.0</minApiVersion>
+    <support>BETA</support>
+</LightningComponentBundle>

package/src/lightning/progressStep/base.html

@@ -1,6 +1,7 @@
 <template>
     <button class={computedButtonClass}
             title={label}
+            data-label={label}
             type="button"
             onmouseenter={handleMouseEnter}
             onmouseleave={handleMouseLeave}

package/src/lightning/progressStep/path.html

@@ -14,6 +14,6 @@
                         variant="inverse"></lightning-primitive-icon>
                 <span if:true={assistiveText} class="slds-assistive-text">{assistiveText}</span>
             </span>
-        <span class="slds-path__title">{label}</span>
+        <span data-label={label} class="slds-path__title">{label}</span>
     </a>
 </template>

package/src/lightning/utilsPrivate/linkUtils.js

@@ -4,7 +4,7 @@ export const urlRegexString =
     "((?:(?:https?|ftp):\\/\\/(?:[\\w\\-\\|=%~#\\/+*@\\.,;:\\?!']|&){0,2047}(?:[\\(\\)\\.\\w=\\/+#-]*)[^\\s()\\.<>,;\\[\\]`'\"])|(?:\\b(?:[a-z0-9](?:[-a-z0-9]{0,62}[a-z0-9])?\\.)+(?:AC|AD|AE|AERO|AF|AG|AI|AL|AM|AN|AO|AQ|AR|ARPA|AS|ASIA|AT|AU|AW|AX|AZ|BA|BB|BD|BE|BF|BG|BH|BI|BIZ|BJ|BM|BN|BO|BR|BS|BT|BV|BW|BY|BZ|CA|CAT|CC|CD|CF|CG|CH|CI|CK|CL|CM|CN|CO|COM|COOP|CR|CU|CV|CX|CY|CZ|DE|DJ|DK|DM|DO|DZ|EC|EDU|EE|EG|ER|ES|ET|EU|FI|FJ|FK|FM|FO|FR|GA|GB|GD|GE|GF|GG|GH|GI|GL|GM|GN|GOV|GP|GQ|GR|GS|GT|GU|GW|GY|HK|HM|HN|HR|HT|HU|ID|IE|IL|IM|IN|INFO|INT|IO|IQ|IR|IS|IT|JE|JM|JO|JOBS|JP|KE|KG|KH|KI|KM|KN|KP|KR|KW|KY|KZ|LA|LB|LC|LI|LK|LR|LS|LT|LU|LV|LY|MA|MC|MD|ME|MG|MH|MIL|MK|ML|MM|MN|MO|MOBI|MP|MQ|MR|MS|MT|MU|MUSEUM|MV|MW|MX|MY|MZ|NA|NAME|NC|NE|NET|NF|NG|NI|NL|NO|NP|NR|NU|NZ|OM|ORG|PA|PE|PF|PG|PH|PK|PL|PM|PN|PR|PRO|PS|PT|PW|PY|QA|RE|RO|RS|RU|RW|SA|SB|SC|SD|SE|SG|SH|SI|SJ|SK|SL|SM|SN|SO|SR|ST|SU|SV|SY|SZ|TC|TD|TEL|TF|TG|TH|TJ|TK|TL|TM|TN|TO|TP|TR|TRAVEL|TT|TV|TW|TZ|UA|UG|UK|US|UY|UZ|VA|VC|VE|VG|VI|VN|VU|WF|WS|XN--0ZWM56D|XN--11B5BS3A9AJ6G|XN--80AKHBYKNJ4F|XN--9T4B11YI5A|XN--DEBA0AD|XN--FIQS8S|XN--FIQZ9S|XN--G6W251D|XN--HGBK6AJ7F53BBA|XN--HLCJ6AYA9ESC7A|XN--J6W193G|XN--JXALPDLP|XN--KGBECHTV|XN--KPRW13D|XN--KPRY57D|XN--MGBAAM7A8H|XN--MGBERP4A5D4AR|XN--P1AI|XN--WGBH1C|XN--ZCKZAH|YE|YT|ZA|ZM|ZW)(?!@(?:[a-z0-9](?:[-a-z0-9]{0,62}[a-z0-9])?\\.)+(?:AC|AD|AE|AERO|AF|AG|AI|AL|AM|AN|AO|AQ|AR|ARPA|AS|ASIA|AT|AU|AW|AX|AZ|BA|BB|BD|BE|BF|BG|BH|BI|BIZ|BJ|BM|BN|BO|BR|BS|BT|BV|BW|BY|BZ|CA|CAT|CC|CD|CF|CG|CH|CI|CK|CL|CM|CN|CO|COM|COOP|CR|CU|CV|CX|CY|CZ|DE|DJ|DK|DM|DO|DZ|EC|EDU|EE|EG|ER|ES|ET|EU|FI|FJ|FK|FM|FO|FR|GA|GB|GD|GE|GF|GG|GH|GI|GL|GM|GN|GOV|GP|GQ|GR|GS|GT|GU|GW|GY|HK|HM|HN|HR|HT|HU|ID|IE|IL|IM|IN|INFO|INT|IO|IQ|IR|IS|IT|JE|JM|JO|JOBS|JP|KE|KG|KH|KI|KM|KN|KP|KR|KW|KY|KZ|LA|LB|LC|LI|LK|LR|LS|LT|LU|LV|LY|MA|MC|MD|ME|MG|MH|MIL|MK|ML|MM|MN|MO|MOBI|MP|MQ|MR|MS|MT|MU|MUSEUM|MV|MW|MX|MY|MZ|NA|NAME|NC|NE|NET|NF|NG|NI|NL|NO|NP|NR|NU|NZ|OM|ORG|PA|PE|PF|PG|PH|PK|PL|PM|PN|PR|PRO|PS|PT|PW|PY|QA|RE|RO|RS|RU|RW|SA|SB|SC|SD|SE|SG|SH|SI|SJ|SK|SL|SM|SN|SO|SR|ST|SU|SV|SY|SZ|TC|TD|TEL|TF|TG|TH|TJ|TK|TL|TM|TN|TO|TP|TR|TRAVEL|TT|TV|TW|TZ|UA|UG|UK|US|UY|UZ|VA|VC|VE|VG|VI|VN|VU|WF|WS|XN--0ZWM56D|XN--11B5BS3A9AJ6G|XN--80AKHBYKNJ4F|XN--9T4B11YI5A|XN--DEBA0AD|XN--FIQS8S|XN--FIQZ9S|XN--G6W251D|XN--HGBK6AJ7F53BBA|XN--HLCJ6AYA9ESC7A|XN--J6W193G|XN--JXALPDLP|XN--KGBECHTV|XN--KPRW13D|XN--KPRY57D|XN--MGBAAM7A8H|XN--MGBERP4A5D4AR|XN--P1AI|XN--WGBH1C|XN--ZCKZAH|YE|YT|ZA|ZM|ZW))(?:/[\\w\\-=?/.&;:%~,+@#*]{0,2048}(?:[\\w=/+#-]|\\([^\\s()]*\\)))?(?:$|(?=\\.$)|(?=\\.\\s)|(?=[^\\w\\.]))))";
 
 export const emailRegexString =
-    '([\\w-\\.\\+_]{1,64}@(?:[\\w-]){1,255}(?:\\.[\\w-]{1,255}){1,10})';
+    "([\\w-\\.\\+_']{1,64}@(?:[\\w-]){1,255}(?:\\.[\\w-]{1,255}){1,10})";
 
 export const newLineRegexString = '(\r\n|\r|\n)';