form-father 0.2.8 → 0.2.10

package/README.md

@@ -3,6 +3,8 @@
 [![npm version](https://img.shields.io/npm/v/form-father)](https://www.npmjs.com/package/form-father)
 [![npm downloads](https://img.shields.io/npm/dm/form-father)](https://www.npmjs.com/package/form-father)
 
+- [🇬🇧 English documentation](https://github.com/Poliklot/form-father/blob/master/docs/en/README.md)
+
 **Form Father** — это библиотека для обработки форм на чистом JavaScript, обеспечивающая удобную валидацию и отправку
 форм с использованием TypeScript.
 
@@ -16,13 +18,31 @@ npm install form-father
 
 ## Использование
 
+```html
+	<form
+		novalidate
+		onsubmit="return false"
+		method="post"
+		action="/callback.php"
+		enctype="multipart/form-data"
+	>
+
+		<!-- inputs -->
+
+		<button type="submit">
+			Отправить
+		</button>
+	</form>
+```
+
 ```javascript
-import Form from 'form-father';
+import Form, { isUrlValid, serializeToFormData } from 'form-father';
 
 Form.setDefaultParams({
-  showLoaderButton: false,
-  scrollToFirstErroredInput: false,
-  logging: true,
+	showLoaderButton: false,
+	scrollToFirstErroredInput: false,
+	logging: false,
+	loaderColor: 'currentColor',
 });
 
 const formElement = document.querySelector('#myForm');
@@ -32,29 +52,54 @@ const options = {
 	},
 	onResponse: (responseBody, formInstance) => {
 		// Действия при получении ответа от сервера
+		formInstance.clearInputs();
 	},
 	// Другие опции...
 };
 
 const form = new Form(formElement, options);
+const simpleForm = new Form(document.querySelector('#simpleForm')); // options можно не передавать
 ```
 
+```ts
+import Form, { type FormOptions, type ValidationSchema, type ResponseBody } from 'form-father';
+```
+
+## Формат ответов сервера
+
+Данная библиотека абстрагирует процесс парсинга HTTP-ответов и выполняет действия на их основе. Для её корректной работы
+сервер должен возвращать ответы в строго определённом формате. Полное описание формата (схемы) ответа от сервера
+представлено в данном техническом документе:
+[Спецификация формата ответов API.](https://github.com/Poliklot/form-father/blob/master/RESPONSE_API.md)
+
 ## Опции
 
 - **onSubmit**: Функция обратного вызова, вызываемая при отправке формы.
 - **onResponse**: Функция обратного вызова при получении ответа от сервера.
-- **onResponseSuccess**: Функция вызывается при успешном ответе сервера (статус 200).
-- **onResponseUnsuccess**: Функция вызывается при неуспешном ответе сервера (статус не 200).
+- **onResponseSuccess**: Функция вызывается при успешном HTTP-ответе и `success: true`.
+- **onResponseUnsuccess**: Функция вызывается при неуспешном HTTP-ответе, `success !== true` или некорректном JSON.
 - **showLoaderButton**: Показывать ли лоадер в кнопке отправки. По умолчанию `true`.
 - **scrollToFirstErroredInput**: Прокручивать ли к первому полю с ошибкой. По умолчанию `true`.
 - **customTypeError**: Кастомный тип ошибки.
 - **loaderColor**: Цвет лоадера в кнопке отправки.
 - **logging**: Нужно ли выводить данные в консоль. По умолчанию `false`.
-- **setDefaultParams(params)**: Метод setDefaultParams используется для установки значений по умолчанию для всех экземпляров формы. Эти параметры можно переопределить при инициализации конкретной формы.
+
+## Отправка формы
+
+- Submit-элементами считаются `button[type="submit"]`, `button` без `type`, `input[type="submit"]` и
+  `input[type="image"]`.
+- Для `method="GET"` и `method="HEAD"` данные добавляются в query string `action`, тело запроса не отправляется.
+- `wrapData` применяется для всех поддержанных `enctype`: `application/x-www-form-urlencoded`, `multipart/form-data`,
+  `text/plain`, `application/json`.
+- `onResponseSuccess` вызывается только при успешном HTTP-ответе и `success: true`.
+- `onResponseUnsuccess` вызывается при неуспешном HTTP-ответе, `success !== true` или некорректном JSON-ответе.
 
 ## Методы
 
 - **clearInputs()**: Очищает все поля ввода формы.
+- **setDefaultParams(params)**: Метод setDefaultParams используется для установки значений по умолчанию для всех
+  экземпляров формы. Эти параметры можно переопределить при инициализации конкретной формы.
+- **destroy()**: Очищает инициализацию формы.
 
 ## Хелперы
 
@@ -62,11 +107,180 @@ const form = new Form(formElement, options);
 
 - **serializeToFormData($element)**: Сериализует данные формы в объект `FormData`.
 - **isEmailValid(value)**: Проверяет, является ли строка валидным адресом электронной почты.
-- **isUrlValid(value)**: Проверяет, является ли строка валидным URL.
+- **isUrlValid(value)**: Проверяет `http(s)`-адрес, домен, IP, `localhost`, схема может быть опущена.
 - **isPhoneValid(value)**: Проверяет, является ли строка валидным номером телефона.
 - **closest($el, selector)**: Находит ближайший родительский элемент по заданному селектору.
 - **blockScrollBody()**: Блокирует прокрутку страницы.
 - **unblockScrollBody()**: Разблокирует прокрутку страницы.
 - **parseCommonResponseProperties(responseBody)**: Обрабатывает общие свойства ответа сервера.
+- **serializeFormToJSON(form)**: Сериализует данные формы в обычный объект.
+
+## Валидаторы
+
+Form Father поставляется с базовым набором правил валидации, а также позволяет легко добавлять и переопределять
+собственные.
+
+### Базовые правила
+
+| Ключ          | Проверка                        | Сообщение по умолчанию |
+| ------------- | ------------------------------- | ---------------------- |
+| `required`    | значение непустое               | **Пустое значение**    |
+| `email`       | валидный e-mail                 | **Неверный формат**    |
+| `tel`         | российский номер `+7XXXXXXXXXX` | **Неверный формат**    |
+| `url`         | домен/IP/localhost, схема optional | **Неверный формат**    |
+| `not-numbers` | строка без цифр                 | **Неверный формат**    |
+
+> [!NOTE] Полный список валидаторов можно получить так:
+>
+> ```js
+> import { getAllValidators } from 'form-father';
+>
+> const all = getAllValidators();
+> console.log([...all.keys()]);
+> ```
+
+---
+
+### Глобальная схема (`Form.defaultValidationSchema`)
+
+```ts
+Form.defaultValidationSchema = {
+	email: {
+		selector: 'input[type="email"]', // CSS-селектор, по которому выбираются inputs
+		rules: ['required', 'email'],
+	},
+	tel: {
+		selector: 'input[type="tel"]',
+		rules: ['required', 'tel'],
+	},
+};
+```
+
+- **selector** — произвольный CSS. Если он указан, правила применяются ко всем элементам, соответствующим этому
+  селектору. Если селектора нет, библиотека использует атрибут `data-validate`.
+- Ту же схему можно переопределить/дополнить локально через `validationSchema` при инициализации формы.
+
+---
+
+### Локальная схема (`validationSchema`)
+
+```ts
+const form = new Form($form, {
+	validationSchema: {
+		tel: {
+			// ключ произвольный
+			selector: '[data-validate="tel"]',
+			rules: ['tel', 'begin+79277'],
+			messages: {
+				tel: 'Телефон в формате +7…',
+				'begin+79277': 'Номер должен начинаться на +79277',
+			},
+		},
+	},
+});
+```
+
+_Порядок применения для одного `<input>`:_
+
+1. `required` (если атрибут `required`)
+2. правила из `validationSchema`
+3. правила из `data-custom-validate`
+
+---
+
+### Правило через `data-custom-validate`
+
+```html
+<input name="code" data-custom-validate="only-digits:6" required />
+```
+
+- Если правило неизвестно, в консоль выводится `[FormFather] Unknown validation rule "foo"`.
+
+---
+
+### Собственный валидатор
+
+```ts
+import { registerValidator } from 'form-father';
+
+registerValidator(
+	'only-digits',
+	(v, _input, _form, len) => new RegExp(`^\d{${len}}$`).test(v),
+	'Допустимы только цифры',
+);
+```
+
+Теперь можно использовать:
+
+```html
+<input name="code" data-custom-validate="only-digits:6" required />
+```
+
+---
+
+### Переопределение валидатора
+
+```ts
+registerValidator(
+	'tel',
+	v => /^8\d{10}$/.test(v), // новая проверка
+	'Номер должен начинаться на 8…', // новое сообщение
+	{ override: true }, // ← обязательно!
+);
+```
+
+_Без `override: true` библиотека оставит старую версию и выведет warn._
+
+---
+
+### Изменение только текста ошибки
+
+#### Глобально
+
+```ts
+const vd = getValidator('email');
+if (vd) vd.defaultMessage = 'Некорректный e-mail';
+```
+
+#### Локально для формы
+
+```ts
+validationSchema: {
+  email: {
+    selector: 'input[type="email"]',
+    rules: ['email'],
+    messages: { email: 'Некорректный e-mail' },
+  },
+}
+```
+
+---
+
+### Итоговый порядок проверки
+
+```
+required  →  schema.rules  →  data-custom-validate
+```
+
+- Для каждого поля отображается **только первое** найденное сообщение об ошибке.
+- Неизвестные правила логируются и пропускаются до начала проверки, поэтому не влияют на результат валидации.
+
+## Сборка и разработка
+
+Для сборки проекта используется **Rollup**. Основные команды:
+
+- **npm run build**: Сборка проекта.
+- **npm run watch**: Сборка в режиме наблюдения.
+- **npm run demos**: Запуск демо-версии с использованием Vite.
+
+## Вклад
+
+Будем рады вашим предложениям и улучшениям! Пожалуйста, создавайте
+[issues](https://github.com/poliklot/form-father/issues) и отправляйте
+[pull requests](https://github.com/poliklot/form-father/pulls).
+
+## Лицензия
+
+[MIT](LICENSE)
 
-© 2024 Poliklot
+© 2025 Poliklot

package/RESPONSE_API.md

@@ -0,0 +1,233 @@
+## Краткое введение
+
+Эй, ребята! Собрались здесь для того, чтобы понять, как у нас отвечает сервер после того, как отправляем формы через
+AJAX. Это будет не какая-то скучная докуха, а всё по-кубански, с размахом и только по сути!
+
+## Что и как 🛠️
+
+### `success`
+
+- **Тип**: boolean.
+- **Описание**: Флаг, показывающий, всё ли круто.
+- **Как Работает**: Если сервер справился, то `true`, а если нет – `false`.
+
+### `redirect-url`
+
+- **Тип**: string (опционально).
+- **Описание**: Куда пойти, если всё зашибись.
+- **Когда Появляется**: Только если `success` равно `true`.
+
+### `redirect-url-delay`
+
+- **Тип**: number (опционально).
+- **Описание**: Задержка в ms перед редиректом.
+
+### `reload`
+
+- **Тип**: boolean (опционально).
+- **Описание**: Как перезагрузить страничку.
+- **Когда Используем**: Когда сервер скажет "обновись".
+
+### `reload-delay`
+
+- **Тип**: number (опционально).
+- **Описание**: Задержка в ms перед перезагрузкой страницы.
+
+### `error`
+
+- **Тип**: boolean (опционально).
+- **Описание**: Флаг о проблемах.
+- **Как Работает**: Если есть косяк, то `true`.
+
+### `error-msg`
+
+- **Тип**: string (опционально).
+- **Описание**: Пояснения от сервера о косяке.
+- **Пример**: "Тут беда, братишка".
+
+### `errors`
+
+- **Тип**: array (опционально).
+- **Описание**: Список мелких недоразумений.
+- **Содержание**: Конкретные поля и тексты ошибок.
+
+Каждый объект в массиве содержит:
+
+- `name` (string): Имя поля, в котором произошла ошибка.
+- `error-msg` (string): Текст ошибки для данного поля.
+
+### `error-toast`
+
+- Тип: string (опционально).
+- Описание: Выводится всплывашка(toast) с ошибкой.
+- Пример: "Тут беда, братишка".
+
+> [!Caution]
+> `error-toast` DEPRECATED!!!
+
+### `toast`
+- Тип: объект | массив объектов.
+- Описание: Выводит определённый тип тоста и передаёт опции.
+- Пример, один тост:
+```
+{
+  type: 'success',
+  title: 'Успешно',
+}
+```
+
+- Пример, несколько тостов за раз:
+```
+[
+  {
+    type: 'success',
+    title: 'Успешно',
+  },
+  {
+    type: 'error',
+    title: 'Ошибка',
+  }
+]
+```
+
+
+## Примеры ответов 📝
+
+### `Когда всё чик-пук, и можно идти дальше.`
+
+```json
+{
+  "success": true,
+}
+```
+
+### `Если нужен редирект.`
+
+```json
+{
+  "success": true,
+  "redirect-url": "https://example.com/success",
+  "redirect-url-delay": 5000, // если нужна задержка перед редиректом
+}
+```
+
+### `Если нужна перезагрузка страницы.`
+
+```json
+{
+  "success": true,
+  "reload": true,
+  "reload-delay": 5000, // если нужна задержка перед обновлением страницы
+}
+```
+
+### `Когда надо что-то менять.`
+
+```json
+{
+  "success": false,
+  "error": true,
+  "error-msg": "Тут беда, братишка",
+  "errors": [
+    {
+      "name": "email",
+      "error-msg": "Эй, мэйл какой-то кривой"
+    }
+  ]
+}
+```
+
+Вот и всё, ребятки! Теперь вы знаете, как наш сервер отзывается на ваши AJAX-формы. Дерзайте!
+
+# Как работать с e-commerce
+
+- В сниппете #src/snippets/\_ym-metrika.html лежит пример кода инициализации Яндекс.Метрики.
+- В скрипте с id='ecommerceScript' есть 2 важных момента: первый - это пример запуска необходимого кода сразу после
+  инициализации Яндекс.метрики, а второй - это функция, которая принимает данные и с учётом этого происходят действия
+  необходимые для метрик.
+- На данный момент существует только 4 события: `click`, `submit`, `ajax-success` и `ajax-fail`.
+- Атрибут `data-ecom-data` нужно указывать, только для тех событий, которые не ожидают ответа от сервера.
+
+## Примеры использования атрибутов:
+
+### Обычный клик на ссылке
+
+```html
+<a
+  href="#"
+  data-ecom-action="click"
+  data-ecom-data='{
+        "click": {
+            "ymCounter123123123": "pull-right",
+            "dataLayer": []
+        }
+    }'
+>
+  Оформить заказ
+</a>
+```
+
+### Множественное количество событий на Форме-кнопке
+
+```html
+<button
+  data-form-button
+  data-form-button-action="/endpoint"
+  data-form-button-method="POST"
+  data-form-button-data='{"someProperties": "1234"}'
+  data-ecom-action="click,ajax-success,submit"
+  data-ecom-data='{
+        "click": {
+            "ymCounter123123123": "pull-right",
+            "dataLayer": []
+        },
+        "submit": {
+            "ymCounter123123123": "pull-right",
+            "dataLayer": []
+        }
+    }'
+>
+  Оформить заказ
+</button>
+```
+
+### Cобытие у элемента формы
+
+```html
+<form
+  class="ordering-page__body"
+  action="/api/order/"
+  method="POST"
+  name="ORDER_FORM"
+  enctype="multipart/form-data"
+  novalidate
+  data-ecom-action="ajax-success"
+>
+  ...
+</form>
+```
+
+# Сериализация форм и полей
+
+## Работа с атрибутом `data-no-serialize-before-changes`
+
+### Общее описание
+
+Атрибут `data-no-serialize-before-changes` предназначен для контроля сериализации полей формы в AJAX-запросах. С его
+помощью можно указать, какие поля формы не должны быть сериализованы и отправлены на сервер до того момента, как в них
+произойдут изменения со стороны пользователя.
+
+### Применение
+
+Для использования атрибута достаточно добавить его к любому элементу формы, например, `<input>`, `<select>` или
+`<textarea>`. Пока пользователь не изменит значение такого поля, оно не будет включено в сериализованные данные формы
+при AJAX-запросе.
+
+### Пример
+
+```html
+<input type="text" name="user-email" data-no-serialize-before-changes />
+```
+
+В данном случае, поле для ввода email пользователя не будет сериализовано и отправлено на сервер до тех пор, пока
+пользователь явно не изменит его содержимое.

package/dist/FormFather.min.js

@@ -0,0 +1,2 @@
+var FormFather=function(t){"use strict";function e(t,e,r,o){return new(r||(r=Promise))((function(n,i){function s(t){try{l(o.next(t))}catch(t){i(t)}}function a(t){try{l(o.throw(t))}catch(t){i(t)}}function l(t){var e;t.done?n(t.value):(e=t.value,e instanceof r?e:new r((function(t){t(e)}))).then(s,a)}l((o=o.apply(t,e||[])).next())}))}function r(t,e){if(null==t)return null;let r=t;for(;r;){if(r.matches(e))return r;r=r.parentElement}return null}"function"==typeof SuppressedError&&SuppressedError;const o=["http:","https:"];function n(t){return t.length>0&&t.length<=63&&/^[a-z\d-]+$/i.test(t)&&!t.startsWith("-")&&!t.endsWith("-")}function i(t){return!!t&&("localhost"===t||function(t){const e=t.split(".");return 4===e.length&&e.every((t=>{if(!/^\d{1,3}$/.test(t))return!1;const e=Number(t);return e>=0&&e<=255}))}(t)||function(t){if(!t.startsWith("[")||!t.endsWith("]"))return!1;const e=t.slice(1,-1);return e.includes(":")&&/^[\da-f:.]+$/i.test(e)}(t)||function(t){const e=t.split(".");return e.length>=2&&e.every(n)}(t))}function s(t){const e=function(t){const e=t.trim();return 0===e.length?"":e.startsWith("//")?`https:${e}`:/^[a-z][a-z\d+.-]*:\/\//i.test(e)?e:`https://${e}`}(t);if(0===e.length)return!1;try{const t=new URL(e);return o.includes(t.protocol)&&i(t.hostname)}catch(t){return!1}}function a(t){const e="FORM"===t.tagName?Array.from(t.elements):Array.from(t.querySelectorAll("input, select, textarea, button")),r=new FormData;return e.forEach((t=>{if(!(t instanceof HTMLInputElement||t instanceof HTMLSelectElement||t instanceof HTMLTextAreaElement||t instanceof HTMLButtonElement))return;if(!t.name||t.disabled||t.hasAttribute("data-no-serialize"))return;if(t instanceof HTMLButtonElement)return;const{name:e,type:o}=t;if("file"===o)if(t.multiple){const o=t.files;if(o)for(let t=0;t<o.length;t++)r.append(`${e}[${t}]`,o[t])}else{const o=t.files;o&&o[0]&&r.append(e,o[0])}else{let n;if("select-one"===o||"select-multiple"===o){const i=t;if("select-multiple"===o){Array.from(i.selectedOptions).map((t=>t.value)).forEach(((t,o)=>{r.append(`${e}[${o}]`,t)}))}else n=i.value,n&&r.append(e,n)}else if("tel"===o)n=t.value.split(/[\s()-]/).join("").replace(/^8/,"+7");else if("checkbox"===o||"radio"===o){if(!t.checked)return;n=t.value}else if("date"===o){const e=t.getAttribute("data-date-format");n=e?function(t,e){const r=new Date(t),o=t=>t.toString().padStart(2,"0"),n=o(r.getDate()),i=o(r.getMonth()+1),s=r.getFullYear().toString();return e.replace("dd",n).replace("mm",i).replace("yyyy",s)}(t.value,e):t.value}else n=t.value;n&&"select-one"!==o&&"select-multiple"!==o&&r.append(e,n)}})),r}function l(t){if(Object.prototype.hasOwnProperty.call(t,"redirect-url"))if(t["redirect-url-delay"]){const e=Number(t["redirect-url-delay"]);setTimeout((()=>{window.location.href=t["redirect-url"]}),e)}else window.location.href=t["redirect-url"];else if(Object.prototype.hasOwnProperty.call(t,"reload")){if(!0===t.reload)if(t["reload-delay"]){const e=Number(t["reload-delay"]);setTimeout((()=>{window.location.reload()}),e)}else window.location.reload()}else if(Object.prototype.hasOwnProperty.call(t,"toast")){const e=t.toast;(Array.isArray(e)?e:[e]).forEach((t=>{window.showToast(t)}))}else Object.prototype.hasOwnProperty.call(t,"error-toast")&&window.showToast(t["error-toast"])}var c;const d=Symbol.for("FormFather.validators"),u=null!==(c=globalThis[d])&&void 0!==c?c:globalThis[d]=new Map;const p=t=>u.get(t);function h(t,e,r){u.has(t)||u.set(t,{fn:e,defaultMessage:r})}var f;h("required",((t,e,r)=>{if(e&&e.type){if("checkbox"===e.type)return e.checked;if("radio"===e.type){const t=r.querySelectorAll(`input[type="radio"][name="${e.name}"]`);return Array.from(t).some((t=>t.checked))}}return t.trim().length>0}),"Пустое значение"),h("email",(t=>/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(t)),"Неверный формат"),h("tel",(t=>/^\+7\d{10}$/.test(t)),"Неверный формат"),h("url",(t=>s(t)),"Неверный формат"),h("not-numbers",(t=>!/[0-9]/.test(t)),"Неверный формат");const m=Symbol.for("formfather.shared"),y=null!==(f=globalThis[m])&&void 0!==f?f:globalThis[m]={defaultParams:{},defaultValidationSchema:void 0};let g=0;const b={tel:{selector:'input[type="tel"]',rules:["tel"]},email:{selector:'input[type="email"]',rules:["email"]},required:{selector:"[required]",rules:["required"]},url:{selector:'input[type="url"]',rules:["url"]},"not-numbers":{selector:'input[data-validate="not-numbers"]',rules:["not-numbers"]}};class v{static get defaultParams(){return y.defaultParams}static set defaultParams(t){y.defaultParams=t}static get defaultValidationSchema(){var t;return null!==(t=y.defaultValidationSchema)&&void 0!==t?t:y.defaultValidationSchema=b}static set defaultValidationSchema(t){y.defaultValidationSchema=t}constructor(t,r={}){this.$submits=[],this.waitResponse=!1,this.inputs=null,this._anim={duration:220,easing:"ease",paddingTopOpened:16,iconDuration:700},this.$el=t,this.options=r;this.config=Object.assign({},{onSubmit:()=>{},onResponse:()=>{},onResponseSuccess:()=>{},onResponseUnsuccess:()=>{},customTypeError:null,loaderColor:"#fff",showLoaderButton:!0,scrollToFirstErroredInput:!0,logging:!1,inputSelector:".input",inputWrapperSelector:".input-primary"},v.defaultParams,r),this.$el?(this.$submits=this.findSubmitElements(),this._onSubmitClickHandler=t=>e(this,void 0,void 0,(function*(){var e,r,o,n;t.preventDefault(),null===(r=(e=this.config).onBeforeValidate)||void 0===r||r.call(e,this);const i=yield this.validate();null===(n=(o=this.config).onAfterValidate)||void 0===n||n.call(o,i,this),i&&(yield this.submit())})),this.isCorrectArguments()&&(this.$submits.forEach((t=>{t.addEventListener("click",this._onSubmitClickHandler)})),this.initialization())):console.warn("Empty $el")}getOptions(){return this.options}static setDefaultParams(t){this.defaultParams=Object.assign(Object.assign({},this.defaultParams),t)}findSubmitElements(){return Array.from(this.$el.querySelectorAll('input[type="submit"], input[type="image"], button[type="submit"], button:not([type])'))}initialization(){this.inputs=this.$el.querySelectorAll(this.config.inputSelector),this._onSubmitHandler=t=>e(this,void 0,void 0,(function*(){var e,r,o,n;t.preventDefault(),null===(r=(e=this.config).onBeforeValidate)||void 0===r||r.call(e,this);const i=yield this.validate();null===(n=(o=this.config).onAfterValidate)||void 0===n||n.call(o,i,this),i&&this.submit()})),this.$el.addEventListener("submit",this._onSubmitHandler)}showError(t,e){const o=r(t,this.config.inputWrapperSelector);if(!o)return void console.warn(`Не найдена обёртка для поля с именем: ${t.name||t.type}`);const n=o.showError;if("function"==typeof n)return void n.call(o,e);t.setAttribute("aria-invalid","true"),o.classList.add("input__wrapper--error");let i=o.querySelector("[data-form-father-error]");i||(i=document.createElement("div"),i.setAttribute("data-form-father-error",""),i.setAttribute("role","alert"),t.insertAdjacentElement("afterend",i)),i.textContent=e}showLoader(){this.$submits.forEach((t=>{if(t.classList.add("button--loading"),t.querySelector(".button__loader"))return;const e="form-father-loader-"+g++,r=`\n\t\t\t\t<svg height="38" viewBox="0 0 38 38" width="38" xmlns="http://www.w3.org/2000/svg">\n\t\t\t\t\t<defs>\n\t\t\t\t\t<linearGradient id="${e}" x1="8.042%" x2="65.682%" y1="0%" y2="23.865%">\n\t\t\t\t\t\t<stop offset="0%" stop-color="${this.config.loaderColor}" stop-opacity="0"/>\n\t\t\t\t\t\t<stop offset="63.146%" stop-color="${this.config.loaderColor}" stop-opacity=".631"/>\n\t\t\t\t\t\t<stop offset="100%" stop-color="${this.config.loaderColor}"/>\n\t\t\t\t\t</linearGradient>\n\t\t\t\t\t</defs>\n\t\t\t\t\t<g fill-rule="evenodd" fill="none">\n\t\t\t\t\t<g transform="translate(1 1)">\n\t\t\t\t\t\t<path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke-width="5" stroke="url(#${e})"></path>\n\t\t\t\t\t\t<circle cx="36" cy="18" fill="${this.config.loaderColor}" r="1"></circle>\n\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t</svg>\n\t\t\t`,o=document.createElement("span");o.innerHTML=r,o.className="button__loader",t.insertAdjacentElement("afterbegin",o),requestAnimationFrame((()=>{o.setAttribute("data-showed","")}))}))}hideLoader(){this.$submits.forEach((t=>{t.classList.remove("button--loading");const e=t.querySelector(".button__loader");e&&(e.classList.remove("active"),e.removeAttribute("data-showed"),setTimeout((()=>{e.remove()}),250))}))}hideError(t){var e;const o=r(t,this.config.inputWrapperSelector)||t.parentElement;t.removeAttribute("aria-invalid"),null===(e=null==o?void 0:o.querySelector("[data-form-father-error]"))||void 0===e||e.remove(),null==o||o.classList.remove("input__wrapper--error"),o&&o.classList.contains("input__wrapper")&&o.getAttribute("data-type-error")}scrollToFirstErroredInput(t){if(t.length>0){const e=Array.from(this.$el.querySelectorAll("input"));let r=null,o=1/0;if(t.forEach((t=>{const n=e.findIndex((e=>e===t));n<o&&(o=n,r=t)})),r){const t=r.getBoundingClientRect(),e=window.pageYOffset||document.documentElement.scrollTop,o=t.top+e-window.innerHeight/2;document.documentElement.setAttribute("data-now-scrolling",""),window.scrollTo({top:o,behavior:"smooth"}),setTimeout((()=>{document.documentElement.removeAttribute("data-now-scrolling")}),800)}}}validate(){return e(this,arguments,void 0,(function*(t=this.$el){const r=Object.assign(Object.assign({},v.defaultValidationSchema||{}),this.config.validationSchema||{}),o=t=>console.warn(`[FormFather] Unknown validation rule "${t}"`),n=[],i=new WeakSet;let s=!0;const a=(t,e=[])=>{var r;const n=[];t.hasAttribute("required")&&n.push("required"),n.push(...e);const i=(null!==(r=t.getAttribute("data-custom-validate"))&&void 0!==r?r:"").split(",").map((t=>t.trim())).filter(Boolean);n.push(...i.map((t=>{const[e,...r]=t.split(":").map((t=>t.trim()));return r.length>0?{rule:e,params:1===r.length?r[0]:r}:e})));const s=[];for(const t of n){const e="string"==typeof t?t:t.rule;p(e)?s.push(t):o(e)}return s},l=(r,o,...i)=>e(this,[r,o,...i],void 0,(function*(e,r,o={}){if(e.hasAttribute("data-no-validate"))return;const i="checkbox"===e.type||"radio"===e.type?!e.checked:0===e.value.trim().length,a=r.some((t=>"string"==typeof t?"required"===t:"required"===t.rule));if(!i||a){for(const i of r){const{rule:r,params:a}="string"==typeof i?{rule:i,params:void 0}:i,l=p(r),c=yield l.fn(e.value,e,t,a),d="object"==typeof c&&null!==c,u=d?!0===c.valid:!!c;if(d&&c.effect&&(yield c.effect({value:e.value,$input:e,$form:t,params:a})),!u){s=!1;const t=c,i=d&&"string"==typeof t.message&&t.message||o[r]||l.defaultMessage;return this.showError(e,i),void n.push(e)}if(d&&c.stopOthers)return}this.hideError(e)}else this.hideError(e)})),c=e=>"radio"===e.type&&e.name?Array.from(t.querySelectorAll('input[type="radio"]')).filter((t=>t.name===e.name)):[];for(const[e,o]of Object.entries(r)){const{selector:r,rules:n=[],messages:s={}}=o,d=r?t.querySelectorAll(r):t.querySelectorAll(`[data-validate="${e}"]`);for(const t of Array.from(d)){if(i.has(t))continue;const e=c(t);e.length>0?(e.forEach((t=>i.add(t))),yield l(t,a(t,n),s)):(i.add(t),yield l(t,a(t,n),s))}}const d=Array.from(t.querySelectorAll("[data-custom-validate]")).filter((t=>!i.has(t)));for(const t of d)i.add(t),yield l(t,a(t,[]));return!s&&this.config.scrollToFirstErroredInput&&this.scrollToFirstErroredInput(n.filter((t=>!t.hasAttribute("data-no-error-scroll")))),s}))}disableSubmit(){this.$submits.forEach((t=>{t.setAttribute("disabled","")}))}enableSubmit(){this.$submits.forEach((t=>{t.removeAttribute("disabled")}))}clearInputs(){var t;null===(t=this.inputs)||void 0===t||t.forEach((t=>{var e;const r=t;"radio"===r.type||"checkbox"===r.type?r.checked=!1:(r.value="",null===(e=r.parentElement)||void 0===e||e.classList.remove("filled"),r.dispatchEvent(new Event("input")))}))}_prefersReducedMotion(){var t;return"undefined"!=typeof window&&(null===(t=window.matchMedia)||void 0===t?void 0:t.call(window,"(prefers-reduced-motion: reduce)").matches)}_canAnimate(t){return!(!t||!("animate"in t)||this._prefersReducedMotion())}_cancelAnimations(t){var e;const r=t;null===(e=null==r?void 0:r.getAnimations)||void 0===e||e.call(r).forEach((t=>t.cancel()))}showErrorForm(t){var e;const r=this.$el.querySelectorAll(this.config.inputWrapperSelector),o=r[r.length-1];let n=this.$el.querySelector(".error-block-under-input__wrapper");!n||o&&o.nextElementSibling!==n?(n=document.createElement("div"),n.className="error-block-under-input__wrapper",n.innerHTML='\n      <div class="error-block-under-input error-block-under-input--warning" style="display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;">\n        <div class="error-block-under-input__icon-wrapper" style="position:relative;width:20px;height:20px;">\n          <span class="error-block-under-input__icon" style="display:block;width:20px;height:20px;"></span>\n          <span class="error-block-under-input__icon error-block-under-input__icon--animated" style="display:block;position:absolute;inset:0;"></span>\n        </div>\n        <p class="error-block-under-input__text" style="margin:0;">\n          <span class="error-block-under-input__main-text"></span>\n          <span class="error-block-under-input__secondary-text"></span>\n        </p>\n      </div>\n    ',Object.assign(n.style,{boxSizing:"border-box",overflow:"hidden",height:"0px",paddingTop:"0px",opacity:"0"}),o?o.insertAdjacentElement("afterend",n):this.$el.appendChild(n)):(n.style.boxSizing="border-box",n.style.overflow="hidden"),n.querySelector(".error-block-under-input__main-text").textContent=t;const i=n.querySelector(".error-block-under-input__secondary-text");i&&(i.textContent=""),null===(e=n.querySelector(".error-block-under-input"))||void 0===e||e.classList.remove("error-block-under-input--success");const s=n.style.height,a=n.style.paddingTop;n.style.height="auto",n.style.paddingTop=`${this._anim.paddingTopOpened}px`;const l=n.clientHeight;if(n.style.height=s||"0px",n.style.paddingTop=a||"0px",parseFloat(n.style.height)===l&&1===parseFloat(n.style.opacity||"1"))this._ringIcon(n);else{if(this._cancelAnimations(n),this._canAnimate(n)){n.animate([{height:`${parseFloat(n.style.height)||0}px`,paddingTop:`${parseFloat(n.style.paddingTop)||0}px`,opacity:parseFloat(n.style.opacity||"0")},{height:`${l}px`,paddingTop:`${this._anim.paddingTopOpened}px`,opacity:1}],{duration:this._anim.duration,easing:this._anim.easing,fill:"forwards"}).addEventListener("finish",(()=>{n.style.height="auto",n.style.paddingTop=`${this._anim.paddingTopOpened}px`,n.style.opacity="1"}))}else n.style.height="auto",n.style.paddingTop=`${this._anim.paddingTopOpened}px`,n.style.opacity="1";this._ringIcon(n)}this.$el.addEventListener("input",(()=>this.hideErrorForm()),{passive:!0,once:!0})}hideErrorForm(){const t=this.$el.querySelectorAll(this.config.inputWrapperSelector),e=t[t.length-1],r=(null==e?void 0:e.nextElementSibling)||this.$el.querySelector(".error-block-under-input__wrapper");if(!r||!r.classList.contains("error-block-under-input__wrapper"))return;if((""===r.style.height||"auto"===r.style.height)&&(r.style.height=`${r.clientHeight}px`),r.style.paddingTop=r.style.paddingTop||`${this._anim.paddingTopOpened}px`,r.style.opacity=r.style.opacity||"1",this._cancelAnimations(r),this._canAnimate(r)){r.animate([{height:`${parseFloat(r.style.height)||r.clientHeight}px`,paddingTop:`${parseFloat(r.style.paddingTop)||this._anim.paddingTopOpened}px`,opacity:parseFloat(r.style.opacity||"1")},{height:"0px",paddingTop:"0px",opacity:0}],{duration:this._anim.duration,easing:this._anim.easing,fill:"forwards"}).addEventListener("finish",(()=>{r.remove()}))}else r.remove()}_ringIcon(t){const e=t.querySelector(".error-block-under-input__icon--animated");e&&(this._cancelAnimations(e),this._canAnimate(e)&&e.animate([{transform:"rotate(0deg) scale(1)",opacity:0},{transform:"rotate(-8deg) scale(1.05)",opacity:1,offset:.15},{transform:"rotate(8deg)  scale(1.05)",opacity:1,offset:.3},{transform:"rotate(-6deg) scale(1.03)",opacity:1,offset:.45},{transform:"rotate(6deg)  scale(1.03)",opacity:1,offset:.6},{transform:"rotate(0deg)  scale(1)",opacity:0}],{duration:this._anim.iconDuration,easing:"ease"}))}destroy(){this._onSubmitHandler&&(this.$el.removeEventListener("submit",this._onSubmitHandler),this._onSubmitHandler=void 0),this._onSubmitClickHandler&&(this.$submits.forEach((t=>{t.removeEventListener("click",this._onSubmitClickHandler)})),this._onSubmitClickHandler=void 0);const t=this.$el.querySelector(".error-block-under-input__wrapper");t&&(this._cancelAnimations(t),t.remove()),this.$submits.forEach((t=>{t.classList.remove("button--loading");const e=t.querySelector(".button__loader");e&&e.remove()}));this.$el.querySelectorAll("input, textarea, select").forEach((t=>this.hideError(t))),document.documentElement.removeAttribute("data-now-scrolling"),this.inputs=null,this.$submits=[],this.waitResponse=!1}isCorrectArguments(){return"FORM"!==this.$el.tagName?(console.warn("$el не является тегом form"),!1):0!==this.$submits.length||(console.warn("В форме нет кнопки с типом submit"),!1)}formDataToObject(t){const e={};return t.forEach(((t,r)=>{Object.prototype.hasOwnProperty.call(e,r)?(Array.isArray(e[r])||(e[r]=[e[r]]),e[r].push(t)):e[r]=t})),e}appendFormDataValue(t,e,r){null!=r&&(Array.isArray(r)?r.forEach(((r,o)=>{this.appendFormDataValue(t,`${e}[${o}]`,r)})):r instanceof Blob?t.append(e,r):t.append(e,"object"==typeof r?JSON.stringify(r):String(r)))}objectToFormData(t){const e=new FormData;return Object.entries(t).forEach((([t,r])=>{this.appendFormDataValue(e,t,r)})),e}stringifyFormDataValue(t){return"string"==typeof t?t:t.name}formDataToUrlSearchParams(t){const e=new URLSearchParams;return t.forEach(((t,r)=>{e.append(r,this.stringifyFormDataValue(t))})),e}formDataToTextBody(t){return Array.from(t).map((([t,e])=>`${encodeURIComponent(t)}=${encodeURIComponent(this.stringifyFormDataValue(e))}`)).join("\n")}isBodylessMethod(t){return"GET"===t||"HEAD"===t}appendQueryString(t,e){const r=e.toString();if(!r)return t;const o=t.includes("?")?"&":"?";return`${t}${o}${r}`}findFieldByName(t){return Array.from(this.$el.querySelectorAll("input, textarea, select")).find((e=>e.name===t))||null}parseResponseBody(t){return e(this,void 0,void 0,(function*(){try{const e=yield t.json();return e&&"object"==typeof e?e:{success:!1,error:!0,"error-msg":"Некорректный ответ сервера"}}catch(t){return{success:!1,error:!0,"error-msg":"Некорректный ответ сервера"}}}))}handleUnsuccessfulResponse(t){if(!0===t.error&&(t["error-msg"]&&this.showErrorForm(t["error-msg"]),t.errors)){const e=[];t.errors.forEach((t=>{const r=this.findFieldByName(t.name);r?(e.push(r),this.showError(r,t["error-msg"])):console.warn(`Не найдено поле с именем: ${t.name}, для вывода ошибки: ${t["error-msg"]}`)})),!0===this.config.scrollToFirstErroredInput&&this.scrollToFirstErroredInput(e)}}sendData(){return e(this,void 0,void 0,(function*(){var t;const e=this.$el.getAttribute("action")||"",r=(null===(t=this.$el.getAttribute("method"))||void 0===t?void 0:t.toUpperCase())||"POST",o=this.$el.getAttribute("enctype")||"application/x-www-form-urlencoded";let n=null,i={};const s=a(this.$el);let l=this.formDataToObject(s);if(this.config.logging)for(const t of s.keys())console.log(s.get(t));const c="function"==typeof this.config.wrapData;"function"==typeof this.config.wrapData&&(l=this.config.wrapData(l));const d=c?this.objectToFormData(l):s;if(this.isBodylessMethod(r))return fetch(this.appendQueryString(e,this.formDataToUrlSearchParams(d)),{method:r,headers:i});switch(o){case"application/x-www-form-urlencoded":n=this.formDataToUrlSearchParams(d).toString(),i["Content-Type"]="application/x-www-form-urlencoded";break;case"multipart/form-data":n=d;break;case"text/plain":n=this.formDataToTextBody(d),i["Content-Type"]="text/plain";break;case"application/json":n=JSON.stringify(l),i["Content-Type"]="application/json";break;default:console.warn(`Неизвестный enctype: ${o}. Используется application/x-www-form-urlencoded.`),n=this.formDataToUrlSearchParams(d).toString(),i["Content-Type"]="application/x-www-form-urlencoded"}return fetch(e,{method:r,body:n,headers:i})}))}submit(){return e(this,void 0,void 0,(function*(){var t,e,r,o,n,i,s,a;if(!this.waitResponse){!0===this.config.showLoaderButton&&this.showLoader(),null===(e=(t=this.config).onSubmit)||void 0===e||e.call(t,this),this.waitResponse=!0;let c=!1;const d=()=>{c||(this.waitResponse=!1,!0===this.config.showLoaderButton&&this.hideLoader(),c=!0)};try{const t=yield this.sendData(),e=yield this.parseResponseBody(t);d(),null===(o=(r=this.config).onResponse)||void 0===o||o.call(r,e,this),t.ok&&!0===e.success?null===(i=(n=this.config).onResponseSuccess)||void 0===i||i.call(n,e,this):(null===(a=(s=this.config).onResponseUnsuccess)||void 0===a||a.call(s,e,this),this.handleUnsuccessfulResponse(e)),l(e)}catch(t){throw d(),t}}}))}}return t.blockScrollBody=function(){window.lastBlockScrollPosition=window.pageYOffset,document.body.style.top=-window.lastBlockScrollPosition+"px",document.body.classList.add("body--block-scroll")},t.closest=r,t.default=v,t.getAllValidators=function(){return new Map(u)},t.getValidator=p,t.isEmailValid=function(t){return/^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu.test(t)},t.isPhoneValid=function(t){const e=[];return Array.from(t).forEach((t=>{(Number(t)||0===Number(t))&&e.push(t)})),!(e.length<11||e.length<12&&"+"===t[1])},t.isUrlValid=s,t.parseCommonResponseProperties=l,t.registerValidator=function(t,e,r,{override:o=!1}={}){!u.has(t)||o?u.set(t,{fn:e,defaultMessage:r}):console.warn(`[FormFather] Validator "${t}" already exists; pass { override: true } to replace`)},t.serializeFormToJSON=function(t){const e={};return new FormData(t).forEach(((t,r)=>{e.hasOwnProperty(r)?(Array.isArray(e[r])||(e[r]=[e[r]]),e[r].push(t)):e[r]=t})),e},t.serializeToFormData=a,t.unblockScrollBody=function(){document.body.classList.remove("body--block-scroll"),document.body.style.top="",window.scrollTo(0,window.lastBlockScrollPosition||0)},Object.defineProperty(t,"__esModule",{value:!0}),t}({});
+//# sourceMappingURL=FormFather.min.js.map