@travelopia/web-components 0.5.21 → 0.5.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/form/index.js +1 -1
- package/dist/form/index.js.map +1 -1
- package/package.json +1 -1
package/dist/form/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(()=>{"use strict";var t={d:(e,r)=>{for(var i in r)t.o(r,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:r[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{errorMessage:()=>
|
|
1
|
+
(()=>{"use strict";var t={d:(e,r)=>{for(var i in r)t.o(r,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:r[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{errorMessage:()=>l,name:()=>o,validator:()=>d});var r={};t.r(r),t.d(r,{errorMessage:()=>v,name:()=>u,validator:()=>m});var i={};t.r(i),t.d(i,{errorMessage:()=>c,name:()=>h,validator:()=>b});var s={};t.r(s),t.d(s,{errorMessage:()=>p,name:()=>g,validator:()=>f});var n={};t.r(n),t.d(n,{errorMessage:()=>y,name:()=>E,validator:()=>A});const a=(t="")=>{const{tpFormErrors:e}=window;return e&&""!==t&&t in e&&"string"==typeof e[t]?e[t]:""},o="required",l="This field is required",d={validate:t=>{var e,r;return null!==(r=""!==(null===(e=t.getField())||void 0===e?void 0:e.value))&&void 0!==r?r:""},getErrorMessage:()=>a(o)},u="email",v="Please enter a valid email address",m={validate:t=>{var e,r;return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(null!==(r=null===(e=t.getField())||void 0===e?void 0:e.value)&&void 0!==r?r:"")},getErrorMessage:()=>a(u)},h="min-length",c="Must be at least %1 characters",b={validate:t=>{var e,r,i;const s=parseInt(null!==(e=t.getAttribute("min-length"))&&void 0!==e?e:"0"),n=null!==(i=null===(r=t.getField())||void 0===r?void 0:r.value)&&void 0!==i?i:"";return""===n||n.length>=s},getErrorMessage:t=>{var e;const r=a(h),i=null!==(e=t.getAttribute("min-length"))&&void 0!==e?e:"";return r.replace("%1",i)}},g="max-length",p="Must be less than %1 characters",f={validate:t=>{var e,r,i;const s=parseInt(null!==(e=t.getAttribute("max-length"))&&void 0!==e?e:"0"),n=null!==(i=null===(r=t.getField())||void 0===r?void 0:r.value)&&void 0!==i?i:"";return""===n||n.length<=s},getErrorMessage:t=>{var e;const r=a(g),i=null!==(e=t.getAttribute("max-length"))&&void 0!==e?e:"";return r.replace("%1",i)}},E="no-empty-spaces",y="This field should not contain only whitespaces",A={validate:t=>{const e=t.getField();return!!e&&(""===e.value||""!==e.value.trim())},getErrorMessage:()=>a(E)};class M extends HTMLElement{constructor(){super(),this.form=this.querySelector("form")}connectedCallback(){var t;null===(t=this.form)||void 0===t||t.addEventListener("submit",this.handleFormSubmit.bind(this))}handleFormSubmit(t){const e=this.validate();e&&"yes"!==this.getAttribute("prevent-submit")||(t.preventDefault(),t.stopImmediatePropagation());const r=this.querySelector("tp-form-submit");r&&(e?r.setAttribute("submitting","yes"):r.removeAttribute("submitting")),e&&this.dispatchEvent(new CustomEvent("submit-validation-success",{bubbles:!0}))}validate(){this.dispatchEvent(new CustomEvent("validate",{bubbles:!0}));const t=this.querySelectorAll("tp-form-field");if(!t)return this.dispatchEvent(new CustomEvent("validation-success",{bubbles:!0})),!0;let e=!0;return t.forEach((t=>{t.validate()||(e=!1)})),e?this.dispatchEvent(new CustomEvent("validation-success",{bubbles:!0})):this.dispatchEvent(new CustomEvent("validation-error",{bubbles:!0})),e}resetValidation(){const t=this.querySelectorAll("tp-form-field");if(!t)return;t.forEach((t=>{t.removeAttribute("valid"),t.removeAttribute("error")}));const e=this.querySelector("tp-form-submit");null==e||e.removeAttribute("submitting")}}class w extends HTMLElement{connectedCallback(){const t=this.getField();null==t||t.addEventListener("keyup",this.handleFieldChanged.bind(this)),null==t||t.addEventListener("change",this.handleFieldChanged.bind(this))}handleFieldChanged(){(this.getAttribute("valid")||this.getAttribute("error"))&&this.validate()}static get observedAttributes(){return["valid","error"]}attributeChangedCallback(t="",e="",r=""){"valid"!==t&&"error"!==t||e===r||this.dispatchEvent(new CustomEvent("validate",{bubbles:!0})),this.update()}update(){var t;const{tpFormValidators:e}=window;if(!e)return;const r=null!==(t=this.getAttribute("error"))&&void 0!==t?t:"";""!==r&&r in e&&"function"==typeof e[r].getErrorMessage?this.setErrorMessage(e[r].getErrorMessage(this)):this.removeErrorMessage()}getField(){return this.querySelector("input,select,textarea")}validate(){const{tpFormValidators:t}=window;if(!t)return!0;if(this.offsetWidth<=0||this.offsetHeight<=0)return!0;let e=!0,r="";return this.getAttributeNames().every((i=>!(i in t)||"function"!=typeof t[i].validate||!1!==t[i].validate(this)||(e=!1,r=i,!1))),e?(this.setAttribute("valid","yes"),this.removeAttribute("error")):(this.removeAttribute("valid"),this.setAttribute("error",r)),e}setErrorMessage(t=""){const e=this.querySelector("tp-form-error");if(e)e.innerHTML=t;else{const e=document.createElement("tp-form-error");e.innerHTML=t,this.appendChild(e)}this.dispatchEvent(new CustomEvent("validation-error"))}removeErrorMessage(){var t;null===(t=this.querySelector("tp-form-error"))||void 0===t||t.remove(),this.dispatchEvent(new CustomEvent("validation-success"))}}class F extends HTMLElement{}class C extends HTMLElement{static get observedAttributes(){return["submitting-text","original-text","submitting"]}attributeChangedCallback(t="",e="",r=""){e!==r&&this.update()}update(){var t,e;const r=this.querySelector('button[type="submit"]');if(!r)return;const i=null!==(t=this.getAttribute("submitting-text"))&&void 0!==t?t:"",s=null!==(e=this.getAttribute("original-text"))&&void 0!==e?e:r.innerHTML;"yes"===this.getAttribute("submitting")?(r.setAttribute("disabled","disabled"),this.setAttribute("original-text",s),r.innerHTML=i):(r.removeAttribute("disabled"),this.removeAttribute("submitting"),this.removeAttribute("original-text"),r.innerHTML=s)}}const S=[e,r,i,s,n];window.tpFormValidators={},window.tpFormErrors={},S.forEach((({name:t,validator:e,errorMessage:r})=>{window.tpFormValidators[t]=e,window.tpFormErrors[t]=r})),customElements.define("tp-form",M),customElements.define("tp-form-field",w),customElements.define("tp-form-error",F),customElements.define("tp-form-submit",C)})();
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/form/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dist/form/index.js","mappings":"mBACA,IAAIA,EAAsB,CCA1BA,EAAwB,CAACC,EAASC,KACjC,IAAI,IAAIC,KAAOD,EACXF,EAAoBI,EAAEF,EAAYC,KAASH,EAAoBI,EAAEH,EAASE,IAC5EE,OAAOC,eAAeL,EAASE,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDH,EAAwB,CAACS,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFV,EAAyBC,IACH,oBAAXa,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeL,EAASa,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeL,EAAS,aAAc,CAAEe,OAAO,GAAO,G,wRCEvD,MAAMC,EAAkB,CAAEC,EAAgB,MAChD,MAAM,aAAEC,GAAiBC,OACzB,OAAOD,GAIF,KAAOD,GAASA,KAASC,GAAgB,iBAAoBA,EAAcD,GACxEC,EAAcD,GAJd,EAOC,ECPG,EAAe,WAKfG,EAAuB,yBAKvBC,EAA6B,CACzCC,SAAYC,I,QACX,OAAqC,QAA9B,QAAuB,QAAhB,EAAAA,EAAMC,kBAAU,eAAET,cAAK,QAAI,EAAE,EAE5CC,gBAAiB,IAAcA,EAAiB,ICdpC,EAAe,QAKf,EAAuB,qCAKvB,EAA6B,CACzCM,SAAYC,I,QACX,MAAO,6BAA6BE,KAA6B,QAAvB,EAAgB,QAAhB,EAAAF,EAAMC,kBAAU,eAAET,aAAK,QAAI,GAAI,EAE1EC,gBAAiB,IAAcA,EAAiB,ICdpC,EAAe,aAKf,EAAuB,iCAKvB,EAA6B,CACzCM,SAAYC,I,UACX,MAAMG,EAAoBC,SAA4C,QAAlC,EAAAJ,EAAMK,aAAc,qBAAc,QAAI,KACpEb,EAAuC,QAAvB,EAAgB,QAAhB,EAAAQ,EAAMC,kBAAU,eAAET,aAAK,QAAI,GAEjD,MAAO,KAAOA,GAASA,EAAMc,QAAUH,CAAS,EAEjDV,gBAAmBO,I,MAClB,MAAMN,EAAgBD,EAAiB,GACjCU,EAAsD,QAAlC,EAAAH,EAAMK,aAAc,qBAAc,QAAI,GAEhE,OAAOX,EAAMa,QAAS,KAAMJ,EAAW,GCrB5B,EAAe,aAKf,EAAuB,kCAKvB,EAA6B,CACzCJ,SAAYC,I,UACX,MAAMG,EAAoBC,SAA4C,QAAlC,EAAAJ,EAAMK,aAAc,qBAAc,QAAI,KACpEb,EAAuC,QAAvB,EAAgB,QAAhB,EAAAQ,EAAMC,kBAAU,eAAET,aAAK,QAAI,GAEjD,MAAO,KAAOA,GAASA,EAAMc,QAAUH,CAAS,EAEjDV,gBAAmBO,I,MAClB,MAAMN,EAAgBD,EAAiB,GACjCe,EAAsD,QAAlC,EAAAR,EAAMK,aAAc,qBAAc,QAAI,GAEhE,OAAOX,EAAMa,QAAS,KAAMC,EAAW,GCtBlC,MAAMC,UAAsBC,YASlC,WAAAC,GACCC,QACAC,KAAKC,KAAOD,KAAKE,cAAe,OACjC,CAKA,iBAAAC,G,MACU,QAAT,EAAAH,KAAKC,YAAI,SAAEG,iBAAkB,SAAUJ,KAAKK,iBAAiBC,KAAMN,MACpE,CAOU,gBAAAK,CAAkBE,GAC3B,MAAMC,EAAqBR,KAAKd,WACzBsB,GAAa,QAAUR,KAAKR,aAAc,oBAChDe,EAAEE,iBACFF,EAAEG,4BAGH,MAAMC,EAAqCX,KAAKE,cAAe,kBAC1DS,IACCH,EACJG,EAAOC,aAAc,aAAc,OAEnCD,EAAOE,gBAAiB,eAIrBL,GACJR,KAAKc,cAAe,IAAIC,YAAa,4BAA6B,CAAEC,SAAS,IAE/E,CAOA,QAAA9B,GACCc,KAAKc,cAAe,IAAIC,YAAa,WAAY,CAAEC,SAAS,KAE5D,MAAMC,EAAgDjB,KAAKkB,iBAAkB,iBAC7E,IAAOD,EAEN,OADAjB,KAAKc,cAAe,IAAIC,YAAa,qBAAsB,CAAEC,SAAS,MAC/D,EAGR,IAAIR,GAAqB,EAazB,OAZAS,EAAOE,SAAWhC,IACVA,EAAMD,aACZsB,GAAY,E,IAITA,EACJR,KAAKc,cAAe,IAAIC,YAAa,qBAAsB,CAAEC,SAAS,KAEtEhB,KAAKc,cAAe,IAAIC,YAAa,mBAAoB,CAAEC,SAAS,KAG9DR,CACR,CAKA,eAAAY,GACC,MAAMH,EAAgDjB,KAAKkB,iBAAkB,iBAC7E,IAAOD,EACN,OAGDA,EAAOE,SAAWhC,IACjBA,EAAM0B,gBAAiB,SACvB1B,EAAM0B,gBAAiB,QAAS,IAGjC,MAAMF,EAAqCX,KAAKE,cAAe,kBAC/DS,SAAAA,EAAQE,gBAAiB,aAC1B,EC9FM,MAAMQ,UAA2BxB,YAIvC,iBAAAM,GACC,MAAMhB,EAAQa,KAAKZ,WACnBD,SAAAA,EAAOiB,iBAAkB,QAASJ,KAAKsB,mBAAmBhB,KAAMN,OAChEb,SAAAA,EAAOiB,iBAAkB,SAAUJ,KAAKsB,mBAAmBhB,KAAMN,MAClE,CAKA,kBAAAsB,IACMtB,KAAKR,aAAc,UAAaQ,KAAKR,aAAc,WACvDQ,KAAKd,UAEP,CAOA,6BAAWqC,GACV,MAAO,CAAE,QAAS,QACnB,CASA,wBAAAC,CAA0BC,EAAe,GAAIC,EAAmB,GAAIC,EAAmB,IAC/E,UAAYF,GAAQ,UAAYA,GAAUC,IAAaC,GAC7D3B,KAAKc,cAAe,IAAIC,YAAa,WAAY,CAAEC,SAAS,KAE7DhB,KAAK4B,QACN,CAKA,MAAAA,G,MACC,MAAM,iBAAEC,GAAqB9C,OAC7B,IAAO8C,EACN,OAGD,MAAMhD,EAA4C,QAA5B,EAAAmB,KAAKR,aAAc,gBAAS,QAAI,GACjD,KAAOX,GAASA,KAASgD,GAAoB,mBAAsBA,EAAkBhD,GAAQD,gBACjGoB,KAAK8B,gBAAiBD,EAAkBhD,GAAQD,gBAAiBoB,OAEjEA,KAAK+B,oBAEP,CAOA,QAAA3C,GACC,OAAOY,KAAKE,cAAe,wBAC5B,CAOA,QAAAhB,GAEC,MAAM,iBAAE2C,GAAqB9C,OAC7B,IAAO8C,EACN,OAAO,EAIR,GAAK7B,KAAKgC,aAAe,GAAKhC,KAAKiC,cAAgB,EAClD,OAAO,EAIR,IAAIC,GAAiB,EACjBrD,EAAgB,GA+BpB,OA9BgCmB,KAAKmC,oBAGvBC,OAASC,KACjBA,KAAiBR,IAAoB,mBAAsBA,EAAkBQ,GAAgBnD,WAK5F,IAHoB2C,EAAkBQ,GAAgBnD,SAAUc,QAIpEkC,GAAQ,EACRrD,EAAQwD,GACD,KASLH,GACJlC,KAAKY,aAAc,QAAS,OAC5BZ,KAAKa,gBAAiB,WAEtBb,KAAKa,gBAAiB,SACtBb,KAAKY,aAAc,QAAS/B,IAItBqD,CACR,CAOA,eAAAJ,CAAiBQ,EAAkB,IAClC,MAAMzD,EAAmCmB,KAAKE,cAAe,iBAC7D,GAAKrB,EACJA,EAAM0D,UAAYD,MACZ,CACN,MAAME,EAAmCC,SAASC,cAAe,iBACjEF,EAAaD,UAAYD,EACzBtC,KAAK2C,YAAaH,E,CAGnBxC,KAAKc,cAAe,IAAIC,YAAa,oBACtC,CAKA,kBAAAgB,G,MACsC,QAArC,EAAA/B,KAAKE,cAAe,wBAAiB,SAAE0C,SACvC5C,KAAKc,cAAe,IAAIC,YAAa,sBACtC,ECtJM,MAAM8B,UAA2BhD,aCAjC,MAAMiD,UAA4BjD,YAMxC,6BAAW0B,GACV,MAAO,CAAE,kBAAmB,gBAAiB,aAC9C,CASA,wBAAAC,CAA0BuB,EAAgB,GAAIrB,EAAmB,GAAIC,EAAmB,IAClFD,IAAaC,GACjB3B,KAAK4B,QAEP,CAKA,MAAAA,G,QAEC,MAAMoB,EAAyChD,KAAKE,cAAe,yBACnE,IAAO8C,EACN,OAID,MAAMC,EAA+D,QAAtC,EAAAjD,KAAKR,aAAc,0BAAmB,QAAI,GACnE0D,EAA2D,QAApC,EAAAlD,KAAKR,aAAc,wBAAiB,QAAIwD,EAAaT,UAG7E,QAAUvC,KAAKR,aAAc,eACjCwD,EAAapC,aAAc,WAAY,YACvCZ,KAAKY,aAAc,gBAAiBsC,GACpCF,EAAaT,UAAYU,IAEzBD,EAAanC,gBAAiB,YAC9Bb,KAAKa,gBAAiB,cACtBb,KAAKa,gBAAiB,iBACtBmC,EAAaT,UAAYW,EAE3B,ECrCD,MAAMC,EAAa,CAClB,EACA,EACA,EACA,GAMDpE,OAAO8C,iBAAmB,CAAC,EAC3B9C,OAAOD,aAAe,CAAC,EAEvBqE,EAAWhC,SAAS,EACjBM,OAAMxC,YAAWD,mBAEnBD,OAAO8C,iBAAkBJ,GAASxC,EAClCF,OAAOD,aAAc2C,GAASzC,CAAY,IAc3CoE,eAAeC,OAAQ,UAAWzD,GAClCwD,eAAeC,OAAQ,gBAAiBhC,GACxC+B,eAAeC,OAAQ,gBAAiBR,GACxCO,eAAeC,OAAQ,iBAAkBP,E","sources":["webpack://@travelopia/web-components/webpack/bootstrap","webpack://@travelopia/web-components/webpack/runtime/define property getters","webpack://@travelopia/web-components/webpack/runtime/hasOwnProperty shorthand","webpack://@travelopia/web-components/webpack/runtime/make namespace object","webpack://@travelopia/web-components/./src/form/utility.ts","webpack://@travelopia/web-components/./src/form/validators/required.ts","webpack://@travelopia/web-components/./src/form/validators/email.ts","webpack://@travelopia/web-components/./src/form/validators/min-length.ts","webpack://@travelopia/web-components/./src/form/validators/max-length.ts","webpack://@travelopia/web-components/./src/form/tp-form.ts","webpack://@travelopia/web-components/./src/form/tp-form-field.ts","webpack://@travelopia/web-components/./src/form/tp-form-error.ts","webpack://@travelopia/web-components/./src/form/tp-form-submit.ts","webpack://@travelopia/web-components/./src/form/index.ts"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","/**\n * Get the error message based on its code.\n *\n * @param {string} error Error code.\n *\n * @return {string} The error message.\n */\nexport const getErrorMessage = ( error: string = '' ): string => {\n\tconst { tpFormErrors } = window;\n\tif ( ! tpFormErrors ) {\n\t\treturn '';\n\t}\n\n\tif ( '' !== error && error in tpFormErrors && 'string' === typeof tpFormErrors[ error ] ) {\n\t\treturn tpFormErrors[ error ];\n\t}\n\n\treturn '';\n};\n","/**\n * Internal dependencies.\n */\nimport { TPFormFieldElement } from '../tp-form-field';\nimport { TPFormValidator } from '../definitions';\nimport { getErrorMessage } from '../utility';\n\n/**\n * Name.\n */\nexport const name: string = 'required';\n\n/**\n * Error message.\n */\nexport const errorMessage: string = 'This field is required';\n\n/**\n * Validator.\n */\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\treturn '' !== field.getField()?.value ?? '';\n\t},\n\tgetErrorMessage: (): string => getErrorMessage( name ),\n};\n","/**\n * Internal dependencies.\n */\nimport { TPFormFieldElement } from '../tp-form-field';\nimport { TPFormValidator } from '../definitions';\nimport { getErrorMessage } from '../utility';\n\n/**\n * Name.\n */\nexport const name: string = 'email';\n\n/**\n * Error message.\n */\nexport const errorMessage: string = 'Please enter a valid email address';\n\n/**\n * Validator.\n */\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\treturn /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test( field.getField()?.value ?? '' );\n\t},\n\tgetErrorMessage: (): string => getErrorMessage( name ),\n};\n","/**\n * Internal dependencies.\n */\nimport { TPFormFieldElement } from '../tp-form-field';\nimport { TPFormValidator } from '../definitions';\nimport { getErrorMessage } from '../utility';\n\n/**\n * Name.\n */\nexport const name: string = 'min-length';\n\n/**\n * Error message.\n */\nexport const errorMessage: string = 'Must be at least %1 characters';\n\n/**\n * Validator.\n */\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\tconst minLength: number = parseInt( field.getAttribute( 'min-length' ) ?? '0' );\n\t\tconst value: string = field.getField()?.value ?? '';\n\n\t\treturn '' === value || value.length >= minLength;\n\t},\n\tgetErrorMessage: ( field: TPFormFieldElement ): string => {\n\t\tconst error: string = getErrorMessage( name );\n\t\tconst minLength: string = field.getAttribute( 'min-length' ) ?? '';\n\n\t\treturn error.replace( '%1', minLength );\n\t},\n};\n","/**\n * Internal dependencies.\n */\nimport { TPFormFieldElement } from '../tp-form-field';\nimport { TPFormValidator } from '../definitions';\nimport { getErrorMessage } from '../utility';\n\n/**\n * Name.\n */\nexport const name: string = 'max-length';\n\n/**\n * Error message.\n */\nexport const errorMessage: string = 'Must be less than %1 characters';\n\n/**\n * Validator.\n */\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\tconst minLength: number = parseInt( field.getAttribute( 'max-length' ) ?? '0' );\n\t\tconst value: string = field.getField()?.value ?? '';\n\n\t\treturn '' === value || value.length <= minLength;\n\t},\n\tgetErrorMessage: ( field: TPFormFieldElement ): string => {\n\t\tconst error: string = getErrorMessage( name );\n\t\tconst maxLength: string = field.getAttribute( 'max-length' ) ?? '';\n\n\t\treturn error.replace( '%1', maxLength );\n\t},\n};\n","/**\n * Internal dependencies.\n */\nimport { TPFormFieldElement } from './tp-form-field';\nimport { TPFormSubmitElement } from './tp-form-submit';\n\n/**\n * TP Form.\n */\nexport class TPFormElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected readonly form: HTMLFormElement | null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tthis.form = this.querySelector( 'form' );\n\t}\n\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback(): void {\n\t\tthis.form?.addEventListener( 'submit', this.handleFormSubmit.bind( this ) );\n\t}\n\n\t/**\n\t * Handle form submission.\n\t *\n\t * @param {Event} e Submit event.\n\t */\n\tprotected handleFormSubmit( e: SubmitEvent ): void {\n\t\tconst formValid: boolean = this.validate();\n\t\tif ( ! formValid || 'yes' === this.getAttribute( 'prevent-submit' ) ) {\n\t\t\te.preventDefault();\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\n\t\tconst submit: TPFormSubmitElement | null = this.querySelector( 'tp-form-submit' );\n\t\tif ( submit ) {\n\t\t\tif ( formValid ) {\n\t\t\t\tsubmit.setAttribute( 'submitting', 'yes' );\n\t\t\t} else {\n\t\t\t\tsubmit.removeAttribute( 'submitting' );\n\t\t\t}\n\t\t}\n\n\t\tif ( formValid ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'submit-validation-success', { bubbles: true } ) );\n\t\t}\n\t}\n\n\t/**\n\t * Validate the form.\n\t *\n\t * @return {boolean} Whether the form is valid or not.\n\t */\n\tvalidate(): boolean {\n\t\tthis.dispatchEvent( new CustomEvent( 'validate', { bubbles: true } ) );\n\n\t\tconst fields: NodeListOf<TPFormFieldElement> | null = this.querySelectorAll( 'tp-form-field' );\n\t\tif ( ! fields ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-success', { bubbles: true } ) );\n\t\t\treturn true;\n\t\t}\n\n\t\tlet formValid: boolean = true;\n\t\tfields.forEach( ( field: TPFormFieldElement ): void => {\n\t\t\tif ( ! field.validate() ) {\n\t\t\t\tformValid = false;\n\t\t\t}\n\t\t} );\n\n\t\tif ( formValid ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-success', { bubbles: true } ) );\n\t\t} else {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-error', { bubbles: true } ) );\n\t\t}\n\n\t\treturn formValid;\n\t}\n\n\t/**\n\t * Reset form validation.\n\t */\n\tresetValidation(): void {\n\t\tconst fields: NodeListOf<TPFormFieldElement> | null = this.querySelectorAll( 'tp-form-field' );\n\t\tif ( ! fields ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfields.forEach( ( field: TPFormFieldElement ): void => {\n\t\t\tfield.removeAttribute( 'valid' );\n\t\t\tfield.removeAttribute( 'error' );\n\t\t} );\n\n\t\tconst submit: TPFormSubmitElement | null = this.querySelector( 'tp-form-submit' );\n\t\tsubmit?.removeAttribute( 'submitting' );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPFormErrorElement } from './tp-form-error';\n\n/**\n * TP Form Field.\n */\nexport class TPFormFieldElement extends HTMLElement {\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback(): void {\n\t\tconst field = this.getField();\n\t\tfield?.addEventListener( 'keyup', this.handleFieldChanged.bind( this ) );\n\t\tfield?.addEventListener( 'change', this.handleFieldChanged.bind( this ) );\n\t}\n\n\t/**\n\t * Update validation when the field has changed.\n\t */\n\thandleFieldChanged(): void {\n\t\tif ( this.getAttribute( 'valid' ) || this.getAttribute( 'error' ) ) {\n\t\t\tthis.validate();\n\t\t}\n\t}\n\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} List of observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'valid', 'error' ];\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t *\n\t * @param {string} name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t */\n\tattributeChangedCallback( name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( ( 'valid' === name || 'error' === name ) && oldValue !== newValue ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validate', { bubbles: true } ) );\n\t\t}\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update component.\n\t */\n\tupdate(): void {\n\t\tconst { tpFormValidators } = window;\n\t\tif ( ! tpFormValidators ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst error: string = this.getAttribute( 'error' ) ?? '';\n\t\tif ( '' !== error && error in tpFormValidators && 'function' === typeof tpFormValidators[ error ].getErrorMessage ) {\n\t\t\tthis.setErrorMessage( tpFormValidators[ error ].getErrorMessage( this ) );\n\t\t} else {\n\t\t\tthis.removeErrorMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Get the associated field.\n\t *\n\t * @return {HTMLElement} The associated field for this component.\n\t */\n\tgetField(): HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null {\n\t\treturn this.querySelector( 'input,select,textarea' );\n\t}\n\n\t/**\n\t * Validate this field.\n\t *\n\t * @return {boolean} Whether this field passed validation.\n\t */\n\tvalidate(): boolean {\n\t\t// Look for validators.\n\t\tconst { tpFormValidators } = window;\n\t\tif ( ! tpFormValidators ) {\n\t\t\treturn true;\n\t\t}\n\n\t\t// Check if the field is not visible.\n\t\tif ( this.offsetWidth <= 0 || this.offsetHeight <= 0 ) {\n\t\t\treturn true;\n\t\t}\n\n\t\t// Prepare error and valid status.\n\t\tlet valid: boolean = true;\n\t\tlet error: string = '';\n\t\tconst allAttributes: string[] = this.getAttributeNames();\n\n\t\t// Traverse all attributes to see if we find a matching validator.\n\t\tallAttributes.every( ( attributeName: string ): boolean => {\n\t\t\tif ( attributeName in tpFormValidators && 'function' === typeof tpFormValidators[ attributeName ].validate ) {\n\t\t\t\t// We found one, lets validate the field.\n\t\t\t\tconst isValid: boolean = tpFormValidators[ attributeName ].validate( this );\n\n\t\t\t\t// Looks like we found an error!\n\t\t\t\tif ( false === isValid ) {\n\t\t\t\t\tvalid = false;\n\t\t\t\t\terror = attributeName;\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// No error found, all good.\n\t\t\treturn true;\n\t\t} );\n\n\t\t// Check if the field is valid or not.\n\t\tif ( valid ) {\n\t\t\tthis.setAttribute( 'valid', 'yes' );\n\t\t\tthis.removeAttribute( 'error' );\n\t\t} else {\n\t\t\tthis.removeAttribute( 'valid' );\n\t\t\tthis.setAttribute( 'error', error );\n\t\t}\n\n\t\t// Return validity.\n\t\treturn valid;\n\t}\n\n\t/**\n\t * Set the error message.\n\t *\n\t * @param {string} message Error message.\n\t */\n\tsetErrorMessage( message: string = '' ): void {\n\t\tconst error: TPFormErrorElement | null = this.querySelector( 'tp-form-error' );\n\t\tif ( error ) {\n\t\t\terror.innerHTML = message;\n\t\t} else {\n\t\t\tconst errorElement: TPFormErrorElement = document.createElement( 'tp-form-error' );\n\t\t\terrorElement.innerHTML = message;\n\t\t\tthis.appendChild( errorElement );\n\t\t}\n\n\t\tthis.dispatchEvent( new CustomEvent( 'validation-error' ) );\n\t}\n\n\t/**\n\t * Remove the error message.\n\t */\n\tremoveErrorMessage(): void {\n\t\tthis.querySelector( 'tp-form-error' )?.remove();\n\t\tthis.dispatchEvent( new CustomEvent( 'validation-success' ) );\n\t}\n}\n","/**\n * TP Form Error.\n */\nexport class TPFormErrorElement extends HTMLElement {\n}\n","/**\n * TP Form Submit.\n */\nexport class TPFormSubmitElement extends HTMLElement {\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} List of observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'submitting-text', 'original-text', 'submitting' ];\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t *\n\t * @param {string} _name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t */\n\tattributeChangedCallback( _name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( oldValue !== newValue ) {\n\t\t\tthis.update();\n\t\t}\n\t}\n\n\t/**\n\t * Update this component.\n\t */\n\tupdate(): void {\n\t\t// Get submit button.\n\t\tconst submitButton: HTMLButtonElement | null = this.querySelector( 'button[type=\"submit\"]' );\n\t\tif ( ! submitButton ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Prepare submit button text.\n\t\tconst submittingText: string = this.getAttribute( 'submitting-text' ) ?? '';\n\t\tconst originalText: string = this.getAttribute( 'original-text' ) ?? submitButton.innerHTML;\n\n\t\t// Check if we are submitting.\n\t\tif ( 'yes' === this.getAttribute( 'submitting' ) ) {\n\t\t\tsubmitButton.setAttribute( 'disabled', 'disabled' );\n\t\t\tthis.setAttribute( 'original-text', originalText );\n\t\t\tsubmitButton.innerHTML = submittingText;\n\t\t} else {\n\t\t\tsubmitButton.removeAttribute( 'disabled' );\n\t\t\tthis.removeAttribute( 'submitting' );\n\t\t\tthis.removeAttribute( 'original-text' );\n\t\t\tsubmitButton.innerHTML = originalText;\n\t\t}\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Validators.\n */\nimport { TPFormValidator } from './definitions';\nimport * as required from './validators/required';\nimport * as email from './validators/email';\nimport * as minLength from './validators/min-length';\nimport * as maxLength from './validators/max-length';\n\nconst validators = [\n\trequired,\n\temail,\n\tminLength,\n\tmaxLength,\n];\n\n/**\n * Register Validators and Errors.\n */\nwindow.tpFormValidators = {};\nwindow.tpFormErrors = {};\n\nvalidators.forEach( (\n\t{ name, validator, errorMessage }: { name: string, validator: TPFormValidator, errorMessage: string }\n): void => {\n\twindow.tpFormValidators[ name ] = validator;\n\twindow.tpFormErrors[ name ] = errorMessage;\n} );\n\n/**\n * Components.\n */\nimport { TPFormElement } from './tp-form';\nimport { TPFormFieldElement } from './tp-form-field';\nimport { TPFormErrorElement } from './tp-form-error';\nimport { TPFormSubmitElement } from './tp-form-submit';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-form', TPFormElement );\ncustomElements.define( 'tp-form-field', TPFormFieldElement );\ncustomElements.define( 'tp-form-error', TPFormErrorElement );\ncustomElements.define( 'tp-form-submit', TPFormSubmitElement );\n\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","getErrorMessage","error","tpFormErrors","window","errorMessage","validator","validate","field","getField","test","minLength","parseInt","getAttribute","length","replace","maxLength","TPFormElement","HTMLElement","constructor","super","this","form","querySelector","connectedCallback","addEventListener","handleFormSubmit","bind","e","formValid","preventDefault","stopImmediatePropagation","submit","setAttribute","removeAttribute","dispatchEvent","CustomEvent","bubbles","fields","querySelectorAll","forEach","resetValidation","TPFormFieldElement","handleFieldChanged","observedAttributes","attributeChangedCallback","name","oldValue","newValue","update","tpFormValidators","setErrorMessage","removeErrorMessage","offsetWidth","offsetHeight","valid","getAttributeNames","every","attributeName","message","innerHTML","errorElement","document","createElement","appendChild","remove","TPFormErrorElement","TPFormSubmitElement","_name","submitButton","submittingText","originalText","validators","customElements","define"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"dist/form/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/webpack/bootstrap","webpack://@travelopia/web-components/webpack/runtime/define property getters","webpack://@travelopia/web-components/webpack/runtime/hasOwnProperty shorthand","webpack://@travelopia/web-components/webpack/runtime/make namespace object","webpack://@travelopia/web-components/./src/form/utility.ts","webpack://@travelopia/web-components/./src/form/validators/required.ts","webpack://@travelopia/web-components/./src/form/validators/email.ts","webpack://@travelopia/web-components/./src/form/validators/min-length.ts","webpack://@travelopia/web-components/./src/form/validators/max-length.ts","webpack://@travelopia/web-components/./src/form/validators/no-empty-spaces.ts","webpack://@travelopia/web-components/./src/form/tp-form.ts","webpack://@travelopia/web-components/./src/form/tp-form-field.ts","webpack://@travelopia/web-components/./src/form/tp-form-error.ts","webpack://@travelopia/web-components/./src/form/tp-form-submit.ts","webpack://@travelopia/web-components/./src/form/index.ts"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","/**\n * Get the error message based on its code.\n *\n * @param {string} error Error code.\n *\n * @return {string} The error message.\n */\nexport const getErrorMessage = ( error: string = '' ): string => {\n\tconst { tpFormErrors } = window;\n\tif ( ! tpFormErrors ) {\n\t\treturn '';\n\t}\n\n\tif ( '' !== error && error in tpFormErrors && 'string' === typeof tpFormErrors[ error ] ) {\n\t\treturn tpFormErrors[ error ];\n\t}\n\n\treturn '';\n};\n","/**\n * Internal dependencies.\n */\nimport { TPFormFieldElement } from '../tp-form-field';\nimport { TPFormValidator } from '../definitions';\nimport { getErrorMessage } from '../utility';\n\n/**\n * Name.\n */\nexport const name: string = 'required';\n\n/**\n * Error message.\n */\nexport const errorMessage: string = 'This field is required';\n\n/**\n * Validator.\n */\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\treturn '' !== field.getField()?.value ?? '';\n\t},\n\tgetErrorMessage: (): string => getErrorMessage( name ),\n};\n","/**\n * Internal dependencies.\n */\nimport { TPFormFieldElement } from '../tp-form-field';\nimport { TPFormValidator } from '../definitions';\nimport { getErrorMessage } from '../utility';\n\n/**\n * Name.\n */\nexport const name: string = 'email';\n\n/**\n * Error message.\n */\nexport const errorMessage: string = 'Please enter a valid email address';\n\n/**\n * Validator.\n */\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\treturn /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test( field.getField()?.value ?? '' );\n\t},\n\tgetErrorMessage: (): string => getErrorMessage( name ),\n};\n","/**\n * Internal dependencies.\n */\nimport { TPFormFieldElement } from '../tp-form-field';\nimport { TPFormValidator } from '../definitions';\nimport { getErrorMessage } from '../utility';\n\n/**\n * Name.\n */\nexport const name: string = 'min-length';\n\n/**\n * Error message.\n */\nexport const errorMessage: string = 'Must be at least %1 characters';\n\n/**\n * Validator.\n */\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\tconst minLength: number = parseInt( field.getAttribute( 'min-length' ) ?? '0' );\n\t\tconst value: string = field.getField()?.value ?? '';\n\n\t\treturn '' === value || value.length >= minLength;\n\t},\n\tgetErrorMessage: ( field: TPFormFieldElement ): string => {\n\t\tconst error: string = getErrorMessage( name );\n\t\tconst minLength: string = field.getAttribute( 'min-length' ) ?? '';\n\n\t\treturn error.replace( '%1', minLength );\n\t},\n};\n","/**\n * Internal dependencies.\n */\nimport { TPFormFieldElement } from '../tp-form-field';\nimport { TPFormValidator } from '../definitions';\nimport { getErrorMessage } from '../utility';\n\n/**\n * Name.\n */\nexport const name: string = 'max-length';\n\n/**\n * Error message.\n */\nexport const errorMessage: string = 'Must be less than %1 characters';\n\n/**\n * Validator.\n */\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\tconst minLength: number = parseInt( field.getAttribute( 'max-length' ) ?? '0' );\n\t\tconst value: string = field.getField()?.value ?? '';\n\n\t\treturn '' === value || value.length <= minLength;\n\t},\n\tgetErrorMessage: ( field: TPFormFieldElement ): string => {\n\t\tconst error: string = getErrorMessage( name );\n\t\tconst maxLength: string = field.getAttribute( 'max-length' ) ?? '';\n\n\t\treturn error.replace( '%1', maxLength );\n\t},\n};\n","/**\n * Internal dependencies.\n */\nimport { TPFormFieldElement } from '../tp-form-field';\nimport { TPFormValidator } from '../definitions';\nimport { getErrorMessage } from '../utility';\n\n/**\n * Name.\n */\nexport const name: string = 'no-empty-spaces';\n\n/**\n * Error message.\n */\nexport const errorMessage: string = 'This field should not contain only whitespaces';\n\n/**\n * Validator.\n */\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\tconst inputField = field.getField();\n\n\t\tif ( ! inputField ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// This case is not our concern. This is handled by `required` validator.\n\t\tif ( '' === inputField.value ) {\n\t\t\treturn true;\n\t\t}\n\n\t\treturn '' !== inputField.value.trim();\n\t},\n\tgetErrorMessage: (): string => getErrorMessage( name ),\n};\n","/**\n * Internal dependencies.\n */\nimport { TPFormFieldElement } from './tp-form-field';\nimport { TPFormSubmitElement } from './tp-form-submit';\n\n/**\n * TP Form.\n */\nexport class TPFormElement extends HTMLElement {\n\t/**\n\t * Properties.\n\t */\n\tprotected readonly form: HTMLFormElement | null;\n\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tthis.form = this.querySelector( 'form' );\n\t}\n\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback(): void {\n\t\tthis.form?.addEventListener( 'submit', this.handleFormSubmit.bind( this ) );\n\t}\n\n\t/**\n\t * Handle form submission.\n\t *\n\t * @param {Event} e Submit event.\n\t */\n\tprotected handleFormSubmit( e: SubmitEvent ): void {\n\t\tconst formValid: boolean = this.validate();\n\t\tif ( ! formValid || 'yes' === this.getAttribute( 'prevent-submit' ) ) {\n\t\t\te.preventDefault();\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\n\t\tconst submit: TPFormSubmitElement | null = this.querySelector( 'tp-form-submit' );\n\t\tif ( submit ) {\n\t\t\tif ( formValid ) {\n\t\t\t\tsubmit.setAttribute( 'submitting', 'yes' );\n\t\t\t} else {\n\t\t\t\tsubmit.removeAttribute( 'submitting' );\n\t\t\t}\n\t\t}\n\n\t\tif ( formValid ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'submit-validation-success', { bubbles: true } ) );\n\t\t}\n\t}\n\n\t/**\n\t * Validate the form.\n\t *\n\t * @return {boolean} Whether the form is valid or not.\n\t */\n\tvalidate(): boolean {\n\t\tthis.dispatchEvent( new CustomEvent( 'validate', { bubbles: true } ) );\n\n\t\tconst fields: NodeListOf<TPFormFieldElement> | null = this.querySelectorAll( 'tp-form-field' );\n\t\tif ( ! fields ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-success', { bubbles: true } ) );\n\t\t\treturn true;\n\t\t}\n\n\t\tlet formValid: boolean = true;\n\t\tfields.forEach( ( field: TPFormFieldElement ): void => {\n\t\t\tif ( ! field.validate() ) {\n\t\t\t\tformValid = false;\n\t\t\t}\n\t\t} );\n\n\t\tif ( formValid ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-success', { bubbles: true } ) );\n\t\t} else {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-error', { bubbles: true } ) );\n\t\t}\n\n\t\treturn formValid;\n\t}\n\n\t/**\n\t * Reset form validation.\n\t */\n\tresetValidation(): void {\n\t\tconst fields: NodeListOf<TPFormFieldElement> | null = this.querySelectorAll( 'tp-form-field' );\n\t\tif ( ! fields ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfields.forEach( ( field: TPFormFieldElement ): void => {\n\t\t\tfield.removeAttribute( 'valid' );\n\t\t\tfield.removeAttribute( 'error' );\n\t\t} );\n\n\t\tconst submit: TPFormSubmitElement | null = this.querySelector( 'tp-form-submit' );\n\t\tsubmit?.removeAttribute( 'submitting' );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPFormErrorElement } from './tp-form-error';\n\n/**\n * TP Form Field.\n */\nexport class TPFormFieldElement extends HTMLElement {\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback(): void {\n\t\tconst field = this.getField();\n\t\tfield?.addEventListener( 'keyup', this.handleFieldChanged.bind( this ) );\n\t\tfield?.addEventListener( 'change', this.handleFieldChanged.bind( this ) );\n\t}\n\n\t/**\n\t * Update validation when the field has changed.\n\t */\n\thandleFieldChanged(): void {\n\t\tif ( this.getAttribute( 'valid' ) || this.getAttribute( 'error' ) ) {\n\t\t\tthis.validate();\n\t\t}\n\t}\n\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} List of observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'valid', 'error' ];\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t *\n\t * @param {string} name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t */\n\tattributeChangedCallback( name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( ( 'valid' === name || 'error' === name ) && oldValue !== newValue ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validate', { bubbles: true } ) );\n\t\t}\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update component.\n\t */\n\tupdate(): void {\n\t\tconst { tpFormValidators } = window;\n\t\tif ( ! tpFormValidators ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst error: string = this.getAttribute( 'error' ) ?? '';\n\t\tif ( '' !== error && error in tpFormValidators && 'function' === typeof tpFormValidators[ error ].getErrorMessage ) {\n\t\t\tthis.setErrorMessage( tpFormValidators[ error ].getErrorMessage( this ) );\n\t\t} else {\n\t\t\tthis.removeErrorMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Get the associated field.\n\t *\n\t * @return {HTMLElement} The associated field for this component.\n\t */\n\tgetField(): HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null {\n\t\treturn this.querySelector( 'input,select,textarea' );\n\t}\n\n\t/**\n\t * Validate this field.\n\t *\n\t * @return {boolean} Whether this field passed validation.\n\t */\n\tvalidate(): boolean {\n\t\t// Look for validators.\n\t\tconst { tpFormValidators } = window;\n\t\tif ( ! tpFormValidators ) {\n\t\t\treturn true;\n\t\t}\n\n\t\t// Check if the field is not visible.\n\t\tif ( this.offsetWidth <= 0 || this.offsetHeight <= 0 ) {\n\t\t\treturn true;\n\t\t}\n\n\t\t// Prepare error and valid status.\n\t\tlet valid: boolean = true;\n\t\tlet error: string = '';\n\t\tconst allAttributes: string[] = this.getAttributeNames();\n\n\t\t// Traverse all attributes to see if we find a matching validator.\n\t\tallAttributes.every( ( attributeName: string ): boolean => {\n\t\t\tif ( attributeName in tpFormValidators && 'function' === typeof tpFormValidators[ attributeName ].validate ) {\n\t\t\t\t// We found one, lets validate the field.\n\t\t\t\tconst isValid: boolean = tpFormValidators[ attributeName ].validate( this );\n\n\t\t\t\t// Looks like we found an error!\n\t\t\t\tif ( false === isValid ) {\n\t\t\t\t\tvalid = false;\n\t\t\t\t\terror = attributeName;\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// No error found, all good.\n\t\t\treturn true;\n\t\t} );\n\n\t\t// Check if the field is valid or not.\n\t\tif ( valid ) {\n\t\t\tthis.setAttribute( 'valid', 'yes' );\n\t\t\tthis.removeAttribute( 'error' );\n\t\t} else {\n\t\t\tthis.removeAttribute( 'valid' );\n\t\t\tthis.setAttribute( 'error', error );\n\t\t}\n\n\t\t// Return validity.\n\t\treturn valid;\n\t}\n\n\t/**\n\t * Set the error message.\n\t *\n\t * @param {string} message Error message.\n\t */\n\tsetErrorMessage( message: string = '' ): void {\n\t\tconst error: TPFormErrorElement | null = this.querySelector( 'tp-form-error' );\n\t\tif ( error ) {\n\t\t\terror.innerHTML = message;\n\t\t} else {\n\t\t\tconst errorElement: TPFormErrorElement = document.createElement( 'tp-form-error' );\n\t\t\terrorElement.innerHTML = message;\n\t\t\tthis.appendChild( errorElement );\n\t\t}\n\n\t\tthis.dispatchEvent( new CustomEvent( 'validation-error' ) );\n\t}\n\n\t/**\n\t * Remove the error message.\n\t */\n\tremoveErrorMessage(): void {\n\t\tthis.querySelector( 'tp-form-error' )?.remove();\n\t\tthis.dispatchEvent( new CustomEvent( 'validation-success' ) );\n\t}\n}\n","/**\n * TP Form Error.\n */\nexport class TPFormErrorElement extends HTMLElement {\n}\n","/**\n * TP Form Submit.\n */\nexport class TPFormSubmitElement extends HTMLElement {\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} List of observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'submitting-text', 'original-text', 'submitting' ];\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t *\n\t * @param {string} _name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t */\n\tattributeChangedCallback( _name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( oldValue !== newValue ) {\n\t\t\tthis.update();\n\t\t}\n\t}\n\n\t/**\n\t * Update this component.\n\t */\n\tupdate(): void {\n\t\t// Get submit button.\n\t\tconst submitButton: HTMLButtonElement | null = this.querySelector( 'button[type=\"submit\"]' );\n\t\tif ( ! submitButton ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Prepare submit button text.\n\t\tconst submittingText: string = this.getAttribute( 'submitting-text' ) ?? '';\n\t\tconst originalText: string = this.getAttribute( 'original-text' ) ?? submitButton.innerHTML;\n\n\t\t// Check if we are submitting.\n\t\tif ( 'yes' === this.getAttribute( 'submitting' ) ) {\n\t\t\tsubmitButton.setAttribute( 'disabled', 'disabled' );\n\t\t\tthis.setAttribute( 'original-text', originalText );\n\t\t\tsubmitButton.innerHTML = submittingText;\n\t\t} else {\n\t\t\tsubmitButton.removeAttribute( 'disabled' );\n\t\t\tthis.removeAttribute( 'submitting' );\n\t\t\tthis.removeAttribute( 'original-text' );\n\t\t\tsubmitButton.innerHTML = originalText;\n\t\t}\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Validators.\n */\nimport { TPFormValidator } from './definitions';\nimport * as required from './validators/required';\nimport * as email from './validators/email';\nimport * as minLength from './validators/min-length';\nimport * as maxLength from './validators/max-length';\nimport * as noEmptySpaces from './validators/no-empty-spaces';\n\nconst validators = [\n\trequired,\n\temail,\n\tminLength,\n\tmaxLength,\n\tnoEmptySpaces,\n];\n\n/**\n * Register Validators and Errors.\n */\nwindow.tpFormValidators = {};\nwindow.tpFormErrors = {};\n\nvalidators.forEach( (\n\t{ name, validator, errorMessage }: { name: string, validator: TPFormValidator, errorMessage: string }\n): void => {\n\twindow.tpFormValidators[ name ] = validator;\n\twindow.tpFormErrors[ name ] = errorMessage;\n} );\n\n/**\n * Components.\n */\nimport { TPFormElement } from './tp-form';\nimport { TPFormFieldElement } from './tp-form-field';\nimport { TPFormErrorElement } from './tp-form-error';\nimport { TPFormSubmitElement } from './tp-form-submit';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-form', TPFormElement );\ncustomElements.define( 'tp-form-field', TPFormFieldElement );\ncustomElements.define( 'tp-form-error', TPFormErrorElement );\ncustomElements.define( 'tp-form-submit', TPFormSubmitElement );\n\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","getErrorMessage","error","tpFormErrors","window","errorMessage","validator","validate","field","getField","test","minLength","parseInt","getAttribute","length","replace","maxLength","inputField","trim","TPFormElement","HTMLElement","constructor","super","this","form","querySelector","connectedCallback","addEventListener","handleFormSubmit","bind","e","formValid","preventDefault","stopImmediatePropagation","submit","setAttribute","removeAttribute","dispatchEvent","CustomEvent","bubbles","fields","querySelectorAll","forEach","resetValidation","TPFormFieldElement","handleFieldChanged","observedAttributes","attributeChangedCallback","name","oldValue","newValue","update","tpFormValidators","setErrorMessage","removeErrorMessage","offsetWidth","offsetHeight","valid","getAttributeNames","every","attributeName","message","innerHTML","errorElement","document","createElement","appendChild","remove","TPFormErrorElement","TPFormSubmitElement","_name","submitButton","submittingText","originalText","validators","customElements","define"],"sourceRoot":""}
|