devforms-0.2.1.0: static/validation-enhancer.min.js

class t extends HTMLElement{get validClass(){return this.getAttribute("valid-class")||"valid"}get invalidClass(){return this.getAttribute("invalid-class")||"invalid"}get messageTargetAttr(){return this.getAttribute("message-target-attr")||"aria-errormessage"}get messagePrefix(){return this.getAttribute("message-prefix")||"validation"}get messageAriaLive(){return this.getAttribute("message-aria-live")||"polite"}get scrollIntoViewOptions(){const t=this.getAttribute("scroll-align-to-top");if(null!==t)return"false"!==t;const e={behavior:this.getAttribute("scroll-behavior")||"smooth"},i=this.getAttribute("scroll-block");i&&(e.block=i);const s=this.getAttribute("scroll-inline");return s&&(e.inline=s),e}mutationObserver=null;constructor(){super(),this.handleChangeAndFocusOut=this.handleChangeAndFocusOut.bind(this),this.handleKeyUp=this.handleKeyUp.bind(this),this.handleSubmit=this.handleSubmit.bind(this),this.handleMutation=this.handleMutation.bind(this)}connectedCallback(){this.addEventListener("keyup",this.handleKeyUp),this.addEventListener("change",this.handleChangeAndFocusOut),this.addEventListener("focusout",this.handleChangeAndFocusOut),this.addEventListener("submit",this.handleSubmit);const t=this.querySelectorAll(`[${this.messageTargetAttr}]`);this.setupValidationTargetElements(Array.from(t));const e=this.querySelectorAll("form");this.setupForms(Array.from(e)),this.mutationObserver=new MutationObserver(this.handleMutation),this.mutationObserver.observe(this,{childList:!0,subtree:!0})}disconnectedCallback(){this.removeEventListener("keyup",this.handleKeyUp),this.removeEventListener("focusout",this.handleChangeAndFocusOut),this.removeEventListener("change",this.handleChangeAndFocusOut),this.removeEventListener("submit",this.handleSubmit),this.mutationObserver?.disconnect(),this.mutationObserver=null}handleMutation(t){t.forEach(t=>{const e=Array.from(t.addedNodes).filter(t=>t instanceof Element);this.setupValidationTargetElements(e);const i=e.filter(t=>t instanceof HTMLFormElement);this.setupForms(i)})}setupForms(t){t.forEach(t=>t.noValidate=!0)}ensureAriaLive(t){t.id&&this.querySelector(`[${this.messageTargetAttr}="${CSS.escape(t.id)}"]`)&&(t.hasAttribute("aria-live")||t.setAttribute("aria-live",this.messageAriaLive))}setupValidationTargetElements(t){t.forEach(t=>{const e=this.getValidationMessageTargetElement(t);e&&(e.hasAttribute("aria-live")||e.setAttribute("aria-live",this.messageAriaLive))})}handleKeyUp(t){const e=t.target;e&&this.validateInputPolitely(e)}handleChangeAndFocusOut(t){const e=t.target;this.isValidatableInput(e)&&this.validateInput(e)}handleSubmit(t){const e=t.target;if(!e)return;this.validateAllInputs(e)||(t.preventDefault(),t.stopPropagation())}validateInput(t){return!this.isValidatableInput(t)||(t.checkValidity()?(this.makeInputValid(t),!0):(this.makeInputInvalid(t),!1))}validateInputPolitely(t){return!this.isValidatableInput(t)||(t.checkValidity()?(this.makeInputValid(t),!0):(this.removeInputValidity(t),!1))}validateAllInputs(t){let e=!1;const i=this.getValidatableInputs(t);let s=!0;for(const t of i){if(!this.validateInput(t)&&(s=!1,!e)){e=!0;const i=this.getLabel(t)||t;this.scrollToElement(i),t.focus()}}return s}isValidatableInput(t){return!!t&&!(t instanceof HTMLButtonElement)&&"checkValidity"in t}makeInputValid(t){t.classList.add(this.validClass),t.classList.remove(this.invalidClass),t.removeAttribute("aria-invalid"),this.clearMessage(t)}makeInputInvalid(t){t.classList.add(this.invalidClass),t.classList.remove(this.validClass),t.setAttribute("aria-invalid","true"),this.showMessage(t)}removeInputValidity(t){t.classList.remove(this.validClass)}showMessage(t){const e=this.getCustomMessage(t)||t.validationMessage,i=this.getValidationMessageTargetElement(t);i&&(i.textContent=e)}clearMessage(t){const e=this.getValidationMessageTargetElement(t);e&&(e.textContent="")}getValidationMessageTargetElement(t){const e=t.getAttribute(this.messageTargetAttr);return e&&this.querySelector(`#${CSS.escape(e)}`)||null}validityKeys=["valueMissing","typeMismatch","patternMismatch","tooLong","tooShort","rangeUnderflow","rangeOverflow","stepMismatch","badInput"];getCustomMessage(t){if(!t.validity)return null;const e=this.messagePrefix;for(const i of this.validityKeys)if(i in t.validity&&t.validity[i])return t.getAttribute(`${e}-${i}`)??t.getAttribute(`data-${e}-${i}`);return null}getValidatableInputs(t){return Array.from(t.elements??[]).filter(this.isValidatableInput)}scrollToElement(t){const e=this.getAttribute("scroll-container");if(e){const i=document.querySelector(e);if(i){const e=i.getBoundingClientRect(),s=t.getBoundingClientRect(),a=this.scrollIntoViewOptions,n="boolean"==typeof a?"auto":a.behavior||"auto";return void i.scrollTo({top:i.scrollTop+(s.top-e.top),left:i.scrollLeft+(s.left-e.left),behavior:n})}}t.scrollIntoView(this.scrollIntoViewOptions)}getLabel(t){return t.id?document.querySelector(`label[for=${CSS.escape(t.id)}]`):null}}customElements.define("validation-enhancer",t);export{t as ValidationEnhancer};