diff --git a/readme.md b/readme.md
index 04caab0..79c4ead 100644
--- a/readme.md
+++ b/readme.md
@@ -63,35 +63,36 @@ PS. _The library works perfectly with any framework. Just use a valid [HTMLFormE
## Value Correspondence Table
-| HTMLElement | Attributes | Included | Value |
-| ------------------------------------------------------------------------------------------- | ---------------------------- | -------- | ----------------------------------------------------------------------------------------------- |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="text"` | ✅ | `string` |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="password"` | ✅ | `string` |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="email"` | ✅ | `string` |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="search"` | ✅ | `string` |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="url"` | ✅ | `string` |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="tel"` | ✅ | `string` |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="color"` | ✅ | `string` |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="radio"` | ✅ | `string` |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="hidden"` | ✅ | `string` |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="number"` | ✅ | `number` |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="range"` | ✅ | `number` |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="checkbox"` | ✅ | `boolean` |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="date"` | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="time"` | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="month"` | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="week"` | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="datetime-local"` | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="file"` | ✅ | [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) or `null` |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="file"` and `multiple` | ✅ | Array<[File](https://developer.mozilla.org/en-US/docs/Web/API/File)> |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="button"` | ❌ | – |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="submit"` | ❌ | – |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="reset"` | ❌ | – |
-| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="image"` | ❌ | – |
-| [HTMLTextAreaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextareaElement) | – | ✅ | `string` |
-| [HTMLSelectElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement) | – | ✅ | `string` |
-| [HTMLSelectElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement) | `multiple` | ✅ | `Array` |
-| [HTMLOutputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOutputElement) | – | ✅ | `string` |
-| [HTMLFieldsetElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFieldsetElement) | – | ✅ | `Object` (recursive values of nested elements) |
-| [HTMLButtonElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement) | – | ❌ | – |
-| [HTMLObjectElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement) | – | ❌ | – |
+| HTMLElement | Attributes | Included | Return Value |
+| ------------------------------------------------------------------------------------------- | ----------------------------- | -------- | ----------------------------------------------------------------------------------------------- |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="text"` | ✅ | `string` |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="password"` | ✅ | `string` |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="search"` | ✅ | `string` |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="url"` | ✅ | `string` |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="tel"` | ✅ | `string` |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="color"` | ✅ | `string` |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="radio"` | ✅ | `string` |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="hidden"` | ✅ | `string` |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="email"` | ✅ | `string` |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="email"` and `multiple` | ✅ | `Array` |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="number"` | ✅ | `number` |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="range"` | ✅ | `number` |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="checkbox"` | ✅ | `boolean` |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="date"` | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="time"` | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="month"` | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="week"` | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="datetime-local"` | ✅ | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="file"` | ✅ | [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) or `null` |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="file"` and `multiple` | ✅ | Array<[File](https://developer.mozilla.org/en-US/docs/Web/API/File)> |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="button"` | ❌ | – |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="submit"` | ❌ | – |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="reset"` | ❌ | – |
+| [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | `type="image"` | ❌ | – |
+| [HTMLTextAreaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextareaElement) | – | ✅ | `string` |
+| [HTMLSelectElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement) | – | ✅ | `string` |
+| [HTMLSelectElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement) | `multiple` | ✅ | `Array` |
+| [HTMLOutputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOutputElement) | – | ✅ | `string` |
+| [HTMLFieldsetElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFieldsetElement) | – | ✅ | `Object` (recursive values of nested elements) |
+| [HTMLButtonElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement) | – | ❌ | – |
+| [HTMLObjectElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement) | – | ❌ | – |
diff --git a/src/libs/enums/control-type.enum.js b/src/libs/enums/control-type.enum.js
index 085ee51..dfc600d 100644
--- a/src/libs/enums/control-type.enum.js
+++ b/src/libs/enums/control-type.enum.js
@@ -1,7 +1,6 @@
const ControlType = /** @type {const} */ ({
TEXT: 'text',
PASSWORD: 'password',
- EMAIL: 'email',
SEARCH: 'search',
URL: 'url',
TEL: 'tel',
@@ -9,6 +8,8 @@ const ControlType = /** @type {const} */ ({
RADIO: 'radio',
HIDDEN: 'hidden',
+ EMAIL: 'email',
+
NUMBER: 'number',
RANGE: 'range',
@@ -18,6 +19,7 @@ const ControlType = /** @type {const} */ ({
TIME: 'time',
MONTH: 'month',
WEEK: 'week',
+
DATETIME_LOCAL: 'datetime-local',
FILE: 'file',
diff --git a/src/packages/get-form-control-payload/get-form-control-payload.js b/src/packages/get-form-control-payload/get-form-control-payload.js
index a694030..366bf2b 100644
--- a/src/packages/get-form-control-payload/get-form-control-payload.js
+++ b/src/packages/get-form-control-payload/get-form-control-payload.js
@@ -7,6 +7,7 @@ import {
getDatetimeLocalValue,
getFormControlValue,
getInputDateValue,
+ getInputEmailValue,
getInputFileValue,
getInputNumericValue,
getMultiSelectValues,
@@ -62,7 +63,6 @@ const getFormControlPayload = (controlNode) => {
switch (controlNode.type) {
case ControlType.TEXT:
case ControlType.PASSWORD:
- case ControlType.EMAIL:
case ControlType.SEARCH:
case ControlType.URL:
case ControlType.TEL:
@@ -83,6 +83,13 @@ const getFormControlPayload = (controlNode) => {
)
);
}
+ case ControlType.EMAIL: {
+ return /** @type {T} */ (
+ getInputEmailValue(
+ /** @type {HTMLInputElement} */ (controlNode),
+ )
+ );
+ }
case ControlType.NUMBER:
case ControlType.RANGE: {
return /** @type {T} */ (
diff --git a/src/packages/get-form-control-payload/helpers/get-input-email-value/get-input-email-value.helper.js b/src/packages/get-form-control-payload/helpers/get-input-email-value/get-input-email-value.helper.js
new file mode 100644
index 0000000..e2c3fd1
--- /dev/null
+++ b/src/packages/get-form-control-payload/helpers/get-input-email-value/get-input-email-value.helper.js
@@ -0,0 +1,20 @@
+import { getFormControlValue } from '../get-control-value/get-control-value.helper.js';
+
+const EMAIL_SEPARATOR = ',';
+
+/**
+ * @param {HTMLInputElement} inputNode
+ * @returns {string | string[]}
+ */
+const getInputEmailValue = (inputNode) => {
+ if (inputNode.multiple) {
+ return inputNode.value
+ .split(EMAIL_SEPARATOR)
+ .map((email) => email.trim())
+ .filter((email) => email !== '');
+ }
+
+ return getFormControlValue(inputNode);
+};
+
+export { getInputEmailValue };
diff --git a/src/packages/get-form-control-payload/helpers/helpers.js b/src/packages/get-form-control-payload/helpers/helpers.js
index 86a16f3..b917ddf 100644
--- a/src/packages/get-form-control-payload/helpers/helpers.js
+++ b/src/packages/get-form-control-payload/helpers/helpers.js
@@ -4,6 +4,7 @@ export { getCheckboxValue } from './get-checkbox-value/get-checkbox-value.helper
export { getFormControlValue } from './get-control-value/get-control-value.helper.js';
export { getDatetimeLocalValue } from './get-datatime-local-value/get-datatime-local-value.helper.js';
export { getInputDateValue } from './get-input-date-value/get-input-date-value.helper.js';
+export { getInputEmailValue } from './get-input-email-value/get-input-email-value.helper.js';
export { getInputFileValue } from './get-input-file-value/get-input-file-value.helper.js';
export { getInputNumericValue } from './get-input-numeric-value/get-input-numeric-value.helper.js';
export { getMultiSelectValues } from './get-multi-select-values/get-multi-select-values.helper.js';
diff --git a/tests/get-form-control-payload.test.js b/tests/get-form-control-payload.test.js
index 7f33289..88a82cb 100644
--- a/tests/get-form-control-payload.test.js
+++ b/tests/get-form-control-payload.test.js
@@ -16,7 +16,6 @@ describe('getFormControlPayload should work correctly', () => {
const inputs = /** @type {const} */ ([
[ControlType.TEXT, 'Name'],
[ControlType.PASSWORD, 'top-secret'],
- [ControlType.EMAIL, 'test@mail.com'],
[ControlType.SEARCH, 'apples'],
[ControlType.URL, 'form-payload.com'],
[ControlType.TEL, '10000000000'],
@@ -127,6 +126,69 @@ describe('getFormControlPayload should work correctly', () => {
}
});
+ describe('should get value from email inputs correctly', () => {
+ test('should get value from singular email input correctly', () => {
+ const email = 'test@mail.com';
+
+ document.body.innerHTML = /* HTML */ `
+
+ `;
+
+ const control = /** @type {HTMLInputElement} */ (
+ document.querySelector('input')
+ );
+
+ const controlValue = getFormControlPayload(control);
+
+ equal(typeof controlValue, 'string');
+
+ equal(controlValue, email);
+ });
+
+ test('should get value from multiple email input correctly', () => {
+ const emails = [
+ 'example@mail.com',
+ 'example@mail.ua',
+ 'example@mail.org',
+ 'example@mail.co',
+ ];
+
+ document.body.innerHTML = /* HTML */ `
+
+ `;
+
+ const control = /** @type {HTMLInputElement} */ (
+ document.querySelector('input')
+ );
+
+ const controlValue = getFormControlPayload(control);
+
+ equal(Array.isArray(controlValue), true);
+
+ equal(
+ /** @type {string[]} */ (controlValue).length,
+ emails.length,
+ );
+
+ equal(
+ /** @type {string[]} */ (controlValue).every((email) => {
+ return email.trim().length === email.length;
+ }),
+ true,
+ );
+
+ deepEqual(controlValue, emails);
+ });
+ });
+
describe('should get value from file inputs correctly', () => {
test('should get value from singular file input correctly', async () => {
const file = [new File(['test-file'], 'test-file')];
diff --git a/tsconfig.build.json b/tsconfig.build.json
index 2e3b87f..701a5ab 100644
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -2,8 +2,8 @@
"extends": "./tsconfig.json",
"include": ["src"],
"compilerOptions": {
- "declaration": true,
"outDir": "dist/src",
+ "declaration": true,
"declarationMap": true
}
}